@esri/calcite-components 1.0.0-beta.79 → 1.0.0-beta.80

package/dist/types/components/sortable-list/sortable-list.d.ts

@@ -0,0 +1,52 @@
+import Sortable from "sortablejs";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Layout } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding sortable items.
+ */
+export declare class SortableList implements InteractiveComponent {
+  /**
+   * Specifies which items inside the element should be draggable.
+   */
+  dragSelector?: string;
+  /**
+   * The list's group identifier.
+   *
+   * To drag elements from one list into another, both lists must have the same group value.
+   */
+  group?: string;
+  /**
+   * The selector for the handle elements.
+   */
+  handleSelector: string;
+  /**
+   * Indicates the horizontal or vertical orientation of the component.
+   */
+  layout: Layout;
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   */
+  loading: boolean;
+  el: HTMLCalciteSortableListElement;
+  handleActivated: boolean;
+  items: Element[];
+  mutationObserver: MutationObserver;
+  sortable: Sortable;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidRender(): void;
+  /**
+   * Emitted when the order of the list has changed.
+   */
+  calciteListOrderChange: EventEmitter;
+  calciteHandleNudgeHandler(event: CustomEvent): void;
+  setUpDragAndDrop(): void;
+  cleanUpDragAndDrop(): void;
+  beginObserving(): void;
+  render(): VNode;
+}

package/dist/types/components/split-button/split-button.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ButtonAppearance, ButtonColor, DropdownIconType } from "../button/interfaces";
+import { FlipContext, Scale, Width } from "../interfaces";
+import { OverlayPositioning } from "../../utils/popper";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding `calcite-dropdown` content.
+ */
+export declare class SplitButton implements InteractiveComponent {
+  el: HTMLCalciteSplitButtonElement;
+  /** specify the appearance style of the button, defaults to solid. */
+  appearance: ButtonAppearance;
+  /** specify the color of the control, defaults to blue */
+  color: ButtonColor;
+  /** is the control disabled  */
+  disabled: boolean;
+  handleDisabledChange(value: boolean): void;
+  /**
+   * Is the dropdown currently active or not
+   * @internal
+   */
+  active: boolean;
+  activeHandler(): void;
+  /** specify the icon used for the dropdown menu, defaults to chevron */
+  dropdownIconType: DropdownIconType;
+  /** aria label for overflow button */
+  dropdownLabel?: string;
+  /** optionally add a calcite-loader component to the control,
+   disabling interaction. with the primary button */
+  loading: boolean;
+  /** Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */
+  overlayPositioning: OverlayPositioning;
+  /** optionally pass an icon to display at the end of the primary button - accepts Calcite UI icon names  */
+  primaryIconEnd?: string;
+  /** flip the primary icon(s) in rtl */
+  primaryIconFlipRtl?: FlipContext;
+  /** optionally pass an icon to display at the start of the primary button - accepts Calcite UI icon names  */
+  primaryIconStart?: string;
+  /** optionally pass an aria-label for the primary button */
+  primaryLabel?: string;
+  /** text for primary action button  */
+  primaryText: string;
+  /** specify the scale of the control, defaults to m */
+  scale: Scale;
+  /** specify the width of the button, defaults to auto */
+  width: Width;
+  /** fired when the primary button is clicked */
+  calciteSplitButtonPrimaryClick: EventEmitter;
+  /** fired when the secondary button is clicked */
+  calciteSplitButtonSecondaryClick: EventEmitter;
+  componentDidRender(): void;
+  render(): VNode;
+  private calciteSplitButtonPrimaryClickHandler;
+  private calciteSplitButtonSecondaryClickHandler;
+  private get dropdownIcon();
+}

package/dist/types/components/stepper/stepper.d.ts

@@ -0,0 +1,58 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Layout, Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-stepper-item`s.
+ */
+export declare class Stepper {
+  el: HTMLCalciteStepperElement;
+  /** optionally display a status icon next to the step title */
+  icon: boolean;
+  /** specify the layout of stepper, defaults to horizontal */
+  layout: Layout;
+  /** optionally display the number next to the step title */
+  numbered: boolean;
+  /** specify the scale of stepper, defaults to m */
+  scale: Scale;
+  /** @internal */
+  requestedContent: HTMLElement[] | NodeListOf<any>;
+  contentWatcher(): void;
+  /**
+   * This event fires when the active stepper item has changed.
+   * @internal
+   */
+  calciteStepperItemChange: EventEmitter;
+  componentDidLoad(): void;
+  componentWillLoad(): void;
+  render(): VNode;
+  calciteStepperItemKeyEvent(e: CustomEvent): void;
+  registerItem(event: CustomEvent): void;
+  updateItem(event: CustomEvent): void;
+  /** set the next step as active */
+  nextStep(): Promise<void>;
+  /** set the previous step as active */
+  prevStep(): Promise<void>;
+  /** set the requested step as active */
+  goToStep(num: number): Promise<void>;
+  /** set the first step as active */
+  startStep(): Promise<void>;
+  /** set the last step as active */
+  endStep(): Promise<void>;
+  /** created list of Stepper items */
+  private items;
+  /** sorted list of Stepper items */
+  private sortedItems;
+  /** keep track of the currently active item position */
+  private currentPosition;
+  /** the container where we place horizontal layout step content */
+  private stepperContentContainer;
+  private addHorizontalContentContainer;
+  private emitChangedItem;
+  private focusFirstItem;
+  private focusLastItem;
+  private focusNextItem;
+  private focusPrevItem;
+  private itemIndex;
+  private focusElement;
+  private sortItems;
+  private updateContent;
+}

package/dist/types/components/stepper-item/stepper-item.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding custom content.
+ */
+export declare class StepperItem implements InteractiveComponent {
+  el: HTMLCalciteStepperItemElement;
+  /** is the step active */
+  active: boolean;
+  /** has the step been completed */
+  complete: boolean;
+  /** does the step contain an error that needs to be resolved by the user */
+  error: boolean;
+  /** is the step disabled and not navigable to by a user */
+  disabled: boolean;
+  /** pass a title for the stepper item */
+  itemTitle?: string;
+  /** pass a title for the stepper item */
+  itemSubtitle?: string;
+  /** pass a title for the stepper item */
+  /** @internal */
+  layout?: string;
+  /** should the items display an icon based on status */
+  /** @internal */
+  icon: boolean;
+  /** optionally display the step number next to the title and subtitle */
+  /** @internal */
+  numbered: boolean;
+  /** the scale of the item */
+  /** @internal */
+  scale: Scale;
+  disabledWatcher(): void;
+  /**
+   * @internal
+   */
+  calciteStepperItemKeyEvent: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteStepperItemSelect: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteStepperItemRegister: EventEmitter;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidUpdate(): void;
+  componentDidRender(): void;
+  render(): VNode;
+  keyDownHandler(e: KeyboardEvent): void;
+  updateActiveItemOnChange(event: CustomEvent): void;
+  /** position within parent */
+  private itemPosition;
+  /** the latest requested item position*/
+  private activePosition;
+  /** the slotted item content */
+  private itemContent;
+  /** the parent stepper component */
+  private parentStepperEl;
+  private renderIcon;
+  private determineActiveItem;
+  private registerStepperItem;
+  private emitRequestedItem;
+  private getItemContent;
+  private getItemPosition;
+}

package/dist/types/components/switch/switch.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { CheckableFormCompoment } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Switch implements LabelableComponent, CheckableFormCompoment, InteractiveComponent {
+  el: HTMLCalciteSwitchElement;
+  /** True if the switch is disabled */
+  disabled: boolean;
+  /** Applies to the aria-label attribute on the switch */
+  label?: string;
+  /** The name of the switch input */
+  name: string;
+  /** The scale of the switch */
+  scale: Scale;
+  /** True if the switch is initially on
+   * @deprecated use 'checked' instead.
+   */
+  switched: boolean;
+  switchedWatcher(switched: boolean): void;
+  /** True if the switch is initially on */
+  checked: boolean;
+  /** The value of the switch input */
+  value: any;
+  labelEl: HTMLCalciteLabelElement;
+  switchEl: HTMLDivElement;
+  formEl: HTMLFormElement;
+  defaultValue: Switch["checked"];
+  defaultChecked: boolean;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  keyDownHandler: (e: KeyboardEvent) => void;
+  onLabelClick(): void;
+  private toggle;
+  private clickHandler;
+  private setSwitchEl;
+  /**
+   * Fires when the checked value has changed.
+   */
+  calciteSwitchChange: EventEmitter;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidRender(): void;
+  render(): VNode;
+}

package/dist/types/components/tab/tab.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { TabChangeEventDetail } from "./interfaces";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding custom content.
+ */
+export declare class Tab {
+  el: HTMLCalciteTabElement;
+  /**
+   * Optionally include a unique name for this tab,
+   * be sure to also set this name on the associated title.
+   */
+  tab: string;
+  /**
+   * Show this tab
+   */
+  active: boolean;
+  /** @internal Parent tabs component scale value */
+  scale: Scale;
+  render(): VNode;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  disconnectedCallback(): void;
+  /**
+   * @internal
+   */
+  calciteTabRegister: EventEmitter;
+  tabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
+  /**
+   * Return the index of this tab within the tab array
+   */
+  getTabIndex(): Promise<number>;
+  /**
+   * @internal
+   */
+  private guid;
+  private labeledBy;
+  /**
+   * @internal
+   */
+  updateAriaInfo(tabIds?: string[], titleIds?: string[]): Promise<void>;
+}

package/dist/types/components/tab-nav/tab-nav.d.ts

@@ -0,0 +1,74 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { TabChangeEventDetail } from "../tab/interfaces";
+import { TabID, TabLayout } from "../tabs/interfaces";
+import { TabPosition } from "../tabs/interfaces";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-tab-title`s.
+ */
+export declare class TabNav {
+  el: HTMLCalciteTabNavElement;
+  /**
+   * Name to use when saving selected tab data to localStorage
+   */
+  storageId: string;
+  /**
+   * Pass the same string to multiple tab navs to keep them all in sync if one changes
+   */
+  syncId: string;
+  /** @internal Parent tabs component scale value */
+  scale: Scale;
+  /** @internal Parent tabs component layout value */
+  layout: TabLayout;
+  /** @internal Parent tabs component position value */
+  position: TabPosition;
+  /** @internal Parent tabs component bordered value when layout is "inline" */
+  bordered: boolean;
+  /**
+   * @internal
+   */
+  selectedTab: TabID;
+  /**
+   * @internal
+   */
+  selectedTabEl: HTMLCalciteTabTitleElement;
+  /**
+   * @internal
+   */
+  indicatorOffset: number;
+  /**
+   * @internal
+   */
+  indicatorWidth: number;
+  selectedTabChanged(): Promise<void>;
+  selectedTabElChanged(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  render(): VNode;
+  resizeHandler(): void;
+  focusPreviousTabHandler(e: CustomEvent): void;
+  focusNextTabHandler(e: CustomEvent): void;
+  activateTabHandler(e: CustomEvent<TabChangeEventDetail>): void;
+  /**
+   * Check for active tabs on register and update selected
+   */
+  updateTabTitles(e: CustomEvent<TabID>): void;
+  globalTabChangeHandler(e: CustomEvent<TabChangeEventDetail>): void;
+  /**
+   * Emitted when the active tab changes
+   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
+   */
+  calciteTabChange: EventEmitter<TabChangeEventDetail>;
+  private tabNavEl;
+  private activeIndicatorEl;
+  private activeIndicatorContainerEl;
+  private animationActiveDuration;
+  private handleContainerScroll;
+  private updateOffsetPosition;
+  private updateActiveWidth;
+  private getIndexOfTabTitle;
+  private getTabTitleById;
+  private get tabTitles();
+  private get enabledTabTitles();
+}

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

@@ -0,0 +1,94 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { TabChangeEventDetail } from "../tab/interfaces";
+import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
+import { FlipContext, Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding text.
+ */
+export declare class TabTitle implements InteractiveComponent {
+  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>;
+  componentDidRender(): 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/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/tabs/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 Tabs {
+  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/tile/tile.d.ts

@@ -0,0 +1,38 @@
+import { VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @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 Tile implements ConditionalSlotComponent, InteractiveComponent {
+  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;
+  componentDidRender(): void;
+  renderTile(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,59 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Alignment, Width } from "../interfaces";
+import { TileSelectType } from "./interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding custom content.
+ */
+export declare class TileSelect implements InteractiveComponent {
+  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;
+  componentDidRender(): void;
+  private renderInput;
+  render(): VNode;
+}

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

@@ -0,0 +1,15 @@
+import { VNode } from "../../stencil-public-runtime";
+import { TileSelectGroupLayout } from "./interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding `calcite-tile-select`s.
+ */
+export declare class TileSelectGroup implements InteractiveComponent {
+  el: HTMLCalciteTileSelectGroupElement;
+  /** The disabled state of the tile select. */
+  disabled: boolean;
+  /** Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */
+  layout?: TileSelectGroupLayout;
+  componentDidRender(): void;
+  render(): VNode;
+}