overview-components 1.0.98 → 1.0.99

package/dist/shared/filter-inputs.js

@@ -1,326 +0,0 @@
-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 "../node_modules/lodash/lodash.js";
-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;
-};
-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
-            }
-          })
-        );
-        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 {
-        e.preventDefault();
-        const i = e.shiftKey ? r - 1 : r + 1;
-        t[i].focus();
-      }
-    }
-  }
-  // 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`
-            <div class="range">
-                <lit-input
-                    class="range-fields"
-                    type="number"
-                    .server="${this.server}"
-                    .value="${((t = this.value) == null ? void 0 : t[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);
-    }}
-                    .onClear="${() => {
-      this.handleClearFilter();
-    }}"
-                    @keydown=${(r) => this.handleKeyDown(r)}
-                ></lit-input>
-
-                <lit-input
-                    class="range-fields"
-                    type="number"
-                    .server="${this.server}"
-                    .value="${((s = this.value) == null ? void 0 : s[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);
-    }}
-                    .onClear="${() => {
-      this.handleClearFilter();
-    }}"
-                    @keydown=${(r) => this.handleKeyDown(r)}
-                ></lit-input>
-            </div>
-        `;
-  }
-  renderSelectInput(e = !1) {
-    return p`
-            <lit-select
-                id=${this.column.id}
-                .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)}
-                .setOperator="${this.handleSetOperator}"
-                .operator="${this.operator}"
-                .filterOperators="${this.filterOperators}"
-            ></lit-select>
-        `;
-  }
-  renderNumberInput() {
-    return p`
-            <lit-input
-                type="number"
-                .value="${this.value || ""}"
-                .server="${this.server}"
-                .onInput=${(e) => this.debouncedSetNumberFilter(e)}
-                .onClear="${() => {
-      this.handleClearFilter();
-    }}"
-                @keydown=${(e) => this.handleKeyDown(e)}
-                .setOperator="${this.handleSetOperator}"
-                .operator="${this.operator}"
-                .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
-                .filterOperators="${this.filterOperators}"
-            ></lit-input>
-        `;
-  }
-  renderDateInput() {
-    return p`
-            <lit-date-picker
-                class="datePicker"
-                .server="${this.server}"
-                .pickerVariant=${this.filterVariant || ""}
-                .value=${this.value}
-                .dateFormat=${this.dateFormat}
-                .userLang=${this.userLang}
-                .onChange="${(e) => this.handleDateChange(e)}"
-                @keydown=${(e) => this.handleKeyDown(e)}
-                .setOperator="${this.handleSetOperator}"
-                .operator="${this.operator}"
-                .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
-                .range="${["fromTo"].includes(this.operator)}"
-                .filterOperators="${this.filterOperators}"
-            ></lit-date-picker>
-        `;
-  }
-  renderDateRangeInput() {
-    return p`
-            <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)}"
-                    @keydown=${(e) => this.handleKeyDown(e)}
-                ></lit-date-picker>
-
-                <lit-date-picker
-                    class="range-fields"
-                    .server="${this.server}"
-                    .dateFormat=${this.dateFormat}
-                    .userLang=${this.userLang}
-                    placeholder=${m("Do")}
-                    .onChange="${(e) => this.handleEndDateChange(e)}"
-                    @keydown=${(e) => this.handleKeyDown(e)}
-                ></lit-date-picker>
-            </div>
-        `;
-  }
-  renderTextInput() {
-    return p`
-            <lit-input
-                .value="${this.value}"
-                .server="${this.server}"
-                .onInput=${(e) => this.debouncedSetTextFilter(e)}
-                .onClear="${() => {
-      this.handleClearFilter();
-    }}"
-                @keydown=${(e) => this.handleKeyDown(e)}
-                .setOperator="${this.handleSetOperator}"
-                .operator="${this.operator}"
-                .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
-                .filterOperators="${this.filterOperators}"
-            ></lit-input>
-        `;
-  }
-};
-n.styles = $`
-        .range {
-            display: flex;
-            gap: 0.3125rem;
-        }
-
-        .range-fields {
-            width: 100%;
-            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
-};

package/dist/shared/lit-button.js

@@ -1,142 +0,0 @@
-import "../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as r } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as d } 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 e } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import m from "./styles/button-shared-styles.js";
-import { css as h } from "../node_modules/@lit/reactive-element/css-tag.js";
-var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, n, a, l) => {
-  for (var o = l > 1 ? void 0 : l ? f(n, a) : n, p = s.length - 1, c; p >= 0; p--)
-    (c = s[p]) && (o = (l ? c(n, a, o) : c(o)) || o);
-  return l && o && b(n, a, o), o;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.variant = "contained", this.size = "medium", this.label = "Button", this.fullWidth = !1, this.disabled = !1, this.count = void 0, this.active = !1, this.isLoading = !1;
-  }
-  render() {
-    const s = `button--${this.size} button--${this.variant} ${this.fullWidth ? "button--fullWidth" : ""} ${this.active ? "active" : ""}`, n = this.count !== void 0 && this.count !== null && this.count >= 0;
-    return r`
-            <button ?disabled=${this.disabled} @click=${this.onClick} class=${s}>
-                <div class="button--content">
-                    ${this.isLoading ? r` <lit-loader size="small" class="button--loader"></lit-loader> ` : null}
-
-                    <div
-                        class="button-inner"
-                        style="visibility: ${this.isLoading ? "hidden" : "visible"};
-                    "
-                    >
-                        <slot name="start-icon">
-                            ${this.icon ? r`<lit-icon
-                                      class="start-icon"
-                                      size="1.25rem"
-                                      icon="${this.icon}"
-                                  ></lit-icon>` : ""}
-                        </slot>
-                        ${this.label}
-                        ${n ? r`<lit-pill count=${this.count}></lit-pill>` : ""}
-                    </div>
-                </div>
-            </button>
-        `;
-  }
-};
-t.styles = [
-  // styles,
-  m,
-  h`
-            /* Basic button styles */
-            button {
-                line-height: 1.5rem;
-                flex-direction: row;
-                justify-content: center;
-            }
-
-            /* Size Variants */
-            .button--small {
-                -webkit-padding: 0.375rem 1rem;
-                padding: 0.1875rem 0.375rem;
-                font-size: 11px;
-            }
-            .button--medium {
-                font-size: 0.75rem;
-                font-weight: 500;
-                -webkit-padding: 0.375rem 0.75rem;
-                padding: 0.375rem 0.75rem;
-            }
-            .button--large {
-                font-weight: 700;
-                -webkit-padding: 0.75rem 1.5rem;
-                padding: 0.75rem 1.5rem;
-                font-size: 0.875rem;
-            }
-
-            /* FullWidth style */
-            .button--fullWidth {
-                width: 100%;
-                display: block;
-            }
-            ::slotted([slot='start-icon']),
-            .start-icon {
-                //margin-right: 8px;
-                font-size: 1.25rem !important;
-            }
-
-            .button--content {
-                position: relative;
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-            }
-
-            .button--loader {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-            }
-
-            .button-inner {
-                display: inline-flex;
-                align-items: center;
-                gap: 0.5rem;
-                visibility: visible;
-            }
-        `
-];
-i([
-  e({ type: String })
-], t.prototype, "variant", 2);
-i([
-  e({ type: String })
-], t.prototype, "size", 2);
-i([
-  e({ type: String })
-], t.prototype, "label", 2);
-i([
-  e({ type: String })
-], t.prototype, "icon", 2);
-i([
-  e({ type: Boolean })
-], t.prototype, "fullWidth", 2);
-i([
-  e({ type: Boolean })
-], t.prototype, "disabled", 2);
-i([
-  e({ type: Number })
-], t.prototype, "count", 2);
-i([
-  e({ type: Function })
-], t.prototype, "onClick", 2);
-i([
-  e({ type: Boolean })
-], t.prototype, "active", 2);
-i([
-  e({ type: Boolean })
-], t.prototype, "isLoading", 2);
-t = i([
-  u("lit-button")
-], t);
-export {
-  t as LitButton
-};

package/dist/shared/lit-checkbox.js

@@ -1,155 +0,0 @@
-import "../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as p } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as d } from "../node_modules/lit-element/lit-element.js";
-import { customElement as h } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as o } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as b } from "../node_modules/lit-html/directives/class-map.js";
-import { css as m } from "../node_modules/@lit/reactive-element/css-tag.js";
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (e, i, c, n) => {
-  for (var r = n > 1 ? void 0 : n ? f(i, c) : i, s = e.length - 1, l; s >= 0; s--)
-    (l = e[s]) && (r = (n ? l(i, c, r) : l(r)) || r);
-  return n && r && u(i, c, r), r;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.disabled = !1, this.checked = !1, this.indeterminate = !1, this.onChange = () => {
-    }, this.value = "", this.label = "";
-  }
-  // 1) Manually sync the indeterminate property on the <input>
-  updated(e) {
-    super.updated(e);
-    const i = this.renderRoot.querySelector(
-      'input[type="checkbox"]'
-    );
-    i && (i.indeterminate = this.indeterminate);
-  }
-  // 2) Intercept clicks when we're indeterminate
-  _onClick(e) {
-    this.indeterminate && (e.preventDefault(), this.indeterminate = !1, this._notifyChange(e));
-  }
-  // 3) Handle the native change event when not indeterminate
-  _onChange(e) {
-    this.checked = e.target.checked, this._notifyChange(e);
-  }
-  _notifyChange(e) {
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: e.target.checked
-      })
-    ), typeof this.onChange == "function" && this.onChange(e);
-  }
-  render() {
-    return p`
-            <div class="container">
-                ${this.label ? p`
-                          <lit-label label="${this.label}" ?disabled=${this.disabled}> </lit-label>
-                      ` : ""}
-                <input
-                    class=${b({
-      indeterminate: this.indeterminate,
-      marginLeft: this.label !== ""
-    })}
-                    type="checkbox"
-                    .checked=${this.checked}
-                    ?disabled=${this.disabled}
-                    @click=${this._onClick}
-                    @change=${this._onChange}
-                    .value=${this.value}
-                    aria-label="${this.label || "checkbox"}"
-                    aria-checked="${this.indeterminate ? "mixed" : this.checked ? "true" : "false"}"
-                    aria-disabled="${this.disabled ? "true" : "false"}"
-                />
-            </div>
-        `;
-  }
-};
-t.styles = m`
-        :host {
-            display: inline-block;
-            font-family: Inter, sans-serif;
-        }
-        .container {
-            display: flex;
-            flex-direction: column;
-        }
-        /* Hide the default checkbox */
-        .marginLeft {
-            margin-left: 0.75rem;
-        }
-        input[type='checkbox'] {
-            position: relative;
-            appearance: none;
-            width: 20px;
-            height: 20px;
-            border: 1px solid var(--text-primary, #111827);
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: var(--background-paper, #fff);
-            transition: all 0.1s ease-in-out;
-            cursor: pointer;
-        }
-
-        input[type='checkbox'].indeterminate {
-            background-color: var(--color-primary-main, #76b703);
-            border-color: var(--color-primary-main, #76b703);
-        }
-
-        input[type='checkbox'].indeterminate::after {
-            content: '−';
-            color: var(--background-default, #111827);
-            font-size: 16px;
-        }
-
-        /* Custom checkmark */
-        input[type='checkbox']::after {
-            content: '✓';
-            color: var(--background-paper, #111827);
-            font-size: 16px;
-            visible: none;
-        }
-
-        /* Checked state */
-        input[type='checkbox']:checked {
-            background-color: var(--color-primary-main, #76b703);
-            border-color: var(--color-primary-main, #76b703);
-        }
-
-        input[type='checkbox']:checked::after {
-            visible: visibility;
-        }
-
-        /* Disabled state */
-        input[type='checkbox']:disabled {
-            background-color: var(--background-paper, #fff);
-            border-color: var(--color-primary-disabled, #d0d3db);
-            cursor: not-allowed;
-        }
-    `;
-a([
-  o({ type: Boolean })
-], t.prototype, "disabled", 2);
-a([
-  o({ type: Boolean })
-], t.prototype, "checked", 2);
-a([
-  o({ type: Boolean })
-], t.prototype, "indeterminate", 2);
-a([
-  o({ type: Function })
-], t.prototype, "onChange", 2);
-a([
-  o({ type: String })
-], t.prototype, "value", 2);
-a([
-  o({ type: String })
-], t.prototype, "label", 2);
-t = a([
-  h("lit-checkbox")
-], t);
-export {
-  t as LitCheckbox
-};