overview-components 1.0.75 → 1.0.77

package/dist/shared/lit-menu.js

@@ -0,0 +1,40 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as p } from "../node_modules/lit-element/lit-element.js";
+import { customElement as a } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { css as u } from "../node_modules/@lit/reactive-element/css-tag.js";
+var f = Object.getOwnPropertyDescriptor, c = (l, s, n, o) => {
+  for (var t = o > 1 ? void 0 : o ? f(s, n) : s, e = l.length - 1, i; e >= 0; e--)
+    (i = l[e]) && (t = i(t) || t);
+  return t;
+};
+let r = class extends p {
+  render() {
+    return m`
+            <ul>
+                <slot></slot>
+            </ul>
+        `;
+  }
+};
+r.styles = u`
+        :host {
+            outline: none;
+        }
+        ul {
+            display: flex;
+            list-style-type: none;
+            padding: 0;
+            gap: 0.25rem;
+            width: 100%;
+            flex-direction: column;
+            margin: 0;
+            height: 100%;
+        }
+    `;
+r = c([
+  a("lit-menu")
+], r);
+export {
+  r as LitMenu
+};

package/dist/shared/lit-modal.js

@@ -0,0 +1,128 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as h } from "../node_modules/lit-element/lit-element.js";
+import { customElement as c } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as s } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { css as p } from "../node_modules/@lit/reactive-element/css-tag.js";
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (e, i, a, l) => {
+  for (var t = l > 1 ? void 0 : l ? y(i, a) : i, d = e.length - 1, r; d >= 0; d--)
+    (r = e[d]) && (t = (l ? r(i, a, t) : r(t)) || t);
+  return l && t && u(i, a, t), t;
+};
+let o = class extends h {
+  constructor() {
+    super(...arguments), this.open = !1, this.closeOnOutsideClick = !0, this.fullScreen = !1, this._modalContainer = null, this._modalContent = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this._handleKeyDown.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeyDown.bind(this));
+  }
+  updated(e) {
+    e.has("open") && (this.open ? this._showModal() : this._hideModal());
+  }
+  _handleBackdropClick() {
+    this.closeOnOutsideClick && (this.open = !1);
+  }
+  _showModal() {
+    if (!this._modalContainer) {
+      this._modalContainer = document.createElement("div"), this._modalContainer.classList.add("my-modal-root"), this._modalContainer.innerHTML = `
+        <div class="my-modal-backdrop"></div>
+        <div class="my-modal-content"></div>
+      `, document.body.appendChild(this._modalContainer);
+      const e = this._modalContainer.querySelector(".my-modal-backdrop");
+      e && e.addEventListener("click", this._handleBackdropClick.bind(this)), this._modalContent = this._modalContainer.querySelector(".my-modal-content");
+    }
+    this._modalContent && (this._updateContentClass(), this._modalContent.appendChild(this)), document.addEventListener("keydown", this._handleKeyDown), this._applyGlobalStyles();
+  }
+  _hideModal() {
+    this._modalContainer && (document.removeEventListener("keydown", this._handleKeyDown), this._modalContainer.remove(), this._modalContainer = null), typeof this.onClose == "function" && this.onClose(), this.dispatchEvent(new CustomEvent("modal-close", { bubbles: !0, composed: !0 }));
+  }
+  _handleKeyDown(e) {
+    e.key === "Escape" && (this.open = !1);
+  }
+  _updateContentClass() {
+    this._modalContent && (this.fullScreen ? this._modalContent.classList.add("fullscreen") : this._modalContent.classList.remove("fullscreen"));
+  }
+  _applyGlobalStyles() {
+    if (!document.getElementById("my-modal-global-styles")) {
+      const e = document.createElement("style");
+      e.id = "my-modal-global-styles", e.textContent = `
+        .my-modal-root {
+          position: fixed;
+          top: 0; left: 0; right: 0; bottom: 0;
+          z-index: 10000;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .my-modal-backdrop {
+          position: absolute;
+          top: 0; left: 0; right: 0; bottom: 0;
+          background: rgba(0,0,0,0.5);
+        }
+        .my-modal-content {
+          position: relative;
+          background: var(--background-paper, #fff);
+          border-radius: 12px;
+          min-width: 40vw;
+          max-width: 90vw;
+          max-height: 90vh;
+          z-index: 1;
+          box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+            overflow: hidden;
+            gap: 0.5rem;
+          
+        }
+        .my-modal-content.fullscreen {
+          border-radius: 0;
+          width: 100vw;
+          height: 100vh;
+          max-width: 100vw;
+          max-height: 100vh;
+          padding: 0;
+          display: flex;
+        }
+      `, document.head.appendChild(e);
+    }
+  }
+  render() {
+    return m`<slot></slot>`;
+  }
+};
+o.styles = p`
+        :host {
+            display: none;
+            width: 100%;
+            height: 100vh;
+            @media (min-width: 768px) {
+                height: 100%;
+            }
+        }
+        :host([open]) {
+            display: block;
+        }
+    `;
+n([
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+n([
+  s({ type: Boolean })
+], o.prototype, "closeOnOutsideClick", 2);
+n([
+  s({ type: Function })
+], o.prototype, "onClose", 2);
+n([
+  s({ type: Boolean })
+], o.prototype, "fullScreen", 2);
+o = n([
+  c("lit-modal")
+], o);
+export {
+  o as LitModal
+};

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-progress-bar.js

@@ -1,18 +1,21 @@
 import { customElement as c } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
 import { property as n } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import { LitElement as g, html as d, css as v } from "lit";
-var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
-  for (var r = o > 1 ? void 0 : o ? f(t, i) : t, a = e.length - 1, p; a >= 0; a--)
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as g } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as d } from "../node_modules/lit-element/lit-element.js";
+import { css as m } from "../node_modules/@lit/reactive-element/css-tag.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? v(t, i) : t, a = e.length - 1, p; a >= 0; a--)
     (p = e[a]) && (r = (o ? p(t, i, r) : p(r)) || r);
-  return o && r && h(t, i, r), r;
+  return o && r && f(t, i, r), r;
 };
-let s = class extends g {
+let s = class extends d {
   constructor() {
     super(...arguments), this.label = "", this.progress = 0;
   }
   render() {
     const e = Math.min(100, Math.max(0, this.progress));
-    return d`
+    return g`
             <div class="container">
                 <div class="label">${this.label}</div>
                 <div class="progress-bar-container">
@@ -26,7 +29,7 @@ let s = class extends g {
   }
 };
 s.styles = [
-  v`
+  m`
             .container {
                 gap: 4px;
             }

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
+};