overview-components 1.0.79 → 1.0.80

package/dist/shared/filter-inputs.js

@@ -1,243 +1,344 @@
-import "../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as p } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as y } from "../node_modules/lit-element/lit-element.js";
-import d from "lodash";
-import { msg as m } from "../node_modules/@lit/localize/init/install.js";
-import "../node_modules/@lit/localize/init/runtime.js";
-import { customElement as v } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as h } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as f } from "../node_modules/@lit/reactive-element/decorators/state.js";
-/* empty css                                                */
-import { debounce as c } from "../utils/utils.js";
-import { css as $ } from "../node_modules/@lit/reactive-element/css-tag.js";
-var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, t, s, r) => {
-  for (var i = r > 1 ? void 0 : r ? b(t, s) : t, a = e.length - 1, l; a >= 0; a--)
-    (l = e[a]) && (i = (r ? l(t, s, i) : l(i)) || i);
-  return r && i && g(t, s, i), i;
+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;
 };
-let n = class extends y {
-  constructor() {
-    super(), this.minFilterCharacters = 0, this.server = !1, this.value = void 0, this.operator = void 0, this.filterOperators = [], this.valueOptions = [], this.filterVariant = [], this.isClickInside = !1, this.handleSetOperator = (e, t) => {
-      var s, r, i;
-      this.operator = (s = this.filterOperators.find((a) => a.value === e)) == null ? void 0 : s.value, ["isEmpty", "isNotEmpty"].includes(e) ? (this.value = null, (r = this.column) == null || r.setFilterValue({ value: this.value, operator: e })) : this.value && !(t != null && t.silent) && ((i = this.column) == null || i.setFilterValue({
-        value: this.value,
-        operator: this.operator
-      }));
-    }, this.debouncedSetTextFilter = c((e) => {
-      this.checkNumberOfCharacters(e, () => {
-        this.handleSetFilter(e);
-      });
-    }), this.debouncedSetNumberFilter = c((e) => {
-      this.handleSetFilter(e);
-    });
-  }
-  checkNumberOfCharacters(e, t) {
-    (d.isEmpty(e) || e.length >= this.minFilterCharacters) && t();
-  }
-  updated(e) {
-    var t, s, r, i, a;
-    if (e.has("column") && (this.filterVariant === "select" || this.filterVariant === "multiselect"))
-      if ((s = (t = this.column) == null ? void 0 : t.columnDef) != null && s.meta.valueOptions || this.server)
-        this.valueOptions = ((i = (r = this.column) == null ? void 0 : r.columnDef) == null ? void 0 : i.meta.valueOptions) || [];
-      else {
-        const l = Array.from(
-          (a = this.column) == null ? void 0 : a.getFacetedUniqueValues().keys()
-        ).sort().slice(0, 5e3);
-        this.valueOptions = l.map((u) => ({
-          value: u,
-          label: u
-        }));
-      }
-  }
-  handleSetFilter(e) {
-    var t, s, r;
-    this.value = e, d.isEmpty(e) ? (r = this.column) == null || r.setFilterValue() : this.server ? (t = this.column) == null || t.setFilterValue({ value: this.value, operator: this.operator }) : (s = this.column) == null || s.setFilterValue(this.value);
-  }
-  handleClearFilter() {
-    var e;
-    this.server && (this.operator = this.filterOperators[0].value), this.value = null, (e = this.column) == null || e.setFilterValue();
-  }
-  handleDateChange(e) {
-    d.isEqual(e, this.value) || this.handleSetFilter(e);
-  }
-  handleStartDateChange(e) {
-    this.startDate = e, this.handleFilterDateRangeChange();
-  }
-  handleEndDateChange(e) {
-    this.endDate = e, this.handleFilterDateRangeChange();
-  }
-  handleFilterDateRangeChange() {
-    !this.startDate && !this.endDate ? this.handleSetFilter(void 0) : this.handleSetFilter({ startDate: this.startDate, endDate: this.endDate });
-  }
-  handleKeyDown(e) {
-    if (e.key === "Enter") {
-      const t = e.target;
-      t && (this.handleSetFilter(t.value), this.requestUpdate());
-    } else if (e.key === "Tab") {
-      const t = this.getFocusableElements();
-      if (t.length <= 1) {
-        e.preventDefault(), this.dispatchEvent(
-          new CustomEvent("filter-tab", {
-            bubbles: !0,
-            composed: !0,
-            detail: {
-              direction: e.shiftKey ? "backward" : "forward",
-              currentFilter: this
+import { LitElement, html, css } from 'lit';
+import _ from 'lodash';
+import { msg } from '@lit/localize';
+import { customElement, property, state } from 'lit/decorators.js';
+import 'air-datepicker/air-datepicker.css';
+// components
+import './lit-icon.js';
+import './lit-icon-button.js';
+import './lit-select.js';
+import './lit-date-picker.js';
+import './lit-data-grid-operators-popover.js';
+import './lit-input.js';
+import { debounce } from '../utils/utils.js';
+let FilterInputs = class FilterInputs extends LitElement {
+    constructor() {
+        super();
+        this.minFilterCharacters = 0;
+        this.server = false;
+        this.value = undefined;
+        this.operator = undefined;
+        this.filterOperators = [];
+        this.valueOptions = [];
+        this.filterVariant = [];
+        this.isClickInside = false;
+        this.handleSetOperator = (value, opt) => {
+            this.operator = this.filterOperators.find((item) => item.value === value)?.value;
+            if (['isEmpty', 'isNotEmpty'].includes(value)) {
+                this.value = null;
+                this.column?.setFilterValue({ value: this.value, operator: value });
             }
-          })
-        );
-        return;
-      }
-      const s = e.target, r = t.indexOf(s);
-      if (e.shiftKey && r === 0 || !e.shiftKey && r === t.length - 1)
-        e.preventDefault(), this.dispatchEvent(
-          new CustomEvent("filter-tab", {
-            bubbles: !0,
-            composed: !0,
-            detail: {
-              direction: e.shiftKey ? "backward" : "forward",
-              currentFilter: this
+            else {
+                if (this.value && !opt?.silent) {
+                    this.column?.setFilterValue({
+                        value: this.value,
+                        operator: this.operator,
+                    });
+                }
             }
-          })
-        );
-      else {
-        e.preventDefault();
-        const i = e.shiftKey ? r - 1 : r + 1;
-        t[i].focus();
-      }
+        };
+        // Create debounced methods with 500ms delay
+        this.debouncedSetTextFilter = debounce((value) => {
+            this.checkNumberOfCharacters(value, () => {
+                this.handleSetFilter(value);
+            });
+        });
+        this.debouncedSetNumberFilter = debounce((value) => {
+            this.handleSetFilter(value);
+        });
     }
-  }
-  // Improved getFocusableElements to find all actual focusable elements
-  getFocusableElements() {
-    var i, a, l;
-    const e = [], t = (i = this.shadowRoot) == null ? void 0 : i.querySelectorAll("lit-input");
-    t && t.forEach((u) => e.push(u));
-    const s = (a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("lit-select");
-    s && s.forEach((u) => e.push(u));
-    const r = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll("lit-date-picker");
-    return r && r.forEach((u) => e.push(u)), e;
-  }
-  focus() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
-      "lit-input, lit-select, lit-date-picker"
-    );
-    e == null || e.focus();
-  }
-  render() {
-    return this.filterVariant === "numberRange" ? this.renderNumberRangeInput() : this.filterVariant === "select" ? this.renderSelectInput() : this.filterVariant === "multiselect" ? this.renderSelectInput(!0) : this.filterVariant === "number" ? this.renderNumberInput() : this.filterVariant === "currency" ? this.renderNumberInput() : this.filterVariant === "date" ? this.renderDateInput() : this.filterVariant === "dateTime" ? this.renderDateInput() : this.filterVariant === "dateRange" ? this.renderDateRangeInput() : this.filterVariant === "dateTimeRange" ? this.renderDateRangeInput() : this.renderTextInput();
-  }
-  renderNumberRangeInput() {
-    var t, s;
-    const e = c(
-      (r, i) => {
-        this.handleSetFilter([r, i]);
-      }
-    );
-    return p`
+    checkNumberOfCharacters(value, cf) {
+        if (!_.isEmpty(value)) {
+            if (value.length >= this.minFilterCharacters) {
+                cf();
+            }
+        }
+        else {
+            cf();
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('column')) {
+            if (this.filterVariant === 'select' || this.filterVariant === 'multiselect') {
+                if (this.column?.columnDef?.meta.valueOptions || this.server) {
+                    this.valueOptions = this.column?.columnDef?.meta.valueOptions || [];
+                }
+                else {
+                    const sortedUniqueValues = Array.from(this.column?.getFacetedUniqueValues().keys())
+                        .sort()
+                        .slice(0, 5000);
+                    this.valueOptions = sortedUniqueValues.map((value) => ({
+                        value,
+                        label: value,
+                    }));
+                }
+            }
+        }
+    }
+    handleSetFilter(value) {
+        this.value = value;
+        if (!_.isEmpty(value)) {
+            if (this.server) {
+                this.column?.setFilterValue({ value: this.value, operator: this.operator });
+            }
+            else {
+                this.column?.setFilterValue(this.value);
+            }
+        }
+        else {
+            this.column?.setFilterValue();
+        }
+    }
+    handleClearFilter() {
+        if (this.server) {
+            this.operator = this.filterOperators[0].value;
+        }
+        this.value = null;
+        this.column?.setFilterValue();
+    }
+    handleDateChange(value) {
+        if (!_.isEqual(value, this.value)) {
+            this.handleSetFilter(value);
+        }
+    }
+    handleStartDateChange(value) {
+        this.startDate = value;
+        this.handleFilterDateRangeChange();
+    }
+    handleEndDateChange(value) {
+        this.endDate = value;
+        this.handleFilterDateRangeChange();
+    }
+    handleFilterDateRangeChange() {
+        if (!this.startDate && !this.endDate) {
+            this.handleSetFilter(undefined);
+        }
+        else {
+            this.handleSetFilter({ startDate: this.startDate, endDate: this.endDate });
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            const target = event.target;
+            if (target) {
+                this.handleSetFilter(target.value);
+                this.requestUpdate();
+            }
+        }
+        else if (event.key === 'Tab') {
+            // Get all focusable elements within this filter
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length <= 1) {
+                // If there's only one or no focusable element, proceed with filter-to-filter navigation
+                event.preventDefault();
+                this.dispatchEvent(new CustomEvent('filter-tab', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        direction: event.shiftKey ? 'backward' : 'forward',
+                        currentFilter: this,
+                    },
+                }));
+                return;
+            }
+            // If there are multiple elements (like in range filters), handle internal navigation
+            const currentElement = event.target;
+            const currentIndex = focusableElements.indexOf(currentElement);
+            // If Shift+Tab on first element or Tab on last element, move to next/previous filter
+            if ((event.shiftKey && currentIndex === 0) ||
+                (!event.shiftKey && currentIndex === focusableElements.length - 1)) {
+                event.preventDefault();
+                this.dispatchEvent(new CustomEvent('filter-tab', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        direction: event.shiftKey ? 'backward' : 'forward',
+                        currentFilter: this,
+                    },
+                }));
+            }
+            else {
+                // Otherwise, just move to the next/previous internal element
+                event.preventDefault();
+                const nextIndex = event.shiftKey ? currentIndex - 1 : currentIndex + 1;
+                focusableElements[nextIndex].focus();
+            }
+        }
+    }
+    // Improved getFocusableElements to find all actual focusable elements
+    getFocusableElements() {
+        const elements = [];
+        // Check for regular inputs
+        const inputs = this.shadowRoot?.querySelectorAll('lit-input');
+        if (inputs) {
+            inputs.forEach((input) => elements.push(input));
+        }
+        // Check for lit-select components
+        const selects = this.shadowRoot?.querySelectorAll('lit-select');
+        if (selects) {
+            selects.forEach((select) => elements.push(select));
+        }
+        // Check for lit-date-picker components
+        const datePickers = this.shadowRoot?.querySelectorAll('lit-date-picker');
+        if (datePickers) {
+            datePickers.forEach((datePicker) => elements.push(datePicker));
+        }
+        return elements;
+    }
+    focus() {
+        const firstFocusable = this.shadowRoot?.querySelector('lit-input, lit-select, lit-date-picker');
+        firstFocusable?.focus();
+    }
+    render() {
+        if (this.filterVariant === 'numberRange') {
+            return this.renderNumberRangeInput();
+        }
+        else if (this.filterVariant === 'select') {
+            return this.renderSelectInput();
+        }
+        else if (this.filterVariant === 'multiselect') {
+            return this.renderSelectInput(true);
+        }
+        else if (this.filterVariant === 'number') {
+            return this.renderNumberInput();
+        }
+        else if (this.filterVariant === 'currency') {
+            return this.renderNumberInput();
+        }
+        else if (this.filterVariant === 'date') {
+            return this.renderDateInput();
+        }
+        else if (this.filterVariant === 'dateTime') {
+            return this.renderDateInput();
+        }
+        else if (this.filterVariant === 'dateRange') {
+            return this.renderDateRangeInput();
+        }
+        else if (this.filterVariant === 'dateTimeRange') {
+            return this.renderDateRangeInput();
+        }
+        else {
+            return this.renderTextInput();
+        }
+    }
+    renderNumberRangeInput() {
+        const debouncedSetRangeFilter = debounce((min, max) => {
+            this.handleSetFilter([min, max]);
+        });
+        return html `
             <div class="range">
                 <lit-input
                     class="range-fields"
                     type="number"
                     .server="${this.server}"
-                    .value="${((t = this.value) == null ? void 0 : t[0]) || ""}"
+                    .value="${this.value?.[0] || ''}"
                     placeholder="Min"
-                    .onInput=${(r) => {
-      var l;
-      const i = r ? Number(r) : void 0, a = (l = this.value) == null ? void 0 : l[1];
-      e(i, a);
-    }}
+                    .onInput=${(val) => {
+            const min = val ? Number(val) : undefined;
+            const currentMax = this.value?.[1];
+            debouncedSetRangeFilter(min, currentMax);
+        }}
                     .onClear="${() => {
-      this.handleClearFilter();
-    }}"
-                    @keydown=${(r) => this.handleKeyDown(r)}
+            this.handleClearFilter();
+        }}"
+                    @keydown=${(e) => this.handleKeyDown(e)}
                 ></lit-input>
 
                 <lit-input
                     class="range-fields"
                     type="number"
                     .server="${this.server}"
-                    .value="${((s = this.value) == null ? void 0 : s[1]) || ""}"
+                    .value="${this.value?.[1] || ''}"
                     placeholder="Max"
-                    .onInput=${(r) => {
-      var l;
-      const i = r ? Number(r) : void 0, a = (l = this.value) == null ? void 0 : l[0];
-      e(a, i);
-    }}
+                    .onInput=${(val) => {
+            const max = val ? Number(val) : undefined;
+            const currentMin = this.value?.[0];
+            debouncedSetRangeFilter(currentMin, max);
+        }}
                     .onClear="${() => {
-      this.handleClearFilter();
-    }}"
-                    @keydown=${(r) => this.handleKeyDown(r)}
+            this.handleClearFilter();
+        }}"
+                    @keydown=${(e) => this.handleKeyDown(e)}
                 ></lit-input>
             </div>
         `;
-  }
-  renderSelectInput(e = !1) {
-    return p`
+    }
+    renderSelectInput(multiselect = false) {
+        return html `
             <lit-select
                 id=${this.column.id}
-                .value="${typeof this.value == "number" ? this.value.toString() : this.value || []}"
+                .value="${typeof this.value === 'number'
+            ? this.value.toString()
+            : this.value || []}"
                 .server="${this.server}"
                 .options="${this.valueOptions}"
-                .onChange="${(t) => {
-      const s = t.length === 0 ? void 0 : t;
-      this.handleSetFilter(s);
-    }}"
-                .multiple="${e}"
-                @keydown=${(t) => this.handleKeyDown(t)}
+                .onChange="${(selectedValue) => {
+            const filterValue = selectedValue.length === 0 ? undefined : selectedValue;
+            this.handleSetFilter(filterValue);
+        }}"
+                .multiple="${multiselect}"
+                @keydown=${(e) => this.handleKeyDown(e)}
                 .setOperator="${this.handleSetOperator}"
                 .operator="${this.operator}"
                 .filterOperators="${this.filterOperators}"
             ></lit-select>
         `;
-  }
-  renderNumberInput() {
-    return p`
+    }
+    renderNumberInput() {
+        return html `
             <lit-input
                 type="number"
-                .value="${this.value || ""}"
+                .value="${this.value || ''}"
                 .server="${this.server}"
-                .onInput=${(e) => this.debouncedSetNumberFilter(e)}
+                .onInput=${(val) => this.debouncedSetNumberFilter(val)}
                 .onClear="${() => {
-      this.handleClearFilter();
-    }}"
+            this.handleClearFilter();
+        }}"
                 @keydown=${(e) => this.handleKeyDown(e)}
                 .setOperator="${this.handleSetOperator}"
                 .operator="${this.operator}"
-                .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
+                .disabled="${this.server &&
+            ['isEmpty', 'isNotEmpty'].includes(this.operator)}"
                 .filterOperators="${this.filterOperators}"
             ></lit-input>
         `;
-  }
-  renderDateInput() {
-    return p`
+    }
+    renderDateInput() {
+        return html `
             <lit-date-picker
                 class="datePicker"
                 .server="${this.server}"
-                .pickerVariant=${this.filterVariant || ""}
+                .pickerVariant=${this.filterVariant || ''}
                 .value=${this.value}
                 .dateFormat=${this.dateFormat}
                 .userLang=${this.userLang}
-                .onChange="${(e) => this.handleDateChange(e)}"
+                .onChange="${(value) => this.handleDateChange(value)}"
                 @keydown=${(e) => this.handleKeyDown(e)}
                 .setOperator="${this.handleSetOperator}"
                 .operator="${this.operator}"
-                .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
-                .range="${["fromTo"].includes(this.operator)}"
+                .disabled="${this.server &&
+            ['isEmpty', 'isNotEmpty'].includes(this.operator)}"
+                .range="${['fromTo'].includes(this.operator)}"
                 .filterOperators="${this.filterOperators}"
             ></lit-date-picker>
         `;
-  }
-  renderDateRangeInput() {
-    return p`
+    }
+    renderDateRangeInput() {
+        return html `
             <div class="range">
                 <lit-date-picker
                     class="range-fields"
                     .server="${this.server}"
                     .dateFormat=${this.dateFormat}
                     .userLang=${this.userLang}
-                    placeholder=${m("Od")}
-                    .onChange="${(e) => this.handleStartDateChange(e)}"
+                    placeholder=${msg('Od')}
+                    .onChange="${(value) => this.handleStartDateChange(value)}"
                     @keydown=${(e) => this.handleKeyDown(e)}
                 ></lit-date-picker>
 
@@ -246,32 +347,33 @@ let n = class extends y {
                     .server="${this.server}"
                     .dateFormat=${this.dateFormat}
                     .userLang=${this.userLang}
-                    placeholder=${m("Do")}
-                    .onChange="${(e) => this.handleEndDateChange(e)}"
+                    placeholder=${msg('Do')}
+                    .onChange="${(value) => this.handleEndDateChange(value)}"
                     @keydown=${(e) => this.handleKeyDown(e)}
                 ></lit-date-picker>
             </div>
         `;
-  }
-  renderTextInput() {
-    return p`
+    }
+    renderTextInput() {
+        return html `
             <lit-input
                 .value="${this.value}"
                 .server="${this.server}"
-                .onInput=${(e) => this.debouncedSetTextFilter(e)}
+                .onInput=${(val) => this.debouncedSetTextFilter(val)}
                 .onClear="${() => {
-      this.handleClearFilter();
-    }}"
+            this.handleClearFilter();
+        }}"
                 @keydown=${(e) => this.handleKeyDown(e)}
                 .setOperator="${this.handleSetOperator}"
                 .operator="${this.operator}"
-                .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
+                .disabled="${this.server &&
+            ['isEmpty', 'isNotEmpty'].includes(this.operator)}"
                 .filterOperators="${this.filterOperators}"
             ></lit-input>
         `;
-  }
+    }
 };
-n.styles = $`
+FilterInputs.styles = css `
         .range {
             display: flex;
             gap: 0.3125rem;
@@ -282,45 +384,44 @@ n.styles = $`
             min-width: 70px;
         }
     `;
-o([
-  h({ type: Object })
-], n.prototype, "column", 2);
-o([
-  h({ type: String })
-], n.prototype, "dateFormat", 2);
-o([
-  h({ type: String })
-], n.prototype, "userLang", 2);
-o([
-  h({ type: Number })
-], n.prototype, "minFilterCharacters", 2);
-o([
-  h({ type: Boolean })
-], n.prototype, "server", 2);
-o([
-  h({ type: Object })
-], n.prototype, "value", 2);
-o([
-  h({ type: String })
-], n.prototype, "operator", 2);
-o([
-  h({ type: Array })
-], n.prototype, "filterOperators", 2);
-o([
-  h({ type: Array })
-], n.prototype, "valueOptions", 2);
-o([
-  f()
-], n.prototype, "startDate", 2);
-o([
-  f()
-], n.prototype, "endDate", 2);
-o([
-  f()
-], n.prototype, "filterVariant", 2);
-n = o([
-  v("filter-inputs")
-], n);
-export {
-  n as FilterInputs
-};
+__decorate([
+    property({ type: Object })
+], FilterInputs.prototype, "column", void 0);
+__decorate([
+    property({ type: String })
+], FilterInputs.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: String })
+], FilterInputs.prototype, "userLang", void 0);
+__decorate([
+    property({ type: Number })
+], FilterInputs.prototype, "minFilterCharacters", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilterInputs.prototype, "server", void 0);
+__decorate([
+    property({ type: Object })
+], FilterInputs.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], FilterInputs.prototype, "operator", void 0);
+__decorate([
+    property({ type: Array })
+], FilterInputs.prototype, "filterOperators", void 0);
+__decorate([
+    property({ type: Array })
+], FilterInputs.prototype, "valueOptions", void 0);
+__decorate([
+    state()
+], FilterInputs.prototype, "startDate", void 0);
+__decorate([
+    state()
+], FilterInputs.prototype, "endDate", void 0);
+__decorate([
+    state()
+], FilterInputs.prototype, "filterVariant", void 0);
+FilterInputs = __decorate([
+    customElement('filter-inputs')
+], FilterInputs);
+export { FilterInputs };
+//# sourceMappingURL=filter-inputs.js.map