{"version":3,"file":"ngwr-compare.mjs","sources":["../../../projects/lib/compare/compare.ts","../../../projects/lib/compare/compare.html","../../../projects/lib/compare/ngwr-compare.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ElementRef, ViewEncapsulation, computed, inject, input, model } from '@angular/core';\n\nimport { clamp } from 'ngwr/utils';\n\n/**\n * Before/after comparison slider. Works with any content — project two\n * pieces of markup with `wrCompareBefore` and `wrCompareAfter` attributes;\n * the component stacks them in the same cell and clips the \"after\" side\n * with a draggable divider.\n *\n * @example\n * ```html\n * \n * \n * \n * \n *\n * \n *
{{ oldCode }}
\n *
{{ newCode }}
\n * \n * ```\n *\n * @see https://ngwr.dev/components/compare\n */\n@Component({\n selector: 'wr-compare',\n templateUrl: './compare.html',\n encapsulation: ViewEncapsulation.None,\n host: { '[class]': 'classes()' },\n})\nexport class WrCompare {\n /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */\n readonly position = model(50);\n\n /**\n * Divider direction:\n * - `'horizontal'` — divider line is vertical, drags left/right.\n * - `'vertical'` — divider line is horizontal, drags up/down.\n * @default 'horizontal'\n */\n readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n /** Show the round drag handle on the divider. @default true */\n readonly showHandle = input(true, { transform: coerceBooleanProperty });\n\n /** Disable interaction (divider stays put). @default false */\n readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n /** Initial position transform — accepts any number / numeric string. */\n readonly minPosition = input(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n readonly maxPosition = input(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n\n private readonly host = inject>(ElementRef);\n private dragging = false;\n\n protected readonly classes = computed(() => {\n const parts = ['wr-compare', `wr-compare--${this.orientation()}`];\n if (this.disabled()) parts.push('wr-compare--disabled');\n return parts.join(' ');\n });\n\n /** Clip path applied to the \"after\" layer so the divider reveals it. */\n protected readonly clipPath = computed(() => {\n const p = clamp(this.position(), 0, 100);\n if (this.orientation() === 'horizontal') {\n // Show from `p%` to the right edge.\n return `inset(0 0 0 ${p}%)`;\n }\n return `inset(${p}% 0 0 0)`;\n });\n\n // Pointer handlers\n\n protected onPointerDown(event: PointerEvent): void {\n if (this.disabled()) return;\n event.preventDefault();\n this.dragging = true;\n (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n this.updateFromPointer(event);\n }\n\n protected onPointerMove(event: PointerEvent): void {\n if (!this.dragging) return;\n this.updateFromPointer(event);\n }\n\n protected onPointerUp(event: PointerEvent): void {\n if (!this.dragging) return;\n this.dragging = false;\n (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (this.disabled()) return;\n const step = event.shiftKey ? 10 : 1;\n let next: number | null = null;\n if (this.orientation() === 'horizontal') {\n if (event.key === 'ArrowLeft') next = this.position() - step;\n else if (event.key === 'ArrowRight') next = this.position() + step;\n } else {\n if (event.key === 'ArrowUp') next = this.position() - step;\n else if (event.key === 'ArrowDown') next = this.position() + step;\n }\n if (event.key === 'Home') next = this.minPosition();\n else if (event.key === 'End') next = this.maxPosition();\n if (next === null) return;\n event.preventDefault();\n this.position.set(clamp(next, this.minPosition(), this.maxPosition()));\n }\n\n private updateFromPointer(event: PointerEvent): void {\n const rect = this.host.nativeElement.getBoundingClientRect();\n const raw =\n this.orientation() === 'horizontal'\n ? ((event.clientX - rect.left) / rect.width) * 100\n : ((event.clientY - rect.top) / rect.height) * 100;\n this.position.set(clamp(raw, this.minPosition(), this.maxPosition()));\n }\n}\n","\n
![\"\"](\"before.jpg\")
\n * ![\"\"](\"after.jpg\")
\n *