overview-components 1.0.78 → 1.0.80

package/dist/components/lit-case-variables-tab.js

@@ -1,81 +1,106 @@
-import "../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as o } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as x } from "../node_modules/lit-element/lit-element.js";
-import { unsafeHTML as f } from "../node_modules/lit-html/directives/unsafe-html.js";
-import { styleMap as u } from "../node_modules/lit-html/directives/style-map.js";
-import { customElement as $ } 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 b } from "../node_modules/@lit/reactive-element/decorators/state.js";
-import w from "../node_modules/sortablejs/modular/sortable.esm.js";
-import { repeat as C } from "../node_modules/lit-html/directives/repeat.js";
-import { tooltip as S } from "../shared/simple-tooltip.js";
-import { formatDate as k } from "../utils/date.js";
-import { formatCurrency as L } from "../utils/currency.js";
-import { setLocale as z } from "../utils/localization.js";
-import { msg as v } from "../node_modules/@lit/localize/init/install.js";
-import "../node_modules/@lit/localize/init/runtime.js";
-import { isEqual as _ } from "lodash";
-import { css as I } from "../node_modules/@lit/reactive-element/css-tag.js";
-var B = Object.defineProperty, O = Object.getOwnPropertyDescriptor, d = (t, r, e, i) => {
-  for (var s = i > 1 ? void 0 : i ? O(r, e) : r, a = t.length - 1, p; a >= 0; a--)
-    (p = t[a]) && (s = (i ? p(r, e, s) : p(s)) || s);
-  return i && s && B(r, e, s), s;
+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 x {
-  constructor() {
-    super(...arguments), this.rows = [], this.data = {}, this.hideTabWhen = !1, this.userLang = "cs", this.dateFormat = null, this.isLoading = !1, this.enableSettings = !1, this.gridVariables = !1, this.onSettingsChanged = (t) => {
-    }, this.currentBreakpoint = this.getBreakpoint(), this.isOpen = !1, this.filterText = "", this.isMobile = window.innerWidth <= 600, this._resizeListener = this.handleResize.bind(this), this.sortableInstances = [], this.sortableGroupId = `group-${Math.random().toString(36).substring(2, 9)}`, this.backgroundColorOptions = [
-      {
-        backgroundColor: "transparent",
-        border: "1px solid white"
-      },
-      {
-        backgroundColor: "var(--color-success-light)",
-        border: "1px solid var(--color-success-dark)"
-      },
-      {
-        backgroundColor: "var(--color-error-light)",
-        border: "1px solid var(--color-error-dark)"
-      },
-      {
-        backgroundColor: "var(--color-warning-light)",
-        border: "1px solid var(--color-warning-dark)"
-      },
-      {
-        backgroundColor: "var(--color-info-light)",
-        border: "1px solid var(--color-info-dark)"
-      },
-      {
-        backgroundColor: "var(--color-primary-light)",
-        border: "1px solid var(--color-primary-dark)"
-      }
-    ], this.language = "cs", this.BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"], this.handleSettingsChanged = (t) => {
-      var r;
-      (r = this.onSettingsChanged) == null || r.call(this, t);
-    }, this.getHeaderActions = (t) => {
-      var e, i;
-      const r = ((e = t.size) == null ? void 0 : e.lg) ?? 1;
-      return o`<div class="header-buttons">
-            ${this.enableSettings ? o`
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import Sortable from 'sortablejs';
+import { repeat } from 'lit/directives/repeat.js';
+// components
+import '../shared/lit-icon.js';
+import '../shared/lit-button.js';
+import '../shared/lit-menu.js';
+import '../shared/lit-menu-item.js';
+import '../shared/lit-checkbox.js';
+import '../shared/lit-input.js';
+import '../shared/simple-popper.js';
+import '../assets/illustration/not-found.js';
+import { tooltip } from '../shared/simple-tooltip.js';
+import '../shared/lit-tooltip.js';
+import '../shared/lit-progress-bar.js';
+// utils
+import { formatDate } from '../utils/date.js';
+import { formatCurrency } from '../utils/currency.js';
+import { setLocale } from '../utils/localization.js';
+import { msg } from '@lit/localize';
+import { isEqual } from 'lodash';
+let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rows = [];
+        this.data = {};
+        this.hideTabWhen = false;
+        this.userLang = 'cs';
+        this.dateFormat = null;
+        this.isLoading = false;
+        this.enableSettings = false;
+        this.gridVariables = false;
+        this.onSettingsChanged = (rows) => { };
+        this.currentBreakpoint = this.getBreakpoint();
+        this.isOpen = false;
+        this.filterText = '';
+        this.isMobile = window.innerWidth <= 600;
+        this._resizeListener = this.handleResize.bind(this);
+        this.sortableInstances = [];
+        this.sortableGroupId = `group-${Math.random().toString(36).substring(2, 9)}`;
+        this.backgroundColorOptions = [
+            {
+                backgroundColor: 'transparent',
+                border: '1px solid white',
+            },
+            {
+                backgroundColor: 'var(--color-success-light)',
+                border: '1px solid var(--color-success-dark)',
+            },
+            {
+                backgroundColor: 'var(--color-error-light)',
+                border: '1px solid var(--color-error-dark)',
+            },
+            {
+                backgroundColor: 'var(--color-warning-light)',
+                border: '1px solid var(--color-warning-dark)',
+            },
+            {
+                backgroundColor: 'var(--color-info-light)',
+                border: '1px solid var(--color-info-dark)',
+            },
+            {
+                backgroundColor: 'var(--color-primary-light)',
+                border: '1px solid var(--color-primary-dark)',
+            },
+        ];
+        this.language = 'cs';
+        this.BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+        this.handleSettingsChanged = (newRows) => {
+            this.onSettingsChanged?.(newRows);
+        };
+        this.getHeaderActions = (cell) => {
+            const activeSize = cell.size?.lg ?? 1;
+            return html `<div class="header-buttons">
+            ${this.enableSettings
+                ? html `
                       <perf-tooltip placement="top">
                           <lit-icon slot="trigger" icon="cog" size="1rem"></lit-icon>
                           <div slot="tooltip">
                               <div class="settings-buttons" style="justify-content: space-between">
-                                  ${this.gridVariables ? o`<div></div>` : o`
+                                  ${this.gridVariables
+                    ? html `<div></div>`
+                    : html `
                                             <div>
-                                                ${[1, 2, 3, 4].map(
-        (s) => o`
+                                                ${[1, 2, 3, 4].map((size) => html `
                                                         <span
-                                                            @click=${() => this.setCellSize(
-          s,
-          t
-        )}
-                                                            class="size-button ${r === s ? "size-button--active" : ""}"
+                                                            @click=${() => this.setCellSize(size, cell)}
+                                                            class="size-button ${activeSize === size
+                        ? 'size-button--active'
+                        : ''}"
                                                         >
-                                                            ${s}
+                                                            ${size}
                                                         </span>
-                                                    `
-      )}
+                                                    `)}
                                             </div>
                                         `}
 
@@ -83,41 +108,37 @@ let n = class extends x {
                                       icon="trash"
                                       size="1rem"
                                       style="cursor: pointer"
-                                      @click=${() => this.removeCellFromRows(t.field)}
+                                      @click=${() => this.removeCellFromRows(cell.field)}
                                   ></lit-icon>
                               </div>
-                              <div class="color-label">${v("Barva pozadí")}:</div>
+                              <div class="color-label">${msg('Barva pozadí')}:</div>
                               <div class="settings-buttons">
-                                  ${this.backgroundColorOptions.map(
-        (s) => o`
+                                  ${this.backgroundColorOptions.map((option) => html `
                                           <div>
                                               <div
-                                                  @click=${() => this.setCellStyle(
-          {
-            backgroundColor: s.backgroundColor,
-            borderRadius: "8px",
-            border: s.border
-          },
-          t
-        )}
+                                                  @click=${() => this.setCellStyle({
+                    backgroundColor: option.backgroundColor,
+                    borderRadius: '8px',
+                    border: option.border,
+                }, cell)}
                                                   class="cell-background"
-                                                  style="background-color: ${s.backgroundColor}; border: ${s.border}"
+                                                  style="background-color: ${option.backgroundColor}; border: ${option.border}"
                                               ></div>
                                               <div
-                                                  class="${this.isActiveBackground(
-          t,
-          s.backgroundColor
-        ) ? "cell-background--active" : ""}"
+                                                  class="${this.isActiveBackground(cell, option.backgroundColor)
+                    ? 'cell-background--active'
+                    : ''}"
                                               ></div>
                                           </div>
-                                      `
-      )}
+                                      `)}
                               </div>
-                              <div class="color-label">${v("Tučné písmo")}:</div>
+                              <div class="color-label">${msg('Tučné písmo')}:</div>
                               <div class="settings-buttons">
                                   <span
-                                      class="bold-toggle ${((i = t == null ? void 0 : t.valueStyle) == null ? void 0 : i.fontWeight) === "bold" ? "bold-toggle--active" : ""}"
-                                      @click=${() => this.setFontWeight(t)}
+                                      class="bold-toggle ${cell?.valueStyle?.fontWeight === 'bold'
+                    ? 'bold-toggle--active'
+                    : ''}"
+                                      @click=${() => this.setFontWeight(cell)}
                                   >
                                       B
                                   </span>
@@ -128,250 +149,339 @@ let n = class extends x {
                       <div class="drag-handle">
                           <lit-icon icon="hamburger" size="1rem"></lit-icon>
                       </div>
-                  ` : null}
+                  `
+                : null}
         </div>`;
-    }, this.getHeaderLabel = (t) => o` <div
-            style="${t != null && t.headerStyle ? u(t == null ? void 0 : t.headerStyle) : ""}"
+        };
+        this.getHeaderLabel = (cell) => {
+            return html ` <div
+            style="${cell?.headerStyle ? styleMap(cell?.headerStyle) : ''}"
             class="process-data-heading"
         >
-            ${(t == null ? void 0 : t[`headerName_${this.userLang}`]) || (t == null ? void 0 : t.headerName) || ""}
-            ${t.tooltip ? o`
+            ${cell?.[`headerName_${this.userLang}`] ||
+                cell?.headerName ||
+                ''}
+            ${cell.tooltip
+                ? html `
                       <lit-icon
-                          ${S(
-      (t == null ? void 0 : t[`tooltip_${this.userLang}`]) ?? (t == null ? void 0 : t.tooltip),
-      "right",
-      100
-    )}
+                          ${tooltip(cell?.[`tooltip_${this.userLang}`] ??
+                    cell?.tooltip, 'right', 100)}
                           size="12px"
                           icon="informative"
                       ></lit-icon>
-                  ` : ""}
-        </div>`, this.getHeader = (t) => o` <div class="header-cell">
-            ${this.getHeaderLabel(t)} ${this.getHeaderActions(t)}
-        </div>`, this.getCellButton = (t) => o`
+                  `
+                : ''}
+        </div>`;
+        };
+        this.getHeader = (cell) => {
+            return html ` <div class="header-cell">
+            ${this.getHeaderLabel(cell)} ${this.getHeaderActions(cell)}
+        </div>`;
+        };
+        this.getCellButton = (cell) => {
+            return html `
             <div style="display: flex; justify-content: space-between">
                 <lit-button
                     style="flex-grow: 1; margin-right: 0.5rem"
-                    .fullWidth="${t.buttonFullWidth}"
-                    variant="${t.buttonVariant || "contained"}"
-                    label="${t == null ? void 0 : t.headerName}"
-                    @click=${t == null ? void 0 : t.buttonFn}
+                    .fullWidth="${cell.buttonFullWidth}"
+                    variant="${cell.buttonVariant || 'contained'}"
+                    label="${cell?.headerName}"
+                    @click=${cell?.buttonFn}
                 ></lit-button>
-                ${this.getHeaderActions(t)}
+                ${this.getHeaderActions(cell)}
             </div>
-        `, this.getCellLink = (t) => o`<div>${this.getHeader(t)}</div>
-            <a class="link" href=${t != null && t.value ? t.value : ""} target="_blank"
-                >${t != null && t.value ? t.value : ""}
-            </a> `, this.getCellValue = (t) => {
-      const r = (t == null ? void 0 : t[`value_${this.userLang}`]) || (t == null ? void 0 : t.value) || "", e = typeof r == "string" ? r : String(r ?? "");
-      return o`<div>${this.getHeader(t)}</div>
+        `;
+        };
+        this.getCellLink = (cell) => {
+            return html `<div>${this.getHeader(cell)}</div>
+            <a class="link" href=${cell?.value ? cell.value : ''} target="_blank"
+                >${cell?.value ? cell.value : ''}
+            </a> `;
+        };
+        this.getCellValue = (cell) => {
+            const rawValue = cell?.[`value_${this.userLang}`] || cell?.value || '';
+            const value = typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');
+            return html `<div>${this.getHeader(cell)}</div>
             <div
-                style="${t != null && t.valueStyle ? u(t == null ? void 0 : t.valueStyle) : ""}"
+                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
                 class="process-data-value"
             >
-                ${f(e)}
+                ${unsafeHTML(value)}
             </div> `;
-    }, this.getCellDate = (t) => o`<div>${this.getHeader(t)}</div>
+        };
+        this.getCellDate = (cell) => {
+            return html `<div>${this.getHeader(cell)}</div>
             <div
-                style="${t != null && t.valueStyle ? u(t == null ? void 0 : t.valueStyle) : ""}"
+                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
                 class="process-data-value"
             >
-                ${t != null && t.value ? k(
-      t.value,
-      this.userLang || "cs",
-      !!this.dateFormat,
-      this.dateFormat
-    ) : ""}
-            </div> `, this.getCellCurrency = (t) => o`<div>${this.getHeader(t)}</div>
+                ${cell?.value
+                ? formatDate(cell.value, this.userLang || 'cs', !!this.dateFormat, this.dateFormat)
+                : ''}
+            </div> `;
+        };
+        this.getCellCurrency = (cell) => {
+            return html `<div>${this.getHeader(cell)}</div>
             <div
-                style="${t != null && t.valueStyle ? u(t == null ? void 0 : t.valueStyle) : ""}"
+                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
                 class="process-data-value"
             >
-                ${t != null && t.value ? L(t.value, this.userLang || "cs") : ""}
-            </div> `, this.getCellProgress = (t) => o`<div>${this.getHeader(t)}</div>
+                ${cell?.value ? formatCurrency(cell.value, this.userLang || 'cs') : ''}
+            </div> `;
+        };
+        this.getCellProgress = (cell) => {
+            return html `<div>${this.getHeader(cell)}</div>
             <div
-                style="${t != null && t.valueStyle ? u(t == null ? void 0 : t.valueStyle) : ""}"
+                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
                 class="process-data-value"
             >
-                <lit-progress-bar .progress="${t == null ? void 0 : t.value}"></lit-progress-bar>
-            </div> `, this.getInlineCellValue = (t) => {
-      const r = (t == null ? void 0 : t[`value_${this.userLang}`]) || (t == null ? void 0 : t.value) || "", e = typeof r == "string" ? r : String(r ?? "");
-      return o`
+                <lit-progress-bar .progress="${cell?.value}"></lit-progress-bar>
+            </div> `;
+        };
+        this.getInlineCellValue = (cell) => {
+            const rawValue = cell?.[`value_${this.userLang}`] || cell?.value || '';
+            const value = typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');
+            return html `
             <div style="display: flex;align-items: center; justify-content: end; gap: 0.5rem">
-                <div>${this.getHeaderLabel(t)}</div>
+                <div>${this.getHeaderLabel(cell)}</div>
                 <div
-                    style="${t != null && t.valueStyle ? u(t == null ? void 0 : t.valueStyle) : ""}"
+                    style="${cell?.valueStyle
+                ? styleMap(cell?.valueStyle)
+                : ''}"
                     class="process-data-value"
                 >
-                    ${f(e)}
+                    ${unsafeHTML(value)}
                 </div>
-                <div>${this.getHeaderActions(t)}</div>
+                <div>${this.getHeaderActions(cell)}</div>
             </div>
         `;
-    };
-  }
-  getBreakpoint() {
-    const t = window.innerWidth;
-    return t >= 1920 ? "xl" : t >= 1280 ? "lg" : t >= 960 ? "md" : t >= 600 ? "sm" : "xs";
-  }
-  // Function to handle resize events
-  handleResize() {
-    const t = this.getBreakpoint();
-    t !== this.currentBreakpoint && (this.currentBreakpoint = t), this.isMobile = window.innerWidth <= 600;
-  }
-  connectedCallback() {
-    var t, r;
-    if (super.connectedCallback(), this.setLanguage(), window.addEventListener("resize", this._resizeListener), this.isMobile = window.innerWidth <= 600, !this.dateFormat) {
-      const e = localStorage.getItem("userSettings"), i = e ? (r = (t = JSON.parse(e)) == null ? void 0 : t.state) == null ? void 0 : r.dateFormat : void 0;
-      this.dateFormat = i;
+        };
+    }
+    getBreakpoint() {
+        const width = window.innerWidth;
+        if (width >= 1920)
+            return 'xl';
+        if (width >= 1280)
+            return 'lg';
+        if (width >= 960)
+            return 'md';
+        if (width >= 600)
+            return 'sm';
+        return 'xs';
     }
-  }
-  disconnectedCallback() {
-    this.destroySortables(), window.removeEventListener("resize", this._resizeListener), super.disconnectedCallback();
-  }
-  firstUpdated() {
-    this.enableSettings && this.initSortable();
-  }
-  setFontWeight(t) {
-    var e;
-    const r = ((e = t.valueStyle) == null ? void 0 : e.fontWeight) === "bold";
-    t.valueStyle = {
-      ...t.valueStyle || {},
-      fontWeight: r ? "500" : "bold"
-    }, this.rows = [...this.rows], this.handleSettingsChanged(this.rows);
-  }
-  setCellStyle(t, r) {
-    r.cellStyle = t, this.rows = [...this.rows], this.handleSettingsChanged(this.rows);
-  }
-  destroySortables() {
-    this.sortableInstances.forEach((t) => {
-      t.destroy();
-    }), this.sortableInstances = [];
-  }
-  initSortable() {
-    this.updateComplete.then(() => {
-      var r;
-      const t = (r = this.shadowRoot) == null ? void 0 : r.querySelectorAll(".grid-container");
-      t != null && t.length && t.forEach((e) => {
-        let i = [];
-        const s = w.create(e, {
-          group: this.tabId || this.sortableGroupId,
-          animation: 150,
-          handle: ".drag-handle",
-          ghostClass: "sortable-ghost",
-          chosenClass: "sortable-chosen",
-          dragClass: "sortable-drag",
-          sort: !0,
-          onStart: (a) => {
-            i = Array.from(a.from.childNodes);
-          },
-          onEnd: (a) => {
-            var c;
-            a.from.innerHTML = "", i.forEach((y) => a.from.appendChild(y));
-            const { oldIndex: p, newIndex: h } = a;
-            if (p == null || h == null || p === h) return;
-            const m = [...this.rows], [l] = m.splice(p, 1);
-            m.splice(h, 0, l), this.rows = m, (c = this.handleSettingsChanged) == null || c.call(this, m);
-          }
+    // Function to handle resize events
+    handleResize() {
+        const newBreakpoint = this.getBreakpoint();
+        if (newBreakpoint !== this.currentBreakpoint) {
+            this.currentBreakpoint = newBreakpoint; // Update property
+        }
+        this.isMobile = window.innerWidth <= 600;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setLanguage();
+        window.addEventListener('resize', this._resizeListener); // Add listener
+        this.isMobile = window.innerWidth <= 600;
+        if (!this.dateFormat) {
+            const userSettings = localStorage.getItem('userSettings');
+            const storedFormat = userSettings
+                ? JSON.parse(userSettings)?.state?.dateFormat
+                : undefined;
+            this.dateFormat = storedFormat;
+        }
+    }
+    disconnectedCallback() {
+        this.destroySortables();
+        window.removeEventListener('resize', this._resizeListener); // Remove listener
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        if (this.enableSettings) {
+            this.initSortable();
+        }
+    }
+    setFontWeight(cell) {
+        const isBold = cell.valueStyle?.fontWeight === 'bold';
+        cell.valueStyle = {
+            ...(cell.valueStyle || {}),
+            fontWeight: isBold ? '500' : 'bold',
+        };
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setCellStyle(style, cell) {
+        cell.cellStyle = style;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    destroySortables() {
+        this.sortableInstances.forEach((instance) => {
+            instance.destroy();
         });
-        this.sortableInstances.push(s);
-      });
-    });
-  }
-  setLanguage() {
-    const t = this.userLang || localStorage.getItem("userLang");
-    t && z(t);
-  }
-  isActiveBackground(t, r) {
-    var i;
-    const e = (i = t == null ? void 0 : t.cellStyle) == null ? void 0 : i.backgroundColor;
-    return !e && r === "transparent" ? !0 : e === r;
-  }
-  setCellSize(t, r) {
-    r.size || (r.size = {}), r.size.lg = t, this.rows = [...this.rows], this.handleSettingsChanged(this.rows);
-  }
-  removeCellFromRows(t) {
-    this.destroySortables();
-    const r = this.rows.filter((e) => e.field !== t);
-    this.rows = [], this.updateComplete.then(() => {
-      this.rows = [...r], this.initSortable(), this.handleSettingsChanged(this.rows);
-    });
-  }
-  closePopover() {
-    this.isOpen = !1;
-  }
-  toggleCustomPopover() {
-    this.isOpen = !this.isOpen;
-  }
-  get existingFields() {
-    return this.rows.flat().map((t) => t.field);
-  }
-  toggleRowCell(t) {
-    var e;
-    if (this.rows.some((i) => i.field === t))
-      this.removeCellFromRows(t);
-    else {
-      const i = (e = this.data) == null ? void 0 : e[t];
-      if (!i) return;
-      const s = this.userLang || "cs", a = i[`tvar_name_${s}`] || i.tvar_name_cs || i.tvar_name, p = i[`tvar_tooltip_${s}`] || i.tvar_tooltip_cs || i.tvar_tooltip;
-      let h;
-      switch (i.ivar_type) {
-        case "D":
-          h = "date";
-          break;
-        case "progress":
-          h = "progress";
-          break;
-        default:
-          h = "string";
-      }
-      const m = {
-        field: t,
-        type: h,
-        headerName: a,
-        value: i.ivar_value,
-        size: { xs: 4, sm: 2, md: 1, lg: 1, xl: 1 },
-        tooltip: p
-      }, l = [...this.rows];
-      l.push(m), this.rows = l, this.handleSettingsChanged(l);
+        this.sortableInstances = [];
     }
-  }
-  render() {
-    if (this.hideTabWhen) return null;
-    const t = this.userLang || "cs", r = Object.keys(this.data || {}).filter((e) => {
-      const i = this.data[e], s = (i == null ? void 0 : i[`tvar_name_${t}`]) || e;
-      return e.toLowerCase().includes(this.filterText) || s.toLowerCase().includes(this.filterText);
-    });
-    return o`
-            ${this.isLoading ? o`<lit-loader></lit-loader>` : o`
-                      <div class="grid-container ${this.gridVariables ? "one-column" : ""}">
-                          ${C(
-      this.rows,
-      (e, i) => e.field,
-      (e) => {
-        const i = this.BREAKPOINTS.indexOf(this.currentBreakpoint), a = `cell--span${this.BREAKPOINTS.slice(0, i + 1).reverse().map((p) => {
-          var h;
-          return (h = e.size) == null ? void 0 : h[p];
-        }).find((p) => p !== void 0) ?? 2} cell ${this.gridVariables ? "one-column" : ""}`;
-        return o`
+    initSortable() {
+        this.updateComplete.then(() => {
+            const containers = this.shadowRoot?.querySelectorAll('.grid-container');
+            if (!containers?.length)
+                return;
+            containers.forEach((container) => {
+                let originalNodes = [];
+                const sortableInstance = Sortable.create(container, {
+                    group: this.tabId || this.sortableGroupId,
+                    animation: 150,
+                    handle: '.drag-handle',
+                    ghostClass: 'sortable-ghost',
+                    chosenClass: 'sortable-chosen',
+                    dragClass: 'sortable-drag',
+                    sort: true,
+                    onStart: (evt) => {
+                        originalNodes = Array.from(evt.from.childNodes);
+                    },
+                    onEnd: (evt) => {
+                        evt.from.innerHTML = '';
+                        originalNodes.forEach((node) => evt.from.appendChild(node));
+                        const { oldIndex, newIndex } = evt;
+                        if (oldIndex == null || newIndex == null || oldIndex === newIndex)
+                            return;
+                        const updated = [...this.rows];
+                        const [movedItem] = updated.splice(oldIndex, 1);
+                        updated.splice(newIndex, 0, movedItem);
+                        this.rows = updated;
+                        this.handleSettingsChanged?.(updated);
+                    },
+                });
+                this.sortableInstances.push(sortableInstance);
+            });
+        });
+    }
+    setLanguage() {
+        const lang = this.userLang || localStorage.getItem('userLang');
+        if (lang) {
+            setLocale(lang);
+        }
+    }
+    isActiveBackground(cell, color) {
+        const bg = cell?.cellStyle?.backgroundColor;
+        if (!bg && color === 'transparent')
+            return true; // If nothing is set → consider transparent as active
+        return bg === color;
+    }
+    setCellSize(size, cell) {
+        if (!cell.size) {
+            cell.size = {};
+        }
+        cell.size.lg = size;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    removeCellFromRows(field) {
+        this.destroySortables();
+        const updatedRows = this.rows.filter((c) => c.field !== field);
+        this.rows = [];
+        this.updateComplete.then(() => {
+            this.rows = [...updatedRows];
+            this.initSortable();
+            this.handleSettingsChanged(this.rows);
+        });
+    }
+    closePopover() {
+        this.isOpen = false;
+    }
+    toggleCustomPopover() {
+        this.isOpen = !this.isOpen;
+    }
+    get existingFields() {
+        return this.rows.flat().map((cell) => cell.field);
+    }
+    toggleRowCell(key) {
+        const exists = this.rows.some((cell) => cell.field === key);
+        if (exists) {
+            this.removeCellFromRows(key);
+        }
+        else {
+            const raw = this.data?.[key];
+            if (!raw)
+                return;
+            const lang = this.userLang || 'cs';
+            const headerName = raw[`tvar_name_${lang}`] || raw.tvar_name_cs || raw.tvar_name;
+            const tooltip = raw[`tvar_tooltip_${lang}`] || raw.tvar_tooltip_cs || raw.tvar_tooltip;
+            let type;
+            switch (raw.ivar_type) {
+                case 'D':
+                    type = 'date';
+                    break;
+                case 'progress':
+                    type = 'progress';
+                    break;
+                default:
+                    type = 'string';
+            }
+            const newCell = {
+                field: key,
+                type,
+                headerName,
+                value: raw.ivar_value,
+                size: { xs: 4, sm: 2, md: 1, lg: 1, xl: 1 },
+                tooltip,
+            };
+            const newRows = [...this.rows];
+            newRows.push(newCell);
+            this.rows = newRows;
+            this.handleSettingsChanged(newRows);
+        }
+    }
+    render() {
+        if (this.hideTabWhen)
+            return null;
+        const lang = this.userLang || 'cs';
+        const filteredKeys = Object.keys(this.data || {}).filter((key) => {
+            const item = this.data[key];
+            const name = item?.[`tvar_name_${lang}`] || key;
+            return (key.toLowerCase().includes(this.filterText) ||
+                name.toLowerCase().includes(this.filterText));
+        });
+        return html `
+            ${this.isLoading
+            ? html `<lit-loader></lit-loader>`
+            : html `
+                      <div class="grid-container ${this.gridVariables ? 'one-column' : ''}">
+                          ${repeat(this.rows, (cell, index) => cell.field, (cell) => {
+                const bpIndex = this.BREAKPOINTS.indexOf(this.currentBreakpoint);
+                const spanSize = this.BREAKPOINTS.slice(0, bpIndex + 1)
+                    .reverse()
+                    .map((bp) => cell.size?.[bp])
+                    .find((s) => s !== undefined) ?? 2;
+                const classes = `cell--span${spanSize} cell ${this.gridVariables ? 'one-column' : ''}`;
+                return html `
                                       <div
-                                          class="${a}"
-                                          style="${u(
-          e.cellStyle || {}
-        )}"
-                                          data-field="${e.field}"
+                                          class="${classes}"
+                                          style="${styleMap(cell.cellStyle || {})}"
+                                          data-field="${cell.field}"
                                       >
-                                          ${this.gridVariables ? this.getInlineCellValue(e) : (e == null ? void 0 : e.type) === "button" ? this.getCellButton(e) : e.type === "link" ? this.getCellLink(e) : e.type === "progress" ? this.getCellProgress(e) : e.type === "currency" ? this.getCellCurrency(e) : e.type === "date" ? this.getCellDate(e) : this.getCellValue(e)}
+                                          ${this.gridVariables
+                    ? this.getInlineCellValue(cell)
+                    : cell?.type === 'button'
+                        ? this.getCellButton(cell)
+                        : cell.type === 'link'
+                            ? this.getCellLink(cell)
+                            : cell.type === 'progress'
+                                ? this.getCellProgress(cell)
+                                : cell.type === 'currency'
+                                    ? this.getCellCurrency(cell)
+                                    : cell.type === 'date'
+                                        ? this.getCellDate(cell)
+                                        : this.getCellValue(cell)}
                                       </div>
                                   `;
-      }
-    )}
+            })}
                       </div>
-                      ${this.enableSettings ? o`
+                      ${this.enableSettings
+                ? html `
                                 <div style="text-align: right; margin-top: 1rem;">
                                     <lit-button
-                                        variant="${"dashed"}"
-                                        label="${v("Přiřadit proměnnou")}"
+                                        variant="${'dashed'}"
+                                        label="${msg('Přiřadit proměnnou')}"
                                         icon="add"
                                         .fullWidth=${this.isMobile}
                                         @click="${this.toggleCustomPopover}"
@@ -380,9 +490,9 @@ let n = class extends x {
 
                                     <simple-popper
                                         .showing=${this.isOpen}
-                                        .placement=${"top-end"}
-                                        .manualOpening=${!0}
-                                        .maxWidthAsTarget=${!1}
+                                        .placement=${'top-end'}
+                                        .manualOpening=${true}
+                                        .maxWidthAsTarget=${false}
                                         .onClose=${() => this.closePopover()}
                                     >
                                         <div
@@ -391,50 +501,54 @@ let n = class extends x {
                                         >
                                             <lit-input
                                                 .value=${this.filterText}
-                                                .onInput=${(e) => {
-      var i;
-      this.filterText = ((i = e == null ? void 0 : e.toLowerCase) == null ? void 0 : i.call(e)) || "";
-    }}
+                                                .onInput=${(value) => {
+                    this.filterText = value?.toLowerCase?.() || '';
+                }}
                                                 .onClear=${() => {
-      this.filterText = "";
-    }}
-                                                placeholder="${v("Zadejte název proměnné")}"
-                                                .size=${"small"}
+                    this.filterText = '';
+                }}
+                                                placeholder="${msg('Zadejte název proměnné')}"
+                                                .size=${'small'}
                                             ></lit-input>
                                         </div>
                                         <lit-menu tabindex="0">
-                                            ${Object.keys(this.data || {}).filter((e) => {
-      const i = this.data[e], s = this.userLang || "cs", a = (i == null ? void 0 : i[`tvar_name_${s}`]) || e;
-      return e.toLowerCase().includes(this.filterText) || a.toLowerCase().includes(this.filterText);
-    }).sort((e, i) => {
-      const s = e.startsWith("_"), a = i.startsWith("_");
-      return s && !a ? 1 : !s && a ? -1 : e.localeCompare(i);
-    }).map(
-      (e) => {
-        var i, s;
-        return o`
+                                            ${Object.keys(this.data || {})
+                    .filter((key) => {
+                    const item = this.data[key];
+                    const lang = this.userLang || 'cs';
+                    const name = item?.[`tvar_name_${lang}`] || key;
+                    return (key
+                        .toLowerCase()
+                        .includes(this.filterText) ||
+                        name.toLowerCase().includes(this.filterText));
+                })
+                    .sort((a, b) => {
+                    const aIsUnderscore = a.startsWith('_');
+                    const bIsUnderscore = b.startsWith('_');
+                    if (aIsUnderscore && !bIsUnderscore)
+                        return 1;
+                    if (!aIsUnderscore && bIsUnderscore)
+                        return -1;
+                    return a.localeCompare(b);
+                })
+                    .map((key) => html `
                                                         <lit-menu-item
-                                                            .onClick=${() => this.toggleRowCell(e)}
-                                                            .isActive=${this.existingFields.includes(
-          e
-        )}
+                                                            .onClick=${() => this.toggleRowCell(key)}
+                                                            .isActive=${this.existingFields.includes(key)}
                                                         >
                                                             <span class="menu-item--multiple">
                                                                 <lit-checkbox
                                                                     class="cursor"
-                                                                    .checked=${this.existingFields.includes(
-          e
-        )}
+                                                                    .checked=${this.existingFields.includes(key)}
                                                                 ></lit-checkbox>
-                                                                ${((s = (i = this.data) == null ? void 0 : i[e]) == null ? void 0 : s[`tvar_name_${this.userLang}`]) || e}
+                                                                ${this.data?.[key]?.[`tvar_name_${this.userLang}`] || key}
                                                             </span>
                                                         </lit-menu-item>
-                                                    `;
-      }
-    )}
+                                                    `)}
                                         </lit-menu>
 
-                                        ${_(r.length, 0) ? o`
+                                        ${isEqual(filteredKeys.length, 0)
+                    ? html `
                                                   <div
                                                       style="display: flex;flex-direction: column; align-items: center"
                                                   >
@@ -443,19 +557,21 @@ let n = class extends x {
                                                       >
                                                           <not-found></not-found>
                                                       </div>
-                                                      ${v("Nenalezeno")}
+                                                      ${msg('Nenalezeno')}
                                                   </div>
-                                              ` : null}
+                                              `
+                    : null}
                                     </simple-popper>
                                 </div>
-                            ` : ""}
+                            `
+                : ''}
                   `}
         `;
-  }
+    }
 };
-n.styles = [
-  // styles,
-  I`
+LitCaseVariablesTab.styles = [
+    // styles,
+    css `
             :host {
                 font-family: 'Inter', sans-serif;
             }
@@ -675,53 +791,52 @@ n.styles = [
                     grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
                 }
             }
-        `
+        `,
 ];
-d([
-  g({ type: Array })
-], n.prototype, "rows", 2);
-d([
-  g({ type: Object })
-], n.prototype, "data", 2);
-d([
-  g({ type: Boolean })
-], n.prototype, "hideTabWhen", 2);
-d([
-  g({ type: String })
-], n.prototype, "userLang", 2);
-d([
-  g({ type: String })
-], n.prototype, "dateFormat", 2);
-d([
-  g({ type: Boolean })
-], n.prototype, "isLoading", 2);
-d([
-  g({ type: Boolean })
-], n.prototype, "enableSettings", 2);
-d([
-  g({ type: String })
-], n.prototype, "tabId", 2);
-d([
-  g({ type: Boolean })
-], n.prototype, "gridVariables", 2);
-d([
-  g({ type: Function })
-], n.prototype, "onSettingsChanged", 2);
-d([
-  b()
-], n.prototype, "currentBreakpoint", 2);
-d([
-  b()
-], n.prototype, "isOpen", 2);
-d([
-  b()
-], n.prototype, "filterText", 2);
-d([
-  b()
-], n.prototype, "isMobile", 2);
-n = d([
-  $("lit-case-variables-tab")
-], n);
-export {
-  n as LitCaseVariablesTab
-};
+__decorate([
+    property({ type: Array })
+], LitCaseVariablesTab.prototype, "rows", void 0);
+__decorate([
+    property({ type: Object })
+], LitCaseVariablesTab.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCaseVariablesTab.prototype, "hideTabWhen", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTab.prototype, "userLang", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTab.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCaseVariablesTab.prototype, "isLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCaseVariablesTab.prototype, "enableSettings", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTab.prototype, "tabId", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCaseVariablesTab.prototype, "gridVariables", void 0);
+__decorate([
+    property({ type: Function })
+], LitCaseVariablesTab.prototype, "onSettingsChanged", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "currentBreakpoint", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "filterText", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "isMobile", void 0);
+LitCaseVariablesTab = __decorate([
+    customElement('lit-case-variables-tab')
+], LitCaseVariablesTab);
+export { LitCaseVariablesTab };
+//# sourceMappingURL=lit-case-variables-tab.js.map