overview-components 1.1.0 → 1.1.10

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

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