@getflip/swirl-components-react 0.363.5 → 0.364.0

package/dist/swirl-option-list.entry.e77435c2.js

@@ -1,200 +0,0 @@
-import { r as c, c as l, h as o, H as g, g as u } from "./index.9632ab86.js";
-import { S as m } from "./sortable.esm-CMrz6687.dac971cd.js";
-import { l as r, q as n } from "./utils-D_MUFqkF.654ff3ce.js";
-import "react";
-import "react-dom";
-const I = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}", f = class {
-  constructor(e) {
-    c(this, e), this.itemDrop = l(this, "itemDrop", 7), this.valueChange = l(this, "valueChange", 7), this.allowDeselect = !0, 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.onClick = (t) => {
-      t.preventDefault();
-      const s = t.target, i = s == null ? void 0 : s.closest("swirl-option-list-item"), a = t.composedPath()[0], h = Boolean(r(a, '[role="option"]'));
-      if (!Boolean(i) || !h) {
-        t.preventDefault();
-        return;
-      }
-      this.selectItem(this.items.findIndex((d) => d.value === i.value));
-    }, this.onKeyDown = (t) => {
-      if (t.code === "ArrowDown")
-        t.preventDefault(), Boolean(this.dragging) ? this.moveDraggedItemDown() : this.focusNextItem();
-      else if (t.code === "ArrowUp")
-        t.preventDefault(), Boolean(this.dragging) ? this.moveDraggedItemUp() : this.focusPreviousItem();
-      else if (t.code === "Space" || t.code === "Enter") {
-        if (!t.target.classList.contains("option-list-item__drag-handle") && Boolean(this.dragging)) {
-          t.preventDefault(), this.stopDrag(this.dragging);
-          return;
-        }
-        const i = t.composedPath()[0];
-        if (!Boolean(r(i, '[role="option"]')))
-          return;
-        t.preventDefault(), Boolean(this.dragging) ? this.stopDrag(this.dragging) : this.selectFocusedItem();
-      } else
-        t.code === "Home" ? (t.preventDefault(), this.focusItem(0)) : t.code === "End" ? (t.preventDefault(), this.focusItem(this.items.length - 1)) : t.code === "KeyA" && (t.metaKey || t.ctrlKey) && this.multiSelect ? (t.preventDefault(), this.selectAllItems()) : t.code === "Tab" && Boolean(this.dragging) && t.preventDefault();
-    }, this.toggleDrag = (t) => {
-      const s = t.detail;
-      Boolean(this.dragging) ? this.stopDrag(s) : this.startDrag(s);
-    }, this.startDrag = (t) => {
-      this.dragging = t, this.draggingStartIndex = this.getItemIndex(this.dragging), t.setAttribute("dragging", "true");
-      const s = this.getItemIndex(this.dragging);
-      this.focusItem(s), this.assistiveText = this.assistiveTextItemGrabbed;
-    }, this.stopDrag = (t) => {
-      this.dragging = void 0, t.removeAttribute("dragging");
-      const s = this.getActiveItemIndex();
-      this.assistiveText = `${this.assistiveTextItemMoved} ${s + 1}`, this.itemDrop.emit({ item: t, oldIndex: this.draggingStartIndex, newIndex: s }), this.draggingStartIndex = void 0, this.focusItem(s);
-    };
-  }
-  componentDidLoad() {
-    this.updateItems(), this.observeSlotChanges(), this.setItemAllowDragState(), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue(), this.setupDragDrop(), this.setSectionSeparator();
-  }
-  componentDidRender() {
-    this.setupDragDrop();
-  }
-  disconnectedCallback() {
-    var e, t;
-    (e = this.observer) == null || e.disconnect(), (t = this.sortable) == null || t.destroy();
-  }
-  watchAllowDrag() {
-    this.setItemAllowDragState(), this.setupDragDrop();
-  }
-  watchDisabled() {
-    this.setItemDisabledState();
-  }
-  watchMultiSelect() {
-    this.setItemContext();
-  }
-  watchValue() {
-    this.syncItemsWithValue();
-  }
-  observeSlotChanges() {
-    this.observer = new MutationObserver(() => {
-      this.updateItems(), this.setItemAllowDragState(), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue();
-    }), this.observer.observe(this.listboxEl, { childList: !0, subtree: !0 });
-  }
-  updateItems() {
-    var t;
-    this.items = n(this.el, "swirl-option-list-item"), this.items.forEach((s) => {
-      var i;
-      return (i = s.querySelector('[role="option"]')) == null ? void 0 : i.removeAttribute("tabIndex");
-    });
-    const e = (t = this.items[0]) == null ? void 0 : t.querySelector('[role="option"]');
-    !Boolean(e) || e.setAttribute("tabIndex", "0");
-  }
-  setItemDisabledState() {
-    this.disabled && this.items.forEach((e) => e.disabled = !0);
-  }
-  setItemContext() {
-    this.multiSelect ? this.items.forEach((e) => e.context = "multi-select") : (this.items.forEach((e) => e.context = "single-select"), this.value.length > 1 && this.updateValue([this.value[0]]));
-  }
-  setupDragDrop() {
-    Boolean(this.sortable) && this.sortable.destroy(), this.allowDrag && (this.sortable = m.create(this.listboxEl, {
-      animation: 150,
-      draggable: "swirl-option-list-item",
-      handle: ".option-list-item__drag-handle",
-      onEnd: (e) => {
-        this.itemDrop.emit({
-          item: e.item,
-          oldIndex: e.oldIndex,
-          newIndex: e.newIndex
-        });
-      }
-    }));
-  }
-  setItemAllowDragState() {
-    if (this.allowDrag && !this.multiSelect) {
-      console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");
-      return;
-    }
-    const e = n(this.el, "swirl-option-list-section");
-    if (this.allowDrag && e.length > 0) {
-      console.error("[SwirlOptionList] Drag can only be allowed for lists without sections.");
-      return;
-    }
-    this.allowDrag ? this.items.forEach((t) => {
-      t.setAttribute("allow-drag", "true"), t.addEventListener("toggleDrag", this.toggleDrag);
-    }) : this.items.forEach((t) => {
-      t.removeAttribute("allow-drag"), t.removeEventListener("toggleDrag", this.toggleDrag);
-    });
-  }
-  selectItem(e) {
-    if (this.disabled)
-      return;
-    const t = this.items[e];
-    if (t.disabled)
-      return;
-    const s = this.value.includes(t.value);
-    s && !this.allowDeselect || (this.multiSelect || (this.value = []), s ? this.updateValue(this.value.filter((i) => i !== t.value)) : this.updateValue([...this.value, t.value]), this.focusItem(e));
-  }
-  updateValue(e) {
-    this.value = e, this.valueChange.emit(this.value);
-  }
-  selectFocusedItem() {
-    this.disabled || this.getActiveItemIndex() === -1 || this.selectItem(this.getActiveItemIndex());
-  }
-  selectAllItems() {
-    if (this.disabled)
-      return;
-    this.items.every((t) => this.value.includes(t.value)) ? this.updateValue([]) : this.updateValue(this.items.map((t) => t.value));
-  }
-  syncItemsWithValue() {
-    var e;
-    (e = this.items) == null || e.forEach((t) => t.selected = this.value.includes(t.value));
-  }
-  focusItem(e) {
-    var s;
-    if (this.disabled)
-      return;
-    this.items.forEach((i) => i.querySelector('[role="option"]').removeAttribute("tabIndex"));
-    const t = (s = this.items[e]) == null ? void 0 : s.querySelector('[role="option"]');
-    !Boolean(t) || (t.setAttribute("tabIndex", "0"), t.focus(), this.focusedItem = t);
-  }
-  focusNextItem() {
-    if (this.disabled)
-      return;
-    const e = this.getActiveItemIndex(), t = Math.min(e + 1, this.items.length - 1);
-    this.focusItem(t);
-  }
-  focusPreviousItem() {
-    const e = this.getActiveItemIndex(), t = Math.max(e - 1, 0);
-    this.focusItem(t);
-  }
-  getActiveItemIndex() {
-    return Boolean(this.focusedItem) ? this.items.map((e) => e.querySelector('[role="option"]')).findIndex((e) => e === this.focusedItem) : 0;
-  }
-  getItemIndex(e) {
-    return this.items.map((t) => t).findIndex((t) => t === e);
-  }
-  moveDraggedItemDown() {
-    const e = this.dragging.nextElementSibling;
-    !Boolean(e) || (e.after(this.dragging), this.updateItems(), this.listboxEl.focus(), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getActiveItemIndex() + 1}`);
-  }
-  moveDraggedItemUp() {
-    const e = this.dragging.previousElementSibling;
-    !Boolean(e) || (e.before(this.dragging), this.updateItems(), this.listboxEl.focus(), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
-  }
-  setSectionSeparator() {
-    if (!this.el)
-      return;
-    Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((t) => t.isConnected).forEach((t, s) => {
-      var i;
-      s === 0 && ((i = t.previousElementSibling) == null ? void 0 : i.tagName) !== "SWIRL-OPTION-LIST-ITEM" && (t.hasSeparator = !1);
-    });
-  }
-  render() {
-    const e = this.multiSelect ? "true" : void 0, t = Boolean(this.dragging) ? 0 : void 0;
-    return o(g, { key: "7eab0e132c99c86955fb1b761f617a17ae1da6ee" }, o("swirl-visually-hidden", { key: "694674872ea99abb4bb5e33e36fb13a00094737b", role: "alert" }, this.assistiveText), o("div", { key: "6e6823ed6383a1582cada32c8cdbbc82cd5a0e7e", "aria-label": this.label, "aria-multiselectable": e, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (s) => this.listboxEl = s, role: "listbox", tabIndex: t }, o("slot", { key: "1df33bb4a0c6d910e9103b9e94cc7cf29057fdeb", onSlotchange: this.setSectionSeparator })));
-  }
-  get el() {
-    return u(this);
-  }
-  static get watchers() {
-    return {
-      allowDrag: ["watchAllowDrag"],
-      disabled: ["watchDisabled"],
-      multiSelect: ["watchMultiSelect"],
-      value: ["watchValue"]
-    };
-  }
-};
-f.style = I;
-export {
-  f as swirl_option_list
-};

package/dist/swirl-symbol-roadmap.entry.2f1487cd.js

@@ -1,17 +0,0 @@
-import { r as t, h as e, F as o } from "./index.9632ab86.js";
-import { c as r } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const a = ":host{display:inline-flex}", c = class {
-  constructor(s) {
-    t(this, s), this.size = 24;
-  }
-  render() {
-    const s = this.size === 20 ? 24 : this.size, i = r("swirl-symbol", `swirl-symbol--size-${this.size}`);
-    return e("svg", { key: "030cc3f54a9b4fc9a9de499ce320fc44c49520bd", class: i, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${s} ${s}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, e(o, { key: "71f00c5ee43a38cd56fd965e56d9727ddfca9803" }, e("path", { key: "8e2a4a18cac54005818dbe3c80a978ff7d312f3c", d: "M13 10H18L21 7L18 4H13V2H11V4H4V10H11V12H6L3 15L6 18H11V22H13V18H20V12H13V10ZM6 6H17.17L18.17 7L17.17 8H6V6ZM18 16H6.83L5.83 15L6.83 14H18V16Z", fill: "currentColor" })));
-  }
-};
-c.style = a;
-export {
-  c as swirl_symbol_roadmap
-};

package/dist/swirl-symbol-smartphone.entry.4a9c9610.js

@@ -1,17 +0,0 @@
-import { r as t, h as e, F as r } from "./index.9632ab86.js";
-import { c as a } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const o = ":host{display:inline-flex}", l = class {
-  constructor(s) {
-    t(this, s), this.size = 24;
-  }
-  render() {
-    const s = this.size === 20 ? 24 : this.size, i = a("swirl-symbol", `swirl-symbol--size-${this.size}`);
-    return e("svg", { key: "4a5ce5388bb895ec540c8fa5213c7140e0aa7897", class: i, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${s} ${s}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, e(r, { key: "04a7801661a9ca68bb18e01d6bc400b114a62689" }, e("path", { key: "35180276593db7e3288a5f77b3ced60acd80a7b9", d: "M17 1.01L7 1C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1.01 17 1.01ZM17 19H7V5H17V19Z", fill: "currentColor" })));
-  }
-};
-l.style = o;
-export {
-  l as swirl_symbol_smartphone
-};

package/dist/swirl-symbol.entry.051aa3b7.js

@@ -1,16 +0,0 @@
-import { r as i, h as e, H as t } from "./index.9632ab86.js";
-import "react";
-import "react-dom";
-const r = ":host{display:inline-flex}", o = class {
-  constructor(s) {
-    i(this, s), this.size = 24;
-  }
-  render() {
-    const s = `swirl-symbol-${this.glyph}`;
-    return e(t, { key: "bccc836ac06a9e3d90d0de93918033ad1eec6903" }, e(s, { key: "1ff383f8a6248fcf4a769f55e2bf93a4551d2780", size: this.size }));
-  }
-};
-o.style = r;
-export {
-  o as swirl_symbol
-};