@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

package/dist/types/components/calcite-tab-title/calcite-tab-title.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { TabChangeEventDetail } from "../calcite-tab/interfaces";
+import { TabID, TabLayout, TabPosition } from "../calcite-tabs/interfaces";
+import { FlipContext, Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding text.
+ */
+export declare class CalciteTabTitle {
+  el: HTMLCalciteTabTitleElement;
+  /** Show this tab title as selected */
+  active: boolean;
+  /** Disable this tab title  */
+  disabled: boolean;
+  /** optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names  */
+  iconEnd?: string;
+  /** flip the icon(s) in rtl */
+  iconFlipRtl?: FlipContext;
+  /** optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names  */
+  iconStart?: string;
+  /** @internal Parent tabs component layout value */
+  layout: TabLayout;
+  /** @internal Parent tabs component or parent tab-nav component's position */
+  position: TabPosition;
+  /** @internal Parent tabs component or parent tab-nav component's scale */
+  scale: Scale;
+  /** @internal Parent tabs component bordered value */
+  bordered: boolean;
+  /**
+   * Optionally include a unique name for the tab title,
+   * be sure to also set this name on the associated tab.
+   */
+  tab?: string;
+  activeTabChanged(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  render(): VNode;
+  componentDidLoad(): Promise<void>;
+  tabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
+  onClick(): void;
+  keyDownHandler(e: KeyboardEvent): void;
+  /**
+   * Fires when a specific tab is activated (`event.details`)
+   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)
+   */
+  calciteTabsActivate: EventEmitter<TabChangeEventDetail>;
+  /**
+   * @internal
+   */
+  calciteTabsFocusNext: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteTabsFocusPrevious: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteTabTitleRegister: EventEmitter<TabID>;
+  /**
+   * Return the index of this title within the nav
+   */
+  getTabIndex(): Promise<number>;
+  /**
+   * @internal
+   */
+  getTabIdentifier(): Promise<TabID>;
+  /**
+   * @internal
+   */
+  updateAriaInfo(tabIds?: string[], titleIds?: string[]): Promise<void>;
+  /** watches for changing text content **/
+  private mutationObserver;
+  private controls;
+  /** determine if there is slotted text for styling purposes */
+  private hasText;
+  /**
+   * @internal
+   */
+  private parentTabNavEl;
+  /**
+   * @internal
+   */
+  private parentTabsEl;
+  private updateHasText;
+  private setupTextContentObserver;
+  private emitActiveTab;
+  /**
+   * @internal
+   */
+  private guid;
+}

package/dist/types/components/calcite-tabs/calcite-tabs.d.ts

@@ -0,0 +1,65 @@
+import { VNode } from "../../stencil-public-runtime";
+import { TabLayout, TabPosition } from "./interfaces";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-tab`s.
+ * @slot tab-nav - A slot for adding a tab navigation component.
+ */
+export declare class CalciteTabs {
+  el: HTMLCalciteTabsElement;
+  /**
+   * Align tab titles to the edge or fully justify them across the tab nav ("center")
+   */
+  layout: TabLayout;
+  /**
+   * Display the tabs above (default) or below the tab content
+   */
+  position: TabPosition;
+  /**
+   * Specify the scale of the tabs component, defaults to m
+   */
+  scale: Scale;
+  /**
+   * Optionally enable tabs to appear like a folder-style menu when its layout is "inline"
+   */
+  bordered: boolean;
+  connectedCallback(): void;
+  render(): VNode;
+  /**
+   * @internal
+   */
+  calciteTabTitleRegister(e: CustomEvent): void;
+  /**
+   * @internal
+   */
+  calciteTabTitleUnregister(e: CustomEvent): void;
+  /**
+   * @internal
+   */
+  calciteTabRegister(e: CustomEvent): void;
+  /**
+   * @internal
+   */
+  calciteTabUnregister(e: CustomEvent): void;
+  /**
+   * @internal
+   *
+   * Stores an array of ids of `<calcite-tab-titles>`s to match up ARIA
+   * attributes.
+   */
+  titles: HTMLCalciteTabTitleElement[];
+  /**
+   * @internal
+   *
+   * Stores an array of ids of `<calcite-tab>`s to match up ARIA attributes.
+   */
+  tabs: HTMLCalciteTabElement[];
+  /**
+   * @internal
+   *
+   * Matches up elements from the internal `tabs` and `titles` to automatically
+   * update the ARIA attributes and link `<calcite-tab>` and
+   * `<calcite-tab-title>` components.
+   */
+  private registryHandler;
+}

package/dist/types/components/calcite-tile/calcite-tile.d.ts

@@ -0,0 +1,36 @@
+import { VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot content-start - A slot for adding non-actionable elements before the tile content.
+ * @slot content-end - A slot for adding non-actionable elements after the tile content.
+ */
+export declare class CalciteTile implements ConditionalSlotComponent {
+  el: HTMLCalciteTileElement;
+  /** The active state of the tile. */
+  active: boolean;
+  /** The description text that appears beneath the heading of the tile. */
+  description?: string;
+  /**
+   * When true, prevents interaction.
+   */
+  disabled: boolean;
+  /** The embed mode of the tile.  When true, renders without a border and padding for use by other components. */
+  embed: boolean;
+  /**
+   * The focused state of the tile.
+   * @internal
+   */
+  focused: boolean;
+  /** The heading text that appears between the icon and description of the tile. */
+  heading?: string;
+  /** The hidden state of the tile. */
+  hidden: boolean;
+  /** The (optional) url for the tile. (Only applies when embed is set to false) */
+  href?: string;
+  /** The icon that appears at the top of the tile. */
+  icon?: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  renderTile(): VNode;
+  render(): VNode;
+}

package/dist/types/components/calcite-tile-select/calcite-tile-select.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Alignment, Width } from "../interfaces";
+import { TileSelectType } from "./interfaces";
+/**
+ * @slot - A slot for adding custom content.
+ */
+export declare class CalciteTileSelect {
+  el: HTMLCalciteTileSelectElement;
+  /** The checked state of the tile select. */
+  checked: boolean;
+  checkedChanged(newChecked: boolean): void;
+  /** The description text that appears beneath the heading of the tile. */
+  description?: string;
+  /** The disabled state of the tile select. */
+  disabled: boolean;
+  /** The heading text that appears between the icon and description of the tile. */
+  heading?: string;
+  /** The hidden state of the tile select. */
+  hidden: boolean;
+  /** The icon that appears at the top of the tile. */
+  icon?: string;
+  /** The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */
+  name: any;
+  nameChanged(newName: string): void;
+  /** Display an interactive radio or checkbox. */
+  inputEnabled: boolean;
+  /** The side of the tile that the radio or checkbox appears on when inputEnabled is true. */
+  inputAlignment: Extract<"end" | "start", Alignment>;
+  /** The selection mode of the tile select: radio (single) or checkbox (multiple). */
+  type: TileSelectType;
+  /** The value of the tile select.  This value will appear in form submissions when this tile select is checked. */
+  value?: any;
+  /** specify the width of the tile, defaults to auto */
+  width: Extract<"auto" | "full", Width>;
+  private input;
+  guid: string;
+  /** The focused state of the tile-select. */
+  focused: boolean;
+  /**
+   * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
+   */
+  calciteTileSelectChange: EventEmitter;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  checkboxChangeHandler(event: CustomEvent): void;
+  checkboxFocusBlurHandler(event: CustomEvent): void;
+  radioButtonChangeHandler(event: CustomEvent): void;
+  radioButtonCheckedChangeHandler(event: CustomEvent): void;
+  radioButtonFocusBlurHandler(event: CustomEvent): void;
+  click(event: MouseEvent): void;
+  mouseenter(): void;
+  mouseleave(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private renderInput;
+  render(): VNode;
+}

package/dist/types/components/calcite-tile-select/resources.d.ts

@@ -0,0 +1,16 @@
+export declare const CSS: {
+  checked: string;
+  description: string;
+  descriptionOnly: string;
+  disabled: string;
+  heading: string;
+  headingOnly: string;
+  icon: string;
+  iconOnly: string;
+  inputAlignmentEnd: string;
+  inputAlignmentStart: string;
+  inputEnabled: string;
+  largeVisual: string;
+  widthAuto: string;
+  widthFull: string;
+};

package/dist/types/components/calcite-time-picker/calcite-time-picker.d.ts

@@ -0,0 +1,135 @@
+import { VNode, EventEmitter } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { TimePart, HourCycle, Meridiem } from "../../utils/time";
+export declare class CalciteTimePicker {
+  el: HTMLCalciteTimePickerElement;
+  /** aria-label for the hour input
+   * @default "Hour"
+   */
+  intlHour: string;
+  /** aria-label for the hour down button
+   * @default "Decrease hour"
+   */
+  intlHourDown: string;
+  /** aria-label for the hour up button
+   * @default "Increase hour"
+   */
+  intlHourUp: string;
+  /** aria-label for the meridiem (am/pm) input
+   * @default "AM/PM"
+   */
+  intlMeridiem: string;
+  /** aria-label for the meridiem (am/pm) down button
+   * @default "Decrease AM/PM"
+   */
+  intlMeridiemDown: string;
+  /** aria-label for the meridiem (am/pm) up button
+   * @default "Increase AM/PM"
+   */
+  intlMeridiemUp: string;
+  /** aria-label for the minute input
+   * @default "Minute"
+   */
+  intlMinute: string;
+  /** aria-label for the minute down button
+   * @default "Decrease minute"
+   */
+  intlMinuteDown: string;
+  /** aria-label for the minute up button
+   * @default "Increase minute"
+   */
+  intlMinuteUp: string;
+  /** aria-label for the second input
+   * @default "Second"
+   */
+  intlSecond: string;
+  /** aria-label for the second down button
+   * @default "Decrease second"
+   */
+  intlSecondDown: string;
+  /** aria-label for the second up button
+   * @default "Increase second"
+   */
+  intlSecondUp: string;
+  /**
+   * BCP 47 language tag for desired language and country format
+   * @internal
+   */
+  locale: string;
+  localeWatcher(newLocale: string): void;
+  /** The scale (size) of the time picker */
+  scale: Scale;
+  /** number (seconds) that specifies the granularity that the value must adhere to */
+  step: number;
+  /** The selected time in UTC (always 24-hour format) */
+  value: string;
+  valueWatcher(newValue: string): void;
+  private activeEl;
+  private hourEl;
+  private meridiemEl;
+  private minuteEl;
+  private secondEl;
+  hour: string;
+  hourChanged(newHour: string): void;
+  hourCycle: HourCycle;
+  localizedHour: string;
+  localizedHourSuffix: string;
+  localizedMeridiem: string;
+  localizedMinute: string;
+  localizedMinuteSuffix: string;
+  localizedSecond: string;
+  localizedSecondSuffix: string;
+  meridiem: Meridiem;
+  minute: string;
+  second: string;
+  showSecond: boolean;
+  /**
+   * @internal
+   */
+  calciteTimePickerBlur: EventEmitter<void>;
+  /**
+   * @internal
+   */
+  calciteTimePickerChange: EventEmitter<string>;
+  /**
+   * @internal
+   */
+  calciteTimePickerFocus: EventEmitter<void>;
+  hostBlurHandler(): void;
+  hostFocusHandler(): void;
+  keyDownHandler(event: KeyboardEvent): void;
+  /** Sets focus on the component. */
+  setFocus(target: TimePart): Promise<void>;
+  private buttonActivated;
+  private decrementHour;
+  private decrementMeridiem;
+  private decrementMinuteOrSecond;
+  private decrementMinute;
+  private decrementSecond;
+  private focusHandler;
+  private hourDownButtonKeyDownHandler;
+  private hourKeyDownHandler;
+  private hourUpButtonKeyDownHandler;
+  private incrementMeridiem;
+  private incrementHour;
+  private incrementMinuteOrSecond;
+  private incrementMinute;
+  private incrementSecond;
+  private meridiemDownButtonKeyDownHandler;
+  private meridiemKeyDownHandler;
+  private meridiemUpButtonKeyDownHandler;
+  private minuteDownButtonKeyDownHandler;
+  private minuteKeyDownHandler;
+  private minuteUpButtonKeyDownHandler;
+  private secondDownButtonKeyDownHandler;
+  private secondKeyDownHandler;
+  private secondUpButtonKeyDownHandler;
+  private setHourEl;
+  private setMeridiemEl;
+  private setMinuteEl;
+  private setSecondEl;
+  private setValue;
+  private setValuePart;
+  connectedCallback(): void;
+  render(): VNode;
+}

package/dist/types/components/calcite-tip/calcite-tip.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/CalciteHeading";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding text and a hyperlink.
+ * @slot thumbnail - A slot for adding an HTML image element to the tip.
+ */
+export declare class CalciteTip implements ConditionalSlotComponent {
+  /**
+   * No longer displays the tip.
+   */
+  dismissed: boolean;
+  /**
+   * Indicates whether the tip can be dismissed.
+   */
+  nonDismissible: boolean;
+  /**
+   * The heading of the tip.
+   */
+  heading?: string;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  /**
+   * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
+   */
+  selected: boolean;
+  /**
+   * Alternate text for closing the tip.
+   */
+  intlClose?: string;
+  el: HTMLCalciteTipElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Emitted when the component has been dismissed.
+   */
+  calciteTipDismiss: EventEmitter;
+  hideTip: () => void;
+  renderHeader(): VNode;
+  renderDismissButton(): VNode;
+  renderImageFrame(): VNode;
+  renderInfoNode(): VNode;
+  renderContent(): VNode;
+  render(): VNode;
+}

package/dist/types/components/calcite-tip-manager/calcite-tip-manager.d.ts

@@ -0,0 +1,65 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/CalciteHeading";
+/**
+ * @slot - A slot for adding `calcite-tip`s.
+ */
+export declare class CalciteTipManager {
+  /**
+   * Alternate text for closing the `calcite-tip-manager`.
+   */
+  closed: boolean;
+  closedChangeHandler(): void;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  /**
+   * Alternate text for closing the tip.
+   */
+  intlClose?: string;
+  /**
+   * The default group title for the `calcite-tip-manager`.
+   */
+  intlDefaultTitle?: string;
+  /**
+   * Alternate text for navigating to the next tip.
+   */
+  intlNext?: string;
+  /**
+   * Label that appears on hover of pagination icon.
+   */
+  intlPaginationLabel?: string;
+  /**
+   * Alternate text for navigating to the previous tip.
+   */
+  intlPrevious?: string;
+  el: HTMLCalciteTipManagerElement;
+  selectedIndex: number;
+  selectedChangeHandler(): void;
+  tips: HTMLCalciteTipElement[];
+  total: number;
+  direction: "advancing" | "retreating";
+  groupTitle: string;
+  mutationObserver: MutationObserver;
+  container: HTMLDivElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /** Selects the next tip to display */
+  nextTip(): Promise<void>;
+  /** Selects the previous tip to display */
+  previousTip(): Promise<void>;
+  /**
+   * Emitted when the `calcite-tip-manager` has been toggled open or closed.
+   */
+  calciteTipManagerToggle: EventEmitter;
+  setUpTips(): void;
+  hideTipManager: () => void;
+  showSelectedTip(): void;
+  updateGroupTitle(): void;
+  previousClicked: () => void;
+  nextClicked: () => void;
+  tipManagerKeyUpHandler: (event: KeyboardEvent) => void;
+  storeContainerRef: (el: HTMLDivElement) => void;
+  renderPagination(): VNode;
+  render(): VNode;
+}

package/dist/types/components/calcite-tooltip/calcite-tooltip.d.ts

@@ -0,0 +1,60 @@
+import { VNode } from "../../stencil-public-runtime";
+import { StrictModifiers, Instance as Popper } from "@popperjs/core";
+import { PopperPlacement, OverlayPositioning } from "../../utils/popper";
+/**
+ * @slot - A slot for adding text.
+ */
+export declare class CalciteTooltip {
+  /** Accessible name for the component */
+  label: string;
+  /**
+   * Offset the position of the tooltip away from the reference element.
+   * @default 6
+   */
+  offsetDistance: number;
+  offsetDistanceOffsetHandler(): void;
+  /**
+   * Offset the position of the tooltip along the reference element.
+   */
+  offsetSkidding: number;
+  offsetSkiddingHandler(): void;
+  /**
+   * Display and position the component.
+   */
+  open: boolean;
+  openHandler(): void;
+  /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+  overlayPositioning: OverlayPositioning;
+  /**
+   * Determines where the component will be positioned relative to the referenceElement.
+   * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+   */
+  placement: PopperPlacement;
+  placementHandler(): void;
+  /**
+   * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement.
+   */
+  referenceElement: HTMLElement | string;
+  referenceElementHandler(): void;
+  el: HTMLCalciteTooltipElement;
+  effectiveReferenceElement: HTMLElement;
+  arrowEl: HTMLDivElement;
+  popper: Popper;
+  guid: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  /** Updates the position of the component. */
+  reposition(): Promise<void>;
+  setUpReferenceElement: () => void;
+  getId: () => string;
+  addReferences: () => void;
+  removeReferences: () => void;
+  show: () => void;
+  hide: () => void;
+  getReferenceElement(): HTMLElement;
+  getModifiers(): Partial<StrictModifiers>[];
+  createPopper(): void;
+  destroyPopper(): void;
+  render(): VNode;
+}

package/dist/types/components/calcite-tooltip-manager/calcite-tooltip-manager.d.ts

@@ -0,0 +1,41 @@
+import { VNode } from "../../stencil-public-runtime";
+/**
+ * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
+ */
+export declare class CalciteTooltipManager {
+  el: HTMLCalciteTooltipManagerElement;
+  tooltipEl: HTMLCalciteTooltipElement;
+  hoverTimeouts: WeakMap<HTMLCalciteTooltipElement, number>;
+  clickedTooltip: HTMLCalciteTooltipElement;
+  /**
+   * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip.
+   * @default `[data-calcite-tooltip-reference]`
+   */
+  selector: string;
+  queryTooltip: (element: HTMLElement) => HTMLCalciteTooltipElement;
+  clearHoverTimeout: (tooltip: HTMLCalciteTooltipElement) => void;
+  closeExistingTooltip: () => void;
+  focusTooltip: ({ tooltip, value }: {
+    tooltip: HTMLCalciteTooltipElement;
+    value: boolean;
+  }) => void;
+  toggleTooltip: (tooltip: HTMLCalciteTooltipElement, value: boolean) => void;
+  hoverToggle: ({ tooltip, value }: {
+    tooltip: HTMLCalciteTooltipElement;
+    value: boolean;
+  }) => void;
+  hoverTooltip: ({ tooltip, value }: {
+    tooltip: HTMLCalciteTooltipElement;
+    value: boolean;
+  }) => void;
+  activeTooltipHover: (event: MouseEvent) => void;
+  hoverEvent: (event: MouseEvent, value: boolean) => void;
+  focusEvent: (event: FocusEvent, value: boolean) => void;
+  render(): VNode;
+  keyUpHandler(event: KeyboardEvent): void;
+  mouseEnterShow(event: MouseEvent): void;
+  mouseLeaveHide(event: MouseEvent): void;
+  clickHandler(event: MouseEvent): void;
+  focusShow(event: FocusEvent): void;
+  blurHide(event: FocusEvent): void;
+}

package/dist/types/components/calcite-tree/calcite-tree.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { TreeItemSelectDetail } from "../calcite-tree-item/interfaces";
+import { TreeSelectDetail, TreeSelectionMode } from "./interfaces";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for `calcite-tree-item` elements.
+ */
+export declare class CalciteTree {
+  el: HTMLCalciteTreeElement;
+  /** Display indentation guide lines */
+  lines: boolean;
+  /** Display input
+   * @deprecated use "ancestors" selection-mode for checkbox input
+   */
+  inputEnabled: boolean;
+  /** @internal If this tree is nested within another tree, set to false */
+  child: boolean;
+  /** Specify the scale of the tree, defaults to m */
+  scale: Scale;
+  /** Customize how tree selection works (single, multi, children, multi-children, ancestors)
+   * @default "single"
+   * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L5)
+   */
+  selectionMode: TreeSelectionMode;
+  componentWillRender(): void;
+  render(): VNode;
+  onFocus(): void;
+  onFocusIn(event: FocusEvent): void;
+  onFocusOut(event: FocusEvent): void;
+  onClick(e: CustomEvent<TreeItemSelectDetail>): void;
+  updateAncestorTree(e: CustomEvent<TreeItemSelectDetail>): void;
+  /**
+   * Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property.
+   * @see [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L1)
+   */
+  calciteTreeSelect: EventEmitter<TreeSelectDetail>;
+  getRootTabIndex(): number;
+}

package/dist/types/components/calcite-tree/interfaces.d.ts

@@ -0,0 +1,10 @@
+export interface TreeSelectDetail {
+  selected: HTMLCalciteTreeItemElement[];
+}
+export declare enum TreeSelectionMode {
+  Single = "single",
+  Multi = "multi",
+  Children = "children",
+  MultiChildren = "multi-children",
+  Ancestors = "ancestors"
+}