@esri/calcite-components 1.0.0-beta.73 → 1.0.0-beta.74

package/dist/types/components/calcite-value-list/calcite-value-list.d.ts

@@ -0,0 +1,89 @@
+import Sortable from "sortablejs";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ICON_TYPES } from "./resources";
+import { ListFocusId, ItemData } from "../calcite-pick-list/shared-list-logic";
+/**
+ * @slot - A slot for adding `calcite-value-list-item` 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 CalciteValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> {
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * When true, the items will be sortable via drag and drop.
+   */
+  dragEnabled: 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;
+  /**
+   * The list's group identifier.
+   *
+   * To drag elements from one list into another, both lists must have the same group value.
+   */
+  group?: string;
+  /**
+   * 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;
+  sortable: Sortable;
+  el: HTMLCalciteValueListElement;
+  emitCalciteListChange: () => void;
+  filterEl: HTMLCalciteFilterElement;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  /**
+   * Emitted when any of the item selections have changed.
+   */
+  calciteListChange: EventEmitter<Map<string, HTMLCalciteValueListItemElement>>;
+  /**
+   * Emitted when the order of the list has changed.
+   */
+  calciteListOrderChange: EventEmitter<any[]>;
+  calciteListItemRemoveHandler(event: CustomEvent<void>): void;
+  calciteListItemChangeHandler(event: CustomEvent): void;
+  calciteListItemPropsChangeHandler(event: CustomEvent): void;
+  calciteListItemValueChangeHandler(event: CustomEvent): void;
+  getItems(): ItemElement[];
+  setUpItems(): void;
+  setUpFilter(): void;
+  setFilterEl: (el: HTMLCalciteFilterElement) => void;
+  setUpDragAndDrop(): void;
+  cleanUpDragAndDrop(): void;
+  deselectRemovedItems: any;
+  deselectSiblingItems: any;
+  selectSiblings: any;
+  handleFilter: any;
+  getItemData: any;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  /** Returns the currently selected items */
+  getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>>;
+  /** Sets focus on the component. */
+  setFocus(focusId?: ListFocusId): Promise<void>;
+  getIconType(): ICON_TYPES | null;
+  render(): VNode;
+}

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

@@ -0,0 +1,76 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ICON_TYPES } from "../calcite-pick-list/resources";
+/**
+ * @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 CalciteValueListItem {
+  /**
+   * An optional description for this item. Will appear below the label text.
+   */
+  description?: string;
+  /**
+   * When true, the item cannot be clicked and is visually muted
+   */
+  disabled?: boolean;
+  /**
+   * @internal When false, the item cannot be deselected by user interaction.
+   */
+  disableDeselect: boolean;
+  /**
+   * When true, prevents the content of the list item from user interaction.
+   */
+  nonInteractive: boolean;
+  /**
+   * @internal - stores the activated state of the drag handle.
+   */
+  handleActivated?: 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. Appears next to the icon.
+   */
+  label: string;
+  /**
+   * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+   */
+  metadata?: Record<string, unknown>;
+  /**
+   * 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;
+  /**
+   * The item's associated value.
+   */
+  value: any;
+  el: HTMLCalciteValueListItemElement;
+  pickListItem: HTMLCalcitePickListItemElement;
+  guid: string;
+  /**
+   * 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>;
+  /**
+   * Emitted whenever the remove button is pressed.
+   */
+  calciteListItemRemove: EventEmitter<void>;
+  calciteListItemChangeHandler(event: CustomEvent): void;
+  getPickListRef: (el: HTMLCalcitePickListItemElement) => HTMLCalcitePickListItemElement;
+  handleKeyDown: (event: KeyboardEvent) => void;
+  handleBlur: () => void;
+  handleSelectChange: (event: CustomEvent) => void;
+  renderActionsEnd(): VNode;
+  renderActionsStart(): VNode;
+  renderHandle(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,19 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { Position, Scale } from "../interfaces";
+interface CalciteExpandToggleProps {
+  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 CalciteExpandToggle: FunctionalComponent<CalciteExpandToggleProps>;
+export {};

package/dist/types/components.d.ts

@@ -9,7 +9,7 @@ import { AccordionAppearance } from "./components/calcite-accordion/interfaces";
 import { Alignment, Appearance, Columns, FlipContext, Layout, Position, Scale, Status, Width } from "./components/interfaces";
 import { Placement } from "@popperjs/core";
 import { OverlayPositioning, PopperPlacement } from "./utils/popper";
-import { AlertDuration, StatusColor } from "./components/calcite-alert/interfaces";
+import { AlertDuration, AlertPlacement, StatusColor } from "./components/calcite-alert/interfaces";
 import { HeadingLevel } from "./components/functional/CalciteHeading";
 import { BlockSectionToggleDisplay } from "./components/calcite-block-section/interfaces";
 import { ButtonAlignment, ButtonAppearance, ButtonColor, DropdownIconType } from "./components/calcite-button/interfaces";
@@ -300,7 +300,11 @@ export namespace Components {
          */
         "label": string;
         /**
-          * specify the scale of the button, defaults to m
+          * specify the placement of the alert
+         */
+        "placement": AlertPlacement;
+        /**
+          * specify the scale of the alert, defaults to m
          */
         "scale": Scale;
         /**
@@ -4376,7 +4380,11 @@ declare namespace LocalJSX {
          */
         "onCalciteAlertOpen"?: (event: CustomEvent<any>) => void;
         /**
-          * specify the scale of the button, defaults to m
+          * specify the placement of the alert
+         */
+        "placement"?: AlertPlacement;
+        /**
+          * specify the scale of the alert, defaults to m
          */
         "scale"?: Scale;
     }
@@ -5725,13 +5733,19 @@ declare namespace LocalJSX {
         "name"?: string;
         /**
           * Trigger calcite date change when a user changes the date.
+          * @deprecated use `calciteInputDatePickerChange` instead.
          */
         "onCalciteDatePickerChange"?: (event: CustomEvent<Date>) => void;
         /**
           * Trigger calcite date change when a user changes the date range.
           * @see  [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)
+          * @deprecated use `calciteInputDatePickerChange` instead.
          */
         "onCalciteDatePickerRangeChange"?: (event: CustomEvent<DateRangeChange>) => void;
+        /**
+          * This event fires when the input date picker value changes.
+         */
+        "onCalciteInputDatePickerChange"?: (event: CustomEvent<void>) => void;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */

package/dist/types/preact.d.ts

@@ -160,9 +160,10 @@ declare module "preact/src/jsx" {
         "oncalciteInputChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-input-date-picker": Omit<JSX.CalciteInputDatePicker, "onCalciteDatePickerChange" | "onCalciteDatePickerRangeChange" | "onCalciteInputDatePickerOpen" | "onCalciteInputDatePickerClose"> & JSXInternal.HTMLAttributes<HTMLCalciteInputDatePickerElement> & {
+      "calcite-input-date-picker": Omit<JSX.CalciteInputDatePicker, "onCalciteDatePickerChange" | "onCalciteDatePickerRangeChange" | "onCalciteInputDatePickerChange" | "onCalciteInputDatePickerOpen" | "onCalciteInputDatePickerClose"> & JSXInternal.HTMLAttributes<HTMLCalciteInputDatePickerElement> & {
         "oncalciteDatePickerChange"?: (event: CustomEvent<any>) => void;
         "oncalciteDatePickerRangeChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInputDatePickerChange"?: (event: CustomEvent<any>) => void;
         "oncalciteInputDatePickerOpen"?: (event: CustomEvent<any>) => void;
         "oncalciteInputDatePickerClose"?: (event: CustomEvent<any>) => void;
       }

package/dist/types/utils/dom.d.ts

@@ -41,10 +41,12 @@ interface GetSlottedOptions {
   direct?: boolean;
   selector?: string;
 }
-export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string | string[], options: GetSlottedOptions & {
+export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string | string[] | (GetSlottedOptions & {
+  all: true;
+}), options: GetSlottedOptions & {
   all: true;
 }): T[];
-export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string | string[], options?: GetSlottedOptions): T | null;
+export declare function getSlotted<T extends Element = Element>(element: Element, slotName?: string | string[] | GetSlottedOptions, options?: GetSlottedOptions): T | null;
 export declare function filterDirectChildren<T extends Element>(el: Element, selector: string): T[];
 export declare function setRequestedIcon(iconObject: Record<string, string>, iconValue: string | boolean, matchedValue: string): string;
 export declare function intersects(rect1: DOMRect, rect2: DOMRect): boolean;

package/dist/types/utils/label.d.ts

@@ -0,0 +1,39 @@
+export interface LabelableComponent {
+  /**
+   * When true, disabled prevents interaction.
+   */
+  disabled: boolean;
+  /**
+   * The host element.
+   */
+  readonly el: HTMLElement;
+  /**
+   * Text label.
+   */
+  label?: string;
+  /**
+   * The label this component is associated with.
+   */
+  labelEl: HTMLCalciteLabelElement;
+  /**
+   * Hook for components to provide custom label click behavior.
+   */
+  onLabelClick: (event: CustomEvent<any>) => void;
+}
+/**
+ * Exported for testing purposes only
+ * @internal
+ */
+export declare const labelClickEvent = "calciteInternalLabelClick";
+/**
+ * Helper to set up label interactions on connectedCallback.
+ */
+export declare function connectLabel(component: LabelableComponent): void;
+/**
+ * Helper to tear down label interactions on disconnectedCallback.
+ */
+export declare function disconnectLabel(component: LabelableComponent): void;
+/**
+ * Helper to get the label text from a component.
+ */
+export declare function getLabelText(component: LabelableComponent): string;