/** * Copyright (c) Cisco Systems, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ import "../icon/Icon"; import "../menu-overlay/MenuOverlay"; import { MenuOverlay } from "../menu-overlay/MenuOverlay"; import "../tooltip/Tooltip"; import { LitElement, PropertyValues } from "lit"; import Sortable from "sortablejs"; import { Tab, TabClickEvent, TabCloseClickEvent } from "./Tab"; export declare const MORE_MENU_TAB_COPY_ID_PREFIX = "more-menu-copy-"; export declare namespace Tabs { export type TabsType = "line" | "pill" | "rounded"; export type TabVariant = "ghost" | "primary"; export type TabSize = 28 | 32; const ELEMENT_base: typeof LitElement & import("../../mixins/SlottedMixin").AnyConstructor & import("../../mixins/RovingTabIndexMixin").AnyConstructor & import("../../mixins/ResizeMixin").AnyConstructor; export class ELEMENT extends ELEMENT_base { justified: boolean; hugTabs: boolean; overflowLabel: string; draggable: boolean; direction: "horizontal" | "vertical"; moreItemsScrollLimit: number; private _selectedIndex; get selectedIndex(): number; set selectedIndex(value: number); animation: number; ghostClass: string; chosenClass: string; forceFallback: boolean; fallbackClass: string; tabsId: string; persistSelection: boolean; compUniqueId: string; type: Tabs.TabsType; newMomentum: boolean; variant: TabVariant; scrollArrow: boolean; leftArrowAriaLabel: string; rightArrowAriaLabel: string; size: TabSize; private isMoreTabMenuVisible; private isMoreTabMenuMeasured; private isMoreTabMenuOpen; private isMoreTabMenuSelected; private isMoreTabMenuScrollable; private moreTabMenuOffsetWidth; private moreTabMenuMaxHeight; private tabsViewportDataList; private tabsFilteredAsVisibleList; private tabsFilteredAsHiddenList; private noTabsVisible; private defaultTabsOrderArray; private tabsOrderPrefsArray; private isMoreTabTruncated; private showLeftArrow; private showRightArrow; tabSlotElement: HTMLSlotElement; panelSlotElement?: HTMLSlotElement; tabsListElement?: HTMLDivElement; tabsSettingsElement?: HTMLElement; moreTabMenuElement?: Tab.ELEMENT; menuOverlayElement?: MenuOverlay.ELEMENT; tabsMoreListElement?: HTMLDivElement; tabsCopyHiddenListElements?: NodeListOf; visibleTabsContainerElement?: HTMLElement; hiddenTabsContainerElement?: HTMLElement; private get isRtl(); private generateOptions; private tabs; private panels; private tabsCopy; private tabsHash; private tabsCopyHash; private tabsIdxHash; private tabPanelHash; private tabsVisibleIdxHash; private tabsHiddenIdxHash; private tabHiddenIdPositiveTabIndex?; private visibleTabsSortableInstance; private hiddenTabsSortableInstance; private get currentTabsLayout(); private getCopyTabId; private getAriaControlId; private getTabIndex; private getNormalizedTabId; static get styles(): import("lit").CSSResult[]; private ensureTabsUpdateComplete; private measureTabsOffsetWidth; private updateIsMoreTabTruncated; private measureHiddenTabsCopiesOffsetHeight; private manageOverflow; updateArrowsVisibility: () => void; private updateIsMoreTabMenuSelected; /** * Updates ariaControlsElements on shadow DOM tab copies to establish proper * aria-controls relationships across shadow DOM boundaries. * * This uses the ariaControlsElements API which allows referencing elements * from parent DOM (light DOM panels) within shadow DOM elements, avoiding * the accessibility violation that occurs when using aria-controls attribute * with ID references across shadow DOM boundaries. * * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaControlsElements */ private updateAriaControlsElements; private getHiddenTabFocusTarget; private updateHiddenIdPositiveTabIndex; private sortTabsAndPanes; private linkPanelsAndTabs; get slotItem(): HTMLSlotElement; protected filterSlotted(): HTMLElement[]; protected handleResize(contentRect: DOMRect): void; private getDragDirection; handleOnDragEnd: (event: Sortable.SortableEvent) => Promise; private makeTabCopyFocus; handleTabClick(event: CustomEvent): void; handleNewSelectedTab(id: string, setFocus?: boolean): void; handleTabCrossClick(event: CustomEvent): void; handleTabCloseClick(event: CustomEvent): void; handleTabCloseEvent(id: string): void; handleUpdatedSeletedTabAfterCross(crossTabIndex: number): void; private setSelectedAttribute; private isTabInMoreMenu; updateSelectedTab(newSelectedIndex: number, setFocus?: boolean): void; private dispatchSelectedChangedEvent; private changeSelectedTabIdx; storeSelectedTabIndex(index: number): void; private getCurrentIndex; private moveFocusToAdjacentTab; moveFocusToTab(tabElement: Element | undefined): void; handleOverlayClose(): void; dispatchKeydownEvent(event: KeyboardEvent, tabId: string): void; handleTabKeydown(event: any): false | undefined; private setupTabsEvents; private teardownTabsEvents; private clearTabOrderPrefs; private setupPanelsAndTabs; private setupMoreTab; private initializeSortable; private initializeTabs; connectedCallback(): void; private selectTabFromStorage; disconnectedCallback(): void; protected firstUpdated(changedProperties: PropertyValues): void; private onDirectionChanged; protected willUpdate(changedProperties: PropertyValues): void; protected updated(changedProperties: PropertyValues): void; private scrollTabs; private get moreMenuButtonTemplate(); private get moreMenuListTemplate(); private get moreMenuTemplate(); private tabsButtonArrow; private get renderTabSlot(); private get renderTabsWithMoreMenu(); render(): import("lit-html").TemplateResult<1>; } export {}; } declare global { interface HTMLElementTagNameMap { "md-tabs": Tabs.ELEMENT; } interface HTMLElementEventMap { /** * Fired when the selected tab changes. * @event selected-changed * @type {CustomEvent<{ value: number; tabsOrder: string[] }>} */ "selected-changed": CustomEvent<{ value: number; tabsOrder: string[]; }>; /** * Fired when a keydown event occurs on a tab. * @event tab-keydown * @type {CustomEvent<{ id: string; key: string; ctrlKey: boolean; shiftKey: boolean; altKey: boolean; srcEvent: KeyboardEvent }>} */ "tab-keydown": CustomEvent<{ id: string; key: string; ctrlKey: boolean; shiftKey: boolean; altKey: boolean; srcEvent: KeyboardEvent; }>; /** * Fired to clear tab order preferences. * @event clear-tab-order-prefs * @type {CustomEvent<{ compUniqueId: string }>} */ "clear-tab-order-prefs": CustomEvent<{ compUniqueId: string; }>; } }