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

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

@@ -0,0 +1,106 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ICON_TYPES } from "../calcite-pick-list/resources";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @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 CalcitePickListItem implements ConditionalSlotComponent {
+  /**
+   * 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/calcite-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;
+  /**
+   * 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/calcite-popover/calcite-popover.d.ts

@@ -0,0 +1,107 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { PopperPlacement, OverlayPositioning } from "../../utils/popper";
+import { StrictModifiers, Placement, Instance as Popper } from "@popperjs/core";
+import { HeadingLevel } from "../functional/CalciteHeading";
+/**
+ * @slot - A slot for adding custom content.
+ */
+export declare class CalcitePopover {
+  /**
+   * 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?: Placement[];
+  /**
+   * 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/calcite-popover-manager/calcite-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 CalcitePopoverManager {
+  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;
+  getRelatedPopover: (element: HTMLElement) => HTMLCalcitePopoverElement;
+  closeOpenPopovers(event: Event): void;
+}

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

@@ -0,0 +1,15 @@
+import { VNode } from "../../stencil-public-runtime";
+export declare class CalciteProgress {
+  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;
+}

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

@@ -0,0 +1,92 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { CheckableFormCompoment } from "../../utils/form";
+export declare class CalciteRadioButton implements LabelableComponent, CheckableFormCompoment {
+  el: HTMLCalciteRadioButtonElement;
+  /** The checked state of the radio button. */
+  checked: boolean;
+  checkedChanged(newChecked: boolean): void;
+  /** The disabled state of the radio button. */
+  disabled: boolean;
+  /**
+   * The focused state of the radio button.
+   * @internal
+   */
+  focused: boolean;
+  /** The id attribute of the radio button.  When omitted, a globally unique identifier is used. */
+  guid: string;
+  /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
+  hidden: boolean;
+  /**
+   * The hovered state of the radio button.
+   * @internal
+   */
+  hovered: boolean;
+  /**
+   * The label of the radio input
+   * @internal
+   */
+  label?: string;
+  /** The name of the radio button. `name` is passed as a property automatically from `calcite-radio-button-group`. */
+  name: string;
+  nameChanged(): void;
+  /** Requires that a value is selected for the radio button group before the parent form will submit. */
+  required: boolean;
+  /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
+  scale: Scale;
+  /** The value of the radio button. */
+  value: any;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteRadioButton["value"];
+  rootNode: HTMLElement;
+  containerEl: HTMLDivElement;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  selectItem: (items: HTMLCalciteRadioButtonElement[], selectedIndex: number) => void;
+  queryButtons: () => HTMLCalciteRadioButtonElement[];
+  isDefaultSelectable: () => boolean;
+  check: () => void;
+  private clickHandler;
+  onLabelClick(event: CustomEvent): void;
+  private checkLastRadioButton;
+  /** @internal */
+  emitCheckedChange(): Promise<void>;
+  private setContainerEl;
+  private uncheckAllRadioButtonsInGroup;
+  private uncheckOtherRadioButtonsInGroup;
+  private getTabIndex;
+  /**
+   * Fires when the radio button is blurred.
+   * @internal
+   */
+  calciteInternalRadioButtonBlur: EventEmitter;
+  /**
+   * Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.
+   * Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event
+   * directly on the element, but instead either attach it to a node that contains all of the radio buttons in the group
+   * or use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group.
+   */
+  calciteRadioButtonChange: EventEmitter;
+  /**
+   * Fires when the checked property changes.  This is an internal event used for styling purposes only.
+   * Use calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms.
+   * @internal
+   */
+  calciteInternalRadioButtonCheckedChange: EventEmitter;
+  /**
+   * Fires when the radio button is focused.
+   * @internal
+   */
+  calciteInternalRadioButtonFocus: EventEmitter;
+  mouseenter(): void;
+  mouseleave(): void;
+  handleKeyDown: (event: KeyboardEvent) => void;
+  private onContainerBlur;
+  private onContainerFocus;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+}

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

@@ -0,0 +1,34 @@
+import { VNode, EventEmitter } from "../../stencil-public-runtime";
+import { Layout, Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-radio-button`s.
+ */
+export declare class CalciteRadioButtonGroup {
+  el: HTMLCalciteRadioButtonGroupElement;
+  /** The disabled state of the radio button group. */
+  disabled: boolean;
+  onDisabledChange(): void;
+  /** The radio button group's hidden status.  When a radio button group is hidden none of its options are focusable or checkable. */
+  hidden: boolean;
+  onHiddenChange(): void;
+  /** The layout direction of the radio buttons in a group. */
+  layout: Layout;
+  onLayoutChange(): void;
+  /** The name of the radio button group. `name` must be unique to other radio button group instances. */
+  name: string;
+  /** Requires that a value is selected for the radio button group before the parent form will submit. */
+  required: boolean;
+  /** The scale (size) of the radio button group. */
+  scale: Scale;
+  onScaleChange(): void;
+  mutationObserver: MutationObserver;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private passPropsToRadioButtons;
+  /**
+   * Emitted when the radio button group has changed.
+   */
+  calciteRadioButtonGroupChange: EventEmitter;
+  radioButtonChangeHandler(event: CustomEvent): void;
+  render(): VNode;
+}

package/dist/types/components/calcite-radio-group/calcite-radio-group.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Layout, Scale, Width } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+import { RadioAppearance } from "./interfaces";
+/**
+ * @slot - A slot for adding `calcite-radio-group-item`s.
+ */
+export declare class CalciteRadioGroup implements LabelableComponent, FormComponent {
+  el: HTMLCalciteRadioGroupElement;
+  /** specify the appearance style of the radio group, defaults to solid. */
+  appearance: RadioAppearance;
+  /** is the radio group disabled  */
+  disabled: boolean;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
+  /** specify the layout of the radio group, defaults to horizontal */
+  layout: Layout;
+  /**
+   * The group's name. Gets submitted with the form.
+   */
+  name: string;
+  /** The scale of the radio group */
+  scale: Scale;
+  /** The value of the selectedItem */
+  value: string;
+  valueHandler(value: string): void;
+  /**
+   * The group's selected item.
+   */
+  selectedItem: HTMLCalciteRadioGroupItemElement;
+  protected handleSelectedItemChange<T extends HTMLCalciteRadioGroupItemElement>(newItem: T, oldItem: T): void;
+  /** specify the width of the group, defaults to auto */
+  width: Extract<"auto" | "full", Width>;
+  componentWillLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  protected handleClick: (event: MouseEvent) => void;
+  protected handleSelected(event: Event): void;
+  protected handleKeyDown(event: KeyboardEvent): void;
+  /** Fired when the selected option changes, event detail is the new value */
+  calciteRadioGroupChange: EventEmitter<string>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteRadioGroup["value"];
+  onLabelClick(): void;
+  private getItems;
+  private selectItem;
+}

package/dist/types/components/calcite-radio-group-item/calcite-radio-group-item.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Position } from "../interfaces";
+export declare class CalciteRadioGroupItem {
+  el: HTMLCalciteRadioGroupItemElement;
+  /** Indicates whether the control is checked. */
+  checked: boolean;
+  protected handleCheckedChange(): void;
+  /** optionally pass an icon to display - accepts Calcite UI icon names  */
+  icon?: string;
+  /** flip the icon in rtl */
+  iconFlipRtl: boolean;
+  /** optionally used with icon, select where to position the icon */
+  iconPosition?: Position;
+  /**
+   * The control's value.
+   */
+  value: any | null;
+  render(): VNode;
+  /**
+   * Fires when the item has been selected.
+   * @internal
+   */
+  calciteRadioGroupItemChange: EventEmitter;
+}

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

@@ -0,0 +1,60 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+export declare class CalciteRating implements LabelableComponent, FormComponent {
+  el: HTMLCalciteRatingElement;
+  /** specify the scale of the component, defaults to m */
+  scale: Scale;
+  /** the value of the rating component */
+  value: number;
+  /** is the rating component in a selectable mode */
+  readOnly: boolean;
+  /** is the rating component in a selectable mode */
+  disabled: boolean;
+  /** Show average and count data summary chip (if available) */
+  showChip: boolean;
+  /** optionally pass a number of previous ratings to display */
+  count?: number;
+  /** optionally pass a cumulative average rating to display */
+  average?: number;
+  /** The name of the rating */
+  name: string;
+  /** Localized string for "Rating" (used for aria label)
+   * @default "Rating"
+   */
+  intlRating?: string;
+  /** Localized string for labelling each star, `${num}` in the string will be replaced by the number
+   * @default "Stars: ${num}"
+   */
+  intlStars?: string;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Fires when the rating value has changed.
+   */
+  calciteRatingChange: EventEmitter<{
+    value: number;
+  }>;
+  blurHandler(): void;
+  renderStars(): VNode[];
+  render(): any;
+  onLabelClick(): void;
+  private updateValue;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteRating["value"];
+  hoverValue: number;
+  focusValue: number;
+  hasFocus: boolean;
+  private guid;
+  private inputFocusRef;
+}

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

@@ -0,0 +1,17 @@
+import { VNode } from "../../stencil-public-runtime";
+/**
+ * @slot - A slot for adding custom content, primarily loading information.
+ */
+export declare class CalciteScrim {
+  /** string to override English loading text
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /**
+   * Determines if the component will have the loader overlay.
+   * Otherwise, will render opaque disabled state.
+   */
+  loading: boolean;
+  el: HTMLCalciteScrimElement;
+  render(): VNode;
+}

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

@@ -0,0 +1,75 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale, Width } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+/**
+ * @slot - A slot for adding `calcite-option`s.
+ */
+export declare class CalciteSelect implements LabelableComponent, FormComponent {
+  /**
+   * When true, it prevents the option from being selected.
+   */
+  disabled: boolean;
+  /**
+   * The component's label. This is required for accessibility purposes.
+   *
+   */
+  label: string;
+  /**
+   * The select's name. Gets submitted with the form.
+   */
+  name: string;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
+  /**
+   * The component scale.
+   */
+  scale: Scale;
+  /** The value of the selectedOption */
+  value: string;
+  valueHandler(value: string): void;
+  /**
+   * The currently selected option.
+   *
+   * @readonly
+   */
+  selectedOption: HTMLCalciteOptionElement;
+  selectedOptionHandler(selectedOption: HTMLCalciteOptionElement): void;
+  /**
+   * The component width.
+   */
+  width: Width;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteSelect["value"];
+  el: HTMLCalciteSelectElement;
+  private componentToNativeEl;
+  private mutationObserver;
+  private selectEl;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidLoad(): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /**
+   * This event will fire whenever the selected option changes.
+   */
+  calciteSelectChange: EventEmitter<void>;
+  private handleInternalSelectChange;
+  protected handleOptionOrGroupChange(event: CustomEvent): void;
+  onLabelClick(): void;
+  private updateNativeElement;
+  private populateInternalSelect;
+  private clearInternalSelect;
+  private storeSelectRef;
+  private selectFromNativeOption;
+  private toNativeElement;
+  private deselectAllExcept;
+  private emitChangeEvent;
+  renderChevron(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,24 @@
+import { VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
+ * @slot header - A slot for adding header content. This content will be positioned at the top of the shell.
+ * @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the shell.
+ * @slot primary-panel - A slot for adding the leading `calcite-shell-panel`.
+ * @slot contextual-panel - A slot for adding the trailing `calcite-shell-panel`.
+ * @slot center-row - A slot for adding custom content in the center row.
+ */
+export declare class CalciteShell implements ConditionalSlotComponent {
+  /**
+   * Positions the center content behind any calcite-shell-panels.
+   */
+  contentBehind: boolean;
+  el: HTMLCalciteShellElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  renderHeader(): VNode;
+  renderContent(): VNode[];
+  renderFooter(): VNode;
+  renderMain(): VNode;
+  render(): VNode;
+}

package/dist/types/components/calcite-shell-center-row/calcite-shell-center-row.d.ts

@@ -0,0 +1,25 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Position, Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding content to the shell panel.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
+ */
+export declare class CalciteShellCenterRow implements ConditionalSlotComponent {
+  /**
+   * This property makes the content area appear like a "floating" panel.
+   */
+  detached: boolean;
+  /**
+   * Specifies the maxiumum height of the row.
+   */
+  heightScale: Scale;
+  /**
+   * Arranges the component depending on the elements 'dir' property.
+   */
+  position: Position;
+  el: HTMLCalciteShellCenterRowElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+}