overview-components 1.0.66 → 1.0.68

package/dist/components/lit-multiselect-item.js

@@ -1,706 +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 { customElement, property, state } from 'lit/decorators.js';
-import { LitElement, html, css } from 'lit';
-import { msg } from '@lit/localize';
-import Sortable from 'sortablejs';
-import { isEmpty } from 'lodash';
-//components
-import '../shared/lit-checkbox.js';
-import '../shared/lit-menu.js';
-import '../shared/lit-menu-item.js';
-import '../shared/lit-icon.js';
-import '../shared/lit-icon-button.js';
-import '../shared/lit-overflow-tooltip.js';
-import '../shared/lit-input.js';
-let LitMultiselectItem = class LitMultiselectItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = [];
-        this.options = [];
-        this.label = '';
-        this.rightLabel = '';
-        this.allowRightSearch = false;
-        this.allowSelectAll = false;
-        this.showRightTotal = false;
-        this.autoSearch = true;
-        this.enableAssignmentsOrdering = true;
-        this.onChange = (value) => { };
-        this.filterText = '';
-        this.filterTextRight = '';
-        this.appliedFilterText = '';
-        this.appliedFilterTextRight = '';
-        this.selectedLeftKeys = [];
-        this.selectedRightKeys = [];
-        this.lastSelectedIndexLeft = null;
-        this.lastSelectedIndexRight = null;
-        this.sortableInstances = [];
-        this.sortableGroupId = `group-${Math.random().toString(36).substring(2, 9)}`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.destroySortables();
-    }
-    updated(changedProperties) {
-        if (this.enableAssignmentsOrdering &&
-            (changedProperties.has('value') || changedProperties.has('options'))) {
-            this.initSortables();
-        }
-    }
-    firstUpdated() {
-        if (this.enableAssignmentsOrdering) {
-            this.initSortables();
-        }
-    }
-    destroySortables() {
-        this.sortableInstances.forEach((s) => s.destroy());
-        this.sortableInstances = [];
-    }
-    initSortables() {
-        this.updateComplete.then(() => {
-            this.destroySortables();
-            const leftList = this.shadowRoot?.querySelector('#left-list');
-            const rightList = this.shadowRoot?.querySelector('#right-list');
-            if (!leftList || !rightList)
-                return;
-            let fromOriginalNodes = [];
-            let toOriginalNodes = [];
-            const commonOptions = {
-                group: {
-                    name: this.sortableGroupId,
-                    pull: true,
-                    put: true,
-                },
-                animation: 150,
-                handle: '.drag-handle',
-                onStart: (evt) => {
-                    fromOriginalNodes = Array.from(evt.from.childNodes);
-                },
-                onMove: (evt) => {
-                    if (evt.to !== evt.from && toOriginalNodes.length === 0) {
-                        toOriginalNodes = Array.from(evt.to.childNodes);
-                    }
-                },
-                onEnd: (evt) => {
-                    if (evt.from && fromOriginalNodes.length > 0) {
-                        evt.from.innerHTML = '';
-                        fromOriginalNodes.forEach((node) => evt.from.appendChild(node));
-                    }
-                    if (evt.to && evt.to !== evt.from && toOriginalNodes.length > 0) {
-                        evt.to.innerHTML = '';
-                        toOriginalNodes.forEach((node) => evt.to.appendChild(node));
-                    }
-                    this.updateDataAfterDrag(evt);
-                    this.requestUpdate();
-                },
-            };
-            const left = Sortable.create(leftList, commonOptions);
-            const right = Sortable.create(rightList, commonOptions);
-            this.sortableInstances.push(left, right);
-        });
-    }
-    updateDataAfterDrag(evt) {
-        const { from, to, oldIndex, newIndex } = evt;
-        const fromSide = from.id === 'left-list' ? 'left' : 'right';
-        const toSide = to.id === 'left-list' ? 'left' : 'right';
-        const itemId = evt.item.getAttribute('id');
-        const allItems = [...this.options, ...this.value];
-        const draggedItem = allItems.find((item) => String(item.value) === itemId);
-        if (!draggedItem)
-            return;
-        const selectedKeys = fromSide === 'left' ? this.selectedLeftKeys : this.selectedRightKeys;
-        const isDraggedItemSelected = selectedKeys.includes(draggedItem.value);
-        const itemsToMove = isDraggedItemSelected
-            ? allItems.filter((item) => selectedKeys.includes(item.value))
-            : [draggedItem];
-        if (fromSide === toSide) {
-            const items = fromSide === 'left' ? [...this.options] : [...this.value];
-            if (isDraggedItemSelected) {
-                const filteredItems = items.filter((item) => !selectedKeys.includes(item.value));
-                filteredItems.splice(newIndex, 0, ...itemsToMove);
-                if (fromSide === 'left') {
-                    this.options = filteredItems;
-                }
-                else {
-                    this.value = filteredItems;
-                }
-            }
-            else {
-                const [removed] = items.splice(oldIndex, 1);
-                items.splice(newIndex, 0, removed);
-                if (fromSide === 'left') {
-                    this.options = items;
-                }
-                else {
-                    this.value = items;
-                }
-            }
-        }
-        else {
-            if (fromSide === 'left') {
-                const newOptions = this.options.filter((item) => !itemsToMove.some((moveItem) => moveItem.value === item.value));
-                const newValue = [...this.value];
-                itemsToMove.forEach((item, index) => {
-                    if (!newValue.some((v) => v.value === item.value)) {
-                        newValue.splice(newIndex + index, 0, item);
-                    }
-                });
-                this.options = newOptions;
-                this.value = newValue;
-            }
-            else {
-                const newValue = this.value.filter((item) => !itemsToMove.some((moveItem) => moveItem.value === item.value));
-                const newOptions = [...this.options];
-                itemsToMove.forEach((item, index) => {
-                    if (!newOptions.some((o) => o.value === item.value)) {
-                        newOptions.splice(newIndex + index, 0, item);
-                    }
-                });
-                this.value = newValue;
-                this.options = newOptions;
-            }
-        }
-        this.onChange?.(this.value);
-        // dispatch event onChange
-        this.dispatchEvent(new CustomEvent('onChange', {
-            detail: this.value,
-        }));
-        this.selectedLeftKeys = [];
-        this.selectedRightKeys = [];
-    }
-    onInputChange(e, side) {
-        const val = e.detail.toLowerCase();
-        if (side === 'left') {
-            this.filterText = val;
-            if (this.autoSearch) {
-                this.appliedFilterText = val;
-            }
-        }
-        else {
-            this.filterTextRight = val;
-            if (this.autoSearch) {
-                this.appliedFilterTextRight = val;
-            }
-        }
-    }
-    onInputKeyDown(e, side) {
-        if (!this.autoSearch && e.key === 'Enter') {
-            if (side === 'left') {
-                this.appliedFilterText = this.filterText;
-            }
-            else {
-                this.appliedFilterTextRight = this.filterTextRight;
-            }
-        }
-    }
-    getItemsForSide(side) {
-        return side === 'left' ? this.options : (this.value ?? []);
-    }
-    getSelectedKeysForSide(side) {
-        return side === 'left' ? this.selectedLeftKeys : this.selectedRightKeys;
-    }
-    toggleSelection(item, side, event) {
-        const list = this.getItemsForSide(side);
-        const selected = this.getSelectedKeysForSide(side);
-        const clickedIndex = list.findIndex((i) => i.value === item.value);
-        const isSelected = selected.includes(item.value);
-        let newSelected = [...selected];
-        if (event?.shiftKey) {
-            const lastIndex = side === 'left' ? this.lastSelectedIndexLeft : this.lastSelectedIndexRight;
-            if (lastIndex !== null) {
-                const start = Math.min(lastIndex, clickedIndex);
-                const end = Math.max(lastIndex, clickedIndex);
-                const rangeItems = list.slice(start, end + 1).map((i) => i.value);
-                newSelected = Array.from(new Set([...newSelected, ...rangeItems]));
-            }
-        }
-        else {
-            if (isSelected) {
-                newSelected = selected.filter((val) => val !== item.value);
-            }
-            else {
-                newSelected = [...selected, item.value];
-            }
-        }
-        if (side === 'left') {
-            this.selectedLeftKeys = newSelected;
-            this.lastSelectedIndexLeft = clickedIndex;
-        }
-        else {
-            this.selectedRightKeys = newSelected;
-            this.lastSelectedIndexRight = clickedIndex;
-        }
-    }
-    areAllSelected(side) {
-        const items = this.getItemsForSide(side);
-        const selected = this.getSelectedKeysForSide(side);
-        return items.length > 0 && items.every((item) => selected.includes(item.value));
-    }
-    toggleSelectAll(side) {
-        const items = this.getItemsForSide(side);
-        const allValues = items.map((item) => item.value);
-        if (this.areAllSelected(side)) {
-            if (side === 'left') {
-                this.selectedLeftKeys = [];
-            }
-            else {
-                this.selectedRightKeys = [];
-            }
-        }
-        else {
-            if (side === 'left') {
-                this.selectedLeftKeys = allValues;
-            }
-            else {
-                this.selectedRightKeys = allValues;
-            }
-        }
-    }
-    moveSelected(from, to) {
-        const fromItems = this.getItemsForSide(from);
-        const fromSelected = this.getSelectedKeysForSide(from);
-        const selectedItems = fromItems.filter((item) => fromSelected.includes(item.value));
-        const toItems = this.getItemsForSide(to);
-        const newToItems = [...toItems];
-        selectedItems.forEach((item) => {
-            if (!newToItems.some((i) => i.value === item.value)) {
-                newToItems.push(item);
-            }
-        });
-        const newFromItems = fromItems.filter((item) => !fromSelected.includes(item.value));
-        if (from === 'left') {
-            this.options = newFromItems;
-            this.selectedLeftKeys = [];
-            this.value = newToItems;
-        }
-        else {
-            this.value = newFromItems;
-            this.selectedRightKeys = [];
-            this.options = newToItems;
-        }
-        this.onChange?.(this.value);
-        // dispatch event onChange
-        this.dispatchEvent(new CustomEvent('onChange', {
-            detail: this.value,
-        }));
-    }
-    moveSingle(item, from, to) {
-        if (from === 'left') {
-            this.options = this.options.filter((i) => i.value !== item.value);
-            if (!(this.value ?? []).some((i) => i.value === item.value)) {
-                this.value = [...(this.value ?? []), item];
-            }
-            this.selectedLeftKeys = this.selectedLeftKeys.filter((v) => v !== item.value);
-            this.appliedFilterTextRight = '';
-        }
-        else {
-            this.value = (this.value ?? []).filter((i) => i.value !== item.value);
-            if (!this.options.some((i) => i.value === item.value)) {
-                this.options = [...this.options, item];
-            }
-            this.selectedRightKeys = this.selectedRightKeys.filter((v) => v !== item.value);
-            this.appliedFilterText = '';
-        }
-        this.onChange?.(this.value);
-        // dispatch event onChange
-        this.dispatchEvent(new CustomEvent('onChange', {
-            detail: this.value,
-        }));
-    }
-    render() {
-        return html `<div class="container">
-            <div class="wrapper">
-                <label class="label">${this.label}</label>
-                <div class="tab">
-                    <div class="input">
-                        <lit-input
-                            placeholder=${msg('Napr. fakturace...')}
-                            .onInput=${(val) => this.onInputChange(new CustomEvent('onInput', { detail: val }), 'left')}
-                            @keydown=${(e) => this.onInputKeyDown(e, 'left')}
-                            .onClear=${() => {
-            this.filterText = '';
-            this.appliedFilterText = '';
-        }}
-                            .size="medium"
-                        ></lit-input>
-                    </div>
-
-                    <div class="content">
-                        <lit-menu tabindex="0" id="left-list">
-                            ${this.options
-            .filter((item) => {
-            const title = item.title.toLowerCase();
-            const filter = this.appliedFilterText.toLowerCase();
-            return title.includes(filter);
-        })
-            .map((item) => {
-            const isSelected = this.selectedLeftKeys.includes(item.value);
-            return html `
-                                        <lit-menu-item
-                                            class="no-select"
-                                            .key="${item.value}"
-                                            .id="${item.value}"
-                                            @click=${(e) => this.toggleSelection(item, 'left', e)}
-                                            .isSelected=${isSelected}
-                                        >
-                                            <div class="item">
-                                                <div class="item-text">${item.title}</div>
-
-                                                <div class="add-minus-icon">
-                                                    ${this.enableAssignmentsOrdering
-                ? html `
-                                                              <div class="drag-handle">
-                                                                  <lit-icon
-                                                                      icon="hamburger"
-                                                                      size="1rem"
-                                                                      @click=${(e) => {
-                    e.stopPropagation();
-                }}
-                                                                  ></lit-icon>
-                                                              </div>
-                                                          `
-                : null}
-
-                                                    <lit-icon
-                                                        .icon="${'add'}"
-                                                        size="1rem"
-                                                        @click=${(e) => {
-                e.stopPropagation();
-                this.moveSingle(item, 'left', 'right');
-            }}
-                                                    ></lit-icon>
-                                                </div>
-                                            </div>
-                                        </lit-menu-item>
-                                    `;
-        })}
-                        </lit-menu>
-                    </div>
-
-                    <div class="footer">
-                        <div class="checkbox">
-                            ${this.allowSelectAll
-            ? html `
-                                      <lit-checkbox
-                                          .checked=${this.areAllSelected('left')}
-                                          @click=${() => this.toggleSelectAll('left')}
-                                      ></lit-checkbox>
-                                      <label>${msg('Označit vše')}</label>
-                                  `
-            : null}
-                        </div>
-
-                        <div class="count">
-                            <label>${msg('celkem') + ':'}</label>
-                            <label>${this.options.length}</label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="wrapper middle">
-                <lit-icon-button
-                    .variant="${'text'}"
-                    .icon="${'add'}"
-                    @click=${() => this.moveSelected('left', 'right')}
-                    .disabled="${isEmpty(this.selectedLeftKeys)}"
-                ></lit-icon-button>
-                <lit-icon-button
-                    .variant="${'text'}"
-                    .icon="${'minus'}"
-                    @click=${() => this.moveSelected('right', 'left')}
-                    .disabled="${isEmpty(this.selectedRightKeys)}"
-                ></lit-icon-button>
-            </div>
-            <div class="wrapper">
-                <label class="label">${this.rightLabel}</label>
-                <div class="tab">
-                    <div class="input">
-                        ${this.allowRightSearch
-            ? html `
-                                  <lit-input
-                                      placeholder=${msg('Napr. fakturace...')}
-                                      .onInput=${(val) => this.onInputChange(new CustomEvent('onInput', { detail: val }), 'right')}
-                                      @keydown=${(e) => this.onInputKeyDown(e, 'right')}
-                                      .onClear=${() => {
-                this.filterTextRight = '';
-                this.appliedFilterTextRight = '';
-            }}
-                                      .size="medium"
-                                  ></lit-input>
-                              `
-            : null}
-                    </div>
-                    <div class="content">
-                        <lit-menu tabindex="1" id="right-list">
-                            ${(this.value ?? [])
-            .filter((item) => {
-            const title = item.title.toLowerCase();
-            const filter = this.appliedFilterTextRight.toLowerCase();
-            return title.includes(filter);
-        })
-            .map((item) => {
-            const isSelected = this.selectedRightKeys.includes(item.value);
-            return html `
-                                        <lit-menu-item
-                                            class="no-select"
-                                            .key="${item.value}"
-                                            id="${item.value}"
-                                            @click=${(e) => this.toggleSelection(item, 'right', e)}
-                                            .isSelected=${isSelected}
-                                        >
-                                            <div class="item">
-                                                <div class="item-text">${item.title}</div>
-                                                <div class="add-minus-icon">
-                                                    ${this.enableAssignmentsOrdering
-                ? html `
-                                                              <div class="drag-handle">
-                                                                  <lit-icon
-                                                                      icon="hamburger"
-                                                                      size="1rem"
-                                                                      @click=${(e) => {
-                    e.stopPropagation();
-                }}
-                                                                  ></lit-icon>
-                                                              </div>
-                                                          `
-                : null}
-                                                    <lit-icon
-                                                        .icon="${'minus'}"
-                                                        size="1rem"
-                                                        @click=${(e) => {
-                e.stopPropagation();
-                this.moveSingle(item, 'right', 'left');
-            }}
-                                                    ></lit-icon>
-                                                </div>
-                                            </div>
-                                        </lit-menu-item>
-                                    `;
-        })}
-                        </lit-menu>
-                    </div>
-                    <div class="footer">
-                        <div class="checkbox">
-                            ${this.allowSelectAll
-            ? html `
-                                      <lit-checkbox
-                                          .checked=${this.areAllSelected('right')}
-                                          @click=${() => this.toggleSelectAll('right')}
-                                      ></lit-checkbox>
-                                      <label>${msg('Označit vše')}</label>
-                                  `
-            : null}
-                        </div>
-
-                        <div class="count">
-                            ${this.showRightTotal
-            ? html `
-                                      <label>${msg('celkem') + ':'}</label>
-                                      <label>${this.value?.length ?? 0}</label>
-                                  `
-            : null}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-    }
-};
-LitMultiselectItem.styles = [
-    css `
-            @media (max-width: 600px) {
-                .container {
-                    flex-direction: column;
-                }
-                .wrapper.middle {
-                    flex-direction: row !important;
-                    justify-content: center;
-                    height: auto !important;
-                    padding-top: 0 !important;
-                }
-            }
-
-            .container {
-                display: flex;
-                justify-content: space-between;
-                width: 100%;
-                height: 100%;
-                gap: 0.375rem;
-            }
-
-            .wrapper {
-                display: flex;
-                flex-direction: column;
-                flex: 1 1 0;
-                height: 100%;
-                min-width: 0;
-                min-height: 0;
-            }
-
-            .wrapper.middle {
-                flex: 0 0 auto;
-                flex-direction: column;
-                padding-top: 2rem;
-                gap: 0.5rem;
-                align-items: center;
-            }
-
-            .label {
-                font-weight: 500;
-                font-size: 14px;
-                color: var(--text-secondary, #5d6371);
-                line-height: 1.5rem;
-                padding-left: 0.875rem;
-                margin-bottom: 0.375rem;
-            }
-
-            .tab {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                border-radius: var(--border-radius-small, 0.5rem);
-                border: 1px solid var(--border-primary, #d0d3db);
-                padding: 0.5rem;
-                gap: 0.5rem;
-                min-height: 0;
-            }
-
-            .input {
-            }
-
-            .content {
-                flex-grow: 1;
-                overflow: auto;
-                min-height: 0;
-            }
-
-            .footer {
-                border-top: 1px solid var(--border-primary, #d0d3db);
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                min-height: 2.375rem;
-            }
-
-            .footer.csv {
-                justify-content: end;
-            }
-
-            .csv-icon {
-                padding-right: 0.5rem;
-            }
-
-            .checkbox {
-                display: flex;
-                align-items: center;
-                padding: 0.25rem 0.5rem;
-                gap: 0.375rem;
-                font-size: 12px;
-                font-weight: 500;
-            }
-
-            .count {
-                display: flex;
-                align-items: center;
-                padding: 0.25rem 0.5rem;
-                gap: 0.375rem;
-                font-size: 12px;
-                font-weight: 400;
-            }
-
-            .item {
-                display: flex;
-                width: 100%;
-                justify-content: space-between;
-                align-items: center;
-            }
-
-            .item-text {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-
-            .add-minus-icon {
-                visibility: hidden;
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-            }
-
-            .item:hover .add-minus-icon {
-                visibility: visible;
-            }
-
-            .no-select {
-                user-select: none;
-                min-height: 2rem;
-            }
-        `,
-];
-__decorate([
-    property({ type: Array })
-], LitMultiselectItem.prototype, "value", void 0);
-__decorate([
-    property({ type: Array })
-], LitMultiselectItem.prototype, "options", void 0);
-__decorate([
-    property({ type: String })
-], LitMultiselectItem.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], LitMultiselectItem.prototype, "rightLabel", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitMultiselectItem.prototype, "allowRightSearch", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitMultiselectItem.prototype, "allowSelectAll", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitMultiselectItem.prototype, "showRightTotal", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitMultiselectItem.prototype, "autoSearch", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitMultiselectItem.prototype, "enableAssignmentsOrdering", void 0);
-__decorate([
-    property({ type: Function })
-], LitMultiselectItem.prototype, "onChange", void 0);
-__decorate([
-    state()
-], LitMultiselectItem.prototype, "filterText", void 0);
-__decorate([
-    state()
-], LitMultiselectItem.prototype, "filterTextRight", void 0);
-__decorate([
-    state()
-], LitMultiselectItem.prototype, "appliedFilterText", void 0);
-__decorate([
-    state()
-], LitMultiselectItem.prototype, "appliedFilterTextRight", void 0);
-__decorate([
-    state()
-], LitMultiselectItem.prototype, "selectedLeftKeys", void 0);
-__decorate([
-    state()
-], LitMultiselectItem.prototype, "selectedRightKeys", void 0);
-__decorate([
-    state()
-], LitMultiselectItem.prototype, "lastSelectedIndexLeft", void 0);
-__decorate([
-    state()
-], LitMultiselectItem.prototype, "lastSelectedIndexRight", void 0);
-LitMultiselectItem = __decorate([
-    customElement('lit-multiselect-item')
-], LitMultiselectItem);
-export { LitMultiselectItem };
-//# sourceMappingURL=lit-multiselect-item.js.map