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

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

@@ -0,0 +1,54 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+/**
+ * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
+ */
+export declare class AccordionItem {
+  el: HTMLCalciteAccordionItemElement;
+  /** Indicates whether the item is active. */
+  active: boolean;
+  /** pass a title for the accordion item */
+  itemTitle?: string;
+  /** pass a title for the accordion item */
+  itemSubtitle?: string;
+  /** optionally pass an icon to display - accepts Calcite UI icon names  */
+  icon?: string;
+  /**
+   * @internal
+   */
+  calciteAccordionItemKeyEvent: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteAccordionItemSelect: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteAccordionItemClose: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteAccordionItemRegister: EventEmitter;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  render(): VNode;
+  keyDownHandler(e: KeyboardEvent): void;
+  updateActiveItemOnChange(event: CustomEvent): void;
+  private guid;
+  /** the containing accordion element */
+  private parent;
+  /** position within parent */
+  private itemPosition;
+  /** the latest requested item */
+  private requestedAccordionItem;
+  /** what selection mode is the parent accordion in */
+  private selectionMode;
+  /** what icon position does the parent accordion specify */
+  private iconPosition;
+  /** what icon type does the parent accordion specify */
+  private iconType;
+  /** handle clicks on item header */
+  private itemHeaderClickHandler;
+  private determineActiveItem;
+  private emitRequestedItem;
+  private getItemPosition;
+}

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

@@ -0,0 +1,75 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Alignment, Appearance, Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding a `calcite-icon`.
+ */
+export declare class Action implements InteractiveComponent {
+  /**
+   * Indicates whether the action is highlighted.
+   */
+  active: boolean;
+  /**
+   * Optionally specify the horizontal alignment of button elements with text content.
+   */
+  alignment?: Alignment;
+  /** Specify the appearance style of the action, defaults to solid. */
+  appearance: Extract<"solid" | "clear", Appearance>;
+  /**
+   * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+   */
+  compact: boolean;
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+   */
+  icon?: string;
+  /**
+   * Indicates unread changes.
+   */
+  indicator: boolean;
+  /** string to override English loading text
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /**
+   * The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.
+   */
+  label?: string;
+  /**
+   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   */
+  loading: boolean;
+  /**
+   * Specifies the size of the action.
+   */
+  scale: Scale;
+  /**
+   * Text that accompanies the action icon.
+   */
+  text: string;
+  /**
+   * Indicates whether the text is displayed.
+   */
+  textEnabled: boolean;
+  /**
+   * Emitted when the action has been clicked.
+   * @deprecated use onClick instead.
+   */
+  calciteActionClick: EventEmitter;
+  el: HTMLCalciteActionElement;
+  buttonEl: HTMLButtonElement;
+  mutationObserver: MutationObserver;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidRender(): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  renderTextContainer(): VNode;
+  renderIconContainer(): VNode;
+  render(): VNode;
+  calciteActionClickHandler: () => void;
+}

package/dist/types/components/action-bar/action-bar.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="lodash" />
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Position, Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding `calcite-action`s that will appear at the top of the action bar.
+ * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.
+ * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
+ */
+export declare class ActionBar implements ConditionalSlotComponent {
+  /**
+   * When set to true, the expand-toggling behavior will be disabled.
+   */
+  expandDisabled: boolean;
+  expandHandler(): void;
+  /**
+   * Indicates whether widget is expanded.
+   */
+  expanded: boolean;
+  expandedHandler(expanded: boolean): void;
+  /**
+   * Updates the label of the expand icon when the component is not expanded.
+   */
+  intlExpand?: string;
+  /**
+   * Updates the label of the collapse icon when the component is expanded.
+   */
+  intlCollapse?: string;
+  /**
+   * Disables automatically overflowing actions that won't fit into menus.
+   */
+  overflowActionsDisabled: boolean;
+  overflowDisabledHandler(overflowActionsDisabled: boolean): void;
+  /**
+   * Arranges the component depending on the elements 'dir' property.
+   */
+  position: Position;
+  /**
+   * Specifies the size of the expand action.
+   */
+  scale: Scale;
+  /**
+   * Emitted when expanded has been toggled.
+   */
+  calciteActionBarToggle: EventEmitter;
+  el: HTMLCalciteActionBarElement;
+  mutationObserver: MutationObserver;
+  resizeObserver: ResizeObserver;
+  expandToggleEl: HTMLCalciteActionElement;
+  componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Overflows actions that won't fit into menus.
+   * @internal
+   */
+  overflowActions(): Promise<void>;
+  /** Sets focus on the component. */
+  setFocus(focusId?: "expand-toggle"): Promise<void>;
+  actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
+  resizeHandlerEntries: (entries: ResizeObserverEntry[]) => void;
+  resizeHandler: (entry: ResizeObserverEntry) => void;
+  resize: import("lodash").DebouncedFunc<(height: number) => void>;
+  conditionallyOverflowActions: () => void;
+  toggleExpand: () => void;
+  setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
+  renderBottomActionGroup(): VNode;
+  render(): VNode;
+}

package/dist/types/components/action-group/action-group.d.ts

@@ -0,0 +1,42 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Columns, Layout, Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding a group of `calcite-action`s.
+ * @slot menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
+ * @slot menu-tooltip - a slot for adding an tooltip for the menu.
+ */
+export declare class ActionGroup implements ConditionalSlotComponent {
+  /**
+   * Indicates whether widget is expanded.
+   */
+  expanded: boolean;
+  expandedHandler(): void;
+  /**
+   * Indicates the horizontal, vertical, or grid layout of the component.
+   */
+  layout: Layout;
+  /**
+   * Indicates number of columns.
+   */
+  columns?: Columns;
+  /**
+   * Text string for the actions menu.
+   */
+  intlMore?: string;
+  /**
+   * Opens the action menu.
+   */
+  menuOpen: boolean;
+  /**
+   * Specifies the size of the action-menu.
+   */
+  scale: Scale;
+  el: HTMLCalciteActionGroupElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  renderTooltip(): VNode;
+  renderMenu(): VNode;
+  render(): VNode;
+  setMenuOpen: (event: CustomEvent<boolean>) => void;
+}

package/dist/types/components/action-menu/action-menu.d.ts

@@ -0,0 +1,82 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { VNode } from "../../stencil-public-runtime";
+import { PopperPlacement, OverlayPositioning, ComputedPlacement } from "../../utils/popper";
+import { Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding `calcite-action`s.
+ * @slot trigger - A slot for adding a `calcite-action` to trigger opening the menu.
+ * @slot tooltip - A slot for adding an tooltip for the menu.
+ */
+export declare class ActionMenu implements ConditionalSlotComponent {
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Indicates whether widget is expanded.
+   */
+  expanded: boolean;
+  expandedHandler(): void;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
+  /**
+   *  Text string for the actions menu.
+   */
+  label: string;
+  /**
+   * Opens the action menu.
+   */
+  open: boolean;
+  openHandler(open: boolean): 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;
+  /**
+   * Specifies the size of the menu trigger action.
+   */
+  scale: Scale;
+  /**
+   * Emitted when the open property has changed.
+   */
+  calciteActionMenuOpenChange: EventEmitter;
+  closeCalciteActionMenuOnClick(event: Event): void;
+  el: HTMLCalciteActionMenuElement;
+  menuButtonEl: HTMLCalciteActionElement;
+  defaultMenuButtonEl: HTMLCalciteActionElement;
+  menuEl: HTMLDivElement;
+  actionElements: HTMLCalciteActionElement[];
+  mutationObserver: MutationObserver;
+  guid: string;
+  menuId: string;
+  menuButtonId: string;
+  activeMenuItemIndex: number;
+  activeMenuItemIndexHandler(): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  connectMenuButtonEl: () => void;
+  disconnectMenuButtonEl: () => void;
+  setDefaultMenuButtonEl: (el: HTMLCalciteActionElement) => void;
+  renderMenuButton(): VNode;
+  renderMenuItems(): VNode;
+  render(): VNode;
+  handleCalciteActionClick: () => void;
+  menuButtonClick: () => void;
+  setTooltipReferenceElement: () => void;
+  updateAction: (action: HTMLCalciteActionElement, index: number) => void;
+  updateActions: (actions: HTMLCalciteActionElement[]) => void;
+  getAssignedElements(): HTMLElement[];
+  getActions: () => void;
+  isValidKey(key: string, supportedKeys: string[]): boolean;
+  menuButtonKeyUp: (event: KeyboardEvent) => void;
+  menuButtonKeyDown: (event: KeyboardEvent) => void;
+  menuActionsContainerKeyDown: (event: KeyboardEvent) => void;
+  menuActionsContainerKeyUp: (event: KeyboardEvent) => void;
+  handleActionNavigation: (key: string, actions: HTMLCalciteActionElement[]) => void;
+  toggleOpenEnd: () => void;
+  toggleOpen: (value?: boolean) => void;
+}

package/dist/types/components/action-pad/action-pad.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Layout, Position, Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding `calcite-action`s to the action pad.
+ * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
+ */
+export declare class ActionPad implements ConditionalSlotComponent {
+  /**
+   * When set to true, the expand-toggling behavior will be disabled.
+   */
+  expandDisabled: boolean;
+  /**
+   * Indicates whether widget is expanded.
+   */
+  expanded: boolean;
+  expandedHandler(expanded: boolean): void;
+  /**
+   * Indicates the horizontal or vertical layout of the component.
+   */
+  layout: Layout;
+  /**
+   * Updates the label of the expand icon when the component is not expanded.
+   */
+  intlExpand?: string;
+  /**
+   * Updates the label of the collapse icon when the component is expanded.
+   */
+  intlCollapse?: string;
+  /**
+   * Arranges the component depending on the elements 'dir' property.
+   */
+  position: Position;
+  /**
+   * Specifies the size of the expand action.
+   */
+  scale: Scale;
+  /**
+   * Emitted when expanded has been toggled.
+   */
+  calciteActionPadToggle: EventEmitter;
+  el: HTMLCalciteActionPadElement;
+  expandToggleEl: HTMLCalciteActionElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  /** Sets focus on the component. */
+  setFocus(focusId?: "expand-toggle"): Promise<void>;
+  actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
+  toggleExpand: () => void;
+  setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
+  renderBottomActionGroup(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,83 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { AlertDuration, AlertPlacement, StatusColor } from "./interfaces";
+/** Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
+ * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
+ */
+/**
+ * @slot title - Title of the alert (optional)
+ * @slot message - Main text of the alert
+ * @slot link - Optional action to take from the alert (undo, try again, link to page, etc.)
+ */
+export declare class Alert {
+  el: HTMLCalciteAlertElement;
+  /** Is the alert currently active or not */
+  active: boolean;
+  watchActive(): void;
+  /** Close the alert automatically (recommended for passive, non-blocking alerts) */
+  autoDismiss: boolean;
+  /** Duration of autoDismiss (only used with `autoDismiss`) */
+  autoDismissDuration: AlertDuration;
+  /** Color for the alert (will apply to top border and icon) */
+  color: StatusColor;
+  /** when used as a boolean set to true, show a default recommended icon. You can
+   * also pass a calcite-ui-icon name to this prop to display a requested icon */
+  icon: string | boolean;
+  /** string to override English close text
+   * @default "Close"
+   */
+  intlClose: string;
+  /** Accessible name for the component */
+  label: string;
+  /** specify the placement of the alert */
+  placement: AlertPlacement;
+  /** specify the scale of the alert, defaults to m */
+  scale: Scale;
+  updateRequestedIcon(): void;
+  updateDuration(): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  /** Fired when an alert is closed */
+  calciteAlertClose: EventEmitter;
+  /** Fired when an alert is opened */
+  calciteAlertOpen: EventEmitter;
+  /**
+   * Fired to sync queue when opened or closed
+   *
+   * @internal
+   */
+  calciteAlertSync: EventEmitter;
+  /**
+   * Fired when an alert is added to dom - used to receive initial queue
+   *
+   * @internal
+   */
+  calciteAlertRegister: EventEmitter;
+  alertSync(event: CustomEvent): void;
+  alertRegister(): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** the list of queued alerts */
+  queue: HTMLCalciteAlertElement[];
+  /** the count of queued alerts */
+  queueLength: number;
+  /** is the alert queued */
+  queued: boolean;
+  /** the close button element */
+  private closeButton?;
+  private autoDismissTimeoutId;
+  private queueTimeout;
+  private trackTimer;
+  /** the computed icon to render */
+  requestedIcon?: string;
+  private activeTransitionProp;
+  /** determine which alert is active */
+  private determineActiveAlert;
+  /** close and emit the closed alert and the queue */
+  private closeAlert;
+  transitionEnd: (event: TransitionEvent) => void;
+  /** emit the opened alert and the queue */
+  private openAlert;
+}

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

@@ -0,0 +1,26 @@
+import { Scale } from "../interfaces";
+export declare class Avatar {
+  el: HTMLCalciteAvatarElement;
+  /** specify the scale of the avatar, defaults to m */
+  scale: Scale;
+  /** src to an image (remember to add a token if the user is private) */
+  thumbnail: string;
+  /** full name of the user */
+  fullName: string;
+  /** user name */
+  username: string;
+  /** unique id for user */
+  userId: string;
+  render(): any;
+  /** True if thumnail fails to load */
+  error: boolean;
+  private determineContent;
+  /**
+   * Generate a valid background color that is consistent and unique to this user
+   */
+  private generateFillColor;
+  /**
+   * Use fullname or username to generate initials
+   */
+  private generateInitials;
+}

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

@@ -0,0 +1,79 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/Heading";
+import { Status } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding content to the block.
+ * @slot icon - A slot for adding a leading header icon.
+ * @slot control - A slot for adding a single HTML input element in a header.
+ * @slot header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
+ */
+export declare class Block implements ConditionalSlotComponent, InteractiveComponent {
+  /**
+   * When true, this block will be collapsible.
+   */
+  collapsible: boolean;
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * When true, displays a drag handle in the header.
+   */
+  dragHandle: boolean;
+  /**
+   * Block heading.
+   */
+  heading: string;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  /**
+   * Tooltip used for the toggle when expanded.
+   */
+  intlCollapse?: string;
+  /**
+   * Tooltip used for the toggle when collapsed.
+   */
+  intlExpand?: string;
+  /** string to override English loading text
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /** Text string used for the actions menu
+   * @default "Options"
+   */
+  intlOptions?: string;
+  /**
+   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   */
+  loading: boolean;
+  /**
+   * When true, the block's content will be displayed.
+   */
+  open: boolean;
+  /**
+   * Block status. Updates or adds icon to show related icon and color.
+   */
+  status?: Status;
+  /**
+   * Block summary.
+   */
+  summary: string;
+  componentDidRender(): void;
+  el: HTMLCalciteBlockElement;
+  private guid;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Emitted when the header has been clicked.
+   */
+  calciteBlockToggle: EventEmitter;
+  onHeaderClick: () => void;
+  renderScrim(): VNode[];
+  renderIcon(): VNode[];
+  renderTitle(): VNode;
+  render(): VNode;
+}

package/dist/types/components/block-section/block-section.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { BlockSectionToggleDisplay } from "./interfaces";
+import { Status } from "../interfaces";
+/**
+ * @slot - A slot for adding content to the block section.
+ */
+export declare class BlockSection {
+  /**
+   * Tooltip used for the toggle when expanded.
+   */
+  intlCollapse?: string;
+  /**
+   * Tooltip used for the toggle when collapsed.
+   */
+  intlExpand?: string;
+  /**
+   * When true, the block's section content will be displayed.
+   */
+  open: boolean;
+  /**
+   * BlockSection status. Adds indicator to show valid or invalid status.
+   */
+  status?: Status;
+  /**
+   * Text displayed in the button.
+   */
+  text: string;
+  /**
+   * This property determines the look of the section toggle.
+   * If the value is "switch", a toggle-switch will be displayed.
+   * If the value is "button", a clickable header is displayed.
+   */
+  toggleDisplay: BlockSectionToggleDisplay;
+  el: HTMLCalciteBlockSectionElement;
+  private guid;
+  /**
+   * Emitted when the header has been clicked.
+   */
+  calciteBlockSectionToggle: EventEmitter;
+  handleHeaderKeyDown: (event: KeyboardEvent) => void;
+  toggleSection: () => void;
+  renderStatusIcon(): VNode[];
+  render(): VNode;
+}