overview-components 1.1.162 → 1.1.165

package/dist/components/components-settings/section-tab-settings.js

@@ -0,0 +1,719 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property, state } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+import { IconArray } from '../../shared/lit-icon.js';
+import { msg } from '@lit/localize';
+import { setLocale, getLocale, LOCALE_LANGS } from '../../utils/localization.js';
+//components
+import '../../shared/lit-icon.js';
+import '../../shared/lit-input.js';
+import '../../shared/lit-select.js';
+import '../../shared/lit-toggle.js';
+import '../../shared/lit-select-field.js';
+import '../../shared/lit-text-field.js';
+import '../lit-filter-builder.js';
+import '../../shared/simple-popper.js';
+import '../lit-tabs-overview.js';
+import '../../assets/illustration/not-found.js';
+import '../../assets/illustration/settings-illustration.js';
+import '../../shared/lit-menu.js';
+import '../../shared/lit-menu-item.js';
+import '../../shared/lit-button.js';
+import '../../shared/lit-icon-button.js';
+import '../../shared/lit-text-field.js';
+import '../../shared/lit-modal.js';
+import '../../shared/lit-checkbox.js';
+import '../../shared/lit-modal-header.js';
+import '../../shared/lit-modal-footer.js';
+import '../../shared/lit-modal-body.js';
+import '../../shared/lit-label.js';
+function generateShortId() {
+    return Math.random().toString(36).substring(2, 8);
+}
+export class SectionTabSettings extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.onSettingsChangedModal = (settingsValue) => { };
+        this.showAutomaticHeightOptionInSettings = true;
+        this.aiLoading = false;
+        this.allowedLang = ['cs'];
+        this.variables = [];
+        this.userLang = 'cs';
+        this.isOpen = false;
+        this.showHideCondition = false;
+        this.filterText = '';
+        this.isOpenModal = false;
+        this.filterData = {
+            fields: [],
+            operators: [],
+            filterGroups: [
+                {
+                    id: generateShortId(),
+                    logicOperator: 'AND',
+                    conditions: [{ id: generateShortId(), field: '', operator: '=', value: '' }],
+                },
+            ],
+            groupLogicOperator: 'AND',
+        };
+        this.activeTab = 'general';
+        this._onFilterChange = (event) => {
+            const { filterGroups, groupLogicOperator } = event.detail;
+            // Update filter data with multi-group structure (fields removed)
+            this.filterData = {
+                filterGroups: filterGroups || [],
+                groupLogicOperator: groupLogicOperator || 'AND',
+            };
+            // Update cached data
+            this.cachedFilterBuilderData = this.filterData;
+            // Store the full multi-group structure
+            if (this.filterData.filterGroups.length &&
+                this.filterData.filterGroups.some((group) => group.conditions.length && group.conditions[0].field)) {
+                this.updateLocalSettings({ hideTabWhen: this.filterData });
+            }
+            else {
+                this.updateLocalSettings({ hideTabWhen: undefined });
+            }
+        };
+    }
+    getLocaleLang() {
+        if (this.userLang && LOCALE_LANGS.has(this.userLang)) {
+            return this.userLang;
+        }
+        return 'cs';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._updateCachedFilterBuilderData();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('userLang')) {
+            const localeLang = this.getLocaleLang();
+            if (getLocale() !== localeLang) {
+                setLocale(localeLang).then(() => this.requestUpdate());
+            }
+        }
+        if (changedProperties.has('settingsValue')) {
+            this.localSettingsValue = this.settingsValue ? { ...this.settingsValue } : {};
+            // Initialize filter data from existing condition
+            const hideTabWhen = this.localSettingsValue?.hideTabWhen;
+            if (hideTabWhen && typeof hideTabWhen === 'object') {
+                // Check if it's already in multi-group format
+                if ('filterGroups' in hideTabWhen && 'groupLogicOperator' in hideTabWhen) {
+                    this.filterData = hideTabWhen;
+                    this.showHideCondition = true;
+                }
+                else if ('logicOperator' in hideTabWhen && 'conditions' in hideTabWhen) {
+                    // Convert from legacy single-group format
+                    this.filterData = {
+                        fields: [],
+                        operators: [],
+                        filterGroups: [hideTabWhen],
+                        groupLogicOperator: 'AND',
+                    };
+                    this.showHideCondition = true;
+                }
+            }
+            else if (typeof hideTabWhen === 'boolean' && hideTabWhen) {
+                this.showHideCondition = true;
+                // Initialize with default filter data when boolean is true
+                const defaultField = this.variables.length > 0 ? this.variables[0].field : '';
+                this.filterData = {
+                    fields: [],
+                    operators: [],
+                    filterGroups: [
+                        {
+                            id: generateShortId(),
+                            logicOperator: 'AND',
+                            conditions: [
+                                {
+                                    id: generateShortId(),
+                                    field: defaultField,
+                                    operator: '=',
+                                    value: '',
+                                },
+                            ],
+                        },
+                    ],
+                    groupLogicOperator: 'AND',
+                };
+            }
+            else {
+                this.showHideCondition = false;
+            }
+        }
+        // Update cached data if variables or filterData changed
+        if (changedProperties.has('variables') || changedProperties.has('filterData')) {
+            this._updateCachedFilterBuilderData();
+        }
+    }
+    trySendSettingsUpdate() {
+        this.onSettingsChangedModal?.(this.localSettingsValue);
+        if (this.onClose) {
+            this.onClose();
+        }
+    }
+    _getFilterFieldsFromVariables() {
+        return this.variables.map((variable) => {
+            const variableType = variable.type;
+            // Get localized header name or fall back to default headerName or field
+            const headerNameKey = `headerName_${this.userLang}`;
+            const displayName = variable[headerNameKey] || variable.headerName || variable.field;
+            return {
+                value: variable.field,
+                label: `${displayName} (${variable.field})`,
+                type: variableType === 'string'
+                    ? 'string'
+                    : variableType === 'number' || variableType === 'currency'
+                        ? 'number'
+                        : variableType === 'date'
+                            ? 'date'
+                            : variableType === 'select'
+                                ? 'select'
+                                : 'string',
+                valueOptions: variableType === 'select' && variable.valueOptions
+                    ? variable.valueOptions.map((opt) => ({
+                        value: String(opt.value ?? ''),
+                        label: opt.label,
+                    }))
+                    : undefined,
+            };
+        });
+    }
+    _getTabDefinitions() {
+        return [
+            {
+                id: 'general',
+                label: {
+                    default: msg('Obecná nastavení'),
+                },
+                icon: 'administration',
+            },
+            {
+                id: 'hideWhen',
+                label: {
+                    default: msg('Skrýt sekci když'),
+                },
+                icon: 'hide',
+            },
+        ];
+    }
+    updateLocalSettings(updates) {
+        this.localSettingsValue = {
+            ...this.localSettingsValue,
+            ...updates,
+        };
+    }
+    closePopover() {
+        this.isOpen = false;
+    }
+    toggleCustomPopover() {
+        this.isOpen = !this.isOpen;
+    }
+    discardChanges() {
+        this.localSettingsValue = this.settingsValue ? { ...this.settingsValue } : {};
+        // Reset the condition builder state to match the original settingsValue
+        this._resetConditionBuilderState();
+        if (this.onClose) {
+            this.onClose();
+        }
+    }
+    _resetConditionBuilderState() {
+        const hideTabWhen = this.settingsValue?.hideTabWhen;
+        if (hideTabWhen && typeof hideTabWhen === 'object') {
+            // Check if it's already in multi-group format
+            if ('filterGroups' in hideTabWhen && 'groupLogicOperator' in hideTabWhen) {
+                this.filterData = hideTabWhen;
+                this.showHideCondition = true;
+            }
+            else if ('logicOperator' in hideTabWhen && 'conditions' in hideTabWhen) {
+                // Convert from legacy single-group format
+                this.filterData = {
+                    filterGroups: [hideTabWhen],
+                    groupLogicOperator: 'AND',
+                };
+                this.showHideCondition = true;
+            }
+            else {
+                // Initialize with default filter data from first variable if available
+                const defaultField = this.variables.length > 0 ? this.variables[0].field : '';
+                this.filterData = {
+                    filterGroups: [
+                        {
+                            id: generateShortId(),
+                            logicOperator: 'AND',
+                            conditions: [
+                                {
+                                    id: generateShortId(),
+                                    field: defaultField,
+                                    operator: '=',
+                                    value: '',
+                                },
+                            ],
+                        },
+                    ],
+                    groupLogicOperator: 'AND',
+                };
+                this.showHideCondition = true;
+            }
+        }
+        else if (typeof hideTabWhen === 'boolean' && hideTabWhen) {
+            this.showHideCondition = true;
+            // Reset to default filter data for boolean conditions
+            const defaultField = this.variables.length > 0 ? this.variables[0].field : '';
+            this.filterData = {
+                filterGroups: [
+                    {
+                        id: generateShortId(),
+                        logicOperator: 'AND',
+                        conditions: [
+                            {
+                                id: generateShortId(),
+                                field: defaultField,
+                                operator: '=',
+                                value: '',
+                            },
+                        ],
+                    },
+                ],
+                groupLogicOperator: 'AND',
+            };
+        }
+        else {
+            this.showHideCondition = false;
+            // Reset to default filter data
+            const defaultField = this.variables.length > 0 ? this.variables[0].field : '';
+            this.filterData = {
+                filterGroups: [
+                    {
+                        id: generateShortId(),
+                        logicOperator: 'AND',
+                        conditions: [
+                            {
+                                id: generateShortId(),
+                                field: defaultField,
+                                operator: '=',
+                                value: '',
+                            },
+                        ],
+                    },
+                ],
+                groupLogicOperator: 'AND',
+            };
+        }
+    }
+    _renderHideWhenControl() {
+        const hideTabWhen = this.localSettingsValue?.hideTabWhen;
+        const hasCondition = hideTabWhen &&
+            typeof hideTabWhen === 'object' &&
+            (('variable' in hideTabWhen && hideTabWhen.variable) ||
+                ('filterGroups' in hideTabWhen &&
+                    hideTabWhen.filterGroups &&
+                    hideTabWhen.filterGroups.length > 0));
+        return html `
+            <div class="hide-when-control">
+                <div class="hide-when-header">
+                    <lit-toggle
+                        .label="${msg('Skrýt sekci při splnění podmínky')}"
+                        .checked="${hasCondition || this.showHideCondition}"
+                        @change="${(e) => this._toggleCondition(e.detail)}"
+                    ></lit-toggle>
+                </div>
+
+                ${this.showHideCondition
+            ? (() => {
+                const filterData = this._convertToFilterBuilderData();
+                const fields = this._getFilterFieldsFromVariables();
+                return html `
+                              <lit-filter-builder
+                                  id="section-filter-builder"
+                                  .data="${filterData}"
+                                  .fields="${fields}"
+                                  .disabled="${false}"
+                                  .locale="${this.userLang}"
+                                  @filter-change="${this._onFilterChange}"
+                              ></lit-filter-builder>
+                          `;
+            })()
+            : ''}
+            </div>
+        `;
+    }
+    _toggleCondition(enabled) {
+        if (enabled) {
+            this.showHideCondition = true;
+            // Only initialize new filter data if no existing data is present
+            if (!this.filterData.filterGroups?.length ||
+                !this.filterData.filterGroups[0]?.conditions?.length ||
+                !this.filterData.filterGroups[0]?.conditions[0]?.field) {
+                // Initialize filter data with first variable if available
+                if (this.variables.length > 0) {
+                    const defaultItem = {
+                        id: generateShortId(),
+                        field: this.variables[0].field,
+                        operator: '=',
+                        value: '',
+                    };
+                    this.filterData = {
+                        filterGroups: [
+                            {
+                                id: generateShortId(),
+                                logicOperator: 'AND',
+                                conditions: [defaultItem],
+                            },
+                        ],
+                        groupLogicOperator: 'AND',
+                    };
+                }
+            }
+            // Save the existing or newly created filter data
+            this.updateLocalSettings({ hideTabWhen: this.filterData });
+        }
+        else {
+            this.showHideCondition = false;
+            this._clearCondition();
+        }
+    }
+    _clearCondition() {
+        this.updateLocalSettings({ hideTabWhen: undefined });
+    }
+    _updateCachedFilterBuilderData() {
+        // Use the current filterData structure directly (fields are now separate)
+        this.cachedFilterBuilderData = {
+            filterGroups: this.filterData.filterGroups || [
+                {
+                    id: 'section-filter-group',
+                    logicOperator: 'AND',
+                    conditions: [],
+                },
+            ],
+            groupLogicOperator: this.filterData.groupLogicOperator || 'AND',
+        };
+    }
+    _convertToFilterBuilderData() {
+        if (!this.cachedFilterBuilderData) {
+            this._updateCachedFilterBuilderData();
+        }
+        return this.cachedFilterBuilderData;
+    }
+    _renderGeneralSettings() {
+        const filteredKeys = (IconArray || []).filter((key) => key.toLowerCase().includes(this.filterText));
+        return html `
+            <div class="tab-content">
+                ${this.showAutomaticHeightOptionInSettings
+            ? html `
+                          <lit-toggle
+                              .label="${msg('Automatická výška sekce')}"
+                              .tooltip="${msg('Sekce se automaticky přizpůsobí výšce obsahu')}"
+                              .checked=${this.localSettingsValue?.[`autoHeight`] ?? false}
+                              @change=${(e) => {
+                this.updateLocalSettings({ autoHeight: e.detail });
+            }}
+                          ></lit-toggle>
+                      `
+            : ''}
+                <lit-toggle
+                    .label="${msg('Zobrazit ikonu v názvu sekce')}"
+                    .checked=${this.localSettingsValue?.showTitleIcon !== false}
+                    @change=${(e) => {
+            this.updateLocalSettings({ showTitleIcon: e.detail });
+        }}
+                ></lit-toggle>
+
+                ${this.localSettingsValue?.showTitleIcon !== false
+            ? html `
+                          <div style="display: flex; align-items: center; gap: 1rem;">
+                              <lit-label label=${msg('Icona Sekce')}></lit-label>
+                              <lit-icon-button
+                                  color="secondary"
+                                  variant="dashed"
+                                  size="medium"
+                                  .icon="${this.localSettingsValue?.titleIcon || 'documents'}"
+                                  @click="${this.toggleCustomPopover}"
+                              ></lit-icon-button>
+                          </div>
+
+                          <simple-popper
+                              .showing=${this.isOpen}
+                              .placement=${'bottom-start'}
+                              .onClose=${this.closePopover.bind(this)}
+                              .manualOpening=${true}
+                          >
+                              <style>
+                                  .icon-menu {
+                                      display: flex;
+                                      flex-wrap: wrap;
+                                      gap: 0.5rem;
+                                      padding: 0.5rem;
+                                  }
+                                  .icon-select-item {
+                                      cursor: pointer;
+                                      width: 2.5rem;
+                                      height: 2.5rem;
+                                      display: flex;
+                                      align-items: center;
+                                      justify-content: center;
+                                      border-radius: var(--border-radius-small, 4px);
+                                      transition: background 0.15s;
+                                  }
+                                  .icon-select-item:hover {
+                                      background-color: var(--color-primary-light, #e0e7ff);
+                                  }
+                              </style>
+                              <div
+                                  style="max-height: 12.5rem; height: 12.5rem; overflow-y: auto; width: 500px; max-width: 100%;"
+                              >
+                                  <div class="popper-input">
+                                      <lit-input
+                                          .value=${this.filterText}
+                                          .onInput=${(value) => {
+                this.filterText = value?.toLowerCase?.() || '';
+            }}
+                                          .onClear=${() => {
+                this.filterText = '';
+            }}
+                                          placeholder="${msg('Zadejte název ikony')}"
+                                      ></lit-input>
+                                  </div>
+
+                                  <div class="icon-menu">
+                                      ${filteredKeys.map((key) => html `
+                                              <div
+                                                  class="icon-select-item"
+                                                  @click=${() => {
+                this.updateLocalSettings({
+                    titleIcon: key,
+                });
+                this.closePopover();
+            }}
+                                                  .isActive=${this.localSettingsValue?.titleIcon === key}
+                                              >
+                                                  <lit-icon size="1rem" icon="${key}"></lit-icon>
+                                              </div>
+                                          `)}
+                                  </div>
+                              </div>
+                          </simple-popper>
+                      `
+            : ''}
+                <div style="margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem;">
+                    <lit-text-field
+                        .aiEnabled=${typeof this.onAiFunction === 'function'}
+                        .label="${msg('Název sekce')}"
+                        .value=${this.localSettingsValue?.titleLabel || ''}
+                        .placeholder="${msg('Zadejte název sekce')}"
+                        @onChange="${(e) => {
+            this.updateLocalSettings({ titleLabel: e.detail });
+        }}"
+                        .onClickAiIcon="${(currentValue) => {
+            if (typeof this.onAiFunction === 'function') {
+                this.onAiFunction(currentValue);
+            }
+        }}"
+                        .aiLoading=${this.aiLoading}
+                    ></lit-text-field>
+
+                    ${(this.allowedLang || []).map((lang) => html `
+                            <lit-text-field
+                                .label=${`${msg('Název sekce')} ${lang.toUpperCase()}`}
+                                .placeholder=${`${msg('Zadejte název')} ${lang.toUpperCase()}`}
+                                .value=${this.localSettingsValue?.[`titleLabel_${lang}`] || ''}
+                                @onChange=${(e) => {
+            this.updateLocalSettings({
+                [`titleLabel_${lang}`]: e.detail,
+            });
+        }}
+                            ></lit-text-field>
+                        `)}
+                </div>
+            </div>
+        `;
+    }
+    render() {
+        return html `
+            <lit-modal
+                .open=${this.isOpenModal}
+                .onClose=${() => {
+            this.discardChanges();
+        }}
+                .closeOnOutsideClick=${false}
+                .fullScreen=${window.innerWidth <=
+            (parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm')) || 600)}
+                style="min-width: 60vw;"
+            >
+                <lit-modal-header
+                    style="display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary, #777);"
+                >
+                    ${msg('Konfigurace') + ' - ' + (this.localSettingsValue?.[`titleLabel_${this.userLang}`] || this.localSettingsValue?.titleLabel || msg('SectionTab'))}
+                    <lit-icon-button
+                        .icon="${'close'}"
+                        variant="text"
+                        color="secondary"
+                        size="${'small'}"
+                        @click=${() => this.discardChanges()}
+                    ></lit-icon-button>
+                </lit-modal-header>
+                <lit-modal-body>
+                    <div style="display: flex; flex-direction: column; gap: 0.5rem">
+                        <div class="settings-tabs">
+                            <lit-tabs-overview
+                                .tabs="${this._getTabDefinitions()}"
+                                .initialSelectedTabId="${this.activeTab}"
+                                .userLang="${this.userLang}"
+                                .allowedLang="${this.allowedLang}"
+                            >
+                                <div slot="general">${this._renderGeneralSettings()}</div>
+                                <div slot="hideWhen">${this._renderHideWhenControl()}</div>
+                            </lit-tabs-overview>
+                        </div>
+                    </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.trySendSettingsUpdate()}
+                    ></lit-button>
+                    <lit-button
+                        color="secondary"
+                        .label="${msg('Zrušit')}"
+                        variant="text"
+                        .icon="close"
+                        .size="medium"
+                        @click=${() => this.discardChanges()}
+                    ></lit-button>
+                </lit-modal-footer>
+            </lit-modal>
+        `;
+    }
+}
+SectionTabSettings.styles = [
+    css `
+            .hide-when-control {
+                padding: 12px;
+                border: 1px solid var(--color-divider, #d0d3db);
+                border-radius: 4px;
+                background: var(--background-paper, #fff);
+                margin-top: 8px;
+            }
+
+            .hide-when-header {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                margin-bottom: 8px;
+            }
+
+            .condition-builder {
+                display: flex !important;
+                flex-direction: row !important;
+                gap: 8px;
+                align-items: flex-end !important;
+                margin-top: 8px;
+                width: 100%;
+            }
+
+            .condition-builder.hidden {
+                display: none;
+            }
+
+            .condition-preview {
+                width: 100%;
+                font-size: 12px;
+                color: var(--text-secondary, #777);
+                padding: 4px 8px;
+                background: var(--color-primary-light, #f0f0f0);
+                border-radius: 4px;
+                margin-top: 8px;
+            }
+
+            .clear-condition-button {
+                color: var(--color-warning, #ff9500);
+            }
+
+            .popper-input {
+                margin-bottom: 0.5rem;
+                position: sticky;
+                top: 0;
+                background-color: var(--background-paper, #fff);
+                z-index: 1;
+            }
+
+            /* Tab content styles */
+            .tab-content {
+                padding: 1rem;
+                height: calc(100% - 3rem);
+                overflow-y: auto;
+                background-color: var(--background-paper, #fff);
+            }
+
+            .settings-tabs {
+                height: 400px;
+            }
+        `,
+];
+__decorate([
+    property({ type: Object })
+], SectionTabSettings.prototype, "settingsValue", void 0);
+__decorate([
+    property({ type: Function })
+], SectionTabSettings.prototype, "onSettingsChangedModal", void 0);
+__decorate([
+    property({ type: Boolean })
+], SectionTabSettings.prototype, "showAutomaticHeightOptionInSettings", void 0);
+__decorate([
+    property({ type: Boolean })
+], SectionTabSettings.prototype, "aiLoading", void 0);
+__decorate([
+    property({ type: Array })
+], SectionTabSettings.prototype, "allowedLang", void 0);
+__decorate([
+    property({ type: Array })
+], SectionTabSettings.prototype, "variables", void 0);
+__decorate([
+    property({ type: Function })
+], SectionTabSettings.prototype, "onClose", void 0);
+__decorate([
+    property({ type: String })
+], SectionTabSettings.prototype, "userLang", void 0);
+__decorate([
+    property({ type: Function })
+], SectionTabSettings.prototype, "onAiFunction", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "showHideCondition", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "filterText", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "localSettingsValue", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "isOpenModal", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "filterData", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "activeTab", void 0);
+__decorate([
+    state()
+], SectionTabSettings.prototype, "cachedFilterBuilderData", void 0);
+if (!window.customElements.get('section-tab-settings')) {
+    window.customElements.define('section-tab-settings', SectionTabSettings);
+}
+//# sourceMappingURL=section-tab-settings.js.map