overview-components 1.1.160 → 1.1.162

package/dist/components/lit-filter-builder.js

@@ -1,701 +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 { html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { msg } from '@lit/localize';
-import '../shared/lit-select.js';
-import '../shared/lit-input.js';
-import '../shared/lit-responsive-button.js';
-import '../shared/lit-button.js';
-import '../shared/lit-icon-button.js';
-import '../shared/lit-date-picker.js';
-import { getOperatorsByColumnType, getDefaultOperator, isAllowedType, } from '../utils/getOperatorByType.js';
-import { tooltip } from '../shared/simple-tooltip.js';
-export class LitFilterBuilder extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.data = {
-            filterGroups: [
-                {
-                    id: 'group-1',
-                    logicOperator: 'AND',
-                    conditions: [],
-                },
-            ],
-            groupLogicOperator: 'AND',
-        };
-        this.fields = [];
-        this.variables = [];
-        this.disabled = false;
-        this.locale = 'cs';
-    }
-    _generateConditionId() {
-        return 'condition-' + Date.now() + '-' + Math.random().toString(36).substring(2, 11);
-    }
-    _generateGroupId() {
-        return 'group-' + Date.now() + '-' + Math.random().toString(36).substring(2, 11);
-    }
-    _getDefaultValueForType(type) {
-        switch (type) {
-            case 'string':
-                return '';
-            case 'number':
-                return '';
-            case 'date':
-                return '';
-            case 'select':
-                return '';
-            case 'multiselect':
-                return ''; // Will be converted to array when rendering
-            default:
-                return '';
-        }
-    }
-    _getFieldOptions() {
-        return this.fields.map((field) => ({
-            value: field.value,
-            label: field.label,
-        }));
-    }
-    _getOperatorOptions(fieldType) {
-        if (!fieldType || !isAllowedType(fieldType)) {
-            return [];
-        }
-        // Use utility function to get operators for the field type
-        return getOperatorsByColumnType(fieldType);
-    }
-    _getConjunctionOptions() {
-        return [
-            { value: 'AND', label: 'AND' },
-            { value: 'OR', label: 'OR' },
-        ];
-    }
-    _getSelectedField(fieldValue) {
-        return this.fields.find((field) => field.value === fieldValue);
-    }
-    _addGroup() {
-        const newGroup = {
-            id: this._generateGroupId(),
-            logicOperator: 'AND',
-            conditions: [],
-        };
-        this.data = {
-            ...this.data,
-            filterGroups: [...this.data.filterGroups, newGroup],
-        };
-        this._dispatchChangeEvent();
-        this.requestUpdate();
-    }
-    _removeGroup(groupId) {
-        if (this.data.filterGroups.length <= 1) {
-            return; // Don't allow removing the last group
-        }
-        this.data = {
-            ...this.data,
-            filterGroups: this.data.filterGroups.filter((group) => group.id !== groupId),
-        };
-        this._dispatchChangeEvent();
-    }
-    _addCondition(groupId, copyFromCondition) {
-        const newCondition = copyFromCondition
-            ? {
-                id: this._generateConditionId(),
-                field: copyFromCondition.field,
-                operator: copyFromCondition.operator,
-                value: copyFromCondition.value,
-            }
-            : {
-                id: this._generateConditionId(),
-                field: '',
-                operator: '',
-                value: '',
-            };
-        this.data = {
-            ...this.data,
-            filterGroups: this.data.filterGroups.map((group) => group.id === groupId
-                ? {
-                    ...group,
-                    conditions: [...group.conditions, newCondition],
-                }
-                : group),
-        };
-        this._dispatchChangeEvent();
-    }
-    _removeCondition(groupId, conditionId) {
-        this.data = {
-            ...this.data,
-            filterGroups: this.data.filterGroups.map((group) => group.id === groupId
-                ? {
-                    ...group,
-                    conditions: group.conditions.filter((c) => c.id !== conditionId),
-                }
-                : group),
-        };
-        this._dispatchChangeEvent();
-    }
-    _updateCondition(groupId, conditionId, updates) {
-        this.data = {
-            ...this.data,
-            filterGroups: this.data.filterGroups.map((group) => group.id === groupId
-                ? {
-                    ...group,
-                    conditions: group.conditions.map((condition) => condition.id === conditionId
-                        ? { ...condition, ...updates }
-                        : condition),
-                }
-                : group),
-        };
-        this._dispatchChangeEvent();
-    }
-    _updateGroupLogicOperator(groupId, logicOperator) {
-        this.data = {
-            ...this.data,
-            filterGroups: this.data.filterGroups.map((group) => group.id === groupId ? { ...group, logicOperator } : group),
-        };
-        this._dispatchChangeEvent();
-    }
-    _updateGlobalLogicOperator(globalLogicOperator) {
-        this.data = {
-            ...this.data,
-            groupLogicOperator: globalLogicOperator,
-        };
-        this._dispatchChangeEvent();
-    }
-    _toggleVariableMode(groupId, conditionId) {
-        this.data = {
-            ...this.data,
-            filterGroups: this.data.filterGroups.map((group) => group.id === groupId
-                ? {
-                    ...group,
-                    conditions: group.conditions.map((condition) => condition.id === conditionId
-                        ? {
-                            ...condition,
-                            isVariableMode: !condition.isVariableMode,
-                            value: condition.isVariableMode ? '' : condition.value,
-                        }
-                        : condition),
-                }
-                : group),
-        };
-        this._dispatchChangeEvent();
-    }
-    _handleVariableSelect(groupId, conditionId, variableValue) {
-        const variableName = `{${variableValue}}`;
-        this._updateCondition(groupId, conditionId, {
-            value: variableName,
-            isVariableMode: false,
-        });
-    }
-    _handleValueChangeWithVariableDetection(groupId, conditionId, value, condition) {
-        const newValue = value || '';
-        const wasVariable = typeof condition.value === 'string' &&
-            condition.value.startsWith('{') &&
-            condition.value.endsWith('}');
-        const isStillVariable = newValue.startsWith('{') && newValue.endsWith('}');
-        if (wasVariable && !isStillVariable) {
-            // Variable deleted, revert to normal mode
-            this._updateCondition(groupId, conditionId, {
-                value: newValue,
-                isVariableMode: false,
-            });
-        }
-        else {
-            this._handleValueChange(groupId, conditionId, newValue);
-        }
-    }
-    _handleFieldChange(groupId, conditionId, value) {
-        const fieldValue = Array.isArray(value) ? value[0] : value;
-        const selectedField = this._getSelectedField(fieldValue);
-        if (selectedField && isAllowedType(selectedField.type)) {
-            const defaultOperator = getDefaultOperator(selectedField.type);
-            // Reset operator, value, and variable mode when field changes
-            this._updateCondition(groupId, conditionId, {
-                field: fieldValue,
-                operator: defaultOperator,
-                value: this._getDefaultValueForType(selectedField.type),
-                isVariableMode: false,
-            });
-        }
-        else {
-            // Reset operator, value, and variable mode when field changes
-            this._updateCondition(groupId, conditionId, {
-                field: fieldValue,
-                operator: '',
-                value: '',
-                isVariableMode: false,
-            });
-        }
-    }
-    _handleOperatorChange(groupId, conditionId, value) {
-        const operatorValue = Array.isArray(value) ? value[0] : value;
-        // Reset value for operators that don't need it
-        const updates = { operator: operatorValue };
-        if (operatorValue === 'isEmpty' || operatorValue === 'isNotEmpty') {
-            updates.value = '';
-            updates.isVariableMode = false;
-        }
-        this._updateCondition(groupId, conditionId, updates);
-    }
-    _handleValueChange(groupId, conditionId, value) {
-        this._updateCondition(groupId, conditionId, { value: value || '' });
-    }
-    _handleLogicOperatorChange(groupId, value) {
-        const logicOperatorValue = Array.isArray(value) ? value[0] : value;
-        this._updateGroupLogicOperator(groupId, logicOperatorValue);
-    }
-    _handleGlobalLogicOperatorChange(value) {
-        const logicOperatorValue = Array.isArray(value) ? value[0] : value;
-        this._updateGlobalLogicOperator(logicOperatorValue);
-    }
-    _dispatchChangeEvent() {
-        this.dispatchEvent(new CustomEvent('filter-change', {
-            detail: {
-                filterGroups: this.data.filterGroups,
-                groupLogicOperator: this.data.groupLogicOperator,
-            },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _renderValueInput(group, condition) {
-        const selectedField = this._getSelectedField(condition.field);
-        // Check if operator doesn't require a value
-        if (condition.operator === 'isEmpty' || condition.operator === 'isNotEmpty') {
-            return html `<div class="filter-condition__value"></div>`;
-        }
-        // State 1: Variable Selection Mode
-        if (condition.isVariableMode) {
-            return html `
-                <lit-select
-                    class="filter-condition__value"
-                    .options=${this.variables}
-                    .value=${''}
-                    .placeholder=${msg('Vyberte proměnnou')}
-                    ?disabled=${this.disabled}
-                    .onChange=${(value) => {
-                const selectedValue = Array.isArray(value) ? value[0] : value;
-                if (selectedValue) {
-                    this._handleVariableSelect(group.id, condition.id, selectedValue);
-                }
-            }}
-                ></lit-select>
-            `;
-        }
-        // State 2: Variable Value Mode
-        const isVariableValue = typeof condition.value === 'string' &&
-            condition.value.startsWith('{') &&
-            condition.value.endsWith('}');
-        if (isVariableValue) {
-            return html `
-                <lit-input
-                    class="filter-condition__value"
-                    .value=${String(condition.value || '')}
-                    .placeholder=${msg('Zadejte hodnotu nebo proměnnou')}
-                    ?disabled=${this.disabled}
-                    .onInput=${(value) => this._handleValueChangeWithVariableDetection(group.id, condition.id, value, condition)}
-                    .onClear=${() => {
-                // When clear button is clicked, revert to default input type
-                this._updateCondition(group.id, condition.id, {
-                    value: '',
-                    isVariableMode: false,
-                });
-            }}
-                ></lit-input>
-            `;
-        }
-        // State 3: Normal Mode (existing logic)
-        if (!selectedField) {
-            return html `
-                <lit-input
-                    class="filter-condition__value"
-                    .value=${String(condition.value || '')}
-                    .placeholder=${msg('Zadejte hodnotu')}
-                    ?disabled=${this.disabled}
-                    .onInput=${(value) => this._handleValueChange(group.id, condition.id, value)}
-                ></lit-input>
-            `;
-        }
-        switch (selectedField.type) {
-            case 'select':
-                const selectOptions = selectedField.valueOptions || [];
-                return html `
-                    <lit-select
-                        class="filter-condition__value"
-                        .options=${selectOptions}
-                        .value=${String(condition.value)}
-                        ?disabled=${this.disabled}
-                        .onChange=${(value) => this._handleValueChange(group.id, condition.id, Array.isArray(value) ? value[0] : value)}
-                    ></lit-select>
-                `;
-            case 'multiselect':
-                const multiselectOptions = selectedField.valueOptions || [];
-                // Convert string value to array for multiselect
-                const multiselectValue = typeof condition.value === 'string' && condition.value
-                    ? condition.value.split(',').filter((v) => v.trim())
-                    : Array.isArray(condition.value)
-                        ? condition.value
-                        : [];
-                return html `
-                    <lit-select
-                        class="filter-condition__value"
-                        .options=${multiselectOptions}
-                        .value=${multiselectValue}
-                        .multiple=${true}
-                        ?disabled=${this.disabled}
-                        .onChange=${(value) => this._handleValueChange(group.id, condition.id, Array.isArray(value) ? value.join(',') : value)}
-                    ></lit-select>
-                `;
-            case 'number':
-                return html `
-                    <lit-input
-                        class="filter-condition__value"
-                        type="number"
-                        .value=${String(condition.value || '')}
-                        .placeholder=${msg('Zadejte číslo')}
-                        ?disabled=${this.disabled}
-                        .onInput=${(value) => this._handleValueChange(group.id, condition.id, value)}
-                    ></lit-input>
-                `;
-            case 'date':
-                return html `
-                    <lit-date-picker
-                        class="filter-condition__value"
-                        .value=${String(condition.value || '')}
-                        .placeholder=${msg('Vyberte datum')}
-                        ?disabled=${this.disabled}
-                        .onChange=${(value) => this._handleValueChange(group.id, condition.id, value)}
-                    ></lit-date-picker>
-                `;
-            case 'string':
-                return html `
-                    <lit-input
-                        class="filter-condition__value"
-                        .value=${String(condition.value || '')}
-                        .placeholder=${msg('Zadejte hodnotu')}
-                        ?disabled=${this.disabled}
-                        .onInput=${(value) => this._handleValueChange(group.id, condition.id, value)}
-                    ></lit-input>
-                `;
-            default:
-                return html `
-                    <lit-input
-                        class="filter-condition__value"
-                        .value=${String(condition.value || '')}
-                        .placeholder=${msg('Zadejte hodnotu')}
-                        ?disabled=${this.disabled}
-                        .onInput=${(value) => this._handleValueChange(group.id, condition.id, value)}
-                    ></lit-input>
-                `;
-        }
-    }
-    _renderCondition(group, condition, index) {
-        const selectedField = this._getSelectedField(condition.field);
-        const operatorOptions = this._getOperatorOptions(selectedField?.type);
-        const conditionClasses = {
-            'filter-condition': true,
-            'filter-condition--empty': !condition.field,
-        };
-        return html `
-            <div class=${classMap(conditionClasses)}>
-                <!-- Field Selector -->
-                <lit-select
-                    class="filter-condition__field"
-                    .options=${this._getFieldOptions()}
-                    .value=${condition.field}
-                    ?disabled=${this.disabled}
-                    .onChange=${(value) => this._handleFieldChange(group.id, condition.id, value)}
-                ></lit-select>
-
-                <!-- Operator Selector -->
-                <lit-select
-                    class="filter-condition__operator"
-                    .options=${operatorOptions}
-                    .disableClearButton=${true}
-                    .value=${condition.operator}
-                    ?disabled=${this.disabled || !condition.field}
-                    .onChange=${(value) => this._handleOperatorChange(group.id, condition.id, value)}
-                ></lit-select>
-
-                <!-- Value Input -->
-                ${this._renderValueInput(group, condition)}
-
-                <!-- Actions -->
-                <div class="filter-condition__actions">
-                    ${this.variables && this.variables.length > 0
-            ? html `
-                              <lit-icon-button
-                                  .icon=${'variable'}
-                                  .size=${'small'}
-                                  .variant=${'text'}
-                                  .color=${'secondary'}
-                                  .active=${condition.isVariableMode}
-                                  ?disabled=${this.disabled}
-                                  @click=${() => this._toggleVariableMode(group.id, condition.id)}
-                                  ${tooltip(msg('Variables'), 'bottom')}
-                              ></lit-icon-button>
-                          `
-            : ''}
-
-                    <lit-icon-button
-                        .icon=${'trash'}
-                        .size=${'small'}
-                        .variant=${'text'}
-                        .color=${'error'}
-                        ?disabled=${this.disabled}
-                        @click=${() => this._removeCondition(group.id, condition.id)}
-                    ></lit-icon-button>
-
-                    <lit-icon-button
-                        .icon=${'add'}
-                        .size=${'small'}
-                        .variant=${'text'}
-                        .color=${'secondary'}
-                        ?disabled=${this.disabled}
-                        @click=${() => this._addCondition(group.id, condition)}
-                    ></lit-icon-button>
-                </div>
-            </div>
-
-            <!-- Conjunction Selector (not after last condition) -->
-            ${index < group.conditions.length - 1
-            ? html `
-                      <div class="filter-conjunction">
-                          <lit-select
-                              class="filter-conjunction__selector"
-                              color="info"
-                              variant="contained"
-                              .options=${this._getConjunctionOptions()}
-                              .value=${group.logicOperator}
-                              ?disabled=${this.disabled}
-                              .disableClearButton=${true}
-                              .onChange=${(value) => this._handleLogicOperatorChange(group.id, value)}
-                          ></lit-select>
-                      </div>
-                  `
-            : ''}
-        `;
-    }
-    _renderGroup(group, groupIndex) {
-        return html `
-            <div class="filter-group">
-                ${this.data.filterGroups.length > 1
-            ? html `
-                          <div class="filter-group__header">
-                              <span class="filter-group__title">${msg('Skupina')} ${groupIndex + 1}</span>
-                              <div class="filter-group__actions">
-                                  <lit-icon-button
-                                      .icon=${'trash'}
-                                      .size=${'small'}
-                                      .variant=${'text'}
-                                      .color=${'error'}
-                                      ?disabled=${this.disabled}
-                                      @click=${() => this._removeGroup(group.id)}
-                                  ></lit-icon-button>
-                              </div>
-                          </div>
-                      `
-            : ''}
-
-                ${group.conditions.length === 0
-            ? html `
-                          <div class="filter-condition filter-condition--empty">
-                              <span>${msg('Žádné podmínky nejsou definovány')}</span>
-                          </div>
-                      `
-            : group.conditions.map((condition, index) => this._renderCondition(group, condition, index))}
-
-                <div class="add-condition-button">
-                    <lit-responsive-button
-                        .variant=${'text'}
-                        .size=${'medium'}
-                        .color=${'secondary'}
-                        .label=${msg('Přidat podmínku')}
-                        .icon=${'add'}
-                        ?disabled=${this.disabled}
-                        .onClick=${() => this._addCondition(group.id)}
-                    ></lit-responsive-button>
-                </div>
-            </div>
-        `;
-    }
-    render() {
-        return html `
-            <div class="filter-builder">
-                <div class="filter-groups-container">
-                    ${this.data.filterGroups.map((group, groupIndex) => html `
-                            ${this._renderGroup(group, groupIndex)}
-                            ${groupIndex < this.data.filterGroups.length - 1
-            ? html `
-                                      <div class="global-logic-operator">
-                                          <lit-select
-                                              class="global-logic-operator__selector"
-                                              color="info"
-                                              variant="contained"
-                                              .options=${this._getConjunctionOptions()}
-                                              .value=${this.data.groupLogicOperator}
-                                              ?disabled=${this.disabled}
-                                              .disableClearButton=${true}
-                                              .onChange=${(value) => this._handleGlobalLogicOperatorChange(value)}
-                                          ></lit-select>
-                                      </div>
-                                  `
-            : ''}
-                        `)}
-                </div>
-
-                <lit-button
-                    .icon=${'add'}
-                    .variant=${'text'}
-                    .size=${'medium'}
-                    .color=${'secondary'}
-                    ?disabled=${this.disabled}
-                    @click=${() => {
-            this._addGroup();
-        }}
-                    label=${msg('Přidat skupinu')}
-                >
-                </lit-button>
-            </div>
-        `;
-    }
-}
-LitFilterBuilder.styles = css `
-        :host {
-            display: block;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background-color: #ffffff;
-            border-radius: 8px;
-            border: 1px dashed var(--color-divider, #d1d5db);
-            padding: 0.5rem;
-        }
-
-        .filter-builder {
-            display: flex;
-            flex-direction: column;
-            gap: 0.625rem;
-        }
-
-        .filter-condition {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            padding: 0.5rem;
-            background-color: var(--background-paper, #f3f4f6);
-            border: 1px dashed var(--color-divider, #d1d5db);
-            border-radius: 0.5rem;
-            transition: all 0.2s;
-        }
-
-        .filter-condition:hover {
-            border-color: #d1d5db;
-        }
-
-        .filter-condition__field {
-            min-width: 200px;
-            flex: 2;
-        }
-
-        .filter-condition__operator {
-            min-width: 150px;
-            flex: 1;
-        }
-
-        .filter-condition__value {
-            min-width: 200px;
-            flex: 2;
-        }
-
-        .filter-condition__actions {
-            display: flex;
-            gap: 0.5rem;
-        }
-
-        .filter-conjunction {
-            display: flex;
-            align-items: center;
-            justify-content: start;
-        }
-
-        .filter-conjunction__selector {
-            min-width: 80px;
-        }
-
-        .filter-condition--empty {
-            border-style: dashed;
-            border-color: var(--color-divider, #d1d5db);
-            background-color: var(--background-paper, #f3f4f6);
-        }
-
-        .icon {
-            width: 1rem;
-            height: 1rem;
-        }
-
-        .filter-group {
-            display: flex;
-            flex-direction: column;
-            gap: 0.625rem;
-            padding: 0.5rem 0.5rem 0.5rem 1rem;
-            background-color: var(--background-paper, #ffffff);
-            border: 1px dashed var(--color-divider, #d1d5db);
-            border-radius: 0.75rem;
-            position: relative;
-        }
-
-        .filter-group__header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .filter-group__title {
-            font-weight: 600;
-            color: var(--color-text-primary, #1f2937);
-            font-size: 0.875rem;
-        }
-
-        .filter-group__actions {
-            display: flex;
-            gap: 0.5rem;
-        }
-
-        .filter-groups-container {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-
-        .global-logic-operator {
-            display: flex;
-            justify-content: start;
-            align-items: center;
-        }
-
-        .global-logic-operator__selector {
-            min-width: 100px;
-        }
-    `;
-__decorate([
-    property({ type: Object })
-], LitFilterBuilder.prototype, "data", void 0);
-__decorate([
-    property({ type: Array })
-], LitFilterBuilder.prototype, "fields", void 0);
-__decorate([
-    property({ type: Array })
-], LitFilterBuilder.prototype, "variables", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitFilterBuilder.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], LitFilterBuilder.prototype, "locale", void 0);
-if (!window.customElements.get('lit-filter-builder')) {
-    window.customElements.define('lit-filter-builder', LitFilterBuilder);
-}
-//# sourceMappingURL=lit-filter-builder.js.map