@esri/calcite-components/dist/components/calcite-sortable-list/customElement.js

Web Components for Esri's Calcite Design System.

/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { c as createObserver } from "../../chunks/observers.js";
import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
import { j as focusElement } from "../../chunks/dom.js";
import { l as logger } from "../../chunks/logger.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
const CSS = {
  container: "container",
  containerHorizontal: "container--horizontal",
  containerVertical: "container--vertical"
};
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;flex:1 1 auto}.container--vertical{flex-direction:column}.container--horizontal{flex-direction:row}:host([hidden]){display:none}[hidden]{display:none}`;
class SortableList extends LitElement {
  constructor() {
    super();
    this.dragEnabled = true;
    this.items = [];
    this.mutationObserver = createObserver("mutation", () => {
      this.setUpSorting();
    });
    this.interactiveContainer = useInteractive(this);
    this.disabled = false;
    this.handleSelector = "calcite-handle";
    this.layout = "vertical";
    this.loading = false;
    this.calciteListOrderChange = createEvent({ cancelable: false });
    this.listen("calciteHandleNudge", this.calciteHandleNudgeNextHandler);
  }
  static {
    this.properties = { canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragSelector: [3, {}, { reflect: true }], group: [3, {}, { reflect: true }], handleSelector: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  connectedCallback() {
    super.connectedCallback();
    this.setUpSorting();
    this.beginObserving();
  }
  load() {
    logger.deprecated("component", {
      component: this,
      name: "sortable-list",
      removalVersion: 5,
      suggested: "block-group"
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    disconnectSortableComponent(this);
    this.endObserving();
  }
  calciteHandleNudgeNextHandler(event) {
    this.handleNudgeEvent(event);
  }
  onGlobalDragStart() {
    this.endObserving();
  }
  onGlobalDragEnd() {
    this.beginObserving();
  }
  onDragEnd() {
  }
  onDragStart() {
  }
  onDragSort() {
    this.items = Array.from(this.el.children);
    this.calciteListOrderChange.emit();
  }
  handleNudgeEvent(event) {
    const { direction } = event.detail;
    const handle = event.composedPath().find((el) => el.matches(this.handleSelector));
    const sortItem = this.items.find((item) => {
      return item.contains(handle) || event.composedPath().includes(item);
    });
    const lastIndex = this.items.length - 1;
    const startingIndex = this.items.indexOf(sortItem);
    let appendInstead = false;
    let buddyIndex;
    if (direction === "up") {
      if (startingIndex === 0) {
        appendInstead = true;
      } else {
        buddyIndex = startingIndex - 1;
      }
    } else {
      if (startingIndex === lastIndex) {
        buddyIndex = 0;
      } else if (startingIndex === lastIndex - 1) {
        appendInstead = true;
      } else {
        buddyIndex = startingIndex + 2;
      }
    }
    this.endObserving();
    if (appendInstead) {
      sortItem.parentElement.appendChild(sortItem);
    } else {
      sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
    }
    this.items = Array.from(this.el.children);
    this.beginObserving();
    requestAnimationFrame(() => focusElement(handle));
    if ("selected" in handle) {
      handle.selected = true;
    }
  }
  setUpSorting() {
    this.items = Array.from(this.el.children);
    connectSortableComponent(this);
  }
  beginObserving() {
    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
  }
  endObserving() {
    this.mutationObserver?.disconnect();
  }
  render() {
    const { disabled, layout } = this;
    const horizontal = layout === "horizontal" || false;
    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({
      [CSS.container]: true,
      [CSS.containerVertical]: !horizontal,
      [CSS.containerHorizontal]: horizontal
    })}><slot></slot></div>` });
  }
}
customElement("calcite-sortable-list", SortableList);
export {
  SortableList
};