UNPKG

devextreme-angular

Version:

Angular UI and visualization components based on DevExtreme widgets

947 lines (807 loc) 31.8 kB
import * as i0 from '@angular/core'; import { PLATFORM_ID, Component, Inject, ContentChildren, Input, Output, NgModule } from '@angular/core'; import DxTabPanel from 'devextreme/ui/tab_panel'; import * as i1 from 'devextreme-angular/core'; import { DxComponent, DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper, DxIntegrationModule, DxTemplateModule } from 'devextreme-angular/core'; import { DxiItemModule } from 'devextreme-angular/ui/nested'; import { DxiTabPanelItemModule } from 'devextreme-angular/ui/tab-panel/nested'; export * from 'devextreme-angular/ui/tab-panel/nested'; import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; /*! * devextreme-angular * Version: 25.1.6 * Build date: Mon Oct 13 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-angular */ /* tslint:disable:max-line-length */ /** * The TabPanel is a UI component consisting of the Tabs and MultiView UI components. It automatically synchronizes the selected tab with the currently displayed view, and vice versa. */ class DxTabPanelComponent extends DxComponent { _watcherHelper; _idh; set _itemsContentChildren(value) { this.setChildren('items', value); } instance = null; /** * Specifies the shortcut key that sets focus on the UI component. */ get accessKey() { return this._getOption('accessKey'); } set accessKey(value) { this._setOption('accessKey', value); } /** * Specifies whether the UI component changes its visual state as a result of user interaction. */ get activeStateEnabled() { return this._getOption('activeStateEnabled'); } set activeStateEnabled(value) { this._setOption('activeStateEnabled', value); } /** * Specifies whether or not to animate the displayed item change. */ get animationEnabled() { return this._getOption('animationEnabled'); } set animationEnabled(value) { this._setOption('animationEnabled', value); } /** * Binds the UI component to data. */ get dataSource() { return this._getOption('dataSource'); } set dataSource(value) { this._setOption('dataSource', value); } /** * Specifies whether to render the view's content when it is displayed. If false, the content is rendered immediately. */ get deferRendering() { return this._getOption('deferRendering'); } set deferRendering(value) { this._setOption('deferRendering', value); } /** * Specifies whether the UI component responds to user interaction. */ get disabled() { return this._getOption('disabled'); } set disabled(value) { this._setOption('disabled', value); } /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr() { return this._getOption('elementAttr'); } set elementAttr(value) { this._setOption('elementAttr', value); } /** * Specifies whether the UI component can be focused using keyboard navigation. */ get focusStateEnabled() { return this._getOption('focusStateEnabled'); } set focusStateEnabled(value) { this._setOption('focusStateEnabled', value); } /** * Specifies the UI component's height. */ get height() { return this._getOption('height'); } set height(value) { this._setOption('height', value); } /** * Specifies text for a hint that appears when a user pauses on the UI component. */ get hint() { return this._getOption('hint'); } set hint(value) { this._setOption('hint', value); } /** * Specifies whether the UI component changes its state when a user pauses on it. */ get hoverStateEnabled() { return this._getOption('hoverStateEnabled'); } set hoverStateEnabled(value) { this._setOption('hoverStateEnabled', value); } /** * Specifies icon position relative to the text inside the tab. */ get iconPosition() { return this._getOption('iconPosition'); } set iconPosition(value) { this._setOption('iconPosition', value); } /** * The time period in milliseconds before the onItemHold event is raised. */ get itemHoldTimeout() { return this._getOption('itemHoldTimeout'); } set itemHoldTimeout(value) { this._setOption('itemHoldTimeout', value); } /** * An array of items displayed by the UI component. */ get items() { return this._getOption('items'); } set items(value) { this._setOption('items', value); } /** * Specifies a custom template for items. */ get itemTemplate() { return this._getOption('itemTemplate'); } set itemTemplate(value) { this._setOption('itemTemplate', value); } /** * Specifies a custom template for item titles. */ get itemTitleTemplate() { return this._getOption('itemTitleTemplate'); } set itemTitleTemplate(value) { this._setOption('itemTitleTemplate', value); } /** * Specifies the key property used to access data items. Each key value must be unique. */ get keyExpr() { return this._getOption('keyExpr'); } set keyExpr(value) { this._setOption('keyExpr', value); } /** * A Boolean value specifying whether or not to scroll back to the first item after the last item is swiped. */ get loop() { return this._getOption('loop'); } set loop(value) { this._setOption('loop', value); } /** * Specifies the text or HTML markup displayed by the UI component if the item collection is empty. */ get noDataText() { return this._getOption('noDataText'); } set noDataText(value) { this._setOption('noDataText', value); } /** * Specifies whether to repaint only those elements whose data changed. */ get repaintChangesOnly() { return this._getOption('repaintChangesOnly'); } set repaintChangesOnly(value) { this._setOption('repaintChangesOnly', value); } /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled() { return this._getOption('rtlEnabled'); } set rtlEnabled(value) { this._setOption('rtlEnabled', value); } /** * A Boolean value specifying if tabs in the title are scrolled by content. */ get scrollByContent() { return this._getOption('scrollByContent'); } set scrollByContent(value) { this._setOption('scrollByContent', value); } /** * A Boolean indicating whether or not to add scrolling support for tabs in the title. */ get scrollingEnabled() { return this._getOption('scrollingEnabled'); } set scrollingEnabled(value) { this._setOption('scrollingEnabled', value); } /** * The index of the currently displayed item. */ get selectedIndex() { return this._getOption('selectedIndex'); } set selectedIndex(value) { this._setOption('selectedIndex', value); } /** * The selected item object. */ get selectedItem() { return this._getOption('selectedItem'); } set selectedItem(value) { this._setOption('selectedItem', value); } /** * Specifies whether navigation buttons should be available when tabs exceed the UI component's width. */ get showNavButtons() { return this._getOption('showNavButtons'); } set showNavButtons(value) { this._setOption('showNavButtons', value); } /** * Specifies the styling mode for the active tab. */ get stylingMode() { return this._getOption('stylingMode'); } set stylingMode(value) { this._setOption('stylingMode', value); } /** * A Boolean value specifying whether or not to allow users to change the selected index by swiping. */ get swipeEnabled() { return this._getOption('swipeEnabled'); } set swipeEnabled(value) { this._setOption('swipeEnabled', value); } /** * Specifies the number of the element when the Tab key is used for navigating. */ get tabIndex() { return this._getOption('tabIndex'); } set tabIndex(value) { this._setOption('tabIndex', value); } /** * Specifies tab position relative to the panel. */ get tabsPosition() { return this._getOption('tabsPosition'); } set tabsPosition(value) { this._setOption('tabsPosition', value); } /** * Specifies whether the UI component is visible. */ get visible() { return this._getOption('visible'); } set visible(value) { this._setOption('visible', value); } /** * Specifies the UI component's width. */ get width() { return this._getOption('width'); } set width(value) { this._setOption('width', value); } /** * A function that is executed when the UI component is rendered and each time the component is repainted. */ onContentReady; /** * A function that is executed before the UI component is disposed of. */ onDisposing; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized; /** * A function that is executed when a collection item is clicked or tapped. */ onItemClick; /** * A function that is executed when a collection item is right-clicked or pressed. */ onItemContextMenu; /** * A function that is executed when a collection item has been held for a specified period. */ onItemHold; /** * A function that is executed after a collection item is rendered. */ onItemRendered; /** * A function that is executed after a UI component property is changed. */ onOptionChanged; /** * A function that is called after selection changes. */ onSelectionChanged; /** * A function that is called before selection changes. */ onSelectionChanging; /** * A function that is executed when a tab is clicked or tapped. */ onTitleClick; /** * A function that is executed when a tab has been held for a specified period. */ onTitleHold; /** * A function that is executed after a tab is rendered. */ onTitleRendered; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ accessKeyChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ activeStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ animationEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dataSourceChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ deferRenderingChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ focusStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ heightChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hintChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hoverStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ iconPositionChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ itemHoldTimeoutChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ itemsChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ itemTemplateChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ itemTitleTemplateChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ keyExprChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ loopChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ noDataTextChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ repaintChangesOnlyChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ scrollByContentChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ scrollingEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectedIndexChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectedItemChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showNavButtonsChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ stylingModeChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ swipeEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tabIndexChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tabsPositionChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ visibleChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ widthChange; constructor(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) { super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId); this._watcherHelper = _watcherHelper; this._idh = _idh; this._createEventEmitters([ { subscribe: 'contentReady', emit: 'onContentReady' }, { subscribe: 'disposing', emit: 'onDisposing' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'itemClick', emit: 'onItemClick' }, { subscribe: 'itemContextMenu', emit: 'onItemContextMenu' }, { subscribe: 'itemHold', emit: 'onItemHold' }, { subscribe: 'itemRendered', emit: 'onItemRendered' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'selectionChanged', emit: 'onSelectionChanged' }, { subscribe: 'selectionChanging', emit: 'onSelectionChanging' }, { subscribe: 'titleClick', emit: 'onTitleClick' }, { subscribe: 'titleHold', emit: 'onTitleHold' }, { subscribe: 'titleRendered', emit: 'onTitleRendered' }, { emit: 'accessKeyChange' }, { emit: 'activeStateEnabledChange' }, { emit: 'animationEnabledChange' }, { emit: 'dataSourceChange' }, { emit: 'deferRenderingChange' }, { emit: 'disabledChange' }, { emit: 'elementAttrChange' }, { emit: 'focusStateEnabledChange' }, { emit: 'heightChange' }, { emit: 'hintChange' }, { emit: 'hoverStateEnabledChange' }, { emit: 'iconPositionChange' }, { emit: 'itemHoldTimeoutChange' }, { emit: 'itemsChange' }, { emit: 'itemTemplateChange' }, { emit: 'itemTitleTemplateChange' }, { emit: 'keyExprChange' }, { emit: 'loopChange' }, { emit: 'noDataTextChange' }, { emit: 'repaintChangesOnlyChange' }, { emit: 'rtlEnabledChange' }, { emit: 'scrollByContentChange' }, { emit: 'scrollingEnabledChange' }, { emit: 'selectedIndexChange' }, { emit: 'selectedItemChange' }, { emit: 'showNavButtonsChange' }, { emit: 'stylingModeChange' }, { emit: 'swipeEnabledChange' }, { emit: 'tabIndexChange' }, { emit: 'tabsPositionChange' }, { emit: 'visibleChange' }, { emit: 'widthChange' } ]); this._idh.setHost(this); optionHost.setHost(this); } _createInstance(element, options) { return new DxTabPanel(element, options); } ngOnDestroy() { this._destroyWidget(); } ngOnChanges(changes) { super.ngOnChanges(changes); this.setupChanges('dataSource', changes); this.setupChanges('items', changes); } setupChanges(prop, changes) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('dataSource'); this._idh.doCheck('items'); this._watcherHelper.checkWatchers(); super.ngDoCheck(); super.clearChangedOptions(); } _setOption(name, value) { let isSetup = this._idh.setupSingle(name, value); let isChanged = this._idh.getChanges(name, value) !== null; if (isSetup || isChanged) { super._setOption(name, value); } } /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxTabPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.DxTemplateHost }, { token: i1.WatcherHelper }, { token: i1.IterableDifferHelper }, { token: i1.NestedOptionHost }, { token: i0.TransferState }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DxTabPanelComponent, isStandalone: true, selector: "dx-tab-panel", inputs: { accessKey: "accessKey", activeStateEnabled: "activeStateEnabled", animationEnabled: "animationEnabled", dataSource: "dataSource", deferRendering: "deferRendering", disabled: "disabled", elementAttr: "elementAttr", focusStateEnabled: "focusStateEnabled", height: "height", hint: "hint", hoverStateEnabled: "hoverStateEnabled", iconPosition: "iconPosition", itemHoldTimeout: "itemHoldTimeout", items: "items", itemTemplate: "itemTemplate", itemTitleTemplate: "itemTitleTemplate", keyExpr: "keyExpr", loop: "loop", noDataText: "noDataText", repaintChangesOnly: "repaintChangesOnly", rtlEnabled: "rtlEnabled", scrollByContent: "scrollByContent", scrollingEnabled: "scrollingEnabled", selectedIndex: "selectedIndex", selectedItem: "selectedItem", showNavButtons: "showNavButtons", stylingMode: "stylingMode", swipeEnabled: "swipeEnabled", tabIndex: "tabIndex", tabsPosition: "tabsPosition", visible: "visible", width: "width" }, outputs: { onContentReady: "onContentReady", onDisposing: "onDisposing", onInitialized: "onInitialized", onItemClick: "onItemClick", onItemContextMenu: "onItemContextMenu", onItemHold: "onItemHold", onItemRendered: "onItemRendered", onOptionChanged: "onOptionChanged", onSelectionChanged: "onSelectionChanged", onSelectionChanging: "onSelectionChanging", onTitleClick: "onTitleClick", onTitleHold: "onTitleHold", onTitleRendered: "onTitleRendered", accessKeyChange: "accessKeyChange", activeStateEnabledChange: "activeStateEnabledChange", animationEnabledChange: "animationEnabledChange", dataSourceChange: "dataSourceChange", deferRenderingChange: "deferRenderingChange", disabledChange: "disabledChange", elementAttrChange: "elementAttrChange", focusStateEnabledChange: "focusStateEnabledChange", heightChange: "heightChange", hintChange: "hintChange", hoverStateEnabledChange: "hoverStateEnabledChange", iconPositionChange: "iconPositionChange", itemHoldTimeoutChange: "itemHoldTimeoutChange", itemsChange: "itemsChange", itemTemplateChange: "itemTemplateChange", itemTitleTemplateChange: "itemTitleTemplateChange", keyExprChange: "keyExprChange", loopChange: "loopChange", noDataTextChange: "noDataTextChange", repaintChangesOnlyChange: "repaintChangesOnlyChange", rtlEnabledChange: "rtlEnabledChange", scrollByContentChange: "scrollByContentChange", scrollingEnabledChange: "scrollingEnabledChange", selectedIndexChange: "selectedIndexChange", selectedItemChange: "selectedItemChange", showNavButtonsChange: "showNavButtonsChange", stylingModeChange: "stylingModeChange", swipeEnabledChange: "swipeEnabledChange", tabIndexChange: "tabIndexChange", tabsPositionChange: "tabsPositionChange", visibleChange: "visibleChange", widthChange: "widthChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [ DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper ], queries: [{ propertyName: "_itemsContentChildren", predicate: PROPERTY_TOKEN_items }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: DxIntegrationModule }] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxTabPanelComponent, decorators: [{ type: Component, args: [{ selector: 'dx-tab-panel', standalone: true, template: '', host: { ngSkipHydration: 'true' }, imports: [DxIntegrationModule], providers: [ DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper ] }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.DxTemplateHost }, { type: i1.WatcherHelper }, { type: i1.IterableDifferHelper }, { type: i1.NestedOptionHost }, { type: i0.TransferState }, { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID] }] }], propDecorators: { _itemsContentChildren: [{ type: ContentChildren, args: [PROPERTY_TOKEN_items] }], accessKey: [{ type: Input }], activeStateEnabled: [{ type: Input }], animationEnabled: [{ type: Input }], dataSource: [{ type: Input }], deferRendering: [{ type: Input }], disabled: [{ type: Input }], elementAttr: [{ type: Input }], focusStateEnabled: [{ type: Input }], height: [{ type: Input }], hint: [{ type: Input }], hoverStateEnabled: [{ type: Input }], iconPosition: [{ type: Input }], itemHoldTimeout: [{ type: Input }], items: [{ type: Input }], itemTemplate: [{ type: Input }], itemTitleTemplate: [{ type: Input }], keyExpr: [{ type: Input }], loop: [{ type: Input }], noDataText: [{ type: Input }], repaintChangesOnly: [{ type: Input }], rtlEnabled: [{ type: Input }], scrollByContent: [{ type: Input }], scrollingEnabled: [{ type: Input }], selectedIndex: [{ type: Input }], selectedItem: [{ type: Input }], showNavButtons: [{ type: Input }], stylingMode: [{ type: Input }], swipeEnabled: [{ type: Input }], tabIndex: [{ type: Input }], tabsPosition: [{ type: Input }], visible: [{ type: Input }], width: [{ type: Input }], onContentReady: [{ type: Output }], onDisposing: [{ type: Output }], onInitialized: [{ type: Output }], onItemClick: [{ type: Output }], onItemContextMenu: [{ type: Output }], onItemHold: [{ type: Output }], onItemRendered: [{ type: Output }], onOptionChanged: [{ type: Output }], onSelectionChanged: [{ type: Output }], onSelectionChanging: [{ type: Output }], onTitleClick: [{ type: Output }], onTitleHold: [{ type: Output }], onTitleRendered: [{ type: Output }], accessKeyChange: [{ type: Output }], activeStateEnabledChange: [{ type: Output }], animationEnabledChange: [{ type: Output }], dataSourceChange: [{ type: Output }], deferRenderingChange: [{ type: Output }], disabledChange: [{ type: Output }], elementAttrChange: [{ type: Output }], focusStateEnabledChange: [{ type: Output }], heightChange: [{ type: Output }], hintChange: [{ type: Output }], hoverStateEnabledChange: [{ type: Output }], iconPositionChange: [{ type: Output }], itemHoldTimeoutChange: [{ type: Output }], itemsChange: [{ type: Output }], itemTemplateChange: [{ type: Output }], itemTitleTemplateChange: [{ type: Output }], keyExprChange: [{ type: Output }], loopChange: [{ type: Output }], noDataTextChange: [{ type: Output }], repaintChangesOnlyChange: [{ type: Output }], rtlEnabledChange: [{ type: Output }], scrollByContentChange: [{ type: Output }], scrollingEnabledChange: [{ type: Output }], selectedIndexChange: [{ type: Output }], selectedItemChange: [{ type: Output }], showNavButtonsChange: [{ type: Output }], stylingModeChange: [{ type: Output }], swipeEnabledChange: [{ type: Output }], tabIndexChange: [{ type: Output }], tabsPositionChange: [{ type: Output }], visibleChange: [{ type: Output }], widthChange: [{ type: Output }] } }); class DxTabPanelModule { /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxTabPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DxTabPanelModule, imports: [DxTabPanelComponent, DxiItemModule, DxiTabPanelItemModule, DxIntegrationModule, DxTemplateModule], exports: [DxTabPanelComponent, DxiItemModule, DxiTabPanelItemModule, DxTemplateModule] }); /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxTabPanelModule, imports: [DxTabPanelComponent, DxiItemModule, DxiTabPanelItemModule, DxIntegrationModule, DxTemplateModule, DxiItemModule, DxiTabPanelItemModule, DxTemplateModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxTabPanelModule, decorators: [{ type: NgModule, args: [{ imports: [ DxTabPanelComponent, DxiItemModule, DxiTabPanelItemModule, DxIntegrationModule, DxTemplateModule ], exports: [ DxTabPanelComponent, DxiItemModule, DxiTabPanelItemModule, DxTemplateModule ] }] }] }); /** * Generated bundle index. Do not edit. */ export { DxTabPanelComponent, DxTabPanelModule }; //# sourceMappingURL=devextreme-angular-ui-tab-panel.mjs.map