overview-components 1.0.98 → 1.0.99

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

@@ -1,530 +0,0 @@
-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 "../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as v } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as L } from "../node_modules/lit-element/lit-element.js";
-import { msg as S } from "../node_modules/@lit/localize/init/install.js";
-import "../node_modules/@lit/localize/init/runtime.js";
-import R from "../node_modules/sortablejs/modular/sortable.esm.js";
-import { l as K } from "../node_modules/lodash/lodash.js";
-import { css as T } from "../node_modules/@lit/reactive-element/css-tag.js";
-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.isEmpty(this.selectedLeftKeys)}"
-                ></lit-icon-button>
-                <lit-icon-button
-                    .variant="${"text"}"
-                    .icon="${"minus"}"
-                    @click=${() => this.moveSelected("right", "left")}
-                    .disabled="${K.isEmpty(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
-};

package/dist/components/lit-section-tab.js

@@ -1,133 +0,0 @@
-import { customElement as d } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as g } from "../node_modules/@lit/reactive-element/decorators/state.js";
-import "../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as c } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as m } from "../node_modules/lit-element/lit-element.js";
-import { styleMap as h } from "../node_modules/lit-html/directives/style-map.js";
-import { msg as b } from "../node_modules/@lit/localize/init/install.js";
-import "../node_modules/@lit/localize/init/runtime.js";
-import { css as u } from "../node_modules/@lit/reactive-element/css-tag.js";
-var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (i, t, n, r) => {
-  for (var o = r > 1 ? void 0 : r ? y(t, n) : t, l = i.length - 1, p; l >= 0; l--)
-    (p = i[l]) && (o = (r ? p(t, n, o) : p(o)) || o);
-  return r && o && f(t, n, o), o;
-};
-let e = class extends m {
-  constructor() {
-    super(...arguments), this.sx = {}, this.enableSettings = !1, this.userLang = "cs", this.allowedLang = ["cs"], this.onSettingsChanged = () => {
-    }, this.isOpenModal = !1;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  onSettingsChangedCallback(i) {
-    var t;
-    this.settingsValue = { ...i }, (t = this.onSettingsChanged) == null || t.call(this, this.settingsValue);
-  }
-  toggleModal() {
-    this.isOpenModal = !this.isOpenModal;
-  }
-  render() {
-    var i, t, n;
-    return c` <div part="section-header-settings" class="section-header">
-                <lit-icon
-                    size="1rem"
-                    .icon="${((i = this.settingsValue) == null ? void 0 : i.titleIcon) || "documents"}"
-                ></lit-icon>
-                <div class="section-title">
-                    ${((t = this.settingsValue) == null ? void 0 : t[`titleLabel_${this.userLang}`]) || ((n = this.settingsValue) == null ? void 0 : n.titleLabel) || b("Zadejte název")}
-                </div>
-                ${this.enableSettings ? c`
-                          <lit-icon
-                              style="cursor: pointer"
-                              @click="${this.toggleModal}"
-                              icon="cog"
-                              size="1rem"
-                          ></lit-icon>
-                      ` : null}
-            </div>
-            <section-tab-settings
-                .settingsValue="${this.settingsValue}"
-                .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
-                .allowedLang="${this.allowedLang}"
-                .onClose="${() => {
-      this.isOpenModal = !1;
-    }}"
-                .isOpenModal="${this.isOpenModal}"
-            >
-            </section-tab-settings>
-
-            <div class="section-tab" style=${h(this.sx)}>
-                <slot></slot>
-            </div>`;
-  }
-};
-e.styles = [
-  u`
-            .section-tab {
-                background: var(--background-paper, #ffffff);
-                border-radius: 0.75rem;
-                padding: var(--section-padding, 0.75rem 1rem);
-                box-sizing: border-box;
-                width: 100%;
-            }
-
-            .section-header {
-                display: flex;
-                gap: 0.5rem;
-                align-items: center;
-                padding: 0.625rem 1rem 0.625rem 1rem;
-                text-transform: uppercase;
-            }
-
-            .section-title {
-                font-size: 0.6875rem;
-                color: var(--text-secondary, #5d6371);
-                font-weight: 600 !important;
-            }
-
-            .input-label {
-                margin: 0 0.5rem;
-                width: 18.75rem;
-            }
-
-            .popper-input {
-                margin-bottom: 0.5rem;
-                position: sticky;
-                top: 0;
-                background-color: var(--background-paper, #fff);
-                z-index: 1;
-            }
-        `
-];
-s([
-  a({ type: Object })
-], e.prototype, "sx", 2);
-s([
-  a({ type: Boolean })
-], e.prototype, "enableSettings", 2);
-s([
-  a({ type: String })
-], e.prototype, "userLang", 2);
-s([
-  a({ type: Array })
-], e.prototype, "allowedLang", 2);
-s([
-  a({ type: Object })
-], e.prototype, "settingsValue", 2);
-s([
-  a({ attribute: !1 })
-], e.prototype, "onSettingsChanged", 2);
-s([
-  g()
-], e.prototype, "isOpenModal", 2);
-e = s([
-  d("lit-section-tab")
-], e);
-export {
-  e as LitSectionTab
-};