overview-components 1.0.83 → 1.0.88

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

@@ -1,297 +1,260 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+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 { LitElement as f, html as n, css as v } from "lit";
+import { msg as p } from "@lit/localize";
+import { getOperatorsByColumnType as m } from "../utils/getOperatorByType.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;
 };
-import { customElement, property } from 'lit/decorators.js';
-import { css, html, LitElement } from 'lit';
-import { msg } from '@lit/localize';
-import '../shared/lit-icon.js';
-import '../shared/lit-select.js';
-import '../shared/lit-input.js';
-import '../shared/lit-date-picker.js';
-import '../shared/lit-button.js';
-import '../shared/lit-icon-button.js';
-import { getOperatorsByColumnType } from '../utils/getOperatorByType.js';
-let LitFilterModal = class LitFilterModal extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.columns = [];
-        this.filterData = {
-            logicOperator: 'and',
-            items: [{ field: '', operator: '', value: '' }],
-        };
+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();
     }
-    firstUpdated() {
-        this.initializeDefaultFilterValues();
-        this.columns = this.columns.filter((col) => col.enableFilter !== false);
+  }
+  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: "" }];
     }
-    getOperatorsForField(field) {
-        const column = this.columns.find((col) => col.field === field);
-        if (!column)
-            return [];
-        return column.filterOperators
-            ? column.filterOperators.map((op) => ({
-                value: op.value,
-                label: op.label,
-            }))
-            : getOperatorsByColumnType(column.type ?? '');
-    }
-    initializeDefaultFilterValues() {
-        if (!this.filterData.items.length || this.filterData.items[0].field === '') {
-            const firstColumn = this.columns?.[0]?.field || '';
-            const firstOperator = this.getOperatorsForField(firstColumn)[0]?.value || '';
-            this.filterData = {
-                logicOperator: 'and',
-                items: [{ field: firstColumn, operator: firstOperator, value: '' }],
-            };
-            this.requestUpdate();
-        }
-    }
-    createNewFilterData(items) {
-        return {
-            logicOperator: this.filterData.logicOperator,
-            items,
-        };
-    }
-    addFilterRow() {
-        const firstColumn = this.columns?.[0]?.field || '';
-        const firstOperator = this.getOperatorsForField(firstColumn)[0]?.value || '';
-        const newItems = [
-            ...this.filterData.items,
-            { field: firstColumn, operator: firstOperator, value: '' },
-        ];
-        const newData = this.createNewFilterData(newItems);
-        this.updateFilterData(newData);
-    }
-    removeFilterRow(index) {
-        let newItems = [...this.filterData.items];
-        newItems.splice(index, 1);
-        if (newItems.length === 0) {
-            const firstColumn = this.columns?.[0]?.field || '';
-            const firstOperator = this.getOperatorsForField(firstColumn)[0]?.value || '';
-            newItems = [{ field: firstColumn, operator: firstOperator, value: '' }];
-        }
-        const newData = this.createNewFilterData(newItems);
-        this.updateFilterData(newData);
-    }
-    removeAll() {
-        const firstColumn = this.columns?.[0]?.field || '';
-        const firstOperator = this.getOperatorsForField(firstColumn)[0]?.value || '';
-        const filterData = {
-            logicOperator: 'and',
-            items: [{ field: firstColumn, operator: firstOperator, value: '' }],
-        };
-        this.updateFilterData(filterData);
-    }
-    updateFilterData(newData) {
-        this.filterData = newData;
-        if (this.onFilterChange) {
-            this.onFilterChange(newData);
-        }
-    }
-    handleLogicOperatorChange(value) {
-        const logicOp = value === 'or' ? 'or' : 'and';
-        const newData = {
-            logicOperator: logicOp,
-            items: [...this.filterData.items],
-        };
-        this.updateFilterData(newData);
-    }
-    handleFieldChange(value, index) {
-        const firstOperator = this.getOperatorsForField(value)[0]?.value || '=';
-        const newItems = [...this.filterData.items];
-        newItems[index] = {
-            ...newItems[index],
-            field: value,
-            operator: firstOperator,
-            value: '',
-        };
-        const newData = this.createNewFilterData(newItems);
-        this.updateFilterData(newData);
-    }
-    handleOperatorChange(value, index) {
-        const oldOperator = this.filterData.items[index]?.operator;
-        const newOperator = value;
-        const shouldClearValue = oldOperator === 'fromTo' || newOperator === 'fromTo';
-        const newItems = [...this.filterData.items];
-        newItems[index] = {
-            ...newItems[index],
-            operator: newOperator,
-            value: shouldClearValue ? '' : newItems[index].value,
-        };
-        const newData = this.createNewFilterData(newItems);
-        this.updateFilterData(newData);
-        if (shouldClearValue) {
-            this.clearDatePicker(index);
-            this.requestUpdate();
-        }
-    }
-    handleValueChange(value, index) {
-        const newItems = [...this.filterData.items];
-        newItems[index] = { ...newItems[index], value };
-        const newData = this.createNewFilterData(newItems);
-        this.updateFilterData(newData);
-    }
-    clearDatePicker(index) {
-        const datePicker = this.shadowRoot?.querySelectorAll('lit-date-picker')[index];
-        if (datePicker) {
-            datePicker.value = '';
-            datePicker.datePicker?.clear();
-        }
-    }
-    renderFilterRows() {
-        const itemsToRender = this.filterData.items.length > 0
-            ? this.filterData.items
-            : [{ field: '', operator: '', value: '' }];
-        return itemsToRender.map((item, index) => this.renderFilterRow(item, index));
-    }
-    renderFilterRow(item, index) {
-        const columnType = this.columns.find((col) => col.field === item.field)?.type || 'string';
-        const operatorOptions = this.getOperatorsForField(item.field);
-        return html `
+    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">
-                ${index === 0
-            ? html `<div class="empty-space"></div>`
-            : html `
+                ${t === 0 ? n`<div class="empty-space"></div>` : n`
                           <div>
                               <div class="input-header">
-                                  <span class="input-title">${msg('Funkce')}</span>
+                                  <span class="input-title">${p("Funkce")}</span>
                               </div>
                               <lit-select
-                                  id=${`logicOperator-${index}`}
+                                  id=${`logicOperator-${t}`}
                                   .value=${this.filterData.logicOperator}
                                   .options=${[
-                { value: 'and', label: 'AND' },
-                { value: 'or', label: 'OR' },
-            ]}
-                                  .onChange=${(val) => this.handleLogicOperatorChange(val)}
+      { value: "and", label: "AND" },
+      { value: "or", label: "OR" }
+    ]}
+                                  .onChange=${(s) => this.handleLogicOperatorChange(s)}
                                   disableClearButton="true"
-                                  .disabled=${index > 1}
+                                  .disabled=${t > 1}
                               ></lit-select>
                           </div>
                       `}
 
                 <div>
                     <div class="input-header">
-                        <span class="input-title">${msg('Sloupec')}</span>
+                        <span class="input-title">${p("Sloupec")}</span>
                     </div>
                     <lit-select
-                        id=${`field-${index}`}
-                        .value=${item?.field || this.columns[0]?.field}
-                        .options=${this.columns.map((col) => ({
-            value: col.field,
-            label: col.headerName,
-        }))}
-                        .onChange=${(val) => this.handleFieldChange(val, index)}
+                        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">${msg('Podmínka')}</span>
+                        <span class="input-title">${p("Podmínka")}</span>
                     </div>
                     <lit-select
-                        id=${`operator-${index}`}
-                        .value=${item?.operator || operatorOptions[0]?.value}
-                        .options=${operatorOptions}
-                        .onChange=${(val) => this.handleOperatorChange(val, index)}
+                        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>
 
-                ${item.operator === 'isEmpty' || item.operator === 'isNotEmpty'
-            ? html `<div class="empty-space"></div>`
-            : html ` <div>
+                ${e.operator === "isEmpty" || e.operator === "isNotEmpty" ? n`<div class="empty-space"></div>` : n` <div>
                           <div class="input-header">
-                              <span class="input-title">${msg('Hodnota')}</span>
+                              <span class="input-title">${p("Hodnota")}</span>
                           </div>
-                          ${this.renderValueInput(columnType, item, index)}
+                          ${this.renderValueInput(a, e, t)}
                       </div>`}
 
                 <lit-icon-button
                     style="margin-top: 1.3125rem"
                     variant="text"
                     icon="trash"
-                    @click=${() => this.removeFilterRow(index)}
+                    @click=${() => this.removeFilterRow(t)}
                 ></lit-icon-button>
             </div>
         `;
-    }
-    renderValueInput(columnType, item, index) {
-        const column = this.columns.find((col) => col.field === item.field);
-        switch (columnType) {
-            case 'number':
-                return html `
+  }
+  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=${item.value ?? ''}
-                        .onInput=${(val) => this.handleValueChange(val, index)}
+                        .value=${t.value ?? ""}
+                        .onInput=${(i) => this.handleValueChange(i, a)}
                     ></lit-input>
                 `;
-            case 'date':
-                return html `
+      case "date":
+        return n`
                     <lit-date-picker
-                        .value=${item.value ?? ''}
-                        .onChange=${(val) => this.handleValueChange(val, index)}
-                        .range=${item.operator === 'fromTo'}
+                        .value=${t.value ?? ""}
+                        .onChange=${(i) => this.handleValueChange(i, a)}
+                        .range=${t.operator === "fromTo"}
                     ></lit-date-picker>
                 `;
-            case 'select':
-                return html `
+      case "select":
+        return n`
                     <lit-select
-                        .value=${item.value ?? ''}
-                        .onChange=${(val) => this.handleValueChange(val, index)}
-                        .options=${column?.valueOptions}
+                        .value=${t.value ?? ""}
+                        .onChange=${(i) => this.handleValueChange(i, a)}
+                        .options=${r == null ? void 0 : r.valueOptions}
                     ></lit-select>
                 `;
-            case 'multiselect':
-                return html `
+      case "multiselect":
+        return n`
                     <lit-select
                         multiple="true"
-                        .value=${item.value ?? ''}
-                        .onChange=${(val) => this.handleValueChange(val, index)}
-                        .options=${column?.valueOptions}
+                        .value=${t.value ?? ""}
+                        .onChange=${(i) => this.handleValueChange(i, a)}
+                        .options=${r == null ? void 0 : r.valueOptions}
                     ></lit-select>
                 `;
-            case 'string':
-            default:
-                return html `
+      case "string":
+      default:
+        return n`
                     <lit-input
                         type="text"
-                        .value=${item.value ?? ''}
-                        .onInput=${(val) => this.handleValueChange(val, index)}
+                        .value=${t.value ?? ""}
+                        .onInput=${(i) => this.handleValueChange(i, a)}
                     ></lit-input>
                 `;
-        }
     }
-    render() {
-        return html `
+  }
+  render() {
+    return n`
             <div class="filters">${this.renderFilterRows()}</div>
 
             <div class="action-buttons">
                 <lit-button
                     variant="text"
                     icon="add"
-                    label="${msg('Nový filtr')}"
+                    label="${p("Nový filtr")}"
                     @click=${this.addFilterRow}
                 >
                 </lit-button>
                 <lit-button
                     variant="text"
                     icon="trash"
-                    label="${msg('Smazat vše')}"
+                    label="${p("Smazat vše")}"
                     @click=${this.removeAll}
                 >
                 </lit-button>
             </div>
         `;
-    }
+  }
 };
-LitFilterModal.styles = [
-    css `
+c.styles = [
+  v`
             .filter-row {
                 display: grid;
                 grid-template-columns:
@@ -326,19 +289,20 @@ LitFilterModal.styles = [
                 justify-content: space-between;
                 background-color: var(--background-paper, #fff);
             }
-        `,
+        `
 ];
-__decorate([
-    property({ type: Array })
-], LitFilterModal.prototype, "columns", void 0);
-__decorate([
-    property({ type: Object })
-], LitFilterModal.prototype, "filterData", void 0);
-__decorate([
-    property({ type: Function })
-], LitFilterModal.prototype, "onFilterChange", void 0);
-LitFilterModal = __decorate([
-    customElement('lit-filter-modal')
-], LitFilterModal);
-export { LitFilterModal };
-//# sourceMappingURL=lit-filter-modal.js.map
+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
+};