@esri/calcite-components/dist/types/components/tab-nav/tab-nav.d.ts

Web Components for Esri's Calcite Design System.

import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { FocusElementInGroupDestination } from "../../utils/dom";
import { Scale } from "../interfaces";
import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces";
import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
/**
 * @slot - A slot for adding `calcite-tab-title`s.
 */
export declare class TabNav {
  el: HTMLCalciteTabNavElement;
  /**
   * Specifies the name when saving selected `calcite-tab` data to `localStorage`.
   */
  storageId: string;
  /**
   * Specifies text to update multiple components to keep in sync if one changes.
   */
  syncId: string;
  /**
   * Specifies the component's selected tab-title.
   *
   * @readonly
   */
  selectedTitle: HTMLCalciteTabTitleElement;
  /**
   * @internal
   */
  scale: Scale;
  /**
   * @internal
   */
  layout: TabLayout;
  /**
   * @internal
   */
  position: TabPosition;
  /**
   * @internal
   */
  bordered: boolean;
  /**
   * @internal
   */
  indicatorOffset: number;
  /**
   * @internal
   */
  indicatorWidth: number;
  selectedTabIdChanged(): Promise<void>;
  selectedTitleChanged(): void;
  connectedCallback(): void;
  disconnectedCallback(): void;
  componentWillLoad(): void;
  componentWillRender(): void;
  componentDidRender(): void;
  render(): VNode;
  focusPreviousTabHandler(event: CustomEvent): void;
  focusNextTabHandler(event: CustomEvent): void;
  focusFirstTabHandler(event: CustomEvent): void;
  focusLastTabHandler(event: CustomEvent): void;
  internalActivateTabHandler(event: CustomEvent<TabChangeEventDetail>): void;
  activateTabHandler(event: CustomEvent<void>): void;
  internalCloseTabHandler(event: CustomEvent<TabCloseEventDetail>): void;
  /**
   * Check for active tabs on register and update selected
   *
   * @param event
   */
  updateTabTitles(event: CustomEvent<TabID>): void;
  globalInternalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
  iconStartChangeHandler(): void;
  /**
   * Emits when the selected `calcite-tab` changes.
   */
  calciteTabChange: EventEmitter<void>;
  /**
   * @internal
   */
  calciteInternalTabChange: EventEmitter<TabChangeEventDetail>;
  selectedTabId: TabID;
  parentTabsEl: HTMLCalciteTabsElement;
  tabNavEl: HTMLDivElement;
  activeIndicatorEl: HTMLElement;
  activeIndicatorContainerEl: HTMLDivElement;
  animationActiveDuration: number;
  resizeObserver: ResizeObserver;
  handleTabFocus: (event: CustomEvent, el: HTMLCalciteTabTitleElement, destination: FocusElementInGroupDestination) => void;
  handleContainerScroll: () => void;
  updateOffsetPosition(): void;
  updateActiveWidth(): void;
  getIndexOfTabTitle(el: HTMLCalciteTabTitleElement, tabTitles?: HTMLCalciteTabTitleElement[]): number;
  getTabTitleById(id: TabID): Promise<HTMLCalciteTabTitleElement | null>;
  get tabTitles(): HTMLCalciteTabTitleElement[];
  get enabledTabTitles(): HTMLCalciteTabTitleElement[];
  private handleTabTitleClose;
}