overview-components 1.1.42 → 1.1.44

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

@@ -10,6 +10,7 @@ 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';
+import { Pane } from 'tweakpane';
 // components
 import '../shared/lit-icon.js';
 import '../shared/lit-button.js';
@@ -28,6 +29,7 @@ import { formatCurrency, formatDecimal } from '../utils/formatNumber.js';
 import { setLocale } from '../utils/localization.js';
 import { msg } from '@lit/localize';
 import { isEqual } from 'lodash';
+import { getOperatorsByColumnType, getDefaultOperator, } from '../utils/getOperatorByType.js';
 let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
     constructor() {
         super(...arguments);
@@ -46,7 +48,10 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
         this.isMobile = window.innerWidth <= 600;
         this._resizeListener = this.handleResize.bind(this);
         this.sortableInstances = [];
+        this.settingsPanes = new Map();
         this.sortableGroupId = `group-${Math.random().toString(36).substring(2, 9)}`;
+        this.activeSettingsCell = null;
+        this.settingsPopperOpen = false;
         this.backgroundColorOptions = [
             {
                 backgroundColor: 'transparent',
@@ -73,78 +78,82 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
                 border: '1px solid var(--color-primary-dark)',
             },
         ];
+        this.valueColorOptions = [
+            {
+                color: 'var(--text-primary)',
+            },
+            {
+                color: 'var(--color-success-main)',
+            },
+            {
+                color: 'var(--color-error-main)',
+            },
+            {
+                color: 'var(--color-warning-main)',
+            },
+            {
+                color: 'var(--color-info-main)',
+            },
+            {
+                color: 'var(--color-primary-main)',
+            },
+        ];
         this.language = 'cs';
         this.BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+        this.closeSettingsPopper = () => {
+            // Clean up any existing tweakpanes before closing
+            this.destroySettingsPanes();
+            this.settingsPopperOpen = false;
+            this.activeSettingsCell = null;
+        };
         this.handleSettingsChanged = (newRows) => {
             this.onSettingsChanged?.(newRows);
         };
+        this.addCustomEmptyCell = () => {
+            // Generate a unique field name for the custom cell
+            const customCellCount = this.rows.filter((cell) => cell.field.startsWith('custom_cell_')).length;
+            const fieldName = `custom_cell_${customCellCount + 1}`;
+            // Create a new empty custom cell (without tooltip, headerName, or value)
+            const newCell = {
+                field: fieldName,
+                type: 'string',
+                size: { xs: 4, sm: 2, md: 1, lg: 1, xl: 1 },
+            };
+            const newRows = [...this.rows, newCell];
+            this.rows = newRows;
+            this.handleSettingsChanged(newRows);
+            // Automatically open settings for the new cell to allow user to customize it
+            setTimeout(() => {
+                this.toggleSettingsPane(newCell);
+            }, 100);
+        };
         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 style="position: relative;">
+                          <lit-icon
+                              icon="cog"
+                              size="1rem"
+                              style="cursor: pointer"
+                              @click=${() => this.toggleSettingsPane(cell)}
+                              id="settings-trigger-${cell.field}"
+                          ></lit-icon>
+
+                          ${this.activeSettingsCell?.field === cell.field
+                    ? html `
+                                    <simple-popper
+                                        .showing=${this.settingsPopperOpen}
+                                        .placement=${'bottom-middle'}
+                                        .manualOpening=${true}
+                                        .maxWidthAsTarget=${false}
+                                        .onClose=${this.closeSettingsPopper}
+                                    >
+                                        ${this.renderSettingsContent()}
+                                    </simple-popper>
+                                `
+                    : ''}
+                      </div>
 
                       <div class="drag-handle">
                           <lit-icon icon="hamburger" size="1rem"></lit-icon>
@@ -178,6 +187,18 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
             ${this.getHeaderLabel(cell)} ${this.getHeaderActions(cell)}
         </div>`;
         };
+        this.handleButtonClick = (cell) => {
+            // First try the original buttonFn if it exists and is a function
+            if (cell.buttonFn && typeof cell.buttonFn === 'function') {
+                cell.buttonFn();
+                return;
+            }
+            // Otherwise use the href functionality like links
+            const url = this.getLinkUrl(cell);
+            if (url) {
+                window.open(url, '_blank');
+            }
+        };
         this.getCellButton = (cell) => {
             return html `
             <div style="display: flex; justify-content: space-between">
@@ -185,25 +206,26 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
                     style="flex-grow: 1; margin-right: 0.5rem"
                     .fullWidth="${cell.buttonFullWidth}"
                     variant="${cell.buttonVariant || 'contained'}"
+                    color="${cell.buttonColor || 'primary'}"
                     label="${cell?.headerName}"
-                    @click=${cell?.buttonFn}
+                    @click=${() => this.handleButtonClick(cell)}
                 ></lit-button>
                 ${this.getHeaderActions(cell)}
             </div>
         `;
         };
         this.getCellLink = (cell) => {
+            const linkUrl = this.getLinkUrl(cell);
+            const displayText = cell?.value || linkUrl || '';
             return html `<div>${this.getHeader(cell)}</div>
-            <a class="link" href=${cell?.value ? cell.value : ''} target="_blank"
-                >${cell?.value ? cell.value : ''}
-            </a> `;
+            <a class="link" href=${linkUrl} target="_blank">${displayText} </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="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                style="${styleMap(this.computeValueStyles(cell))}"
                 class="process-data-value"
             >
                 ${unsafeHTML(value)}
@@ -212,7 +234,7 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
         this.getCellDate = (cell) => {
             return html `<div>${this.getHeader(cell)}</div>
             <div
-                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                style="${styleMap(this.computeValueStyles(cell))}"
                 class="process-data-value"
             >
                 ${cell?.value
@@ -223,7 +245,7 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
         this.getCellCurrency = (cell) => {
             return html `<div>${this.getHeader(cell)}</div>
             <div
-                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                style="${styleMap(this.computeValueStyles(cell))}"
                 class="process-data-value"
             >
                 ${cell?.value
@@ -238,7 +260,7 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
         this.getCellNumber = (cell) => {
             return html `<div>${this.getHeader(cell)}</div>
             <div
-                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                style="${styleMap(this.computeValueStyles(cell))}"
                 class="process-data-value"
             >
                 ${cell?.value
@@ -252,12 +274,19 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
             </div> `;
         };
         this.getCellProgress = (cell) => {
+            // Convert decimal value (0.0-1.0) to percentage (0-100) for lit-progress-bar
+            const progressValue = typeof cell?.value === 'number' ? cell.value * 100 : 0;
             return html `<div>${this.getHeader(cell)}</div>
             <div
-                style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                style="${styleMap(this.computeValueStyles(cell))}"
                 class="process-data-value"
             >
-                <lit-progress-bar .progress="${cell?.value}"></lit-progress-bar>
+                <lit-progress-bar
+                    .progress="${progressValue}"
+                    .color="${cell.progressColor || 'primary'}"
+                    label=""
+                    style="width: 100%;"
+                ></lit-progress-bar>
             </div> `;
         };
         this.getInlineCellValue = (cell) => {
@@ -289,6 +318,10 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
                         ? formatDate(cell.value, this.userLang || 'cs', !!this.dateFormat, this.dateFormat)
                         : '';
                     break;
+                case 'progress':
+                    // For progress, show percentage value
+                    value = cell?.value ? `${Math.round(cell.value * 100)}%` : '0%';
+                    break;
                 default:
                     value = typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');
             }
@@ -296,7 +329,7 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
             <div style="display: flex;align-items: center; justify-content: end; gap: 0.5rem;">
                 <div
                     style="${styleMap({
-                ...(cell.cellStyle || {}),
+                ...this.computeCellStyles(cell),
                 width: 'fit-content',
                 display: 'flex',
                 alignItems: 'center',
@@ -305,10 +338,12 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
                 padding: '0.375rem',
             })}"
                 >
-                    <div style="display: flex;align-items: center; justify-content: end; gap: 0.5rem; flex-direction: row">
+                    <div
+                        style="display: flex;align-items: center; justify-content: end; gap: 0.5rem; flex-direction: row"
+                    >
                         <div>${this.getHeaderLabel(cell)}</div>
                         <div
-                            style="${cell?.valueStyle ? styleMap(cell?.valueStyle) : ''}"
+                            style="${styleMap(this.computeValueStyles(cell))}"
                             class="process-data-value"
                         >
                             ${value}
@@ -320,6 +355,105 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
         `;
         };
     }
+    createCellSettingsConfig(cell) {
+        return {
+            size: cell.size?.lg ?? 1,
+            mobileSize: cell.size?.xs ?? 4,
+            cellVariant: cell.cellVariant || 'default',
+            cellCustomStyles: cell.cellCustomStyles || false,
+            valueVariant: cell.valueVariant || 'default',
+            valueCustomStyles: cell.valueCustomStyles || false,
+            fontWeight: cell.valueStyle?.fontWeight === 'bold',
+            valueColor: this.getValueColorIndex(cell),
+            cellType: cell.type || 'string',
+            // Cell content properties
+            headerName: cell.headerName || '',
+            cellValue: cell.value || '',
+            // Cell type specific properties
+            href: cell.href || '',
+            linkType: cell.linkType || 'custom',
+            linkVariable: cell.linkVariable || '',
+            dynamicLink: cell.dynamicLink || '',
+            numberOfDecimal: cell.numberOfDecimal ?? 2,
+            progressColor: cell.progressColor || 'primary',
+            buttonVariant: cell.buttonVariant || 'contained',
+            buttonColor: cell.buttonColor || 'primary',
+            buttonFullWidth: cell.buttonFullWidth ?? false,
+            currencyType: cell.currencyType || 'CZK',
+            customCSS: JSON.stringify(cell.cellStyle || {}),
+            // Conditional formatting - simplified structure
+            conditionEnabled: !!cell.conditionalFormatting?.enabled,
+            conditionVariable: cell.conditionalFormatting?.variable ?? '',
+            conditionOperator: cell.conditionalFormatting?.operator ??
+                this.getDefaultOperatorForCell(cell),
+            conditionValue: cell.conditionalFormatting?.value ?? '',
+            conditionColor: this.getConditionColorIndex(cell),
+            // Conditional hide cell settings
+            hideConditionEnabled: !!cell.hideCondition?.enabled,
+            hideConditionVariable: cell.hideCondition?.variable ?? '',
+            hideConditionOperator: cell.hideCondition?.operator ?? this.getDefaultOperatorForCell(cell),
+            hideConditionValue: cell.hideCondition?.value ?? '',
+        };
+    }
+    getValueColorIndex(cell) {
+        const valueColor = cell.valueStyle?.color;
+        if (!valueColor || valueColor === 'transparent')
+            return 0;
+        const index = this.valueColorOptions.findIndex((option) => option.color === valueColor);
+        return index >= 0 ? index : 0;
+    }
+    getConditionColorIndex(cell) {
+        const conditionBg = cell.conditionalFormatting?.backgroundColor;
+        if (!conditionBg || conditionBg === 'transparent')
+            return 0;
+        const index = this.backgroundColorOptions.findIndex((option) => option.backgroundColor === conditionBg);
+        return index >= 0 ? index : 0;
+    }
+    getOperatorOptionsForCell(cell) {
+        let cellType = 'string'; // default type
+        // Map cell types to Type enum
+        switch (cell.type) {
+            case 'number':
+            case 'currency':
+            case 'progress':
+                cellType = 'number';
+                break;
+            case 'date':
+                cellType = 'date';
+                break;
+            case 'string':
+            case 'button':
+            case 'link':
+            default:
+                cellType = 'string';
+                break;
+        }
+        return getOperatorsByColumnType(cellType).map((op) => ({
+            text: op.label,
+            value: op.value,
+        }));
+    }
+    getDefaultOperatorForCell(cell) {
+        let cellType = 'string'; // default type
+        // Map cell types to Type enum
+        switch (cell.type) {
+            case 'number':
+            case 'currency':
+            case 'progress':
+                cellType = 'number';
+                break;
+            case 'date':
+                cellType = 'date';
+                break;
+            case 'string':
+            case 'button':
+            case 'link':
+            default:
+                cellType = 'string';
+                break;
+        }
+        return getDefaultOperator(cellType);
+    }
     getBreakpoint() {
         const width = window.innerWidth;
         if (width >= 1920)
@@ -355,6 +489,7 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
     }
     disconnectedCallback() {
         this.destroySortables();
+        this.destroySettingsPanes();
         window.removeEventListener('resize', this._resizeListener); // Remove listener
         super.disconnectedCallback();
     }
@@ -363,8 +498,36 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
             this.initSortable();
         }
     }
+    loadTweakpaneCSS() {
+        // Check if CSS is already loaded
+        if (document.querySelector('link[href*="tweakpane"]')) {
+            return;
+        }
+        // Create link element for Tweakpane CSS
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = 'https://unpkg.com/tweakpane@4.0.5/dist/tweakpane.css';
+        document.head.appendChild(link);
+        // Add some basic custom styles for tooltip usage
+        const style = document.createElement('style');
+        style.textContent = `
+            .tp-dfwv {
+                min-width: 240px !important;
+            }
+            .tp-rotv {
+                font-size: 12px !important;
+            }
+            .tp-lblv_l {
+                font-size: 11px !important;
+            }
+        `;
+        document.head.appendChild(style);
+    }
     setFontWeight(cell) {
         const isBold = cell.valueStyle?.fontWeight === 'bold';
+        // Enable custom styles mode and set font weight
+        cell.valueCustomStyles = true;
+        cell.valueVariant = 'default';
         cell.valueStyle = {
             ...(cell.valueStyle || {}),
             fontWeight: isBold ? '500' : 'bold',
@@ -372,17 +535,1064 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
         this.rows = [...this.rows];
         this.handleSettingsChanged(this.rows);
     }
+    getAvailableVariables(excludeField) {
+        const variables = [];
+        // Add variables from current rows (excluding the current cell)
+        this.rows.forEach((cell) => {
+            if (cell.field !== excludeField) {
+                variables.push({
+                    text: cell.headerName || cell.field,
+                    value: cell.field,
+                });
+            }
+        });
+        // Add variables from data object (that are not in current rows)
+        const existingFields = this.rows.map((cell) => cell.field);
+        Object.keys(this.data || {}).forEach((key) => {
+            if (key !== excludeField && !existingFields.includes(key)) {
+                const item = this.data[key];
+                const lang = this.userLang || 'cs';
+                const name = item?.[`tvar_name_${lang}`] || item?.tvar_name_cs || key;
+                variables.push({
+                    text: name,
+                    value: key,
+                });
+            }
+        });
+        return variables.sort((a, b) => a.text.localeCompare(b.text));
+    }
+    getAllAvailableVariables() {
+        const variables = [];
+        // Add variables from current rows (including all cells)
+        this.rows.forEach((cell) => {
+            variables.push({
+                text: cell.headerName || cell.field,
+                value: cell.field,
+            });
+        });
+        // Add variables from data object (that are not in current rows)
+        const existingFields = this.rows.map((cell) => cell.field);
+        Object.keys(this.data || {}).forEach((key) => {
+            if (!existingFields.includes(key)) {
+                const item = this.data[key];
+                const lang = this.userLang || 'cs';
+                const name = item?.[`tvar_name_${lang}`] || item?.tvar_name_cs || key;
+                variables.push({
+                    text: name,
+                    value: key,
+                });
+            }
+        });
+        return variables.sort((a, b) => a.text.localeCompare(b.text));
+    }
+    setConditionalFormatting(cell, property, value) {
+        // Initialize conditional formatting if not exists
+        if (!cell.conditionalFormatting) {
+            cell.conditionalFormatting = {
+            // enabled: false,
+            // variable: '',
+            // operator: 'equals',
+            // value: '',
+            // backgroundColor: 'transparent',
+            };
+        }
+        // Set the property
+        cell.conditionalFormatting[property] = value;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
     setCellStyle(style, cell) {
         cell.cellStyle = style;
         this.rows = [...this.rows];
         this.handleSettingsChanged(this.rows);
     }
+    setCellVariant(variant, cell) {
+        cell.cellVariant = variant;
+        // If setting a semantic variant, disable custom styles
+        if (variant !== 'default') {
+            cell.cellCustomStyles = false;
+        }
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setValueVariant(variant, cell) {
+        cell.valueVariant = variant;
+        // If setting a semantic variant, disable custom styles
+        if (variant !== 'default') {
+            cell.valueCustomStyles = false;
+        }
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    enableCellCustomStyles(cell) {
+        cell.cellCustomStyles = true;
+        cell.cellVariant = 'default';
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    enableValueCustomStyles(cell) {
+        cell.valueCustomStyles = true;
+        cell.valueVariant = 'default';
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
     destroySortables() {
         this.sortableInstances.forEach((instance) => {
             instance.destroy();
         });
         this.sortableInstances = [];
     }
+    destroySettingsPanes() {
+        this.settingsPanes.forEach((pane, field) => {
+            try {
+                pane.dispose();
+            }
+            catch (error) {
+                console.error(`Error disposing pane for ${field}:`, error);
+            }
+        });
+        this.settingsPanes.clear();
+        // Remove any floating tooltip containers (legacy cleanup)
+        document.querySelectorAll('.tweakpane-floating-tooltip').forEach((el) => {
+            el.remove();
+        });
+        // Clean up any leftover tweakpane containers in document
+        document.querySelectorAll('[id^="tweakpane-"]').forEach((el) => {
+            const parentContainer = el.closest('.tweakpane-container');
+            if (parentContainer) {
+                parentContainer.remove();
+            }
+        });
+    }
+    toggleSettingsPane(cell) {
+        // If clicking the same cell, toggle the popper
+        if (this.activeSettingsCell?.field === cell.field) {
+            this.settingsPopperOpen = !this.settingsPopperOpen;
+            if (!this.settingsPopperOpen) {
+                this.activeSettingsCell = null;
+            }
+        }
+        else {
+            // Different cell, show popper for this cell
+            this.activeSettingsCell = cell;
+            this.settingsPopperOpen = true;
+        }
+    }
+    renderSettingsContent() {
+        if (!this.activeSettingsCell)
+            return null;
+        const cell = this.activeSettingsCell;
+        return html `
+            <div class="tweakpane-container" @click=${(e) => e.stopPropagation()}>
+                <div id="tweakpane-${cell.field}"></div>
+            </div>
+        `;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Initialize tweakpane when activeSettingsCell changes and popper is open
+        if (changedProperties.has('activeSettingsCell') ||
+            changedProperties.has('settingsPopperOpen')) {
+            if (this.activeSettingsCell && this.settingsPopperOpen) {
+                // Use multiple requestAnimationFrame calls and retry logic for better reliability
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        this.initializeTweakpaneWithRetry(this.activeSettingsCell);
+                    });
+                });
+            }
+        }
+    }
+    initializeTweakpaneWithRetry(cell, attempt = 1) {
+        // Clean up any existing pane for this cell first
+        const existingPane = this.settingsPanes.get(cell.field);
+        if (existingPane) {
+            existingPane.dispose();
+            this.settingsPanes.delete(cell.field);
+        }
+        const maxAttempts = 10;
+        const selector = `#tweakpane-${cell.field}`;
+        const container = document.querySelector(selector) || this.shadowRoot?.querySelector(selector);
+        if (container) {
+            this.initializeTweakpane(cell, 0);
+        }
+        else if (attempt < maxAttempts) {
+            setTimeout(() => {
+                // Check if we're still supposed to be showing this cell
+                if (this.activeSettingsCell?.field === cell.field && this.settingsPopperOpen) {
+                    this.initializeTweakpaneWithRetry(cell, attempt + 1);
+                }
+            }, 50);
+        }
+        else {
+            console.warn(`Failed to find tweakpane container for ${cell.field} after ${maxAttempts} attempts`);
+        }
+    }
+    initializeTweakpane(cell, retryCount = 0) {
+        // Load Tweakpane CSS
+        this.loadTweakpaneCSS();
+        // Get the container from simple-popper (rendered in document)
+        const selector = `#tweakpane-${cell.field}`;
+        // simple-popper renders content to document body, so check there first
+        const container = document.querySelector(selector) || this.shadowRoot?.querySelector(selector);
+        if (!container) {
+            if (retryCount < 3) {
+                console.warn(`Tweakpane container not found, retrying... (${retryCount + 1}/3):`, `#tweakpane-${cell.field}`);
+                setTimeout(() => {
+                    this.initializeTweakpane(cell, retryCount + 1);
+                }, 100);
+                return;
+            }
+            else {
+                console.error('Tweakpane container not found after 3 retries:', `#tweakpane-${cell.field}`);
+                return;
+            }
+        }
+        // Clear any existing pane for this cell
+        const existingPane = this.settingsPanes.get(cell.field);
+        if (existingPane) {
+            existingPane.dispose();
+            this.settingsPanes.delete(cell.field);
+        }
+        // Create Tweakpane in the container
+        const pane = new Pane({
+            container: container,
+            title: `${cell.headerName || cell.field}`,
+        });
+        const config = this.createCellSettingsConfig(cell);
+        // Add size controls for desktop and mobile (only if not in grid variables mode)
+        if (!this.gridVariables) {
+            // Desktop size input
+            const desktopSizeInput = pane.addBinding(config, 'size', {
+                view: 'list',
+                label: 'Desktop Size',
+                options: [
+                    { text: '1 Column', value: 1 },
+                    { text: '2 Columns', value: 2 },
+                    { text: '3 Columns', value: 3 },
+                    { text: '4 Columns', value: 4 },
+                ],
+            });
+            desktopSizeInput.on('change', (ev) => {
+                this.setCellSize(ev.value, cell, 'lg');
+            });
+            // Mobile size input
+            const mobileSizeInput = pane.addBinding(config, 'mobileSize', {
+                view: 'list',
+                label: 'Mobile Size',
+                options: [
+                    { text: '1 Column', value: 1 },
+                    { text: '2 Columns', value: 2 },
+                    { text: '3 Columns', value: 3 },
+                    { text: '4 Columns', value: 4 },
+                ],
+            });
+            mobileSizeInput.on('change', (ev) => {
+                this.setCellSize(ev.value, cell, 'xs');
+            });
+        }
+        // Add cell type control - at the top
+        const cellTypeInput = pane.addBinding(config, 'cellType', {
+            view: 'list',
+            label: 'Cell Type',
+            options: [
+                { text: 'String', value: 'string' },
+                { text: 'Button', value: 'button' },
+                { text: 'Link', value: 'link' },
+                { text: 'Date', value: 'date' },
+                { text: 'Currency', value: 'currency' },
+                { text: 'Progress', value: 'progress' },
+                { text: 'Number', value: 'number' },
+            ],
+        });
+        cellTypeInput.on('change', (ev) => {
+            this.setCellType(cell, ev.value);
+        });
+        // Add header name and value controls (only for custom cells)
+        const isCustomCell = cell.field.startsWith('custom_cell_');
+        if (isCustomCell) {
+            const headerNameInput = pane.addBinding(config, 'headerName', {
+                label: 'Cell Header',
+            });
+            headerNameInput.on('change', (ev) => {
+                this.setCellHeaderName(cell, ev.value);
+            });
+            // Add cell value control for custom cells
+            const cellValueInput = pane.addBinding(config, 'cellValue', {
+                label: 'Cell Value',
+                multiline: cell.type === 'string',
+            });
+            cellValueInput.on('change', (ev) => {
+                this.setCellValue(cell, ev.value);
+            });
+        }
+        // Add cell variant control - common for all types
+        const cellVariantOptions = [
+            { text: 'Default', value: 'default' },
+            { text: 'Primary', value: 'primary' },
+            { text: 'Success', value: 'success' },
+            { text: 'Warning', value: 'warning' },
+            { text: 'Error', value: 'error' },
+            { text: 'Info', value: 'info' },
+            { text: 'Custom', value: 'custom' },
+        ];
+        const cellVariantInput = pane.addBinding(config, 'cellVariant', {
+            view: 'list',
+            label: 'Cell Style',
+            options: cellVariantOptions,
+        });
+        // Add CSS input for custom styles (always present but controlled by visibility)
+        const cssInput = pane.addBinding(config, 'customCSS', {
+            label: 'Cell CSS',
+            multiline: true,
+            rows: 4,
+        });
+        cssInput.on('change', (ev) => {
+            try {
+                const cssObject = JSON.parse(ev.value || '{}');
+                this.setCellStyle(cssObject, cell);
+            }
+            catch (error) {
+                console.error('Invalid JSON for custom CSS:', error);
+            }
+        });
+        const showCssInput = () => {
+            if (cssInput.element) {
+                cssInput.element.style.display = '';
+            }
+        };
+        const hideCssInput = () => {
+            if (cssInput.element) {
+                cssInput.element.style.display = 'none';
+            }
+        };
+        // Set initial visibility based on whether custom style is selected
+        if (config.cellCustomStyles) {
+            showCssInput();
+        }
+        else {
+            hideCssInput();
+        }
+        cellVariantInput.on('change', (ev) => {
+            if (ev.value === 'custom') {
+                this.enableCellCustomStyles(cell);
+                showCssInput();
+            }
+            else {
+                this.setCellVariant(ev.value, cell);
+                hideCssInput();
+            }
+        });
+        // Add cell type-specific controls
+        this.addCellTypeSpecificControls(pane, config, cell);
+        // Add conditional formatting section
+        const conditionFolder = pane.addFolder({
+            title: 'Conditional Cell Formatting',
+            expanded: false,
+        });
+        // Enable/disable conditional formatting
+        const conditionEnabledInput = conditionFolder.addBinding(config, 'conditionEnabled', {
+            label: 'Enable Conditions',
+        });
+        conditionEnabledInput.on('change', (ev) => {
+            this.setConditionalFormatting(cell, 'enabled', ev.value);
+        });
+        // Variable selector - compare against variables from grid (including current cell)
+        const variableOptions = this.getAllAvailableVariables();
+        if (variableOptions.length > 0) {
+            // Set default variable to current cell's field if not already set
+            if (!config.conditionVariable) {
+                config.conditionVariable = cell.field;
+                this.setConditionalFormatting(cell, 'variable', cell.field);
+            }
+            const conditionVariableInput = conditionFolder.addBinding(config, 'conditionVariable', {
+                view: 'list',
+                label: 'Variable',
+                options: variableOptions,
+            });
+            conditionVariableInput.on('change', (ev) => {
+                this.setConditionalFormatting(cell, 'variable', ev.value);
+            });
+        }
+        // Condition operator - use operators based on cell type
+        const operatorOptions = this.getOperatorOptionsForCell(cell);
+        const operatorInput = conditionFolder.addBinding(config, 'conditionOperator', {
+            view: 'list',
+            label: 'Operator',
+            options: operatorOptions,
+        });
+        operatorInput.on('change', (ev) => {
+            this.setConditionalFormatting(cell, 'operator', ev.value);
+        });
+        // Condition value - text input for comparison value
+        const conditionValueInput = conditionFolder.addBinding(config, 'conditionValue', {
+            label: 'Value',
+        });
+        conditionValueInput.on('change', (ev) => {
+            this.setConditionalFormatting(cell, 'value', ev.value);
+        });
+        // Condition background color
+        const conditionColorInput = conditionFolder.addBinding(config, 'conditionColor', {
+            view: 'list',
+            label: 'Cell Style',
+            options: this.backgroundColorOptions.map((option, index) => ({
+                text: this.getBackgroundColorName(option.backgroundColor),
+                value: index,
+            })),
+        });
+        conditionColorInput.on('change', (ev) => {
+            const selectedOption = this.backgroundColorOptions[ev.value];
+            this.setConditionalFormatting(cell, 'backgroundColor', selectedOption.backgroundColor);
+        });
+        // input for value color
+        const conditionValueColorInput = conditionFolder.addBinding(config, 'valueColor', {
+            view: 'list',
+            label: 'Value Color',
+            options: this.valueColorOptions.map((option, index) => ({
+                text: this.getValueColorName(option.color),
+                value: index,
+            })),
+        });
+        conditionValueColorInput.on('change', (ev) => {
+            const selectedOption = this.valueColorOptions[ev.value];
+            this.setConditionalFormatting(cell, 'valueColor', selectedOption.color);
+        });
+        // Add conditional hide section
+        const hideFolder = pane.addFolder({
+            title: 'Conditional Hide Cell',
+            expanded: false,
+        });
+        // Enable/disable conditional hide
+        const hideConditionEnabledInput = hideFolder.addBinding(config, 'hideConditionEnabled', {
+            label: 'Enable Hide Conditions',
+        });
+        hideConditionEnabledInput.on('change', (ev) => {
+            this.setHideCondition(cell, 'enabled', ev.value);
+        });
+        // Variable selector for hide condition
+        const hideVariableOptions = this.getAllAvailableVariables();
+        if (hideVariableOptions.length > 0) {
+            // Set default variable to current cell's field if not already set
+            if (!config.hideConditionVariable) {
+                config.hideConditionVariable = cell.field;
+                this.setHideCondition(cell, 'variable', cell.field);
+            }
+            const hideConditionVariableInput = hideFolder.addBinding(config, 'hideConditionVariable', {
+                view: 'list',
+                label: 'Variable',
+                options: hideVariableOptions,
+            });
+            hideConditionVariableInput.on('change', (ev) => {
+                this.setHideCondition(cell, 'variable', ev.value);
+            });
+        }
+        // Hide condition operator - use operators based on cell type
+        const hideOperatorOptions = this.getOperatorOptionsForCell(cell);
+        const hideOperatorInput = hideFolder.addBinding(config, 'hideConditionOperator', {
+            view: 'list',
+            label: 'Operator',
+            options: hideOperatorOptions,
+        });
+        hideOperatorInput.on('change', (ev) => {
+            this.setHideCondition(cell, 'operator', ev.value);
+        });
+        // Hide condition value - text input for comparison value
+        const hideConditionValueInput = hideFolder.addBinding(config, 'hideConditionValue', {
+            label: 'Value',
+        });
+        hideConditionValueInput.on('change', (ev) => {
+            this.setHideCondition(cell, 'value', ev.value);
+        });
+        // Add delete button
+        const deleteBtn = pane.addButton({ title: 'Delete Cell' });
+        deleteBtn.on('click', () => {
+            this.removeCellFromRows(cell.field);
+            this.closeSettingsPopper();
+        });
+        this.settingsPanes.set(cell.field, pane);
+        return pane;
+    }
+    addCellTypeSpecificControls(pane, config, cell) {
+        const cellType = cell.type || 'string';
+        // Create a tab for the current cell type only
+        const tabTitle = this.getCellTypeTabTitle(cellType);
+        if (tabTitle) {
+            const tab = pane.addTab({
+                pages: [{ title: tabTitle }],
+            });
+            const tabPage = tab.pages[0];
+            // Add controls based on cell type
+            switch (cellType) {
+                case 'string':
+                    this.addStringControls(tabPage, config, cell);
+                    break;
+                case 'link':
+                    this.addLinkControls(tabPage, config, cell);
+                    break;
+                case 'number':
+                case 'progress':
+                    this.addNumberControls(tabPage, config, cell);
+                    break;
+                case 'button':
+                    this.addButtonControls(tabPage, config, cell);
+                    break;
+                case 'currency':
+                    this.addCurrencyControls(tabPage, config, cell);
+                    break;
+                case 'date':
+                    this.addDateProgressControls(tabPage, config, cell);
+                    break;
+            }
+        }
+    }
+    getCellTypeTabTitle(cellType) {
+        const typeTitles = {
+            string: 'String Settings',
+            link: 'Link Settings',
+            number: 'Number Settings',
+            button: 'Button Settings',
+            currency: 'Currency Settings',
+            date: 'Date Settings',
+            progress: 'Progress Settings',
+        };
+        return typeTitles[cellType] || 'Cell Settings';
+    }
+    addStringControls(pane, config, cell) {
+        // Value Bold
+        const fontInput = pane.addBinding(config, 'fontWeight', {
+            label: 'Value Bold',
+        });
+        fontInput.on('change', () => {
+            this.setFontWeight(cell);
+        });
+        // Value Variant
+        const valueVariantOptions = [
+            { text: 'Default', value: 'default' },
+            { text: 'Primary', value: 'primary' },
+            { text: 'Success', value: 'success' },
+            { text: 'Warning', value: 'warning' },
+            { text: 'Error', value: 'error' },
+            { text: 'Info', value: 'info' },
+            { text: 'Custom', value: 'custom' },
+        ];
+        const valueVariantInput = pane.addBinding(config, 'valueVariant', {
+            view: 'list',
+            label: 'Value Color',
+            options: valueVariantOptions,
+        });
+        valueVariantInput.on('change', (ev) => {
+            if (ev.value === 'custom') {
+                this.enableValueCustomStyles(cell);
+            }
+            else {
+                this.setValueVariant(ev.value, cell);
+            }
+        });
+    }
+    addLinkControls(pane, config, cell) {
+        // Link Type selector
+        const linkTypeInput = pane.addBinding(config, 'linkType', {
+            view: 'list',
+            label: 'Link Type',
+            options: [
+                { text: 'Custom URL', value: 'custom' },
+                { text: 'Case Variable', value: 'case' },
+            ],
+        });
+        linkTypeInput.on('change', (ev) => {
+            this.setLinkType(cell, ev.value);
+        });
+        // Custom URL input (shown when linkType is 'custom')
+        const hrefInput = pane.addBinding(config, 'href', {
+            label: 'Custom URL',
+        });
+        hrefInput.on('change', (ev) => {
+            this.setHref(cell, ev.value);
+        });
+        // Variable selector (shown when linkType is 'case')
+        const variableOptions = this.getAllAvailableVariables();
+        let linkVariableInput = null;
+        if (variableOptions.length > 0) {
+            linkVariableInput = pane.addBinding(config, 'linkVariable', {
+                view: 'list',
+                label: 'Variable',
+                options: variableOptions,
+            });
+            linkVariableInput.on('change', (ev) => {
+                this.setLinkVariable(cell, ev.value);
+            });
+        }
+        // Show/hide inputs based on linkType
+        const toggleInputVisibility = () => {
+            const isCustom = config.linkType === 'custom';
+            if (hrefInput.element) {
+                hrefInput.element.style.display = isCustom ? '' : 'none';
+            }
+            if (linkVariableInput && linkVariableInput.element) {
+                linkVariableInput.element.style.display = isCustom ? 'none' : '';
+            }
+        };
+        // Initial visibility
+        toggleInputVisibility();
+        // Update visibility when linkType changes
+        linkTypeInput.on('change', () => {
+            setTimeout(toggleInputVisibility, 0);
+        });
+    }
+    addNumberControls(pane, config, cell) {
+        // Value Bold
+        const fontInput = pane.addBinding(config, 'fontWeight', {
+            label: 'Value Bold',
+        });
+        fontInput.on('change', () => {
+            this.setFontWeight(cell);
+        });
+        // Value Variant
+        const valueVariantOptions = [
+            { text: 'Default', value: 'default' },
+            { text: 'Primary', value: 'primary' },
+            { text: 'Success', value: 'success' },
+            { text: 'Warning', value: 'warning' },
+            { text: 'Error', value: 'error' },
+            { text: 'Info', value: 'info' },
+            { text: 'Custom', value: 'custom' },
+        ];
+        const valueVariantInput = pane.addBinding(config, 'valueVariant', {
+            view: 'list',
+            label: 'Value Color',
+            options: valueVariantOptions,
+        });
+        valueVariantInput.on('change', (ev) => {
+            if (ev.value === 'custom') {
+                this.enableValueCustomStyles(cell);
+            }
+            else {
+                this.setValueVariant(ev.value, cell);
+            }
+        });
+    }
+    addButtonControls(pane, config, cell) {
+        // Button Variant
+        const variantInput = pane.addBinding(config, 'buttonVariant', {
+            view: 'list',
+            label: 'Button Variant',
+            options: [
+                { text: 'Contained', value: 'contained' },
+                { text: 'Outlined', value: 'outlined' },
+                { text: 'Text', value: 'text' },
+                { text: 'Dashed', value: 'dashed' },
+            ],
+        });
+        variantInput.on('change', (ev) => {
+            this.setButtonVariant(cell, ev.value);
+        });
+        // Button Color
+        const colorInput = pane.addBinding(config, 'buttonColor', {
+            view: 'list',
+            label: 'Button Color',
+            options: [
+                { text: 'Primary', value: 'primary' },
+                { text: 'Secondary', value: 'secondary' },
+                { text: 'Error', value: 'error' },
+                { text: 'Warning', value: 'warning' },
+                { text: 'AI', value: 'ai' },
+            ],
+        });
+        colorInput.on('change', (ev) => {
+            this.setButtonColor(cell, ev.value);
+        });
+        // Button Full Width
+        const fullWidthInput = pane.addBinding(config, 'buttonFullWidth', {
+            label: 'Button Full Width',
+        });
+        fullWidthInput.on('change', (ev) => {
+            this.setButtonFullWidth(cell, ev.value);
+        });
+        // Add link configuration for buttons (same as links)
+        // Link Type selector
+        const linkTypeInput = pane.addBinding(config, 'linkType', {
+            view: 'list',
+            label: 'Link Type',
+            options: [
+                { text: 'Custom URL', value: 'custom' },
+                { text: 'Case Variable', value: 'case' },
+            ],
+        });
+        linkTypeInput.on('change', (ev) => {
+            this.setLinkType(cell, ev.value);
+        });
+        // Custom URL input (shown when linkType is 'custom')
+        const hrefInput = pane.addBinding(config, 'href', {
+            label: 'Custom URL',
+        });
+        hrefInput.on('change', (ev) => {
+            this.setHref(cell, ev.value);
+        });
+        // Variable selector (shown when linkType is 'case')
+        const variableOptions = this.getAllAvailableVariables();
+        let linkVariableInput = null;
+        if (variableOptions.length > 0) {
+            linkVariableInput = pane.addBinding(config, 'linkVariable', {
+                view: 'list',
+                label: 'Variable',
+                options: variableOptions,
+            });
+            linkVariableInput.on('change', (ev) => {
+                this.setLinkVariable(cell, ev.value);
+            });
+        }
+        // Show/hide inputs based on linkType
+        const toggleInputVisibility = () => {
+            const isCustom = config.linkType === 'custom';
+            if (hrefInput.element) {
+                hrefInput.element.style.display = isCustom ? '' : 'none';
+            }
+            if (linkVariableInput && linkVariableInput.element) {
+                linkVariableInput.element.style.display = isCustom ? 'none' : '';
+            }
+        };
+        // Initial visibility
+        toggleInputVisibility();
+        // Update visibility when linkType changes
+        linkTypeInput.on('change', () => {
+            setTimeout(toggleInputVisibility, 0);
+        });
+    }
+    addCurrencyControls(pane, config, cell) {
+        // Value Bold
+        const fontInput = pane.addBinding(config, 'fontWeight', {
+            label: 'Value Bold',
+        });
+        fontInput.on('change', () => {
+            this.setFontWeight(cell);
+        });
+        // Value Variant
+        const valueVariantOptions = [
+            { text: 'Default', value: 'default' },
+            { text: 'Primary', value: 'primary' },
+            { text: 'Success', value: 'success' },
+            { text: 'Warning', value: 'warning' },
+            { text: 'Error', value: 'error' },
+            { text: 'Info', value: 'info' },
+            { text: 'Custom', value: 'custom' },
+        ];
+        const valueVariantInput = pane.addBinding(config, 'valueVariant', {
+            view: 'list',
+            label: 'Value Color',
+            options: valueVariantOptions,
+        });
+        valueVariantInput.on('change', (ev) => {
+            if (ev.value === 'custom') {
+                this.enableValueCustomStyles(cell);
+            }
+            else {
+                this.setValueVariant(ev.value, cell);
+            }
+        });
+        // Number of Decimals
+        const decimalInput = pane.addBinding(config, 'numberOfDecimal', {
+            label: 'Number of Decimals',
+            min: 0,
+            max: 10,
+            step: 1,
+        });
+        decimalInput.on('change', (ev) => {
+            this.setNumberOfDecimal(cell, ev.value);
+        });
+        // Currency Type
+        const currencyInput = pane.addBinding(config, 'currencyType', {
+            view: 'list',
+            label: 'Currency Type',
+            options: [
+                { text: 'CZK', value: 'CZK' },
+                { text: 'EUR', value: 'EUR' },
+                { text: 'USD', value: 'USD' },
+                { text: 'GBP', value: 'GBP' },
+                { text: 'CHF', value: 'CHF' },
+                { text: 'PLN', value: 'PLN' },
+                { text: 'HUF', value: 'HUF' },
+                { text: 'JPY', value: 'JPY' },
+                { text: 'AUD', value: 'AUD' },
+                { text: 'CAD', value: 'CAD' },
+                { text: 'NOK', value: 'NOK' },
+                { text: 'SEK', value: 'SEK' },
+                { text: 'DKK', value: 'DKK' },
+                { text: 'CNY', value: 'CNY' },
+                { text: 'RUB', value: 'RUB' },
+            ],
+        });
+        currencyInput.on('change', (ev) => {
+            this.setCurrencyType(cell, ev.value);
+        });
+    }
+    addDateProgressControls(pane, config, cell) {
+        // Value Bold
+        const fontInput = pane.addBinding(config, 'fontWeight', {
+            label: 'Value Bold',
+        });
+        fontInput.on('change', () => {
+            this.setFontWeight(cell);
+        });
+        // Value Variant
+        const valueVariantOptions = [
+            { text: 'Default', value: 'default' },
+            { text: 'Primary', value: 'primary' },
+            { text: 'Success', value: 'success' },
+            { text: 'Warning', value: 'warning' },
+            { text: 'Error', value: 'error' },
+            { text: 'Info', value: 'info' },
+            { text: 'Custom', value: 'custom' },
+        ];
+        const valueVariantInput = pane.addBinding(config, 'valueVariant', {
+            view: 'list',
+            label: 'Value Color',
+            options: valueVariantOptions,
+        });
+        valueVariantInput.on('change', (ev) => {
+            if (ev.value === 'custom') {
+                this.enableValueCustomStyles(cell);
+            }
+            else {
+                this.setValueVariant(ev.value, cell);
+            }
+        });
+        // Progress Color (only for progress type)
+        if (cell.type === 'progress') {
+            const progressColorInput = pane.addBinding(config, 'progressColor', {
+                view: 'list',
+                label: 'Progress Color',
+                options: [
+                    { text: 'Primary', value: 'primary' },
+                    { text: 'Success', value: 'success' },
+                    { text: 'Warning', value: 'warning' },
+                    { text: 'Error', value: 'error' },
+                    { text: 'Info', value: 'info' },
+                ],
+            });
+            progressColorInput.on('change', (ev) => {
+                this.setProgressColor(cell, ev.value);
+            });
+        }
+    }
+    getValueColorName(valueColor) {
+        const colorMap = {
+            'var(--text-primary)': 'Default',
+            'var(--color-success-main)': 'Success',
+            'var(--color-error-main)': 'Error',
+            'var(--color-warning-main)': 'Warning',
+            'var(--color-info-main)': 'Info',
+            'var(--color-primary-main)': 'Primary',
+        };
+        return colorMap[valueColor] || 'Unknown';
+    }
+    getBackgroundColorName(backgroundColor) {
+        const colorMap = {
+            transparent: 'None',
+            'var(--color-success-light)': 'Success',
+            'var(--color-error-light)': 'Error',
+            'var(--color-warning-light)': 'Warning',
+            'var(--color-info-light)': 'Info',
+            'var(--color-primary-light)': 'Primary',
+        };
+        return colorMap[backgroundColor] || 'Unknown';
+    }
+    getVariableValue(fieldName) {
+        // First check in current rows
+        const rowCell = this.rows.find((cell) => cell.field === fieldName);
+        if (rowCell) {
+            return rowCell.value;
+        }
+        // Then check in data object
+        const dataItem = this.data?.[fieldName];
+        if (dataItem) {
+            return dataItem.ivar_value;
+        }
+        return '';
+    }
+    evaluateCondition(variableField, conditionValue, operator) {
+        // Get the value of the selected variable
+        const variableValue = this.getVariableValue(variableField);
+        // For isEmpty/isNotEmpty operators, check the raw value first
+        if (operator === 'isEmpty') {
+            return (variableValue === null ||
+                variableValue === undefined ||
+                variableValue === '' ||
+                (typeof variableValue === 'string' && variableValue.trim() === ''));
+        }
+        if (operator === 'isNotEmpty') {
+            return !(variableValue === null ||
+                variableValue === undefined ||
+                variableValue === '' ||
+                (typeof variableValue === 'string' && variableValue.trim() === ''));
+        }
+        const variableStr = String(variableValue || '').toLowerCase();
+        const conditionStr = String(conditionValue || '').toLowerCase();
+        const variableNum = parseFloat(variableValue);
+        const conditionNum = parseFloat(conditionValue);
+        switch (operator) {
+            case '=':
+                return variableStr === conditionStr;
+            case '!=':
+                return variableStr !== conditionStr;
+            case '>':
+                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum > conditionNum;
+            case '>=':
+                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum >= conditionNum;
+            case '<':
+                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum < conditionNum;
+            case '<=':
+                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum <= conditionNum;
+            case 'contains':
+                return variableStr.includes(conditionStr);
+            case 'doesNotContain':
+                return !variableStr.includes(conditionStr);
+            case 'startsWith':
+                return variableStr.startsWith(conditionStr);
+            case 'endsWith':
+                return variableStr.endsWith(conditionStr);
+            // Legacy support for old operator names
+            case 'equals':
+                return variableStr === conditionStr;
+            case 'notEquals':
+                return variableStr !== conditionStr;
+            case 'greater':
+                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum > conditionNum;
+            case 'less':
+                return !isNaN(variableNum) && !isNaN(conditionNum) && variableNum < conditionNum;
+            default:
+                return false;
+        }
+    }
+    computeCellStyles(cell) {
+        // Priority order:
+        // 1. Conditional formatting (highest)
+        // 2. Custom cellStyle (if cellCustomStyles = true)
+        // 3. Semantic cellVariant
+        // 4. Default styles (lowest)
+        let styles = {};
+        // 4. Default styles (base)
+        // (none for now, could add default cell styling here)
+        // 3. Semantic cellVariant
+        if (cell.cellVariant && cell.cellVariant !== 'default') {
+            const variantStyle = this.getCellVariantStyle(cell.cellVariant);
+            styles = { ...styles, ...variantStyle };
+        }
+        // 2. Custom cellStyle (if explicitly enabled)
+        if (cell.cellCustomStyles && cell.cellStyle) {
+            styles = { ...styles, ...cell.cellStyle };
+        }
+        // 1. Conditional formatting (highest priority)
+        const conditionalFormatting = cell.conditionalFormatting;
+        if (conditionalFormatting?.enabled && conditionalFormatting?.variable) {
+            const conditionMet = this.evaluateCondition(conditionalFormatting.variable, conditionalFormatting.value, conditionalFormatting.operator);
+            if (conditionMet) {
+                styles = {
+                    ...styles,
+                    backgroundColor: conditionalFormatting.backgroundColor,
+                    borderRadius: '8px',
+                    border: this.backgroundColorOptions.find((opt) => opt.backgroundColor === conditionalFormatting.backgroundColor)?.border || '1px solid transparent',
+                };
+            }
+        }
+        return styles;
+    }
+    getCellVariantStyle(variant) {
+        const variantMap = {
+            primary: {
+                backgroundColor: 'var(--color-primary-light)',
+                borderRadius: '8px',
+                border: '1px solid var(--color-primary-dark)',
+            },
+            success: {
+                backgroundColor: 'var(--color-success-light)',
+                borderRadius: '8px',
+                border: '1px solid var(--color-success-dark)',
+            },
+            warning: {
+                backgroundColor: 'var(--color-warning-light)',
+                borderRadius: '8px',
+                border: '1px solid var(--color-warning-dark)',
+            },
+            error: {
+                backgroundColor: 'var(--color-error-light)',
+                borderRadius: '8px',
+                border: '1px solid var(--color-error-dark)',
+            },
+            info: {
+                backgroundColor: 'var(--color-info-light)',
+                borderRadius: '8px',
+                border: '1px solid var(--color-info-dark)',
+            },
+        };
+        return variantMap[variant] || {};
+    }
+    computeValueStyles(cell) {
+        // Priority order:
+        // 1. Conditional formatting value color (highest)
+        // 2. Custom valueStyle (if valueCustomStyles = true)
+        // 3. Semantic valueVariant + Independent fontWeight
+        // 4. Default styles (lowest)
+        let styles = {};
+        // 4. Default styles (base)
+        // (none for now, could add default value styling here)
+        // 3. Semantic valueVariant
+        if (cell.valueVariant && cell.valueVariant !== 'default') {
+            const variantStyle = this.getValueVariantStyle(cell.valueVariant);
+            styles = { ...styles, ...variantStyle };
+        }
+        // 3b. Independent fontWeight (works alongside variants)
+        if (cell.fontWeight && cell.fontWeight !== 'normal') {
+            styles = { ...styles, fontWeight: cell.fontWeight };
+        }
+        // 2. Custom valueStyle (if explicitly enabled)
+        if (cell.valueCustomStyles && cell.valueStyle) {
+            styles = { ...styles, ...cell.valueStyle };
+        }
+        // 1. Conditional formatting value color (highest priority)
+        const conditionalFormatting = cell.conditionalFormatting;
+        if (conditionalFormatting?.enabled && conditionalFormatting?.variable) {
+            const conditionMet = this.evaluateCondition(conditionalFormatting.variable, conditionalFormatting.value, conditionalFormatting.operator);
+            if (conditionMet && conditionalFormatting.valueColor) {
+                styles = {
+                    ...styles,
+                    color: conditionalFormatting.valueColor,
+                };
+            }
+        }
+        return styles;
+    }
+    getValueVariantStyle(variant) {
+        const variantMap = {
+            primary: {
+                color: 'var(--color-primary-main)',
+                fontWeight: '500',
+            },
+            success: {
+                color: 'var(--color-success-main)',
+                fontWeight: '500',
+            },
+            warning: {
+                color: 'var(--color-warning-main)',
+                fontWeight: '500',
+            },
+            error: {
+                color: 'var(--color-error-main)',
+                fontWeight: '500',
+            },
+            info: {
+                color: 'var(--color-info-main)',
+                fontWeight: '500',
+            },
+        };
+        return variantMap[variant] || {};
+    }
+    shouldHideCell(cell) {
+        const hideCondition = cell.hideCondition;
+        if (!hideCondition?.enabled || !hideCondition?.variable) {
+            return false;
+        }
+        return this.evaluateCondition(hideCondition.variable, hideCondition.value, hideCondition.operator);
+    }
     initSortable() {
         this.updateComplete.then(() => {
             const containers = this.shadowRoot?.querySelectorAll('.grid-container');
@@ -424,17 +1634,92 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
             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) {
+    setCellSize(size, cell, breakpoint = 'lg') {
         if (!cell.size) {
             cell.size = {};
         }
-        cell.size.lg = size;
+        cell.size[breakpoint] = size;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setCellType(cell, type) {
+        cell.type = type;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+        // Simply close the settings popper when cell type changes
+        // User can reopen to see the new type-specific controls
+        this.closeSettingsPopper();
+    }
+    setHideCondition(cell, property, value) {
+        // Initialize hide condition if not exists
+        if (!cell.hideCondition) {
+            cell.hideCondition = {};
+        }
+        // Set the property
+        cell.hideCondition[property] = value;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setHref(cell, href) {
+        cell.href = href;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setLinkType(cell, linkType) {
+        cell.linkType = linkType;
+        // Clear other link properties when switching types
+        if (linkType === 'custom') {
+            cell.linkVariable = '';
+            cell.dynamicLink = '';
+        }
+        else {
+            cell.href = '';
+        }
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setLinkVariable(cell, linkVariable) {
+        cell.linkVariable = linkVariable;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setNumberOfDecimal(cell, numberOfDecimal) {
+        cell.numberOfDecimal = numberOfDecimal;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setButtonVariant(cell, variant) {
+        cell.buttonVariant = variant;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setButtonColor(cell, color) {
+        cell.buttonColor = color;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setButtonFullWidth(cell, fullWidth) {
+        cell.buttonFullWidth = fullWidth;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setCurrencyType(cell, currencyType) {
+        cell.currencyType = currencyType;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setProgressColor(cell, progressColor) {
+        cell.progressColor = progressColor;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setCellHeaderName(cell, headerName) {
+        cell.headerName = headerName;
+        this.rows = [...this.rows];
+        this.handleSettingsChanged(this.rows);
+    }
+    setCellValue(cell, value) {
+        cell.value = value;
         this.rows = [...this.rows];
         this.handleSettingsChanged(this.rows);
     }
@@ -494,6 +1779,31 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
             this.handleSettingsChanged(newRows);
         }
     }
+    replaceDynamicVariables(template) {
+        // Replace ${variableName} patterns with actual variable values
+        return template.replace(/\$\{([^}]+)\}/g, (match, variableName) => {
+            const variableValue = this.getVariableValue(variableName.trim());
+            return String(variableValue || '');
+        });
+    }
+    getLinkUrl(cell) {
+        if (cell.linkType === 'case') {
+            if (cell.dynamicLink) {
+                // Use dynamic link template and replace variables
+                return this.replaceDynamicVariables(cell.dynamicLink);
+            }
+            else if (cell.linkVariable) {
+                // Get value from the selected variable (backward compatibility)
+                const variableValue = this.getVariableValue(cell.linkVariable);
+                return String(variableValue || '');
+            }
+            return '';
+        }
+        else {
+            // Use custom href
+            return cell.href || '';
+        }
+    }
     render() {
         if (this.hideTabWhen)
             return null;
@@ -528,11 +1838,11 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
                             .reverse()
                             .map((bp) => cell.size?.[bp])
                             .find((s) => s !== undefined) ?? 2);
-                    const classes = `cell--span${spanSize} cell`;
+                    const classes = `cell--span${spanSize} cell ${this.shouldHideCell(cell) ? 'hidden-cell' : ''}`;
                     return html `
                                         <div
                                             class="${classes}"
-                                            style="${styleMap(cell.cellStyle || {})}"
+                                            style="${styleMap(this.computeCellStyles(cell))}"
                                             data-field="${cell.field}"
                                         >
                                             ${cell?.type === 'button'
@@ -555,8 +1865,20 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
                     `}
             ${this.enableSettings
             ? html `
-                      <div style="text-align: right; margin-top: 1rem;">
+                      <div
+                          style="display: flex; gap: 0.5rem; justify-content: right; margin-top: 1rem; flex-wrap: wrap;"
+                      >
+                          <lit-button
+                              color="secondary"
+                              variant="${'dashed'}"
+                              label="${msg('Přiřadit vlastní buňku')}"
+                              icon="add"
+                              .fullWidth=${this.isMobile}
+                              @click="${this.addCustomEmptyCell}"
+                              class="add-variable-button"
+                          ></lit-button>
                           <lit-button
+                              color="secondary"
                               variant="${'dashed'}"
                               label="${msg('Přiřadit proměnnou')}"
                               icon="add"
@@ -598,6 +1920,13 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
                     name.toLowerCase().includes(this.filterText));
             })
                 .sort((a, b) => {
+                // Checked items go to top
+                const aChecked = this.existingFields.includes(a);
+                const bChecked = this.existingFields.includes(b);
+                if (aChecked && !bChecked)
+                    return -1;
+                if (!aChecked && bChecked)
+                    return 1;
                 const aIsUnderscore = a.startsWith('_');
                 const bIsUnderscore = b.startsWith('_');
                 if (aIsUnderscore && !bIsUnderscore)
@@ -617,6 +1946,7 @@ let LitCaseVariablesTab = class LitCaseVariablesTab extends LitElement {
                                                           .checked=${this.existingFields.includes(key)}
                                                       ></lit-checkbox>
                                                       ${this.data?.[key]?.[`tvar_name_${this.userLang}`] || key}
+                                                      (${key})
                                                   </span>
                                               </lit-menu-item>
                                           `)}
@@ -743,6 +2073,7 @@ LitCaseVariablesTab.styles = [
             .header-buttons {
                 display: flex;
                 gap: 0.5rem;
+                color: var(--text-secondary, #777);
             }
 
             .size-button {
@@ -843,6 +2174,20 @@ LitCaseVariablesTab.styles = [
                     grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
                 }
             }
+
+            .hidden-cell {
+                display: none;
+            }
+
+            .tweakpane-container {
+                min-width: 250px;
+                max-width: 300px;
+            }
+
+            /* Basic Tweakpane in tooltip styling - applying to document to bypass shadow DOM */
+            :host([data-tweakpane-loaded]) {
+                display: block;
+            }
         `,
 ];
 __decorate([
@@ -887,6 +2232,12 @@ __decorate([
 __decorate([
     state()
 ], LitCaseVariablesTab.prototype, "isMobile", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "activeSettingsCell", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "settingsPopperOpen", void 0);
 LitCaseVariablesTab = __decorate([
     customElement('lit-case-variables-tab')
 ], LitCaseVariablesTab);