wj-elements 0.1.0 → 0.1.2

package/dist/wje-master.js

@@ -1,87 +1,91 @@
-import { default as p } from "./wje-element.js";
-import { defaultStoreActions as m, store as x } from "./wje-store.js";
-import { b as n, w as c } from "./router-links-FtZbFUto.js";
-import { fetchAndParseCSS as C } from "./wje-fetchAndParseCSS.js";
-import { L as o } from "./localize-7fxVJArK.js";
-import { default as T } from "./wje-animation.js";
-import { default as g } from "./wje-aside.js";
-import { default as k } from "./wje-avatar.js";
-import { default as S } from "./wje-badge.js";
-import { default as L } from "./wje-breadcrumb.js";
-import { default as P } from "./wje-breadcrumbs.js";
-import { default as M } from "./wje-button.js";
-import { default as v } from "./wje-button-group.js";
-import { default as D } from "./wje-card.js";
-import { default as O } from "./wje-card-content.js";
-import { default as E } from "./wje-card-controls.js";
-import { default as U } from "./wje-card-header.js";
-import { default as W } from "./wje-card-subtitle.js";
-import { default as N } from "./wje-card-title.js";
-import { default as K } from "./wje-carousel.js";
-import { default as X } from "./wje-carousel-item.js";
-import { default as Z } from "./wje-checkbox.js";
-import { default as $ } from "./wje-chip.js";
-import { default as eo } from "./wje-col.js";
-import { default as to } from "./wje-color-picker.js";
-import { default as fo } from "./wje-container.js";
-import { default as uo } from "./wje-copy-button.js";
-import { default as so } from "./wje-dialog.js";
-import { default as xo } from "./wje-divider.js";
-import { default as no } from "./wje-dropdown.js";
-import { default as bo } from "./wje-file-upload.js";
-import { default as wo } from "./wje-file-upload-item.js";
-import { default as Io } from "./wje-footer.js";
-import { default as Ro } from "./wje-format-digital.js";
-import { default as Bo } from "./wje-grid.js";
-import { default as ho } from "./wje-header.js";
-import "./wje-icon.js";
-import { default as jo } from "./wje-icon-picker.js";
-import { default as Ao } from "./wje-img.js";
-import { default as Fo } from "./wje-img-comparer.js";
-import { default as yo } from "./wje-infinite-scroll.js";
-import { default as Go } from "./wje-inline-edit.js";
-import { default as Vo } from "./wje-input.js";
-import { default as Ho } from "./wje-input-file.js";
-import { default as zo } from "./wje-item.js";
-import { default as Jo } from "./wje-label.js";
-import { default as qo } from "./wje-list.js";
-import { default as Qo } from "./wje-main.js";
-import { default as Yo } from "./wje-masonry.js";
-import { default as _o } from "./wje-menu.js";
-import { default as oe } from "./wje-menu-button.js";
-import { default as re } from "./wje-menu-item.js";
-import { default as ae } from "./wje-menu-label.js";
-import "./wje-option.js";
-import { default as le } from "./wje-options.js";
+var g = Object.defineProperty;
+var x = (d, e, t) => e in d ? g(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
+var l = (d, e, t) => (x(d, typeof e != "symbol" ? e + "" : e, t), t);
+import f, { WjElementUtils as w } from "./wje-element.js";
+import { event as j } from "./wje-element.js";
+import { defaultStoreActions as k, store as N } from "./wje-store.js";
+import { b as z, w as B } from "./router-links-FtZbFUto.js";
+import { fetchAndParseCSS as F } from "./wje-fetchAndParseCSS.js";
+import { L as h } from "./localize-DVuO3S17.js";
+import { default as q } from "./wje-accordion.js";
+import { default as V } from "./wje-accordion-item.js";
+import { default as H } from "./wje-animation.js";
+import { default as K } from "./wje-aside.js";
+import { default as $ } from "./wje-avatar.js";
+import { default as Z } from "./wje-badge.js";
+import { default as X } from "./wje-breadcrumb.js";
+import { default as ee } from "./wje-breadcrumbs.js";
+import { default as re } from "./wje-button.js";
+import { default as ae } from "./wje-button-group.js";
+import { default as ne } from "./wje-card.js";
+import { default as ie } from "./wje-card-content.js";
+import { default as fe } from "./wje-card-controls.js";
+import { default as me } from "./wje-card-header.js";
+import { default as ce } from "./wje-card-subtitle.js";
+import { default as ge } from "./wje-card-title.js";
+import { default as we } from "./wje-carousel.js";
+import { default as be } from "./wje-carousel-item.js";
+import { default as Ee } from "./wje-checkbox.js";
+import { default as ye } from "./wje-chip.js";
+import { default as Le } from "./wje-col.js";
+import { default as Re } from "./wje-color-picker.js";
+import { default as je } from "./wje-container.js";
+import { default as ke } from "./wje-copy-button.js";
+import { default as Oe } from "./wje-dialog.js";
+import { default as Be } from "./wje-divider.js";
+import { default as Fe } from "./wje-dropdown.js";
+import { default as qe } from "./wje-file-upload.js";
+import { default as Ve } from "./wje-file-upload-item.js";
+import { default as He } from "./wje-footer.js";
+import { default as Ke } from "./wje-format-digital.js";
+import { default as $e } from "./wje-grid.js";
+import { default as Ze } from "./wje-header.js";
+import { default as Xe } from "./wje-icon.js";
+import { default as et } from "./wje-icon-picker.js";
+import { default as rt } from "./wje-img.js";
+import { default as at } from "./wje-img-comparer.js";
+import { default as nt } from "./wje-infinite-scroll.js";
+import { default as it } from "./wje-inline-edit.js";
+import { default as ft } from "./wje-input.js";
+import { default as mt } from "./wje-input-file.js";
+import { default as ct } from "./wje-item.js";
+import { default as gt } from "./wje-label.js";
+import { default as wt } from "./wje-list.js";
+import { default as bt } from "./wje-main.js";
+import { default as Et } from "./wje-masonry.js";
+import { default as yt } from "./wje-menu.js";
+import { default as Lt } from "./wje-menu-button.js";
+import { default as Rt } from "./wje-menu-item.js";
+import { default as jt } from "./wje-menu-label.js";
+import { default as kt } from "./wje-option.js";
+import { default as Ot } from "./wje-options.js";
 import "./wje-popup.js";
-import { default as ue } from "./wje-progress-bar.js";
-import { default as se } from "./wje-radio.js";
-import { default as xe } from "./wje-radio-group.js";
-import { default as ne } from "./wje-rate.js";
-import { default as be } from "./wje-relative-time.js";
-import { default as we } from "./wje-route.js";
-import { default as Ie } from "./wje-routerx.js";
-import { default as Re } from "./wje-router-link.js";
-import { default as Be } from "./wje-router-outlet.js";
-import { default as he } from "./wje-row.js";
-import { default as je } from "./wje-select.js";
-import { default as Ae } from "./wje-slider.js";
-import { default as Fe } from "./wje-split-view.js";
-import { default as ye } from "./wje-tab.js";
-import { default as Ge } from "./wje-tab-group.js";
-import { default as Ve } from "./wje-tab-panel.js";
-import { default as He } from "./wje-textarea.js";
-import { default as ze } from "./wje-thumbnail.js";
-import { default as Je } from "./wje-toast.js";
-import { default as qe } from "./wje-toggle.js";
-import { default as Qe } from "./wje-toolbar.js";
-import { default as Ye } from "./wje-toolbar-action.js";
-import { default as _e } from "./wje-tooltip.js";
-import { default as or } from "./wje-visually-hidden.js";
-import { O as rr } from "./option.element-CpeafIM-.js";
-import { I as ar } from "./icon.element-DOiXP3pi.js";
-import { P as lr } from "./popup.element-BXak-Fgc.js";
-const e = {
+import { default as Bt } from "./wje-progress-bar.js";
+import { default as Ft } from "./wje-radio.js";
+import { default as qt } from "./wje-radio-group.js";
+import { default as Vt } from "./wje-rate.js";
+import { default as Ht } from "./wje-relative-time.js";
+import { default as Kt } from "./wje-route.js";
+import { default as $t } from "./wje-routerx.js";
+import { default as Zt } from "./wje-router-link.js";
+import { default as Xt } from "./wje-router-outlet.js";
+import { default as er } from "./wje-row.js";
+import { default as rr } from "./wje-select.js";
+import { default as ar } from "./wje-slider.js";
+import { default as nr } from "./wje-split-view.js";
+import { default as ir } from "./wje-tab.js";
+import { default as fr } from "./wje-tab-group.js";
+import { default as mr } from "./wje-tab-panel.js";
+import { default as cr } from "./wje-textarea.js";
+import { default as gr } from "./wje-thumbnail.js";
+import { default as wr } from "./wje-toast.js";
+import { default as br } from "./wje-toggle.js";
+import { default as Er } from "./wje-toolbar.js";
+import { default as yr } from "./wje-toolbar-action.js";
+import { default as Lr } from "./wje-tooltip.js";
+import { default as Rr } from "./wje-visually-hidden.js";
+import { P as jr } from "./popup.element-Dj9j__Dh.js";
+const v = {
   code: "sk",
   name: "Slovak",
   dir: "ltr",
@@ -90,8 +94,8 @@ const e = {
   "wj.file.upload.uploaded": "Nahraných: ",
   "wj.file.upload.from": "z"
 };
-o.registerTranslation(e);
-const r = {
+h.registerTranslation(v);
+const b = {
   code: "en",
   name: "English",
   dir: "ltr",
@@ -100,88 +104,239 @@ const r = {
   "wj.file.upload.uploaded": "Uploaded: ",
   "wj.file.upload.from": "from"
 };
-o.registerTranslation(r);
+h.registerTranslation(b);
+const A = ".container{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}.container-w-dropzones{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:row}";
+class m extends f {
+  constructor() {
+    super(), this.className = "Reorder", this.dragEl = null, this.items = [], this.originalIndex = null;
+  }
+  static get cssStyleSheet() {
+    return A;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, t, o) {
+    const n = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("container"), a.setAttribute("part", "native");
+    const r = document.createElement("slot");
+    return r.classList.add("reorder-items"), a.appendChild(r), n.appendChild(a), this.container = a, n;
+  }
+  afterDraw(e, t, o) {
+    const n = this.querySelectorAll("wje-reorder-item"), a = this.querySelectorAll("wje-reorder-dropzone");
+    a && a.forEach((r) => {
+      this.container.classList.remove("container"), this.container.classList.add("container-w-dropzones");
+    }), n && n.forEach((r) => {
+      const s = r.querySelectorAll("[slot=handle]");
+      (s.length > 0 ? s : [r]).forEach((p) => {
+        p.setAttribute("draggable", "true"), this.attachEventListeners(p);
+      });
+    });
+  }
+  onDragStart(e) {
+    if (this.hasAttribute("disabled")) {
+      e.preventDefault();
+      return;
+    }
+    const t = new Image();
+    t.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=", e.dataTransfer.setDragImage(t, 0, 0), this.dragEl = e.currentTarget.closest("wje-reorder-item"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/html", `${this.dragEl.innerHTML}`), this.originalIndex = [...this.dragEl.parentNode.children].indexOf(
+      this.dragEl
+    ), this.originalParent = this.dragEl.parentNode;
+  }
+  onDragOver(e) {
+    e.preventDefault();
+    const t = e.currentTarget.closest("wje-reorder-item"), o = t.parentNode;
+    this.dragEl !== t ? (this.updateDropStyles(t, this.isMovingDown(e)), this.updateItemsPosition(o, t, this.isMovingDown(e))) : t.shadowRoot.querySelector("div").classList.add("moving");
+  }
+  onDragEnter(e) {
+  }
+  onDragLeave(e) {
+  }
+  onDrop(e) {
+    e.preventDefault();
+    const t = e.currentTarget.closest("wje-reorder-item");
+    if (t.shadowRoot.querySelector("div").classList.remove("moving"), !t.parentNode)
+      return;
+    t.parentNode.insertBefore(this.dragEl, t);
+  }
+  onDragEnd(e) {
+    const t = this.dragEl.parentNode, o = Array.from(t.children).indexOf(this.dragEl);
+    [t, this.originalParent].forEach((a) => {
+      a.childNodes.forEach((r) => {
+        if (r.nodeType === 1) {
+          const s = r.shadowRoot.querySelector("div");
+          s && ["drag--up", "drag--down", "moving"].forEach(
+            (i) => s.classList.remove(i)
+          );
+        }
+      });
+    });
+    const n = Array.from(t.children).map((a) => {
+      const r = a.cloneNode(!0), s = r.querySelector(".handle");
+      return s && s.remove(), r.innerText.trim();
+    });
+    this.dispatchChange(this.originalIndex, o, n);
+  }
+  attachEventListeners(e) {
+    e.addEventListener("dragstart", this.onDragStart.bind(this), !1), e.addEventListener("touchstart", this.onDragStart.bind(this), !1), e.addEventListener("dragenter", this.onDragEnter.bind(this), !1), e.addEventListener("dragover", this.onDragOver.bind(this), !1), e.addEventListener("dragleave", this.onDragLeave.bind(this), !1), e.addEventListener("drop", this.onDrop.bind(this), !1), e.addEventListener("dragend", this.onDragEnd.bind(this), !1), e.addEventListener("touchend", this.onDragEnd.bind(this), !1);
+  }
+  updateDropStyles(e, t) {
+    const o = e.shadowRoot.querySelector("div").classList;
+    o.toggle("drag--down", t), o.toggle("drag--up", !t);
+  }
+  updateItemsPosition(e, t, o) {
+    e.insertBefore(
+      this.dragEl,
+      o ? t.nextSibling : t
+    );
+  }
+  isMovingDown(e) {
+    const t = e.currentTarget.closest("wje-reorder-item").parentNode, o = Array.from(t.children).indexOf(this.dragEl), n = Array.from(t.children).indexOf(
+      e.currentTarget.closest("wje-reorder-item")
+    );
+    return o < n;
+  }
+  dispatchChange(e, t, o) {
+    console.log("FROM:", e), console.log("TO:", t), console.log("ORDER:", o), this.dispatchEvent(
+      new CustomEvent("wje-reorder:change", {
+        detail: { from: e, to: t, order: o }
+      })
+    );
+  }
+}
+m.define("wje-reorder", m);
+const E = ":host{--reorder-background-color: var(--wje-color-contrast-lowest);--reorder-item-spacing: .5rem}.item{width:134px;height:19px;display:flex;align-items:center;justify-content:center;position:relative;gap:var(--reorder-item-spacing);padding:var(--reorder-item-spacing);border-radius:var(--wje-border-radius-small);background-color:--reorder-background-color;cursor:grab;transition:transform .3s linear}.item-w-handle{cursor:default}.item:hover:not(.item-w-handle){background-color:#f4f4f5}.item:active:not(.item-w-handle):not(.moving){background-color:--reorder-background-color;cursor:grabbing}.moving{background-color:#d3d3d3}.handle{cursor:grab;gap:10px}.handle:active{cursor:grabbing}.name{width:108px;height:19px;text-align:center;font-size:var(--wje-font-size-medium);font-weight:400;line-height:19.36px;gap:10px}.drag--down{--item-transform: translateY(-10px)}.drag--up{--item-transform: translateY(10px)}.item{transform:var(--item-transform)}";
+class u extends f {
+  constructor() {
+    super();
+    l(this, "className", "ReorderItem");
+  }
+  static get cssStyleSheet() {
+    return E;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, o, n) {
+    let a = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("item"), r.setAttribute("part", "native-reorder-item");
+    let s = document.createElement("slot");
+    if (s.classList.add("name"), w.hasSlot(this, "handle")) {
+      const i = document.createElement("slot");
+      i.classList.add("handle"), i.setAttribute("name", "handle"), i.setAttribute("part", "handle-part"), r.classList.add("item-w-handle"), r.appendChild(i);
+    } else
+      s.setAttribute("draggable", "true");
+    return r.appendChild(s), a.appendChild(r), a;
+  }
+}
+u.define("wje-reorder-item", u);
+const S = ".dropzone{border:1px dashed lightgrey;border-radius:var(--wje-border-radius-small);margin:.5rem;display:flex;flex-direction:column;align-items:center;overflow:hidden;justify-content:center;min-height:250px}";
+class c extends f {
+  constructor() {
+    super();
+    l(this, "className", "ReorderDropzone");
+  }
+  static get cssStyleSheet() {
+    return S;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, o, n) {
+    let a = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("dropzone");
+    let s = document.createElement("slot");
+    return r.appendChild(s), a.appendChild(r), a;
+  }
+}
+c.define("wje-reorder-dropzone", c);
 export {
-  T as Animation,
-  g as Aside,
-  k as Avatar,
-  S as Badge,
-  L as Breadcrumb,
-  P as Breadcrumbs,
-  M as Button,
-  v as ButtonGroup,
-  D as Card,
-  O as CardContent,
-  E as CardControls,
-  U as CardHeader,
-  W as CardSubtitle,
-  N as CardTitle,
-  K as Carousel,
-  X as CarouselItem,
-  Z as Checkbox,
-  $ as Chip,
-  eo as Col,
-  to as ColorPicker,
-  fo as Container,
-  uo as CopyButton,
-  so as Dialog,
-  xo as Divider,
-  no as Dropdown,
-  bo as FileUpload,
-  wo as FileUploadItem,
-  Io as Footer,
-  Ro as FormatDigital,
-  Bo as Grid,
-  ho as Header,
-  ar as Icon,
-  jo as IconPicker,
-  Ao as Img,
-  Fo as ImgComparer,
-  yo as InfiniteScroll,
-  Go as InlineEdit,
-  Vo as Input,
-  Ho as InputFile,
-  zo as Item,
-  Jo as Label,
-  qo as List,
-  o as Localizer,
-  Qo as Main,
-  Yo as Masonry,
-  _o as Menu,
-  oe as MenuButton,
-  re as MenuItem,
-  ae as MenuLabel,
-  rr as Option,
-  le as Options,
-  lr as Popup,
-  ue as ProgressBar,
-  se as Radio,
-  xe as RadioGroup,
-  ne as Rate,
-  be as RelativeTime,
-  we as Route,
-  Re as RouterLink,
-  Be as RouterOutlet,
-  Ie as Routerx,
-  he as Row,
-  je as Select,
-  Ae as Slider,
-  Fe as SplitView,
-  ye as Tab,
-  Ge as TabGroup,
-  Ve as TabPanel,
-  He as Textarea,
-  ze as Thumbnail,
-  Je as Toast,
-  qe as Toggle,
-  Qe as Toolbar,
-  Ye as ToolbarAction,
-  _e as Tooltip,
-  or as VisuallyHidden,
-  p as WJElement,
-  n as bindRouterLinks,
-  m as defaultStoreActions,
-  C as fetchAndParseCSS,
-  x as store,
-  c as withRouterLinks
+  q as Accordion,
+  V as AccordionItem,
+  H as Animation,
+  K as Aside,
+  $ as Avatar,
+  Z as Badge,
+  X as Breadcrumb,
+  ee as Breadcrumbs,
+  re as Button,
+  ae as ButtonGroup,
+  ne as Card,
+  ie as CardContent,
+  fe as CardControls,
+  me as CardHeader,
+  ce as CardSubtitle,
+  ge as CardTitle,
+  we as Carousel,
+  be as CarouselItem,
+  Ee as Checkbox,
+  ye as Chip,
+  Le as Col,
+  Re as ColorPicker,
+  je as Container,
+  ke as CopyButton,
+  Oe as Dialog,
+  Be as Divider,
+  Fe as Dropdown,
+  qe as FileUpload,
+  Ve as FileUploadItem,
+  He as Footer,
+  Ke as FormatDigital,
+  $e as Grid,
+  Ze as Header,
+  Xe as Icon,
+  et as IconPicker,
+  rt as Img,
+  at as ImgComparer,
+  nt as InfiniteScroll,
+  it as InlineEdit,
+  ft as Input,
+  mt as InputFile,
+  ct as Item,
+  gt as Label,
+  wt as List,
+  h as Localizer,
+  bt as Main,
+  Et as Masonry,
+  yt as Menu,
+  Lt as MenuButton,
+  Rt as MenuItem,
+  jt as MenuLabel,
+  kt as Option,
+  Ot as Options,
+  jr as Popup,
+  Bt as ProgressBar,
+  Ft as Radio,
+  qt as RadioGroup,
+  Vt as Rate,
+  Ht as RelativeTime,
+  m as Reorder,
+  c as ReorderDropzone,
+  u as ReorderItem,
+  Kt as Route,
+  Zt as RouterLink,
+  Xt as RouterOutlet,
+  $t as Routerx,
+  er as Row,
+  rr as Select,
+  ar as Slider,
+  nr as SplitView,
+  ir as Tab,
+  fr as TabGroup,
+  mr as TabPanel,
+  cr as Textarea,
+  gr as Thumbnail,
+  wr as Toast,
+  br as Toggle,
+  Er as Toolbar,
+  yr as ToolbarAction,
+  Lr as Tooltip,
+  Rr as VisuallyHidden,
+  f as WJElement,
+  z as bindRouterLinks,
+  k as defaultStoreActions,
+  j as event,
+  F as fetchAndParseCSS,
+  N as store,
+  B as withRouterLinks
 };