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

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

@@ -0,0 +1,112 @@
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ItemKeyboardEvent } from "./interfaces";
+import { ComputedPlacement, OverlayPositioning, MenuPlacement } from "../../utils/popper";
+import { StrictModifiers } from "@popperjs/core";
+import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
+ * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
+ */
+export declare class Dropdown implements InteractiveComponent {
+  el: HTMLCalciteDropdownElement;
+  /** Opens or closes the dropdown */
+  active: boolean;
+  activeHandler(): void;
+  /**
+   allow the dropdown to remain open after a selection is made
+   if the selection-mode of the selected item's containing group is "none", the dropdown will always close
+   */
+  disableCloseOnSelect: boolean;
+  /** is the dropdown disabled  */
+  disabled: boolean;
+  handleDisabledChange(value: boolean): void;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
+  /**
+   specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
+   this value does not include groupTitles passed to calcite-dropdown-group
+  */
+  maxItems: number;
+  maxItemsHandler(): 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 dropdown will be positioned relative to the button.
+   * @default "bottom-leading"
+   */
+  placement: MenuPlacement;
+  placementHandler(): void;
+  /** specify the scale of dropdown, defaults to m */
+  scale: Scale;
+  /**
+   * **read-only** The currently selected items
+   *
+   * @readonly
+   */
+  selectedItems: HTMLCalciteDropdownItemElement[];
+  /** specify whether the dropdown is opened by hover or click of a trigger element */
+  type: "hover" | "click";
+  /** specify the width of dropdown, defaults to m */
+  width: Scale;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  /** Updates the position of the component. */
+  reposition(): Promise<void>;
+  /** fires when a dropdown item has been selected or deselected **/
+  calciteDropdownSelect: EventEmitter<void>;
+  /** fires when a dropdown has been opened **/
+  calciteDropdownOpen: EventEmitter<void>;
+  /** fires when a dropdown has been closed **/
+  calciteDropdownClose: EventEmitter<void>;
+  closeCalciteDropdownOnClick(e: Event): void;
+  closeCalciteDropdownOnEvent(): void;
+  closeCalciteDropdownOnOpenEvent(e: Event): void;
+  mouseEnterHandler(): void;
+  mouseLeaveHandler(): void;
+  calciteDropdownItemKeyEvent(e: CustomEvent<ItemKeyboardEvent>): void;
+  handleItemSelect(event: CustomEvent): void;
+  filteredFlipPlacements: ComputedPlacement[];
+  private items;
+  private groups;
+  /** trigger elements */
+  private triggers;
+  private popper;
+  private menuEl;
+  private referenceEl;
+  private activeTransitionProp;
+  private scrollerEl;
+  mutationObserver: MutationObserver;
+  resizeObserver: ResizeObserver;
+  setFilteredPlacements: () => void;
+  updateTriggers: (event: Event) => void;
+  updateItems: () => void;
+  updateGroups: (event: Event) => void;
+  setMaxScrollerHeight: () => void;
+  setScrollerEl: (scrollerEl: HTMLDivElement) => void;
+  transitionEnd: (event: TransitionEvent) => void;
+  setReferenceEl: (el: HTMLDivElement) => void;
+  setMenuEl: (el: HTMLDivElement) => void;
+  getModifiers(): Partial<StrictModifiers>[];
+  createPopper(): void;
+  destroyPopper(): void;
+  private keyDownHandler;
+  private updateSelectedItems;
+  private getMaxScrollerHeight;
+  private closeCalciteDropdown;
+  private focusOnFirstActiveOrFirstItem;
+  private focusFirstItem;
+  private focusLastItem;
+  private focusNextItem;
+  private focusPrevItem;
+  private itemIndex;
+  private getFocusableElement;
+  private toggleOpenEnd;
+  private openCalciteDropdown;
+}

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

@@ -0,0 +1,32 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { SelectionMode } from "./interfaces";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-dropdown-item`s.
+ */
+export declare class DropdownGroup {
+  el: HTMLCalciteDropdownGroupElement;
+  /** optionally set a group title for display */
+  groupTitle?: string;
+  /** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
+   none (no active items), defaults to single */
+  selectionMode: SelectionMode;
+  /**
+   * Specifies the size of the action.
+   */
+  scale: Scale;
+  /**
+   * @internal
+   */
+  calciteDropdownItemChange: EventEmitter;
+  componentWillLoad(): void;
+  render(): VNode;
+  updateActiveItemOnChange(event: CustomEvent): void;
+  /** position of group within a dropdown */
+  private groupPosition;
+  /** the requested group */
+  private requestedDropdownGroup;
+  /** the requested item */
+  private requestedDropdownItem;
+  private getGroupPosition;
+}

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

@@ -0,0 +1,54 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ItemKeyboardEvent } from "../dropdown/interfaces";
+import { FlipContext } from "../interfaces";
+/**
+ * @slot - A slot for adding text.
+ */
+export declare class DropdownItem {
+  el: HTMLCalciteDropdownItemElement;
+  /** Indicates whether the item is active. */
+  active: boolean;
+  /** flip the icon(s) in rtl */
+  iconFlipRtl?: FlipContext;
+  /** optionally pass an icon to display at the start of an item - accepts calcite ui icon names  */
+  iconStart?: string;
+  /** optionally pass an icon to display at the end of an item - accepts calcite ui icon names  */
+  iconEnd?: string;
+  /** optionally pass a href - used to determine if the component should render as anchor */
+  href?: string;
+  /** Applies to the aria-label attribute on the button or hyperlink */
+  label?: string;
+  /** The rel attribute to apply to the hyperlink */
+  rel?: string;
+  /** The target attribute to apply to the hyperlink */
+  target?: string;
+  /**
+   * @internal
+   */
+  calciteDropdownItemSelect: EventEmitter;
+  /** @internal */
+  calciteDropdownItemKeyEvent: EventEmitter<ItemKeyboardEvent>;
+  /** @internal */
+  calciteDropdownCloseRequest: EventEmitter;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  componentWillLoad(): void;
+  connectedCallback(): void;
+  render(): VNode;
+  onClick(): void;
+  keyDownHandler(e: KeyboardEvent): void;
+  updateActiveItemOnChange(event: CustomEvent): void;
+  /** id of containing group */
+  private parentDropdownGroupEl;
+  /** requested group */
+  private requestedDropdownGroup;
+  /** requested item */
+  private requestedDropdownItem;
+  /** what selection mode is the parent dropdown group in */
+  private selectionMode;
+  /** if href is requested, track the rendered child link*/
+  private childLink;
+  private initialize;
+  private determineActiveItem;
+  private emitRequestedItem;
+}

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

@@ -0,0 +1,49 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Appearance, Scale } from "../interfaces";
+import { ButtonColor } from "../button/interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Fab implements InteractiveComponent {
+  /**
+   * Used to set the button's appearance. Default is outline.
+   */
+  appearance: Extract<"solid" | "outline", Appearance>;
+  /**
+   * Used to set the button's color. Default is light.
+   */
+  color: ButtonColor;
+  /**
+   * 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/.
+   * @default "plus"
+   */
+  icon?: string;
+  /**
+   * Label of the FAB, exposed on hover when textEnabled is false. 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 fab.
+   */
+  scale: Scale;
+  /**
+   * Text that accompanies the FAB icon.
+   */
+  text?: string;
+  /**
+   * Indicates whether the text is displayed.
+   */
+  textEnabled: boolean;
+  el: HTMLCalciteFabElement;
+  private buttonEl;
+  componentDidRender(): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  render(): VNode;
+}

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

@@ -0,0 +1,59 @@
+/// <reference types="lodash" />
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Filter implements InteractiveComponent {
+  /**
+   * The items to filter through. The filter uses this as the starting point, and returns items
+   * that contain the string entered in the input, using a partial match and recursive search.
+   *
+   * This property is required.
+   */
+  items: object[];
+  watchItemsHandler(): void;
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * The resulting items after filtering.
+   *
+   * @readonly
+   */
+  filteredItems: object[];
+  /**
+   * A text label that will appear on the clear button.
+   */
+  intlClear?: string;
+  /**
+   * A text label that will appear next to the input field.
+   */
+  intlLabel?: string;
+  /**
+   * Placeholder text for the input element's placeholder attribute
+   */
+  placeholder?: string;
+  /** specify the scale of filter, defaults to m */
+  scale: Scale;
+  /**
+   * Filter value.
+   */
+  value: string;
+  valueHandler(value: string): void;
+  el: HTMLCalciteFilterElement;
+  textInput: HTMLCalciteInputElement;
+  componentDidRender(): void;
+  /**
+   * This event fires when the filter text changes.
+   */
+  calciteFilterChange: EventEmitter<void>;
+  componentWillLoad(): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  filter: import("lodash").DebouncedFunc<(value: string, emit?: any) => void>;
+  inputHandler: (event: CustomEvent) => void;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  clear: () => void;
+  updateFiltered(filtered: any[], emit?: boolean): void;
+  render(): VNode;
+}

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

@@ -1,7 +1,6 @@
 export declare const CSS: {
   container: string;
   searchIcon: string;
-  clearButton: string;
 };
 export declare const TEXT: {
   filterLabel: string;
@@ -11,3 +10,4 @@ export declare const ICONS: {
   search: string;
   close: string;
 };
+export declare const DEBOUNCE_TIMEOUT = 250;

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

@@ -0,0 +1,22 @@
+import { VNode } from "../../stencil-public-runtime";
+import { FlowDirection } from "./interfaces";
+/**
+ * @slot - A slot for adding `calcite-panel`s to the flow.
+ */
+export declare class Flow {
+  /**
+   * Removes the currently active `calcite-panel`.
+   */
+  back(): Promise<HTMLCalcitePanelElement>;
+  el: HTMLCalciteFlowElement;
+  panelCount: number;
+  flowDirection: FlowDirection;
+  panels: HTMLCalcitePanelElement[];
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  handleCalcitePanelBackClick(): void;
+  getFlowDirection: (oldPanelCount: number, newPanelCount: number) => FlowDirection | null;
+  updateFlowProps: () => void;
+  panelItemMutationObserver: MutationObserver;
+  render(): VNode;
+}

package/dist/types/components/functional/ExpandToggle.d.ts

@@ -0,0 +1,19 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { Position, Scale } from "../interfaces";
+interface ExpandToggleProps {
+  expanded: boolean;
+  intlExpand: string;
+  intlCollapse: string;
+  el: HTMLElement;
+  position: Position;
+  tooltip?: HTMLCalciteTooltipElement;
+  toggle: () => void;
+  ref?: (el: HTMLElement) => void;
+  scale?: Scale;
+}
+export declare function toggleChildActionText({ parent, expanded }: {
+  parent: HTMLElement;
+  expanded: boolean;
+}): void;
+export declare const ExpandToggle: FunctionalComponent<ExpandToggleProps>;
+export {};

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

@@ -0,0 +1,28 @@
+import { VNode } from "../../stencil-public-runtime";
+import { ColorStop, DataSeries } from "./interfaces";
+export declare class Graph {
+  el: HTMLCalciteGraphElement;
+  /**
+   * Array of tuples describing a single data point ([x, y])
+   * These data points should be sorted by x-axis value
+   */
+  data: DataSeries;
+  /**
+   * Array of values describing a single color stop ([offset, color, opacity])
+   * These color stops should be sorted by offset value
+   */
+  colorStops: ColorStop[];
+  /** Start of highlight color if highlighting range */
+  highlightMin: number;
+  /** End of highlight color if highlighting range */
+  highlightMax: number;
+  /** Lowest point of the range */
+  min: number;
+  /** Highest point of the range */
+  max: number;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  private graphId;
+  private resizeObserver;
+}

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

@@ -0,0 +1,22 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+export declare class Handle {
+  /**
+   * @internal - stores the activated state of the drag handle.
+   */
+  activated: boolean;
+  /**
+   * Value for the button title attribute
+   */
+  textTitle: string;
+  el: HTMLCalciteHandleElement;
+  handleButton: HTMLElement;
+  /**
+   * Emitted when the the handle is activated and the up or down arrow key is pressed.
+   */
+  calciteHandleNudge: EventEmitter;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  handleKeyDown: (event: KeyboardEvent) => void;
+  handleBlur: () => void;
+  render(): VNode;
+}

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

@@ -0,0 +1,32 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+export declare class Icon {
+  el: HTMLCalciteIconElement;
+  /**
+   * 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;
+  /**
+   * When true, the icon will be flipped when the element direction is 'rtl'.
+   */
+  flipRtl: boolean;
+  /**
+   * Icon scale.
+   */
+  scale: Scale;
+  /**
+   * The icon label.
+   *
+   * It is recommended to set this value if your icon is semantic.
+   */
+  textLabel: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  render(): VNode;
+  private intersectionObserver;
+  private pathData;
+  private visible;
+  private loadIconPathData;
+  private waitUntilVisible;
+}

package/dist/types/components/inline-editable/inline-editable.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding a `calcite-input`.
+ */
+export declare class InlineEditable implements InteractiveComponent, LabelableComponent {
+  el: HTMLCalciteInlineEditableElement;
+  /** specify whether editing can be enabled */
+  disabled: boolean;
+  disabledWatcher(disabled: boolean): void;
+  /** specify whether the wrapped input element is editable, defaults to false */
+  editingEnabled: boolean;
+  editingEnabledWatcher(newValue: boolean, oldValue: boolean): void;
+  /** specify whether the confirm button should display a loading state, defaults to false */
+  loading: boolean;
+  /** specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */
+  controls: boolean;
+  /** specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
+   * @default "Click to edit"
+   */
+  intlEnableEditing: string;
+  /** specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
+   * @default "Cancel"
+   */
+  intlCancelEditing: string;
+  /** specify text to be user for the confirm changes button's aria-label, defaults to `Save`
+   * @default "Save"
+   */
+  intlConfirmChanges: string;
+  /** specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale */
+  scale?: Scale;
+  /** when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. */
+  afterConfirm?: () => Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidRender(): void;
+  render(): VNode;
+  /**
+   * Emitted when the cancel button gets clicked.
+   */
+  calciteInlineEditableEditCancel: EventEmitter<void>;
+  /**
+   * Emitted when the check button gets clicked.
+   */
+  calciteInlineEditableEditConfirm: EventEmitter<void>;
+  /**
+   * @internal
+   */
+  calciteInlineEditableEnableEditingChange: EventEmitter;
+  blurHandler(): void;
+  private inputElement;
+  private valuePriorToEditing;
+  private shouldEmitCancel;
+  private enableEditingButton;
+  private cancelEditingButton;
+  private confirmEditingButton;
+  labelEl: HTMLCalciteLabelElement;
+  mutationObserver: MutationObserver;
+  setFocus(): Promise<void>;
+  mutationObserverCallback(): void;
+  onLabelClick(): void;
+  updateSlottedInput(): void;
+  private get shouldShowControls();
+  private enableEditing;
+  private disableEditing;
+  private cancelEditing;
+  private escapeKeyHandler;
+  private cancelEditingHandler;
+  private enableEditingHandler;
+  private confirmChangesHandler;
+}