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

Web Components for Esri's Calcite Design System.

import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { InteractiveComponent } from "../../utils/interactive";
import { FlipContext, Scale } from "../interfaces";
import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces";
import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
import { LocalizedComponent } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { TabTitleMessages } from "./assets/tab-title/t9n";
/**
 * Tab-titles are optionally individually closable.
 */
/**
 * @slot - A slot for adding text.
 */
export declare class TabTitle implements InteractiveComponent, LocalizedComponent, T9nComponent {
  el: HTMLCalciteTabTitleElement;
  /**
   * When `true`, the component and its respective `calcite-tab` contents are selected.
   *
   * Only one tab can be selected within the `calcite-tabs` parent.
   */
  selected: boolean;
  selectedHandler(): void;
  /** When `true`, a close button is added to the component. */
  closable: boolean;
  /** When `true`, does not display or position the component. */
  closed: boolean;
  /** When `true`, interaction is prevented and the component is displayed with lower opacity.  */
  disabled: boolean;
  /** Specifies an icon to display at the end of the component. */
  iconEnd: string;
  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
  iconFlipRtl: FlipContext;
  /** Specifies an icon to display at the start of the component. */
  iconStart: string;
  /**
   * @internal
   */
  layout: TabLayout;
  /**
   * @internal
   */
  position: TabPosition;
  /**
   * @internal
   */
  scale: Scale;
  /**
   * @internal
   */
  bordered: boolean;
  /**
   * Specifies a unique name for the component.
   *
   * When specified, use the same value on the `calcite-tab`.
   */
  tab: string;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: TabTitleMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<TabTitleMessages>;
  onMessagesChange(): void;
  connectedCallback(): void;
  disconnectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentWillRender(): void;
  render(): VNode;
  renderCloseButton(): VNode;
  componentDidLoad(): Promise<void>;
  componentDidRender(): void;
  internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
  onClick(): void;
  keyDownHandler(event: KeyboardEvent): void;
  /**
   * Fires when a `calcite-tab` is selected.
   */
  calciteTabsActivate: EventEmitter<void>;
  /**
   * Fires when a `calcite-tab` is selected (`event.details`).
   *
   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
   * @internal
   */
  calciteInternalTabsActivate: EventEmitter<TabChangeEventDetail>;
  /**
   * Fires when a `calcite-tab` is closed.
   */
  calciteTabsClose: EventEmitter<void>;
  /**
   * Fires when `calcite-tab` is closed (`event.details`).
   *
   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts)
   * @internal
   */
  calciteInternalTabsClose: EventEmitter<TabCloseEventDetail>;
  /**
   * @internal
   */
  calciteInternalTabsFocusNext: EventEmitter<void>;
  /**
   * @internal
   */
  calciteInternalTabsFocusPrevious: EventEmitter<void>;
  /**
   * @internal
   */
  calciteInternalTabsFocusFirst: EventEmitter<void>;
  /**
   * @internal
   */
  calciteInternalTabsFocusLast: EventEmitter<void>;
  /**
   * @internal
   */
  calciteInternalTabTitleRegister: EventEmitter<TabID>;
  /**
   * @internal
   */
  calciteInternalTabIconChanged: EventEmitter<void>;
  /**
   * Returns the index of the title within the `calcite-tab-nav`.
   */
  getTabIndex(): Promise<number>;
  /**
   * @internal
   */
  getTabIdentifier(): Promise<TabID>;
  /**
   * @param tabIds
   * @param titleIds
   * @internal
   */
  updateAriaInfo(tabIds?: string[], titleIds?: string[]): Promise<void>;
  private closeClickHandler;
  /** watches for changing text content */
  mutationObserver: MutationObserver;
  controls: string;
  defaultMessages: TabTitleMessages;
  effectiveLocale: "";
  effectiveLocaleChange(): void;
  /** determine if there is slotted text for styling purposes */
  hasText: boolean;
  closeButtonEl: HTMLButtonElement;
  containerEl: HTMLDivElement;
  parentTabNavEl: HTMLCalciteTabNavElement;
  parentTabsEl: HTMLCalciteTabsElement;
  resizeObserver: ResizeObserver;
  updateHasText(): void;
  setupTextContentObserver(): void;
  emitActiveTab(userTriggered?: boolean): void;
  closeTabTitleAndNotify(): void;
  guid: string;
}