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

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

@@ -0,0 +1,197 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ColorStop, DataSeries } from "../graph/interfaces";
+import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Slider implements LabelableComponent, FormComponent, InteractiveComponent {
+  el: HTMLCalciteSliderElement;
+  /** Disable and gray out the slider */
+  disabled: boolean;
+  /** Indicates if a histogram is present */
+  hasHistogram: boolean;
+  /**
+   * List of x,y coordinates within the slider's min and max, displays above the slider track.
+   * @see [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5)
+   */
+  histogram?: DataSeries;
+  histogramWatcher(newHistogram: DataSeries): void;
+  /**
+   * Array of values describing a single color stop, sorted by offset ascending.
+   */
+  histogramStops: ColorStop[];
+  /** Label handles with their numeric value */
+  labelHandles: boolean;
+  /** Label tick marks with their numeric value. */
+  labelTicks: boolean;
+  /** Maximum selectable value */
+  max: number;
+  /** Used as an accessible label (aria-label) for second handle if needed (ex. "Temperature, upper bound") */
+  maxLabel?: string;
+  /** Currently selected upper number (if multi-select) */
+  maxValue?: number;
+  /** Minimum selectable value */
+  min: number;
+  /** Used as an accessible label (aria-label) for first (or only) handle (ex. "Temperature, lower bound") */
+  minLabel: string;
+  /** Currently selected lower number (if multi-select) */
+  minValue?: number;
+  /**
+   * When true, the slider will display values from high to low.
+   *
+   * Note that this value will be ignored if the slider has an associated histogram.
+   */
+  mirrored: boolean;
+  /** The name of the slider */
+  name: string;
+  /** Interval to move on page up/page down keys */
+  pageStep?: number;
+  /** Use finer point for handles */
+  precise: boolean;
+  /**
+   * When true, makes the component required for form-submission.
+   */
+  required: boolean;
+  /** When true, enables snap selection along the step interval */
+  snap: boolean;
+  /** Interval to move on up/down keys */
+  step?: number;
+  /** Show tick marks on the number line at provided interval */
+  ticks?: number;
+  /** Currently selected number (if single select) */
+  value: null | number | number[];
+  valueHandler(): void;
+  minMaxValueHandler(): void;
+  /**
+   * Specify the scale of the slider, defaults to m
+   */
+  scale: Scale;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidRender(): void;
+  render(): VNode;
+  private renderGraph;
+  private renderTickLabel;
+  keyDownHandler(event: KeyboardEvent): void;
+  clickHandler(event: PointerEvent): void;
+  pointerDownHandler(event: PointerEvent): void;
+  handleTouchStart(event: TouchEvent): void;
+  /**
+   * Fires on all updates to the slider.
+   * :warning: Will be fired frequently during drag. If you are performing any
+   * expensive operations consider using a debounce or throttle to avoid
+   * locking up the main thread.
+   */
+  calciteSliderInput: EventEmitter;
+  /**
+   * Fires on when the thumb is released on slider
+   * If you need to constantly listen to the drag event,
+   * please use calciteSliderInput instead
+   */
+  calciteSliderChange: EventEmitter;
+  /**
+   * Fires on all updates to the slider.
+   * :warning: Will be fired frequently during drag. If you are performing any
+   * expensive operations consider using a debounce or throttle to avoid
+   * locking up the main thread.
+   * @deprecated use calciteSliderInput instead
+   */
+  calciteSliderUpdate: EventEmitter;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: Slider["value"];
+  private guid;
+  private dragProp;
+  private lastDragProp;
+  private lastDragPropValue;
+  private minHandle;
+  private maxHandle;
+  private trackEl;
+  private activeProp;
+  private minMaxValueRange;
+  private minValueDragRange;
+  private maxValueDragRange;
+  private tickValues;
+  setValueFromMinMax(): void;
+  setMinMaxFromValue(): void;
+  onLabelClick(): void;
+  private shouldMirror;
+  private shouldUseMinValue;
+  private generateTickValues;
+  private dragStart;
+  private focusActiveHandle;
+  private dragUpdate;
+  private emitInput;
+  private emitChange;
+  private dragEnd;
+  private removeDragListeners;
+  /**
+   * Set the prop value if changed at the component level
+   * @param valueProp
+   * @param value
+   */
+  private setValue;
+  /**
+   * Set the reference of the track Element
+   * @internal
+   * @param node
+   */
+  private storeTrackRef;
+  /**
+   * If number is outside range, constrain to min or max
+   * @internal
+   */
+  private clamp;
+  /**
+   * Translate a pixel position to value along the range
+   * @internal
+   */
+  private translate;
+  /**
+   * Get closest allowed value along stepped values
+   * @internal
+   */
+  private getClosestStep;
+  private getClosestHandle;
+  private getDistanceX;
+  private getFontSizeForElement;
+  /**
+   * Get position of value along range as fractional value
+   * @return {number} number in the unit interval [0,1]
+   * @internal
+   */
+  private getUnitInterval;
+  private adjustHostObscuredHandleLabel;
+  private hyphenateCollidingRangeHandleLabels;
+  /**
+   * Hides bounding tick labels that are obscured by either handle.
+   */
+  private hideObscuredBoundingTickLabels;
+  /**
+   * Returns an integer representing the number of pixels to offset on the left or right side based on desired position behavior.
+   * @internal
+   */
+  private getHostOffset;
+  /**
+   * Returns an integer representing the number of pixels that the two given span elements are overlapping, taking into account
+   * a space in between the two spans equal to the font-size set on them to account for the space needed to render a hyphen.
+   * @param leftLabel
+   * @param rightLabel
+   */
+  private getRangeLabelOverlap;
+  /**
+   * Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle div element.
+   * @param minLabel
+   * @param handle
+   */
+  private isMinTickLabelObscured;
+  /**
+   * Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle div element.
+   * @param maxLabel
+   * @param handle
+   */
+  private isMaxTickLabelObscured;
+}

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/interfaces.d.ts

@@ -0,0 +1,10 @@
+export interface StepperItemEventDetail {
+  position: number;
+  content: Node[];
+}
+export interface StepperItemKeyEventDetail {
+  item: KeyboardEvent;
+}
+export interface StepperItemChangeEventDetail {
+  position: number;
+}

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

@@ -0,0 +1,62 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Layout, Scale } from "../interfaces";
+import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } 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: Node[];
+  contentWatcher(): void;
+  /**
+   * This event fires when the active stepper item has changed.
+   * @internal
+   */
+  calciteStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;
+  componentDidLoad(): void;
+  componentWillLoad(): void;
+  render(): VNode;
+  calciteStepperItemKeyEvent(e: CustomEvent<StepperItemKeyEventDetail>): void;
+  registerItem(event: CustomEvent<StepperItemEventDetail>): void;
+  updateItem(event: CustomEvent<StepperItemEventDetail>): 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(step: number): Promise<void>;
+  /** set the first step as active */
+  startStep(): Promise<void>;
+  /** set the last step as active */
+  endStep(): Promise<void>;
+  private itemMap;
+  /** list of sorted Stepper items */
+  private items;
+  /** list of enabled Stepper items */
+  private enabledItems;
+  /** keep track of the currently active item position */
+  private currentPosition;
+  /** the container where we place horizontal layout step content */
+  private stepperContentContainer;
+  private getEnabledStepIndex;
+  private addHorizontalContentContainer;
+  private emitChangedItem;
+  private focusFirstItem;
+  private focusLastItem;
+  private focusNextItem;
+  private focusPrevItem;
+  private itemIndex;
+  private focusElement;
+  private sortItems;
+  private filterItems;
+  private updateContent;
+}

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

@@ -0,0 +1,66 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "../stepper/interfaces";
+/**
+ * @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<StepperItemKeyEventDetail>;
+  /**
+   * @internal
+   */
+  calciteStepperItemSelect: EventEmitter<StepperItemEventDetail>;
+  /**
+   * @internal
+   */
+  calciteStepperItemRegister: EventEmitter<StepperItemEventDetail>;
+  componentWillLoad(): void;
+  componentDidRender(): void;
+  render(): VNode;
+  updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): 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 keyDownHandler;
+  private renderIcon;
+  private determineActiveItem;
+  private registerStepperItem;
+  private emitRequestedItem;
+  private setItemContent;
+  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,41 @@
+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;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  disconnectedCallback(): void;
+  /**
+   * @internal
+   */
+  calciteTabRegister: EventEmitter;
+  internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
+  /**
+   * Return the index of this tab within the tab array
+   */
+  getTabIndex(): Promise<number>;
+  parentTabsEl: HTMLCalciteTabsElement;
+  guid: string;
+  labeledBy: string;
+  /**
+   * @internal
+   */
+  updateAriaInfo(tabIds?: string[], titleIds?: string[]): Promise<void>;
+}

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

@@ -0,0 +1,76 @@
+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
+   */
+  indicatorOffset: number;
+  /**
+   * @internal
+   */
+  indicatorWidth: number;
+  selectedTabChanged(): Promise<void>;
+  selectedTabElChanged(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  render(): VNode;
+  focusPreviousTabHandler(e: CustomEvent): void;
+  focusNextTabHandler(e: CustomEvent): void;
+  internalActivateTabHandler(e: CustomEvent<TabChangeEventDetail>): void;
+  activateTabHandler(e: CustomEvent<TabChangeEventDetail>): void;
+  /**
+   * Check for active tabs on register and update selected
+   */
+  updateTabTitles(e: CustomEvent<TabID>): void;
+  globalInternalTabChangeHandler(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>;
+  /**
+   * @internal
+   */
+  calciteInternalTabChange: EventEmitter<TabChangeEventDetail>;
+  selectedTab: TabID;
+  selectedTabEl: HTMLCalciteTabTitleElement;
+  parentTabsEl: HTMLCalciteTabsElement;
+  tabNavEl: HTMLDivElement;
+  activeIndicatorEl: HTMLElement;
+  activeIndicatorContainerEl: HTMLDivElement;
+  animationActiveDuration: number;
+  resizeObserver: ResizeObserver;
+  handleContainerScroll: () => void;
+  updateOffsetPosition(): void;
+  updateActiveWidth(): void;
+  getIndexOfTabTitle(el: HTMLCalciteTabTitleElement, tabTitles?: HTMLCalciteTabTitleElement[]): number;
+  getTabTitleById(id: TabID): Promise<HTMLCalciteTabTitleElement | null>;
+  get tabTitles(): HTMLCalciteTabTitleElement[];
+  get enabledTabTitles(): HTMLCalciteTabTitleElement[];
+}