overview-components 1.0.76 → 1.0.77

package/dist/shared/lit-pill.js

@@ -0,0 +1,86 @@
+import { customElement as c } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as d } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as a } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as m } from "../node_modules/lit-element/lit-element.js";
+import { css as u } from "../node_modules/@lit/reactive-element/css-tag.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, p = (t, r, o, s) => {
+  for (var i = s > 1 ? void 0 : s ? h(r, o) : r, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (i = (s ? l(r, o, i) : l(i)) || i);
+  return s && i && f(r, o, i), i;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.loading = !1;
+  }
+  render() {
+    const t = this.count !== void 0 && this.count !== null && this.count >= 0, r = this.loading, o = this.count && this.count < 100 ? this.count : "99+";
+    return t || r ? a`
+                <div class="pill--wrapper">
+                    ${t ? a` <div class="pill">${o}</div> ` : ""}
+                    ${r ? a` <div class="pill__loading-spinner"></div> ` : ""}
+                </div>
+            ` : null;
+  }
+};
+e.styles = [
+  // styles,
+  u`
+            .pill--wrapper {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 20px;
+                min-width: 20px;
+                background-color: var(--color-success-main, #76b703);
+                border-radius: 50px;
+            }
+
+            .pill {
+                padding: 0 0.375rem;
+                font-size: 0.6875rem;
+                font-weight: 600;
+                color: white;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                white-space: nowrap;
+                transition: background-color 0.3s ease;
+            }
+
+            .pill:disabled {
+                background-color: var(--color-primary-disabled, #d0d3db);
+            }
+
+            .pill__loading-spinner {
+                width: 20px;
+                height: 20px;
+                border: 2px solid var(--color-divider, #d0d3db);
+                border-top: 2px solid var(--color-primary-main, #76b703);
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+                position: absolute;
+            }
+
+            @keyframes spin {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+        `
+];
+p([
+  d({ type: Number })
+], e.prototype, "count", 2);
+p([
+  d({ type: Boolean })
+], e.prototype, "loading", 2);
+e = p([
+  c("lit-pill")
+], e);
+export {
+  e as LitPill
+};

package/dist/shared/lit-select.js

@@ -0,0 +1,339 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as c } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as d } from "../node_modules/lit-element/lit-element.js";
+import { msg as m } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+import { classMap as u } from "../node_modules/lit-html/directives/class-map.js";
+import { customElement as y } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as l } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as h } from "../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as f } from "../node_modules/@lit/reactive-element/decorators/query.js";
+import { css as v } from "../node_modules/@lit/reactive-element/css-tag.js";
+var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, r, n) => {
+  for (var i = n > 1 ? void 0 : n ? g(t, r) : t, a = e.length - 1, p; a >= 0; a--)
+    (p = e[a]) && (i = (n ? p(t, r, i) : p(i)) || i);
+  return n && i && b(t, r, i), i;
+};
+let s = class extends d {
+  constructor() {
+    super(...arguments), this.id = "", this.value = "", this.options = [], this.onChange = () => {
+    }, this.multiple = !1, this.disableClearButton = !1, this.disabled = !1, this.server = !1, this.setOperator = (e) => {
+    }, this.filterOperators = [], this.isOpen = !1, this.searchQuery = null, this.selectedIndex = -1, this.typeBuffer = "", this.typeTimeout = null, this.handleOutsideClick = (e) => {
+      const t = e.composedPath();
+      !t.includes(this) && !t.some(
+        (r) => r instanceof HTMLElement && r.tagName === "SIMPLE-POPPER"
+      ) && this.closePopover();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("focus", () => this.focus()), document.addEventListener("click", this.handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focus", () => this.focus()), document.removeEventListener("click", this.handleOutsideClick), this.closePopover();
+  }
+  firstUpdated() {
+    this.server && this.multiple && this.setOperator("isAnyOfValue");
+  }
+  async toggleCustomPopover() {
+    var e;
+    if (this.isOpen = !this.isOpen, !this.multiple) {
+      await this.updateComplete;
+      const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input");
+      this.selectedIndex = this.options.findIndex((r) => r.value === this.value), t && (t.focus(), t.select(), this.scrollToVisible());
+    }
+  }
+  scrollToVisible() {
+    const e = document.getElementById(`${this.id}-${this.selectedIndex}`);
+    e == null || e.scrollIntoView({ block: "center" });
+  }
+  closePopover() {
+    this.isOpen = !1, this.searchQuery = null, this.selectedIndex = -1;
+  }
+  selectOption(e) {
+    if (this.selectedIndex = this.options.findIndex((t) => t.value === e), this.multiple)
+      if (Array.isArray(this.value) && this.value.includes(e))
+        this.value = this.value.filter((t) => t !== e), this.onChange(this.value);
+      else {
+        const t = [...this.value, e];
+        this.value = t, this.onChange(this.value), this.searchQuery = null;
+      }
+    else
+      this.value = String(e), this.onChange(this.value), this.closePopover();
+  }
+  clearValue(e) {
+    e.stopPropagation(), this.value = [], this.onChange([]), this.searchQuery = null;
+  }
+  handleInput(e) {
+    this.searchQuery = e.target.value, this.isOpen = !0, this.selectedIndex = -1;
+  }
+  getFilteredOptions() {
+    return this.searchQuery ? this.options.filter(
+      (e) => {
+        var t, r;
+        return ((r = e.label) == null ? void 0 : r.toLowerCase().includes(((t = this.searchQuery) == null ? void 0 : t.toLowerCase()) || "")) && (!this.multiple || !this.value.includes(e.value));
+      }
+    ) : this.options;
+  }
+  async handleKeyDown(e) {
+    if (e.key === "Tab" || e.key === "Escape")
+      this.closePopover();
+    else if (e.key === "ArrowDown")
+      e.preventDefault(), this.isOpen ? this.selectedIndex = Math.min(
+        this.selectedIndex + 1,
+        this.getFilteredOptions().length - 1
+      ) : this.toggleCustomPopover();
+    else if (e.key === "ArrowUp")
+      e.preventDefault(), this.isOpen || this.toggleCustomPopover(), this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+    else if (e.key === "Enter")
+      this.selectedIndex >= 0 && this.selectOption(this.getFilteredOptions()[this.selectedIndex].value);
+    else if (/^[a-z0-9]$/i.test(e.key)) {
+      this.typeBuffer += e.key.toLowerCase(), this.typeTimeout && clearTimeout(this.typeTimeout), this.typeTimeout = window.setTimeout(() => {
+        this.typeBuffer = "";
+      }, 500);
+      const t = this.options.findIndex(
+        (r) => {
+          var n;
+          return (n = r.label) == null ? void 0 : n.toLowerCase().startsWith(this.typeBuffer);
+        }
+      );
+      t !== -1 && (this.selectedIndex = t);
+    }
+    this.scrollToVisible(), this.requestUpdate();
+  }
+  focus() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    e == null || e.focus();
+  }
+  _isTrulyEmpty(e) {
+    return e == null ? !0 : typeof e == "string" || Array.isArray(e) ? e.length === 0 : typeof e == "object" ? Object.keys(e).length === 0 : !1;
+  }
+  render() {
+    var n;
+    const e = this.multiple ? this.options : this.getFilteredOptions(), t = {
+      "dropdown-icon": !0,
+      "dropdown-icon--rotate": this.isOpen,
+      "dropdown-icon--no-filter": !this.server || this.server && this.multiple
+    }, r = this._isTrulyEmpty(this.value) ? "" : Array.isArray(this.value) ? this.value.map((i) => {
+      var a;
+      return ((a = this.options.find((p) => p.value == i)) == null ? void 0 : a.label) || i;
+    }).join(", ") : ((n = this.options.find((i) => i.value == this.value)) == null ? void 0 : n.label) || "";
+    return c`
+            <div class="custom-icon-wrapper" slot="reference">
+                <input
+                    ?readonly=${this.multiple}
+                    type="text"
+                    .value="${this.searchQuery ?? r ?? ""}"
+                    @input=${this.handleInput}
+                    @click="${this.toggleCustomPopover}"
+                    @keydown=${this.handleKeyDown}
+                    .disabled="${this.disabled}"
+                />
+                ${!this._isTrulyEmpty(this.value) && !this.disableClearButton ? c`
+                          <div
+                              class=${u({
+      "custom-icon": !0,
+      "custom-icon--no-filter": !this.server || this.server && this.multiple
+      // Trieda ak filter nie je
+    })}
+                              @click="${this.clearValue}"
+                          >
+                              <lit-icon-button
+                                  icon="close"
+                                  size="small"
+                                  variant="text"
+                              ></lit-icon-button>
+                          </div>
+                      ` : ""}
+                <div class="${u(t)}">
+                    <lit-icon
+                        class="${this.disabled ? "dropdown-icon-disabled" : null}"
+                        icon="chevrondown"
+                        size="17px"
+                    ></lit-icon>
+                </div>
+                ${this.server && !this.multiple ? c`<lit-data-grid-operators-popover
+                          class="filter-icon"
+                          .type="${this.multiple ? "multiselect" : "select"}"
+                          .setOperator="${(i) => {
+      this.setOperator(i);
+    }}"
+                          .operator="${this.operator}"
+                          .disabled="${this.disabled}"
+                          .filterOperators="${this.filterOperators}"
+                      ></lit-data-grid-operators-popover>` : null}
+            </div>
+            <simple-popper
+                .showing=${this.isOpen}
+                placement="bottom-start"
+                @close="${this.closePopover}"
+                manualOpening=${!0}
+                maxWidthAsTarget=${!0}
+                @keydown=${this.handleKeyDown}
+            >
+                <lit-menu tabindex="0" id="menu">
+                    ${(e == null ? void 0 : e.length) === 0 ? c`<lit-menu-item disabledButtons=${!0}>
+                              ${m("Nenalezeno")}</lit-menu-item
+                          > ` : e == null ? void 0 : e.map((i, a) => {
+      const p = Array.isArray(this.value) ? this.value.includes(i.value) : this.value === i.value;
+      return c`
+                                  <lit-menu-item
+                                      id="${this.id}-${a}"
+                                      .isActive=${this.selectedIndex === a || p && !this.multiple}
+                                      .onClick="${() => this.selectOption(i.value)}"
+                                  >
+                                      <span class="menu-item--multiple">
+                                          ${this.multiple ? c`<lit-checkbox
+                                                    class="cursor"
+                                                    .checked=${p}
+                                                ></lit-checkbox>` : ""}
+                                          ${i.label}
+                                      </span>
+                                  </lit-menu-item>
+                              `;
+    })}
+                </lit-menu>
+            </simple-popper>
+        `;
+  }
+};
+s.styles = v`
+        .custom-icon-wrapper {
+            position: relative;
+            width: 100%;
+            display: inline-block;
+            color: var(--text-primary, #111827);
+        }
+
+        input {
+            padding: 0.5rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            min-width: 70px;
+            width: -webkit-fill-available;
+            width: -moz-available;
+            width: fill-available;
+            background-color: var(--background-paper, #fff);
+            color: var(--text-primary, #111827);
+        }
+
+        input:hover {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+            cursor: pointer;
+        }
+
+        input:disabled {
+            cursor: inherit;
+        }
+
+        input:focus {
+            outline: none;
+            border: 0.0625rem solid var(--color-secondary-dark, #010204);
+        }
+
+        .custom-icon-wrapper:hover .custom-icon {
+            display: inline-block;
+        }
+
+        .custom-icon-wrapper .custom-icon {
+            display: none;
+            position: absolute;
+            right: 51px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .custom-icon-wrapper .custom-icon--no-filter {
+            right: 27px;
+        }
+
+        .custom-icon-wrapper .filter-icon {
+            display: block;
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .custom-icon-wrapper .dropdown-icon {
+            position: absolute;
+            right: 34px;
+            top: 50%;
+            transform: translateY(-50%);
+            pointer-events: none;
+        }
+
+        .custom-icon-wrapper .dropdown-icon--no-filter {
+            right: 10px;
+        }
+
+        .custom-icon-wrapper .dropdown-icon--rotate {
+            transform: translateY(-55%) rotate(180deg);
+        }
+
+        .dropdown-icon-disabled {
+            background: #f8f8f8;
+            color: #5d6371;
+        }
+
+        .menu-item--multiple {
+            display: flex;
+            align-items: center;
+        }
+    `;
+o([
+  l({ type: String })
+], s.prototype, "id", 2);
+o([
+  l({ type: Array })
+], s.prototype, "value", 2);
+o([
+  l({ type: Array })
+], s.prototype, "options", 2);
+o([
+  l({ type: Function })
+], s.prototype, "onChange", 2);
+o([
+  l({ type: Boolean })
+], s.prototype, "multiple", 2);
+o([
+  l({ type: Boolean })
+], s.prototype, "disableClearButton", 2);
+o([
+  l({ type: Boolean })
+], s.prototype, "disabled", 2);
+o([
+  l({ type: Boolean })
+], s.prototype, "server", 2);
+o([
+  l({ type: String })
+], s.prototype, "operator", 2);
+o([
+  l({ type: Function })
+], s.prototype, "setOperator", 2);
+o([
+  l({ type: Array })
+], s.prototype, "filterOperators", 2);
+o([
+  l({ reflect: !0, type: Boolean }),
+  h()
+], s.prototype, "isOpen", 2);
+o([
+  h()
+], s.prototype, "searchQuery", 2);
+o([
+  h()
+], s.prototype, "selectedIndex", 2);
+o([
+  f("#menu")
+], s.prototype, "menu", 2);
+s = o([
+  y("lit-select")
+], s);
+export {
+  s as LitSelect
+};

package/dist/shared/lit-tooltip.js

@@ -0,0 +1,137 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as c } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as f } from "../node_modules/lit-element/lit-element.js";
+import { customElement as g } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as v } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as h } from "../node_modules/@lit/reactive-element/decorators/query.js";
+import { autoUpdate as T, computePosition as w, offset as x, flip as y, shift as b, arrow as H } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { css as E } from "../node_modules/@lit/reactive-element/css-tag.js";
+var L = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (e, t, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? S(t, i) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (o = (s ? l(t, i, o) : l(o)) || o);
+  return s && o && L(t, i, o), o;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.placement = "top", this.cleanup = null, this.isHoveringTrigger = !1, this.isHoveringTooltip = !1, this.hideTimeout = null;
+  }
+  firstUpdated() {
+    const e = this.triggerSlot.assignedElements()[0], t = this.tooltipSlot.assignedElements()[0];
+    !e || !t || (e.addEventListener("mouseenter", () => {
+      this.isHoveringTrigger = !0, this.clearHideTimeout(), this.showTooltip(e, t);
+    }), e.addEventListener("mouseleave", () => {
+      this.isHoveringTrigger = !1, this.startHideTimeout();
+    }), e.addEventListener("focus", () => this.showTooltip(e, t)), e.addEventListener("blur", () => this.hideTooltip(t)), e.addEventListener("keydown", (i) => {
+      i.key === "Escape" && this.hideTooltip(t);
+    }), t.addEventListener("mouseenter", () => {
+      this.isHoveringTooltip = !0, this.clearHideTimeout();
+    }), t.addEventListener("mouseleave", () => {
+      this.isHoveringTooltip = !1, this.startHideTimeout();
+    }));
+  }
+  startHideTimeout() {
+    this.clearHideTimeout(), this.hideTimeout = window.setTimeout(() => {
+      if (!this.isHoveringTrigger && !this.isHoveringTooltip) {
+        const e = this.tooltipSlot.assignedElements()[0];
+        e && this.hideTooltip(e);
+      }
+    }, 200);
+  }
+  clearHideTimeout() {
+    this.hideTimeout !== null && (clearTimeout(this.hideTimeout), this.hideTimeout = null);
+  }
+  async showTooltip(e, t) {
+    t.setAttribute("data-visible", "");
+    let i = t.querySelector(".arrow");
+    i || (i = document.createElement("div"), i.classList.add("arrow"), t.appendChild(i)), this.cleanup = T(e, t, async () => {
+      const s = await w(e, t, {
+        placement: this.placement,
+        middleware: [x(8), y(), b({ padding: 5 }), H({ element: i })]
+      }), { x: o, y: a, placement: l, middlewareData: u } = s, { arrow: p } = u;
+      if (Object.assign(t.style, {
+        left: `${o}px`,
+        top: `${a}px`
+      }), p) {
+        const { x: d, y: m } = p;
+        Object.assign(i.style, {
+          left: d != null ? `${d}px` : "",
+          top: m != null ? `${m}px` : ""
+        });
+      }
+      i.setAttribute("data-placement", l);
+    });
+  }
+  hideTooltip(e) {
+    var t;
+    e.removeAttribute("data-visible"), (t = this.cleanup) == null || t.call(this), this.cleanup = null;
+  }
+  render() {
+    return c`
+            <slot name="trigger"></slot>
+            <slot name="tooltip"></slot>
+        `;
+  }
+};
+r.styles = E`
+        :host {
+            position: relative;
+            display: inline-block;
+        }
+
+        ::slotted([slot='tooltip']) {
+            position: absolute;
+            z-index: 9999;
+            background: #111;
+            color: #fff;
+            padding: 6px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            pointer-events: none;
+        }
+
+        ::slotted([slot='tooltip'][data-visible]) {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .arrow {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: inherit;
+            transform: rotate(45deg);
+        }
+
+        .arrow[data-placement^='top'] {
+            bottom: -4px;
+        }
+
+        .arrow[data-placement^='bottom'] {
+            top: -4px;
+        }
+
+        .arrow[data-placement^='left'] {
+            right: -4px;
+        }
+
+        .arrow[data-placement^='right'] {
+            left: -4px;
+        }
+    `;
+n([
+  v({ type: String })
+], r.prototype, "placement", 2);
+n([
+  h('slot[name="trigger"]')
+], r.prototype, "triggerSlot", 2);
+n([
+  h('slot[name="tooltip"]')
+], r.prototype, "tooltipSlot", 2);
+r = n([
+  g("perf-tooltip")
+], r);
+export {
+  r as PerfTooltip
+};