overview-components 1.0.78 → 1.0.80

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

@@ -1,237 +1,404 @@
-import { customElement as C } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as m } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as y } from "../node_modules/@lit/reactive-element/decorators/state.js";
-import "../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as v } from "../node_modules/lit-html/lit-html.js";
-import { LitElement as L } from "../node_modules/lit-element/lit-element.js";
-import { msg as S } from "../node_modules/@lit/localize/init/install.js";
-import "../node_modules/@lit/localize/init/runtime.js";
-import R from "../node_modules/sortablejs/modular/sortable.esm.js";
-import { isEmpty as K } from "lodash";
-import { css as T } from "../node_modules/@lit/reactive-element/css-tag.js";
-var k = Object.defineProperty, F = Object.getOwnPropertyDescriptor, a = (t, e, l, i) => {
-  for (var s = i > 1 ? void 0 : i ? F(e, l) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (s = (i ? h(e, l, s) : h(s)) || s);
-  return i && s && k(e, l, s), s;
+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;
 };
-let n = class extends L {
-  constructor() {
-    super(...arguments), this.value = [], this.options = [], this.label = "", this.rightLabel = "", this.allowRightSearch = !1, this.allowSelectAll = !1, this.showRightTotal = !1, this.autoSearch = !0, this.enableAssignmentsOrdering = !0, this.onChange = (t) => {
-    }, 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(t) {
-    this.enableAssignmentsOrdering && (t.has("value") || t.has("options")) && this.initSortables();
-  }
-  firstUpdated() {
-    this.enableAssignmentsOrdering && this.initSortables();
-  }
-  destroySortables() {
-    this.sortableInstances.forEach((t) => t.destroy()), this.sortableInstances = [];
-  }
-  initSortables() {
-    this.updateComplete.then(() => {
-      var d, c;
-      this.destroySortables();
-      const t = (d = this.shadowRoot) == null ? void 0 : d.querySelector("#left-list"), e = (c = this.shadowRoot) == null ? void 0 : c.querySelector("#right-list");
-      if (!t || !e) return;
-      let l = [], i = [];
-      const s = {
-        group: {
-          name: this.sortableGroupId,
-          pull: !0,
-          put: !0
-        },
-        animation: 150,
-        handle: ".drag-handle",
-        onStart: (o) => {
-          l = Array.from(o.from.childNodes);
-        },
-        onMove: (o) => {
-          o.to !== o.from && i.length === 0 && (i = Array.from(o.to.childNodes));
-        },
-        onEnd: (o) => {
-          o.from && l.length > 0 && (o.from.innerHTML = "", l.forEach((f) => o.from.appendChild(f))), o.to && o.to !== o.from && i.length > 0 && (o.to.innerHTML = "", i.forEach((f) => o.to.appendChild(f))), this.updateDataAfterDrag(o), this.requestUpdate();
+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 = [];
+            }
         }
-      }, r = R.create(t, s), h = R.create(e, s);
-      this.sortableInstances.push(r, h);
-    });
-  }
-  updateDataAfterDrag(t) {
-    var I;
-    const { from: e, to: l, oldIndex: i, newIndex: s } = t, r = e.id === "left-list" ? "left" : "right", h = l.id === "left-list" ? "left" : "right", d = t.item.getAttribute("id"), c = [...this.options, ...this.value], o = c.find((p) => String(p.value) === d);
-    if (!o) return;
-    const f = r === "left" ? this.selectedLeftKeys : this.selectedRightKeys, w = f.includes(o.value), b = w ? c.filter((p) => f.includes(p.value)) : [o];
-    if (r === h) {
-      const p = r === "left" ? [...this.options] : [...this.value];
-      if (w) {
-        const u = p.filter((g) => !f.includes(g.value));
-        u.splice(s, 0, ...b), r === "left" ? this.options = u : this.value = u;
-      } else {
-        const [u] = p.splice(i, 1);
-        p.splice(s, 0, u), r === "left" ? this.options = p : this.value = p;
-      }
-    } else if (r === "left") {
-      const p = this.options.filter(
-        (g) => !b.some((x) => x.value === g.value)
-      ), u = [...this.value];
-      b.forEach((g, x) => {
-        u.some(($) => $.value === g.value) || u.splice(s + x, 0, g);
-      }), this.options = p, this.value = u;
-    } else {
-      const p = this.value.filter(
-        (g) => !b.some((x) => x.value === g.value)
-      ), u = [...this.options];
-      b.forEach((g, x) => {
-        u.some(($) => $.value === g.value) || u.splice(s + x, 0, g);
-      }), this.value = p, this.options = u;
+        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,
+        }));
     }
-    (I = this.onChange) == null || I.call(this, this.value), this.dispatchEvent(
-      new CustomEvent("onChange", {
-        detail: this.value
-      })
-    ), this.selectedLeftKeys = [], this.selectedRightKeys = [];
-  }
-  onInputChange(t, e) {
-    const l = t.detail.toLowerCase();
-    e === "left" ? (this.filterText = l, this.autoSearch && (this.appliedFilterText = l)) : (this.filterTextRight = l, this.autoSearch && (this.appliedFilterTextRight = l));
-  }
-  onInputKeyDown(t, e) {
-    !this.autoSearch && t.key === "Enter" && (e === "left" ? this.appliedFilterText = this.filterText : this.appliedFilterTextRight = this.filterTextRight);
-  }
-  getItemsForSide(t) {
-    return t === "left" ? this.options : this.value ?? [];
-  }
-  getSelectedKeysForSide(t) {
-    return t === "left" ? this.selectedLeftKeys : this.selectedRightKeys;
-  }
-  toggleSelection(t, e, l) {
-    const i = this.getItemsForSide(e), s = this.getSelectedKeysForSide(e), r = i.findIndex((c) => c.value === t.value), h = s.includes(t.value);
-    let d = [...s];
-    if (l != null && l.shiftKey) {
-      const c = e === "left" ? this.lastSelectedIndexLeft : this.lastSelectedIndexRight;
-      if (c !== null) {
-        const o = Math.min(c, r), f = Math.max(c, r), w = i.slice(o, f + 1).map((b) => b.value);
-        d = Array.from(/* @__PURE__ */ new Set([...d, ...w]));
-      }
-    } else
-      h ? d = s.filter((c) => c !== t.value) : d = [...s, t.value];
-    e === "left" ? (this.selectedLeftKeys = d, this.lastSelectedIndexLeft = r) : (this.selectedRightKeys = d, this.lastSelectedIndexRight = r);
-  }
-  areAllSelected(t) {
-    const e = this.getItemsForSide(t), l = this.getSelectedKeysForSide(t);
-    return e.length > 0 && e.every((i) => l.includes(i.value));
-  }
-  toggleSelectAll(t) {
-    const l = this.getItemsForSide(t).map((i) => i.value);
-    this.areAllSelected(t) ? t === "left" ? this.selectedLeftKeys = [] : this.selectedRightKeys = [] : t === "left" ? this.selectedLeftKeys = l : this.selectedRightKeys = l;
-  }
-  moveSelected(t, e) {
-    var c;
-    const l = this.getItemsForSide(t), i = this.getSelectedKeysForSide(t), s = l.filter((o) => i.includes(o.value)), h = [...this.getItemsForSide(e)];
-    s.forEach((o) => {
-      h.some((f) => f.value === o.value) || h.push(o);
-    });
-    const d = l.filter((o) => !i.includes(o.value));
-    t === "left" ? (this.options = d, this.selectedLeftKeys = [], this.value = h) : (this.value = d, this.selectedRightKeys = [], this.options = h), (c = this.onChange) == null || c.call(this, this.value), this.dispatchEvent(
-      new CustomEvent("onChange", {
-        detail: this.value
-      })
-    );
-  }
-  moveSingle(t, e, l) {
-    var i;
-    e === "left" ? (this.options = this.options.filter((s) => s.value !== t.value), (this.value ?? []).some((s) => s.value === t.value) || (this.value = [...this.value ?? [], t]), this.selectedLeftKeys = this.selectedLeftKeys.filter((s) => s !== t.value), this.appliedFilterTextRight = "") : (this.value = (this.value ?? []).filter((s) => s.value !== t.value), this.options.some((s) => s.value === t.value) || (this.options = [...this.options, t]), this.selectedRightKeys = this.selectedRightKeys.filter((s) => s !== t.value), this.appliedFilterText = ""), (i = this.onChange) == null || i.call(this, this.value), this.dispatchEvent(
-      new CustomEvent("onChange", {
-        detail: this.value
-      })
-    );
-  }
-  render() {
-    var t;
-    return v`<div class="container">
+    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=${S("Napr. fakturace...")}
-                            .onInput=${(e) => this.onInputChange(
-      new CustomEvent("onInput", { detail: e }),
-      "left"
-    )}
-                            @keydown=${(e) => this.onInputKeyDown(e, "left")}
+                            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 = "";
-    }}
+            this.filterText = '';
+            this.appliedFilterText = '';
+        }}
                             .size="medium"
                         ></lit-input>
                     </div>
 
                     <div class="content">
                         <lit-menu tabindex="0" id="left-list">
-                            ${this.options.filter((e) => {
-      const l = e.title.toLowerCase(), i = this.appliedFilterText.toLowerCase();
-      return l.includes(i);
-    }).map((e) => {
-      const l = this.selectedLeftKeys.includes(e.value);
-      return v`
+                            ${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="${e.value}"
-                                            .id="${e.value}"
-                                            @click=${(i) => this.toggleSelection(e, "left", i)}
-                                            .isSelected=${l}
+                                            .key="${item.value}"
+                                            .id="${item.value}"
+                                            @click=${(e) => this.toggleSelection(item, 'left', e)}
+                                            .isSelected=${isSelected}
                                         >
                                             <div class="item">
-                                                <div class="item-text">${e.title}</div>
+                                                <div class="item-text">${item.title}</div>
 
                                                 <div class="add-minus-icon">
-                                                    ${this.enableAssignmentsOrdering ? v`
+                                                    ${this.enableAssignmentsOrdering
+                ? html `
                                                               <div class="drag-handle">
                                                                   <lit-icon
                                                                       icon="hamburger"
                                                                       size="1rem"
-                                                                      @click=${(i) => {
-        i.stopPropagation();
-      }}
+                                                                      @click=${(e) => {
+                    e.stopPropagation();
+                }}
                                                                   ></lit-icon>
                                                               </div>
-                                                          ` : null}
+                                                          `
+                : null}
 
                                                     <lit-icon
-                                                        .icon="${"add"}"
+                                                        .icon="${'add'}"
                                                         size="1rem"
-                                                        @click=${(i) => {
-        i.stopPropagation(), this.moveSingle(e, "left", "right");
-      }}
+                                                        @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 ? v`
+                            ${this.allowSelectAll
+            ? html `
                                       <lit-checkbox
-                                          .checked=${this.areAllSelected("left")}
-                                          @click=${() => this.toggleSelectAll("left")}
+                                          .checked=${this.areAllSelected('left')}
+                                          @click=${() => this.toggleSelectAll('left')}
                                       ></lit-checkbox>
-                                      <label>${S("Označit vše")}</label>
-                                  ` : null}
+                                      <label>${msg('Označit vše')}</label>
+                                  `
+            : null}
                         </div>
 
                         <div class="count">
-                            <label>${S("celkem") + ":"}</label>
+                            <label>${msg('celkem') + ':'}</label>
                             <label>${this.options.length}</label>
                         </div>
                     </div>
@@ -239,105 +406,115 @@ let n = class extends L {
             </div>
             <div class="wrapper middle">
                 <lit-icon-button
-                    .variant="${"text"}"
-                    .icon="${"add"}"
-                    @click=${() => this.moveSelected("left", "right")}
-                    .disabled="${K(this.selectedLeftKeys)}"
+                    .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="${K(this.selectedRightKeys)}"
+                    .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 ? v`
+                        ${this.allowRightSearch
+            ? html `
                                   <lit-input
-                                      placeholder=${S("Napr. fakturace...")}
-                                      .onInput=${(e) => this.onInputChange(
-      new CustomEvent("onInput", { detail: e }),
-      "right"
-    )}
-                                      @keydown=${(e) => this.onInputKeyDown(e, "right")}
+                                      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 = "";
-    }}
+                this.filterTextRight = '';
+                this.appliedFilterTextRight = '';
+            }}
                                       .size="medium"
                                   ></lit-input>
-                              ` : null}
+                              `
+            : null}
                     </div>
                     <div class="content">
                         <lit-menu tabindex="1" id="right-list">
-                            ${(this.value ?? []).filter((e) => {
-      const l = e.title.toLowerCase(), i = this.appliedFilterTextRight.toLowerCase();
-      return l.includes(i);
-    }).map((e) => {
-      const l = this.selectedRightKeys.includes(e.value);
-      return v`
+                            ${(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="${e.value}"
-                                            id="${e.value}"
-                                            @click=${(i) => this.toggleSelection(e, "right", i)}
-                                            .isSelected=${l}
+                                            .key="${item.value}"
+                                            id="${item.value}"
+                                            @click=${(e) => this.toggleSelection(item, 'right', e)}
+                                            .isSelected=${isSelected}
                                         >
                                             <div class="item">
-                                                <div class="item-text">${e.title}</div>
+                                                <div class="item-text">${item.title}</div>
                                                 <div class="add-minus-icon">
-                                                    ${this.enableAssignmentsOrdering ? v`
+                                                    ${this.enableAssignmentsOrdering
+                ? html `
                                                               <div class="drag-handle">
                                                                   <lit-icon
                                                                       icon="hamburger"
                                                                       size="1rem"
-                                                                      @click=${(i) => {
-        i.stopPropagation();
-      }}
+                                                                      @click=${(e) => {
+                    e.stopPropagation();
+                }}
                                                                   ></lit-icon>
                                                               </div>
-                                                          ` : null}
+                                                          `
+                : null}
                                                     <lit-icon
-                                                        .icon="${"minus"}"
+                                                        .icon="${'minus'}"
                                                         size="1rem"
-                                                        @click=${(i) => {
-        i.stopPropagation(), this.moveSingle(e, "right", "left");
-      }}
+                                                        @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 ? v`
+                            ${this.allowSelectAll
+            ? html `
                                       <lit-checkbox
-                                          .checked=${this.areAllSelected("right")}
-                                          @click=${() => this.toggleSelectAll("right")}
+                                          .checked=${this.areAllSelected('right')}
+                                          @click=${() => this.toggleSelectAll('right')}
                                       ></lit-checkbox>
-                                      <label>${S("Označit vše")}</label>
-                                  ` : null}
+                                      <label>${msg('Označit vše')}</label>
+                                  `
+            : null}
                         </div>
 
                         <div class="count">
-                            ${this.showRightTotal ? v`
-                                      <label>${S("celkem") + ":"}</label>
-                                      <label>${((t = this.value) == null ? void 0 : t.length) ?? 0}</label>
-                                  ` : null}
+                            ${this.showRightTotal
+            ? html `
+                                      <label>${msg('celkem') + ':'}</label>
+                                      <label>${this.value?.length ?? 0}</label>
+                                  `
+            : null}
                         </div>
                     </div>
                 </div>
             </div>
         </div>`;
-  }
+    }
 };
-n.styles = [
-  T`
+LitMultiselectItem.styles = [
+    css `
             @media (max-width: 600px) {
                 .container {
                     flex-direction: column;
@@ -466,65 +643,64 @@ n.styles = [
                 user-select: none;
                 min-height: 2rem;
             }
-        `
+        `,
 ];
-a([
-  m({ type: Array })
-], n.prototype, "value", 2);
-a([
-  m({ type: Array })
-], n.prototype, "options", 2);
-a([
-  m({ type: String })
-], n.prototype, "label", 2);
-a([
-  m({ type: String })
-], n.prototype, "rightLabel", 2);
-a([
-  m({ type: Boolean })
-], n.prototype, "allowRightSearch", 2);
-a([
-  m({ type: Boolean })
-], n.prototype, "allowSelectAll", 2);
-a([
-  m({ type: Boolean })
-], n.prototype, "showRightTotal", 2);
-a([
-  m({ type: Boolean })
-], n.prototype, "autoSearch", 2);
-a([
-  m({ type: Boolean })
-], n.prototype, "enableAssignmentsOrdering", 2);
-a([
-  m({ type: Function })
-], n.prototype, "onChange", 2);
-a([
-  y()
-], n.prototype, "filterText", 2);
-a([
-  y()
-], n.prototype, "filterTextRight", 2);
-a([
-  y()
-], n.prototype, "appliedFilterText", 2);
-a([
-  y()
-], n.prototype, "appliedFilterTextRight", 2);
-a([
-  y()
-], n.prototype, "selectedLeftKeys", 2);
-a([
-  y()
-], n.prototype, "selectedRightKeys", 2);
-a([
-  y()
-], n.prototype, "lastSelectedIndexLeft", 2);
-a([
-  y()
-], n.prototype, "lastSelectedIndexRight", 2);
-n = a([
-  C("lit-multiselect-item")
-], n);
-export {
-  n as LitMultiselectItem
-};
+__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