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

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

@@ -0,0 +1,73 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Alignment, Appearance, Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding a `calcite-icon`.
+ */
+export declare class CalciteAction {
+  /**
+   * 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;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  renderTextContainer(): VNode;
+  renderIconContainer(): VNode;
+  render(): VNode;
+  calciteActionClickHandler: () => void;
+}

package/dist/types/components/calcite-action-bar/calcite-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 CalciteActionBar implements ConditionalSlotComponent {
+  /**
+   * When set to true, the expand-toggling behavior will be disabled.
+   */
+  expandDisabled: boolean;
+  expandHandler(expandDisabled: boolean): 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/calcite-action-group/calcite-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 CalciteActionGroup 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/calcite-action-menu/calcite-action-menu.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { VNode } from "../../stencil-public-runtime";
+import { PopperPlacement, OverlayPositioning } from "../../utils/popper";
+import { Placement } from "@popperjs/core";
+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 CalciteActionMenu 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?: Placement[];
+  /**
+   *  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/calcite-action-pad/calcite-action-pad.d.ts

@@ -0,0 +1,55 @@
+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 CalciteActionPad implements ConditionalSlotComponent {
+  /**
+   * When set to true, the expand-toggling behavior will be disabled.
+   */
+  expandDisabled: boolean;
+  expandHandler(expandDisabled: boolean): void;
+  /**
+   * 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/calcite-alert/calcite-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 CalciteAlert {
+  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/calcite-alert/interfaces.d.ts

@@ -1,5 +1,6 @@
 export declare type StatusColor = "blue" | "green" | "red" | "yellow";
 export declare type AlertDuration = "fast" | "medium" | "slow";
+export declare type AlertPlacement = "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start";
 export declare enum StatusIcons {
   green = "checkCircle",
   yellow = "exclamationMarkTriangle",

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

@@ -0,0 +1,26 @@
+import { Scale } from "../interfaces";
+export declare class CalciteAvatar {
+  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/calcite-block/calcite-block.d.ts

@@ -0,0 +1,76 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/CalciteHeading";
+import { Status } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @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 CalciteBlock implements ConditionalSlotComponent {
+  /**
+   * 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;
+  el: HTMLCalciteBlockElement;
+  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/calcite-block-section/calcite-block-section.d.ts

@@ -0,0 +1,43 @@
+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 CalciteBlockSection {
+  /**
+   * 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;
+  /**
+   * Emitted when the header has been clicked.
+   */
+  calciteBlockSectionToggle: EventEmitter;
+  handleHeaderKeyDown: (event: KeyboardEvent) => void;
+  toggleSection: () => void;
+  renderStatusIcon(): VNode[];
+  render(): VNode;
+}

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

@@ -0,0 +1,81 @@
+import "form-request-submit-polyfill/form-request-submit-polyfill";
+import { VNode } from "../../stencil-public-runtime";
+import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
+import { FlipContext, Scale, Width } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
+/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
+/** @slot - A slot for adding text. */
+export declare class CalciteButton implements LabelableComponent {
+  el: HTMLCalciteButtonElement;
+  /** optionally specify alignment of button elements. */
+  alignment?: ButtonAlignment;
+  /** specify the appearance style of the button, defaults to solid. */
+  appearance: ButtonAppearance;
+  /** Applies to the aria-label attribute on the button or hyperlink */
+  label?: string;
+  /** specify the color of the button, defaults to blue */
+  color: ButtonColor;
+  /** is the button disabled  */
+  disabled: boolean;
+  /** optionally pass a href - used to determine if the component should render as a button or an anchor */
+  href?: string;
+  hrefHandler(href: string): void;
+  /** optionally pass an icon to display at the end of a button - 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 button - accepts calcite ui icon names  */
+  iconStart?: string;
+  /** string to override English loading text
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /** optionally add a calcite-loader component to the button, disabling interaction.  */
+  loading: boolean;
+  /** The name attribute to apply to the button */
+  name?: string;
+  /** The rel attribute to apply to the hyperlink */
+  rel?: string;
+  /**
+   * The form ID to associate with the component
+   *
+   * @deprecated – this property is no longer needed if placed inside a form.
+   */
+  form?: string;
+  /** optionally add a round style to the button  */
+  round: boolean;
+  /** specify the scale of the button, defaults to m */
+  scale: Scale;
+  /** is the button a child of a calcite-split-button */
+  splitChild?: "primary" | "secondary" | false;
+  /** The target attribute to apply to the hyperlink */
+  target?: string;
+  /** The type attribute to apply to the button */
+  type?: string;
+  /** specify the width of the button, defaults to auto */
+  width: Width;
+  loadingChanged(newValue: boolean, oldValue: boolean): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  render(): VNode;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  formEl: HTMLFormElement;
+  labelEl: HTMLCalciteLabelElement;
+  /** watches for changing text content **/
+  private mutationObserver;
+  /** the rendered child element */
+  private childEl?;
+  /** the node type of the rendered child element */
+  childElType?: "a" | "button";
+  /** determine if there is slotted content for styling purposes */
+  private hasContent;
+  /** determine if loader present for styling purposes */
+  private hasLoader;
+  private updateHasContent;
+  private setupTextContentObserver;
+  onLabelClick(): void;
+  private handleClick;
+}