overview-components 1.1.159 → 1.1.161

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

@@ -1,719 +0,0 @@
-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