import * as i0 from '@angular/core'; import { InjectionToken, TemplateRef, ViewContainerRef, OnInit, OnChanges, OnDestroy, SimpleChanges, AfterContentInit, AfterContentChecked, ChangeDetectorRef, QueryList, ElementRef, EventEmitter, AfterViewInit, NgZone } from '@angular/core'; import * as i1$1 from '@angular/cdk/scrolling'; import { ViewportRuler } from '@angular/cdk/scrolling'; import * as i1 from '@sbb-esta/angular/core'; import * as i3 from '@sbb-esta/angular/icon'; import { FocusOrigin, FocusableOption, FocusMonitor } from '@angular/cdk/a11y'; import { BooleanInput, NumberInput } from '@angular/cdk/coercion'; import { CdkPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal'; import { Subject } from 'rxjs'; import { Platform } from '@angular/cdk/platform'; import { AnimationEvent, AnimationTriggerMetadata } from '@angular/animations'; /** * Used to provide a tab label to a tab without causing a circular dependency. * @docs-private */ declare const SBB_TAB: InjectionToken; /** Used to flag tab labels for use with the portal directive */ declare class SbbTabLabel extends CdkPortal { _closestTab: any; constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef, _closestTab: any); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Used to provide a tab group to a tab without causing a circular dependency. * @docs-private */ declare const SBB_TAB_GROUP: InjectionToken; declare class SbbTab implements OnInit, OnChanges, OnDestroy { private _viewContainerRef; _closestTabGroup: any; /** Content for the tab label given by ``. */ get templateLabel(): SbbTabLabel; set templateLabel(value: SbbTabLabel); protected _templateLabel: SbbTabLabel; /** * Template provided in the tab content that will be used if present, used to enable lazy-loading */ _explicitContent: TemplateRef; /** Template inside the SbbTab view that contains an ``. */ _implicitContent: TemplateRef; /** Plain text label for the tab, used when there is no template label. */ textLabel: string; /** Aria label for the tab. */ ariaLabel: string; /** * Reference to the element that the tab is labelled by. * Will be cleared if `aria-label` is set at the same time. */ ariaLabelledby: string; /** * Classes to be passed to the tab label inside the sbb-tab-header container. */ labelClass: string | string[]; /** * Classes to be passed to the tab sbb-tab-body container. */ bodyClass: string | string[]; /** Whether the tab is disabled */ disabled: boolean; /** Portal that will be the hosted content of the tab */ private _contentPortal; /** @docs-private */ get content(): TemplatePortal | null; /** Emits whenever the internal state of the tab changes. */ readonly _stateChanges: Subject; /** * The relatively indexed position where 0 represents the center, negative is left, and positive * represents the right. */ position: number | null; /** * The initial relatively index origin of the tab if it was created and selected after there * was already a selected tab. Provides context of what position the tab should originate from. */ origin: number | null; /** * Whether the tab is currently active. */ isActive: boolean; constructor(_viewContainerRef: ViewContainerRef, _closestTabGroup: any); ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; ngOnInit(): void; /** * This has been extracted to a util because of TS 4 and VE. * View Engine doesn't support property rename inheritance. * TS 4.0 doesn't allow properties to override accessors or vice-versa. * @docs-private */ protected _setTemplateLabelInput(value: SbbTabLabel | undefined): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_disabled: unknown; } /** Object that can be used to configure the default options for the tabs module. */ interface SbbTabsConfig { /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */ animationDuration?: string; /** * Whether pagination should be disabled. This can be used to avoid unnecessary * layout recalculations if it's known that pagination won't be required. * This applies only for lean design. */ disablePagination?: boolean; /** Whether the tab group should grow to the size of the active tab. */ dynamicHeight?: boolean; /** * By default tabs remove their content from the DOM while it's off-screen. * Setting this to `true` will keep it in the DOM which will prevent elements * like iframes and videos from reloading next time it comes back into the view. */ preserveContent?: boolean; } /** Injection token that can be used to provide the default options the tabs module. */ declare const SBB_TABS_CONFIG: InjectionToken; /** A simple change event emitted on focus or selection changes. */ declare class SbbTabChangeEvent { /** Index of the currently-selected tab. */ index: number; /** Reference to the currently-selected tab. */ tab: SbbTab; } interface SbbTabGroupBaseHeader { updatePagination(): void; focusIndex: number; } declare class SbbTabGroup implements AfterContentInit, AfterContentChecked, OnDestroy { protected _changeDetectorRef: ChangeDetectorRef; _animationMode?: string | undefined; /** * All tabs inside the tab group. This includes tabs that belong to groups that are nested * inside the current one. We filter out only the tabs that belong to this group in `_tabs`. */ _allTabs: QueryList; _tabBodyWrapper: ElementRef; _tabHeader: SbbTabGroupBaseHeader; /** All of the tabs that belong to the group. */ _tabs: QueryList; /** The tab index that should be selected after the content has been checked. */ private _indexToSelect; /** Index of the tab that was focused last. */ private _lastFocusedTabIndex; /** Snapshot of the height of the tab body wrapper before another tab is activated. */ private _tabBodyWrapperHeight; /** Subscription to tabs being added/removed. */ private _tabsSubscription; /** Subscription to changes in the tab labels. */ private _tabLabelSubscription; /** Whether the tab group should grow to the size of the active tab. */ get dynamicHeight(): boolean; set dynamicHeight(value: BooleanInput); private _dynamicHeight; /** The index of the active tab. */ get selectedIndex(): number | null; set selectedIndex(value: NumberInput); private _selectedIndex; /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */ get animationDuration(): string; set animationDuration(value: NumberInput); private _animationDuration; /** Calculated hide duration which is one third of animationDuration. */ _animationDurationHide: string; /** * Whether pagination should be disabled. This can be used to avoid unnecessary * layout recalculations if it's known that pagination won't be required. * This applies only for lean design. */ get disablePagination(): boolean; set disablePagination(value: BooleanInput); private _disablePagination; /** * By default tabs remove their content from the DOM while it's off-screen. * Setting this to `true` will keep it in the DOM which will prevent elements * like iframes and videos from reloading next time it comes back into the view. */ get preserveContent(): boolean; set preserveContent(value: BooleanInput); private _preserveContent; /** Aria label of the inner `tablist` of the group. */ ariaLabel: string; /** Sets the `aria-labelledby` of the inner `tablist` of the group. */ ariaLabelledby: string; /** Output to enable support for two-way binding on `[(selectedIndex)]` */ readonly selectedIndexChange: EventEmitter; /** Event emitted when focus has changed within a tab group. */ readonly focusChange: EventEmitter; /** Event emitted when the body animation has completed */ readonly animationDone: EventEmitter; /** Event emitted when the tab selection has changed. */ readonly selectedTabChange: EventEmitter; private _groupId; constructor(_changeDetectorRef: ChangeDetectorRef, defaultConfig?: SbbTabsConfig, _animationMode?: string | undefined); /** * After the content is checked, this component knows what tabs have been defined * and what the selected index should be. This is where we can know exactly what position * each tab should be in according to the new selected index, and additionally we know how * a new selected tab should transition in (from the left or right). */ ngAfterContentChecked(): void; ngAfterContentInit(): void; /** Listens to changes in all of the tabs. */ private _subscribeToAllTabChanges; ngOnDestroy(): void; /** * Recalculates the tab group's pagination dimensions. * * WARNING: Calling this method can be very costly in terms of performance. It should be called * as infrequently as possible from outside of the Tabs component as it causes a reflow of the * page. */ updatePagination(): void; /** * Sets focus to a particular tab. * @param index Index of the tab to be focused. */ focusTab(index: number): void; _focusChanged(index: number): void; private _createChangeEvent; /** * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is * on the SbbTab component, whereas the data binding is inside the SbbTabGroup. In order for the * binding to be updated, we need to subscribe to changes in it and trigger change detection * manually. */ private _subscribeToTabLabels; /** Clamps the given index to the bounds of 0 and the tabs length. */ private _clampTabIndex; /** Returns a unique id for each tab label element */ _getTabLabelId(i: number): string; /** Returns a unique id for each tab content element */ _getTabContentId(i: number): string; /** * Sets the height of the body wrapper to the height of the activating tab if dynamic * height property is true. */ _setTabBodyWrapperHeight(tabHeight: number): void; /** Removes the height of the tab body wrapper. */ _removeTabBodyWrapperHeight(): void; /** Handle click events, setting new selected index if appropriate. */ _handleClick(tab: SbbTab, tabHeader: SbbTabGroupBaseHeader, index: number): void; /** Retrieves the tabindex for the tab. */ _getTabIndex(tab: SbbTab, index: number): number | null; /** Callback for when the focused state of a tab has changed. */ _tabFocusChanged(focusOrigin: FocusOrigin, index: number): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * The directions that scrolling can go in when the header's tabs exceed the header width. 'After' * will scroll the header towards the end of the tabs list and 'before' will scroll towards the * beginning of the list. */ type ScrollDirection = 'after' | 'before'; /** Item inside a paginated tab header. */ type SbbPaginatedTabHeaderItem = FocusableOption & { elementRef: ElementRef; }; declare const _SbbPaginatedTabHeaderMixinBase: i1.AbstractConstructor & { new (): {}; }; /** * Base class for a tab header that supports pagination. * @docs-private */ declare abstract class SbbPaginatedTabHeader extends _SbbPaginatedTabHeaderMixinBase implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy { protected _elementRef: ElementRef; protected _changeDetectorRef: ChangeDetectorRef; private _viewportRuler; private _ngZone; private _platform; _animationMode?: string | undefined; abstract _items: QueryList; abstract _tabListContainer: ElementRef; abstract _tabList: ElementRef; abstract _tabListInner: ElementRef; abstract _nextPaginator: ElementRef; abstract _previousPaginator: ElementRef; /** Trigger a scroll shadow check. */ private _scrollShadowTrigger; /** The distance in pixels that the tab labels should be translated to the left. */ private _scrollDistance; /** Whether the header should scroll to the selected index after the view has been checked. */ private _selectedIndexChanged; /** Emits when the component is destroyed. */ protected readonly _destroyed: Subject; /** Whether the controls for pagination should be displayed */ _showPaginationControls: boolean; /** Whether the tab list can be scrolled more towards the end of the tab label list. */ _disableScrollAfter: boolean; /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */ _disableScrollBefore: boolean; /** * The number of tab labels that are displayed on the header. When this changes, the header * should re-evaluate the scroll position. */ private _tabLabelCount; /** Whether the scroll distance has changed and should be applied after the view is checked. */ private _scrollDistanceChanged; /** Used to manage focus between the tabs. */ private _keyManager; /** Cached text content of the header. */ private _currentTextContent; /** Stream that will stop the automated scrolling. */ private _stopScrolling; /** * Whether pagination should be disabled. This can be used to avoid unnecessary * layout recalculations if it's known that pagination won't be required. * This applies only for lean design. */ get disablePagination(): boolean; set disablePagination(value: BooleanInput); private _disablePagination; /** The index of the active tab. */ get selectedIndex(): number; set selectedIndex(v: number); private _selectedIndex; /** Event emitted when the option is selected. */ readonly selectFocusedIndex: EventEmitter; /** Event emitted when a label is focused. */ readonly indexFocused: EventEmitter; private _injector; constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _viewportRuler: ViewportRuler, _ngZone: NgZone, _platform: Platform, _animationMode?: string | undefined); /** Called when the user has selected an item via the keyboard. */ protected abstract _itemSelected(event: KeyboardEvent): void; ngAfterViewInit(): void; ngAfterContentInit(): void; ngAfterContentChecked(): void; ngOnDestroy(): void; /** Handles keyboard events on the header. */ _handleKeydown(event: KeyboardEvent): void; /** * Callback for when the MutationObserver detects that the content has changed. */ _onContentChanges(): void; /** * Updates the view whether pagination should be enabled or not. * * WARNING: Calling this method can be very costly in terms of performance. It should be called * as infrequently as possible from outside of the Tabs component as it causes a reflow of the * page. */ updatePagination(): void; /** Tracks which element has focus; used for keyboard navigation */ get focusIndex(): number; /** When the focus index is set, we must manually send focus to the correct label */ set focusIndex(value: number); /** * Determines if an index is valid. If the tabs are not ready yet, we assume that the user is * providing a valid index and return true. */ _isValidIndex(index: number): boolean; /** * Sets focus on the HTML element for the label wrapper and scrolls it into the view if * scrolling is enabled. */ _setTabFocus(tabIndex: number): void; /** Performs the CSS transformation on the tab list that will cause the list to scroll. */ _updateTabScrollPosition(): void; /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */ get scrollDistance(): number; set scrollDistance(value: number); /** * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or * the end of the list, respectively). The distance to scroll is computed to be a third of the * length of the tab list view window. * * This is an expensive call that forces a layout reflow to compute box and scroll metrics and * should be called sparingly. */ _scrollHeader(direction: ScrollDirection): { maxScrollDistance: number; distance: number; }; /** Handles click events on the pagination arrows. */ _handlePaginatorClick(direction: ScrollDirection): void; /** * Moves the tab list such that the desired tab label (marked by index) is moved into view. * * This is an expensive call that forces a layout reflow to compute box and scroll metrics and * should be called sparingly. */ _scrollToLabel(labelIndex: number): void; /** * Evaluate whether the pagination controls should be displayed. If the scroll width of the * tab list is wider than the size of the header container, then the pagination controls should * be shown. * * This is an expensive call that forces a layout reflow to compute box and scroll metrics and * should be called sparingly. */ _checkPaginationEnabled(): void; /** * Evaluate whether the before and after controls should be enabled or disabled. * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the * before button. If the header is at the end of the list (scroll distance is equal to the * maximum distance we can scroll), then disable the after button. * * This is an expensive call that forces a layout reflow to compute box and scroll metrics and * should be called sparingly. */ _checkScrollingControls(): void; /** * Determines what is the maximum length in pixels that can be set for the scroll distance. This * is equal to the difference in width between the tab list container and tab header container. * * This is an expensive call that forces a layout reflow to compute box and scroll metrics and * should be called sparingly. */ _getMaxScrollDistance(): number; /** Stops the currently-running paginator interval. */ _stopInterval(): void; /** * Handles the user pressing down on one of the paginators. * Starts scrolling the header after a certain amount of time. * @param direction In which direction the paginator should be scrolled. */ _handlePaginatorPress(direction: ScrollDirection, mouseEvent?: MouseEvent): void; /** * Scrolls the header to a given position. * @param position Position to which to scroll. * @returns Information on the current scroll distance and the maximum. */ private _scrollTo; /** * Calculate whether the scroll shadows should be hidden or shown left, right or on both sides. */ private _calculateScrollState; /** * Apply the scroll shadow state. Adds or removes the appropriate css classes * for the shadow. * We do this manually due to being in a subclass and outside of Angular's * change detection. * @param state The state of the scroll shadows. */ private _applyScrollShadows; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_selectedIndex: unknown; } /** * Navigation component matching the styles of the tab group header. * Provides anchored navigation with animated ink bar. */ declare class SbbTabNav extends SbbPaginatedTabHeader implements AfterContentChecked, AfterContentInit, OnDestroy { /** Query list of all tab links of the tab navigation. */ _items: QueryList; /** * Associated tab panel controlled by the nav bar. If not provided, then the nav bar * follows the ARIA link / navigation landmark pattern. If provided, it follows the * ARIA tabs design pattern. */ tabPanel?: SbbTabNavPanel; _tabListContainer: ElementRef; _tabList: ElementRef; _tabListInner: ElementRef; _nextPaginator: ElementRef; _previousPaginator: ElementRef; constructor(elementRef: ElementRef, ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, platform: Platform, animationMode?: string); protected _itemSelected(): void; ngAfterContentInit(): void; /** Notifies the component that the active link has been changed. */ updateActiveLink(): void; _getRole(): string | null; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Link inside of a `sbb-tab-nav-bar`. */ declare class SbbTabLink implements AfterViewInit, OnDestroy, FocusableOption { private _tabNavBar; /** @docs-private */ elementRef: ElementRef; private _focusMonitor; /** Whether the tab link is disabled. */ disabled: boolean; /** Tab index for the tab link. */ tabIndex: number; /** Whether the link is active. */ get active(): boolean; set active(value: boolean); protected _isActive: boolean; /** Unique id for the tab. */ id: string; constructor(_tabNavBar: SbbTabNav, /** @docs-private */ elementRef: ElementRef, tabIndex: string, _focusMonitor: FocusMonitor); /** Focuses the tab link. */ focus(): void; ngAfterViewInit(): void; ngOnDestroy(): void; _handleFocus(): void; _handleKeydown(event: KeyboardEvent): void; _getAriaControls(): string | null; _getAriaSelected(): string | null; _getAriaCurrent(): string | null; _getRole(): string | null; _getTabIndex(): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_tabIndex: unknown; static ngAcceptInputType_active: unknown; } /** * Link inside of a `sbb-tab-nav-bar`. */ /** * Tab panel component associated with SbbTabNav. */ declare class SbbTabNavPanel { /** Unique id for the tab panel. */ id: string; /** Id of the active tab in the nav bar. */ _activeTabId?: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Decorates the `ng-template` tags and reads out the template from it. */ declare class SbbTabContent { template: TemplateRef; constructor(/** Content for the tab. */ template: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class SbbTabsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * These position states are used internally as animation states for the tab body. */ type SbbTabBodyPositionState = 'hidden' | 'show'; /** * The portal host directive for the contents of the tab. * @docs-private */ declare class SbbTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy { private _host; /** Subscription to events for when the tab body begins centering. */ private _centeringSub; /** Subscription to events for when the tab body finishes leaving from center position. */ private _leavingSub; constructor(); /** Set initial visibility or set up subscription for changing visibility. */ ngOnInit(): void; /** Clean up centering subscription. */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Wrapper for the contents of a tab. * @docs-private */ declare class SbbTabBody implements OnDestroy { private _elementRef; /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */ private _positionIndex; /** Subscription to the directionality change observable. */ private _dirChangeSubscription; /** Tab body position state. Used by the animation trigger for the current state. */ _position: SbbTabBodyPositionState; /** Emits when an animation on the tab is complete. */ readonly _translateTabComplete: Subject; /** Event emitted when the tab begins to animate towards the center as the active tab. */ readonly _onCentering: EventEmitter; /** Event emitted before the centering of the tab begins. */ readonly _beforeCentering: EventEmitter; /** Event emitted before the centering of the tab begins. */ readonly _afterLeavingCenter: EventEmitter; /** Event emitted when the tab completes its animation towards the center. */ readonly _onCentered: EventEmitter; /** The portal host inside of this container into which the tab body content will be loaded. */ _portalHost: CdkPortalOutlet; /** The tab body content to display. */ _content: TemplatePortal; /** Position that will be used when the tab is immediately becoming visible after creation. */ origin: number | null; /** Duration for the tab's animation. */ animationDuration: string; /** Duration of hide animation. */ animationDurationHide: string; /** Whether the tab's content should be kept in the DOM while it's off-screen. */ preserveContent: boolean; /** The shifted index position of the tab body, where zero represents the active center tab. */ set position(position: number); constructor(_elementRef: ElementRef); ngOnDestroy(): void; _onTranslateTabStarted(event: AnimationEvent): void; /** Whether the provided position state is considered center, regardless of origin. */ _isCenterPosition(position: SbbTabBodyPositionState | string): boolean; /** Computes the position state that will be used for the tab-body animation trigger. */ private _computePositionAnimationState; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Used in the `sbb-tab-group` view to display tab labels. * @docs-private */ declare class SbbTabLabelWrapper { elementRef: ElementRef; /** Whether the tab is disabled. */ disabled: boolean; constructor(elementRef: ElementRef); /** Sets focus on the wrapper element */ focus(): void; getOffsetLeft(): number; getOffsetWidth(): number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_disabled: unknown; } /** * The header of the tab group which displays a list of all the tabs in the tab group. Includes * an ink bar that follows the currently selected tab. When the tabs list's width exceeds the * width of the header container, then arrows will be displayed to allow the user to scroll * left and right across the header. * @docs-private */ declare class SbbTabHeader extends SbbPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy { _items: QueryList; _tabListContainer: ElementRef; _tabList: ElementRef; _tabListInner: ElementRef; _nextPaginator: ElementRef; _previousPaginator: ElementRef; /** Aria label of the header. */ ariaLabel: string; /** Sets the `aria-labelledby` of the header. */ ariaLabelledby: string; selectFocusedIndex: EventEmitter; indexFocused: EventEmitter; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, animationMode?: string); protected _itemSelected(event: KeyboardEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Animations used by the SBB tabs. * @docs-private */ declare const sbbTabsAnimations: { readonly translateTab: AnimationTriggerMetadata; }; export { SBB_TAB, SBB_TABS_CONFIG, SBB_TAB_GROUP, SbbTab, SbbTabBody, SbbTabBodyPortal, SbbTabChangeEvent, SbbTabContent, SbbTabGroup, SbbTabHeader, SbbTabLabel, SbbTabLabelWrapper, SbbTabLink, SbbTabNav, SbbTabNavPanel, SbbTabsModule, sbbTabsAnimations }; export type { SbbTabBodyPositionState, SbbTabsConfig, ScrollDirection };