overview-components 1.0.67 → 1.0.69

package/dist/components/lit-multiselect-item.js

@@ -0,0 +1,526 @@
+import { customElement as C } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as m } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as y } from "../node_modules/@lit/reactive-element/decorators/state.js";
+import { LitElement as L, html as v, css as T } from "lit";
+import { msg as S } from "@lit/localize";
+import R from "sortablejs";
+import { isEmpty as K } from "lodash";
+var k = Object.defineProperty, F = Object.getOwnPropertyDescriptor, a = (t, e, l, i) => {
+  for (var s = i > 1 ? void 0 : i ? F(e, l) : e, r = t.length - 1, h; r >= 0; r--)
+    (h = t[r]) && (s = (i ? h(e, l, s) : h(s)) || s);
+  return i && s && k(e, l, s), s;
+};
+let n = class extends L {
+  constructor() {
+    super(...arguments), this.value = [], this.options = [], this.label = "", this.rightLabel = "", this.allowRightSearch = !1, this.allowSelectAll = !1, this.showRightTotal = !1, this.autoSearch = !0, this.enableAssignmentsOrdering = !0, this.onChange = (t) => {
+    }, this.filterText = "", this.filterTextRight = "", this.appliedFilterText = "", this.appliedFilterTextRight = "", this.selectedLeftKeys = [], this.selectedRightKeys = [], this.lastSelectedIndexLeft = null, this.lastSelectedIndexRight = null, this.sortableInstances = [], this.sortableGroupId = `group-${Math.random().toString(36).substring(2, 9)}`;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.destroySortables();
+  }
+  updated(t) {
+    this.enableAssignmentsOrdering && (t.has("value") || t.has("options")) && this.initSortables();
+  }
+  firstUpdated() {
+    this.enableAssignmentsOrdering && this.initSortables();
+  }
+  destroySortables() {
+    this.sortableInstances.forEach((t) => t.destroy()), this.sortableInstances = [];
+  }
+  initSortables() {
+    this.updateComplete.then(() => {
+      var d, c;
+      this.destroySortables();
+      const t = (d = this.shadowRoot) == null ? void 0 : d.querySelector("#left-list"), e = (c = this.shadowRoot) == null ? void 0 : c.querySelector("#right-list");
+      if (!t || !e) return;
+      let l = [], i = [];
+      const s = {
+        group: {
+          name: this.sortableGroupId,
+          pull: !0,
+          put: !0
+        },
+        animation: 150,
+        handle: ".drag-handle",
+        onStart: (o) => {
+          l = Array.from(o.from.childNodes);
+        },
+        onMove: (o) => {
+          o.to !== o.from && i.length === 0 && (i = Array.from(o.to.childNodes));
+        },
+        onEnd: (o) => {
+          o.from && l.length > 0 && (o.from.innerHTML = "", l.forEach((f) => o.from.appendChild(f))), o.to && o.to !== o.from && i.length > 0 && (o.to.innerHTML = "", i.forEach((f) => o.to.appendChild(f))), this.updateDataAfterDrag(o), this.requestUpdate();
+        }
+      }, r = R.create(t, s), h = R.create(e, s);
+      this.sortableInstances.push(r, h);
+    });
+  }
+  updateDataAfterDrag(t) {
+    var I;
+    const { from: e, to: l, oldIndex: i, newIndex: s } = t, r = e.id === "left-list" ? "left" : "right", h = l.id === "left-list" ? "left" : "right", d = t.item.getAttribute("id"), c = [...this.options, ...this.value], o = c.find((p) => String(p.value) === d);
+    if (!o) return;
+    const f = r === "left" ? this.selectedLeftKeys : this.selectedRightKeys, w = f.includes(o.value), b = w ? c.filter((p) => f.includes(p.value)) : [o];
+    if (r === h) {
+      const p = r === "left" ? [...this.options] : [...this.value];
+      if (w) {
+        const u = p.filter((g) => !f.includes(g.value));
+        u.splice(s, 0, ...b), r === "left" ? this.options = u : this.value = u;
+      } else {
+        const [u] = p.splice(i, 1);
+        p.splice(s, 0, u), r === "left" ? this.options = p : this.value = p;
+      }
+    } else if (r === "left") {
+      const p = this.options.filter(
+        (g) => !b.some((x) => x.value === g.value)
+      ), u = [...this.value];
+      b.forEach((g, x) => {
+        u.some(($) => $.value === g.value) || u.splice(s + x, 0, g);
+      }), this.options = p, this.value = u;
+    } else {
+      const p = this.value.filter(
+        (g) => !b.some((x) => x.value === g.value)
+      ), u = [...this.options];
+      b.forEach((g, x) => {
+        u.some(($) => $.value === g.value) || u.splice(s + x, 0, g);
+      }), this.value = p, this.options = u;
+    }
+    (I = this.onChange) == null || I.call(this, this.value), this.dispatchEvent(
+      new CustomEvent("onChange", {
+        detail: this.value
+      })
+    ), this.selectedLeftKeys = [], this.selectedRightKeys = [];
+  }
+  onInputChange(t, e) {
+    const l = t.detail.toLowerCase();
+    e === "left" ? (this.filterText = l, this.autoSearch && (this.appliedFilterText = l)) : (this.filterTextRight = l, this.autoSearch && (this.appliedFilterTextRight = l));
+  }
+  onInputKeyDown(t, e) {
+    !this.autoSearch && t.key === "Enter" && (e === "left" ? this.appliedFilterText = this.filterText : this.appliedFilterTextRight = this.filterTextRight);
+  }
+  getItemsForSide(t) {
+    return t === "left" ? this.options : this.value ?? [];
+  }
+  getSelectedKeysForSide(t) {
+    return t === "left" ? this.selectedLeftKeys : this.selectedRightKeys;
+  }
+  toggleSelection(t, e, l) {
+    const i = this.getItemsForSide(e), s = this.getSelectedKeysForSide(e), r = i.findIndex((c) => c.value === t.value), h = s.includes(t.value);
+    let d = [...s];
+    if (l != null && l.shiftKey) {
+      const c = e === "left" ? this.lastSelectedIndexLeft : this.lastSelectedIndexRight;
+      if (c !== null) {
+        const o = Math.min(c, r), f = Math.max(c, r), w = i.slice(o, f + 1).map((b) => b.value);
+        d = Array.from(/* @__PURE__ */ new Set([...d, ...w]));
+      }
+    } else
+      h ? d = s.filter((c) => c !== t.value) : d = [...s, t.value];
+    e === "left" ? (this.selectedLeftKeys = d, this.lastSelectedIndexLeft = r) : (this.selectedRightKeys = d, this.lastSelectedIndexRight = r);
+  }
+  areAllSelected(t) {
+    const e = this.getItemsForSide(t), l = this.getSelectedKeysForSide(t);
+    return e.length > 0 && e.every((i) => l.includes(i.value));
+  }
+  toggleSelectAll(t) {
+    const l = this.getItemsForSide(t).map((i) => i.value);
+    this.areAllSelected(t) ? t === "left" ? this.selectedLeftKeys = [] : this.selectedRightKeys = [] : t === "left" ? this.selectedLeftKeys = l : this.selectedRightKeys = l;
+  }
+  moveSelected(t, e) {
+    var c;
+    const l = this.getItemsForSide(t), i = this.getSelectedKeysForSide(t), s = l.filter((o) => i.includes(o.value)), h = [...this.getItemsForSide(e)];
+    s.forEach((o) => {
+      h.some((f) => f.value === o.value) || h.push(o);
+    });
+    const d = l.filter((o) => !i.includes(o.value));
+    t === "left" ? (this.options = d, this.selectedLeftKeys = [], this.value = h) : (this.value = d, this.selectedRightKeys = [], this.options = h), (c = this.onChange) == null || c.call(this, this.value), this.dispatchEvent(
+      new CustomEvent("onChange", {
+        detail: this.value
+      })
+    );
+  }
+  moveSingle(t, e, l) {
+    var i;
+    e === "left" ? (this.options = this.options.filter((s) => s.value !== t.value), (this.value ?? []).some((s) => s.value === t.value) || (this.value = [...this.value ?? [], t]), this.selectedLeftKeys = this.selectedLeftKeys.filter((s) => s !== t.value), this.appliedFilterTextRight = "") : (this.value = (this.value ?? []).filter((s) => s.value !== t.value), this.options.some((s) => s.value === t.value) || (this.options = [...this.options, t]), this.selectedRightKeys = this.selectedRightKeys.filter((s) => s !== t.value), this.appliedFilterText = ""), (i = this.onChange) == null || i.call(this, this.value), this.dispatchEvent(
+      new CustomEvent("onChange", {
+        detail: this.value
+      })
+    );
+  }
+  render() {
+    var t;
+    return v`<div class="container">
+            <div class="wrapper">
+                <label class="label">${this.label}</label>
+                <div class="tab">
+                    <div class="input">
+                        <lit-input
+                            placeholder=${S("Napr. fakturace...")}
+                            .onInput=${(e) => this.onInputChange(
+      new CustomEvent("onInput", { detail: e }),
+      "left"
+    )}
+                            @keydown=${(e) => this.onInputKeyDown(e, "left")}
+                            .onClear=${() => {
+      this.filterText = "", this.appliedFilterText = "";
+    }}
+                            .size="medium"
+                        ></lit-input>
+                    </div>
+
+                    <div class="content">
+                        <lit-menu tabindex="0" id="left-list">
+                            ${this.options.filter((e) => {
+      const l = e.title.toLowerCase(), i = this.appliedFilterText.toLowerCase();
+      return l.includes(i);
+    }).map((e) => {
+      const l = this.selectedLeftKeys.includes(e.value);
+      return v`
+                                        <lit-menu-item
+                                            class="no-select"
+                                            .key="${e.value}"
+                                            .id="${e.value}"
+                                            @click=${(i) => this.toggleSelection(e, "left", i)}
+                                            .isSelected=${l}
+                                        >
+                                            <div class="item">
+                                                <div class="item-text">${e.title}</div>
+
+                                                <div class="add-minus-icon">
+                                                    ${this.enableAssignmentsOrdering ? v`
+                                                              <div class="drag-handle">
+                                                                  <lit-icon
+                                                                      icon="hamburger"
+                                                                      size="1rem"
+                                                                      @click=${(i) => {
+        i.stopPropagation();
+      }}
+                                                                  ></lit-icon>
+                                                              </div>
+                                                          ` : null}
+
+                                                    <lit-icon
+                                                        .icon="${"add"}"
+                                                        size="1rem"
+                                                        @click=${(i) => {
+        i.stopPropagation(), this.moveSingle(e, "left", "right");
+      }}
+                                                    ></lit-icon>
+                                                </div>
+                                            </div>
+                                        </lit-menu-item>
+                                    `;
+    })}
+                        </lit-menu>
+                    </div>
+
+                    <div class="footer">
+                        <div class="checkbox">
+                            ${this.allowSelectAll ? v`
+                                      <lit-checkbox
+                                          .checked=${this.areAllSelected("left")}
+                                          @click=${() => this.toggleSelectAll("left")}
+                                      ></lit-checkbox>
+                                      <label>${S("Označit vše")}</label>
+                                  ` : null}
+                        </div>
+
+                        <div class="count">
+                            <label>${S("celkem") + ":"}</label>
+                            <label>${this.options.length}</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="wrapper middle">
+                <lit-icon-button
+                    .variant="${"text"}"
+                    .icon="${"add"}"
+                    @click=${() => this.moveSelected("left", "right")}
+                    .disabled="${K(this.selectedLeftKeys)}"
+                ></lit-icon-button>
+                <lit-icon-button
+                    .variant="${"text"}"
+                    .icon="${"minus"}"
+                    @click=${() => this.moveSelected("right", "left")}
+                    .disabled="${K(this.selectedRightKeys)}"
+                ></lit-icon-button>
+            </div>
+            <div class="wrapper">
+                <label class="label">${this.rightLabel}</label>
+                <div class="tab">
+                    <div class="input">
+                        ${this.allowRightSearch ? v`
+                                  <lit-input
+                                      placeholder=${S("Napr. fakturace...")}
+                                      .onInput=${(e) => this.onInputChange(
+      new CustomEvent("onInput", { detail: e }),
+      "right"
+    )}
+                                      @keydown=${(e) => this.onInputKeyDown(e, "right")}
+                                      .onClear=${() => {
+      this.filterTextRight = "", this.appliedFilterTextRight = "";
+    }}
+                                      .size="medium"
+                                  ></lit-input>
+                              ` : null}
+                    </div>
+                    <div class="content">
+                        <lit-menu tabindex="1" id="right-list">
+                            ${(this.value ?? []).filter((e) => {
+      const l = e.title.toLowerCase(), i = this.appliedFilterTextRight.toLowerCase();
+      return l.includes(i);
+    }).map((e) => {
+      const l = this.selectedRightKeys.includes(e.value);
+      return v`
+                                        <lit-menu-item
+                                            class="no-select"
+                                            .key="${e.value}"
+                                            id="${e.value}"
+                                            @click=${(i) => this.toggleSelection(e, "right", i)}
+                                            .isSelected=${l}
+                                        >
+                                            <div class="item">
+                                                <div class="item-text">${e.title}</div>
+                                                <div class="add-minus-icon">
+                                                    ${this.enableAssignmentsOrdering ? v`
+                                                              <div class="drag-handle">
+                                                                  <lit-icon
+                                                                      icon="hamburger"
+                                                                      size="1rem"
+                                                                      @click=${(i) => {
+        i.stopPropagation();
+      }}
+                                                                  ></lit-icon>
+                                                              </div>
+                                                          ` : null}
+                                                    <lit-icon
+                                                        .icon="${"minus"}"
+                                                        size="1rem"
+                                                        @click=${(i) => {
+        i.stopPropagation(), this.moveSingle(e, "right", "left");
+      }}
+                                                    ></lit-icon>
+                                                </div>
+                                            </div>
+                                        </lit-menu-item>
+                                    `;
+    })}
+                        </lit-menu>
+                    </div>
+                    <div class="footer">
+                        <div class="checkbox">
+                            ${this.allowSelectAll ? v`
+                                      <lit-checkbox
+                                          .checked=${this.areAllSelected("right")}
+                                          @click=${() => this.toggleSelectAll("right")}
+                                      ></lit-checkbox>
+                                      <label>${S("Označit vše")}</label>
+                                  ` : null}
+                        </div>
+
+                        <div class="count">
+                            ${this.showRightTotal ? v`
+                                      <label>${S("celkem") + ":"}</label>
+                                      <label>${((t = this.value) == null ? void 0 : t.length) ?? 0}</label>
+                                  ` : null}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+  }
+};
+n.styles = [
+  T`
+            @media (max-width: 600px) {
+                .container {
+                    flex-direction: column;
+                }
+                .wrapper.middle {
+                    flex-direction: row !important;
+                    justify-content: center;
+                    height: auto !important;
+                    padding-top: 0 !important;
+                }
+            }
+
+            .container {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                height: 100%;
+                gap: 0.375rem;
+            }
+
+            .wrapper {
+                display: flex;
+                flex-direction: column;
+                flex: 1 1 0;
+                height: 100%;
+                min-width: 0;
+                min-height: 0;
+            }
+
+            .wrapper.middle {
+                flex: 0 0 auto;
+                flex-direction: column;
+                padding-top: 2rem;
+                gap: 0.5rem;
+                align-items: center;
+            }
+
+            .label {
+                font-weight: 500;
+                font-size: 14px;
+                color: var(--text-secondary, #5d6371);
+                line-height: 1.5rem;
+                padding-left: 0.875rem;
+                margin-bottom: 0.375rem;
+            }
+
+            .tab {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                border-radius: var(--border-radius-small, 0.5rem);
+                border: 1px solid var(--border-primary, #d0d3db);
+                padding: 0.5rem;
+                gap: 0.5rem;
+                min-height: 0;
+            }
+
+            .input {
+            }
+
+            .content {
+                flex-grow: 1;
+                overflow: auto;
+                min-height: 0;
+            }
+
+            .footer {
+                border-top: 1px solid var(--border-primary, #d0d3db);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                min-height: 2.375rem;
+            }
+
+            .footer.csv {
+                justify-content: end;
+            }
+
+            .csv-icon {
+                padding-right: 0.5rem;
+            }
+
+            .checkbox {
+                display: flex;
+                align-items: center;
+                padding: 0.25rem 0.5rem;
+                gap: 0.375rem;
+                font-size: 12px;
+                font-weight: 500;
+            }
+
+            .count {
+                display: flex;
+                align-items: center;
+                padding: 0.25rem 0.5rem;
+                gap: 0.375rem;
+                font-size: 12px;
+                font-weight: 400;
+            }
+
+            .item {
+                display: flex;
+                width: 100%;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .item-text {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .add-minus-icon {
+                visibility: hidden;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+
+            .item:hover .add-minus-icon {
+                visibility: visible;
+            }
+
+            .no-select {
+                user-select: none;
+                min-height: 2rem;
+            }
+        `
+];
+a([
+  m({ type: Array })
+], n.prototype, "value", 2);
+a([
+  m({ type: Array })
+], n.prototype, "options", 2);
+a([
+  m({ type: String })
+], n.prototype, "label", 2);
+a([
+  m({ type: String })
+], n.prototype, "rightLabel", 2);
+a([
+  m({ type: Boolean })
+], n.prototype, "allowRightSearch", 2);
+a([
+  m({ type: Boolean })
+], n.prototype, "allowSelectAll", 2);
+a([
+  m({ type: Boolean })
+], n.prototype, "showRightTotal", 2);
+a([
+  m({ type: Boolean })
+], n.prototype, "autoSearch", 2);
+a([
+  m({ type: Boolean })
+], n.prototype, "enableAssignmentsOrdering", 2);
+a([
+  m({ type: Function })
+], n.prototype, "onChange", 2);
+a([
+  y()
+], n.prototype, "filterText", 2);
+a([
+  y()
+], n.prototype, "filterTextRight", 2);
+a([
+  y()
+], n.prototype, "appliedFilterText", 2);
+a([
+  y()
+], n.prototype, "appliedFilterTextRight", 2);
+a([
+  y()
+], n.prototype, "selectedLeftKeys", 2);
+a([
+  y()
+], n.prototype, "selectedRightKeys", 2);
+a([
+  y()
+], n.prototype, "lastSelectedIndexLeft", 2);
+a([
+  y()
+], n.prototype, "lastSelectedIndexRight", 2);
+n = a([
+  C("lit-multiselect-item")
+], n);
+export {
+  n as LitMultiselectItem
+};