@esri/calcite-components 1.5.0-next.32 → 1.5.0-next.33

package/dist/extras/vscode-data.json

@@ -3763,6 +3763,10 @@
           "name": "disabled",
           "description": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
+        {
+          "name": "drag-enabled",
+          "description": "When `true`, `calcite-list-item`s are sortable via a draggable button."
+        },
         {
           "name": "filter-enabled",
           "description": "When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s."
@@ -3775,6 +3779,10 @@
           "name": "filter-text",
           "description": "Text for the component's filter input field."
         },
+        {
+          "name": "group",
+          "description": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
+        },
         {
           "name": "label",
           "description": "Specifies an accessible name for the component."

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.33
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.33
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.33
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.33
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/handle/assets/handle/t9n/index.d.ts

@@ -1,3 +1,7 @@
 export type HandleMessages = {
   dragHandle: string;
+  dragHandleActive: string;
+  dragHandleChange: string;
+  dragHandleCommit: string;
+  dragHandleIdle: string;
 };

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

@@ -2,12 +2,13 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { LoadableComponent } from "../../utils/loadable";
 import { T9nComponent } from "../../utils/t9n";
 import { HandleMessages } from "./assets/handle/t9n";
-import { HandleNudge } from "./interfaces";
+import { HandleChange, HandleNudge } from "./interfaces";
 export declare class Handle implements LoadableComponent, T9nComponent {
   /**
    * @internal
    */
   activated: boolean;
+  handleAriaTextChange(): void;
   /**
    * Value for the button title attribute
    */
@@ -18,6 +19,24 @@ export declare class Handle implements LoadableComponent, T9nComponent {
    * @internal
    */
   messages: HandleMessages;
+  /**
+   *
+   *
+   * @internal
+   */
+  setPosition: number;
+  /**
+   *
+   *
+   * @internal
+   */
+  setSize: number;
+  /**
+   *
+   *
+   * @internal
+   */
+  label: string;
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -36,8 +55,13 @@ export declare class Handle implements LoadableComponent, T9nComponent {
    * Emitted when the handle is activated and the up or down arrow key is pressed.
    */
   calciteHandleNudge: EventEmitter<HandleNudge>;
+  /**
+   * Emitted when the handle is activated or deactivated.
+   */
+  calciteInternalHandleChange: EventEmitter<HandleChange>;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  getAriaText(type: "label" | "live"): string;
   handleKeyDown: (event: KeyboardEvent) => void;
   handleBlur: () => void;
   render(): VNode;

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

@@ -1,3 +1,7 @@
 export interface HandleNudge {
   direction: "up" | "down";
 }
+
+export interface HandleChange {
+  message: string;
+}

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

@@ -1,9 +1,12 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import Sortable, { SortableEvent } from "sortablejs";
 import { InteractiveComponent } from "../../utils/interactive";
 import { SelectionMode } from "../interfaces";
 import { ItemData } from "../list-item/interfaces";
 import { SelectionAppearance } from "./resources";
+import { DragEvent, SortableComponent } from "../../utils/sortableComponent";
 import { LoadableComponent } from "../../utils/loadable";
+import { HandleNudge } from "../handle/interfaces";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
@@ -11,16 +14,33 @@ import { LoadableComponent } from "../../utils/loadable";
  * @slot filter-actions-start - A slot for adding actionable `calcite-action` elements before the filter component.
  * @slot filter-actions-end - A slot for adding actionable `calcite-action` elements after the filter component.
  */
-export declare class List implements InteractiveComponent, LoadableComponent {
+export declare class List implements InteractiveComponent, LoadableComponent, SortableComponent {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
+  /**
+   * When provided, the method will be called to determine whether the element can  move from the list.
+   */
+  canPull: (event: DragEvent) => boolean;
+  /**
+   * When provided, the method will be called to determine whether the element can be added from another list.
+   */
+  canPut: (event: DragEvent) => boolean;
+  /**
+   * When `true`, `calcite-list-item`s are sortable via a draggable button.
+   */
+  dragEnabled: boolean;
+  /**
+   * 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`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s.
    */
   filterEnabled: boolean;
-  handleFilterEnabledChange(): void;
   /**
    * The currently filtered `calcite-list-item`s.
    *
@@ -70,7 +90,7 @@ export declare class List implements InteractiveComponent, LoadableComponent {
    * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border).
    */
   selectionAppearance: SelectionAppearance;
-  handleSelectionAppearanceChange(): void;
+  handleListItemChange(): void;
   /**
    * Emits when any of the list item selections have changed.
    */
@@ -79,27 +99,49 @@ export declare class List implements InteractiveComponent, LoadableComponent {
    * Emits when the component's filter has changed.
    */
   calciteListFilter: EventEmitter<void>;
+  /**
+   * Emitted when the order of the list has changed.
+   */
+  calciteListOrderChange: EventEmitter<DragEvent>;
+  /**
+   * Emitted when the default slot has changes in order to notify parent lists.
+   */
+  calciteInternalListDefaultSlotChange: EventEmitter<DragEvent>;
   handleCalciteInternalFocusPreviousItem(event: CustomEvent): void;
   handleCalciteInternalListItemActive(event: CustomEvent): void;
   handleCalciteListItemSelect(): void;
+  handleCalciteInternalHandleChange(event: CustomEvent): void;
+  handleCalciteHandleNudge(event: CustomEvent<HandleNudge>): void;
   handleCalciteInternalListItemSelect(event: CustomEvent): void;
   handleCalciteInternalListItemChange(event: CustomEvent): void;
+  handleCalciteInternalListItemGroupDefaultSlotChange(event: CustomEvent): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
   componentDidRender(): void;
   componentDidLoad(): void;
   el: HTMLCalciteListElement;
-  listItems: HTMLCalciteListItemElement[];
-  enabledListItems: HTMLCalciteListItemElement[];
-  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
+  assistiveText: string;
   dataForFilter: ItemData;
-  hasFilterActionsStart: boolean;
-  hasFilterActionsEnd: boolean;
+  dragSelector: string;
+  enabledListItems: HTMLCalciteListItemElement[];
   filterEl: HTMLCalciteFilterElement;
+  handleSelector: string;
+  hasFilterActionsEnd: boolean;
+  hasFilterActionsStart: boolean;
+  listItems: HTMLCalciteListItemElement[];
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
+  parentListEl: HTMLCalciteListElement;
+  sortable: Sortable;
   /** Sets focus on the component's first focusable element. */
   setFocus(): Promise<void>;
   render(): VNode;
+  private connectObserver;
+  private disconnectObserver;
+  private setUpSorting;
+  onDragStart(): void;
+  onDragEnd(): void;
+  onDragSort(event: SortableEvent): void;
   private handleDefaultSlotChange;
   private handleFilterActionsStartSlotChange;
   private handleFilterActionsEndSlotChange;
@@ -117,4 +159,5 @@ export declare class List implements InteractiveComponent, LoadableComponent {
   private focusRow;
   private isNavigable;
   private handleListKeydown;
+  handleNudgeEvent(event: CustomEvent<HandleNudge>): void;
 }

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

@@ -5,6 +5,7 @@ export declare const CSS: {
   stack: string;
   tableContainer: string;
   sticky: string;
+  assistiveText: string;
 };
 export declare const debounceTimeout = 0;
 export type SelectionAppearance = "border" | "icon";

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

@@ -36,6 +36,12 @@ export declare class ListItem implements InteractiveComponent, LoadableComponent
    */
   disabled: boolean;
   handleDisabledChange(): void;
+  /**
+   * When `true`, the component displays a draggable button.
+   *
+   * @internal
+   */
+  dragHandle: boolean;
   /**
    * The label text of the component. Displays above the description text.
    */
@@ -120,6 +126,7 @@ export declare class ListItem implements InteractiveComponent, LoadableComponent
    * @internal
    */
   calciteInternalListItemChange: EventEmitter<void>;
+  handleCalciteInternalListDefaultSlotChanges(event: CustomEvent): void;
   el: HTMLCalciteListItemElement;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
@@ -137,6 +144,7 @@ export declare class ListItem implements InteractiveComponent, LoadableComponent
   contentEl: HTMLTableCellElement;
   actionsStartEl: HTMLTableCellElement;
   actionsEndEl: HTMLTableCellElement;
+  defaultSlotEl: HTMLSlotElement;
   connectedCallback(): void;
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
@@ -145,6 +153,7 @@ export declare class ListItem implements InteractiveComponent, LoadableComponent
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   renderSelected(): VNode;
+  renderDragHandle(): VNode;
   renderOpen(): VNode;
   renderActionsStart(): VNode;
   renderActionsEnd(): VNode;
@@ -162,6 +171,7 @@ export declare class ListItem implements InteractiveComponent, LoadableComponent
   handleContentStartSlotChange: (event: Event) => void;
   handleContentEndSlotChange: (event: Event) => void;
   setSelectionDefaults(): void;
+  handleOpenableChange(slotEl: HTMLSlotElement): void;
   handleDefaultSlotChange: (event: Event) => void;
   toggleOpen: () => void;
   itemClicked: (event: Event) => void;

package/dist/types/components/list-item/resources.d.ts

@@ -17,6 +17,7 @@ export declare const CSS: {
   actionsEnd: string;
   selectionContainer: string;
   openContainer: string;
+  dragContainer: string;
 };
 export declare const SLOTS: {
   actionsStart: string;
@@ -25,7 +26,7 @@ export declare const SLOTS: {
   contentEnd: string;
   actionsEnd: string;
 };
-export declare const MAX_COLUMNS = 5;
+export declare const MAX_COLUMNS = 0;
 export declare const ICONS: {
   selectedMultiple: string;
   selectedSingle: string;

package/dist/types/components/list-item/utils.d.ts

@@ -1,3 +1,3 @@
-export declare function getListItemChildren(event: Event): HTMLCalciteListItemElement[];
+export declare function getListItemChildren(slotEl: HTMLSlotElement): HTMLCalciteListItemElement[];
 export declare function updateListItemChildren(listItemChildren: HTMLCalciteListItemElement[]): void;
 export declare function getDepth(element: HTMLElement, includeGroup?: boolean): number;

package/dist/types/components/list-item-group/list-item-group.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from "../../stencil-public-runtime";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
@@ -13,10 +13,15 @@ export declare class ListItemGroup implements InteractiveComponent {
    *
    */
   heading: string;
+  /**
+   * Emitted when the default slot has changes in order to notify parent lists.
+   */
+  calciteInternalListItemGroupDefaultSlotChange: EventEmitter<DragEvent>;
   connectedCallback(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
   el: HTMLCalciteListItemGroupElement;
   visualLevel: number;
   render(): VNode;
+  private handleDefaultSlotChange;
 }

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

@@ -65,6 +65,7 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
   containerEl: HTMLElement;
   panelScrollEl: HTMLElement;
   resizeObserver: ResizeObserver;
+  hasDefaultContent: boolean;
   hasStartActions: boolean;
   hasEndActions: boolean;
   hasMenuItems: boolean;
@@ -91,6 +92,7 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
   panelKeyDownHandler: (event: KeyboardEvent) => void;
   close: () => void;
   panelScrollHandler: () => void;
+  handleDefaultSlotChange: (event: Event) => void;
   handleHeaderActionsStartSlotChange: (event: Event) => void;
   handleHeaderActionsEndSlotChange: (event: Event) => void;
   handleHeaderMenuActionsSlotChange: (event: Event) => void;

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

@@ -3,6 +3,7 @@ export declare const CSS: {
   backButton: string;
   container: string;
   header: string;
+  bottomSeparator: string;
   heading: string;
   summary: string;
   description: string;
@@ -12,7 +13,6 @@ export declare const CSS: {
   headerActionsStart: string;
   contentWrapper: string;
   contentContainer: string;
-  contentHeight: string;
   fabContainer: string;
   footer: string;
 };

package/dist/types/components/sortable-list/sortable-list.d.ts

@@ -3,11 +3,19 @@ import Sortable from "sortablejs";
 import { InteractiveComponent } from "../../utils/interactive";
 import { HandleNudge } from "../handle/interfaces";
 import { Layout } from "../interfaces";
-import { SortableComponent } from "../../utils/sortableComponent";
+import { DragEvent, SortableComponent } from "../../utils/sortableComponent";
 /**
  * @slot - A slot for adding sortable items.
  */
 export declare class SortableList implements InteractiveComponent, SortableComponent {
+  /**
+   * When provided, the method will be called to determine whether the element can  move from the list.
+   */
+  canPull: (event: DragEvent) => boolean;
+  /**
+   * When provided, the method will be called to determine whether the element can be added from another list.
+   */
+  canPut: (event: DragEvent) => boolean;
   /**
    * Specifies which items inside the element should be draggable.
    */
@@ -38,6 +46,7 @@ export declare class SortableList implements InteractiveComponent, SortableCompo
   items: Element[];
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   sortable: Sortable;
+  dragEnabled: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
@@ -46,6 +55,9 @@ export declare class SortableList implements InteractiveComponent, SortableCompo
    */
   calciteListOrderChange: EventEmitter<void>;
   calciteHandleNudgeNextHandler(event: CustomEvent<HandleNudge>): void;
+  onDragStart(): void;
+  onDragEnd(): void;
+  onDragSort(): void;
   handleNudgeEvent(event: CustomEvent<HandleNudge>): void;
   setUpSorting(): void;
   beginObserving(): void;

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

@@ -8,7 +8,7 @@ import { ItemData, ListFocusId } from "../pick-list/shared-list-logic";
 import { ListItemAndHandle } from "../value-list-item/interfaces";
 import { ValueListMessages } from "./assets/value-list/t9n";
 import { ICON_TYPES } from "./resources";
-import { SortableComponent } from "../../utils/sortableComponent";
+import { DragEvent, SortableComponent } from "../../utils/sortableComponent";
 /**
  * @deprecated Use the `list` component instead.
  * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
@@ -19,6 +19,14 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
+  /**
+   * When provided, the method will be called to determine whether the element can  move from the list.
+   */
+  canPull: (event: DragEvent) => boolean;
+  /**
+   * When provided, the method will be called to determine whether the element can be added from another list.
+   */
+  canPut: (event: DragEvent) => boolean;
   /**
    * When `true`, `calcite-value-list-item`s are sortable via a draggable button.
    */
@@ -93,6 +101,8 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   emitCalciteListFilter: () => void;
   filterEl: HTMLCalciteFilterElement;
   assistiveTextEl: HTMLSpanElement;
+  handleSelector: string;
+  dragSelector: string;
   connectedCallback(): void;
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
@@ -115,6 +125,9 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   calciteListItemChangeHandler(event: CustomEvent): void;
   calciteInternalListItemPropsChangeHandler(event: CustomEvent): void;
   calciteInternalListItemValueChangeHandler(event: CustomEvent): void;
+  onDragStart(): void;
+  onDragEnd(): void;
+  onDragSort(): void;
   getItems(): ItemElement[];
   setUpItems(): void;
   setUpFilter(): void;