igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
360 lines (346 loc) • 14.1 kB
TypeScript
import * as i6 from 'igniteui-angular/input-group';
import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
import * as i0 from '@angular/core';
import { QueryList, TemplateRef, EventEmitter, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
import { IgxSlideComponentBase, CarouselAnimationDirection, IgxCarouselComponentBase } from 'igniteui-angular/carousel';
import { PlatformUtil, IBaseEventArgs, ɵIgxDirectionality as _IgxDirectionality } from 'igniteui-angular/core';
/** @hidden */
declare abstract class IgxTabsBase {
items: QueryList<IgxTabItemBase>;
selectedIndex: number;
abstract selectTab(tab: IgxTabItemBase, selected: boolean): any;
}
/** @hidden */
declare abstract class IgxTabItemBase {
disabled: boolean;
selected: boolean;
headerTemplate: TemplateRef<any>;
panelTemplate: TemplateRef<any>;
headerComponent: IgxTabHeaderBase;
panelComponent: IgxTabContentBase;
}
/** @hidden */
declare abstract class IgxTabHeaderBase {
nativeElement: HTMLElement;
}
/** @hidden */
declare abstract class IgxTabContentBase {
nativeElement: HTMLElement;
}
declare abstract class IgxTabItemDirective implements IgxTabItemBase, IgxSlideComponentBase {
/** @hidden */
private tabs;
/** @hidden */
headerComponent: IgxTabHeaderBase;
/** @hidden */
panelComponent: IgxTabContentBase;
/** @hidden */
headerTemplate: TemplateRef<any>;
/** @hidden */
panelTemplate: TemplateRef<any>;
/**
* Output to enable support for two-way binding on [(selected)]
*/
selectedChange: EventEmitter<boolean>;
/**
* Disables the item.
*/
disabled: boolean;
/** @hidden */
direction: CarouselAnimationDirection;
/** @hidden */
previous: boolean;
private _selected;
/**
* Gets/Sets whether an item is selected.
*/
get selected(): boolean;
set selected(value: boolean);
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabItemDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTabItemDirective, never, never, { "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; }, ["headerComponent", "panelComponent"], never, true, never>;
static ngAcceptInputType_disabled: unknown;
static ngAcceptInputType_selected: unknown;
}
declare abstract class IgxTabContentDirective implements IgxTabContentBase {
/** @hidden */
tab: IgxTabItemDirective;
/** @hidden */
private elementRef;
/** @hidden */
role: string;
/** @hidden */
get tabIndex(): 0 | -1;
/** @hidden */
get zIndex(): -1 | "auto";
/** @hidden */
get nativeElement(): any;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabContentDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTabContentDirective, never, never, {}, {}, never, never, true, never>;
}
declare class IgxTabContentComponent extends IgxTabContentDirective {
/** @hidden */
cssClass: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabContentComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxTabContentComponent, "igx-tab-content", never, {}, {}, never, ["*"], true, never>;
}
declare abstract class IgxTabHeaderDirective implements IgxTabHeaderBase {
/** @hidden */
protected tabs: IgxTabsBase;
/** @hidden */
tab: IgxTabItemDirective;
/** @hidden */
private elementRef;
/** @hidden */
protected platform: PlatformUtil;
/** @hidden */
role: string;
/** @hidden */
get tabIndex(): 0 | -1;
/** @hidden */
get ariaSelected(): boolean;
/** @hidden */
get ariaDisabled(): boolean;
/** @hidden */
onClick(): void;
/** @hidden */
get nativeElement(): any;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabHeaderDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTabHeaderDirective, never, never, {}, {}, never, never, true, never>;
}
interface ITabsBaseEventArgs extends IBaseEventArgs {
readonly owner: IgxTabsDirective;
}
interface ITabsSelectedIndexChangingEventArgs extends ITabsBaseEventArgs {
cancel: boolean;
readonly oldIndex: number;
newIndex: number;
}
interface ITabsSelectedItemChangeEventArgs extends ITabsBaseEventArgs {
readonly oldItem: IgxTabItemDirective;
readonly newItem: IgxTabItemDirective;
}
declare abstract class IgxTabsDirective extends IgxCarouselComponentBase implements IgxTabsBase, AfterViewInit, OnDestroy {
/** @hidden */
dir: _IgxDirectionality;
/**
* Gets/Sets the index of the selected item.
* Default value is 0 if contents are defined otherwise defaults to -1.
*/
get selectedIndex(): number;
set selectedIndex(value: number);
/**
* Enables/disables the transition animation of the contents.
*/
disableAnimation: boolean;
/**
* Output to enable support for two-way binding on [(selectedIndex)]
*/
selectedIndexChange: EventEmitter<number>;
/**
* Emitted when the selected index is about to change.
*/
selectedIndexChanging: EventEmitter<ITabsSelectedIndexChangingEventArgs>;
/**
* Emitted when the selected item is changed.
*/
selectedItemChange: EventEmitter<ITabsSelectedItemChangeEventArgs>;
/**
* Returns the items.
*/
items: QueryList<IgxTabItemDirective>;
/**
* Gets the selected item.
*/
get selectedItem(): IgxTabItemDirective;
/** @hidden */
panels: QueryList<IgxTabContentBase>;
/** @hidden */
protected currentItem: IgxTabItemDirective;
/** @hidden */
protected previousItem: IgxTabItemDirective;
/** @hidden */
protected componentName: string;
private _selectedIndex;
private _itemChanges$;
/** @hidden */
ngAfterViewInit(): void;
/** @hidden */
ngOnDestroy(): void;
/** @hidden */
selectTab(tab: IgxTabItemDirective, selected: boolean): void;
/** @hidden */
protected getPreviousElement(): HTMLElement;
/** @hidden */
protected getCurrentElement(): HTMLElement;
/** @hidden */
protected scrollTabHeaderIntoView(): void;
/** @hidden */
protected onItemChanges(): void;
private setAttributes;
private setHeaderAttribute;
private setPanelAttribute;
private get hasPanels();
private updateSelectedTabs;
private triggerPanelAnimations;
/** @hidden */
protected abstract getNextTabId(): any;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabsDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTabsDirective, never, never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disableAnimation": { "alias": "disableAnimation"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "selectedIndexChanging": "selectedIndexChanging"; "selectedItemChange": "selectedItemChange"; }, ["items", "panels"], never, true, never>;
static ngAcceptInputType_disableAnimation: unknown;
}
declare const IgxTabsAlignment: {
readonly start: "start";
readonly end: "end";
readonly center: "center";
readonly justify: "justify";
};
type IgxTabsAlignment = (typeof IgxTabsAlignment)[keyof typeof IgxTabsAlignment];
/**
* Tabs component is used to organize or switch between similar data sets.
*
* @igxModule IgxTabsModule
*
* @igxTheme igx-tabs-theme
*
* @igxKeywords tabs
*
* @igxGroup Layouts
*
* @remarks
* The Ignite UI for Angular Tabs component places tabs at the top and allows for scrolling when there are multiple tab items on the screen.
*
* @example
* ```html
* <igx-tabs>
* <igx-tab-item>
* <igx-tab-header>
* <igx-icon igxTabHeaderIcon>folder</igx-icon>
* <span igxTabHeaderLabel>Tab 1</span>
* </igx-tab-header>
* <igx-tab-content>
* Content 1
* </igx-tab-content>
* </igx-tab-item>
* ...
* </igx-tabs>
* ```
*/
declare class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit, OnDestroy {
private ngZone;
private platform;
/**
* Gets/Sets the tab alignment. Defaults to `start`.
*/
get tabAlignment(): string | IgxTabsAlignment;
set tabAlignment(value: string | IgxTabsAlignment);
/**
* Determines the tab activation.
* When set to auto, the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys and the corresponding panel is displayed.
* When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.
* Defaults is auto.
*/
activation: 'auto' | 'manual';
/** @hidden */
headerContainer: ElementRef<HTMLElement>;
/** @hidden */
viewPort: ElementRef<HTMLElement>;
/** @hidden */
itemsWrapper: ElementRef<HTMLElement>;
/** @hidden */
itemsContainer: ElementRef<HTMLElement>;
/** @hidden */
selectedIndicator: ElementRef<HTMLElement>;
/** @hidden */
scrollPrevButton: ElementRef<HTMLButtonElement>;
/** @hidden */
scrollNextButton: ElementRef<HTMLButtonElement>;
/** @hidden */
defaultClass: boolean;
/** @hidden */
offset: number;
/** @hidden */
protected componentName: string;
private _tabAlignment;
private _resizeObserver;
/** @hidden @internal */
ngAfterViewInit(): void;
/** @hidden @internal */
ngOnDestroy(): void;
/** @hidden */
scrollPrev(): void;
/** @hidden */
scrollNext(): void;
/** @hidden */
realignSelectedIndicator(): void;
/** @hidden */
resolveHeaderScrollClasses(): {
'igx-tabs__header-scroll--start': boolean;
'igx-tabs__header-scroll--end': boolean;
'igx-tabs__header-scroll--center': boolean;
'igx-tabs__header-scroll--justify': boolean;
};
/** @hidden */
protected scrollTabHeaderIntoView(): void;
/** @hidden */
protected getNextTabId(): number;
/** @hidden */
protected onItemChanges(): void;
private alignSelectedIndicator;
private hideSelectedIndicator;
private scroll;
private scrollElement;
private updateScrollButtons;
private setScrollButtonStyle;
private resolveLeftScrollButtonStyle;
private resolveRightScrollButtonStyle;
private getTabItemsContainerWidth;
private getOffset;
private getElementOffset;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxTabsComponent, "igx-tabs", never, { "tabAlignment": { "alias": "tabAlignment"; "required": false; }; "activation": { "alias": "activation"; "required": false; }; }, {}, never, never, true, never>;
}
declare class IgxTabHeaderComponent extends IgxTabHeaderDirective implements AfterViewInit, OnDestroy {
protected tabs: IgxTabsComponent;
private ngZone;
private dir;
/** @hidden @internal */
get provideCssClassSelected(): boolean;
/** @hidden @internal */
get provideCssClassDisabled(): boolean;
/** @hidden @internal */
cssClass: boolean;
private _resizeObserver;
/** @hidden @internal */
keyDown(event: KeyboardEvent): void;
/** @hidden @internal */
ngAfterViewInit(): void;
/** @hidden @internal */
ngOnDestroy(): void;
private getNewSelectionIndex;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabHeaderComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxTabHeaderComponent, "igx-tab-header", never, {}, {}, never, ["igx-prefix,[igxPrefix]", "*", "igx-suffix,[igxSuffix]"], true, never>;
}
declare class IgxTabItemComponent extends IgxTabItemDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxTabItemComponent, "igx-tab-item", never, {}, {}, never, ["igx-tab-header", "igx-tab-content"], true, never>;
}
declare class IgxTabHeaderLabelDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabHeaderLabelDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTabHeaderLabelDirective, "igx-tab-header-label,[igxTabHeaderLabel]", never, {}, {}, never, never, true, never>;
}
declare class IgxTabHeaderIconDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabHeaderIconDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTabHeaderIconDirective, "igx-tab-header-icon,[igxTabHeaderIcon]", never, {}, {}, never, never, true, never>;
}
declare const IGX_TABS_DIRECTIVES: readonly [typeof IgxTabsComponent, typeof IgxTabItemComponent, typeof IgxTabHeaderComponent, typeof IgxTabContentComponent, typeof IgxTabHeaderLabelDirective, typeof IgxTabHeaderIconDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
declare class IgxTabsModule {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTabsModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<IgxTabsModule, never, [typeof IgxTabsComponent, typeof IgxTabItemComponent, typeof IgxTabHeaderComponent, typeof IgxTabContentComponent, typeof IgxTabHeaderLabelDirective, typeof IgxTabHeaderIconDirective, typeof i6.IgxPrefixDirective, typeof i6.IgxSuffixDirective], [typeof IgxTabsComponent, typeof IgxTabItemComponent, typeof IgxTabHeaderComponent, typeof IgxTabContentComponent, typeof IgxTabHeaderLabelDirective, typeof IgxTabHeaderIconDirective, typeof i6.IgxPrefixDirective, typeof i6.IgxSuffixDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration<IgxTabsModule>;
}
export { IGX_TABS_DIRECTIVES, IgxTabContentBase, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderBase, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemBase, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsBase, IgxTabsComponent, IgxTabsDirective, IgxTabsModule };
export type { ITabsBaseEventArgs, ITabsSelectedIndexChangingEventArgs, ITabsSelectedItemChangeEventArgs };