overview-components 1.1.145 → 1.1.146

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

@@ -23,6 +23,17 @@ import '../assets/illustration/not-found.js';
 import { tooltip } from '../shared/simple-tooltip.js';
 import '../shared/lit-tooltip.js';
 import '../shared/lit-progress-bar.js';
+import '../shared/lit-modal.js';
+import '../shared/lit-modal-header.js';
+import '../shared/lit-modal-body.js';
+import '../shared/lit-modal-footer.js';
+import '../shared/lit-select-field.js';
+import '../shared/lit-select.js';
+import '../shared/lit-label.js';
+import '../shared/lit-icon-button.js';
+import '../shared/lit-toggle.js';
+import '../shared/lit-text-field.js';
+import './lit-tabs-overview.js';
 // utils
 import { formatDate } from '../utils/date.js';
 import { formatCurrency, formatDecimal } from '../utils/formatNumber.js';
@@ -37,6 +48,7 @@ export class LitCaseVariablesTab extends LitElement {
         this.variables = [];
         this.hideTabWhen = false;
         this.userLang = 'cs';
+        this.allowedLang = ['cs'];
         this.dateFormat = null;
         this.isLoading = false;
         this.enableSettings = false;
@@ -47,6 +59,32 @@ export class LitCaseVariablesTab extends LitElement {
         this.isOpen = false;
         this.filterText = '';
         this.isMobile = window.innerWidth <= 600;
+        this.expertModeModalOpen = false;
+        this.expertModeCell = null;
+        this.expertModeConfig = {
+            enabled: false,
+            leftType: 'column',
+            leftSource: '',
+            leftValue: '',
+            leftAggregation: 'sum',
+            operation: 'none',
+            rightType: 'variable',
+            rightSource: '',
+            rightValue: '',
+            rightAggregation: 'sum',
+            headerName: '',
+            headerNameMutations: {},
+            pmEnabled: false,
+            pmLeftType: 'column',
+            pmLeftSource: '',
+            pmLeftValue: '',
+            pmLeftAggregation: 'sum',
+            pmOperation: 'none',
+            pmRightType: 'variable',
+            pmRightSource: '',
+            pmRightValue: '',
+            pmRightAggregation: 'sum',
+        };
         this._resizeListener = this.handleResize.bind(this);
         this.sortableInstances = [];
         this.settingsPanes = new Map();
@@ -235,8 +273,9 @@ export class LitCaseVariablesTab extends LitElement {
             </div> `;
         };
         this.getCellProgress = (cell) => {
-            // Convert string to number if needed, then convert decimal value (0.0-1.0) to percentage (0-100)
             const numericValue = this.parseProgressValue(cell?.value);
+            const progressMax = this.resolveProgressMax(cell);
+            const percentage = progressMax > 0 ? (numericValue / progressMax) * 100 : 0;
             const progressColor = this.computeProgressColor(cell);
             return html `<div>${this.getHeader(cell)}</div>
             <div
@@ -244,7 +283,7 @@ export class LitCaseVariablesTab extends LitElement {
                 class="process-data-value"
             >
                 <lit-progress-bar
-                    .progress="${numericValue}"
+                    .progress="${percentage}"
                     .color="${progressColor}"
                     label=""
                     style="width: 100%;"
@@ -291,9 +330,11 @@ export class LitCaseVariablesTab extends LitElement {
                         : '';
                     break;
                 case 'progress':
-                    // For progress, show percentage value - convert string to number if needed
+                    // For progress, show percentage value based on progressMax variable
                     const progressNumeric = this.parseProgressValue(cell?.value);
-                    value = `${Math.round(progressNumeric * 100)}%`;
+                    const progressMaxVal = this.resolveProgressMax(cell);
+                    const progressPercent = progressMaxVal > 0 ? (progressNumeric / progressMaxVal) * 100 : 0;
+                    value = `${Math.round(progressPercent)}%`;
                     break;
                 case 'checkbox':
                     value = this.parseBooleanValue(cell?.value) ? msg('Ano') : msg('Ne');
@@ -543,6 +584,7 @@ export class LitCaseVariablesTab extends LitElement {
             dynamicLink: cell.dynamicLink || '',
             numberOfDecimal: cell.numberOfDecimal ?? 2,
             progressColor: cell.progressColor || 'primary',
+            progressMax: cell.progressMax ?? 100,
             buttonVariant: cell.buttonVariant || 'contained',
             buttonColor: cell.buttonColor || 'primary',
             buttonFullWidth: cell.buttonFullWidth ?? false,
@@ -1458,6 +1500,13 @@ export class LitCaseVariablesTab extends LitElement {
         this.hideOperatorInputs.set(hideOperatorKey, hideOperatorInput);
         // Hide condition value - dynamic input based on variable type
         this.addHideConditionValueInput(hideFolder, config, cell, config.hideConditionVariable);
+        // Expert mode button
+        if (this.hasAnyDataGridRef()) {
+            const expertBtn = pane.addButton({ title: msg('Expertní mód') });
+            expertBtn.on('click', () => {
+                this.openExpertModeModal(cell);
+            });
+        }
         // Add delete button
         const deleteBtn = pane.addButton({ title: msg('Smazat buňku') });
         deleteBtn.on('click', () => {
@@ -1773,6 +1822,15 @@ export class LitCaseVariablesTab extends LitElement {
         this.colorizeVariantSelect(valueVariantInput, valueVariantOptions, config, 'valueVariant');
     }
     addProgressControls(pane, config, cell) {
+        // Progress Max — numeric value for 100%
+        const progressMaxInput = pane.addBinding(config, 'progressMax', {
+            label: msg('Hodnota 100%'),
+            min: 1,
+            step: 1,
+        });
+        progressMaxInput.on('change', (ev) => {
+            this.setProgressMax(cell, ev.value);
+        });
         // Progress Color
         const progressColorOptions = [
             { text: msg('Primární'), value: 'primary' },
@@ -2343,6 +2401,15 @@ export class LitCaseVariablesTab extends LitElement {
         });
         this.handleSettingsChanged(this.rows);
     }
+    setProgressMax(cell, progressMax) {
+        this.rows = this.rows.map((c) => {
+            if (c.field === cell.field) {
+                return { ...c, progressMax };
+            }
+            return c;
+        });
+        this.handleSettingsChanged(this.rows);
+    }
     setProgressColor(cell, progressColor) {
         this.rows = this.rows.map((c) => {
             if (c.field === cell.field) {
@@ -2461,6 +2528,600 @@ export class LitCaseVariablesTab extends LitElement {
         }
         return String(rawValue);
     }
+    getAllDataGridRefs() {
+        if (this.dataGridRefs?.length)
+            return this.dataGridRefs;
+        if (this.dataGridRef)
+            return [{ id: '_default', label: 'DataGrid', ref: this.dataGridRef }];
+        return [];
+    }
+    hasAnyDataGridRef() {
+        return this.getAllDataGridRefs().length > 0;
+    }
+    getDataGridBySource(source) {
+        const refs = this.getAllDataGridRefs();
+        if (!source) {
+            return refs.length === 1 ? refs[0].ref : null;
+        }
+        const entry = refs.find((r) => r.id === source);
+        return entry?.ref || null;
+    }
+    resolveExpertOperand(type, value, source, aggregation = 'sum') {
+        if (!value)
+            return null;
+        if (type === 'column') {
+            const grid = this.getDataGridBySource(source || '');
+            if (!grid)
+                return null;
+            const rows = grid.row || [];
+            const values = rows.map((row) => parseFloat(row[value])).filter((v) => !isNaN(v));
+            if (values.length === 0)
+                return 0;
+            switch (aggregation) {
+                case 'sum':
+                    return values.reduce((acc, v) => acc + v, 0);
+                case 'avg':
+                    return values.reduce((acc, v) => acc + v, 0) / values.length;
+                case 'min':
+                    return Math.min(...values);
+                case 'max':
+                    return Math.max(...values);
+                case 'count':
+                    return values.length;
+                default:
+                    return values.reduce((acc, v) => acc + v, 0);
+            }
+        }
+        // type === 'variable'
+        const variable = [...this.rows, ...this.variables].find((v) => v.field === value);
+        if (!variable)
+            return null;
+        const parsed = parseFloat(String(variable.value || 0));
+        return isNaN(parsed) ? 0 : parsed;
+    }
+    computeExpertValue(cell) {
+        const config = cell.expertMode;
+        if (!config?.enabled)
+            return null;
+        const leftType = config.leftType || 'column';
+        const rightType = config.rightType || 'variable';
+        const left = this.resolveExpertOperand(leftType, config.leftValue || config.sourceColumn || '', config.leftSource, config.leftAggregation || 'sum');
+        if (left === null)
+            return null;
+        if (config.operation === 'none')
+            return left;
+        const rightValue = config.rightValue || config.variableField || '';
+        if (!rightValue)
+            return left;
+        const right = this.resolveExpertOperand(rightType, rightValue, config.rightSource, config.rightAggregation || 'sum');
+        if (right === null)
+            return left;
+        switch (config.operation) {
+            case '+':
+                return left + right;
+            case '-':
+                return left - right;
+            case '*':
+                return left * right;
+            case '/':
+                return right !== 0 ? left / right : null;
+            default:
+                return left;
+        }
+    }
+    getCellWithExpertValue(cell) {
+        const expertValue = this.computeExpertValue(cell);
+        if (expertValue !== null) {
+            return { ...cell, value: expertValue };
+        }
+        return cell;
+    }
+    openExpertModeModal(cell) {
+        this.closeSettingsPopper();
+        this.expertModeCell = cell;
+        const existing = cell.expertMode;
+        const defaultSource = this.getAllDataGridRefs().length === 1 ? this.getAllDataGridRefs()[0].id : '';
+        // Load headerName mutations from cell
+        const mutations = {};
+        const supportedLangs = ['cs', 'en', 'de', 'sk', 'pl', 'hu', 'fr', 'it', 'es', 'sr'];
+        supportedLangs.forEach((lang) => {
+            const val = cell[`headerName_${lang}`];
+            if (val)
+                mutations[lang] = val;
+        });
+        this.expertModeConfig = {
+            enabled: existing?.enabled || false,
+            leftType: existing?.leftType || 'column',
+            leftSource: existing?.leftSource || defaultSource,
+            leftValue: existing?.leftValue || existing?.sourceColumn || '',
+            leftAggregation: existing?.leftAggregation || 'sum',
+            operation: existing?.operation || 'none',
+            rightType: existing?.rightType || 'variable',
+            rightSource: existing?.rightSource || defaultSource,
+            rightValue: existing?.rightValue || existing?.variableField || '',
+            rightAggregation: existing?.rightAggregation || 'sum',
+            headerName: cell.headerName || '',
+            headerNameMutations: mutations,
+            pmEnabled: existing?.pmEnabled || false,
+            pmLeftType: existing?.pmLeftType || 'column',
+            pmLeftSource: existing?.pmLeftSource || defaultSource,
+            pmLeftValue: existing?.pmLeftValue || '',
+            pmLeftAggregation: existing?.pmLeftAggregation || 'sum',
+            pmOperation: existing?.pmOperation || 'none',
+            pmRightType: existing?.pmRightType || 'variable',
+            pmRightSource: existing?.pmRightSource || defaultSource,
+            pmRightValue: existing?.pmRightValue || '',
+            pmRightAggregation: existing?.pmRightAggregation || 'sum',
+        };
+        this.expertModeModalOpen = true;
+    }
+    saveExpertMode() {
+        if (!this.expertModeCell)
+            return;
+        this.rows = this.rows.map((c) => {
+            if (c.field === this.expertModeCell.field) {
+                const { headerName, headerNameMutations, ...expertModeData } = this.expertModeConfig;
+                const updated = {
+                    ...c,
+                    expertMode: expertModeData,
+                    headerName: headerName,
+                };
+                // Write language mutations
+                Object.entries(headerNameMutations).forEach(([lang, val]) => {
+                    updated[`headerName_${lang}`] = val;
+                });
+                // Remove empty mutations
+                const supportedLangs = ['cs', 'en', 'de', 'sk', 'pl', 'hu', 'fr', 'it', 'es', 'sr'];
+                supportedLangs.forEach((lang) => {
+                    if (!headerNameMutations[lang]) {
+                        delete updated[`headerName_${lang}`];
+                    }
+                });
+                return updated;
+            }
+            return c;
+        });
+        this.handleSettingsChanged(this.rows);
+        this.expertModeModalOpen = false;
+        this.expertModeCell = null;
+    }
+    getGridColumnOptions(source) {
+        const grid = this.getDataGridBySource(source || '');
+        if (!grid?.columns)
+            return [];
+        return grid.columns
+            .filter((col) => {
+            const type = col.type;
+            return type === 'number' || type === 'currency' || type === 'range' || type === 'numberRange';
+        })
+            .map((col) => ({
+            label: col.headerName || col.field,
+            value: col.field,
+        }));
+    }
+    getGridSourceOptions() {
+        return this.getAllDataGridRefs().map((entry) => ({
+            label: entry.label,
+            value: entry.id,
+        }));
+    }
+    getExpertVariableOptions() {
+        const numericTypes = ['currency', 'number'];
+        const variables = [];
+        this.rows.forEach((cell) => {
+            if (cell.type && numericTypes.includes(cell.type)) {
+                variables.push({
+                    label: cell.headerName || cell.field,
+                    value: cell.field,
+                });
+            }
+        });
+        const existingFields = this.rows.map((cell) => cell.field);
+        this.variables.forEach((variable) => {
+            if (!existingFields.includes(variable.field) && variable.type && numericTypes.includes(variable.type)) {
+                variables.push({
+                    label: variable.headerName || variable.field,
+                    value: variable.field,
+                });
+            }
+        });
+        return variables.sort((a, b) => a.label.localeCompare(b.label));
+    }
+    getExpertModePreviewValue() {
+        if (!this.expertModeConfig.enabled || !this.expertModeConfig.leftValue) {
+            return '-';
+        }
+        const tempCell = { field: '__preview__', expertMode: { ...this.expertModeConfig } };
+        const value = this.computeExpertValue(tempCell);
+        if (value === null)
+            return 'N/A';
+        return formatDecimal(value, { locale: this.getLocaleLang(), numberOfDecimal: 2 }) || String(value);
+    }
+    computeProgressMaxExpertValue(config) {
+        if (!config?.pmEnabled)
+            return null;
+        const leftType = config.pmLeftType || 'column';
+        const rightType = config.pmRightType || 'variable';
+        const left = this.resolveExpertOperand(leftType, config.pmLeftValue || '', config.pmLeftSource, config.pmLeftAggregation || 'sum');
+        if (left === null)
+            return null;
+        if (config.pmOperation === 'none')
+            return left;
+        const rightValue = config.pmRightValue || '';
+        if (!rightValue)
+            return left;
+        const right = this.resolveExpertOperand(rightType, rightValue, config.pmRightSource, config.pmRightAggregation || 'sum');
+        if (right === null)
+            return left;
+        switch (config.pmOperation) {
+            case '+': return left + right;
+            case '-': return left - right;
+            case '*': return left * right;
+            case '/': return right !== 0 ? left / right : null;
+            default: return left;
+        }
+    }
+    getProgressMaxPreviewValue() {
+        if (!this.expertModeConfig.pmEnabled || !this.expertModeConfig.pmLeftValue) {
+            return '-';
+        }
+        const value = this.computeProgressMaxExpertValue(this.expertModeConfig);
+        if (value === null)
+            return 'N/A';
+        return formatDecimal(value, { locale: this.getLocaleLang(), numberOfDecimal: 2 }) || String(value);
+    }
+    getExpertOperandLabel(type, value, source, aggregation = 'sum') {
+        if (!value)
+            return '?';
+        if (type === 'column') {
+            const refs = this.getAllDataGridRefs();
+            const sourceLabel = refs.length > 1
+                ? refs.find((r) => r.id === source)?.label || ''
+                : '';
+            const aggLabel = (aggregation || 'sum').toUpperCase();
+            return sourceLabel ? `${aggLabel}(${sourceLabel}.${value})` : `${aggLabel}(${value})`;
+        }
+        const variable = [...this.rows, ...this.variables].find((v) => v.field === value);
+        return variable?.headerName || value;
+    }
+    renderExpertOperandSelector(side, label, tooltipText, prefix = '') {
+        const pre = prefix || '';
+        const typeKey = (pre + (side === 'left' ? 'LeftType' : 'RightType'));
+        const sourceKey = (pre + (side === 'left' ? 'LeftSource' : 'RightSource'));
+        const valueKey = (pre + (side === 'left' ? 'LeftValue' : 'RightValue'));
+        const aggregationKey = (pre + (side === 'left' ? 'LeftAggregation' : 'RightAggregation'));
+        const enabledKey = (pre ? pre + 'Enabled' : 'enabled');
+        // For non-prefixed keys (default), use original camelCase: leftType, rightType, etc.
+        const typeKeyFinal = pre ? typeKey : (side === 'left' ? 'leftType' : 'rightType');
+        const sourceKeyFinal = pre ? sourceKey : (side === 'left' ? 'leftSource' : 'rightSource');
+        const valueKeyFinal = pre ? valueKey : (side === 'left' ? 'leftValue' : 'rightValue');
+        const aggregationKeyFinal = pre ? aggregationKey : (side === 'left' ? 'leftAggregation' : 'rightAggregation');
+        const currentType = this.expertModeConfig[typeKeyFinal];
+        const currentSource = this.expertModeConfig[sourceKeyFinal];
+        const currentValue = this.expertModeConfig[valueKeyFinal];
+        const currentAggregation = this.expertModeConfig[aggregationKeyFinal];
+        const isEnabled = !!this.expertModeConfig[enabledKey];
+        const typeOptions = [
+            { label: msg('Tabulka'), value: 'column' },
+            { label: msg('Proměnná'), value: 'variable' },
+        ];
+        const aggregationOptions = [
+            { label: 'SUM', value: 'sum' },
+            { label: 'AVG', value: 'avg' },
+            { label: 'MIN', value: 'min' },
+            { label: 'MAX', value: 'max' },
+            { label: 'COUNT', value: 'count' },
+        ];
+        const gridSourceOptions = this.getGridSourceOptions();
+        const showSourceSelector = currentType === 'column' && gridSourceOptions.length > 1;
+        const valueOptions = currentType === 'column'
+            ? this.getGridColumnOptions(currentSource)
+            : this.getExpertVariableOptions();
+        return html `
+            <div style="flex: 1; display: flex; flex-direction: column; gap: 4px;">
+                <lit-label .label="${label}" .tooltip="${tooltipText}"></lit-label>
+                <div style="display: flex; flex-direction: column; gap: 4px;">
+                    <lit-select
+                        .options=${typeOptions}
+                        .value=${currentType}
+                        .placeholder=${msg('Vyberte typ')}
+                        .disabled=${!isEnabled}
+                        .onChange=${(value) => {
+            const val = (Array.isArray(value) ? value[0] : value);
+            this.expertModeConfig = {
+                ...this.expertModeConfig,
+                [typeKeyFinal]: val || 'column',
+                [valueKeyFinal]: '',
+            };
+            this.requestUpdate();
+        }}
+                    ></lit-select>
+                    ${showSourceSelector
+            ? html `
+                            <lit-select
+                                .options=${gridSourceOptions}
+                                .value=${currentSource}
+                                .placeholder=${msg('Vyberte tabulku')}
+                                .disabled=${!isEnabled}
+                                .onChange=${(value) => {
+                const val = Array.isArray(value) ? value[0] : value;
+                this.expertModeConfig = {
+                    ...this.expertModeConfig,
+                    [sourceKeyFinal]: val || '',
+                    [valueKeyFinal]: '',
+                };
+                this.requestUpdate();
+            }}
+                            ></lit-select>
+                        `
+            : ''}
+                    <lit-select
+                        .options=${valueOptions}
+                        .value=${currentValue}
+                        .placeholder=${currentType === 'column' ? msg('Vyberte sloupec') : msg('Vyberte proměnnou')}
+                        .disabled=${!isEnabled}
+                        .onChange=${(value) => {
+            const val = Array.isArray(value) ? value[0] : value;
+            this.expertModeConfig = {
+                ...this.expertModeConfig,
+                [valueKeyFinal]: val || '',
+            };
+            this.requestUpdate();
+        }}
+                    ></lit-select>
+                    ${currentType === 'column'
+            ? html `
+                            <lit-select
+                                .options=${aggregationOptions}
+                                .value=${currentAggregation}
+                                .placeholder=${msg('Vyberte agregaci')}
+                                .disabled=${!isEnabled}
+                                .onChange=${(value) => {
+                const val = Array.isArray(value) ? value[0] : value;
+                this.expertModeConfig = {
+                    ...this.expertModeConfig,
+                    [aggregationKeyFinal]: val || 'sum',
+                };
+                this.requestUpdate();
+            }}
+                            ></lit-select>
+                        `
+            : ''}
+                </div>
+            </div>
+        `;
+    }
+    renderExpertModeModal() {
+        const operationOptions = [
+            { label: msg('Žádná'), value: 'none' },
+            { label: '+ (' + msg('Sčítání') + ')', value: '+' },
+            { label: '- (' + msg('Odčítání') + ')', value: '-' },
+            { label: '× (' + msg('Násobení') + ')', value: '*' },
+            { label: '÷ (' + msg('Dělení') + ')', value: '/' },
+        ];
+        const isNoOperation = this.expertModeConfig.operation === 'none';
+        const closeModal = () => {
+            this.expertModeModalOpen = false;
+            this.expertModeCell = null;
+        };
+        return html `
+            <lit-modal
+                .open=${this.expertModeModalOpen}
+                .onClose=${closeModal}
+                .closeOnOutsideClick=${false}
+                style="min-width: 60vw;"
+            >
+                <lit-modal-header
+                    style="display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary, #777);"
+                >
+                    ${msg('Expertní mód')} - ${this.expertModeCell?.headerName || this.expertModeCell?.field || ''}
+                    <lit-icon-button
+                        .icon="${'close'}"
+                        variant="text"
+                        color="secondary"
+                        size="${'small'}"
+                        @click=${closeModal}
+                    ></lit-icon-button>
+                </lit-modal-header>
+                <lit-modal-body>
+                    <div style="height: 400px;">
+                        <lit-tabs-overview
+                            .tabs=${[
+            ...(this.expertModeCell?.type === 'progress'
+                ? [{ id: 'progressMax', label: { default: msg('Hodnota 100%') }, icon: 'accomplish' }]
+                : []),
+            { id: 'calculation', label: { default: msg('Výpočet') }, icon: 'calculator' },
+            { id: 'header', label: { default: msg('Záhlaví buňky') }, icon: 'lang' },
+        ]}
+                            .initialSelectedTabId=${this.expertModeCell?.type === 'progress' ? 'progressMax' : 'calculation'}
+                            .userLang=${this.userLang}
+                        >
+                            <!-- Tab: Výpočet (Calculation) -->
+                            <div slot="calculation" style="display: flex; flex-direction: column; gap: 1rem;">
+                                <lit-toggle
+                                    .label="${msg('Povolit expertní výpočet')}"
+                                    .tooltip="${msg('Vypočítá hodnotu na základě vybraných sloupců/proměnných a zvolené matematické operace.')}"
+                                    .checked=${this.expertModeConfig.enabled}
+                                    @change=${(e) => {
+            this.expertModeConfig = {
+                ...this.expertModeConfig,
+                enabled: e.detail,
+            };
+        }}
+                                ></lit-toggle>
+
+                                <div style="display: flex; flex-direction: row; gap: 1rem; align-items: flex-start;">
+                                    ${this.renderExpertOperandSelector('left', msg('Levý operand'), msg('Vyberte typ a hodnotu levého operandu. Sloupec vypočítá agregaci (SUM, AVG, MIN, MAX, COUNT) všech hodnot, proměnná použije hodnotu vybrané buňky.'))}
+
+                                    <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; min-width: 120px;">
+                                        <lit-label .label="${msg('Operace')}" .tooltip="${msg('Matematická operace mezi levým a pravým operandem. Zvolte Žádná pro zobrazení pouze levého operandu.')}"></lit-label>
+                                        <lit-select
+                                            .options=${operationOptions}
+                                            .value=${this.expertModeConfig.operation}
+                                            .placeholder=${msg('Vyberte operaci')}
+                                            .disabled=${!this.expertModeConfig.enabled}
+                                            .onChange=${(value) => {
+            const val = Array.isArray(value) ? value[0] : value;
+            this.expertModeConfig = {
+                ...this.expertModeConfig,
+                operation: val || '+',
+            };
+            this.requestUpdate();
+        }}
+                                        ></lit-select>
+                                    </div>
+
+                                    ${!isNoOperation ? this.renderExpertOperandSelector('right', msg('Pravý operand'), msg('Vyberte typ a hodnotu pravého operandu. Sloupec vypočítá agregaci (SUM, AVG, MIN, MAX, COUNT) všech hodnot, proměnná použije hodnotu vybrané buňky.')) : ''}
+                                </div>
+
+                                ${this.expertModeConfig.enabled
+            ? html `
+                                          <div
+                                              style="
+                                                  padding: 0.75rem;
+                                                  background: var(--background-default, #f5f5f5);
+                                                  border-radius: var(--border-radius-small, 8px);
+                                                  font-size: 0.8125rem;
+                                                  color: var(--text-secondary, #5d6371);
+                                              "
+                                          >
+                                              <div style="font-weight: 600; margin-bottom: 0.25rem;">${msg('Náhled výpočtu')}</div>
+                                              <div>
+                                                  ${this.getExpertOperandLabel(this.expertModeConfig.leftType, this.expertModeConfig.leftValue, this.expertModeConfig.leftSource, this.expertModeConfig.leftAggregation)}
+                                                  ${this.expertModeConfig.operation !== 'none'
+                ? html `${this.expertModeConfig.operation} ${this.getExpertOperandLabel(this.expertModeConfig.rightType, this.expertModeConfig.rightValue, this.expertModeConfig.rightSource, this.expertModeConfig.rightAggregation)}`
+                : ''}
+                                                  = <strong style="color: var(--text-primary, #111827);">${this.getExpertModePreviewValue()}</strong>
+                                              </div>
+                                          </div>
+                                      `
+            : ''}
+                            </div>
+
+                            <!-- Tab: Hodnota 100% (Progress Max) -->
+                            ${this.expertModeCell?.type === 'progress' ? html `
+                            <div slot="progressMax" style="display: flex; flex-direction: column; gap: 1rem;">
+                                <lit-toggle
+                                    .label="${msg('Vypočítat hodnotu 100%')}"
+                                    .tooltip="${msg('Vypočítá hodnotu pro 100% na základě vybraných sloupců/proměnných a zvolené matematické operace.')}"
+                                    .checked=${this.expertModeConfig.pmEnabled}
+                                    @change=${(e) => {
+            this.expertModeConfig = {
+                ...this.expertModeConfig,
+                pmEnabled: e.detail,
+            };
+        }}
+                                ></lit-toggle>
+
+                                <div style="display: flex; flex-direction: row; gap: 1rem; align-items: flex-start;">
+                                    ${this.renderExpertOperandSelector('left', msg('Levý operand'), msg('Vyberte typ a hodnotu levého operandu pro výpočet hodnoty 100%.'), 'pm')}
+
+                                    <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; min-width: 120px;">
+                                        <lit-label .label="${msg('Operace')}" .tooltip="${msg('Matematická operace mezi levým a pravým operandem.')}"></lit-label>
+                                        <lit-select
+                                            .options=${operationOptions}
+                                            .value=${this.expertModeConfig.pmOperation}
+                                            .placeholder=${msg('Vyberte operaci')}
+                                            .disabled=${!this.expertModeConfig.pmEnabled}
+                                            .onChange=${(value) => {
+            const val = Array.isArray(value) ? value[0] : value;
+            this.expertModeConfig = {
+                ...this.expertModeConfig,
+                pmOperation: val || 'none',
+            };
+            this.requestUpdate();
+        }}
+                                        ></lit-select>
+                                    </div>
+
+                                    ${this.expertModeConfig.pmOperation !== 'none' ? this.renderExpertOperandSelector('right', msg('Pravý operand'), msg('Vyberte typ a hodnotu pravého operandu pro výpočet hodnoty 100%.'), 'pm') : ''}
+                                </div>
+
+                                ${this.expertModeConfig.pmEnabled
+            ? html `
+                                          <div
+                                              style="
+                                                  padding: 0.75rem;
+                                                  background: var(--background-default, #f5f5f5);
+                                                  border-radius: var(--border-radius-small, 8px);
+                                                  font-size: 0.8125rem;
+                                                  color: var(--text-secondary, #5d6371);
+                                              "
+                                          >
+                                              <div style="font-weight: 600; margin-bottom: 0.25rem;">${msg('Náhled hodnoty 100%')}</div>
+                                              <div>
+                                                  ${this.getExpertOperandLabel(this.expertModeConfig.pmLeftType, this.expertModeConfig.pmLeftValue, this.expertModeConfig.pmLeftSource, this.expertModeConfig.pmLeftAggregation)}
+                                                  ${this.expertModeConfig.pmOperation !== 'none'
+                ? html `${this.expertModeConfig.pmOperation} ${this.getExpertOperandLabel(this.expertModeConfig.pmRightType, this.expertModeConfig.pmRightValue, this.expertModeConfig.pmRightSource, this.expertModeConfig.pmRightAggregation)}`
+                : ''}
+                                                  = <strong style="color: var(--text-primary, #111827);">${this.getProgressMaxPreviewValue()}</strong>
+                                              </div>
+                                          </div>
+                                      `
+            : ''}
+                            </div>
+                            ` : ''}
+
+                            <!-- Tab: Záhlaví buňky (Header) -->
+                            <div slot="header" style="display: flex; flex-direction: column; gap: 1rem;">
+                                <lit-label
+                                    .label="${msg('Záhlaví buňky')}"
+                                    .tooltip="${msg('Název buňky zobrazený v záhlaví. Můžete nastavit překlad pro různé jazyky.')}"
+                                ></lit-label>
+                                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+                                    <lit-text-field
+                                        .label="${msg('Výchozí název')}"
+                                        .value=${this.expertModeConfig.headerName}
+                                        @onChange=${(e) => {
+            this.expertModeConfig = {
+                ...this.expertModeConfig,
+                headerName: e.detail,
+            };
+        }}
+                                    ></lit-text-field>
+
+                                    ${(this.allowedLang || []).map((lang) => html `
+                                            <lit-text-field
+                                                .label="${msg('Záhlaví')} ${lang.toUpperCase()}"
+                                                .placeholder="${msg('Zadejte název')} ${lang.toUpperCase()}"
+                                                .value=${this.expertModeConfig.headerNameMutations[lang] || ''}
+                                                @onChange=${(e) => {
+            this.expertModeConfig = {
+                ...this.expertModeConfig,
+                headerNameMutations: {
+                    ...this.expertModeConfig.headerNameMutations,
+                    [lang]: e.detail,
+                },
+            };
+        }}
+                                            ></lit-text-field>
+                                        `)}
+                                </div>
+                            </div>
+                        </lit-tabs-overview>
+                    </div>
+                </lit-modal-body>
+                <lit-modal-footer
+                    style="display: flex; flex-direction: row; gap: 0.5rem; justify-content: center;"
+                >
+                    <lit-button
+                        .label="${msg('Uložit')}"
+                        .icon="check"
+                        .size="medium"
+                        @click=${() => this.saveExpertMode()}
+                    ></lit-button>
+                    <lit-button
+                        color="secondary"
+                        .label="${msg('Zrušit')}"
+                        variant="text"
+                        .icon="close"
+                        .size="medium"
+                        @click=${closeModal}
+                    ></lit-button>
+                </lit-modal-footer>
+            </lit-modal>
+        `;
+    }
     resolveCurrencyType(cell) {
         const currencyType = cell.currencyType || 'CZK';
         if (currencyType.startsWith('var:')) {
@@ -2475,6 +3136,20 @@ export class LitCaseVariablesTab extends LitElement {
         }
         return currencyType;
     }
+    resolveProgressMax(cell) {
+        // 1. If expert mode progressMax computation is enabled, use it
+        const config = cell.expertMode;
+        if (config?.pmEnabled) {
+            const computed = this.computeProgressMaxExpertValue(config);
+            if (computed !== null && computed > 0)
+                return computed;
+        }
+        // 2. Otherwise use static progressMax from tweakpane
+        const staticMax = cell.progressMax;
+        if (typeof staticMax === 'number' && staticMax > 0)
+            return staticMax;
+        return 100;
+    }
     parseBooleanValue(value) {
         if (typeof value === 'boolean')
             return value;
@@ -2503,10 +3178,11 @@ export class LitCaseVariablesTab extends LitElement {
             : this.gridVariables
                 ? html ` <div class="grid-container">
                         ${repeat(this.rows, (cell, index) => cell.field, (cell) => {
+                    const resolvedCell = this.getCellWithExpertValue(cell);
                     const classes = `cell--span4`;
                     return html `
                                     <div class="${classes}" data-field="${cell.field}">
-                                        ${this.getInlineCellValue(cell)}
+                                        ${this.getInlineCellValue(resolvedCell)}
                                     </div>
                                 `;
                 })}
@@ -2514,6 +3190,7 @@ export class LitCaseVariablesTab extends LitElement {
                 : html `
                         <div class="grid-container">
                             ${repeat(this.rows, (cell, index) => cell.field, (cell) => {
+                    const resolvedCell = this.getCellWithExpertValue(cell);
                     const bpIndex = this.BREAKPOINTS.indexOf(this.currentBreakpoint);
                     const spanSize = this.gridVariables
                         ? 4
@@ -2528,21 +3205,21 @@ export class LitCaseVariablesTab extends LitElement {
                                             style="${styleMap(this.computeCellStyles(cell))}"
                                             data-field="${cell.field}"
                                         >
-                                            ${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)
-                                        : cell.type === 'number'
-                                            ? this.getCellNumber(cell)
-                                            : cell.type === 'checkbox'
-                                                ? this.getCellCheckbox(cell)
-                                                : this.getCellValue(cell)}
+                                            ${resolvedCell?.type === 'button'
+                        ? this.getCellButton(resolvedCell)
+                        : resolvedCell.type === 'link'
+                            ? this.getCellLink(resolvedCell)
+                            : resolvedCell.type === 'progress'
+                                ? this.getCellProgress(resolvedCell)
+                                : resolvedCell.type === 'currency'
+                                    ? this.getCellCurrency(resolvedCell)
+                                    : resolvedCell.type === 'date'
+                                        ? this.getCellDate(resolvedCell)
+                                        : resolvedCell.type === 'number'
+                                            ? this.getCellNumber(resolvedCell)
+                                            : resolvedCell.type === 'checkbox'
+                                                ? this.getCellCheckbox(resolvedCell)
+                                                : this.getCellValue(resolvedCell)}
                                         </div>
                                     `;
                 })}
@@ -2662,6 +3339,7 @@ export class LitCaseVariablesTab extends LitElement {
                       </div>
                   `
             : ''}
+            ${this.renderExpertModeModal()}
         `;
     }
 }
@@ -2911,6 +3589,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], LitCaseVariablesTab.prototype, "userLang", void 0);
+__decorate([
+    property({ type: Array })
+], LitCaseVariablesTab.prototype, "allowedLang", void 0);
 __decorate([
     property({ type: String })
 ], LitCaseVariablesTab.prototype, "dateFormat", void 0);
@@ -2932,6 +3613,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], LitCaseVariablesTab.prototype, "hostURL", void 0);
+__decorate([
+    property({ attribute: false })
+], LitCaseVariablesTab.prototype, "dataGridRef", void 0);
+__decorate([
+    property({ attribute: false })
+], LitCaseVariablesTab.prototype, "dataGridRefs", void 0);
 __decorate([
     state()
 ], LitCaseVariablesTab.prototype, "currentBreakpoint", void 0);
@@ -2944,6 +3631,15 @@ __decorate([
 __decorate([
     state()
 ], LitCaseVariablesTab.prototype, "isMobile", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "expertModeModalOpen", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "expertModeCell", void 0);
+__decorate([
+    state()
+], LitCaseVariablesTab.prototype, "expertModeConfig", void 0);
 __decorate([
     state()
 ], LitCaseVariablesTab.prototype, "activeSettingsCell", void 0);