{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "image-compare", "title": "Image Compare", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/image-compare/image-compare.component.ts", "content": "import {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n TemplateRef,\n booleanAttribute,\n inject,\n numberAttribute,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiRenderTemplateDirective } from '@/ui/popper/popper'\nimport { imageCompareVariants, type ImageCompareVariants } from './image-compare.variants'\n\nexport type ImageCompareOrientation = NonNullable\n\nfunction clamp(v: number): number {\n return Math.min(100, Math.max(0, v))\n}\n\n/**\n * Angular port of the React ImageCompare: the \"before\" image fills the frame, the \"after\"\n * image sits on top clipped with `clip-path: inset(...)`, and a divider line carries a\n * focusable `\n }\n \n }\n @if (disabled) {\n
\n }\n `,\n})\nexport class UiImageCompareComponent {\n private readonly el = inject>(ElementRef)\n private readonly _value = signal(undefined)\n private readonly _internal = signal(null)\n private dragging = false\n\n @Input({ required: true }) beforeSrc!: string\n @Input({ required: true }) afterSrc!: string\n @Input() beforeAlt = 'Before'\n @Input() afterAlt = 'After'\n @Input() beforeLabel = 'Before'\n @Input() afterLabel = 'After'\n /** Controlled slider position (0–100). */\n @Input()\n set value(v: number | null | undefined) {\n this._value.set(v ?? undefined)\n }\n get value(): number {\n return this._value() ?? this._internal() ?? this.defaultValue\n }\n /** Uncontrolled initial position (0–100). */\n @Input({ transform: numberAttribute }) defaultValue = 50\n /** Fired with the new position (0–100) on drag / keyboard move. */\n @Output() valueChange = new EventEmitter()\n @Input() orientation: ImageCompareOrientation = 'horizontal'\n @Input({ transform: booleanAttribute }) disabled = false\n @Input({ transform: booleanAttribute }) showLabels = true\n @Input({ transform: booleanAttribute }) showHandle = true\n /** Custom handle content — replaces the default arrow icon. */\n @Input() handle?: TemplateRef\n @Input('class') className?: string\n\n get position(): number {\n return this.value\n }\n\n get rounded(): number {\n return Math.round(this.position)\n }\n\n get hostClass(): string {\n // React's root is a
with touch-action: none; `block` + `touch-none` give the same box.\n return cn('block touch-none', imageCompareVariants({ orientation: this.orientation }), this.className)\n }\n\n get clipPath(): string {\n const pct = this.position\n return this.orientation === 'horizontal' ? `inset(0 0 0 ${pct}%)` : `inset(${pct}% 0 0 0)`\n }\n\n get dividerClass(): string {\n return cn(\n 'bg-border absolute z-10',\n this.orientation === 'horizontal' ? 'top-0 h-full w-0.5' : 'left-0 h-0.5 w-full',\n )\n }\n\n get handleClass(): string {\n return cn(\n 'bg-background border-border focus-visible:ring-ring absolute flex size-9 cursor-ew-resize items-center justify-center rounded-full border shadow-md transition-transform hover:scale-110 focus-visible:ring-2 focus-visible:outline-none',\n 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n this.orientation === 'vertical' && 'cursor-ns-resize',\n )\n }\n\n private setPosition(next: number): void {\n const clamped = clamp(next)\n if (this._value() === undefined) this._internal.set(clamped)\n this.valueChange.emit(clamped)\n }\n\n private updateFromPointer(clientX: number, clientY: number): void {\n const rect = this.el.nativeElement.getBoundingClientRect()\n if (this.orientation === 'horizontal') this.setPosition(((clientX - rect.left) / rect.width) * 100)\n else this.setPosition(((clientY - rect.top) / rect.height) * 100)\n }\n\n onPointerDown(e: PointerEvent): void {\n if (this.disabled) return\n this.dragging = true\n try {\n ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)\n } catch {\n // pointer capture can fail on synthetic / non-active pointers\n }\n this.updateFromPointer(e.clientX, e.clientY)\n }\n\n onPointerMove(e: PointerEvent): void {\n if (!this.dragging || this.disabled) return\n this.updateFromPointer(e.clientX, e.clientY)\n }\n\n onPointerUp(e: PointerEvent): void {\n if (!this.dragging) return\n this.dragging = false\n try {\n ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)\n } catch {\n // pointer already released\n }\n }\n\n /** Arrow keys move the slider by 1% (Shift = 10%). */\n onKeyDown(e: KeyboardEvent): void {\n if (this.disabled) return\n const step = e.shiftKey ? 10 : 1\n let next = this.position\n if (this.orientation === 'horizontal') {\n if (e.key === 'ArrowLeft') next -= step\n else if (e.key === 'ArrowRight') next += step\n else return\n } else {\n if (e.key === 'ArrowUp') next -= step\n else if (e.key === 'ArrowDown') next += step\n else return\n }\n e.preventDefault()\n this.setPosition(next)\n }\n}\n\nexport { imageCompareVariants, type ImageCompareVariants }\n", "type": "registry:ui", "target": "~/src/app/components/ui/image-compare/image-compare.component.ts" }, { "path": "packages/registry-angular/components/image-compare/image-compare.variants.ts", "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport const imageCompareVariants = cva('bg-muted relative overflow-hidden rounded-lg border select-none', {\n variants: {\n orientation: {\n horizontal: 'cursor-ew-resize',\n vertical: 'cursor-ns-resize',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n})\n\nexport type ImageCompareVariants = VariantProps\n", "type": "registry:ui", "target": "~/src/app/components/ui/image-compare/image-compare.variants.ts" }, { "path": "packages/registry-angular/components/image-compare/index.ts", "content": "export {\n UiImageCompareComponent,\n imageCompareVariants,\n type ImageCompareVariants,\n type ImageCompareOrientation,\n} from './image-compare.component'\n", "type": "registry:ui", "target": "~/src/app/components/ui/image-compare/index.ts" } ], "dependencies": [ "class-variance-authority" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/popper.json" ], "description": "Before/after image comparison slider with a draggable divider. Two images overlaid via clip-path, pointer-driven (mouse + touch), horizontal or vertical orientation, custom handle template, labels, and disabled state.", "categories": [ "display", "media" ] }