@shival99/z-ui 2.0.47 → 2.0.48
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-command.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-command.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-input.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-input.mjs.map +1 -1
- package/package.json +1 -1
- package/types/shival99-z-ui-components-z-table.d.ts +2 -2
|
@@ -285,13 +285,13 @@ class ZCommandComponent {
|
|
|
285
285
|
});
|
|
286
286
|
}
|
|
287
287
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
288
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZCommandComponent, isStandalone: true, selector: "z-command", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zGroups: { classPropertyName: "zGroups", publicName: "zGroups", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zSelect: "zSelect", zAfterClose: "zAfterClose", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "dummyTemplateRef", first: true, predicate: ["dummyTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["zCommand"], ngImport: i0, template: "<ng-template #dummyTemplate />\n\n@if (shouldRenderContent()) {\n <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n <!-- Search Bar -->\n <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n <input\n type=\"text\"\n [placeholder]=\"zPlaceholder() | translate\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"onSearchQueryChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n #searchInput />\n <kbd\n class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n <span>ESC</span>\n </kbd>\n </div>\n\n <!-- Scrollable Results List using NgScrollbar -->\n <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n <div class=\"space-y-1 p-2\">\n @if (flattenedItems().length === 0) {\n <div class=\"text-muted-foreground py-6 text-center text-sm\">\n {{ 'i18n_z_ui_command_no_results' | translate }}\n </div>\n } @else {\n @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n @if (!isFirst) {\n <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n }\n\n <div\n class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n {{ group.heading }}\n </div>\n\n <div class=\"space-y-0.5\">\n @for (item of group.items; track item.id) {\n <div\n class=\"z-command-item flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n (mouseenter)=\"selectedIndex.set(item.globalIndex
|
|
288
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZCommandComponent, isStandalone: true, selector: "z-command", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zGroups: { classPropertyName: "zGroups", publicName: "zGroups", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zSelect: "zSelect", zAfterClose: "zAfterClose", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "dummyTemplateRef", first: true, predicate: ["dummyTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["zCommand"], ngImport: i0, template: "<ng-template #dummyTemplate />\n\n@if (shouldRenderContent()) {\n <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n <!-- Search Bar -->\n <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n <input\n type=\"text\"\n [placeholder]=\"zPlaceholder() | translate\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"onSearchQueryChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n #searchInput />\n <kbd\n class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n <span>ESC</span>\n </kbd>\n </div>\n\n <!-- Scrollable Results List using NgScrollbar -->\n <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n <div class=\"space-y-1 p-2\">\n @if (flattenedItems().length === 0) {\n <div class=\"text-muted-foreground py-6 text-center text-sm\">\n {{ 'i18n_z_ui_command_no_results' | translate }}\n </div>\n } @else {\n @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n @if (!isFirst) {\n <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n }\n\n <div\n class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n {{ group.heading }}\n </div>\n\n <div class=\"space-y-0.5\">\n @for (item of group.items; track item.id) {\n <div\n class=\"z-command-item flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n (click)=\"selectItem(item)\">\n <div class=\"flex items-center gap-2.5\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n }\n <span>{{ item.label }}</span>\n </div>\n\n @if (item.shortcut) {\n <kbd\n class=\"text-muted-foreground bg-muted/50 border-border/40 rounded border px-1 font-mono text-[9px]\">\n {{ item.shortcut }}\n </kbd>\n }\n </div>\n }\n </div>\n }\n }\n </div>\n </ng-scrollbar>\n </div>\n}\n", styles: [":host.z-command-template-mode{--z-enter-opacity: 0;--z-enter-scale: .97;transform-origin:center center;animation:z-enter .18s cubic-bezier(.16,1,.3,1) forwards}:host.z-command-template-mode.command-leave{--z-exit-opacity: 0;--z-exit-scale: .97;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-command-template-host{display:contents}.z-command-item{color:hsl(var(--foreground)/.85);transition:background-color .12s ease,color .12s ease}.z-command-item:hover,.z-command-item.z-command-item-active{background-color:color-mix(in srgb,var(--primary) 12%,transparent)!important;color:var(--primary)!important}ng-scrollbar.z-command-scrollbar{max-height:330px;display:block}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
289
289
|
}
|
|
290
290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZCommandComponent, decorators: [{
|
|
291
291
|
type: Component,
|
|
292
292
|
args: [{ selector: 'z-command', imports: [PortalModule, FormsModule, ZIconComponent, TranslatePipe, NgScrollbar], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
293
293
|
'[class]': 'hostClasses()',
|
|
294
|
-
}, exportAs: 'zCommand', template: "<ng-template #dummyTemplate />\n\n@if (shouldRenderContent()) {\n <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n <!-- Search Bar -->\n <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n <input\n type=\"text\"\n [placeholder]=\"zPlaceholder() | translate\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"onSearchQueryChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n #searchInput />\n <kbd\n class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n <span>ESC</span>\n </kbd>\n </div>\n\n <!-- Scrollable Results List using NgScrollbar -->\n <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n <div class=\"space-y-1 p-2\">\n @if (flattenedItems().length === 0) {\n <div class=\"text-muted-foreground py-6 text-center text-sm\">\n {{ 'i18n_z_ui_command_no_results' | translate }}\n </div>\n } @else {\n @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n @if (!isFirst) {\n <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n }\n\n <div\n class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n {{ group.heading }}\n </div>\n\n <div class=\"space-y-0.5\">\n @for (item of group.items; track item.id) {\n <div\n class=\"z-command-item flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n (mouseenter)=\"selectedIndex.set(item.globalIndex
|
|
294
|
+
}, exportAs: 'zCommand', template: "<ng-template #dummyTemplate />\n\n@if (shouldRenderContent()) {\n <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n <!-- Search Bar -->\n <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n <input\n type=\"text\"\n [placeholder]=\"zPlaceholder() | translate\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"onSearchQueryChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n #searchInput />\n <kbd\n class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n <span>ESC</span>\n </kbd>\n </div>\n\n <!-- Scrollable Results List using NgScrollbar -->\n <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n <div class=\"space-y-1 p-2\">\n @if (flattenedItems().length === 0) {\n <div class=\"text-muted-foreground py-6 text-center text-sm\">\n {{ 'i18n_z_ui_command_no_results' | translate }}\n </div>\n } @else {\n @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n @if (!isFirst) {\n <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n }\n\n <div\n class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n {{ group.heading }}\n </div>\n\n <div class=\"space-y-0.5\">\n @for (item of group.items; track item.id) {\n <div\n class=\"z-command-item flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n (click)=\"selectItem(item)\">\n <div class=\"flex items-center gap-2.5\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n }\n <span>{{ item.label }}</span>\n </div>\n\n @if (item.shortcut) {\n <kbd\n class=\"text-muted-foreground bg-muted/50 border-border/40 rounded border px-1 font-mono text-[9px]\">\n {{ item.shortcut }}\n </kbd>\n }\n </div>\n }\n </div>\n }\n }\n </div>\n </ng-scrollbar>\n </div>\n}\n", styles: [":host.z-command-template-mode{--z-enter-opacity: 0;--z-enter-scale: .97;transform-origin:center center;animation:z-enter .18s cubic-bezier(.16,1,.3,1) forwards}:host.z-command-template-mode.command-leave{--z-exit-opacity: 0;--z-exit-scale: .97;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-command-template-host{display:contents}.z-command-item{color:hsl(var(--foreground)/.85);transition:background-color .12s ease,color .12s ease}.z-command-item:hover,.z-command-item.z-command-item-active{background-color:color-mix(in srgb,var(--primary) 12%,transparent)!important;color:var(--primary)!important}ng-scrollbar.z-command-scrollbar{max-height:330px;display:block}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}\n"] }]
|
|
295
295
|
}], ctorParameters: () => [], propDecorators: { zSelect: [{ type: i0.Output, args: ["zSelect"] }], zAfterClose: [{ type: i0.Output, args: ["zAfterClose"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVisible", required: false }] }, { type: i0.Output, args: ["zVisibleChange"] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGroups", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], dummyTemplateRef: [{ type: i0.ViewChild, args: ['dummyTemplate', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
|
|
296
296
|
|
|
297
297
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shival99-z-ui-components-z-command.mjs","sources":["../../../../libs/core-ui/components/z-command/z-command.define.ts","../../../../libs/core-ui/components/z-command/z-command.component.ts","../../../../libs/core-ui/components/z-command/z-command.component.html","../../../../libs/core-ui/components/z-command/shival99-z-ui-components-z-command.ts"],"sourcesContent":["import { zDetectBrowser } from '@shival99/z-ui/utils';\n\nexport const getOverlayType = (): 'dark' | 'blur' => {\n const browser = zDetectBrowser();\n if (browser.name === 'Chrome') {\n return 'dark';\n }\n return 'blur';\n};\n","import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';\nimport { PortalModule, TemplatePortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n effect,\n ElementRef,\n inject,\n input,\n model,\n OnDestroy,\n output,\n PLATFORM_ID,\n signal,\n type TemplateRef,\n viewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZOverlayContainerService, ZOverlayZIndexService, ZTranslateService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { NgScrollbar } from 'ngx-scrollbar';\nimport { Subscription } from 'rxjs';\nimport { getOverlayType } from './z-command.define';\nimport { ZCommandGroup, ZCommandItem } from './z-command.types';\n\n@Component({\n selector: 'z-command',\n imports: [PortalModule, FormsModule, ZIconComponent, TranslatePipe, NgScrollbar],\n standalone: true,\n templateUrl: './z-command.component.html',\n styleUrl: './z-command.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'hostClasses()',\n },\n exportAs: 'zCommand',\n})\nexport class ZCommandComponent implements OnDestroy {\n public readonly zSelect = output<ZCommandItem>();\n public readonly zAfterClose = output<void>();\n\n public readonly class = input<ClassValue>('');\n public readonly zVisible = model<boolean>(false);\n public readonly zPlaceholder = input<string>('i18n_z_ui_command_search');\n public readonly zGroups = input<ZCommandGroup[]>([]);\n public readonly zOverlay = input<'dark' | 'blur'>(getOverlayType());\n\n protected readonly dummyTemplateRef = viewChild<TemplateRef<unknown>>('dummyTemplate');\n protected readonly searchInputRef = viewChild<ElementRef<HTMLInputElement>>('searchInput');\n\n private readonly _platformId = inject(PLATFORM_ID);\n private readonly _host = inject(ElementRef<HTMLElement>);\n private readonly _overlay = inject(Overlay);\n private readonly _viewContainerRef = inject(ViewContainerRef);\n private readonly _cdr = inject(ChangeDetectorRef);\n private readonly _destroyRef = inject(DestroyRef);\n private readonly _zTranslate = inject(ZTranslateService);\n private readonly _overlayContainerService = inject(ZOverlayContainerService);\n private readonly _zIndexService = inject(ZOverlayZIndexService);\n\n private _templateOverlayRef: OverlayRef | null = null;\n private _originalParent: HTMLElement | null = null;\n private _originalNextSibling: Node | null = null;\n private _backdropSubscription: Subscription | null = null;\n private _closeTimeout: ReturnType<typeof setTimeout> | null = null;\n\n protected readonly isLeaving = signal(false);\n protected readonly shouldRenderContent = computed(() => this.zVisible() || this.isLeaving());\n protected readonly searchQuery = signal('');\n protected readonly selectedIndex = signal(0);\n\n protected readonly filteredGroups = computed(() => {\n const query = this.searchQuery().toLowerCase().trim();\n const groups = this.zGroups();\n\n if (!query) {\n let currentIndex = 0;\n return groups.map(group => {\n const itemsWithIdx = group.items.map(item => {\n const itemWithIdx = { ...item, globalIndex: currentIndex };\n currentIndex++;\n return itemWithIdx;\n });\n return { ...group, items: itemsWithIdx };\n });\n }\n\n const matchedGroups = groups\n .map(group => ({\n ...group,\n items: group.items.filter(\n item => item.label.toLowerCase().includes(query) || group.heading.toLowerCase().includes(query)\n ),\n }))\n .filter(group => group.items.length > 0);\n\n let currentIndex = 0;\n return matchedGroups.map(group => {\n const itemsWithIdx = group.items.map(item => {\n const itemWithIdx = { ...item, globalIndex: currentIndex };\n currentIndex++;\n return itemWithIdx;\n });\n return { ...group, items: itemsWithIdx };\n });\n });\n\n protected readonly flattenedItems = computed(() =>\n this.filteredGroups().reduce<ZCommandItem[]>((acc, group) => acc.concat(group.items), [])\n );\n\n protected readonly classes = computed(() =>\n zMergeClasses(\n 'z-command-dialog border-border bg-popover text-popover-foreground fixed top-[15vh] left-1/2 -translate-x-1/2 w-[calc(100vw-2rem)] sm:w-full max-w-[640px] rounded-xl border shadow-2xl overflow-hidden flex flex-col',\n this.class()\n )\n );\n\n protected readonly hostClasses = computed(() => {\n const baseClasses = this.classes();\n if (this.shouldRenderContent()) {\n return `${baseClasses} z-command-template-mode`.trim();\n }\n return 'z-command-template-host hidden';\n });\n\n constructor() {\n effect(() => {\n this._zTranslate.currentLang();\n this._cdr.markForCheck();\n });\n\n effect(() => {\n const visible = this.zVisible();\n if (visible && !this._templateOverlayRef) {\n this._openTemplateOverlay();\n return;\n }\n\n if (!visible && this._templateOverlayRef && !this.isLeaving()) {\n this._closeWithAnimation();\n }\n });\n\n // Reset selectedIndex whenever search query changes\n effect(() => {\n this.searchQuery();\n this.selectedIndex.set(0);\n });\n }\n\n public ngOnDestroy(): void {\n this._clearCloseTimeout();\n this._disposeTemplateOverlay();\n }\n\n public isDestroyed(): boolean {\n return this._destroyRef.destroyed;\n }\n\n public getNativeElement(): HTMLElement {\n return this._host.nativeElement;\n }\n\n public onSearchQueryChange(query: string): void {\n this.searchQuery.set(query);\n }\n\n public onKeyDown(event: KeyboardEvent): void {\n const items = this.flattenedItems();\n if (!items.length) {\n if (event.key === 'Escape') {\n this.close();\n }\n return;\n }\n\n if (event.key === 'ArrowDown' || event.key === 'Down') {\n event.preventDefault();\n this.selectedIndex.set((this.selectedIndex() + 1) % items.length);\n this._scrollToSelected();\n return;\n }\n if (event.key === 'ArrowUp' || event.key === 'Up') {\n event.preventDefault();\n this.selectedIndex.set((this.selectedIndex() - 1 + items.length) % items.length);\n this._scrollToSelected();\n return;\n }\n if (event.key === 'Enter') {\n event.preventDefault();\n this.selectItem(items[this.selectedIndex()]);\n return;\n }\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n return;\n }\n }\n\n protected selectItem(item: ZCommandItem): void {\n this.zSelect.emit(item);\n this.close();\n }\n\n public open(): void {\n this.isLeaving.set(false);\n this.zVisible.set(true);\n }\n\n public close(): void {\n this._closeWithAnimation();\n }\n\n private _createOverlay(): OverlayRef | null {\n if (!isPlatformBrowser(this._platformId)) {\n return null;\n }\n\n const overlayType = this.zOverlay();\n const backdropClass = overlayType === 'blur' ? 'z-modal-backdrop-blur' : 'z-modal-backdrop-dark';\n const overlayConfig = new OverlayConfig({\n hasBackdrop: true,\n backdropClass,\n panelClass: 'z-command-overlay-pane',\n positionStrategy: this._overlay.position().global(),\n scrollStrategy: this._overlay.scrollStrategies.block(),\n });\n\n return this._overlay.create(overlayConfig);\n }\n\n private _openTemplateOverlay(): void {\n if (this._templateOverlayRef) {\n return;\n }\n\n const dummyRef = this.dummyTemplateRef();\n if (!dummyRef) {\n return;\n }\n\n this._templateOverlayRef = this._createOverlay();\n if (!this._templateOverlayRef) {\n return;\n }\n\n this._zIndexService.applyToOverlay(this._templateOverlayRef);\n this._zIndexService.deferMoveToTop(this._templateOverlayRef);\n\n const hostElement = this._host.nativeElement;\n this._originalParent = hostElement.parentElement;\n this._originalNextSibling = hostElement.nextSibling;\n\n const portal = new TemplatePortal(dummyRef, this._viewContainerRef);\n this._templateOverlayRef.attach(portal);\n\n const overlayPane = this._templateOverlayRef.overlayElement;\n overlayPane.style.position = 'static';\n overlayPane.appendChild(hostElement);\n\n this._backdropSubscription = this._templateOverlayRef.backdropClick().subscribe(() => {\n this.close();\n });\n\n this.searchQuery.set('');\n this.selectedIndex.set(0);\n\n // Focus input after render\n setTimeout(() => {\n const inputEl = this.searchInputRef()?.nativeElement;\n if (inputEl) {\n inputEl.focus();\n }\n }, 100);\n }\n\n private _closeWithAnimation(): void {\n if (this.isLeaving()) {\n return;\n }\n\n this._overlayContainerService.notifyClosing();\n this.isLeaving.set(true);\n this.zVisible.set(false);\n\n const hostElement = this._host.nativeElement;\n const { backdropElement } = this._templateOverlayRef ?? {};\n\n if (backdropElement) {\n backdropElement.classList.add('z-backdrop-leaving');\n }\n\n hostElement.classList.add('command-leave');\n\n this._clearCloseTimeout();\n this._closeTimeout = setTimeout(() => {\n if (this._destroyRef.destroyed) {\n return;\n }\n\n this.isLeaving.set(false);\n this._disposeTemplateOverlay();\n this.zAfterClose.emit();\n }, 150);\n }\n\n private _clearCloseTimeout(): void {\n if (!this._closeTimeout) {\n return;\n }\n\n clearTimeout(this._closeTimeout);\n this._closeTimeout = null;\n }\n\n private _disposeTemplateOverlay(): void {\n const hostElement = this._host.nativeElement;\n\n if (this._originalParent && this._originalNextSibling) {\n this._originalParent.insertBefore(hostElement, this._originalNextSibling);\n }\n\n if (this._originalParent && !this._originalNextSibling) {\n this._originalParent.appendChild(hostElement);\n }\n\n hostElement.classList.remove('command-leave');\n if (this._templateOverlayRef) {\n this._templateOverlayRef.dispose();\n this._templateOverlayRef = null;\n }\n\n this._originalParent = null;\n this._originalNextSibling = null;\n\n if (this._backdropSubscription) {\n this._backdropSubscription.unsubscribe();\n this._backdropSubscription = null;\n }\n }\n\n private _scrollToSelected(): void {\n setTimeout(() => {\n const scrollbar = this._host.nativeElement.querySelector('ng-scrollbar');\n const viewport = scrollbar?.querySelector('.ng-scroll-viewport') as HTMLElement;\n const selected = scrollbar?.querySelector('.z-command-item-active') as HTMLElement;\n if (!viewport || !selected) {\n return;\n }\n const cTop = viewport.scrollTop;\n const cBottom = cTop + viewport.clientHeight;\n const sTop = selected.offsetTop;\n const sBottom = sTop + selected.clientHeight;\n\n if (sTop < cTop) {\n viewport.scrollTop = sTop;\n return;\n }\n if (sBottom > cBottom) {\n viewport.scrollTop = sBottom - viewport.clientHeight;\n return;\n }\n });\n }\n}\n","<ng-template #dummyTemplate />\n\n@if (shouldRenderContent()) {\n <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n <!-- Search Bar -->\n <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n <input\n type=\"text\"\n [placeholder]=\"zPlaceholder() | translate\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"onSearchQueryChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n #searchInput />\n <kbd\n class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n <span>ESC</span>\n </kbd>\n </div>\n\n <!-- Scrollable Results List using NgScrollbar -->\n <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n <div class=\"space-y-1 p-2\">\n @if (flattenedItems().length === 0) {\n <div class=\"text-muted-foreground py-6 text-center text-sm\">\n {{ 'i18n_z_ui_command_no_results' | translate }}\n </div>\n } @else {\n @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n @if (!isFirst) {\n <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n }\n\n <div\n class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n {{ group.heading }}\n </div>\n\n <div class=\"space-y-0.5\">\n @for (item of group.items; track item.id) {\n <div\n class=\"z-command-item flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n (mouseenter)=\"selectedIndex.set(item.globalIndex ?? 0)\"\n (click)=\"selectItem(item)\">\n <div class=\"flex items-center gap-2.5\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n }\n <span>{{ item.label }}</span>\n </div>\n\n @if (item.shortcut) {\n <kbd\n class=\"text-muted-foreground bg-muted/50 border-border/40 rounded border px-1 font-mono text-[9px]\">\n {{ item.shortcut }}\n </kbd>\n }\n </div>\n }\n </div>\n }\n }\n </div>\n </ng-scrollbar>\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shival99-z-ui-components-z-command.mjs","sources":["../../../../libs/core-ui/components/z-command/z-command.define.ts","../../../../libs/core-ui/components/z-command/z-command.component.ts","../../../../libs/core-ui/components/z-command/z-command.component.html","../../../../libs/core-ui/components/z-command/shival99-z-ui-components-z-command.ts"],"sourcesContent":["import { zDetectBrowser } from '@shival99/z-ui/utils';\n\nexport const getOverlayType = (): 'dark' | 'blur' => {\n const browser = zDetectBrowser();\n if (browser.name === 'Chrome') {\n return 'dark';\n }\n return 'blur';\n};\n","import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';\nimport { PortalModule, TemplatePortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n effect,\n ElementRef,\n inject,\n input,\n model,\n OnDestroy,\n output,\n PLATFORM_ID,\n signal,\n type TemplateRef,\n viewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZOverlayContainerService, ZOverlayZIndexService, ZTranslateService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { NgScrollbar } from 'ngx-scrollbar';\nimport { Subscription } from 'rxjs';\nimport { getOverlayType } from './z-command.define';\nimport { ZCommandGroup, ZCommandItem } from './z-command.types';\n\n@Component({\n selector: 'z-command',\n imports: [PortalModule, FormsModule, ZIconComponent, TranslatePipe, NgScrollbar],\n standalone: true,\n templateUrl: './z-command.component.html',\n styleUrl: './z-command.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'hostClasses()',\n },\n exportAs: 'zCommand',\n})\nexport class ZCommandComponent implements OnDestroy {\n public readonly zSelect = output<ZCommandItem>();\n public readonly zAfterClose = output<void>();\n\n public readonly class = input<ClassValue>('');\n public readonly zVisible = model<boolean>(false);\n public readonly zPlaceholder = input<string>('i18n_z_ui_command_search');\n public readonly zGroups = input<ZCommandGroup[]>([]);\n public readonly zOverlay = input<'dark' | 'blur'>(getOverlayType());\n\n protected readonly dummyTemplateRef = viewChild<TemplateRef<unknown>>('dummyTemplate');\n protected readonly searchInputRef = viewChild<ElementRef<HTMLInputElement>>('searchInput');\n\n private readonly _platformId = inject(PLATFORM_ID);\n private readonly _host = inject(ElementRef<HTMLElement>);\n private readonly _overlay = inject(Overlay);\n private readonly _viewContainerRef = inject(ViewContainerRef);\n private readonly _cdr = inject(ChangeDetectorRef);\n private readonly _destroyRef = inject(DestroyRef);\n private readonly _zTranslate = inject(ZTranslateService);\n private readonly _overlayContainerService = inject(ZOverlayContainerService);\n private readonly _zIndexService = inject(ZOverlayZIndexService);\n\n private _templateOverlayRef: OverlayRef | null = null;\n private _originalParent: HTMLElement | null = null;\n private _originalNextSibling: Node | null = null;\n private _backdropSubscription: Subscription | null = null;\n private _closeTimeout: ReturnType<typeof setTimeout> | null = null;\n\n protected readonly isLeaving = signal(false);\n protected readonly shouldRenderContent = computed(() => this.zVisible() || this.isLeaving());\n protected readonly searchQuery = signal('');\n protected readonly selectedIndex = signal(0);\n\n protected readonly filteredGroups = computed(() => {\n const query = this.searchQuery().toLowerCase().trim();\n const groups = this.zGroups();\n\n if (!query) {\n let currentIndex = 0;\n return groups.map(group => {\n const itemsWithIdx = group.items.map(item => {\n const itemWithIdx = { ...item, globalIndex: currentIndex };\n currentIndex++;\n return itemWithIdx;\n });\n return { ...group, items: itemsWithIdx };\n });\n }\n\n const matchedGroups = groups\n .map(group => ({\n ...group,\n items: group.items.filter(\n item => item.label.toLowerCase().includes(query) || group.heading.toLowerCase().includes(query)\n ),\n }))\n .filter(group => group.items.length > 0);\n\n let currentIndex = 0;\n return matchedGroups.map(group => {\n const itemsWithIdx = group.items.map(item => {\n const itemWithIdx = { ...item, globalIndex: currentIndex };\n currentIndex++;\n return itemWithIdx;\n });\n return { ...group, items: itemsWithIdx };\n });\n });\n\n protected readonly flattenedItems = computed(() =>\n this.filteredGroups().reduce<ZCommandItem[]>((acc, group) => acc.concat(group.items), [])\n );\n\n protected readonly classes = computed(() =>\n zMergeClasses(\n 'z-command-dialog border-border bg-popover text-popover-foreground fixed top-[15vh] left-1/2 -translate-x-1/2 w-[calc(100vw-2rem)] sm:w-full max-w-[640px] rounded-xl border shadow-2xl overflow-hidden flex flex-col',\n this.class()\n )\n );\n\n protected readonly hostClasses = computed(() => {\n const baseClasses = this.classes();\n if (this.shouldRenderContent()) {\n return `${baseClasses} z-command-template-mode`.trim();\n }\n return 'z-command-template-host hidden';\n });\n\n constructor() {\n effect(() => {\n this._zTranslate.currentLang();\n this._cdr.markForCheck();\n });\n\n effect(() => {\n const visible = this.zVisible();\n if (visible && !this._templateOverlayRef) {\n this._openTemplateOverlay();\n return;\n }\n\n if (!visible && this._templateOverlayRef && !this.isLeaving()) {\n this._closeWithAnimation();\n }\n });\n\n // Reset selectedIndex whenever search query changes\n effect(() => {\n this.searchQuery();\n this.selectedIndex.set(0);\n });\n }\n\n public ngOnDestroy(): void {\n this._clearCloseTimeout();\n this._disposeTemplateOverlay();\n }\n\n public isDestroyed(): boolean {\n return this._destroyRef.destroyed;\n }\n\n public getNativeElement(): HTMLElement {\n return this._host.nativeElement;\n }\n\n public onSearchQueryChange(query: string): void {\n this.searchQuery.set(query);\n }\n\n public onKeyDown(event: KeyboardEvent): void {\n const items = this.flattenedItems();\n if (!items.length) {\n if (event.key === 'Escape') {\n this.close();\n }\n return;\n }\n\n if (event.key === 'ArrowDown' || event.key === 'Down') {\n event.preventDefault();\n this.selectedIndex.set((this.selectedIndex() + 1) % items.length);\n this._scrollToSelected();\n return;\n }\n if (event.key === 'ArrowUp' || event.key === 'Up') {\n event.preventDefault();\n this.selectedIndex.set((this.selectedIndex() - 1 + items.length) % items.length);\n this._scrollToSelected();\n return;\n }\n if (event.key === 'Enter') {\n event.preventDefault();\n this.selectItem(items[this.selectedIndex()]);\n return;\n }\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n return;\n }\n }\n\n protected selectItem(item: ZCommandItem): void {\n this.zSelect.emit(item);\n this.close();\n }\n\n public open(): void {\n this.isLeaving.set(false);\n this.zVisible.set(true);\n }\n\n public close(): void {\n this._closeWithAnimation();\n }\n\n private _createOverlay(): OverlayRef | null {\n if (!isPlatformBrowser(this._platformId)) {\n return null;\n }\n\n const overlayType = this.zOverlay();\n const backdropClass = overlayType === 'blur' ? 'z-modal-backdrop-blur' : 'z-modal-backdrop-dark';\n const overlayConfig = new OverlayConfig({\n hasBackdrop: true,\n backdropClass,\n panelClass: 'z-command-overlay-pane',\n positionStrategy: this._overlay.position().global(),\n scrollStrategy: this._overlay.scrollStrategies.block(),\n });\n\n return this._overlay.create(overlayConfig);\n }\n\n private _openTemplateOverlay(): void {\n if (this._templateOverlayRef) {\n return;\n }\n\n const dummyRef = this.dummyTemplateRef();\n if (!dummyRef) {\n return;\n }\n\n this._templateOverlayRef = this._createOverlay();\n if (!this._templateOverlayRef) {\n return;\n }\n\n this._zIndexService.applyToOverlay(this._templateOverlayRef);\n this._zIndexService.deferMoveToTop(this._templateOverlayRef);\n\n const hostElement = this._host.nativeElement;\n this._originalParent = hostElement.parentElement;\n this._originalNextSibling = hostElement.nextSibling;\n\n const portal = new TemplatePortal(dummyRef, this._viewContainerRef);\n this._templateOverlayRef.attach(portal);\n\n const overlayPane = this._templateOverlayRef.overlayElement;\n overlayPane.style.position = 'static';\n overlayPane.appendChild(hostElement);\n\n this._backdropSubscription = this._templateOverlayRef.backdropClick().subscribe(() => {\n this.close();\n });\n\n this.searchQuery.set('');\n this.selectedIndex.set(0);\n\n // Focus input after render\n setTimeout(() => {\n const inputEl = this.searchInputRef()?.nativeElement;\n if (inputEl) {\n inputEl.focus();\n }\n }, 100);\n }\n\n private _closeWithAnimation(): void {\n if (this.isLeaving()) {\n return;\n }\n\n this._overlayContainerService.notifyClosing();\n this.isLeaving.set(true);\n this.zVisible.set(false);\n\n const hostElement = this._host.nativeElement;\n const { backdropElement } = this._templateOverlayRef ?? {};\n\n if (backdropElement) {\n backdropElement.classList.add('z-backdrop-leaving');\n }\n\n hostElement.classList.add('command-leave');\n\n this._clearCloseTimeout();\n this._closeTimeout = setTimeout(() => {\n if (this._destroyRef.destroyed) {\n return;\n }\n\n this.isLeaving.set(false);\n this._disposeTemplateOverlay();\n this.zAfterClose.emit();\n }, 150);\n }\n\n private _clearCloseTimeout(): void {\n if (!this._closeTimeout) {\n return;\n }\n\n clearTimeout(this._closeTimeout);\n this._closeTimeout = null;\n }\n\n private _disposeTemplateOverlay(): void {\n const hostElement = this._host.nativeElement;\n\n if (this._originalParent && this._originalNextSibling) {\n this._originalParent.insertBefore(hostElement, this._originalNextSibling);\n }\n\n if (this._originalParent && !this._originalNextSibling) {\n this._originalParent.appendChild(hostElement);\n }\n\n hostElement.classList.remove('command-leave');\n if (this._templateOverlayRef) {\n this._templateOverlayRef.dispose();\n this._templateOverlayRef = null;\n }\n\n this._originalParent = null;\n this._originalNextSibling = null;\n\n if (this._backdropSubscription) {\n this._backdropSubscription.unsubscribe();\n this._backdropSubscription = null;\n }\n }\n\n private _scrollToSelected(): void {\n setTimeout(() => {\n const scrollbar = this._host.nativeElement.querySelector('ng-scrollbar');\n const viewport = scrollbar?.querySelector('.ng-scroll-viewport') as HTMLElement;\n const selected = scrollbar?.querySelector('.z-command-item-active') as HTMLElement;\n if (!viewport || !selected) {\n return;\n }\n const cTop = viewport.scrollTop;\n const cBottom = cTop + viewport.clientHeight;\n const sTop = selected.offsetTop;\n const sBottom = sTop + selected.clientHeight;\n\n if (sTop < cTop) {\n viewport.scrollTop = sTop;\n return;\n }\n if (sBottom > cBottom) {\n viewport.scrollTop = sBottom - viewport.clientHeight;\n return;\n }\n });\n }\n}\n","<ng-template #dummyTemplate />\n\n@if (shouldRenderContent()) {\n <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n <!-- Search Bar -->\n <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n <input\n type=\"text\"\n [placeholder]=\"zPlaceholder() | translate\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"onSearchQueryChange($event)\"\n (keydown)=\"onKeyDown($event)\"\n class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n #searchInput />\n <kbd\n class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n <span>ESC</span>\n </kbd>\n </div>\n\n <!-- Scrollable Results List using NgScrollbar -->\n <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n <div class=\"space-y-1 p-2\">\n @if (flattenedItems().length === 0) {\n <div class=\"text-muted-foreground py-6 text-center text-sm\">\n {{ 'i18n_z_ui_command_no_results' | translate }}\n </div>\n } @else {\n @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n @if (!isFirst) {\n <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n }\n\n <div\n class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n {{ group.heading }}\n </div>\n\n <div class=\"space-y-0.5\">\n @for (item of group.items; track item.id) {\n <div\n class=\"z-command-item flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n (click)=\"selectItem(item)\">\n <div class=\"flex items-center gap-2.5\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n }\n <span>{{ item.label }}</span>\n </div>\n\n @if (item.shortcut) {\n <kbd\n class=\"text-muted-foreground bg-muted/50 border-border/40 rounded border px-1 font-mono text-[9px]\">\n {{ item.shortcut }}\n </kbd>\n }\n </div>\n }\n </div>\n }\n }\n </div>\n </ng-scrollbar>\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1371,7 +1371,7 @@ class ZInputComponent {
|
|
|
1371
1371
|
useExisting: forwardRef(() => ZInputComponent),
|
|
1372
1372
|
multi: true,
|
|
1373
1373
|
},
|
|
1374
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "nativeColorInputRef", first: true, predicate: ["nativeColorInputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() | translate }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n @if (typeConfig().isTextarea) {\n <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n <textarea\n #inputEl\n [id]=\"inputId\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n [class.field-sizing-content]=\"zAutoSizeContent()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n [autocomplete]=\"zAutoComplete()\"\n [rows]=\"zRows()\"\n [attr.maxlength]=\"zMaxLength()\"\n [ngModel]=\"displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"></textarea>\n @if (zMaxLength()) {\n <div class=\"flex justify-end pr-1 pb-1\">\n <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n </div>\n }\n @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n <svg\n class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\">\n <path d=\"M10 2L2 10\" />\n <path d=\"M10 6L6 10\" />\n </svg>\n }\n </div>\n } @else {\n <div class=\"relative w-full\">\n <div\n class=\"z-input-container flex w-full items-center\"\n [class]=\"inputClasses()\"\n z-tooltip\n [zContent]=\"displayValue()\"\n [zTooltipDisabled]=\"typeConfig().isColor || uiState().isFocused || uiState().showSuggestPopover || !hasValue()\"\n [zTriggerElement]=\"inputEl\">\n <!-- Color picker square (prefix for color type) -->\n @if (typeConfig().isColor) {\n <div class=\"z-[10] shrink-0\">\n @if (isBlossomColorMode()) {\n <blossom-color-picker\n class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n [value]=\"blossomColor()\"\n [defaultValue]=\"blossomOptions().defaultValue\"\n [colors]=\"blossomColors()\"\n [disabled]=\"isDisabled() || zReadonly()\"\n [openOnHover]=\"blossomOptions().openOnHover\"\n [initialExpanded]=\"blossomOptions().initialExpanded\"\n [animationDuration]=\"blossomOptions().animationDuration\"\n [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n [coreSize]=\"blossomOptions().coreSize\"\n [petalSize]=\"blossomOptions().petalSize\"\n [showCoreColor]=\"blossomOptions().showCoreColor\"\n [sliderPosition]=\"blossomOptions().sliderPosition\"\n [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n (colorChange)=\"onBlossomColorChange($event)\"\n (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n } @else {\n <button\n type=\"button\"\n class=\"z-input-color-trigger\"\n z-popover\n [zPopoverContent]=\"colorPickerPopover\"\n zTrigger=\"click\"\n zPosition=\"bottom-left\"\n zClass=\"z-input-color-picker-popover\"\n [zOffset]=\"8\"\n [zPopoverWidth]=\"330\"\n [zDisabled]=\"isDisabled() || zReadonly()\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.background]=\"normalizedColorValue()\"\n (zControl)=\"onColorPickerControl($event)\"\n (zShow)=\"onColorPickerOpen()\"\n (mousedown)=\"$event.preventDefault()\"\n [attr.aria-label]=\"'Color picker'\"></button>\n }\n </div>\n }\n\n @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n @if (zSearch()) {\n <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n } @else if (slotConfig().isPrefixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n } @else {\n {{ zPrefix() }}\n }\n </div>\n }\n\n <input\n #inputEl\n [id]=\"inputId\"\n [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n [attr.min]=\"zMin()\"\n [attr.max]=\"zMax()\"\n [attr.step]=\"zStep()\"\n [autocomplete]=\"zAutoComplete()\"\n [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n [mask]=\"maskConfig().effectiveMask\"\n [thousandSeparator]=\"zThousandSeparator()\"\n [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n [allowNegativeNumbers]=\"zAllowNegative()\"\n [dropSpecialCharacters]=\"false\" />\n\n @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n @if (slotConfig().isSuffixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n } @else {\n {{ zSuffix() }}\n }\n </div>\n }\n\n <!-- Async validation loading indicator -->\n @if (isValidating()) {\n <div class=\"text-muted-foreground flex items-center justify-center\">\n <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n </div>\n }\n\n <!-- Clear button -->\n @if (showClearButton()) {\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-sm transition-colors\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clearValue($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n\n <!-- Copy button for color type -->\n @if (typeConfig().isColor) {\n <input\n #nativeColorInputEl\n type=\"color\"\n class=\"z-input-native-color\"\n [ngModel]=\"normalizedColorValue()\"\n (ngModelChange)=\"onColorPickerHexChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\" />\n\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"copyColorToClipboard()\">\n <span class=\"relative flex size-4 items-center justify-center\">\n <z-icon\n zType=\"lucideCopy\"\n [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n <z-icon\n zType=\"lucideCheck\"\n [class]=\"\n uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n \"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n </span>\n </button>\n }\n\n @if (showArrows() && !isDisabled()) {\n <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'up')\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'down')\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n </button>\n </div>\n }\n\n @if (typeConfig().isPassword && zShowPasswordToggle()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"togglePasswordVisibility()\">\n @if (uiState().passwordVisible) {\n <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n } @else {\n <z-icon zType=\"lucideEye\" zSize=\"16\" />\n }\n </button>\n }\n </div>\n\n @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n <div\n class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n @for (item of filteredSuggestHistory(); track item; let i = $index) {\n <button\n type=\"button\"\n class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n [class.text-primary]=\"suggestActiveIndex() === i\"\n (mousedown)=\"selectSuggestItem(item)\">\n <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n <span class=\"truncate\">{{ item }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n <ng-template #colorPickerPopover>\n <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n <div\n class=\"z-input-color-picker-plane\"\n [style]=\"colorPickerSvStyle()\"\n (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n (pointermove)=\"onColorPickerSvPointerMove($event)\">\n <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n </div>\n\n <div class=\"z-input-color-picker-controls\">\n <button\n type=\"button\"\n z-button\n zType=\"outline\"\n zSize=\"sm\"\n aria-label=\"Pick color\"\n zTypeIcon=\"lucidePencil\"\n (click)=\"openNativeColorPicker()\"></button>\n <div class=\"z-input-color-picker-sliders\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"360\"\n [ngModel]=\"colorPickerHsv().hue\"\n class=\"z-input-color-picker-hue\"\n (input)=\"onColorPickerHueInput($event)\" />\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n [ngModel]=\"colorPickerAlpha()\"\n class=\"z-input-color-picker-alpha\"\n (input)=\"onColorPickerAlphaInput($event)\" />\n </div>\n </div>\n\n <div class=\"flex flex-col gap-2\">\n <div class=\"z-input-color-picker-fields\">\n <z-select\n zSize=\"sm\"\n class=\"z-input-color-picker-format\"\n [zOptions]=\"colorPickerFormatOptions\"\n [zShowSearch]=\"false\"\n [zTranslateLabels]=\"false\"\n [ngModel]=\"colorPickerFormat()\"\n (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n <div class=\"z-input-color-picker-value-group\">\n @switch (colorPickerFormat()) {\n @case ('rgb') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"R\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().red\"\n (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"G\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().green\"\n (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"B\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().blue\"\n (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n </div>\n }\n @case ('hsl') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"H\"\n [zMin]=\"0\"\n [zMax]=\"360\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().hue\"\n (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"S\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().saturation\"\n (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"L\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().lightness\"\n (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n </div>\n }\n @case ('hsv') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"H\"\n [zMin]=\"0\"\n [zMax]=\"360\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().hue\"\n (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"S\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().saturation\"\n (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"V\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().value\"\n (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n </div>\n }\n @default {\n <z-input\n zSize=\"sm\"\n class=\"z-input-color-picker-hex-input\"\n [ngModel]=\"normalizedColorValue()\"\n (ngModelChange)=\"onColorPickerHexChange($event)\" />\n }\n }\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n class=\"z-input-color-picker-alpha-input\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n zSuffix=\"%\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerAlpha()\"\n (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n </div>\n </div>\n\n <div class=\"z-input-color-picker-saved-head\">\n <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n {{ 'i18n_z_ui_input_add_color' | translate }}\n </button>\n </div>\n <div class=\"z-input-color-picker-swatches\">\n @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n <button\n type=\"button\"\n class=\"z-input-color-picker-swatch rounded-[3px]!\"\n [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n [attr.aria-label]=\"swatch.color\"\n (click)=\"selectSavedColor(swatch.color)\"></button>\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n @if (hasError()) {\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", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border:1px solid var(--border);border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ZInputComponent), selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: i0.forwardRef(() => BlossomColorPickerComponent), selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning", "circularBarWidth", "sliderWidth", "sliderOffset", "collapsible"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.RangeValueAccessor), selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgxMaskDirective), selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i0.forwardRef(() => ZButtonComponent), selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: i0.forwardRef(() => ZIconComponent), selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: i0.forwardRef(() => ZPopoverDirective), selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: i0.forwardRef(() => ZSelectComponent), selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: i0.forwardRef(() => ZTooltipDirective), selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1374
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "nativeColorInputRef", first: true, predicate: ["nativeColorInputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() | translate }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n @if (typeConfig().isTextarea) {\n <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n <textarea\n #inputEl\n [id]=\"inputId\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n [class.field-sizing-content]=\"zAutoSizeContent()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n [autocomplete]=\"zAutoComplete()\"\n [rows]=\"zRows()\"\n [attr.maxlength]=\"zMaxLength()\"\n [ngModel]=\"displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"></textarea>\n @if (zMaxLength()) {\n <div class=\"flex justify-end pr-1 pb-1\">\n <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n </div>\n }\n @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n <svg\n class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\">\n <path d=\"M10 2L2 10\" />\n <path d=\"M10 6L6 10\" />\n </svg>\n }\n </div>\n } @else {\n <div class=\"relative w-full\">\n <div\n class=\"z-input-container flex w-full items-center\"\n [class]=\"inputClasses()\"\n z-tooltip\n [zContent]=\"displayValue()\"\n [zTooltipDisabled]=\"typeConfig().isColor || uiState().isFocused || uiState().showSuggestPopover || !hasValue()\"\n [zTriggerElement]=\"inputEl\">\n <!-- Color picker square (prefix for color type) -->\n @if (typeConfig().isColor) {\n <div class=\"z-[10] shrink-0\">\n @if (isBlossomColorMode()) {\n <blossom-color-picker\n class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n [value]=\"blossomColor()\"\n [defaultValue]=\"blossomOptions().defaultValue\"\n [colors]=\"blossomColors()\"\n [disabled]=\"isDisabled() || zReadonly()\"\n [openOnHover]=\"blossomOptions().openOnHover\"\n [initialExpanded]=\"blossomOptions().initialExpanded\"\n [animationDuration]=\"blossomOptions().animationDuration\"\n [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n [coreSize]=\"blossomOptions().coreSize\"\n [petalSize]=\"blossomOptions().petalSize\"\n [showCoreColor]=\"blossomOptions().showCoreColor\"\n [sliderPosition]=\"blossomOptions().sliderPosition\"\n [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n (colorChange)=\"onBlossomColorChange($event)\"\n (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n } @else {\n <button\n type=\"button\"\n class=\"z-input-color-trigger\"\n z-popover\n [zPopoverContent]=\"colorPickerPopover\"\n zTrigger=\"click\"\n zPosition=\"bottom-left\"\n zClass=\"z-input-color-picker-popover\"\n [zOffset]=\"8\"\n [zPopoverWidth]=\"330\"\n [zDisabled]=\"isDisabled() || zReadonly()\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.background]=\"normalizedColorValue()\"\n (zControl)=\"onColorPickerControl($event)\"\n (zShow)=\"onColorPickerOpen()\"\n (mousedown)=\"$event.preventDefault()\"\n [attr.aria-label]=\"'Color picker'\"></button>\n }\n </div>\n }\n\n @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n @if (zSearch()) {\n <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n } @else if (slotConfig().isPrefixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n } @else {\n {{ zPrefix() }}\n }\n </div>\n }\n\n <input\n #inputEl\n [id]=\"inputId\"\n [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n [attr.min]=\"zMin()\"\n [attr.max]=\"zMax()\"\n [attr.step]=\"zStep()\"\n [autocomplete]=\"zAutoComplete()\"\n [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n [mask]=\"maskConfig().effectiveMask\"\n [thousandSeparator]=\"zThousandSeparator()\"\n [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n [allowNegativeNumbers]=\"zAllowNegative()\"\n [dropSpecialCharacters]=\"false\" />\n\n @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n @if (slotConfig().isSuffixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n } @else {\n {{ zSuffix() }}\n }\n </div>\n }\n\n <!-- Async validation loading indicator -->\n @if (isValidating()) {\n <div class=\"text-muted-foreground flex items-center justify-center\">\n <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n </div>\n }\n\n <!-- Clear button -->\n @if (showClearButton()) {\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-sm transition-colors\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clearValue($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n\n <!-- Copy button for color type -->\n @if (typeConfig().isColor) {\n <input\n #nativeColorInputEl\n type=\"color\"\n class=\"z-input-native-color\"\n [ngModel]=\"normalizedColorValue()\"\n (ngModelChange)=\"onColorPickerHexChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\" />\n\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"copyColorToClipboard()\">\n <span class=\"relative flex size-4 items-center justify-center\">\n <z-icon\n zType=\"lucideCopy\"\n [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n <z-icon\n zType=\"lucideCheck\"\n [class]=\"\n uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n \"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n </span>\n </button>\n }\n\n @if (showArrows() && !isDisabled()) {\n <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'up')\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'down')\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n </button>\n </div>\n }\n\n @if (typeConfig().isPassword && zShowPasswordToggle()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"togglePasswordVisibility()\">\n @if (uiState().passwordVisible) {\n <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n } @else {\n <z-icon zType=\"lucideEye\" zSize=\"16\" />\n }\n </button>\n }\n </div>\n\n @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n <div\n class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n @for (item of filteredSuggestHistory(); track item; let i = $index) {\n <button\n type=\"button\"\n class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n [class.text-primary]=\"suggestActiveIndex() === i\"\n (mousedown)=\"selectSuggestItem(item)\">\n <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n <span class=\"truncate\">{{ item }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n <ng-template #colorPickerPopover>\n <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n <div\n class=\"z-input-color-picker-plane\"\n [style]=\"colorPickerSvStyle()\"\n (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n (pointermove)=\"onColorPickerSvPointerMove($event)\">\n <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n </div>\n\n <div class=\"z-input-color-picker-controls\">\n <button\n type=\"button\"\n z-button\n zType=\"outline\"\n zSize=\"sm\"\n aria-label=\"Pick color\"\n zTypeIcon=\"lucidePencil\"\n (click)=\"openNativeColorPicker()\"></button>\n <div class=\"z-input-color-picker-sliders\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"360\"\n [ngModel]=\"colorPickerHsv().hue\"\n class=\"z-input-color-picker-hue\"\n (input)=\"onColorPickerHueInput($event)\" />\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n [ngModel]=\"colorPickerAlpha()\"\n class=\"z-input-color-picker-alpha\"\n (input)=\"onColorPickerAlphaInput($event)\" />\n </div>\n </div>\n\n <div class=\"flex flex-col gap-2\">\n <div class=\"z-input-color-picker-fields\">\n <z-select\n zSize=\"sm\"\n class=\"z-input-color-picker-format\"\n [zOptions]=\"colorPickerFormatOptions\"\n [zShowSearch]=\"false\"\n [zTranslateLabels]=\"false\"\n [ngModel]=\"colorPickerFormat()\"\n (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n <div class=\"z-input-color-picker-value-group\">\n @switch (colorPickerFormat()) {\n @case ('rgb') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"R\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().red\"\n (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"G\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().green\"\n (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"B\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().blue\"\n (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n </div>\n }\n @case ('hsl') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"H\"\n [zMin]=\"0\"\n [zMax]=\"360\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().hue\"\n (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"S\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().saturation\"\n (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"L\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().lightness\"\n (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n </div>\n }\n @case ('hsv') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"H\"\n [zMin]=\"0\"\n [zMax]=\"360\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().hue\"\n (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"S\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().saturation\"\n (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"V\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().value\"\n (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n </div>\n }\n @default {\n <z-input\n zSize=\"sm\"\n class=\"z-input-color-picker-hex-input\"\n [ngModel]=\"normalizedColorValue()\"\n (ngModelChange)=\"onColorPickerHexChange($event)\" />\n }\n }\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n class=\"z-input-color-picker-alpha-input\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n zSuffix=\"%\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerAlpha()\"\n (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n </div>\n </div>\n\n <div class=\"z-input-color-picker-saved-head\">\n <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n {{ 'i18n_z_ui_input_add_color' | translate }}\n </button>\n </div>\n <div class=\"z-input-color-picker-swatches\">\n @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n <button\n type=\"button\"\n class=\"z-input-color-picker-swatch rounded-[3px]!\"\n [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n [attr.aria-label]=\"swatch.color\"\n (click)=\"selectSavedColor(swatch.color)\"></button>\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n @if (hasError()) {\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", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ZInputComponent), selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: i0.forwardRef(() => BlossomColorPickerComponent), selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning", "circularBarWidth", "sliderWidth", "sliderOffset", "collapsible"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.RangeValueAccessor), selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgxMaskDirective), selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i0.forwardRef(() => ZButtonComponent), selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: i0.forwardRef(() => ZIconComponent), selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: i0.forwardRef(() => ZPopoverDirective), selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: i0.forwardRef(() => ZSelectComponent), selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: i0.forwardRef(() => ZTooltipDirective), selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1375
1375
|
}
|
|
1376
1376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZInputComponent, decorators: [{
|
|
1377
1377
|
type: Component,
|
|
@@ -1395,7 +1395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
1395
1395
|
useExisting: forwardRef(() => ZInputComponent),
|
|
1396
1396
|
multi: true,
|
|
1397
1397
|
},
|
|
1398
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zInput', template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() | translate }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n @if (typeConfig().isTextarea) {\n <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n <textarea\n #inputEl\n [id]=\"inputId\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n [class.field-sizing-content]=\"zAutoSizeContent()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n [autocomplete]=\"zAutoComplete()\"\n [rows]=\"zRows()\"\n [attr.maxlength]=\"zMaxLength()\"\n [ngModel]=\"displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"></textarea>\n @if (zMaxLength()) {\n <div class=\"flex justify-end pr-1 pb-1\">\n <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n </div>\n }\n @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n <svg\n class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\">\n <path d=\"M10 2L2 10\" />\n <path d=\"M10 6L6 10\" />\n </svg>\n }\n </div>\n } @else {\n <div class=\"relative w-full\">\n <div\n class=\"z-input-container flex w-full items-center\"\n [class]=\"inputClasses()\"\n z-tooltip\n [zContent]=\"displayValue()\"\n [zTooltipDisabled]=\"typeConfig().isColor || uiState().isFocused || uiState().showSuggestPopover || !hasValue()\"\n [zTriggerElement]=\"inputEl\">\n <!-- Color picker square (prefix for color type) -->\n @if (typeConfig().isColor) {\n <div class=\"z-[10] shrink-0\">\n @if (isBlossomColorMode()) {\n <blossom-color-picker\n class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n [value]=\"blossomColor()\"\n [defaultValue]=\"blossomOptions().defaultValue\"\n [colors]=\"blossomColors()\"\n [disabled]=\"isDisabled() || zReadonly()\"\n [openOnHover]=\"blossomOptions().openOnHover\"\n [initialExpanded]=\"blossomOptions().initialExpanded\"\n [animationDuration]=\"blossomOptions().animationDuration\"\n [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n [coreSize]=\"blossomOptions().coreSize\"\n [petalSize]=\"blossomOptions().petalSize\"\n [showCoreColor]=\"blossomOptions().showCoreColor\"\n [sliderPosition]=\"blossomOptions().sliderPosition\"\n [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n (colorChange)=\"onBlossomColorChange($event)\"\n (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n } @else {\n <button\n type=\"button\"\n class=\"z-input-color-trigger\"\n z-popover\n [zPopoverContent]=\"colorPickerPopover\"\n zTrigger=\"click\"\n zPosition=\"bottom-left\"\n zClass=\"z-input-color-picker-popover\"\n [zOffset]=\"8\"\n [zPopoverWidth]=\"330\"\n [zDisabled]=\"isDisabled() || zReadonly()\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.background]=\"normalizedColorValue()\"\n (zControl)=\"onColorPickerControl($event)\"\n (zShow)=\"onColorPickerOpen()\"\n (mousedown)=\"$event.preventDefault()\"\n [attr.aria-label]=\"'Color picker'\"></button>\n }\n </div>\n }\n\n @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n @if (zSearch()) {\n <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n } @else if (slotConfig().isPrefixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n } @else {\n {{ zPrefix() }}\n }\n </div>\n }\n\n <input\n #inputEl\n [id]=\"inputId\"\n [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n [attr.min]=\"zMin()\"\n [attr.max]=\"zMax()\"\n [attr.step]=\"zStep()\"\n [autocomplete]=\"zAutoComplete()\"\n [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n [mask]=\"maskConfig().effectiveMask\"\n [thousandSeparator]=\"zThousandSeparator()\"\n [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n [allowNegativeNumbers]=\"zAllowNegative()\"\n [dropSpecialCharacters]=\"false\" />\n\n @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n @if (slotConfig().isSuffixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n } @else {\n {{ zSuffix() }}\n }\n </div>\n }\n\n <!-- Async validation loading indicator -->\n @if (isValidating()) {\n <div class=\"text-muted-foreground flex items-center justify-center\">\n <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n </div>\n }\n\n <!-- Clear button -->\n @if (showClearButton()) {\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-sm transition-colors\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clearValue($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n\n <!-- Copy button for color type -->\n @if (typeConfig().isColor) {\n <input\n #nativeColorInputEl\n type=\"color\"\n class=\"z-input-native-color\"\n [ngModel]=\"normalizedColorValue()\"\n (ngModelChange)=\"onColorPickerHexChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\" />\n\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"copyColorToClipboard()\">\n <span class=\"relative flex size-4 items-center justify-center\">\n <z-icon\n zType=\"lucideCopy\"\n [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n <z-icon\n zType=\"lucideCheck\"\n [class]=\"\n uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n \"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n </span>\n </button>\n }\n\n @if (showArrows() && !isDisabled()) {\n <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'up')\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'down')\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n </button>\n </div>\n }\n\n @if (typeConfig().isPassword && zShowPasswordToggle()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"togglePasswordVisibility()\">\n @if (uiState().passwordVisible) {\n <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n } @else {\n <z-icon zType=\"lucideEye\" zSize=\"16\" />\n }\n </button>\n }\n </div>\n\n @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n <div\n class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n @for (item of filteredSuggestHistory(); track item; let i = $index) {\n <button\n type=\"button\"\n class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n [class.text-primary]=\"suggestActiveIndex() === i\"\n (mousedown)=\"selectSuggestItem(item)\">\n <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n <span class=\"truncate\">{{ item }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n <ng-template #colorPickerPopover>\n <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n <div\n class=\"z-input-color-picker-plane\"\n [style]=\"colorPickerSvStyle()\"\n (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n (pointermove)=\"onColorPickerSvPointerMove($event)\">\n <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n </div>\n\n <div class=\"z-input-color-picker-controls\">\n <button\n type=\"button\"\n z-button\n zType=\"outline\"\n zSize=\"sm\"\n aria-label=\"Pick color\"\n zTypeIcon=\"lucidePencil\"\n (click)=\"openNativeColorPicker()\"></button>\n <div class=\"z-input-color-picker-sliders\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"360\"\n [ngModel]=\"colorPickerHsv().hue\"\n class=\"z-input-color-picker-hue\"\n (input)=\"onColorPickerHueInput($event)\" />\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n [ngModel]=\"colorPickerAlpha()\"\n class=\"z-input-color-picker-alpha\"\n (input)=\"onColorPickerAlphaInput($event)\" />\n </div>\n </div>\n\n <div class=\"flex flex-col gap-2\">\n <div class=\"z-input-color-picker-fields\">\n <z-select\n zSize=\"sm\"\n class=\"z-input-color-picker-format\"\n [zOptions]=\"colorPickerFormatOptions\"\n [zShowSearch]=\"false\"\n [zTranslateLabels]=\"false\"\n [ngModel]=\"colorPickerFormat()\"\n (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n <div class=\"z-input-color-picker-value-group\">\n @switch (colorPickerFormat()) {\n @case ('rgb') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"R\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().red\"\n (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"G\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().green\"\n (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"B\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().blue\"\n (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n </div>\n }\n @case ('hsl') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"H\"\n [zMin]=\"0\"\n [zMax]=\"360\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().hue\"\n (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"S\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().saturation\"\n (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"L\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().lightness\"\n (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n </div>\n }\n @case ('hsv') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"H\"\n [zMin]=\"0\"\n [zMax]=\"360\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().hue\"\n (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"S\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().saturation\"\n (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"V\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().value\"\n (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n </div>\n }\n @default {\n <z-input\n zSize=\"sm\"\n class=\"z-input-color-picker-hex-input\"\n [ngModel]=\"normalizedColorValue()\"\n (ngModelChange)=\"onColorPickerHexChange($event)\" />\n }\n }\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n class=\"z-input-color-picker-alpha-input\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n zSuffix=\"%\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerAlpha()\"\n (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n </div>\n </div>\n\n <div class=\"z-input-color-picker-saved-head\">\n <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n {{ 'i18n_z_ui_input_add_color' | translate }}\n </button>\n </div>\n <div class=\"z-input-color-picker-swatches\">\n @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n <button\n type=\"button\"\n class=\"z-input-color-picker-swatch rounded-[3px]!\"\n [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n [attr.aria-label]=\"swatch.color\"\n (click)=\"selectSavedColor(swatch.color)\"></button>\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n @if (hasError()) {\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", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border:1px solid var(--border);border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"] }]
|
|
1398
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zInput', template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() | translate }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n @if (typeConfig().isTextarea) {\n <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n <textarea\n #inputEl\n [id]=\"inputId\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n [class.field-sizing-content]=\"zAutoSizeContent()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n [autocomplete]=\"zAutoComplete()\"\n [rows]=\"zRows()\"\n [attr.maxlength]=\"zMaxLength()\"\n [ngModel]=\"displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"></textarea>\n @if (zMaxLength()) {\n <div class=\"flex justify-end pr-1 pb-1\">\n <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n </div>\n }\n @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n <svg\n class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\">\n <path d=\"M10 2L2 10\" />\n <path d=\"M10 6L6 10\" />\n </svg>\n }\n </div>\n } @else {\n <div class=\"relative w-full\">\n <div\n class=\"z-input-container flex w-full items-center\"\n [class]=\"inputClasses()\"\n z-tooltip\n [zContent]=\"displayValue()\"\n [zTooltipDisabled]=\"typeConfig().isColor || uiState().isFocused || uiState().showSuggestPopover || !hasValue()\"\n [zTriggerElement]=\"inputEl\">\n <!-- Color picker square (prefix for color type) -->\n @if (typeConfig().isColor) {\n <div class=\"z-[10] shrink-0\">\n @if (isBlossomColorMode()) {\n <blossom-color-picker\n class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n [value]=\"blossomColor()\"\n [defaultValue]=\"blossomOptions().defaultValue\"\n [colors]=\"blossomColors()\"\n [disabled]=\"isDisabled() || zReadonly()\"\n [openOnHover]=\"blossomOptions().openOnHover\"\n [initialExpanded]=\"blossomOptions().initialExpanded\"\n [animationDuration]=\"blossomOptions().animationDuration\"\n [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n [coreSize]=\"blossomOptions().coreSize\"\n [petalSize]=\"blossomOptions().petalSize\"\n [showCoreColor]=\"blossomOptions().showCoreColor\"\n [sliderPosition]=\"blossomOptions().sliderPosition\"\n [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n (colorChange)=\"onBlossomColorChange($event)\"\n (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n } @else {\n <button\n type=\"button\"\n class=\"z-input-color-trigger\"\n z-popover\n [zPopoverContent]=\"colorPickerPopover\"\n zTrigger=\"click\"\n zPosition=\"bottom-left\"\n zClass=\"z-input-color-picker-popover\"\n [zOffset]=\"8\"\n [zPopoverWidth]=\"330\"\n [zDisabled]=\"isDisabled() || zReadonly()\"\n [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n [style.background]=\"normalizedColorValue()\"\n (zControl)=\"onColorPickerControl($event)\"\n (zShow)=\"onColorPickerOpen()\"\n (mousedown)=\"$event.preventDefault()\"\n [attr.aria-label]=\"'Color picker'\"></button>\n }\n </div>\n }\n\n @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n @if (zSearch()) {\n <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n } @else if (slotConfig().isPrefixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n } @else {\n {{ zPrefix() }}\n }\n </div>\n }\n\n <input\n #inputEl\n [id]=\"inputId\"\n [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n [placeholder]=\"zPlaceholder() | translate\"\n class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n [attr.min]=\"zMin()\"\n [attr.max]=\"zMax()\"\n [attr.step]=\"zStep()\"\n [autocomplete]=\"zAutoComplete()\"\n [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n [mask]=\"maskConfig().effectiveMask\"\n [thousandSeparator]=\"zThousandSeparator()\"\n [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n [allowNegativeNumbers]=\"zAllowNegative()\"\n [dropSpecialCharacters]=\"false\" />\n\n @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n @if (slotConfig().isSuffixTemplate) {\n <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n } @else {\n {{ zSuffix() }}\n }\n </div>\n }\n\n <!-- Async validation loading indicator -->\n @if (isValidating()) {\n <div class=\"text-muted-foreground flex items-center justify-center\">\n <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n </div>\n }\n\n <!-- Clear button -->\n @if (showClearButton()) {\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-sm transition-colors\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clearValue($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n\n <!-- Copy button for color type -->\n @if (typeConfig().isColor) {\n <input\n #nativeColorInputEl\n type=\"color\"\n class=\"z-input-native-color\"\n [ngModel]=\"normalizedColorValue()\"\n (ngModelChange)=\"onColorPickerHexChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\" />\n\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"copyColorToClipboard()\">\n <span class=\"relative flex size-4 items-center justify-center\">\n <z-icon\n zType=\"lucideCopy\"\n [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n <z-icon\n zType=\"lucideCheck\"\n [class]=\"\n uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n \"\n class=\"absolute transition-all duration-200 ease-out\"\n zSize=\"14\" />\n </span>\n </button>\n }\n\n @if (showArrows() && !isDisabled()) {\n <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'up')\">\n <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onArrowClick($event, 'down')\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n </button>\n </div>\n }\n\n @if (typeConfig().isPassword && zShowPasswordToggle()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"togglePasswordVisibility()\">\n @if (uiState().passwordVisible) {\n <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n } @else {\n <z-icon zType=\"lucideEye\" zSize=\"16\" />\n }\n </button>\n }\n </div>\n\n @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n <div\n class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n @for (item of filteredSuggestHistory(); track item; let i = $index) {\n <button\n type=\"button\"\n class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n [class.text-primary]=\"suggestActiveIndex() === i\"\n (mousedown)=\"selectSuggestItem(item)\">\n <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n <span class=\"truncate\">{{ item }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n <ng-template #colorPickerPopover>\n <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n <div\n class=\"z-input-color-picker-plane\"\n [style]=\"colorPickerSvStyle()\"\n (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n (pointermove)=\"onColorPickerSvPointerMove($event)\">\n <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n </div>\n\n <div class=\"z-input-color-picker-controls\">\n <button\n type=\"button\"\n z-button\n zType=\"outline\"\n zSize=\"sm\"\n aria-label=\"Pick color\"\n zTypeIcon=\"lucidePencil\"\n (click)=\"openNativeColorPicker()\"></button>\n <div class=\"z-input-color-picker-sliders\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"360\"\n [ngModel]=\"colorPickerHsv().hue\"\n class=\"z-input-color-picker-hue\"\n (input)=\"onColorPickerHueInput($event)\" />\n <input\n type=\"range\"\n min=\"0\"\n max=\"100\"\n [ngModel]=\"colorPickerAlpha()\"\n class=\"z-input-color-picker-alpha\"\n (input)=\"onColorPickerAlphaInput($event)\" />\n </div>\n </div>\n\n <div class=\"flex flex-col gap-2\">\n <div class=\"z-input-color-picker-fields\">\n <z-select\n zSize=\"sm\"\n class=\"z-input-color-picker-format\"\n [zOptions]=\"colorPickerFormatOptions\"\n [zShowSearch]=\"false\"\n [zTranslateLabels]=\"false\"\n [ngModel]=\"colorPickerFormat()\"\n (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n <div class=\"z-input-color-picker-value-group\">\n @switch (colorPickerFormat()) {\n @case ('rgb') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"R\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().red\"\n (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"G\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().green\"\n (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"B\"\n [zMin]=\"0\"\n [zMax]=\"255\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerRgbValue().blue\"\n (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n </div>\n }\n @case ('hsl') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"H\"\n [zMin]=\"0\"\n [zMax]=\"360\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().hue\"\n (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"S\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().saturation\"\n (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"L\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHslValue().lightness\"\n (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n </div>\n }\n @case ('hsv') {\n <div class=\"z-input-color-picker-channel-group\">\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"H\"\n [zMin]=\"0\"\n [zMax]=\"360\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().hue\"\n (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"S\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().saturation\"\n (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n zPlaceholder=\"V\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerHsv().value\"\n (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n </div>\n }\n @default {\n <z-input\n zSize=\"sm\"\n class=\"z-input-color-picker-hex-input\"\n [ngModel]=\"normalizedColorValue()\"\n (ngModelChange)=\"onColorPickerHexChange($event)\" />\n }\n }\n <z-input\n zType=\"number\"\n zSize=\"sm\"\n class=\"z-input-color-picker-alpha-input\"\n [zMin]=\"0\"\n [zMax]=\"100\"\n zSuffix=\"%\"\n [zShowArrows]=\"false\"\n [ngModel]=\"colorPickerAlpha()\"\n (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n </div>\n </div>\n\n <div class=\"z-input-color-picker-saved-head\">\n <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n {{ 'i18n_z_ui_input_add_color' | translate }}\n </button>\n </div>\n <div class=\"z-input-color-picker-swatches\">\n @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n <button\n type=\"button\"\n class=\"z-input-color-picker-swatch rounded-[3px]!\"\n [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n [attr.aria-label]=\"swatch.color\"\n (click)=\"selectSavedColor(swatch.color)\"></button>\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n @if (hasError()) {\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", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"] }]
|
|
1399
1399
|
}], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], nativeColorInputRef: [{ type: i0.ViewChild, args: ['nativeColorInputEl', { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zOnKeydown: [{ type: i0.Output, args: ["zOnKeydown"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnColorCollapse: [{ type: i0.Output, args: ["zOnColorCollapse"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAlign", 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 }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMin", required: false }] }], zMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMax", required: false }] }], zStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStep", required: false }] }], zShowArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrows", required: false }] }], zMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMask", required: false }] }], zDecimalPlaces: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalPlaces", required: false }] }], zAllowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowNegative", required: false }] }], zThousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "zThousandSeparator", required: false }] }], zDecimalMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalMarker", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zShowPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPasswordToggle", required: false }] }], zSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutofocus", required: false }] }], zAutoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoComplete", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zAutoSizeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSizeContent", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResize", required: false }] }], zMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxLength", required: false }] }], zAutoSuggest: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSuggest", required: false }] }], zColorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColorConfig", required: false }] }] } });
|
|
1400
1400
|
|
|
1401
1401
|
/**
|