\n \n \n\n \n @for (item of root.items; track item.href ?? item.value; let idx = $index) {\n activeIndex\"\n [class.hover:bg-muted-foreground/50]=\"idx > activeIndex\"\n (click)=\"root.scrollToHref(item.href ?? item.value ?? '')\"\n >\n }\n
\n\n \n \n {{ activeTitle }}\n \n \n {{ Math.round(rootProgress * 100) }}%\n \n
\n\n = root.items.length - 1\"\n class=\"text-muted-foreground hover:bg-muted/80 hover:text-foreground focus-visible:ring-ring flex size-7 items-center justify-center rounded-full transition-[color,background-color,box-shadow,opacity,scale] outline-none focus-visible:ring-2 focus-visible:ring-offset-1 active:scale-95 disabled:pointer-events-none disabled:opacity-25\"\n (click)=\"root.goToNext()\"\n >\n \n \n } @else if (root && isScrollSpy) {\n @for (item of root.items; track item.href ?? item.value; let idx = $index) {\n \n @if (idx === activeIndex) {\n \n }\n {{ item.title || (item.href ?? item.value ?? '') }}\n \n }\n \n \n } @else if (root) {\n @for (item of root.items; track item.href ?? item.value; let idx = $index) {\n activeIndex\"\n [class.hover:bg-muted/30]=\"idx > activeIndex\"\n [class.hover:text-foreground]=\"idx > activeIndex\"\n (click)=\"root.scrollToHref(item.href ?? item.value ?? '')\"\n >\n activeIndex\"\n [class.text-muted-foreground/70]=\"idx > activeIndex\"\n >\n @if (idx < activeIndex) {\n \n } @else {\n {{ idx + 1 }}\n }\n \n {{ item.title || (item.href ?? item.value ?? '') }}\n \n @if (idx < root.items.length - 1) {\n \n }\n }\n }\n `,\n})\nexport class UiScrollSpyStepperComponent {\n @Input('class') className?: string\n\n Math = Math\n\n readonly root: UiScrollSpyComponent | null = null\n\n constructor() {\n try {\n this.root = inject(\n forwardRef(() => UiScrollSpyComponent),\n { optional: true },\n )\n } catch {}\n }\n\n get isScrollSpy(): boolean {\n return (\n this.root?.variant === 'scrollspy' ||\n this.root?.variant === 'tabs' ||\n this.root?.variant === 'pills' ||\n this.root?.indicator === 'pill' ||\n this.root?.indicator === 'dot'\n )\n }\n\n get slotName(): string {\n if (this.root?.position === 'bottom') return 'scroll-spy-stepper-bottom'\n return this.isScrollSpy ? 'scroll-spy-top' : 'scroll-spy-stepper-top'\n }\n\n get activeIndex(): number {\n if (!this.root || !this.root.items) return 0\n const val = this.root.modelValue.replace(/^#/, '')\n const idx = this.root.items.findIndex((i) => (i.href ?? i.value ?? '').replace(/^#/, '') === val)\n return idx >= 0 ? idx : 0\n }\n\n get activeTitle(): string {\n return this.root?.items?.[this.activeIndex]?.title ?? ''\n }\n\n get rootProgress(): number {\n return this.root?.currentProgress ?? 0\n }\n\n get hostClass(): string {\n if (this.root?.position === 'bottom') {\n return cn(\n 'border-border/80 bg-background/95 sticky bottom-3 z-30 mx-auto flex items-center gap-2 rounded-full border px-3 py-1.5 shadow-md backdrop-blur-md select-none',\n this.className,\n )\n }\n if (this.isScrollSpy) {\n return cn(\n 'border-border/70 bg-card/85 relative sticky top-0 z-20 flex w-full scrollbar-none items-center gap-1 overflow-x-auto rounded-xl border p-1.5 shadow-xs backdrop-blur-md',\n this.className,\n )\n }\n return cn(\n 'border-border/70 bg-card/85 sticky top-0 z-20 flex w-full scrollbar-none items-center gap-1.5 overflow-x-auto rounded-xl border p-2 shadow-xs backdrop-blur-md',\n this.className,\n )\n }\n}\n\n/**\n * Angular port of UIPKGE ScrollSpy. In-page navigation list where the active\n * item highlights as the user scrolls through anchored sections. Root +\n * title/list/item/link/indicator/stepper parts mirror the Vue file splits;\n * intersection observation is plain inputs/outputs at the consumer level.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-scroll-spy, [ui-scroll-spy]',\n standalone: true,\n imports: [\n UiScrollSpyTitleComponent,\n UiScrollSpyListComponent,\n UiScrollSpyItemComponent,\n UiScrollSpyLinkComponent,\n UiScrollSpyIndicatorComponent,\n UiScrollSpyStepperComponent,\n ],\n host: {\n '[attr.data-slot]': '\"scroll-spy\"',\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-position]': 'resolvedPosition',\n '[attr.data-rail-position]': 'resolvedRailPosition',\n '[attr.data-variant]': 'resolvedVariant',\n '[attr.data-turn]': 'resolvedTurn',\n '[attr.data-indicator]': 'indicator',\n '[attr.data-keep-scrolled]': 'keepScrolled ? \"true\" : null',\n '[attr.data-highlight-parent]': 'highlightParent ? \"true\" : null',\n '[attr.data-line-width]': 'lineWidth',\n '[attr.data-color]': 'color',\n '[class]': 'hostClass',\n '[style.top.px]': 'affix && resolvedPosition !== \"bottom\" ? offsetTop : null',\n },\n template: `\n @if (items && items.length > 0) {\n @if (resolvedPosition === 'top') {\n \n } @else if (resolvedPosition !== 'bottom') {\n @if (title) {\n {{ title }}\n }\n \n \n @for (item of items; track item.href ?? item.value ?? $index; let itemIdx = $index) {\n 0 && items[itemIdx - 1]?.children?.length ? 'mt-2' : undefined\"\n >\n \n \n @for (child of item.children ?? []; track child.href ?? child.value ?? $index; let childIdx = $index) {\n 0 && item.children?.[childIdx - 1]?.children?.length)\n ? 'mt-2'\n : undefined\n \"\n >\n \n \n @for (\n grandchild of child.children ?? [];\n track grandchild.href ?? grandchild.value ?? $index;\n let gIdx = $index\n ) {\n \n \n \n }\n }\n }\n \n }\n @if (resolvedPosition === 'bottom') {\n \n }\n } @else {\n \n }\n `,\n})\nexport class UiScrollSpyComponent implements OnInit, OnDestroy {\n @Input() modelValue = ''\n @Output() modelValueChange = new EventEmitter()\n @Output() change = new EventEmitter()\n @Output() progress = new EventEmitter()\n @Input() items: ScrollSpyItem[] = []\n @Input() title?: string\n @Input() offsetTop = 0\n @Input() bounds = 5\n @Input() scrollContainer?: HTMLElement | string | null\n @Input({ transform: booleanAttribute }) affix = false\n @Input() variant?: ScrollSpyVariant\n @Input() turn?: ScrollSpyTurn\n @Input() indicator: ScrollSpyIndicatorMode = 'line'\n @Input({ transform: booleanAttribute }) keepScrolled = false\n @Input({ transform: booleanAttribute }) highlightParent = true\n @Input() lineWidth: ScrollSpyLineWidth = 'default'\n @Input() color: ScrollSpyColor = 'primary'\n @Input() position: ScrollSpyPosition = 'right'\n @Input() railPosition?: ScrollSpyRailPosition\n private _className?: string\n @Input('class') set classAttr(v: string | undefined) {\n this._className = v\n }\n @Input() set className(v: string | undefined) {\n this._className = v\n }\n get className(): string | undefined {\n return this._className\n }\n\n registered: RegisteredItem[] = []\n scrolledValues = new Set()\n currentProgress = 0\n\n private scrollHandler = () => this.onScroll()\n private containerEl: HTMLElement | Window | null = null\n\n private readonly el: ElementRef | null = null\n\n constructor() {\n try {\n this.el = inject>(ElementRef, { optional: true })\n } catch {}\n }\n\n ngOnInit(): void {\n if (typeof window !== 'undefined') {\n this.initContainer()\n if (this.items.length > 0 && !this.modelValue) {\n this.modelValue = this.items[0]?.href ?? this.items[0]?.value ?? ''\n }\n }\n }\n\n ngOnDestroy(): void {\n if (this.containerEl) {\n this.containerEl.removeEventListener('scroll', this.scrollHandler)\n }\n }\n\n private initContainer(): void {\n if (typeof window === 'undefined') return\n if (typeof this.scrollContainer === 'string') {\n this.containerEl = document.querySelector(this.scrollContainer) as HTMLElement | null\n } else if (this.scrollContainer instanceof HTMLElement) {\n this.containerEl = this.scrollContainer\n } else {\n this.containerEl = window\n }\n if (this.containerEl) {\n this.containerEl.addEventListener('scroll', this.scrollHandler, { passive: true })\n }\n }\n\n private onScroll(): void {\n const allItems = this.getAllItems()\n if (allItems.length === 0) return\n\n let current = allItems[0]?.href ?? allItems[0]?.value ?? ''\n const offset = this.offsetTop + this.bounds + 20\n\n for (const item of allItems) {\n const id = (item.href ?? item.value ?? '').replace(/^#/, '')\n const el = document.getElementById(id)\n if (el) {\n const rect = el.getBoundingClientRect()\n if (rect.top <= offset) {\n current = item.href ?? item.value ?? ''\n }\n }\n }\n\n if (current && current !== this.modelValue) {\n this.setActive(current)\n }\n }\n\n getAllItems(): ScrollSpyItem[] {\n const list: ScrollSpyItem[] = []\n const walk = (items: ScrollSpyItem[]) => {\n for (const item of items) {\n list.push(item)\n if (item.children) walk(item.children)\n }\n }\n walk(this.items)\n return list\n }\n\n get resolvedPosition(): ScrollSpyPosition {\n return this.position ?? 'right'\n }\n\n get resolvedRailPosition(): ScrollSpyRailPosition {\n if (this.railPosition) return this.railPosition\n return this.position === 'left' ? 'right' : 'left'\n }\n\n get resolvedTurn(): ScrollSpyTurn {\n if (this.turn) return this.turn\n if (this.variant === 'angle' || this.variant === 'rounded') return 'rounded'\n if (this.variant === 'sharp') return 'sharp'\n if (this.variant === 'line' || this.variant === 'default') return 'straight'\n return 'straight'\n }\n\n get resolvedVariant(): ScrollSpyVariant {\n if (this.variant) return this.variant\n if (this.turn === 'sharp') return 'angle'\n if (this.turn === 'rounded') return 'rounded'\n if (this.position === 'top' || this.position === 'bottom') return 'stepper'\n return 'line'\n }\n\n get resolvedLineWidth(): number {\n if (typeof this.lineWidth === 'number') return this.lineWidth\n return this.lineWidth === 'thin' ? 1.5 : this.lineWidth === 'thick' ? 3.5 : 2.5\n }\n\n get handleColor(): string {\n return resolveScrollSpyColor(this.color).borderClass\n }\n\n get hostClass(): string {\n const isTopOrBottom = this.resolvedPosition === 'top' || this.resolvedPosition === 'bottom'\n return cn(\n 'relative flex text-sm',\n isTopOrBottom ? 'w-full flex-col' : 'flex-col',\n this.affix && (this.resolvedPosition === 'bottom' ? 'sticky bottom-4' : 'sticky'),\n this.className,\n )\n }\n\n registerItem(item: RegisteredItem): void {\n if (!this.registered.some((i) => i.value === item.value)) this.registered.push(item)\n }\n\n unregisterItem(value: string): void {\n this.registered = this.registered.filter((i) => i.value !== value)\n }\n\n normalize(href: string): string {\n return href.replace(/^#/, '')\n }\n\n isItemActive(href: string): boolean {\n return this.normalize(href) === this.normalize(this.modelValue)\n }\n\n isItemParentActive(href: string): boolean {\n if (!this.highlightParent || this.isItemActive(href)) return this.isItemActive(href)\n return this.registered.some((i) => this.isItemActive(i.value) && i.value.startsWith(this.normalize(href)))\n }\n\n isItemScrolled(href: string): boolean {\n return this.scrolledValues.has(this.normalize(href))\n }\n\n setActive(value: string): void {\n this.modelValue = value\n this.modelValueChange.emit(value)\n this.change.emit(value)\n }\n\n markScrolled(value: string, done = true): void {\n const key = this.normalize(value)\n if (done) this.scrolledValues.add(key)\n else this.scrolledValues.delete(key)\n }\n\n reportProgress(value: number): void {\n const p = Math.min(1, Math.max(0, value))\n this.currentProgress = p\n this.progress.emit(p)\n }\n\n scrollToHref(href: string): void {\n this.setActive(href)\n const id = this.normalize(href)\n const target = document.getElementById(id)\n if (target) {\n target.scrollIntoView({ behavior: 'smooth' })\n }\n }\n\n goToPrev(): void {\n const items = this.getAllItems()\n const idx = items.findIndex((i) => this.normalize(i.href ?? i.value ?? '') === this.normalize(this.modelValue))\n if (idx > 0) {\n this.scrollToHref(items[idx - 1]!.href ?? items[idx - 1]!.value ?? '')\n }\n }\n\n goToNext(): void {\n const items = this.getAllItems()\n const idx = items.findIndex((i) => this.normalize(i.href ?? i.value ?? '') === this.normalize(this.modelValue))\n if (idx >= 0 && idx < items.length - 1) {\n this.scrollToHref(items[idx + 1]!.href ?? items[idx + 1]!.value ?? '')\n }\n }\n}\n\nexport * from './scroll-spy.types'\n",
"type": "registry:ui",
"target": "~/src/app/components/ui/scroll-spy/scroll-spy.component.ts"
},
{
"path": "packages/registry-angular/components/scroll-spy/scroll-spy.types.ts",
"content": "/**\n * Angular port of the scroll-spy context types. Same exported names as the\n * Vue `context.ts` but framework-free (no vue/reka imports) so registry\n * consumers and vitest stay dependency-light.\n */\n\nexport type ScrollSpyTurn = 'straight' | 'sharp' | 'rounded'\nexport type ScrollSpyVariant =\n 'default' | 'line' | 'angle' | 'sharp' | 'rounded' | 'stepper' | 'scrollspy' | 'tabs' | 'pills'\nexport type ScrollSpyIndicatorMode = 'segment' | 'fill' | 'progress' | 'pill' | 'dot' | 'line'\nexport type ScrollSpyPosition = 'right' | 'left' | 'top' | 'bottom'\nexport type ScrollSpyRailPosition = 'left' | 'right'\n\nexport type ScrollSpyLineWidth = 'thin' | 'default' | 'thick' | number\nexport type ScrollSpyColor = 'primary' | 'foreground' | 'destructive' | 'secondary' | (string & {})\n\nexport interface ScrollSpyItem {\n href?: string\n value?: string\n title: string\n depth?: number\n children?: ScrollSpyItem[]\n}\n\nexport interface RegisteredItem {\n value: string\n depth: number\n el?: HTMLElement | null\n title?: string\n}\n\nexport interface HandleColorResolved {\n bgClass: string\n strokeClass: string\n borderClass: string\n customColor?: string\n}\n\nexport function resolveScrollSpyColor(color: ScrollSpyColor = 'primary'): HandleColorResolved {\n if (color === 'primary')\n return {\n bgClass: 'bg-primary',\n strokeClass: 'stroke-primary',\n borderClass: 'border-primary',\n customColor: undefined,\n }\n if (color === 'foreground')\n return {\n bgClass: 'bg-foreground',\n strokeClass: 'stroke-foreground',\n borderClass: 'border-foreground',\n customColor: undefined,\n }\n if (color === 'destructive')\n return {\n bgClass: 'bg-destructive',\n strokeClass: 'stroke-destructive',\n borderClass: 'border-destructive',\n customColor: undefined,\n }\n if (color === 'secondary')\n return {\n bgClass: 'bg-secondary',\n strokeClass: 'stroke-secondary',\n borderClass: 'border-secondary',\n customColor: undefined,\n }\n return { bgClass: '', strokeClass: '', borderClass: '', customColor: color }\n}\n",
"type": "registry:ui",
"target": "~/src/app/components/ui/scroll-spy/scroll-spy.types.ts"
},
{
"path": "packages/registry-angular/components/scroll-spy/index.ts",
"content": "export {\n UiScrollSpyComponent,\n UiScrollSpyTitleComponent,\n UiScrollSpyListComponent,\n UiScrollSpyItemComponent,\n UiScrollSpyLinkComponent,\n UiScrollSpyIndicatorComponent,\n UiScrollSpyStepperComponent,\n} from './scroll-spy.component'\nexport * from './scroll-spy.types'\n",
"type": "registry:ui",
"target": "~/src/app/components/ui/scroll-spy/index.ts"
}
],
"dependencies": [
"lucide-angular"
],
"devDependencies": [],
"registryDependencies": [],
"description": "In-page navigation list with scroll-spy. Renders a vertical list of links; the active item highlights as the user scrolls through anchored sections.",
"categories": [
"navigation"
]
}