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

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

@@ -0,0 +1,51 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+export interface PaginationDetail {
+  start: number;
+  total: number;
+  num: number;
+}
+export declare class Pagination {
+  /** number of items per page */
+  num: number;
+  /** index of item that should begin the page */
+  start: number;
+  /** total number of items */
+  total: number;
+  /** Used as an accessible label (aria-label) for the next button
+   * @default "Next"
+   */
+  textLabelNext: string;
+  /** Used as an accessible label (aria-label) of the previous button
+   * @default "Previous"
+   */
+  textLabelPrevious: string;
+  /** The scale of the pagination */
+  scale: Scale;
+  el: HTMLCalcitePaginationElement;
+  /**
+   * Emitted whenever the selected page changes.
+   * @deprecated use calcitePaginationChange instead
+   */
+  calcitePaginationUpdate: EventEmitter<PaginationDetail>;
+  /**
+   * Emitted whenever the selected page changes.
+   * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/calcite-pagination.tsx#L18)
+   */
+  calcitePaginationChange: EventEmitter<PaginationDetail>;
+  /** Go to the next page of results */
+  nextPage(): Promise<void>;
+  /** Go to the previous page of results */
+  previousPage(): Promise<void>;
+  private getLastStart;
+  private previousClicked;
+  private nextClicked;
+  private showLeftEllipsis;
+  private showRightEllipsis;
+  private emitUpdate;
+  renderPages(): VNode[];
+  renderPage(start: number): VNode;
+  renderLeftEllipsis(): VNode;
+  renderRightEllipsis(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,132 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { HeadingLevel } from "../functional/Heading";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding custom content.
+ * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
+ * @slot header-actions-end - A slot for adding actions or content to the end side of the panel header.
+ * @slot header-content - A slot for adding custom content to the header.
+ * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a dropdown.
+ * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
+ * @slot footer-actions - A slot for adding buttons to the footer.
+ * @slot footer - A slot for adding custom content to the footer.
+ */
+export declare class Panel implements ConditionalSlotComponent, InteractiveComponent {
+  /**
+   * Hides the panel.
+   */
+  dismissed: boolean;
+  dismissedHandler(): void;
+  /**
+   * When provided, this method will be called before it is removed from the parent flow.
+   */
+  beforeBack?: () => Promise<void>;
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * Displays a close button in the trailing side of the header.
+   */
+  dismissible: boolean;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  /**
+   * Shows a back button in the header.
+   */
+  showBackButton: boolean;
+  /**
+   * 'Back' text string.
+   */
+  intlBack?: string;
+  /**
+   * Specifies the maximum height of the panel.
+   */
+  heightScale?: Scale;
+  /**
+   * This sets width of the panel.
+   */
+  widthScale?: Scale;
+  /**
+   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   */
+  loading: boolean;
+  /**
+   * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
+   */
+  intlClose?: string;
+  /**
+   * 'Options' text string for the actions menu.
+   */
+  intlOptions?: string;
+  /**
+   * Heading text.
+   */
+  heading?: string;
+  /**
+   * Summary text. A description displayed underneath the heading.
+   */
+  summary?: string;
+  /**
+   * Opens the action menu.
+   */
+  menuOpen: boolean;
+  componentDidRender(): void;
+  el: HTMLCalcitePanelElement;
+  backButtonEl: HTMLCalciteActionElement;
+  dismissButtonEl: HTMLCalciteActionElement;
+  containerEl: HTMLElement;
+  panelScrollEl: HTMLElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Emitted when the close button has been clicked.
+   */
+  calcitePanelDismissedChange: EventEmitter;
+  /**
+   * Emitted when the content has been scrolled.
+   */
+  calcitePanelScroll: EventEmitter;
+  /**
+   * Emitted when the back button has been clicked.
+   */
+  calcitePanelBackClick: EventEmitter;
+  setContainerRef: (node: HTMLElement) => void;
+  setDismissRef: (node: HTMLCalciteActionElement) => void;
+  setBackRef: (node: HTMLCalciteActionElement) => void;
+  panelKeyDownHandler: (event: KeyboardEvent) => void;
+  dismiss: () => void;
+  panelScrollHandler: () => void;
+  backButtonClick: () => void;
+  /** Sets focus on the component. */
+  setFocus(focusId?: "dismiss-button" | "back-button"): Promise<void>;
+  /** Scrolls panel content to a particular set of coordinates.
+   *
+   * ```
+   *   myCalcitePanel.scrollContentTo({
+   *     left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+   *     top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+   *     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+   *   });
+   * ```
+   */
+  scrollContentTo(options?: ScrollToOptions): Promise<void>;
+  renderBackButton(): VNode;
+  renderHeaderContent(): VNode;
+  /**
+   * Allows user to override the entire header-content node.
+   */
+  renderHeaderSlottedContent(): VNode;
+  renderHeaderStartActions(): VNode;
+  renderHeaderActionsEnd(): VNode;
+  renderMenu(): VNode;
+  renderHeaderNode(): VNode;
+  renderFooterNode(): VNode;
+  renderContent(): VNode;
+  renderFab(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,77 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ICON_TYPES } from "./resources";
+import { ListFocusId, ItemData } from "./shared-list-logic";
+import { HeadingLevel } from "../functional/Heading";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
+ * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
+ */
+export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement> implements InteractiveComponent {
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+   */
+  filterEnabled: boolean;
+  /**
+   * Placeholder text for the filter input field.
+   */
+  filterPlaceholder: string;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  /**
+   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   */
+  loading: boolean;
+  /**
+   * Multiple works similar to standard radio buttons and checkboxes.
+   * When true, a user can select multiple items at a time.
+   * When false, only a single item can be selected at a time
+   * and selecting a new item will deselect any other selected items.
+   */
+  multiple: boolean;
+  /**
+   * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+   */
+  selectionFollowsFocus: boolean;
+  selectedValues: Map<string, ItemElement>;
+  dataForFilter: ItemData;
+  items: ItemElement[];
+  lastSelectedItem: ItemElement;
+  mutationObserver: MutationObserver;
+  el: HTMLCalcitePickListElement;
+  emitCalciteListChange: () => void;
+  filterEl: HTMLCalciteFilterElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidRender(): void;
+  /**
+   * Emitted when any of the item selections have changed.
+   */
+  calciteListChange: EventEmitter<Map<string, HTMLCalcitePickListItemElement>>;
+  calciteListItemRemoveHandler(event: CustomEvent<void>): void;
+  calciteListItemChangeHandler(event: CustomEvent): void;
+  calciteListItemPropsChangeHandler(event: CustomEvent): void;
+  calciteListItemValueChangeHandler(event: CustomEvent): void;
+  calciteListFocusOutHandler(event: FocusEvent): void;
+  setUpItems(): void;
+  setUpFilter(): void;
+  setFilterEl: (el: HTMLCalciteFilterElement) => void;
+  deselectRemovedItems: any;
+  deselectSiblingItems: any;
+  selectSiblings: any;
+  handleFilter: any;
+  getItemData: any;
+  keyDownHandler: any;
+  /** Returns the currently selected items */
+  getSelectedItems(): Promise<Map<string, HTMLCalcitePickListItemElement>>;
+  /** Sets focus on the component. */
+  setFocus(focusId?: ListFocusId): Promise<void>;
+  getIconType(): ICON_TYPES;
+  render(): VNode;
+}

package/dist/types/components/pick-list/shared-list-logic.d.ts

@@ -0,0 +1,32 @@
+import { PickList } from "./pick-list";
+import { ValueList } from "../value-list/value-list";
+declare type Lists = PickList | ValueList;
+declare type ListItemElement<T> = T extends PickList ? HTMLCalcitePickListItemElement : HTMLCalciteValueListItemElement;
+declare type List<T> = T extends PickList ? PickList : ValueList;
+export declare type ListFocusId = "filter";
+export declare function mutationObserverCallback<T extends Lists>(this: List<T>): void;
+export declare function initialize<T extends Lists>(this: List<T>): void;
+export declare function initializeObserver<T extends Lists>(this: List<T>): void;
+export declare function cleanUpObserver<T extends Lists>(this: List<T>): void;
+export declare function calciteListItemChangeHandler<T extends Lists>(this: List<T>, event: CustomEvent): void;
+export declare function calciteListItemValueChangeHandler<T extends Lists>(this: List<T>, event: CustomEvent): void;
+export declare function calciteListFocusOutHandler<T extends Lists>(this: List<T>, event: FocusEvent): void;
+export declare function keyDownHandler<T extends Lists>(this: List<T>, event: KeyboardEvent): void;
+export declare function moveItemIndex<T extends Lists>(list: List<T>, item: ListItemElement<T>, direction: "up" | "down"): number;
+export declare function internalCalciteListChangeEvent<T extends Lists>(this: List<T>): void;
+export declare function removeItem<T extends Lists, U extends ListItemElement<T>>(this: List<T>, event: CustomEvent): void;
+export declare function setFocus<T extends Lists>(this: List<T>, focusId: ListFocusId): Promise<void>;
+export declare function setUpItems<T extends Lists>(this: List<T>, tagName: T extends PickList ? "calcite-pick-list-item" : "calcite-value-list-item"): void;
+export declare function setUpFilter<T extends Lists>(this: List<T>): void;
+export declare function deselectRemovedItems<T extends Lists>(this: List<T>): void;
+export declare function deselectSiblingItems<T extends Lists>(this: List<T>, item: ListItemElement<T>): void;
+export declare function selectSiblings<T extends Lists>(this: List<T>, item: ListItemElement<T>, deselect?: boolean): void;
+export declare function handleFilter<T extends Lists>(this: List<T>, event: CustomEvent): void;
+export declare type ItemData = {
+  label: string;
+  description: string;
+  metadata: Record<string, unknown>;
+  value: string;
+}[];
+export declare function getItemData<T extends Lists>(this: List<T>): ItemData;
+export {};

package/dist/types/components/pick-list/shared-list-render.d.ts

@@ -0,0 +1,18 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { JSXBase } from "../../stencil-public-runtime";
+import { handleFilter } from "./shared-list-logic";
+import DOMAttributes = JSXBase.DOMAttributes;
+interface ListProps extends DOMAttributes<any> {
+  disabled: boolean;
+  loading: boolean;
+  filterEnabled: boolean;
+  dataForFilter: any;
+  handleFilter: typeof handleFilter;
+  filterPlaceholder: string;
+  el: HTMLCalcitePickListElement | HTMLCalciteValueListElement;
+  setFilterEl: (el: HTMLCalciteFilterElement) => void;
+}
+export declare const List: FunctionalComponent<{
+  props: ListProps;
+} & DOMAttributes<any>>;
+export default List;

package/dist/types/components/pick-list-group/pick-list-group.d.ts

@@ -0,0 +1,21 @@
+import { VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/Heading";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding `calcite-pick-list-item` elements.
+ */
+export declare class PickListGroup implements ConditionalSlotComponent {
+  /**
+   * The title used for all nested `calcite-pick-list` rows.
+   *
+   */
+  groupTitle: string;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  el: HTMLCalcitePickListGroupElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+}

package/dist/types/components/pick-list-item/pick-list-item.d.ts

@@ -0,0 +1,108 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ICON_TYPES } from "../pick-list/resources";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot actions-end - a slot for adding actions or content to the end side of the item.
+ * @slot actions-start - a slot for adding actions or content to the start side of the item.
+ */
+export declare class PickListItem implements ConditionalSlotComponent, InteractiveComponent {
+  /**
+   * An optional description for this item.  This will appear below the label text.
+   */
+  description?: string;
+  descriptionWatchHandler(): void;
+  /**
+   * When true, the item cannot be clicked and is visually muted.
+   */
+  disabled: boolean;
+  /**
+   * When false, the item cannot be deselected by user interaction.
+   */
+  disableDeselect: boolean;
+  /**
+   * @internal When true, the item cannot be selected by user interaction.
+   */
+  nonInteractive: boolean;
+  /**
+   * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+   * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
+   */
+  icon?: ICON_TYPES | null;
+  /**
+   * The main label for this item. This will appear next to the icon.
+   */
+  label: string;
+  labelWatchHandler(): void;
+  /**
+   * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+   */
+  metadata?: Record<string, unknown>;
+  metadataWatchHandler(): void;
+  /**
+   * Set this to true to display a remove action that removes the item from the list.
+   */
+  removable?: boolean;
+  /**
+   * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+   */
+  selected: boolean;
+  selectedWatchHandler(): void;
+  /**
+   * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+   * @default "Remove"
+   */
+  intlRemove: string;
+  /**
+   * The item's associated value.
+   */
+  value: any;
+  valueWatchHandler(newValue: any, oldValue: any): void;
+  el: HTMLCalcitePickListItemElement;
+  private focusEl;
+  shiftPressed: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidRender(): void;
+  /**
+   * Emitted whenever the item is selected or unselected.
+   */
+  calciteListItemChange: EventEmitter<{
+    item: HTMLCalcitePickListItemElement;
+    value: any;
+    selected: boolean;
+    shiftPressed: boolean;
+  }>;
+  /**
+   * Emitted whenever the remove button is pressed.
+   */
+  calciteListItemRemove: EventEmitter<void>;
+  /**
+   * Emitted whenever the the item's label, description, value or metadata properties are modified.
+   * @internal
+   */
+  calciteListItemPropsChange: EventEmitter<void>;
+  /**
+   * Emitted whenever the the item's value property is modified.
+   * @internal
+   */
+  calciteListItemValueChange: EventEmitter<{
+    oldValue: any;
+    newValue: any;
+  }>;
+  /**
+   * Used to toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   */
+  toggleSelected(coerce?: boolean): Promise<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  pickListClickHandler: (event: MouseEvent) => void;
+  pickListKeyDownHandler: (event: KeyboardEvent) => void;
+  removeClickHandler: () => void;
+  renderIcon(): VNode;
+  renderRemoveAction(): VNode;
+  renderActionsStart(): VNode;
+  renderActionsEnd(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,107 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { PopperPlacement, OverlayPositioning, ComputedPlacement } from "../../utils/popper";
+import { StrictModifiers, Instance as Popper } from "@popperjs/core";
+import { HeadingLevel } from "../functional/Heading";
+/**
+ * @slot - A slot for adding custom content.
+ */
+export declare class Popover {
+  /**
+   * Display a close button within the Popover.
+   * @deprecated use dismissible instead.
+   */
+  closeButton: boolean;
+  /**
+   * Display a close button within the Popover.
+   */
+  dismissible: boolean;
+  /**
+   * Prevents flipping the popover's placement when it starts to overlap its reference element.
+   */
+  disableFlip: boolean;
+  /**
+   * Removes the caret pointer.
+   */
+  disablePointer: boolean;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
+  /**
+   * Heading text.
+   */
+  heading?: string;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  /** Accessible name for the component */
+  label: string;
+  /**
+   * Offset the position of the popover away from the reference element.
+   * @default 6
+   */
+  offsetDistance: number;
+  offsetDistanceOffsetHandler(): void;
+  /**
+   * Offset the position of the popover 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;
+  /** Text for close button.
+   * @default "Close"
+   */
+  intlClose: string;
+  el: HTMLCalcitePopoverElement;
+  effectiveReferenceElement: HTMLElement;
+  popper: Popper;
+  arrowEl: HTMLDivElement;
+  closeButtonEl: HTMLCalciteActionElement;
+  guid: string;
+  private activeTransitionProp;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  /** Fired when the popover is closed */
+  calcitePopoverClose: EventEmitter;
+  /** Fired when the popover is opened */
+  calcitePopoverOpen: EventEmitter;
+  /** Updates the position of the component. */
+  reposition(): Promise<void>;
+  /** Sets focus on the component. */
+  setFocus(focusId?: "close-button"): Promise<void>;
+  /** Toggles the popover's open property. */
+  toggle(value?: boolean): Promise<void>;
+  setUpReferenceElement: () => void;
+  getId: () => string;
+  setExpandedAttr: () => void;
+  addReferences: () => void;
+  removeReferences: () => void;
+  getReferenceElement(): HTMLElement;
+  getModifiers(): Partial<StrictModifiers>[];
+  createPopper(): void;
+  destroyPopper(): void;
+  hide: () => void;
+  transitionEnd: (event: TransitionEvent) => void;
+  renderCloseButton(): VNode;
+  renderHeader(): VNode;
+  render(): VNode;
+}

package/dist/types/components/popover/resources.d.ts

@@ -13,6 +13,7 @@ export declare const CSS: {
 export declare const TEXT: {
   close: string;
 };
+export declare const defaultPopoverPlacement = "auto";
 export declare const POPOVER_REFERENCE = "data-calcite-popover-reference";
 export declare const ARIA_CONTROLS = "aria-controls";
 export declare const ARIA_EXPANDED = "aria-expanded";

package/dist/types/components/popover-manager/popover-manager.d.ts

@@ -0,0 +1,19 @@
+import { VNode } from "../../stencil-public-runtime";
+/**
+ * @slot - A slot for adding elements that reference a 'calcite-popover' by the 'selector' property.
+ */
+export declare class PopoverManager {
+  el: HTMLCalcitePopoverManagerElement;
+  /**
+   * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
+   * @default `[data-calcite-popover-reference]`
+   */
+  selector: string;
+  /**
+   * Automatically closes any currently open popovers when clicking outside of a popover.
+   */
+  autoClose: boolean;
+  render(): VNode;
+  queryPopover: (composedPath: EventTarget[]) => HTMLCalcitePopoverElement;
+  closeOpenPopovers(event: Event): void;
+}

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

@@ -0,0 +1,15 @@
+import { VNode } from "../../stencil-public-runtime";
+export declare class Progress {
+  el: HTMLCalciteProgressElement;
+  /** Use indeterminate if finding actual progress value is impossible */
+  type: "indeterminate" | "determinate";
+  /** Fraction completed, in the range of 0 - 1.0 */
+  value: number;
+  /** Label for the progress indicator */
+  label: string;
+  /** Text to display for the progress indicator */
+  text: string;
+  /** For indeterminate progress bars, reverse the animation direction */
+  reversed: boolean;
+  render(): VNode;
+}