overview-components 1.0.97 → 1.0.99

package/dist/components/lit-filter-modal.js

@@ -1,312 +0,0 @@
-import { customElement as h } 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 n } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as f } 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 { getOperatorsByColumnType as m } from "../utils/getOperatorByType.js";
-import { css as v } from "../node_modules/@lit/reactive-element/css-tag.js";
-var g = Object.defineProperty, F = Object.getOwnPropertyDescriptor, u = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? F(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (i = (r ? o(t, a, i) : o(i)) || i);
-  return r && i && g(t, a, i), i;
-};
-let c = class extends f {
-  constructor() {
-    super(...arguments), this.columns = [], this.filterData = {
-      logicOperator: "and",
-      items: [{ field: "", operator: "", value: "" }]
-    };
-  }
-  firstUpdated() {
-    this.initializeDefaultFilterValues(), this.columns = this.columns.filter((e) => e.enableFilter !== !1);
-  }
-  getOperatorsForField(e) {
-    const t = this.columns.find((a) => a.field === e);
-    return t ? t.filterOperators ? t.filterOperators.map((a) => ({
-      value: a.value,
-      label: a.label
-    })) : m(t.type ?? "") : [];
-  }
-  initializeDefaultFilterValues() {
-    var e, t, a;
-    if (!this.filterData.items.length || this.filterData.items[0].field === "") {
-      const r = ((t = (e = this.columns) == null ? void 0 : e[0]) == null ? void 0 : t.field) || "", i = ((a = this.getOperatorsForField(r)[0]) == null ? void 0 : a.value) || "";
-      this.filterData = {
-        logicOperator: "and",
-        items: [{ field: r, operator: i, value: "" }]
-      }, this.requestUpdate();
-    }
-  }
-  createNewFilterData(e) {
-    return {
-      logicOperator: this.filterData.logicOperator,
-      items: e
-    };
-  }
-  addFilterRow() {
-    var i, l, o;
-    const e = ((l = (i = this.columns) == null ? void 0 : i[0]) == null ? void 0 : l.field) || "", t = ((o = this.getOperatorsForField(e)[0]) == null ? void 0 : o.value) || "", a = [
-      ...this.filterData.items,
-      { field: e, operator: t, value: "" }
-    ], r = this.createNewFilterData(a);
-    this.updateFilterData(r);
-  }
-  removeFilterRow(e) {
-    var r, i, l;
-    let t = [...this.filterData.items];
-    if (t.splice(e, 1), t.length === 0) {
-      const o = ((i = (r = this.columns) == null ? void 0 : r[0]) == null ? void 0 : i.field) || "", s = ((l = this.getOperatorsForField(o)[0]) == null ? void 0 : l.value) || "";
-      t = [{ field: o, operator: s, value: "" }];
-    }
-    const a = this.createNewFilterData(t);
-    this.updateFilterData(a);
-  }
-  removeAll() {
-    var r, i, l;
-    const e = ((i = (r = this.columns) == null ? void 0 : r[0]) == null ? void 0 : i.field) || "", t = ((l = this.getOperatorsForField(e)[0]) == null ? void 0 : l.value) || "", a = {
-      logicOperator: "and",
-      items: [{ field: e, operator: t, value: "" }]
-    };
-    this.updateFilterData(a);
-  }
-  updateFilterData(e) {
-    this.filterData = e, this.onFilterChange && this.onFilterChange(e);
-  }
-  handleLogicOperatorChange(e) {
-    const a = {
-      logicOperator: e === "or" ? "or" : "and",
-      items: [...this.filterData.items]
-    };
-    this.updateFilterData(a);
-  }
-  handleFieldChange(e, t) {
-    var l;
-    const a = ((l = this.getOperatorsForField(e)[0]) == null ? void 0 : l.value) || "=", r = [...this.filterData.items];
-    r[t] = {
-      ...r[t],
-      field: e,
-      operator: a,
-      value: ""
-    };
-    const i = this.createNewFilterData(r);
-    this.updateFilterData(i);
-  }
-  handleOperatorChange(e, t) {
-    var s;
-    const a = (s = this.filterData.items[t]) == null ? void 0 : s.operator, r = e, i = a === "fromTo" || r === "fromTo", l = [...this.filterData.items];
-    l[t] = {
-      ...l[t],
-      operator: r,
-      value: i ? "" : l[t].value
-    };
-    const o = this.createNewFilterData(l);
-    this.updateFilterData(o), i && (this.clearDatePicker(t), this.requestUpdate());
-  }
-  handleValueChange(e, t) {
-    const a = [...this.filterData.items];
-    a[t] = { ...a[t], value: e };
-    const r = this.createNewFilterData(a);
-    this.updateFilterData(r);
-  }
-  clearDatePicker(e) {
-    var a, r;
-    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("lit-date-picker")[e];
-    t && (t.value = "", (r = t.datePicker) == null || r.clear());
-  }
-  renderFilterRows() {
-    return (this.filterData.items.length > 0 ? this.filterData.items : [{ field: "", operator: "", value: "" }]).map((t, a) => this.renderFilterRow(t, a));
-  }
-  renderFilterRow(e, t) {
-    var i, l, o;
-    const a = ((i = this.columns.find((s) => s.field === e.field)) == null ? void 0 : i.type) || "string", r = this.getOperatorsForField(e.field);
-    return n`
-            <div class="filter-row">
-                ${t === 0 ? n`<div class="empty-space"></div>` : n`
-                          <div>
-                              <div class="input-header">
-                                  <span class="input-title">${p("Funkce")}</span>
-                              </div>
-                              <lit-select
-                                  id=${`logicOperator-${t}`}
-                                  .value=${this.filterData.logicOperator}
-                                  .options=${[
-      { value: "and", label: "AND" },
-      { value: "or", label: "OR" }
-    ]}
-                                  .onChange=${(s) => this.handleLogicOperatorChange(s)}
-                                  disableClearButton="true"
-                                  .disabled=${t > 1}
-                              ></lit-select>
-                          </div>
-                      `}
-
-                <div>
-                    <div class="input-header">
-                        <span class="input-title">${p("Sloupec")}</span>
-                    </div>
-                    <lit-select
-                        id=${`field-${t}`}
-                        .value=${(e == null ? void 0 : e.field) || ((l = this.columns[0]) == null ? void 0 : l.field)}
-                        .options=${this.columns.map((s) => ({
-      value: s.field,
-      label: s.headerName
-    }))}
-                        .onChange=${(s) => this.handleFieldChange(s, t)}
-                        disableClearButton="true"
-                    ></lit-select>
-                </div>
-
-                <div>
-                    <div class="input-header">
-                        <span class="input-title">${p("Podmínka")}</span>
-                    </div>
-                    <lit-select
-                        id=${`operator-${t}`}
-                        .value=${(e == null ? void 0 : e.operator) || ((o = r[0]) == null ? void 0 : o.value)}
-                        .options=${r}
-                        .onChange=${(s) => this.handleOperatorChange(s, t)}
-                        disableClearButton="true"
-                    ></lit-select>
-                </div>
-
-                ${e.operator === "isEmpty" || e.operator === "isNotEmpty" ? n`<div class="empty-space"></div>` : n` <div>
-                          <div class="input-header">
-                              <span class="input-title">${p("Hodnota")}</span>
-                          </div>
-                          ${this.renderValueInput(a, e, t)}
-                      </div>`}
-
-                <lit-icon-button
-                    style="margin-top: 1.3125rem"
-                    variant="text"
-                    icon="trash"
-                    @click=${() => this.removeFilterRow(t)}
-                ></lit-icon-button>
-            </div>
-        `;
-  }
-  renderValueInput(e, t, a) {
-    const r = this.columns.find((i) => i.field === t.field);
-    switch (e) {
-      case "number":
-        return n`
-                    <lit-input
-                        type="number"
-                        .value=${t.value ?? ""}
-                        .onInput=${(i) => this.handleValueChange(i, a)}
-                    ></lit-input>
-                `;
-      case "date":
-        return n`
-                    <lit-date-picker
-                        .value=${t.value ?? ""}
-                        .onChange=${(i) => this.handleValueChange(i, a)}
-                        .range=${t.operator === "fromTo"}
-                    ></lit-date-picker>
-                `;
-      case "select":
-        return n`
-                    <lit-select
-                        .value=${t.value ?? ""}
-                        .onChange=${(i) => this.handleValueChange(i, a)}
-                        .options=${r == null ? void 0 : r.valueOptions}
-                    ></lit-select>
-                `;
-      case "multiselect":
-        return n`
-                    <lit-select
-                        multiple="true"
-                        .value=${t.value ?? ""}
-                        .onChange=${(i) => this.handleValueChange(i, a)}
-                        .options=${r == null ? void 0 : r.valueOptions}
-                    ></lit-select>
-                `;
-      case "string":
-      default:
-        return n`
-                    <lit-input
-                        type="text"
-                        .value=${t.value ?? ""}
-                        .onInput=${(i) => this.handleValueChange(i, a)}
-                    ></lit-input>
-                `;
-    }
-  }
-  render() {
-    return n`
-            <div class="filters">${this.renderFilterRows()}</div>
-
-            <div class="action-buttons">
-                <lit-button
-                    variant="text"
-                    icon="add"
-                    label="${p("Nový filtr")}"
-                    @click=${this.addFilterRow}
-                >
-                </lit-button>
-                <lit-button
-                    variant="text"
-                    icon="trash"
-                    label="${p("Smazat vše")}"
-                    @click=${this.removeAll}
-                >
-                </lit-button>
-            </div>
-        `;
-  }
-};
-c.styles = [
-  v`
-            .filter-row {
-                display: grid;
-                grid-template-columns:
-                    minmax(120px, 1fr)
-                    minmax(160px, 1fr)
-                    minmax(160px, 1fr)
-                    minmax(160px, 1fr)
-                    auto;
-                gap: 12px;
-                align-items: center;
-                margin-bottom: 12px;
-            }
-            .empty-space {
-                visibility: hidden;
-            }
-            .input-header {
-                display: flex;
-                gap: 12px;
-                padding: 0 0 1px 16px;
-                align-items: center;
-            }
-            .input-title {
-                font-size: 15px;
-                font-weight: 500;
-                color: var(--text-secondary, #5d6371);
-            }
-            .action-buttons {
-                position: sticky;
-                bottom: 0;
-                left: 0;
-                display: flex;
-                justify-content: space-between;
-                background-color: var(--background-paper, #fff);
-            }
-        `
-];
-u([
-  d({ type: Array })
-], c.prototype, "columns", 2);
-u([
-  d({ type: Object })
-], c.prototype, "filterData", 2);
-u([
-  d({ type: Function })
-], c.prototype, "onFilterChange", 2);
-c = u([
-  h("lit-filter-modal")
-], c);
-export {
-  c as LitFilterModal
-};