overview-components 1.0.77 → 1.0.79

package/dist/shared/lit-data-grid-action-buttons-popover.js

@@ -0,0 +1,258 @@
+import { customElement as k } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as g } 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 d } from "../node_modules/@lit/reactive-element/decorators/query.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as l } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as A } from "../node_modules/lit-element/lit-element.js";
+import { msg as p } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+import { computePosition as x, offset as y, flip as $, shift as O } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { css as P } from "../node_modules/@lit/reactive-element/css-tag.js";
+var E = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (e, i, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? w(i, t) : i, u = e.length - 1, a; u >= 0; u--)
+    (a = e[u]) && (s = (o ? a(i, t, s) : a(s)) || s);
+  return o && s && E(i, t, s), s;
+};
+let n = class extends A {
+  constructor() {
+    super(...arguments), this.pin = () => {
+    }, this.group = () => {
+    }, this.header = null, this.table = null, this.isOpen = !1, this.isSubmenuOpen = !1, this.currentAggregation = "", this._handleOutsideClick = (e) => {
+      e.composedPath().includes(this) || (this.isOpen = !1, this.isSubmenuOpen = !1);
+    };
+  }
+  connectedCallback() {
+    var e, i, t;
+    super.connectedCallback(), (t = (i = (e = this.header) == null ? void 0 : e.column) == null ? void 0 : i.columnDef) != null && t.aggregationFn && (this.currentAggregation = this.header.column.columnDef.aggregationFn), document.addEventListener("click", this._handleOutsideClick, { capture: !0 });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick, { capture: !0 });
+  }
+  toggleCustomPopover() {
+    this.isOpen = !this.isOpen, this.isOpen || (this.isSubmenuOpen = !1);
+  }
+  closePopover() {
+    this.isOpen = !1, this.isSubmenuOpen = !1;
+  }
+  handleAction(e) {
+    e(), this.closePopover();
+  }
+  openSubmenu(e) {
+    this.isSubmenuOpen = e;
+  }
+  setAggregation(e) {
+    this.currentAggregation = e;
+    const i = this.table.getState().grouping;
+    this.header.column.columnDef.aggregationFn = e;
+    const t = i.map((o) => (o === this.header.column.id && (this.header.column.columnDef.aggregationFn = e), o));
+    this.table.setGrouping(t), this.closePopover();
+  }
+  updated(e) {
+    super.updated(e), this.isOpen && this.mainTrigger && this.mainMenuEl && x(this.mainTrigger, this.mainMenuEl, {
+      placement: "bottom-end",
+      middleware: [y(0), $(), O({ padding: 5 })]
+    }).then(({ x: i, y: t }) => {
+      Object.assign(this.mainMenuEl.style, {
+        left: `${i}px`,
+        top: `${t}px`
+      });
+    }), this.isSubmenuOpen && this.submenuTriggerEl && this.submenuEl && x(this.submenuTriggerEl, this.submenuEl, {
+      placement: "right-start",
+      middleware: [y(0), $(), O({ padding: 5 })]
+    }).then(({ x: i, y: t }) => {
+      Object.assign(this.submenuEl.style, {
+        left: `${i}px`,
+        top: `${t}px`
+      });
+    });
+  }
+  render() {
+    var s, u, a, f, m, b, c, v;
+    if (!this.header)
+      return l``;
+    const e = ((u = (s = this.header.column) == null ? void 0 : s.getCanPin) == null ? void 0 : u.call(s)) || !1, i = ((f = (a = this.header.column) == null ? void 0 : a.getIsPinned) == null ? void 0 : f.call(a)) || !1, t = ((b = (m = this.header.column) == null ? void 0 : m.getCanGroup) == null ? void 0 : b.call(m)) || !1, o = ((v = (c = this.header.column) == null ? void 0 : c.getIsGrouped) == null ? void 0 : v.call(c)) || !1;
+    return l`
+            <lit-icon-button
+                class="main-menu-trigger"
+                size="small"
+                variant="text"
+                icon="more"
+                @click="${this.toggleCustomPopover}"
+            ></lit-icon-button>
+
+            <div class="menu ${this.isOpen ? "open" : ""}">
+                ${t ? l`
+                          <div
+                              class="menu-item ${o ? "active" : ""}"
+                              @click="${() => this.handleAction(this.group)}"
+                          >
+                              <lit-icon icon="agregation" size="1rem"></lit-icon>
+                              ${p("Seskupit sloupec")}
+                          </div>
+                      ` : null}
+                ${e ? l`
+                          <div
+                              class="menu-item ${i ? "active" : ""}"
+                              @click="${() => this.handleAction(this.pin)}"
+                          >
+                              <lit-icon icon="pin" size="1rem"></lit-icon>
+                              ${p("Připnout sloupec vlevo")}
+                          </div>
+                      ` : null}
+
+                <div
+                    class="menu-item submenu-trigger"
+                    @mouseenter="${() => this.openSubmenu(!0)}"
+                    @mouseleave="${() => this.openSubmenu(!1)}"
+                >
+                    ${p("Agregace")}
+                    <lit-icon icon="arrowRight" size="1rem"></lit-icon>
+                    <div class="submenu ${this.isSubmenuOpen ? "open" : ""}">
+                        <div
+                            class="menu-item ${this.currentAggregation === "sum" ? "selected" : ""}"
+                            @click="${() => this.setAggregation("sum")}"
+                        >
+                            sum
+                        </div>
+                        <div
+                            class="menu-item ${this.currentAggregation === "median" ? "selected" : ""}"
+                            @click="${() => this.setAggregation("median")}"
+                        >
+                            median
+                        </div>
+                        <div
+                            class="menu-item ${this.currentAggregation === "min" ? "selected" : ""}"
+                            @click="${() => this.setAggregation("min")}"
+                        >
+                            min
+                        </div>
+                        <div
+                            class="menu-item ${this.currentAggregation === "max" ? "selected" : ""}"
+                            @click="${() => this.setAggregation("max")}"
+                        >
+                            max
+                        </div>
+                        ${this.currentAggregation ? l`<div class="menu-item" @click="${() => this.setAggregation("")}">
+                                  ${p("zrušit")}
+                              </div>` : null}
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+};
+n.styles = [
+  P`
+            :host {
+                position: relative;
+                display: inline-block;
+            }
+
+            .menu {
+                display: none;
+                flex-direction: column;
+                background-color: var(--background-paper, #fff);
+                border-radius: 0.5rem;
+                padding: 0.375rem;
+                box-shadow: var(--box-shadow, 0px 4px 6px rgba(0, 0, 0, 0.1));
+                overflow-y: visible;
+                min-width: max-content;
+                z-index: 9999;
+                position: absolute;
+            }
+            .menu.open {
+                display: flex;
+            }
+
+            .menu-item {
+                padding: 0.375rem 0.625rem;
+                margin: 0 0 0.25rem;
+                font-size: 0.8125rem;
+                font-weight: 500;
+                text-align: left;
+                cursor: pointer;
+                color: var(--text-primary, #111827);
+                transition: background-color 0.2s;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+
+            .menu-item:hover {
+                background: var(--color-primary-light, #f0fadf);
+                border-radius: 4px;
+            }
+
+            .menu-item.selected {
+                background: var(--color-primary-light, #f0fadf);
+                font-weight: 600;
+                border-radius: 4px;
+            }
+
+            .active {
+                background: var(--color-primary-light, #f0fadf);
+                border-radius: 4px;
+            }
+
+            /* Submenu */
+            .submenu-trigger {
+                position: relative;
+            }
+
+            .submenu {
+                display: none;
+                flex-direction: column;
+                background-color: var(--background-paper, #fff);
+                border-radius: 0.5rem;
+                padding: 0.375rem;
+                box-shadow: var(--box-shadow, 0px 4px 6px rgba(0, 0, 0, 0.1));
+                overflow-y: visible;
+                z-index: 9999;
+                position: absolute;
+            }
+
+            .submenu.open {
+                display: flex;
+            }
+        `
+];
+r([
+  g({ type: Function })
+], n.prototype, "pin", 2);
+r([
+  g({ type: Function })
+], n.prototype, "group", 2);
+r([
+  g({ type: Object })
+], n.prototype, "header", 2);
+r([
+  g({ type: Object })
+], n.prototype, "table", 2);
+r([
+  h()
+], n.prototype, "isOpen", 2);
+r([
+  h()
+], n.prototype, "isSubmenuOpen", 2);
+r([
+  h()
+], n.prototype, "currentAggregation", 2);
+r([
+  d(".main-menu-trigger")
+], n.prototype, "mainTrigger", 2);
+r([
+  d(".menu")
+], n.prototype, "mainMenuEl", 2);
+r([
+  d(".submenu-trigger")
+], n.prototype, "submenuTriggerEl", 2);
+r([
+  d(".submenu")
+], n.prototype, "submenuEl", 2);
+n = r([
+  k("lit-data-grid-action-buttons-popover")
+], n);
+export {
+  n as LitDataGridActionButtonsPopover
+};

package/dist/shared/lit-data-grid-density-popover.js

@@ -0,0 +1,79 @@
+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 { customElement as y } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { msg as o } 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, h = Object.getOwnPropertyDescriptor, l = (e, n, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? h(n, r) : n, m = e.length - 1, p; m >= 0; m--)
+    (p = e[m]) && (t = (s ? p(n, r, t) : p(t)) || t);
+  return s && t && f(n, r, t), t;
+};
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.setDensity = (e) => {
+    };
+  }
+  handleDensity(e) {
+    typeof this.setDensity == "function" ? this.setDensity(e) : console.error("setDensity is not a function");
+  }
+  render() {
+    return c`
+            <lit-responsive-button
+                size="medium"
+                variant="text"
+                label=${o("Zobrazení")}
+                icon="rowmedium"
+                slot="reference"
+            ></lit-responsive-button>
+
+            <simple-popper placement="top-end">
+                <lit-menu>
+                    <lit-menu-item
+                        id="${1}"
+                        icon="rowmall"
+                        .onClick="${() => this.handleDensity("compact")}"
+                        .isActive="${this.density === "compact"}"
+                        >${o("Kompaktní")}
+                    </lit-menu-item>
+                    <lit-menu-item
+                        id="${2}"
+                        icon="rowmedium"
+                        .onClick="${() => this.handleDensity("standard")}"
+                        .isActive="${this.density === "standard"}"
+                        >${o("Standardní")}
+                    </lit-menu-item>
+                    <lit-menu-item
+                        id="${3}"
+                        icon="rowlarge"
+                        .onClick="${() => this.handleDensity("comfort")}"
+                        .isActive="${this.density === "comfort"}"
+                        >${o("Komfortní")}
+                    </lit-menu-item>
+                </lit-menu>
+            </simple-popper>
+        `;
+  }
+};
+i.styles = [
+  // styles,
+  u`
+            :host {
+                font-family: 'Inter', sans-serif;
+            }
+        `
+];
+l([
+  a({ type: Function })
+], i.prototype, "setDensity", 2);
+l([
+  a({ type: String })
+], i.prototype, "density", 2);
+i = l([
+  y("lit-data-grid-density-popover")
+], i);
+export {
+  i as LitDataGridDensityPopover
+};

package/dist/shared/lit-data-grid-export-popover.js

@@ -0,0 +1,66 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as d } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../node_modules/lit-element/lit-element.js";
+import { customElement as u } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { msg as m } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (o, r, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? v(r, s) : r, n = o.length - 1, l; n >= 0; n--)
+    (l = o[n]) && (t = (i ? l(r, s, t) : l(t)) || t);
+  return i && t && x(r, s, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.exportToExcel = () => {
+    }, this.exportToCsv = () => {
+    }, this.disabledButtons = !1;
+  }
+  handleExport(o) {
+    o();
+  }
+  render() {
+    return d`
+            <lit-responsive-button
+                size="medium"
+                variant="text"
+                label=${m("Export")}
+                icon="csv"
+                slot="reference"
+            ></lit-responsive-button>
+            <simple-popper placement="top-end">
+                <lit-menu>
+                    <lit-menu-item
+                        id="${1}"
+                        icon="csv"
+                        .onClick=${() => this.handleExport(this.exportToCsv)}
+                        .disabled=${this.disabledButtons}
+                        >${m("Export do CSV")}
+                    </lit-menu-item>
+                    <lit-menu-item
+                        id="${1}"
+                        icon="csv"
+                        .onClick=${() => this.handleExport(this.exportToExcel)}
+                        .disabled=${this.disabledButtons}
+                        >${m("Export do Excel")}
+                    </lit-menu-item>
+                </lit-menu>
+            </simple-popper>
+        `;
+  }
+};
+p([
+  a({ type: Function })
+], e.prototype, "exportToExcel", 2);
+p([
+  a({ type: Function })
+], e.prototype, "exportToCsv", 2);
+p([
+  a({ type: Boolean })
+], e.prototype, "disabledButtons", 2);
+e = p([
+  u("lit-data-grid-export-popover")
+], e);
+export {
+  e as LitDataGridExportPopover
+};

package/dist/shared/lit-data-grid-operators-popover.js

@@ -0,0 +1,94 @@
+import { customElement as m } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as o } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as u } 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 d } from "../node_modules/lit-element/lit-element.js";
+import { msg as h } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+import { css as f } from "../node_modules/@lit/reactive-element/css-tag.js";
+var O = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, p, n) => {
+  for (var r = n > 1 ? void 0 : n ? v(e, p) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (r = (n ? l(e, p, r) : l(r)) || r);
+  return n && r && O(e, p, r), r;
+};
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.setOperator = (t) => {
+    }, this.type = "string", this.disabled = !1, this.filterOperators = [], this.isOpen = !1, this._handleOutsideClick = (t) => {
+      t.composedPath().includes(this) || (this.isOpen = !1, document.removeEventListener("click", this._handleOutsideClick, { capture: !0 }));
+    };
+  }
+  handleOperator(t) {
+    typeof this.setOperator == "function" ? (this.operator = t, this.setOperator(t)) : console.error("setOperator is not a function");
+  }
+  async toggleCustomPopover(t) {
+    t.stopPropagation(), await this.updateComplete, this.isOpen = !this.isOpen, this.isOpen ? setTimeout(() => {
+      document.addEventListener("click", this._handleOutsideClick, { capture: !0 });
+    }, 0) : document.removeEventListener("click", this._handleOutsideClick, { capture: !0 });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick, { capture: !0 });
+  }
+  render() {
+    var t;
+    return c`
+            <lit-icon-button
+                icon="filter"
+                size="small"
+                variant="text"
+                slot="reference"
+                @click=${this.toggleCustomPopover}
+            >
+            </lit-icon-button>
+            <simple-popper placement="bottom-end" manualOpening=${!0} .showing=${this.isOpen}>
+                <lit-menu>
+                    ${(t = this.filterOperators) == null ? void 0 : t.map(
+      (e) => c`
+                            <lit-menu-item
+                                .onClick="${() => this.handleOperator(e.value)}"
+                                .isActive="${this.operator === e.value}"
+                            >
+                                ${h(e.label)}
+                            </lit-menu-item>
+                        `
+    )}
+                </lit-menu>
+            </simple-popper>
+        `;
+  }
+};
+i.styles = [
+  f`
+            :host {
+                font-family: 'Inter', sans-serif;
+            }
+            .disabled {
+                background-color: #f8f8f8;
+            }
+        `
+];
+s([
+  o({ type: Function })
+], i.prototype, "setOperator", 2);
+s([
+  o({ type: String })
+], i.prototype, "type", 2);
+s([
+  o({ type: String })
+], i.prototype, "operator", 2);
+s([
+  o({ type: Boolean })
+], i.prototype, "disabled", 2);
+s([
+  o({ type: Array })
+], i.prototype, "filterOperators", 2);
+s([
+  u()
+], i.prototype, "isOpen", 2);
+i = s([
+  m("lit-data-grid-operators-popover")
+], i);
+export {
+  i as LitDataGridOperatorsPopover
+};

package/dist/shared/lit-data-grid-row-actions.js

@@ -0,0 +1,73 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../node_modules/lit-element/lit-element.js";
+import { customElement as m } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as d } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { tooltip as f } from "./simple-tooltip.js";
+var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, p = (l, e, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? h(e, t) : e, r = l.length - 1, s; r >= 0; r--)
+    (s = l[r]) && (o = (i ? s(e, t, o) : s(o)) || o);
+  return i && o && u(e, t, o), o;
+};
+let a = class extends c {
+  constructor() {
+    super(...arguments), this.buttons = [];
+  }
+  handleOnClick(l, e) {
+    l.stopPropagation(), e();
+  }
+  render() {
+    const l = this.buttons.filter((t) => !t.showInMenu), e = this.buttons.filter((t) => t.showInMenu);
+    return n`
+            <div
+                style="display: flex; height: 100%; align-items: center; justify-content: flex-end;"
+            >
+                ${l.map(
+      (t) => n`
+                        <lit-icon-button
+                            variant="text"
+                            size="small"
+                            .icon="${t.icon}"
+                            @click="${(i) => this.handleOnClick(i, t.onClick)}"
+                            .disabled="${t.disabled}"
+                            .marked="${t.marked}"
+                            ${f(t.label, "left")}
+                        ></lit-icon-button>
+                    `
+    )}
+                ${e.length > 0 ? n` <lit-icon-button
+                              size="small"
+                              variant="text"
+                              icon="morevertical"
+                              slot="reference"
+                              @click="${(t) => t.stopPropagation()}"
+                          ></lit-icon-button>
+                          <simple-popper offset="0" placement="bottom-end">
+                              <lit-menu>
+                                  ${e.map(
+      (t) => n`
+                                          <lit-menu-item
+                                              id="${t.id}"
+                                              icon="${t.icon}"
+                                              .onClick="${(i) => this.handleOnClick(i, t.onClick)}"
+                                              .disabled="${t.disabled}"
+                                          >
+                                              ${t.label}
+                                          </lit-menu-item>
+                                      `
+    )}
+                              </lit-menu>
+                          </simple-popper>` : null}
+            </div>
+        `;
+  }
+};
+p([
+  d({ type: Array })
+], a.prototype, "buttons", 2);
+a = p([
+  m("lit-data-grid-row-actions")
+], a);
+export {
+  a as LitDataGridRowActions
+};