@getflip/swirl-components 0.11.0 → 0.13.0

package/dist/collection/components/swirl-option-list/swirl-option-list.js

@@ -0,0 +1,523 @@
+import { Component, Element, Event, h, Host, Prop, State, Watch, } from "@stencil/core";
+import { closestPassShadow, querySelectorAllDeep, } from "../../utils";
+import Sortable from "sortablejs";
+export class SwirlOptionList {
+  constructor() {
+    this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
+    this.assistiveTextItemMoving = "Current position:";
+    this.assistiveTextItemMoved = "Item moved. New position:";
+    this.value = [];
+    this.onFocus = async () => {
+      // prevent focus from canceling the drag event in Safari
+      await new Promise((resolve) => setTimeout(resolve));
+      if (Boolean(this.focusedItem)) {
+        this.focusItem(this.getActiveItemIndex());
+      }
+      else {
+        this.focusItem(0);
+      }
+    };
+    this.onClick = (event) => {
+      event.preventDefault();
+      const target = event.target;
+      const item = target === null || target === void 0 ? void 0 : target.closest("swirl-option-list-item");
+      const composedTarget = event.composedPath()[0];
+      const clickedOption = Boolean(closestPassShadow(composedTarget, '[role="option"]'));
+      if (!Boolean(item) || !clickedOption) {
+        event.preventDefault();
+        return;
+      }
+      this.selectItem(this.items.findIndex((i) => i.value === item.value));
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        if (!Boolean(this.dragging)) {
+          this.focusNextItem();
+        }
+        else {
+          this.moveDraggedItemDown();
+        }
+      }
+      else if (event.code === "ArrowUp") {
+        event.preventDefault();
+        if (!Boolean(this.dragging)) {
+          this.focusPreviousItem();
+        }
+        else {
+          this.moveDraggedItemUp();
+        }
+      }
+      else if (event.code === "Space" || event.code === "Enter") {
+        const target = event.composedPath()[0];
+        const optionFocused = Boolean(closestPassShadow(target, '[role="option"]'));
+        if (!optionFocused) {
+          return;
+        }
+        event.preventDefault();
+        if (Boolean(this.dragging)) {
+          this.stopDrag(this.dragging);
+        }
+        else {
+          this.selectFocusedItem();
+        }
+      }
+      else if (event.code === "Home") {
+        event.preventDefault();
+        this.focusItem(0);
+      }
+      else if (event.code === "End") {
+        event.preventDefault();
+        this.focusItem(this.items.length - 1);
+      }
+      else if (event.code === "KeyA" &&
+        (event.metaKey || event.ctrlKey) &&
+        this.multiSelect) {
+        event.preventDefault();
+        this.selectAllItems();
+      }
+      else if (event.code === "Tab") {
+        if (Boolean(this.dragging)) {
+          event.preventDefault();
+        }
+      }
+    };
+    this.toggleDrag = (event) => {
+      const item = event.detail;
+      if (Boolean(this.dragging)) {
+        this.stopDrag(item);
+      }
+      else {
+        this.startDrag(item);
+      }
+    };
+    this.startDrag = (item) => {
+      this.dragging = item;
+      this.draggingStartIndex = this.getItemIndex(this.dragging);
+      item.setAttribute("dragging", "true");
+      const index = this.getItemIndex(this.dragging);
+      this.focusItem(index);
+      this.assistiveText = this.assistiveTextItemGrabbed;
+    };
+    this.stopDrag = (item) => {
+      this.dragging = undefined;
+      item.removeAttribute("dragging");
+      const newIndex = this.getActiveItemIndex();
+      this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
+      this.itemDrop.emit({ oldIndex: this.draggingStartIndex, newIndex });
+      this.draggingStartIndex = undefined;
+    };
+  }
+  componentDidLoad() {
+    this.updateItems();
+    this.observeSlotChanges();
+    this.setItemAllowDragState();
+    this.setItemDisabledState();
+    this.setItemContext();
+    this.syncItemsWithValue();
+    this.setupDragDrop();
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.sortable) === null || _b === void 0 ? void 0 : _b.destroy();
+  }
+  watchAllowDrag() {
+    this.setItemAllowDragState();
+    this.setupDragDrop();
+  }
+  watchDisabled() {
+    this.setItemDisabledState();
+  }
+  watchMultiSelect() {
+    this.setItemContext();
+  }
+  watchValue() {
+    this.syncItemsWithValue();
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateItems();
+    });
+    this.observer.observe(this.listboxEl, { childList: true });
+  }
+  updateItems() {
+    this.items = querySelectorAllDeep(this.el, "swirl-option-list-item");
+  }
+  setItemDisabledState() {
+    this.items.forEach((item) => (item.disabled = this.disabled));
+  }
+  setItemContext() {
+    if (this.multiSelect) {
+      this.items.forEach((item) => (item.context = "multi-select"));
+    }
+    else {
+      this.items.forEach((item) => (item.context = "single-select"));
+      if (this.value.length > 1) {
+        this.updateValue([this.value[0]]);
+      }
+    }
+  }
+  setupDragDrop() {
+    if (Boolean(this.sortable)) {
+      this.sortable.destroy();
+    }
+    if (!this.allowDrag) {
+      return;
+    }
+    this.sortable = Sortable.create(this.listboxEl, {
+      animation: 150,
+      draggable: "swirl-option-list-item",
+      handle: ".option-list-item__drag-handle",
+      onEnd: (event) => {
+        this.itemDrop.emit({
+          oldIndex: event.oldIndex,
+          newIndex: event.newIndex,
+        });
+      },
+    });
+  }
+  setItemAllowDragState() {
+    if (this.allowDrag && !this.multiSelect) {
+      console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");
+      return;
+    }
+    const sections = querySelectorAllDeep(this.el, "swirl-option-list-section");
+    if (this.allowDrag && sections.length > 0) {
+      console.error("[SwirlOptionList] Drag can only be allowed for lists without sections.");
+      return;
+    }
+    if (this.allowDrag) {
+      this.items.forEach((item) => {
+        item.setAttribute("allow-drag", "true");
+        item.addEventListener("toggleDrag", this.toggleDrag);
+      });
+    }
+    else {
+      this.items.forEach((item) => {
+        item.removeAttribute("allow-drag");
+        item.removeEventListener("toggleDrag", this.toggleDrag);
+      });
+    }
+  }
+  selectItem(index) {
+    if (this.disabled) {
+      return;
+    }
+    const item = this.items[index];
+    if (item.disabled) {
+      return;
+    }
+    const itemIsAlreadySelected = this.value.includes(item.value);
+    if (!this.multiSelect) {
+      this.value = [];
+    }
+    if (!itemIsAlreadySelected) {
+      this.updateValue([...this.value, item.value]);
+    }
+    else {
+      this.updateValue(this.value.filter((v) => v !== item.value));
+    }
+  }
+  updateValue(value) {
+    this.value = value;
+    this.valueChange.emit(this.value);
+  }
+  selectFocusedItem() {
+    if (this.disabled || this.getActiveItemIndex() === -1) {
+      return;
+    }
+    this.selectItem(this.getActiveItemIndex());
+  }
+  selectAllItems() {
+    if (this.disabled) {
+      return;
+    }
+    const alreadySelected = this.items.every((item) => this.value.includes(item.value));
+    if (alreadySelected) {
+      this.updateValue([]);
+    }
+    else {
+      this.updateValue(this.items.map((item) => item.value));
+    }
+  }
+  syncItemsWithValue() {
+    this.items.forEach((item) => (item.selected = this.value.includes(item.value)));
+  }
+  focusItem(index) {
+    var _a;
+    if (this.disabled) {
+      return;
+    }
+    this.items.forEach((item) => item.querySelector('[role="option"]').removeAttribute("tabIndex"));
+    const item = (_a = this.items[index]) === null || _a === void 0 ? void 0 : _a.querySelector('[role="option"]');
+    if (!Boolean(item)) {
+      return;
+    }
+    item.setAttribute("tabIndex", "0");
+    item.focus();
+    this.focusedItem = item;
+  }
+  focusNextItem() {
+    if (this.disabled) {
+      return;
+    }
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = Math.min(activeItemIndex + 1, this.items.length - 1);
+    this.focusItem(newIndex);
+  }
+  focusPreviousItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = Math.max(activeItemIndex - 1, 0);
+    this.focusItem(newIndex);
+  }
+  getActiveItemIndex() {
+    return this.items
+      .map((item) => item.querySelector('[role="option"]'))
+      .findIndex((item) => item === this.focusedItem);
+  }
+  getItemIndex(item) {
+    return this.items.map((i) => i).findIndex((i) => i === item);
+  }
+  moveDraggedItemDown() {
+    const nextSibling = this.dragging.nextElementSibling;
+    if (!Boolean(nextSibling)) {
+      return;
+    }
+    nextSibling.after(this.dragging);
+    this.updateItems();
+    this.listboxEl.focus();
+    this.assistiveText = `${this.assistiveTextItemMoving} ${this.getActiveItemIndex() + 1}`;
+  }
+  moveDraggedItemUp() {
+    const prevSibling = this.dragging.previousElementSibling;
+    if (!Boolean(prevSibling)) {
+      return;
+    }
+    prevSibling.before(this.dragging);
+    this.updateItems();
+    this.listboxEl.focus();
+    this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+  }
+  render() {
+    const ariaMultiselectable = this.multiSelect ? "true" : undefined;
+    const tabIndex = this.disabled ? -1 : 0;
+    return (h(Host, null,
+      h("swirl-visually-hidden", { role: "alert" }, this.assistiveText),
+      h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex },
+        h("slot", null))));
+  }
+  static get is() { return "swirl-option-list"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-option-list.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-option-list.css"]
+  }; }
+  static get properties() { return {
+    "allowDrag": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "allow-drag",
+      "reflect": false
+    },
+    "assistiveTextItemGrabbed": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "assistive-text-item-grabbed",
+      "reflect": false,
+      "defaultValue": "\"Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.\""
+    },
+    "assistiveTextItemMoving": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "assistive-text-item-moving",
+      "reflect": false,
+      "defaultValue": "\"Current position:\""
+    },
+    "assistiveTextItemMoved": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "assistive-text-item-moved",
+      "reflect": false,
+      "defaultValue": "\"Item moved. New position:\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "optionListId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "option-list-id",
+      "reflect": false
+    },
+    "multiSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multi-select",
+      "reflect": false
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "assistiveText": {}
+  }; }
+  static get events() { return [{
+      "method": "itemDrop",
+      "name": "itemDrop",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ oldIndex: number; newIndex: number }",
+        "resolved": "{ oldIndex: number; newIndex: number; }",
+        "references": {}
+      }
+    }, {
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "allowDrag",
+      "methodName": "watchAllowDrag"
+    }, {
+      "propName": "disabled",
+      "methodName": "watchDisabled"
+    }, {
+      "propName": "multiSelect",
+      "methodName": "watchMultiSelect"
+    }, {
+      "propName": "value",
+      "methodName": "watchValue"
+    }]; }
+}

package/dist/collection/components/swirl-option-list/swirl-option-list.stories.js

@@ -0,0 +1,28 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-option-list.mdx";
+export default {
+  component: "swirl-option-list",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlOptionList",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-option-list", args);
+  element.innerHTML = `
+    <swirl-option-list-item label="This is option 1" value="1"></swirl-option-list-item>
+    <swirl-option-list-item label="This is option 2" value="2"></swirl-option-list-item>
+    <swirl-option-list-item label="This is option 3" value="3"></swirl-option-list-item>
+    <swirl-option-list-item label="This is option 4" value="4"></swirl-option-list-item>
+`;
+  return element;
+};
+export const SwirlOptionList = Template.bind({});
+SwirlOptionList.args = {
+  allowDrag: true,
+  label: "Option List",
+  multiSelect: true,
+  value: ["2"],
+};