@progress/kendo-angular-layout

/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { ElementRef, EventEmitter, QueryList, Renderer2, OnDestroy, AfterViewInit, NgZone, SimpleChanges } from '@angular/core'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { TabStripTabComponent } from './models/tabstrip-tab.component'; import { SelectEvent, TabCloseEvent } from './events'; import { TabStripService } from './tabstrip.service'; import { ScrollService } from './tabstrip-scroll.service'; import { TabPosition } from './models/tab-position'; import { TabAlignment } from './models/tab-alignment'; import { Subscription } from 'rxjs'; import { TabStripScrollableSettings, TabStripScrollButtonsPosition } from './models/scrollable-settings'; import { TabScrollEvent } from './events/tabscroll-event'; import { TabStripScrollableButtonComponent } from './scrollable-button.component'; import { ScrollButtonType } from './models/scroll-button-type'; import { SVGIcon } from '@progress/kendo-svg-icons'; import { TabStripSize } from './models/size'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}). * * @example * ```html * <kendo-tabstrip> * <kendo-tabstrip-tab [title]="'First Tab'"> * <ng-template kendoTabContent> * <p>Content of the first tab.</p> * </ng-template> * </kendo-tabstrip-tab> * <kendo-tabstrip-tab [title]="'Second Tab'"> * <ng-template kendoTabContent> * <p>Content of the second tab.</p> * </ng-template> * </kendo-tabstrip-tab> * </kendo-tabstrip> * ``` * @remarks * Supported children components are: {@link TabStripCustomMessagesComponent}, {@link TabStripTabComponent}. */ export declare class TabStripComponent implements AfterViewInit, OnDestroy { localization: LocalizationService; private renderer; wrapper: ElementRef; private tabstripService; private scrollService; private ngZone; /** * Sets the height of the TabStrip. * Accepts a CSS size value, such as `100px`, `50%`, or `auto`. */ set height(value: string | null | undefined); get height(): string | null | undefined; /** * Sets whether the TabStrip should animate when switching tabs. * * @default true */ animate: boolean; /** * Sets the alignment of the tabs. * * @default 'start' */ tabAlignment: TabAlignment; /** * Sets the position of the tabs. * * @default 'top' */ tabPosition: TabPosition; /** * When set to `true`, the tabs are persisted in the DOM and their content is not destroyed when they are not selected ([see example](slug:rendering_tabstrip)). * * @default false */ keepTabContent: boolean; /** * When set to `true`, renders a close button inside each tab. * * @default false */ closable: boolean; /** * Enables scrolling of the tab list. * When set to `true` and the total size of all tabs exceeds the size of the TabStrip container, scroll buttons appear on each end of the tab list. * * @default false */ set scrollable(value: boolean | TabStripScrollableSettings); get scrollable(): boolean | TabStripScrollableSettings; /** * Sets the size of the TabStrip. * [See example](slug:api_layout_tabstripcomponent#toc-size). * @default 'medium' */ set size(value: TabStripSize); get size(): TabStripSize; /** * Defines the name of an existing font icon in the Kendo UI theme for the close icon. * @default 'x' */ closeIcon: string; /** * Defines a custom CSS class, or multiple classes separated by spaces, applied to the close button. */ closeIconClass: string; /** * Defines an SVGIcon to render for the close icon. * The input accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. */ set closeSVGIcon(icon: SVGIcon); get closeSVGIcon(): SVGIcon; /** * If set to `false`, the content area is hidden, but the tab headers are still visible. * * @default true */ showContentArea: boolean; /** * Fires each time a tab is selected. * The event data contains the index of the selected tab and its title. */ tabSelect: EventEmitter<SelectEvent>; /** * Fires each time a tab is closed. * The event data contains the index of the closed tab and its instance. */ tabClose: EventEmitter<TabCloseEvent>; /** * Fires when the tab list is scrolled. * The event is preventable. */ tabScroll: EventEmitter<TabScrollEvent>; hostClasses: boolean; get tabsAtTop(): boolean; get tabsAtRight(): boolean; get tabsAtBottom(): boolean; get tabsAtLeft(): boolean; get dir(): string; get tabStripScrollable(): boolean; get tabStripScrollableOverlay(): boolean; /** * A query list of all declared tabs. */ tabs: QueryList<TabStripTabComponent>; /** * @hidden */ tablist: ElementRef; /** * @hidden */ tabHeaderContainers: QueryList<ElementRef<HTMLLIElement>>; /** * @hidden */ prevScrollButton: TabStripScrollableButtonComponent; /** * @hidden */ nextScrollButton: TabStripScrollableButtonComponent; /** * @hidden */ localizationChangeSubscription: Subscription; /** * @hidden */ showLicenseWatermark: boolean; private _height; private _scrollableSettings; private subscriptions; private subscriptionsArePresent; private _closeSVGIcon; private tabStripId; private tabsChangesSub; private activeStateChangeSub; private _size; constructor(localization: LocalizationService, renderer: Renderer2, wrapper: ElementRef, tabstripService: TabStripService, scrollService: ScrollService, ngZone: NgZone); ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** * @hidden */ get isScrollable(): boolean; /** * @hidden */ get hasScrollButtons(): { visible: boolean; position: TabStripScrollButtonsPosition; }; /** * @hidden */ get mouseScrollEnabled(): boolean; /** * @hidden */ get itemsWrapperClass(): string; /** * Allows you to programmatically select a tab by its index. * If the tab is disabled, it will not be selected. * @param {number} index The index of the tab that will be selected. */ selectTab(index: number): void; /** * @hidden */ getTabId(idx: number): string; /** * @hidden */ getTabPanelId(idx: number): string; /** * @hidden */ onTabClick(originalEvent: MouseEvent, tabIndex: number): void; /** * @hidden */ onResize(): void; /** * @hidden */ scrollToSelectedTab(): void; /** * @hidden */ onScrollButtonClick(buttonType: ScrollButtonType): void; private initDomEvents; private toggleScrollButtons; private attachTablistScrollHandler; private setScrollableOverlayClasses; static ɵfac: i0.ɵɵFactoryDeclaration<TabStripComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<TabStripComponent, "kendo-tabstrip", ["kendoTabStrip"], { "height": { "alias": "height"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; }; "tabPosition": { "alias": "tabPosition"; "required": false; }; "keepTabContent": { "alias": "keepTabContent"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "closeIcon": { "alias": "closeIcon"; "required": false; }; "closeIconClass": { "alias": "closeIconClass"; "required": false; }; "closeSVGIcon": { "alias": "closeSVGIcon"; "required": false; }; "showContentArea": { "alias": "showContentArea"; "required": false; }; }, { "tabSelect": "tabSelect"; "tabClose": "tabClose"; "tabScroll": "tabScroll"; }, ["tabs"], never, true, never>; }