{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "tabs", "title": "Tabs", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/tabs/tabs.component.ts", "content": "import {\n AfterViewInit,\n Component,\n Directive,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n SimpleChanges,\n booleanAttribute,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { uniqueId } from '@/ui/popper/popper'\nimport { tabsListVariants, tabsTriggerVariants, type TabsListVariants, type TabsTriggerVariants } from './tabs.variants'\n\nexport type TabsOrientation = 'horizontal' | 'vertical'\nexport type TabsListVariant = NonNullable\nexport type TabsTriggerSize = NonNullable\nexport type TabsActivationMode = 'automatic' | 'manual'\n\n/**\n * Angular port of UIPKGE Tabs with Radix Tabs behaviour: controlled `value` or\n * uncontrolled `defaultValue` + `valueChange`, `orientation`, `dir` and\n * `activationMode` (automatic selects on focus, manual needs Enter / Space / click).\n * The list is a roving-focus group (arrows per orientation, Home / End, looping,\n * disabled triggers skipped) and renders the same sliding `tabs-indicator` span as\n * React, positioned via ResizeObserver + MutationObserver. Inactive panels are hidden\n * and unmounted unless force-mounted. Class strings match React.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-tabs, [ui-tabs]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"tabs\"',\n '[attr.dir]': 'dir',\n '[attr.data-orientation]': 'orientation',\n '[class]': 'hostClass',\n },\n template: ``,\n})\nexport class UiTabsComponent {\n @Input('class') className?: string\n @Input() value?: string\n @Input() defaultValue?: string\n @Input() orientation: TabsOrientation = 'horizontal'\n @Input() dir: 'ltr' | 'rtl' = 'ltr'\n @Input() activationMode: TabsActivationMode = 'automatic'\n @Output() valueChange = new EventEmitter()\n\n readonly baseId = uniqueId('tabs')\n private readonly _value = signal(null)\n\n get activeValue(): string | undefined {\n if (this.value !== undefined) return this.value\n return this._value() ?? this.defaultValue\n }\n\n select(v: string): void {\n if (v === this.activeValue) return\n this._value.set(v)\n this.valueChange.emit(v)\n }\n\n triggerId(value: string): string {\n return `${this.baseId}-trigger-${value}`\n }\n\n contentId(value: string): string {\n return `${this.baseId}-content-${value}`\n }\n\n get hostClass(): string {\n return cn('flex w-full', this.orientation === 'vertical' ? 'flex-row gap-4' : 'flex-col gap-2', this.className)\n }\n}\n\nconst INDICATOR_EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-tabs-list, [ui-tabs-list]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"tabs-list\"',\n '[attr.data-animated]': 'animated ? \"true\" : \"false\"',\n '[attr.role]': '\"tablist\"',\n '[attr.aria-orientation]': 'tabs.orientation',\n '[attr.data-orientation]': 'tabs.orientation',\n '[attr.dir]': 'tabs.dir',\n // Radix RovingFocusGroup: the list is the tab stop and forwards focus to the active tab.\n '[attr.tabindex]': 'tabbingBackOut() ? -1 : 0',\n '[class]': 'hostClass',\n '(mousedown)': 'clickFocus = true',\n '(focus)': 'onFocus($event)',\n '(focusout)': 'tabbingBackOut.set(false)',\n },\n template: `@if (animated) {\n \n }\n `,\n})\nexport class UiTabsListComponent implements AfterViewInit, OnChanges, OnDestroy {\n readonly tabs = inject(UiTabsComponent)\n readonly el = inject>(ElementRef).nativeElement\n @Input('class') className?: string\n @Input() variant: TabsListVariant = 'segmented'\n /** Styling orientation; defaults to the Tabs root's orientation. */\n @Input() orientation?: TabsOrientation\n /** Sliding active indicator (default true). When false, the active surface paints on the trigger. */\n @Input({ transform: booleanAttribute }) animated = true\n @Input({ transform: booleanAttribute }) loop = true\n\n readonly indicatorStyle = signal>({ opacity: '0' })\n readonly tabbingBackOut = signal(false)\n /** Roving tab stop: the trigger that was focused last (Radix currentTabStopId). */\n readonly currentTabStop = signal(null)\n clickFocus = false\n private firstPosition = true\n private stopObserving: (() => void) | null = null\n private viewReady = false\n\n get effectiveOrientation(): TabsOrientation {\n return this.orientation ?? this.tabs.orientation\n }\n\n get indicatorClass(): string {\n if (this.variant === 'pill')\n return 'pointer-events-none absolute top-0 left-0 z-0 rounded-full bg-primary shadow-xs will-change-transform'\n if (this.variant === 'underline')\n return 'pointer-events-none absolute top-0 left-0 z-0 bg-foreground will-change-transform'\n return 'pointer-events-none absolute top-0 left-0 z-0 rounded-sm bg-background shadow-xs will-change-transform'\n }\n\n ngAfterViewInit(): void {\n this.viewReady = true\n this.observe()\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (this.viewReady && (changes['animated'] || changes['variant'] || changes['orientation'])) {\n // Wait for the indicator span to (un)render before measuring.\n queueMicrotask(() => this.observe())\n }\n }\n\n ngOnDestroy(): void {\n this.stopObserving?.()\n }\n\n /** Bind observers once per animated / variant / orientation (not per render), like React. */\n private observe(): void {\n this.stopObserving?.()\n this.stopObserving = null\n this.firstPosition = true\n if (!this.animated) {\n this.indicatorStyle.set({ opacity: '0' })\n return\n }\n this.updateIndicator()\n const root = this.el\n const triggers = () => root.querySelectorAll('[data-slot=\"tabs-trigger\"]')\n const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => this.updateIndicator()) : null\n if (ro) {\n ro.observe(root)\n triggers().forEach((t) => ro.observe(t))\n }\n const mo =\n typeof MutationObserver !== 'undefined'\n ? new MutationObserver((mutations) => {\n if (ro && mutations.some((m) => m.type === 'childList')) triggers().forEach((t) => ro.observe(t))\n this.updateIndicator()\n })\n : null\n mo?.observe(root, { attributes: true, attributeFilter: ['data-state'], subtree: true, childList: true })\n this.stopObserving = () => {\n ro?.disconnect()\n mo?.disconnect()\n }\n }\n\n private transition(): string {\n const reduced =\n typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n if (reduced || this.firstPosition) return 'none'\n return `transform 220ms ${INDICATOR_EASE}, width 220ms ${INDICATOR_EASE}, height 220ms ${INDICATOR_EASE}`\n }\n\n updateIndicator(): void {\n if (!this.animated) return\n const root = this.el\n const active = root.querySelector('[data-slot=\"tabs-trigger\"][data-state=\"active\"]')\n if (!active) {\n this.indicatorStyle.set({ opacity: '0' })\n return\n }\n const listRect = root.getBoundingClientRect()\n const activeRect = active.getBoundingClientRect()\n const left = activeRect.left - listRect.left + root.scrollLeft\n const top = activeRect.top - listRect.top + root.scrollTop\n const transition = this.transition()\n const thickness = 2\n let box: { width: number; height: number; x: number; y: number }\n if (this.variant === 'underline' && this.effectiveOrientation === 'vertical') {\n box = { width: thickness, height: activeRect.height, x: listRect.width - thickness, y: top }\n } else if (this.variant === 'underline') {\n box = { width: activeRect.width, height: thickness, x: left, y: listRect.height - thickness }\n } else {\n box = { width: activeRect.width, height: activeRect.height, x: left, y: top }\n }\n this.indicatorStyle.set({\n width: `${box.width}px`,\n height: `${box.height}px`,\n transform: `translate3d(${box.x}px, ${box.y}px, 0)`,\n opacity: '1',\n transition,\n })\n this.firstPosition = false\n }\n\n /** Enabled triggers of this list, in DOM order. */\n focusableTriggers(): HTMLElement[] {\n return [...this.el.querySelectorAll('[data-slot=\"tabs-trigger\"]')].filter(\n (t) => t.closest('[data-slot=\"tabs-list\"]') === this.el && !t.hasAttribute('data-disabled'),\n )\n }\n\n /** Keyboard focus landing on the list itself moves to the active tab (then the tab stop, then the first). */\n onFocus(event: FocusEvent): void {\n const fromClick = this.clickFocus\n this.clickFocus = false\n if (event.target !== this.el || fromClick || this.tabbingBackOut()) return\n const items = this.focusableTriggers()\n const active = items.find((t) => t.getAttribute('data-state') === 'active')\n const stop = this.currentTabStop()\n const current = stop === null ? undefined : items.find((t) => t.id === this.tabs.triggerId(stop))\n ;(active ?? current ?? items[0])?.focus()\n }\n\n /** Radix RovingFocusGroup arrow / Home / End / PageUp / PageDown handling. */\n onTriggerKeydown(event: KeyboardEvent, trigger: HTMLElement): void {\n if (event.key === 'Tab' && event.shiftKey) {\n this.tabbingBackOut.set(true)\n return\n }\n if (event.target !== trigger || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return\n const vertical = this.tabs.orientation === 'vertical'\n const rtl = this.tabs.dir === 'rtl'\n const key =\n !vertical && rtl ? ({ ArrowLeft: 'ArrowRight', ArrowRight: 'ArrowLeft' }[event.key] ?? event.key) : event.key\n let intent: 'first' | 'last' | 'prev' | 'next' | null = null\n if (key === 'Home' || key === 'PageUp') intent = 'first'\n else if (key === 'End' || key === 'PageDown') intent = 'last'\n else if ((!vertical && key === 'ArrowLeft') || (vertical && key === 'ArrowUp')) intent = 'prev'\n else if ((!vertical && key === 'ArrowRight') || (vertical && key === 'ArrowDown')) intent = 'next'\n if (!intent) return\n event.preventDefault()\n const items = this.focusableTriggers()\n const i = items.indexOf(trigger)\n let target: HTMLElement | undefined\n if (intent === 'first') target = items[0]\n else if (intent === 'last') target = items[items.length - 1]\n else {\n const next = intent === 'next' ? i + 1 : i - 1\n target = this.loop ? items[(next + items.length) % items.length] : items[next]\n }\n target?.focus()\n }\n\n get hostClass(): string {\n return cn(\n 'group/list relative',\n tabsListVariants({ variant: this.variant, orientation: this.effectiveOrientation }),\n this.className,\n )\n }\n}\n\n/** Use `