overview-components 1.1.0 → 1.1.11

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

@@ -5,76 +5,257 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 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/simple-tooltip.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.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.getHeader = (cell) => {
-            return html `<div
-            style="${cell?.headerStyle ? styleMap(cell?.headerStyle) : ''}"
-            class="process-data-heading"
-        >
-            ${cell?.headerName}
+        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
+                    ? html `<div></div>`
+                    : html `
+                                            <div>
+                                                ${[1, 2, 3, 4].map((size) => html `
+                                                        <span
+                                                            @click=${() => this.setCellSize(size, cell)}
+                                                            class="size-button ${activeSize === size
+                        ? 'size-button--active'
+                        : ''}"
+                                                        >
+                                                            ${size}
+                                                        </span>
+                                                    `)}
+                                            </div>
+                                        `}
+
+                                  <lit-icon
+                                      icon="trash"
+                                      size="1rem"
+                                      style="cursor: pointer"
+                                      @click=${() => this.removeCellFromRows(cell.field)}
+                                  ></lit-icon>
+                              </div>
+                              <div class="color-label">${msg('Barva pozadí')}:</div>
+                              <div class="settings-buttons">
+                                  ${this.backgroundColorOptions.map((option) => html `
+                                          <div>
+                                              <div
+                                                  @click=${() => this.setCellStyle({
+                    backgroundColor: option.backgroundColor,
+                    borderRadius: '8px',
+                    border: option.border,
+                }, cell)}
+                                                  class="cell-background"
+                                                  style="background-color: ${option.backgroundColor}; border: ${option.border}"
+                                              ></div>
+                                              <div
+                                                  class="${this.isActiveBackground(cell, option.backgroundColor)
+                    ? 'cell-background--active'
+                    : ''}"
+                                              ></div>
+                                          </div>
+                                      `)}
+                              </div>
+                              <div class="color-label">${msg('Tučné písmo')}:</div>
+                              <div class="settings-buttons">
+                                  <span
+                                      class="bold-toggle ${cell?.valueStyle?.fontWeight === 'bold'
+                    ? 'bold-toggle--active'
+                    : ''}"
+                                      @click=${() => this.setFontWeight(cell)}
+                                  >
+                                      B
+                                  </span>
+                              </div>
+                          </div>
+                      </perf-tooltip>
+
+                      <div class="drag-handle">
+                          <lit-icon icon="hamburger" size="1rem"></lit-icon>
+                      </div>
+                  `
+                : null}
+        </div>`;
+        };
+        this.getHeaderLabel = (cell) => {
+            return html ` <div
+            style="${cell?.headerStyle ? styleMap(cell?.headerStyle) : ''}"
+            class="process-data-heading"
+        >
+            ${cell?.[`headerName_${this.userLang}`] ||
+                cell?.headerName ||
+                ''}
             ${cell.tooltip
-                ? html `
-                      <lit-icon size="12px" icon="informative"></lit-icon>
-                      <simple-tooltip placement="right">${cell.tooltip}</simple-tooltip>
+                ? html `
+                      <lit-icon
+                          ${tooltip(cell?.[`tooltip_${this.userLang}`] ??
+                    cell?.tooltip, 'right', 100)}
+                          size="12px"
+                          icon="informative"
+                      ></lit-icon>
                   `
-                : ''}
+                : ''}
+        </div>`;
+        };
+        this.getHeader = (cell) => {
+            return html ` <div class="header-cell">
+            ${this.getHeaderLabel(cell)} ${this.getHeaderActions(cell)}
         </div>`;
         };
         this.getCellButton = (cell) => {
-            return html `
-            <lit-button
-                .fullWidth="${cell.buttonFullWidth}"
-                variant="${cell.buttonVariant || 'contained'}"
-                label="${cell?.headerName}"
-                @click=${cell?.buttonFn}
-            ></lit-button>
+            return html `
+            <div style="display: flex; justify-content: space-between">
+                <lit-button
+                    style="flex-grow: 1; margin-right: 0.5rem"
+                    .fullWidth="${cell.buttonFullWidth}"
+                    variant="${cell.buttonVariant || 'contained'}"
+                    label="${cell?.headerName}"
+                    @click=${cell?.buttonFn}
+                ></lit-button>
+                ${this.getHeaderActions(cell)}
+            </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 : ''}
+            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) => {
-            return html `<div>${this.getHeader(cell)}</div>
-            <div
-                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
-                class="process-data-value"
-            >
-                ${cell?.value ? cell.value : ''}
+            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="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                class="process-data-value"
+            >
+                ${unsafeHTML(value)}
             </div> `;
         };
         this.getCellDate = (cell) => {
-            return html `<div>${this.getHeader(cell)}</div>
-            <div
-                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
-                class="process-data-value"
-            >
+            return html `<div>${this.getHeader(cell)}</div>
+            <div
+                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                class="process-data-value"
+            >
                 ${cell?.value
-                ? formatDate(cell.value, this.userLang || 'cs', !!this.dateFormat)
-                : ''}
+                ? formatDate(cell.value, this.userLang || 'cs', !!this.dateFormat, this.dateFormat)
+                : ''}
+            </div> `;
+        };
+        this.getCellCurrency = (cell) => {
+            return html `<div>${this.getHeader(cell)}</div>
+            <div
+                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                class="process-data-value"
+            >
+                ${cell?.value ? formatCurrency(cell.value, this.userLang || 'cs') : ''}
+            </div> `;
+        };
+        this.getCellProgress = (cell) => {
+            return html `<div>${this.getHeader(cell)}</div>
+            <div
+                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                class="process-data-value"
+            >
+                <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(cell)}</div>
+                <div
+                    style="${cell?.valueStyle
+                ? styleMap(cell?.valueStyle)
+                : ''}"
+                    class="process-data-value"
+                >
+                    ${unsafeHTML(value)}
+                </div>
+                <div>${this.getHeaderActions(cell)}</div>
+            </div>
+        `;
+        };
     }
     getBreakpoint() {
         const width = window.innerWidth;
@@ -94,11 +275,13 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
         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
@@ -108,150 +291,514 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
         }
     }
     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 = [];
+    }
+    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;
-        return html `
+        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 `
-                      ${this.rows.map((row) => html `
-                              <div class="grid-container">
-                                  ${row.map((cell) => {
-                const breakpointIndex = this.BREAKPOINTS.indexOf(this.currentBreakpoint);
-                const spanSize = this.BREAKPOINTS.slice(0, breakpointIndex + 1)
+            : 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((size) => size !== undefined) ?? 2;
-                const classes = `cell--span${spanSize} cell`;
-                return html `
-                                          <div
-                                              class="${classes}"
-                                              style="${styleMap((cell?.cellStyle || {}))}"
-                                          >
-                                              ${cell?.type === 'button'
-                    ? this.getCellButton(cell)
-                    : cell.type === 'link'
-                        ? this.getCellLink(cell)
-                        : cell.type === 'date'
-                            ? this.getCellDate(cell)
-                            : this.getCellValue(cell)}
-                                          </div>
-                                      `;
-            })}
-                              </div>
-                          `)}
-                  `}
+                    .map((bp) => cell.size?.[bp])
+                    .find((s) => s !== undefined) ?? 2;
+                const classes = `cell--span${spanSize} cell ${this.gridVariables ? 'one-column' : ''}`;
+                return html `
+                                      <div
+                                          class="${classes}"
+                                          style="${styleMap(cell.cellStyle || {})}"
+                                          data-field="${cell.field}"
+                                      >
+                                          ${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
+                ? html `
+                                <div style="text-align: right; margin-top: 1rem;">
+                                    <lit-button
+                                        variant="${'dashed'}"
+                                        label="${msg('Přiřadit proměnnou')}"
+                                        icon="add"
+                                        .fullWidth=${this.isMobile}
+                                        @click="${this.toggleCustomPopover}"
+                                        class="add-variable-button"
+                                    ></lit-button>
+
+                                    <simple-popper
+                                        .showing=${this.isOpen}
+                                        .placement=${'top-end'}
+                                        .manualOpening=${true}
+                                        .maxWidthAsTarget=${false}
+                                        .onClose=${() => this.closePopover()}
+                                    >
+                                        <div
+                                            class="popper-input"
+                                            style="position: sticky; top: 0; z-index: 1;"
+                                        >
+                                            <lit-input
+                                                .value=${this.filterText}
+                                                .onInput=${(value) => {
+                    this.filterText = value?.toLowerCase?.() || '';
+                }}
+                                                .onClear=${() => {
+                    this.filterText = '';
+                }}
+                                                placeholder="${msg('Zadejte název proměnné')}"
+                                                .size=${'small'}
+                                            ></lit-input>
+                                        </div>
+                                        <lit-menu tabindex="0">
+                                            ${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(key)}
+                                                            .isActive=${this.existingFields.includes(key)}
+                                                        >
+                                                            <span class="menu-item--multiple">
+                                                                <lit-checkbox
+                                                                    class="cursor"
+                                                                    .checked=${this.existingFields.includes(key)}
+                                                                ></lit-checkbox>
+                                                                ${this.data?.[key]?.[`tvar_name_${this.userLang}`] || key}
+                                                            </span>
+                                                        </lit-menu-item>
+                                                    `)}
+                                        </lit-menu>
+
+                                        ${isEqual(filteredKeys.length, 0)
+                    ? html `
+                                                  <div
+                                                      style="display: flex;flex-direction: column; align-items: center"
+                                                  >
+                                                      <div
+                                                          style="max-height: 7.125rem; max-width: 7.125rem"
+                                                      >
+                                                          <not-found></not-found>
+                                                      </div>
+                                                      ${msg('Nenalezeno')}
+                                                  </div>
+                                              `
+                    : null}
+                                    </simple-popper>
+                                </div>
+                            `
+                : ''}
+                  `}
         `;
     }
 };
 LitCaseVariablesTab.styles = [
     // styles,
-    css `
-            :host {
-                font-family: 'Inter', sans-serif;
-            }
-
-            .grid-container {
-                display: grid;
-                justify-content: start;
-                align-items: start;
-                gap: 0.5rem;
-            }
-
-            .process-data-heading {
-                font-size: 0.75rem;
-                color: var(--text-secondary, #5d6371);
-                font-weight: 400 !important;
-                display: flex;
-                gap: 5px;
-                align-items: center;
-            }
-
-            .process-data-value {
-                font-size: 0.8125rem;
-                color: var(--text-primary, #111827);
-                margin: 0;
-                padding-top: 0.3125rem;
-                font-weight: 500 !important;
-            }
-
-            .status {
-                color: var(--color-primary-main, #76b703);
-            }
-
-            .link {
-                font-size: 0.8125rem;
-                text-decoration: none;
-                color: inherit;
-                border-bottom: 0.0625rem solid var(--color-primary-main, #76b703);
-            }
-
-            .cell {
-                padding: 5px;
-                border-radius: 8px;
-            }
-            .link:hover {
-                color: var(--color-primary-main, #76b703);
-            }
-
-            .cell--span1 {
-                grid-column: span 1 / span 1;
-            }
-            .cell--span2 {
-                grid-column: span 2 / span 2;
-            }
-            .cell--span3 {
-                grid-column: span 3 / span 3;
-            }
-            .cell--span4 {
-                grid-column: span 4 / span 4;
-            }
-
-            /* Responzívne nastavenie počtu stĺpcov */
-            @media (min-width: 0px) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* xs */
-                }
-            }
-
-            @media (min-width: var(--breakpoint-sm, 600px)) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* sm */
-                }
-            }
-
-            @media (min-width: var(--breakpoint-md, 960px)) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* md */
-                }
-            }
-
-            @media (min-width: var(--breakpoint-lg, 1280px)) {
-                .grid-container {
-                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* lg */
-                }
-            }
-
-            @media (min-width: var(--breakpoint-xl, 1536px)) {
-                .grid-container {
-                    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
-                }
-            }
+    css `
+            :host {
+                font-family: 'Inter', sans-serif;
+            }
+
+            .header-cell {
+                min-height: 1.25rem;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .drag-handle {
+                cursor: grab;
+                opacity: 0.6;
+                transition: opacity 0.2s;
+            }
+
+            .drag-handle:hover {
+                opacity: 1;
+            }
+
+            .grid-container {
+                display: grid;
+                justify-content: start;
+                align-items: start;
+                gap: 0.5rem;
+                border: 1px dashed transparent;
+                border-radius: var(--border-radius-small, 8px);
+                transition: border-color 0.2s;
+            }
+
+            .grid-container.sortable-drag-over {
+                border-color: var(--color-primary-main, #76b703);
+            }
+
+            .process-data-heading {
+                font-size: 0.75rem;
+                color: var(--text-secondary, #5d6371);
+                font-weight: 400 !important;
+                display: flex;
+                gap: 5px;
+                align-items: center;
+            }
+
+            .process-data-value {
+                min-height: 1.25rem;
+                font-size: 0.8125rem;
+                color: var(--text-primary, #111827);
+                margin: 0;
+                padding-top: 0.3125rem;
+                font-weight: 500;
+            }
+
+            .status {
+                color: var(--color-primary-main, #76b703);
+            }
+
+            .link {
+                font-size: 0.8125rem;
+                text-decoration: none;
+                color: var(--text-primary, #111827);
+                border-bottom: 0.0625rem solid var(--color-primary-main, #76b703);
+            }
+
+            .cell {
+                padding: 0.375rem;
+                border-radius: var(--border-radius-small, 8px);
+                border: 1px solid transparent;
+                transition: all 0.2s;
+                min-height: 2.625rem;
+            }
+
+            .cell.one-column {
+                min-height: 0 !important;
+            }
+
+            .cell.sortable-ghost {
+                opacity: 0.5;
+                border-color: var(--color-primary-main, #76b703);
+            }
+
+            .cell.sortable-chosen {
+                transform: scale(1.02);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            }
+
+            .link:hover {
+                color: var(--color-primary-main, #76b703);
+            }
+
+            .settings-buttons {
+                display: flex;
+                align-items: center;
+            }
+
+            .header-buttons {
+                display: flex;
+                gap: 0.5rem;
+            }
+
+            .size-button {
+                margin-right: 0.5rem;
+                cursor: pointer;
+            }
+
+            .size-button--active {
+                text-decoration: underline;
+                font-weight: bold;
+            }
+
+            .popper-input {
+                margin-bottom: 0.5rem;
+                background-color: var(--background-paper, #fff);
+                z-index: 1;
+            }
+
+            .cell-background {
+                width: 14px;
+                height: 14px;
+                border-radius: 4px;
+                border: 1px solid #ccc;
+                cursor: pointer;
+                margin-right: 0.5rem;
+            }
+
+            .bold-toggle {
+                cursor: pointer;
+            }
+
+            .bold-toggle--active {
+                text-decoration: underline;
+                font-weight: bold;
+            }
+
+            .color-label {
+                margin: 0.5rem 0 0.25rem 0;
+            }
+
+            .cell-background--active {
+                border-bottom: 1px solid white;
+                margin-top: 1px;
+                margin-right: 0.5rem;
+            }
+
+            .grid-container.one-column {
+                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+                justify-content: end;
+            }
+
+            .grid-container.one-column .cell {
+                grid-column: 4 / 5;
+            }
+
+            @media (max-width: 960px) {
+                .grid-container.one-column .cell {
+                    grid-column: 3 / 5;
+                }
+            }
+
+            @media (max-width: 600px) {
+                .grid-container.one-column .cell {
+                    grid-column: 1 / -1;
+                }
+            }
+
+            .add-variable-button {
+                display: inline-block;
+            }
+
+            @media (max-width: 600px) {
+                .add-variable-button {
+                    display: block;
+                    width: 100%;
+                }
+            }
+
+            .cell--span1 {
+                grid-column: span 1 / span 1;
+            }
+            .cell--span2 {
+                grid-column: span 2 / span 2;
+            }
+            .cell--span3 {
+                grid-column: span 3 / span 3;
+            }
+            .cell--span4 {
+                grid-column: span 4 / span 4;
+            }
+
+            /* Responzívne nastavenie počtu stĺpcov */
+            @media (min-width: 0px) {
+                .grid-container {
+                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* xs */
+                }
+            }
+
+            @media (min-width: var(--breakpoint-sm, 600px)) {
+                .grid-container {
+                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* sm */
+                }
+            }
+
+            @media (min-width: var(--breakpoint-md, 960px)) {
+                .grid-container {
+                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* md */
+                }
+            }
+
+            @media (min-width: var(--breakpoint-lg, 1280px)) {
+                .grid-container {
+                    grid-template-columns: repeat(4, minmax(0, 1fr)); /* lg */
+                }
+            }
+
+            @media (min-width: var(--breakpoint-xl, 1536px)) {
+                .grid-container {
+                    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
+                }
+            }
         `,
 ];
 __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);
@@ -264,9 +811,30 @@ __decorate([
 __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);