import * as i0 from '@angular/core'; import { TemplateRef, InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal, WritableSignal, ModelSignal, ElementRef } from '@angular/core'; import { VariantProps } from 'class-variance-authority'; /** * Marker directive for custom tab label templates. * * Provides a custom label template for rich tab headers (icons, badges, counters). * Applied to an `` inside ``. * * @tokens none * * @example * ```html * * * * Settings * 3 * *

Tab content here.

* * ``` */ declare class ComTabLabel { readonly templateRef: TemplateRef; static ngTemplateContextGuard(_dir: ComTabLabel, ctx: unknown): ctx is void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Marker directive for lazy tab content rendering. * * Content wrapped in `` is only instantiated * when the tab becomes active for the first time. * * @tokens none * * @example Lazy loaded content * ```html * * * * * * ``` * * @example Combined with @defer * ```html * * * @defer { * * } @loading { *

Loading reports...

* } * * * ``` */ declare class ComTabContent { readonly templateRef: TemplateRef; static ngTemplateContextGuard(_dir: ComTabContent, ctx: unknown): ctx is void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Individual tab definition component. * * This is a **definition component** — it doesn't render anything itself. * It provides a label and content template to the parent `ComTabGroup`. * * @tokens none * * @example Basic usage * ```html * *

Overview content.

* * ``` * * @example Custom label with icon * ```html * * * * Settings * *

Settings content.

* * ``` * * @example Lazy loaded content * ```html * * * * * * ``` * * @example Closable tab * ```html * *

Document content.

* * ``` */ declare class ComTab { /** Plain text label; ignored if `[comTabLabel]` template is provided. */ readonly label: InputSignal; /** Prevents selection when true. */ readonly disabled: InputSignalWithTransform; /** Shows a close/remove button on the tab. */ readonly closable: InputSignalWithTransform; /** Emitted when the close button is clicked. */ readonly closed: OutputEmitterRef; /** Custom label template (queried from content). */ readonly customLabel: Signal; /** Lazy content template (queried from content). */ readonly lazyContent: Signal; /** Implicit content template from ng-content. */ readonly implicitContent: Signal | undefined>; /** Whether this tab is currently active. Set by ComTabGroup. */ readonly isActive: WritableSignal; /** Whether this tab content has been rendered at least once. */ readonly hasBeenActivated: WritableSignal; /** * Returns the label template if provided, otherwise null. * Parent uses this to decide between string label or template. */ readonly labelTemplate: Signal | null>; /** * Returns the content template: lazy template if present, else implicit content. */ readonly contentTemplate: Signal | undefined>; /** * Whether this tab uses lazy loading. */ readonly isLazy: Signal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type TabVariant = 'underline' | 'pill' | 'outline' | 'solid'; type TabSize = 'sm' | 'md' | 'lg'; type TabColor = 'primary' | 'accent' | 'muted'; type TabAlignment = 'start' | 'center' | 'end' | 'stretch'; declare const tabItemVariants: (props?: { variant?: TabVariant; size?: TabSize; color?: TabColor; active?: boolean; }) => string; type TabItemVariants = VariantProps; declare const tabHeaderVariants: (props?: { alignment?: TabAlignment; variant?: TabVariant; }) => string; type TabHeaderVariants = VariantProps; declare const tabScrollButtonVariants: (props?: { direction?: 'left' | 'right'; variant?: TabVariant; }) => string; type TabScrollButtonVariants = VariantProps; /** * @tokens `--color-muted-foreground`, `--color-foreground`, `--color-ring`, `--radius-interactive-sm` */ declare const tabCloseButtonVariants: (props?: { size?: TabSize; }) => string; type TabCloseButtonVariants = VariantProps; declare const tabPanelVariants: (props?: { animated?: boolean; }) => string; type TabPanelVariants = VariantProps; /** Event emitted when the selected tab changes. */ interface TabChangeEvent { index: number; tab: ComTab; } /** * Tab group component — orchestrates tab state and renders header + panels. * * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`, * `--color-muted`, `--color-muted-foreground`, `--color-border`, `--color-ring`, * `--color-disabled`, `--color-disabled-foreground` * * @example Basic usage * ```html * * *

Overview content.

* * *

Settings content.

* * * ``` * * @example With variants * ```html * *

Pill style.

Content.

* * ``` * * @example Two-way binding * ```html * *

First.

Second.

* * ``` * * @example Lazy loaded content * ```html * *

Loads immediately.

* * * * * * * ``` */ declare class ComTabGroup { /** Unique ID for this tab group instance. */ readonly baseId: string; /** Visual treatment of tab buttons. */ readonly variant: InputSignal; /** Controls tab button padding and font size. */ readonly size: InputSignal; /** Active tab color. */ readonly color: InputSignal; /** Tab alignment within the header. */ readonly alignment: InputSignal; /** Two-way bindable selected tab index. */ readonly selectedIndex: ModelSignal; /** Enable/disable panel transition animation. */ readonly animationEnabled: InputSignalWithTransform; /** When true, keeps inactive tab DOM alive (hidden); when false, destroys inactive tab content. */ readonly preserveContent: InputSignalWithTransform; /** Emits when the selected tab changes with index and tab reference. */ readonly selectedTabChange: OutputEmitterRef; /** Emits the index of the focused (not yet selected) tab for keyboard navigation feedback. */ readonly focusChange: OutputEmitterRef; /** All ComTab children. */ readonly tabs: Signal; /** The currently active tab. */ readonly activeTab: Signal; /** ID of the active tab button. */ readonly activeTabId: Signal; /** ID of the active panel. */ readonly activePanelId: Signal; /** Classes for panel container. */ readonly panelClasses: Signal; constructor(); getTabId(index: number): string; getPanelId(index: number): string; /** * Determines whether a tab's content should be rendered. * For lazy tabs, content is only rendered after first activation. */ shouldRenderTab(tab: ComTab, _index: number): boolean; protected onTabSelected(index: number): void; protected onTabFocused(index: number): void; protected onTabClosed(index: number): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Tab link directive for route-driven navigation tabs. * * Applied to anchor or button elements inside `com-tab-nav-bar`. * Automatically detects active state from `routerLinkActive` if present. * * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`, * `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`, * `--color-foreground`, `--color-muted-foreground`, `--color-muted`, * `--color-border`, `--color-ring`, * `--color-disabled`, `--color-disabled-foreground` * * @example Basic usage with router * ```html * * ``` * * @example Manual active state control * ```html * Overview * ``` * * @example Disabled link * ```html * Coming Soon * ``` */ declare class ComTabLink { private readonly routerLinkActive; private readonly elementRef; /** Manual active state control. */ readonly active: InputSignalWithTransform; /** Prevents interaction when true. */ readonly disabled: InputSignalWithTransform; /** Visual variant (inherited from parent nav bar or set directly). */ readonly variant: InputSignal; /** Size (inherited from parent nav bar or set directly). */ readonly size: InputSignal; /** Color (inherited from parent nav bar or set directly). */ readonly color: InputSignal; /** Additional CSS classes. */ readonly userClass: InputSignal; /** * Reactive signal from RouterLinkActive.isActiveChange. * Converts the EventEmitter to a signal for proper reactivity. */ private readonly routerLinkActiveState; /** * Resolved active state — uses routerLinkActive if available, otherwise input. */ readonly isActive: Signal; /** Computed host class from CVA + consumer overrides. */ readonly computedClass: Signal; /** Focus this tab link element. */ focus(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Tab navigation bar component for route-driven tabs. * * Renders a styled, scrollable row of links that map to routes. * Content is handled by ``. * * @tokens `--color-primary`, `--color-accent`, `--color-muted`, `--color-muted-foreground`, * `--color-border`, `--color-ring`, `--color-disabled`, `--color-disabled-foreground` * * @example Basic usage * ```html * * * ``` * * @example With variants * ```html * * ``` */ declare class ComTabNavBar { private readonly destroyRef; /** Unique ID for this nav bar instance. */ readonly baseId: string; /** Visual treatment of tab links. */ readonly variant: InputSignal; /** Controls tab link padding and font size. */ readonly size: InputSignal; /** Active tab color. */ readonly color: InputSignal; /** Tab alignment within the bar. */ readonly alignment: InputSignal; /** All ComTabLink children. */ readonly tabLinks: Signal; readonly scrollContainer: Signal | undefined>; private readonly scrollLeftValue; private readonly containerWidth; private readonly scrollWidth; protected readonly indicatorLeft: WritableSignal; protected readonly indicatorWidth: WritableSignal; private keyManager; private resizeObserver; /** The currently active link. */ readonly activeLink: Signal; readonly hasOverflow: Signal; readonly showScrollLeft: Signal; readonly showScrollRight: Signal; readonly headerClasses: Signal; readonly scrollLeftClasses: Signal; readonly scrollRightClasses: Signal; readonly indicatorColorClass: Signal; constructor(); scrollLeft(): void; scrollRight(): void; protected onScroll(): void; protected onKeydown(event: KeyboardEvent): void; private setupResizeObserver; private updateScrollState; private setupKeyManager; private createKeyManagerItems; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export { ComTab, ComTabContent, ComTabGroup, ComTabLabel, ComTabLink, ComTabNavBar, tabCloseButtonVariants, tabHeaderVariants, tabItemVariants, tabPanelVariants, tabScrollButtonVariants }; export type { TabAlignment, TabChangeEvent, TabCloseButtonVariants, TabColor, TabHeaderVariants, TabItemVariants, TabPanelVariants, TabScrollButtonVariants, TabSize, TabVariant };