@web-atoms/web-controls 2.6.5 → 2.6.6

package/dist-esm/basic/AtomRepeater.js

@@ -10,1121 +10,1156 @@ import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService.js";
 import MergeNode from "./MergeNode.js";
 import ItemPath from "./ItemPath.js";
-import "./styles/popup.global.css";
-import "./styles/suggestion-popup.global.css";
-import "./styles/repeater.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/popup.global.css"));
+ESMPack.installStyleSheet(import.meta.resolve("./styles/suggestion-popup.global.css"));
+ESMPack.installStyleSheet(import.meta.resolve("./styles/repeater.global.css"));
 import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI.js";
 import DataAttributes from "../DataAttributes.js";
 import AtomPopover from "./elements/AtomPopover.js";
 import sleep from "@web-atoms/core/dist/core/sleep.js";
-export const getParentRepeaterItem = (target) => {
-    let eventName;
-    let repeater;
-    let index;
-    let root;
-    while (target) {
-        const a = target.atomControl;
-        if (a !== undefined && a instanceof AtomRepeater) {
-            repeater = a;
-            break;
-        }
-        if (index === undefined) {
-            const itemIndex = target.getAttribute("data-item-index");
-            if (typeof itemIndex !== "undefined") {
-                root = target;
-                index = ~~itemIndex;
-            }
-        }
-        if (eventName === undefined) {
-            const itemClickEvent = target.getAttribute("data-click-event");
-            if (itemClickEvent) {
-                eventName = itemClickEvent.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-            }
-        }
-        target = target.parentElement;
+export const getParentRepeaterItem = target => {
+  let eventName;
+  let repeater;
+  let index;
+  let root;
+  while (target) {
+    const a = target.atomControl;
+    if (a !== undefined && a instanceof AtomRepeater) {
+      repeater = a;
+      break;
+    }
+    if (index === undefined) {
+      const itemIndex = target.getAttribute("data-item-index");
+      if (typeof itemIndex !== "undefined") {
+        root = target;
+        index = ~~itemIndex;
+      }
     }
-    if (index === void 0 || repeater === void 0) {
-        return undefined;
+    if (eventName === undefined) {
+      const itemClickEvent = target.getAttribute("data-click-event");
+      if (itemClickEvent) {
+        eventName = itemClickEvent.replace(/-([a-z])/g, g => g[1].toUpperCase());
+      }
     }
-    const item = repeater.items[~~index];
-    return [eventName, repeater, item, index, root];
+    target = target.parentElement;
+  }
+  if (index === void 0 || repeater === void 0) {
+    return undefined;
+  }
+  const item = repeater.items[~~index];
+  return [eventName, repeater, item, index, root];
 };
 export const MatchTrue = (...a) => true;
 export const MatchFalse = (...a) => false;
-export const ArrowToString = (item) => item.label?.toString() ?? item.toString();
+export const ArrowToString = item => item.label?.toString() ?? item.toString();
 export const MatchCaseInsensitive = (textField = ArrowToString) => {
-    return (s) => {
-        if (!s) {
-            return MatchTrue;
-        }
-        const r = StringHelper.createContainsRegExp(s);
-        return (item) => r.test(textField(item));
-    };
+  return s => {
+    if (!s) {
+      return MatchTrue;
+    }
+    const r = StringHelper.createContainsRegExp(s);
+    return item => r.test(textField(item));
+  };
 };
 export const MatchAnyCaseInsensitive = (textField = ArrowToString) => {
-    return (s) => {
-        if (!s) {
-            return MatchTrue;
-        }
-        const r = StringHelper.createContainsAnyWordRegExp(s);
-        return (item) => r.test(textField(item));
-    };
+  return s => {
+    if (!s) {
+      return MatchTrue;
+    }
+    const r = StringHelper.createContainsAnyWordRegExp(s);
+    return item => r.test(textField(item));
+  };
 };
-export const SameObjectValue = (item) => item;
+export const SameObjectValue = item => item;
 export function askSuggestion(items, itemRenderer, match, options) {
-    class Suggestions extends PopupWindow {
-        create() {
-            this.title = options?.title ?? "Select";
-            this.render(XNode.create("div", { "data-repeater-popup": "popup" },
-                XNode.create("input", { type: "search", value: Bind.twoWaysImmediate(() => this.search), autofocus: true }),
-                XNode.create("div", { class: "items" },
-                    XNode.create(AtomRepeater, { class: "presenter", itemRenderer: itemRenderer, visibilityFilter: Bind.oneWay(() => match(this.search)), eventItemClick: (e) => {
-                            this.close(e.detail);
-                        }, items: items }))));
-        }
+  class Suggestions extends PopupWindow {
+    create() {
+      this.title = options?.title ?? "Select";
+      this.render(XNode.create("div", {
+        "data-repeater-popup": "popup"
+      }, XNode.create("input", {
+        type: "search",
+        value: Bind.twoWaysImmediate(() => this.search),
+        autofocus: true
+      }), XNode.create("div", {
+        class: "items"
+      }, XNode.create(AtomRepeater, {
+        class: "presenter",
+        itemRenderer: itemRenderer,
+        visibilityFilter: Bind.oneWay(() => match(this.search)),
+        eventItemClick: e => {
+          this.close(e.detail);
+        },
+        items: items
+      }))));
     }
-    __decorate([
-        BindableProperty,
-        __metadata("design:type", String)
-    ], Suggestions.prototype, "search", void 0);
-    options ??= {};
-    if (typeof options.maximize === "undefined") {
-        if (typeof options.width === "undefined") {
-            options.maxWidth = "90%";
-            options.minWidth = "300px";
-        }
-        if (typeof options.height === "undefined") {
-            options.height = "80%";
-        }
+  }
+  __decorate([BindableProperty, __metadata("design:type", String)], Suggestions.prototype, "search", void 0);
+  options ??= {};
+  if (typeof options.maximize === "undefined") {
+    if (typeof options.width === "undefined") {
+      options.maxWidth = "90%";
+      options.minWidth = "300px";
     }
-    return Suggestions.showModal(options);
+    if (typeof options.height === "undefined") {
+      options.height = "80%";
+    }
+  }
+  return Suggestions.showModal(options);
 }
 export function askSuggestionPopup(opener, items, itemRenderer, match, selectedItem) {
-    const itemsInOpener = "items" in opener;
-    class Suggestions extends AtomPopover {
-        constructor() {
-            super(...arguments);
-            this.anchorItem = null;
-            this.anchorIndex = null;
-        }
-        init() {
-            const disableSearch = opener.disableSearch;
-            this.renderer = XNode.create("div", { "data-suggestion-popup": "suggestion-popup" },
-                !disableSearch && XNode.create("input", { type: "search", value: Bind.sourceTwoWays(opener, (x) => x.source.search), eventKeydown: (e) => this.onKey(e), autofocus: true }),
-                XNode.create("div", { class: "items" },
-                    XNode.create(AtomRepeater, { class: "presenter", selectedItem: Bind.source(this, (x) => x.source.anchorItem), itemRenderer: itemRenderer, visibilityFilter: Bind.source(opener, (x) => match(x.source.search)), presenter: Bind.presenter((c) => this.repeater = c), eventItemClick: (e) => {
-                            this.anchorItem = e.detail;
-                            setTimeout(() => this.close(e.detail), 50);
-                        }, items: Bind.source(opener, (x) => x.source.items) })));
-            if (disableSearch) {
-                const { input } = opener;
-                if (input) {
-                    this.disposables.add(opener.bindEvent(input, "keydown", (e) => this.onKey(e)));
-                }
-            }
-        }
-        async cancelSelection() {
-            await sleep(100);
-            if (!this.removed) {
-                this.close(opener.selectedItem);
-            }
-        }
-        onKey(e) {
-            const suggested = match ? opener.items?.filter(match(opener.search)) : opener.items;
-            switch (e.key) {
-                case "Escape":
-                    this.cancelSelection().catch(console.error);
-                    return;
-                case "Tab":
-                case "Enter":
-                    const anchorItem = this.anchorItem;
-                    if (!anchorItem) {
-                        if (e.key === "Tab") {
-                            e.preventDefault();
-                            this.cancelSelection().catch(console.error);
-                        }
-                        return;
-                    }
-                    this.anchorIndex = 0;
-                    setTimeout(() => this.close(anchorItem), 10);
-                    this.anchorItem = null;
-                    opener.search = "";
-                    e.preventDefault();
-                    break;
-                case "ArrowDown":
-                    if (suggested) {
-                        if (!this.anchorItem) {
-                            this.anchorIndex = 0;
-                        }
-                        else {
-                            if (this.anchorIndex < suggested.length - 1) {
-                                this.anchorIndex++;
-                            }
-                        }
-                        this.anchorItem = suggested[this.anchorIndex];
-                        if (this.anchorItem) {
-                            const current = this.repeater.elementForItem(this.anchorItem);
-                            current?.scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
-                        }
-                        e.preventDefault();
-                    }
-                    break;
-                case "ArrowUp":
-                    if (suggested) {
-                        if (!this.anchorItem) {
-                            return;
-                        }
-                        if (this.anchorIndex) {
-                            this.anchorIndex--;
-                        }
-                        this.anchorItem = suggested[this.anchorIndex];
-                        if (this.anchorItem) {
-                            const current = this.repeater.elementForItem(this.anchorItem);
-                            current?.scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
-                        }
-                        e.preventDefault();
-                    }
-                    break;
-            }
-        }
+  const itemsInOpener = "items" in opener;
+  class Suggestions extends AtomPopover {
+    constructor() {
+      super(...arguments);
+      this.anchorItem = null;
+      this.anchorIndex = null;
     }
-    return Suggestions.show(opener.element, { "anchor-left": "parent-left" });
-}
-export function SelectorCheckBox({ text, icon = "far fa-square", iconSelected = "fas fa-check-square", ...a }, ...nodes) {
-    if (text) {
-        return XNode.create("label", { "data-selector": "check-box", ...a },
-            XNode.create("i", { class: icon, "data-click-event": "item-select" }),
-            XNode.create("i", { class: iconSelected, "data-click-event": "item-deselect" }),
-            XNode.create("span", { "data-no-wrap": "true", text: text }),
-            ...nodes);
-    }
-    return XNode.create("label", { "data-selector": "check-box", ...a },
-        XNode.create("i", { class: icon, "data-click-event": "item-select" }),
-        XNode.create("i", { class: iconSelected, "data-click-event": "item-deselect" }),
-        ...nodes);
-}
-class SelectAllControl extends AtomControl {
-    preCreate() {
-        this.element.setAttribute("data-select-all", "select-all");
-        this.items = [];
-        this.selectedItems = [];
-        this.render(XNode.create(SelectAllControl, { "data-is-selected": Bind.oneWay(() => this.items.length > 0
-                && this.items.length === this.selectedItems.length, false) }));
-        this.bindEvent(this.element, "click", () => {
-            const si = this.selectedItems;
-            const items = this.items;
-            if (!si) {
-                return;
+    init() {
+      const disableSearch = opener.disableSearch;
+      this.renderer = XNode.create("div", {
+        "data-suggestion-popup": "suggestion-popup"
+      }, !disableSearch && XNode.create("input", {
+        type: "search",
+        value: Bind.sourceTwoWays(opener, x => x.source.search),
+        eventKeydown: e => this.onKey(e),
+        autofocus: true
+      }), XNode.create("div", {
+        class: "items"
+      }, XNode.create(AtomRepeater, {
+        class: "presenter",
+        selectedItem: Bind.source(this, x => x.source.anchorItem),
+        itemRenderer: itemRenderer,
+        visibilityFilter: Bind.source(opener, x => match(x.source.search)),
+        presenter: Bind.presenter(c => this.repeater = c),
+        eventItemClick: e => {
+          this.anchorItem = e.detail;
+          setTimeout(() => this.close(e.detail), 50);
+        },
+        items: Bind.source(opener, x => x.source.items)
+      })));
+      if (disableSearch) {
+        const {
+          input
+        } = opener;
+        if (input) {
+          this.disposables.add(opener.bindEvent(input, "keydown", e => this.onKey(e)));
+        }
+      }
+    }
+    async cancelSelection() {
+      await sleep(100);
+      if (!this.removed) {
+        this.close(opener.selectedItem);
+      }
+    }
+    onKey(e) {
+      const suggested = match ? opener.items?.filter(match(opener.search)) : opener.items;
+      switch (e.key) {
+        case "Escape":
+          this.cancelSelection().catch(console.error);
+          return;
+        case "Tab":
+        case "Enter":
+          const anchorItem = this.anchorItem;
+          if (!anchorItem) {
+            if (e.key === "Tab") {
+              e.preventDefault();
+              this.cancelSelection().catch(console.error);
             }
-            if (!items) {
-                return;
+            return;
+          }
+          this.anchorIndex = 0;
+          setTimeout(() => this.close(anchorItem), 10);
+          this.anchorItem = null;
+          opener.search = "";
+          e.preventDefault();
+          break;
+        case "ArrowDown":
+          if (suggested) {
+            if (!this.anchorItem) {
+              this.anchorIndex = 0;
+            } else {
+              if (this.anchorIndex < suggested.length - 1) {
+                this.anchorIndex++;
+              }
             }
-            if (items.length === 0) {
-                return;
+            this.anchorItem = suggested[this.anchorIndex];
+            if (this.anchorItem) {
+              const current = this.repeater.elementForItem(this.anchorItem);
+              current?.scrollIntoView({
+                behavior: "auto",
+                block: "center",
+                inline: "nearest"
+              });
             }
-            if (items.length === si.length) {
-                si.clear();
+            e.preventDefault();
+          }
+          break;
+        case "ArrowUp":
+          if (suggested) {
+            if (!this.anchorItem) {
+              return;
             }
-            else {
-                si.length = 0;
-                si.push(...items);
-                si.refresh();
+            if (this.anchorIndex) {
+              this.anchorIndex--;
             }
-        });
+            this.anchorItem = suggested[this.anchorIndex];
+            if (this.anchorItem) {
+              const current = this.repeater.elementForItem(this.anchorItem);
+              current?.scrollIntoView({
+                behavior: "auto",
+                block: "center",
+                inline: "nearest"
+              });
+            }
+            e.preventDefault();
+          }
+          break;
+      }
     }
+  }
+  return Suggestions.show(opener.element, {
+    "anchor-left": "parent-left"
+  });
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], SelectAllControl.prototype, "items", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], SelectAllControl.prototype, "selectedItems", void 0);
-export function SelectAll({ text = "Select All", icon = "far fa-square", iconSelected = "fas fa-check-square", ...a }, ...nodes) {
-    if (text) {
-        return XNode.create(SelectAllControl, { for: "label", ...a },
-            XNode.create("i", { class: icon, "data-ui-type": "item-select" }),
-            XNode.create("i", { class: iconSelected, "data-ui-type": "item-deselect" }),
-            XNode.create("span", { "data-no-wrap": "true", text: text }));
-    }
-    return XNode.create(SelectAllControl, { for: "label", ...a },
-        XNode.create("i", { class: icon, "data-ui-type": "item-select" }),
-        XNode.create("i", { class: iconSelected, "data-ui-type": "item-deselect" }),
-        ...nodes);
+export function SelectorCheckBox({
+  text,
+  icon = "far fa-square",
+  iconSelected = "fas fa-check-square",
+  ...a
+}, ...nodes) {
+  if (text) {
+    return XNode.create("label", {
+      "data-selector": "check-box",
+      ...a
+    }, XNode.create("i", {
+      class: icon,
+      "data-click-event": "item-select"
+    }), XNode.create("i", {
+      class: iconSelected,
+      "data-click-event": "item-deselect"
+    }), XNode.create("span", {
+      "data-no-wrap": "true",
+      text: text
+    }), ...nodes);
+  }
+  return XNode.create("label", {
+    "data-selector": "check-box",
+    ...a
+  }, XNode.create("i", {
+    class: icon,
+    "data-click-event": "item-select"
+  }), XNode.create("i", {
+    class: iconSelected,
+    "data-click-event": "item-deselect"
+  }), ...nodes);
 }
-export function disposeChildren(owner, e) {
-    if (!e) {
+class SelectAllControl extends AtomControl {
+  preCreate() {
+    this.element.setAttribute("data-select-all", "select-all");
+    this.items = [];
+    this.selectedItems = [];
+    this.render(XNode.create(SelectAllControl, {
+      "data-is-selected": Bind.oneWay(() => this.items.length > 0 && this.items.length === this.selectedItems.length, false)
+    }));
+    this.bindEvent(this.element, "click", () => {
+      const si = this.selectedItems;
+      const items = this.items;
+      if (!si) {
         return;
-    }
-    let s = e.firstElementChild;
-    while (s) {
-        const c = s;
-        s = s.nextElementSibling;
-        const ac = c.atomControl;
-        if (ac) {
-            ac.dispose();
-            continue;
-        }
-        disposeChildren(owner, c);
-        owner.unbind(c);
-        owner.unbindEvent(c);
-    }
-    e.innerHTML = "";
+      }
+      if (!items) {
+        return;
+      }
+      if (items.length === 0) {
+        return;
+      }
+      if (items.length === si.length) {
+        si.clear();
+      } else {
+        si.length = 0;
+        si.push(...items);
+        si.refresh();
+      }
+    });
+  }
 }
-export function disposeChild(owner, e) {
-    const ac = e.atomControl;
+__decorate([BindableProperty, __metadata("design:type", Array)], SelectAllControl.prototype, "items", void 0);
+__decorate([BindableProperty, __metadata("design:type", Array)], SelectAllControl.prototype, "selectedItems", void 0);
+export function SelectAll({
+  text = "Select All",
+  icon = "far fa-square",
+  iconSelected = "fas fa-check-square",
+  ...a
+}, ...nodes) {
+  if (text) {
+    return XNode.create(SelectAllControl, {
+      for: "label",
+      ...a
+    }, XNode.create("i", {
+      class: icon,
+      "data-ui-type": "item-select"
+    }), XNode.create("i", {
+      class: iconSelected,
+      "data-ui-type": "item-deselect"
+    }), XNode.create("span", {
+      "data-no-wrap": "true",
+      text: text
+    }));
+  }
+  return XNode.create(SelectAllControl, {
+    for: "label",
+    ...a
+  }, XNode.create("i", {
+    class: icon,
+    "data-ui-type": "item-select"
+  }), XNode.create("i", {
+    class: iconSelected,
+    "data-ui-type": "item-deselect"
+  }), ...nodes);
+}
+export function disposeChildren(owner, e) {
+  if (!e) {
+    return;
+  }
+  let s = e.firstElementChild;
+  while (s) {
+    const c = s;
+    s = s.nextElementSibling;
+    const ac = c.atomControl;
     if (ac) {
-        ac.dispose();
-        return;
+      ac.dispose();
+      continue;
     }
-    disposeChildren(owner, e);
-    owner.unbind(e);
-    owner.unbindEvent(e);
-    e.remove();
+    disposeChildren(owner, c);
+    owner.unbind(c);
+    owner.unbindEvent(c);
+  }
+  e.innerHTML = "";
+}
+export function disposeChild(owner, e) {
+  const ac = e.atomControl;
+  if (ac) {
+    ac.dispose();
+    return;
+  }
+  disposeChildren(owner, e);
+  owner.unbind(e);
+  owner.unbindEvent(e);
+  e.remove();
 }
 export function defaultComparer(left, right) {
-    if (left && right) {
-        if (left instanceof Date) {
-            if (right instanceof Date) {
-                return left.getTime() === right.getTime();
-            }
-            return false;
-        }
+  if (left && right) {
+    if (left instanceof Date) {
+      if (right instanceof Date) {
+        return left.getTime() === right.getTime();
+      }
+      return false;
     }
-    return left === right;
+  }
+  return left === right;
 }
-const getFirstChild = (container) => {
-    let child = container.firstElementChild;
-    while (child && !child.hasAttribute("data-item-index")) {
-        child = child.nextElementSibling;
-    }
-    return child;
+const getFirstChild = container => {
+  let child = container.firstElementChild;
+  while (child && !child.hasAttribute("data-item-index")) {
+    child = child.nextElementSibling;
+  }
+  return child;
 };
 function updateDragDrop(e, force = false) {
-    if (!e) {
-        return;
+  if (!e) {
+    return;
+  }
+  if (force) {
+    e.draggable = false;
+  } else {
+    force = e.draggable;
+  }
+  e = e.firstElementChild;
+  while (e) {
+    updateDragDrop(e, force);
+    e = e.nextElementSibling;
+  }
+}
+export default class AtomRepeater extends AtomControl {
+  constructor() {
+    super(...arguments);
+    this.bubbleEvents = true;
+  }
+  static from(element) {
+    while (element) {
+      const {
+        atomControl
+      } = element;
+      if (atomControl instanceof AtomRepeater) {
+        return atomControl;
+      }
+      element = element.parentElement;
     }
-    if (force) {
-        e.draggable = false;
+  }
+  static itemFromElement(e, ar = this.from(e)) {
+    const da = new DataAttributes(e, ar);
+    const recreate = da.get("data-recreate");
+    const header = da.get("data-header");
+    const footer = da.get("data-footer");
+    const itemIndex = da.get("data-item-index");
+    const itemPath = da.get("data-item-path");
+    let clickEvent = da.get("data-click-event") || (header ? "headerClick" : footer ? "footerClick" : "itemClick");
+    clickEvent = clickEvent.replace(/-([a-z])/g, g => g[1].toUpperCase());
+    const index = ~~itemIndex;
+    const item = ar.items[index];
+    let nestedItem = null;
+    if (item) {
+      if (itemPath || false) {
+        nestedItem = ItemPath.get(item, itemPath.trim());
+      }
     }
-    else {
-        force = e.draggable;
+    return {
+      recreate,
+      header,
+      footer,
+      itemPath,
+      itemIndex,
+      item,
+      nestedItem,
+      clickEvent,
+      target: e
+    };
+  }
+  set refreshEventScope(v) {
+    this.registerDisposable(v.listen(ce => {
+      this.refreshItem(ce.detail);
+    }));
+  }
+  get allSelected() {
+    const selectedItems = this.selectedItems;
+    const items = this.items;
+    if (!(items && selectedItems)) {
+      return false;
     }
-    e = e.firstElementChild;
-    while (e) {
-        updateDragDrop(e, force);
-        e = e.nextElementSibling;
+    return items.length && items.length === selectedItems.length;
+  }
+  get value() {
+    if (this.initialValue !== undefined) {
+      return this.initialValue;
     }
-}
-export default class AtomRepeater extends AtomControl {
-    constructor() {
-        super(...arguments);
-        this.bubbleEvents = true;
-    }
-    static from(element) {
-        while (element) {
-            const { atomControl } = element;
-            if (atomControl instanceof AtomRepeater) {
-                return atomControl;
-            }
-            element = element.parentElement;
-        }
+    const sp = this.selectedItem;
+    if (sp === undefined) {
+      return sp;
     }
-    static itemFromElement(e, ar = this.from(e)) {
-        const da = new DataAttributes(e, ar);
-        const recreate = da.get("data-recreate");
-        const header = da.get("data-header");
-        const footer = da.get("data-footer");
-        const itemIndex = da.get("data-item-index");
-        const itemPath = da.get("data-item-path");
-        let clickEvent = da.get("data-click-event") || (header
-            ? "headerClick"
-            : (footer ? "footerClick" : "itemClick"));
-        clickEvent = clickEvent.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-        const index = ~~itemIndex;
-        const item = ar.items[index];
-        let nestedItem = null;
-        if (item) {
-            if (itemPath || false) {
-                nestedItem = ItemPath.get(item, itemPath.trim());
-            }
-        }
-        return {
-            recreate,
-            header,
-            footer,
-            itemPath,
-            itemIndex,
-            item,
-            nestedItem,
-            clickEvent,
-            target: e
-        };
-    }
-    set refreshEventScope(v) {
-        this.registerDisposable(v.listen((ce) => {
-            this.refreshItem(ce.detail);
-        }));
-    }
-    get allSelected() {
-        const selectedItems = this.selectedItems;
+    const vp = this.valuePath ?? SameObjectValue;
+    return vp(sp);
+  }
+  set value(v) {
+    this.initialValue = v;
+    if (!this.items || !this.items.length) {
+      AtomBinder.refreshValue(this, "value");
+      return;
+    }
+    const vp = this.valuePath ?? SameObjectValue;
+    const c = this.comparer ?? defaultComparer;
+    const selectedItem = this.items.find(item => c(vp(item), v));
+    this.selectedItem = selectedItem;
+    delete this.initialValue;
+  }
+  get selectedItem() {
+    return this.selectedItems?.[0];
+  }
+  set selectedItem(value) {
+    const si = this.selectedItems ??= [];
+    const first = si[0];
+    if (value === first) {
+      return;
+    }
+    si.set(0, value);
+  }
+  onPropertyChanged(name) {
+    switch (name) {
+      case "items":
+        this.itemsDisposable?.dispose();
         const items = this.items;
-        if (!(items && selectedItems)) {
-            return false;
+        const d = items?.watch((target, type, index, item) => {
+          switch (type) {
+            case "add":
+            case "remove":
+            case "set":
+              this.updatePartial(type, index, item);
+              break;
+            default:
+              this.updateItems();
+              break;
+          }
+          this.dispatchCustomEvent("items-updated", {
+            type,
+            items,
+            index
+          });
+          AtomBinder.refreshValue(this, "selectedItem");
+          AtomBinder.refreshValue(this, "value");
+        });
+        if (d) {
+          this.itemsDisposable = this.registerDisposable(d);
+        }
+        const iv = this.initialValue;
+        if (iv) {
+          this.value = iv;
+        }
+        this.updateItems();
+        this.dispatchCustomEvent("items-updated", {
+          type: "reset",
+          items,
+          index: 0
+        });
+        if (this.scrollToSelection) {
+          this.bringSelectionIntoView();
         }
-        return items.length && items.length === selectedItems.length;
+        break;
+      case "selectedItems":
+        this.selectedItemsDisposable?.dispose();
+        const selectedItems = this.selectedItems;
+        const sd = selectedItems?.watch(() => {
+          this.updateClasses();
+          if (this.scrollToSelection) {
+            this.bringSelectionIntoView();
+          }
+          if (this.selectedItem) {
+            delete this.initialValue;
+          }
+          AtomBinder.refreshValue(this, "selectedItem");
+          AtomBinder.refreshValue(this, "value");
+          AtomBinder.refreshValue(this, "allSelected");
+          this.dispatchCustomEvent("selection-updated", selectedItems);
+        });
+        if (sd) {
+          this.selectedItemsDisposable = this.registerDisposable(sd);
+        }
+        this.updateClasses();
+        this.dispatchCustomEvent("selection-updated", selectedItems);
+        AtomBinder.refreshValue(this, "allSelected");
+        break;
+      case "itemRenderer":
+      case "watch":
+        this.updateItems();
+        break;
+      case "visibilityFilter":
+        this.updateVisibility();
+        break;
+      case "header":
+      case "headerRenderer":
+        this.updateHeaderFooter("header", this.headerPresenter, this.header, this.headerRenderer, true);
+        break;
+      case "footer":
+      case "footerRenderer":
+        this.updateHeaderFooter("footer", this.footerPresenter, this.footer, this.footerRenderer);
+        break;
     }
-    get value() {
-        if (this.initialValue !== undefined) {
-            return this.initialValue;
-        }
-        const sp = this.selectedItem;
-        if (sp === undefined) {
-            return sp;
-        }
-        const vp = this.valuePath ?? SameObjectValue;
-        return vp(sp);
+  }
+  bringSelectionIntoView(force) {
+    if (force) {
+      const selection = this.selectedItem;
+      if (selection) {
+        const element = this.elementForItem(selection);
+        element?.scrollIntoView();
+      }
+      return;
     }
-    set value(v) {
-        this.initialValue = v;
-        if (!this.items || !this.items.length) {
-            AtomBinder.refreshValue(this, "value");
-            return;
-        }
-        const vp = this.valuePath ?? SameObjectValue;
-        const c = this.comparer ?? defaultComparer;
-        const selectedItem = this.items.find((item) => c(vp(item), v));
-        this.selectedItem = selectedItem;
-        delete this.initialValue;
+    if (this.bringIntoViewId) {
+      clearTimeout(this.bringIntoViewId);
     }
-    get selectedItem() {
-        return this.selectedItems?.[0];
+    this.bringIntoViewId = setTimeout(() => {
+      clearTimeout(this.bringIntoViewId);
+      this.bringIntoViewId = undefined;
+      this.bringSelectionIntoView(true);
+    }, 100);
+  }
+  forEach(action, container) {
+    container ??= this.itemsPresenter ?? this.element;
+    const items = this.items;
+    let start = getFirstChild(container);
+    while (start) {
+      const index = start.getAttribute("data-item-index");
+      const item = items[~~index];
+      action(item, start);
+      start = start.nextElementSibling;
     }
-    set selectedItem(value) {
-        const si = this.selectedItems ??= [];
-        const first = si[0];
-        if (value === first) {
-            return;
-        }
-        si.set(0, value);
-    }
-    onPropertyChanged(name) {
-        switch (name) {
-            case "items":
-                this.itemsDisposable?.dispose();
-                const items = this.items;
-                const d = items?.watch((target, type, index, item) => {
-                    switch (type) {
-                        case "add":
-                        case "remove":
-                        case "set":
-                            this.updatePartial(type, index, item);
-                            break;
-                        default:
-                            this.updateItems();
-                            break;
-                    }
-                    this.dispatchCustomEvent("items-updated", { type, items, index });
-                    AtomBinder.refreshValue(this, "selectedItem");
-                    AtomBinder.refreshValue(this, "value");
-                });
-                if (d) {
-                    this.itemsDisposable = this.registerDisposable(d);
-                }
-                const iv = this.initialValue;
-                if (iv) {
-                    this.value = iv;
-                }
-                this.updateItems();
-                this.dispatchCustomEvent("items-updated", { type: "reset", items, index: 0 });
-                if (this.scrollToSelection) {
-                    this.bringSelectionIntoView();
-                }
-                break;
-            case "selectedItems":
-                this.selectedItemsDisposable?.dispose();
-                const selectedItems = this.selectedItems;
-                const sd = selectedItems?.watch(() => {
-                    this.updateClasses();
-                    if (this.scrollToSelection) {
-                        this.bringSelectionIntoView();
-                    }
-                    if (this.selectedItem) {
-                        delete this.initialValue;
-                    }
-                    AtomBinder.refreshValue(this, "selectedItem");
-                    AtomBinder.refreshValue(this, "value");
-                    AtomBinder.refreshValue(this, "allSelected");
-                    this.dispatchCustomEvent("selection-updated", selectedItems);
-                });
-                if (sd) {
-                    this.selectedItemsDisposable = this.registerDisposable(sd);
-                }
-                this.updateClasses();
-                this.dispatchCustomEvent("selection-updated", selectedItems);
-                AtomBinder.refreshValue(this, "allSelected");
-                break;
-            case "itemRenderer":
-            case "watch":
-                this.updateItems();
-                break;
-            case "visibilityFilter":
-                this.updateVisibility();
-                break;
-            case "header":
-            case "headerRenderer":
-                this.updateHeaderFooter("header", this.headerPresenter, this.header, this.headerRenderer, true);
-                break;
-            case "footer":
-            case "footerRenderer":
-                this.updateHeaderFooter("footer", this.footerPresenter, this.footer, this.footerRenderer);
-                break;
-        }
+  }
+  *any(fx, itemSelector, container) {
+    container ??= this.itemsPresenter ?? this.element;
+    const items = this.items;
+    let node = getFirstChild(container);
+    while (node) {
+      const index = node.getAttribute("data-item-index");
+      const item = items[~~index];
+      let element = node;
+      if (itemSelector) {
+        element = element.querySelector(itemSelector);
+      }
+      const ie = {
+        item,
+        element
+      };
+      if (fx) {
+        if (fx(item)) {
+          yield ie;
+        }
+        continue;
+      }
+      yield ie;
+      node = node.nextElementSibling;
     }
-    bringSelectionIntoView(force) {
-        if (force) {
-            const selection = this.selectedItem;
-            if (selection) {
-                const element = this.elementForItem(selection);
-                element?.scrollIntoView();
-            }
-            return;
-        }
-        if (this.bringIntoViewId) {
-            clearTimeout(this.bringIntoViewId);
-        }
-        this.bringIntoViewId = setTimeout(() => {
-            clearTimeout(this.bringIntoViewId);
-            this.bringIntoViewId = undefined;
-            this.bringSelectionIntoView(true);
-        }, 100);
-    }
-    forEach(action, container) {
-        container ??= this.itemsPresenter ?? this.element;
-        const items = this.items;
-        let start = getFirstChild(container);
-        while (start) {
-            const index = start.getAttribute("data-item-index");
-            const item = items[~~index];
-            action(item, start);
-            start = start.nextElementSibling;
-        }
+  }
+  *all(container) {
+    container ??= this.itemsPresenter ?? this.element;
+    const items = this.items;
+    let element = getFirstChild(container);
+    while (element) {
+      const index = element.getAttribute("data-item-index");
+      const item = items[~~index];
+      yield {
+        item,
+        element
+      };
+      element = element.nextElementSibling;
     }
-    *any(fx, itemSelector, container) {
-        container ??= this.itemsPresenter ?? this.element;
-        const items = this.items;
-        let node = getFirstChild(container);
-        while (node) {
-            const index = node.getAttribute("data-item-index");
-            const item = items[~~index];
-            let element = node;
-            if (itemSelector) {
-                element = element.querySelector(itemSelector);
-            }
-            const ie = { item, element };
-            if (fx) {
-                if (fx(item)) {
-                    yield ie;
-                }
-                continue;
-            }
-            yield ie;
-            node = node.nextElementSibling;
-        }
+  }
+  elementAt(index, container) {
+    container ??= this.itemsPresenter ?? this.element;
+    const indexText = index.toString();
+    const element = ChildEnumerator.find(container, e => e.getAttribute("data-item-index") === indexText);
+    return element;
+  }
+  elementForItem(itemToFind, container) {
+    const index = this.items.indexOf(itemToFind);
+    return this.elementAt(index, container);
+  }
+  refreshItem(item, fx, index = -1) {
+    if (index === -1) {
+      index = this.items.indexOf(item);
     }
-    *all(container) {
-        container ??= this.itemsPresenter ?? this.element;
-        const items = this.items;
-        let element = getFirstChild(container);
-        while (element) {
-            const index = element.getAttribute("data-item-index");
-            const item = items[~~index];
-            yield { item, element };
-            element = element.nextElementSibling;
-        }
+    if (fx?.then) {
+      const finalize = v => {
+        this.refreshItem(item, v, index);
+      };
+      fx.then(finalize, finalize);
+      return;
     }
-    elementAt(index, container) {
-        container ??= this.itemsPresenter ?? this.element;
-        const indexText = index.toString();
-        const element = ChildEnumerator.find(container, (e) => e.getAttribute("data-item-index") === indexText);
-        return element;
+    if (fx instanceof MergeNode) {
+      this.mergeItem(index, fx);
+      return;
     }
-    elementForItem(itemToFind, container) {
-        const index = this.items.indexOf(itemToFind);
-        return this.elementAt(index, container);
+    this.updatePartial("set", index, item);
+  }
+  mergeItem(index, m) {
+    const item = this.items[index];
+    if (!item) {
+      return;
     }
-    refreshItem(item, fx, index = -1) {
-        if (index === -1) {
-            index = this.items.indexOf(item);
-        }
-        if (fx?.then) {
-            const finalize = (v) => {
-                this.refreshItem(item, v, index);
-            };
-            fx.then(finalize, finalize);
-            return;
-        }
-        if (fx instanceof MergeNode) {
-            this.mergeItem(index, fx);
-            return;
-        }
-        this.updatePartial("set", index, item);
+    if (m.classes?.[0]?.remove) {
+      this.items.removeAt(index);
+      return;
     }
-    mergeItem(index, m) {
-        const item = this.items[index];
-        if (!item) {
-            return;
-        }
-        if (m.classes?.[0]?.remove) {
-            this.items.removeAt(index);
-            return;
-        }
-        const container = this.itemsPresenter ?? this.element;
-        const node = this.itemRenderer(item, index, this);
-        const sourceElement = document.createElement("div");
-        sourceElement.style.display = "none";
-        container.appendChild(sourceElement);
-        this.render(node, sourceElement);
-        const targetElement = this.elementAt(index);
-        for (const iterator of m.classes) {
-            if (typeof iterator === "string") {
-                const source = sourceElement.querySelectorAll(iterator);
-                const target = targetElement.querySelectorAll(iterator);
-                for (let i = 0; i < source.length && i < target.length; i++) {
-                    const element = source[i];
-                    const te = target[i];
-                    for (const name of te.getAttributeNames()) {
-                        te.removeAttribute(name);
-                    }
-                    te.innerHTML = element.innerHTML;
-                    for (const name of element.getAttributeNames()) {
-                        te.setAttribute(name, element.getAttribute(name));
-                    }
-                }
-                continue;
-            }
-            if (iterator.parent) {
-                const targetParent = /self|\*/.test(iterator.parent)
-                    ? targetElement
-                    : targetElement.querySelector(iterator.parent);
-                if (!targetParent) {
-                    continue;
-                }
-                for (const i of Array.from(targetElement.querySelectorAll(iterator.replace))) {
-                    i.remove();
-                }
-                for (const i of Array.from(sourceElement.querySelectorAll(iterator.replace))) {
-                    targetParent.appendChild(i);
-                }
-                continue;
-            }
-            let targetPrevious = targetElement.querySelector(iterator.after);
-            for (const i of Array.from(targetElement.querySelectorAll(iterator.replace))) {
-                i.remove();
-            }
-            for (const i of Array.from(sourceElement.querySelectorAll(iterator.replace))) {
-                targetPrevious.insertAdjacentElement("afterend", i);
-                targetPrevious = i;
-            }
-        }
-        this.dispose(sourceElement);
-        sourceElement.remove();
+    const container = this.itemsPresenter ?? this.element;
+    const node = this.itemRenderer(item, index, this);
+    const sourceElement = document.createElement("div");
+    sourceElement.style.display = "none";
+    container.appendChild(sourceElement);
+    this.render(node, sourceElement);
+    const targetElement = this.elementAt(index);
+    for (const iterator of m.classes) {
+      if (typeof iterator === "string") {
+        const source = sourceElement.querySelectorAll(iterator);
+        const target = targetElement.querySelectorAll(iterator);
+        for (let i = 0; i < source.length && i < target.length; i++) {
+          const element = source[i];
+          const te = target[i];
+          for (const name of te.getAttributeNames()) {
+            te.removeAttribute(name);
+          }
+          te.innerHTML = element.innerHTML;
+          for (const name of element.getAttributeNames()) {
+            te.setAttribute(name, element.getAttribute(name));
+          }
+        }
+        continue;
+      }
+      if (iterator.parent) {
+        const targetParent = /self|\*/.test(iterator.parent) ? targetElement : targetElement.querySelector(iterator.parent);
+        if (!targetParent) {
+          continue;
+        }
+        for (const i of Array.from(targetElement.querySelectorAll(iterator.replace))) {
+          i.remove();
+        }
+        for (const i of Array.from(sourceElement.querySelectorAll(iterator.replace))) {
+          targetParent.appendChild(i);
+        }
+        continue;
+      }
+      let targetPrevious = targetElement.querySelector(iterator.after);
+      for (const i of Array.from(targetElement.querySelectorAll(iterator.replace))) {
+        i.remove();
+      }
+      for (const i of Array.from(sourceElement.querySelectorAll(iterator.replace))) {
+        targetPrevious.insertAdjacentElement("afterend", i);
+        targetPrevious = i;
+      }
     }
-    updatePartial(key, index, item, container) {
-        const items = this.items;
-        if (!items) {
-            return;
-        }
-        const ir = this.itemRenderer;
-        if (!ir) {
-            return;
-        }
-        container ??= this.itemsPresenter ?? this.element;
-        let start = getFirstChild(container);
-        let ei;
-        while (start) {
-            ei = ~~start.getAttribute("data-item-index");
-            if (ei === index) {
-                break;
-            }
-            start = start.nextElementSibling;
-        }
-        if (key !== "add" && !start) {
-            return;
-        }
-        const vp = this.valuePath ?? ((it) => it);
-        const si = (this.selectedItems ?? []).map(vp);
-        const isRemove = key === "remove";
-        if (isRemove || key === "set") {
-            const current = start;
-            start = start.nextElementSibling;
-            const ac = current.atomControl;
-            if (ac) {
-                ac.dispose();
-            }
-            else {
-                this.unbind(current);
-                this.unbindEvent(current);
-            }
-            current.remove();
-        }
-        const end = this.footerElement?.parentElement === container ? this.footerElement : null;
-        if (!isRemove) {
-            const en = ir(item, index, this);
-            const ea = en.attributes ??= {};
-            const v = vp(item);
-            const e = document.createElement(ea.for ?? en.name ?? "div");
-            e.setAttribute("data-item-index", `${index++}`);
-            if (si.indexOf(v) !== -1) {
-                e.setAttribute("data-selected-item", "true");
-            }
-            else {
-                e.removeAttribute("data-selected-item");
-            }
-            if (this.enableDragDrop) {
-                updateDragDrop(e);
-            }
-            if (start) {
-                container.insertBefore(e, start);
-            }
-            else if (end) {
-                container.insertBefore(e, end);
-            }
-            else {
-                container.appendChild(e);
-            }
-            this.render(en, e, this.creator || this);
-        }
-        while (start) {
-            const ci = items[index];
-            const cv = vp(ci);
-            start.setAttribute("data-item-index", `${index++}`);
-            if (si.indexOf(cv) !== -1) {
-                start.setAttribute("data-selected-item", "true");
-            }
-            else {
-                start.removeAttribute("data-selected-item");
-            }
-            start = start.nextElementSibling;
-            if (start?.hasAttribute("data-footer")) {
-                break;
-            }
-        }
+    this.dispose(sourceElement);
+    sourceElement.remove();
+  }
+  updatePartial(key, index, item, container) {
+    const items = this.items;
+    if (!items) {
+      return;
     }
-    updateItems(container, force) {
-        if (this.deferUpdates && !force) {
-            if (this.deferredUpdateId) {
-                return;
-            }
-            this.deferredUpdateId = setTimeout(() => {
-                this.deferredUpdateId = 0;
-                this.updateItems(container, true);
-            }, 1);
-            return;
-        }
-        container ??= this.itemsPresenter ?? this.element;
-        if (!container) {
-            return;
-        }
-        disposeChildren(this, container);
-        this.onPropertyChanged("header");
-        const ir = this.itemRenderer;
-        if (!ir) {
-            this.onPropertyChanged("footer");
-            return;
-        }
-        const items = this.items;
-        if (!items) {
-            this.onPropertyChanged("footer");
-            return;
-        }
-        const vp = this.valuePath ?? ((it) => it);
-        const si = (this.selectedItems ?? []).map(vp);
-        let i = 0;
-        for (const iterator of items) {
-            const index = i++;
-            const e = ir(iterator, index, this);
-            const ea = e.attributes ??= {};
-            const v = vp(iterator);
-            const element = document.createElement(ea.for ?? e.name ?? "div");
-            element.setAttribute("data-item-index", `${index}`);
-            if (si.indexOf(v) !== -1) {
-                element.setAttribute("data-selected-item", "true");
-            }
-            else {
-                element.removeAttribute("data-selected-item");
-            }
-            this.render(e, element, this.creator || this);
-            if (this.enableDragDrop) {
-                updateDragDrop(element);
-            }
-            container.appendChild(element);
-        }
-        this.onPropertyChanged("footer");
+    const ir = this.itemRenderer;
+    if (!ir) {
+      return;
     }
-    render(node, e, creator) {
-        if (!this.creator && this !== creator) {
-            this.creator = creator;
-        }
-        this.render = super.render;
-        return super.render(node, e, creator);
+    container ??= this.itemsPresenter ?? this.element;
+    let start = getFirstChild(container);
+    let ei;
+    while (start) {
+      ei = ~~start.getAttribute("data-item-index");
+      if (ei === index) {
+        break;
+      }
+      start = start.nextElementSibling;
     }
-    preCreate() {
-        this.orderBy = null;
-        this.mergeOnRefresh = false;
-        this.selectOnClick = false;
-        this.element.setAttribute("data-click-event", "item-click");
+    if (key !== "add" && !start) {
+      return;
     }
-    dispatchCustomEvent(type, detail) {
-        if (!this.element) {
-            return;
-        }
-        const eventName = this.element.getAttribute("data-" + type + "-event");
-        type = StringHelper.fromHyphenToCamel(eventName ?? type);
-        this.element.dispatchEvent(new CustomEvent(type, {
-            detail,
-            bubbles: eventName !== null,
-            cancelable: true
-        }));
-    }
-    updateClasses() {
-        const container = this.itemsPresenter ?? this.element;
-        const items = this.items;
-        let element = getFirstChild(container);
-        const vp = this.valuePath ?? ((i) => i);
-        const si = (this.selectedItems ?? []).map(vp);
-        while (element) {
-            const index = ~~element.getAttribute("data-item-index");
-            const item = items[index];
-            const v = vp(item);
-            if (si.indexOf(v) !== -1) {
-                element.setAttribute("data-selected-item", "true");
-            }
-            else {
-                element.removeAttribute("data-selected-item");
-            }
-            element = element.nextElementSibling;
-        }
+    const vp = this.valuePath ?? (it => it);
+    const si = (this.selectedItems ?? []).map(vp);
+    const isRemove = key === "remove";
+    if (isRemove || key === "set") {
+      const current = start;
+      start = start.nextElementSibling;
+      const ac = current.atomControl;
+      if (ac) {
+        ac.dispose();
+      } else {
+        this.unbind(current);
+        this.unbindEvent(current);
+      }
+      current.remove();
     }
-    updateVisibility() {
-        const container = this.itemsPresenter ?? this.element;
-        const items = this.items;
-        let element = container.firstElementChild;
-        const vf = this.visibilityFilter ?? MatchTrue;
-        while (element) {
-            const index = ~~element.getAttribute("data-item-index");
-            const item = items[index];
-            if (vf(item)) {
-                element.removeAttribute("data-ui-display");
-            }
-            else {
-                element.setAttribute("data-ui-display", "none");
-            }
-            element = element.nextElementSibling;
-        }
+    const end = this.footerElement?.parentElement === container ? this.footerElement : null;
+    if (!isRemove) {
+      const en = ir(item, index, this);
+      const ea = en.attributes ??= {};
+      const v = vp(item);
+      const e = document.createElement(ea.for ?? en.name ?? "div");
+      e.setAttribute("data-item-index", `${index++}`);
+      if (si.indexOf(v) !== -1) {
+        e.setAttribute("data-selected-item", "true");
+      } else {
+        e.removeAttribute("data-selected-item");
+      }
+      if (this.enableDragDrop) {
+        updateDragDrop(e);
+      }
+      if (start) {
+        container.insertBefore(e, start);
+      } else if (end) {
+        container.insertBefore(e, end);
+      } else {
+        container.appendChild(e);
+      }
+      this.render(en, e, this.creator || this);
     }
-    updateHeaderFooter(name, presenter, item, itemRenderer, insert) {
-        presenter ??= this.itemsPresenter ??= this.element;
-        if (!presenter) {
-            this[name + "Element"] = null;
-            return;
-        }
-        let current;
-        if (insert) {
-            current = presenter.firstElementChild;
-            while (current && current.dataset[name] !== name) {
-                current = current.nextElementSibling;
-            }
-        }
-        else {
-            current = presenter.lastElementChild;
-            while (current && current.dataset[name] !== name) {
-                current = current.previousElementSibling;
-            }
-        }
-        if (current) {
-            disposeChild(this, current);
-            this[name + "Element"] = null;
-        }
-        if (!(item && itemRenderer)) {
-            return;
-        }
-        const node = itemRenderer(item);
-        const element = document.createElement(node.attributes?.for ?? node.name ?? "div");
-        element.dataset[name] = name;
-        this.render(node, element, this.creator || this);
-        if (insert) {
-            presenter.insertBefore(element, presenter.firstElementChild);
-        }
-        else {
-            presenter.appendChild(element);
-        }
-        this[name + "Element"] = element;
-    }
-    dispatchHeaderFooterEvent(eventName, type, recreate, originalTarget) {
-        const detail = this[type];
-        const ce = new CustomEvent(eventName ?? `${type}Click`, {
-            detail,
-            bubbles: this.bubbleEvents,
-            cancelable: true
-        });
-        originalTarget.dispatchEvent(ce);
-        if (ce.defaultPrevented || !ce.executed) {
-            return;
-        }
-        if (recreate) {
-            this.onPropertyChanged(type);
-        }
+    while (start) {
+      const ci = items[index];
+      const cv = vp(ci);
+      start.setAttribute("data-item-index", `${index++}`);
+      if (si.indexOf(cv) !== -1) {
+        start.setAttribute("data-selected-item", "true");
+      } else {
+        start.removeAttribute("data-selected-item");
+      }
+      start = start.nextElementSibling;
+      if (start?.hasAttribute("data-footer")) {
+        break;
+      }
     }
-    dispatchItemEvent(eventName, item, recreate, originalTarget, nestedItem) {
-        const ce = new CustomEvent(eventName ?? "itemClick", {
-            detail: nestedItem ?? item,
-            bubbles: this.bubbleEvents,
-            cancelable: true
-        });
-        originalTarget.dispatchEvent(ce);
-        if (!ce.defaultPrevented) {
-            if (this.selectOnClick || eventName === "itemSelect" || eventName === "itemDeselect") {
-                const si = this.selectedItems ??= [];
-                if (si) {
-                    const index = si.indexOf(item);
-                    if (index === -1) {
-                        if (this.allowMultipleSelection) {
-                            si.add(item);
-                        }
-                        else {
-                            si.set(0, item);
-                        }
-                    }
-                    else {
-                        si.removeAt(index);
-                    }
-                }
-            }
-        }
-        if (ce.defaultPrevented || !ce.executed) {
-            return;
-        }
-        const promise = ce.promise;
-        if (recreate) {
-            this.refreshItem(item, promise);
-            return;
-        }
-        if (promise) {
-            promise.then((r) => r instanceof MergeNode && this.refreshItem(item, r));
-        }
+  }
+  updateItems(container, force) {
+    if (this.deferUpdates && !force) {
+      if (this.deferredUpdateId) {
+        return;
+      }
+      this.deferredUpdateId = setTimeout(() => {
+        this.deferredUpdateId = 0;
+        this.updateItems(container, true);
+      }, 1);
+      return;
+    }
+    container ??= this.itemsPresenter ?? this.element;
+    if (!container) {
+      return;
+    }
+    disposeChildren(this, container);
+    this.onPropertyChanged("header");
+    const ir = this.itemRenderer;
+    if (!ir) {
+      this.onPropertyChanged("footer");
+      return;
+    }
+    const items = this.items;
+    if (!items) {
+      this.onPropertyChanged("footer");
+      return;
+    }
+    const vp = this.valuePath ?? (it => it);
+    const si = (this.selectedItems ?? []).map(vp);
+    let i = 0;
+    for (const iterator of items) {
+      const index = i++;
+      const e = ir(iterator, index, this);
+      const ea = e.attributes ??= {};
+      const v = vp(iterator);
+      const element = document.createElement(ea.for ?? e.name ?? "div");
+      element.setAttribute("data-item-index", `${index}`);
+      if (si.indexOf(v) !== -1) {
+        element.setAttribute("data-selected-item", "true");
+      } else {
+        element.removeAttribute("data-selected-item");
+      }
+      this.render(e, element, this.creator || this);
+      if (this.enableDragDrop) {
+        updateDragDrop(element);
+      }
+      container.appendChild(element);
+    }
+    this.onPropertyChanged("footer");
+  }
+  render(node, e, creator) {
+    if (!this.creator && this !== creator) {
+      this.creator = creator;
+    }
+    this.render = super.render;
+    return super.render(node, e, creator);
+  }
+  preCreate() {
+    this.orderBy = null;
+    this.mergeOnRefresh = false;
+    this.selectOnClick = false;
+    this.element.setAttribute("data-click-event", "item-click");
+  }
+  dispatchCustomEvent(type, detail) {
+    if (!this.element) {
+      return;
+    }
+    const eventName = this.element.getAttribute("data-" + type + "-event");
+    type = StringHelper.fromHyphenToCamel(eventName ?? type);
+    this.element.dispatchEvent(new CustomEvent(type, {
+      detail,
+      bubbles: eventName !== null,
+      cancelable: true
+    }));
+  }
+  updateClasses() {
+    const container = this.itemsPresenter ?? this.element;
+    const items = this.items;
+    let element = getFirstChild(container);
+    const vp = this.valuePath ?? (i => i);
+    const si = (this.selectedItems ?? []).map(vp);
+    while (element) {
+      const index = ~~element.getAttribute("data-item-index");
+      const item = items[index];
+      const v = vp(item);
+      if (si.indexOf(v) !== -1) {
+        element.setAttribute("data-selected-item", "true");
+      } else {
+        element.removeAttribute("data-selected-item");
+      }
+      element = element.nextElementSibling;
+    }
+  }
+  updateVisibility() {
+    const container = this.itemsPresenter ?? this.element;
+    const items = this.items;
+    let element = container.firstElementChild;
+    const vf = this.visibilityFilter ?? MatchTrue;
+    while (element) {
+      const index = ~~element.getAttribute("data-item-index");
+      const item = items[index];
+      if (vf(item)) {
+        element.removeAttribute("data-ui-display");
+      } else {
+        element.setAttribute("data-ui-display", "none");
+      }
+      element = element.nextElementSibling;
+    }
+  }
+  updateHeaderFooter(name, presenter, item, itemRenderer, insert) {
+    presenter ??= this.itemsPresenter ??= this.element;
+    if (!presenter) {
+      this[name + "Element"] = null;
+      return;
+    }
+    let current;
+    if (insert) {
+      current = presenter.firstElementChild;
+      while (current && current.dataset[name] !== name) {
+        current = current.nextElementSibling;
+      }
+    } else {
+      current = presenter.lastElementChild;
+      while (current && current.dataset[name] !== name) {
+        current = current.previousElementSibling;
+      }
     }
-    dispatchClickEvent(e, data) {
-        const { recreate, header, footer, itemIndex, itemPath, clickEvent, item, nestedItem } = AtomRepeater.itemFromElement(e.target, this);
-        if (itemIndex !== void 0) {
-            if (item) {
-                if (nestedItem) {
-                    this.dispatchItemEvent(clickEvent, item, recreate, e.target, nestedItem);
-                    return;
-                }
-                this.dispatchItemEvent(clickEvent, item, recreate, e.target);
+    if (current) {
+      disposeChild(this, current);
+      this[name + "Element"] = null;
+    }
+    if (!(item && itemRenderer)) {
+      return;
+    }
+    const node = itemRenderer(item);
+    const element = document.createElement(node.attributes?.for ?? node.name ?? "div");
+    element.dataset[name] = name;
+    this.render(node, element, this.creator || this);
+    if (insert) {
+      presenter.insertBefore(element, presenter.firstElementChild);
+    } else {
+      presenter.appendChild(element);
+    }
+    this[name + "Element"] = element;
+  }
+  dispatchHeaderFooterEvent(eventName, type, recreate, originalTarget) {
+    const detail = this[type];
+    const ce = new CustomEvent(eventName ?? `${type}Click`, {
+      detail,
+      bubbles: this.bubbleEvents,
+      cancelable: true
+    });
+    originalTarget.dispatchEvent(ce);
+    if (ce.defaultPrevented || !ce.executed) {
+      return;
+    }
+    if (recreate) {
+      this.onPropertyChanged(type);
+    }
+  }
+  dispatchItemEvent(eventName, item, recreate, originalTarget, nestedItem) {
+    const ce = new CustomEvent(eventName ?? "itemClick", {
+      detail: nestedItem ?? item,
+      bubbles: this.bubbleEvents,
+      cancelable: true
+    });
+    originalTarget.dispatchEvent(ce);
+    if (!ce.defaultPrevented) {
+      if (this.selectOnClick || eventName === "itemSelect" || eventName === "itemDeselect") {
+        const si = this.selectedItems ??= [];
+        if (si) {
+          const index = si.indexOf(item);
+          if (index === -1) {
+            if (this.allowMultipleSelection) {
+              si.add(item);
+            } else {
+              si.set(0, item);
             }
-            return;
-        }
-        if (header) {
-            this.dispatchHeaderFooterEvent(clickEvent, header, recreate, e.target);
-        }
-        if (footer) {
-            this.dispatchHeaderFooterEvent(clickEvent, footer, recreate, e.target);
+          } else {
+            si.removeAt(index);
+          }
         }
+      }
+    }
+    if (ce.defaultPrevented || !ce.executed) {
+      return;
+    }
+    const promise = ce.promise;
+    if (recreate) {
+      this.refreshItem(item, promise);
+      return;
+    }
+    if (promise) {
+      promise.then(r => r instanceof MergeNode && this.refreshItem(item, r));
+    }
+  }
+  dispatchClickEvent(e, data) {
+    const {
+      recreate,
+      header,
+      footer,
+      itemIndex,
+      itemPath,
+      clickEvent,
+      item,
+      nestedItem
+    } = AtomRepeater.itemFromElement(e.target, this);
+    if (itemIndex !== void 0) {
+      if (item) {
+        if (nestedItem) {
+          this.dispatchItemEvent(clickEvent, item, recreate, e.target, nestedItem);
+          return;
+        }
+        this.dispatchItemEvent(clickEvent, item, recreate, e.target);
+      }
+      return;
+    }
+    if (header) {
+      this.dispatchHeaderFooterEvent(clickEvent, header, recreate, e.target);
     }
+    if (footer) {
+      this.dispatchHeaderFooterEvent(clickEvent, footer, recreate, e.target);
+    }
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Boolean)
-], AtomRepeater.prototype, "allowMultipleSelection", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "selectOnClick", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], AtomRepeater.prototype, "selectedItems", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "itemsPresenter", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], AtomRepeater.prototype, "items", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "watch", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomRepeater.prototype, "visibilityFilter", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomRepeater.prototype, "enableFunc", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomRepeater.prototype, "itemRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomRepeater.prototype, "valuePath", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], AtomRepeater.prototype, "comparer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Boolean)
-], AtomRepeater.prototype, "deferUpdates", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "header", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "headerRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "footer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "footerRenderer", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "enableDragDrop", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], AtomRepeater.prototype, "orderBy", void 0);
-__decorate([
-    WatchProperty,
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [])
-], AtomRepeater.prototype, "allSelected", null);
+__decorate([BindableProperty, __metadata("design:type", Boolean)], AtomRepeater.prototype, "allowMultipleSelection", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "selectOnClick", void 0);
+__decorate([BindableProperty, __metadata("design:type", Array)], AtomRepeater.prototype, "selectedItems", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "itemsPresenter", void 0);
+__decorate([BindableProperty, __metadata("design:type", Array)], AtomRepeater.prototype, "items", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "watch", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomRepeater.prototype, "visibilityFilter", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomRepeater.prototype, "enableFunc", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomRepeater.prototype, "itemRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomRepeater.prototype, "valuePath", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], AtomRepeater.prototype, "comparer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Boolean)], AtomRepeater.prototype, "deferUpdates", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "header", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "headerRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "footer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "footerRenderer", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "enableDragDrop", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], AtomRepeater.prototype, "orderBy", void 0);
+__decorate([WatchProperty, __metadata("design:type", Object), __metadata("design:paramtypes", [])], AtomRepeater.prototype, "allSelected", null);
 let hoverItem = {
-    repeater: null,
-    target: null,
-    item: null,
-    placeholder: null
+  repeater: null,
+  target: null,
+  item: null,
+  placeholder: null
 };
-document.body.addEventListener("dragstart", (e) => {
-    const { target } = e;
-    if (target.draggable) {
-        const ri = getParentRepeaterItem(target);
-        if (!ri) {
-            return;
-        }
-        const [type, repeater, item, index] = ri;
-        if (!repeater || !repeater.enableDragDrop) {
-            return;
-        }
-        const placeholder = document.createElement("div");
-        placeholder.style.width = target.offsetWidth + "px";
-        placeholder.style.height = target.offsetHeight + "px";
-        placeholder.style.backgroundColor = Colors.lightGray.toString();
-        placeholder.style.border = "solid 1px gray";
-        placeholder.style.borderRadius = "10px";
-        hoverItem = {
-            repeater,
-            target,
-            item,
-            placeholder,
-        };
-        e.dataTransfer.dropEffect = "move";
-        setTimeout(() => {
-            target.style.display = "none";
-            target.parentElement.insertBefore(placeholder, target);
-        }, 0);
+document.body.addEventListener("dragstart", e => {
+  const {
+    target
+  } = e;
+  if (target.draggable) {
+    const ri = getParentRepeaterItem(target);
+    if (!ri) {
+      return;
+    }
+    const [type, repeater, item, index] = ri;
+    if (!repeater || !repeater.enableDragDrop) {
+      return;
     }
+    const placeholder = document.createElement("div");
+    placeholder.style.width = target.offsetWidth + "px";
+    placeholder.style.height = target.offsetHeight + "px";
+    placeholder.style.backgroundColor = Colors.lightGray.toString();
+    placeholder.style.border = "solid 1px gray";
+    placeholder.style.borderRadius = "10px";
+    hoverItem = {
+      repeater,
+      target,
+      item,
+      placeholder
+    };
+    e.dataTransfer.dropEffect = "move";
+    setTimeout(() => {
+      target.style.display = "none";
+      target.parentElement.insertBefore(placeholder, target);
+    }, 0);
+  }
 });
-document.body.addEventListener("dragend", (e) => {
-    if (!(hoverItem?.placeholder)) {
-        return;
+document.body.addEventListener("dragend", e => {
+  if (!hoverItem?.placeholder) {
+    return;
+  }
+  const {
+    item,
+    placeholder,
+    repeater
+  } = hoverItem;
+  let start = placeholder;
+  let index = -1;
+  while (start) {
+    const itemIndex = start.previousElementSibling?.dataset?.itemIndex;
+    if (itemIndex !== void 0) {
+      index = ~~itemIndex;
     }
-    const { item, placeholder, repeater } = hoverItem;
-    let start = placeholder;
-    let index = -1;
-    while (start) {
-        const itemIndex = start.previousElementSibling?.dataset?.itemIndex;
-        if (itemIndex !== void 0) {
-            index = ~~itemIndex;
-        }
-        if (start.parentElement.atomControl) {
-            break;
-        }
-        start = start.parentElement;
-    }
-    const targetRepeater = start.parentElement.atomControl;
-    placeholder.remove();
-    hoverItem.placeholder = null;
-    repeater.items.remove(item);
-    index++;
-    const ce = new CustomEvent("itemDropped", { detail: { item, index } });
-    if (ce.defaultPrevented) {
-        return;
+    if (start.parentElement.atomControl) {
+      break;
     }
-    const { detail } = ce;
-    targetRepeater.items.insert(detail.index, detail.item);
-});
-const dragOver = (e) => {
-    if (!e.dataTransfer) {
-        return;
+    start = start.parentElement;
+  }
+  const targetRepeater = start.parentElement.atomControl;
+  placeholder.remove();
+  hoverItem.placeholder = null;
+  repeater.items.remove(item);
+  index++;
+  const ce = new CustomEvent("itemDropped", {
+    detail: {
+      item,
+      index
     }
-    if (hoverItem) {
-        const { placeholder } = hoverItem;
-        if (!placeholder) {
-            return;
-        }
-        if (e.target === placeholder) {
-            return;
-        }
+  });
+  if (ce.defaultPrevented) {
+    return;
+  }
+  const {
+    detail
+  } = ce;
+  targetRepeater.items.insert(detail.index, detail.item);
+});
+const dragOver = e => {
+  if (!e.dataTransfer) {
+    return;
+  }
+  if (hoverItem) {
+    const {
+      placeholder
+    } = hoverItem;
+    if (!placeholder) {
+      return;
     }
-    const ri = getParentRepeaterItem(e.target);
-    if (!ri) {
-        return;
+    if (e.target === placeholder) {
+      return;
     }
-    const [type, repeater, item, index, target] = ri;
-    if (!repeater) {
+  }
+  const ri = getParentRepeaterItem(e.target);
+  if (!ri) {
+    return;
+  }
+  const [type, repeater, item, index, target] = ri;
+  if (!repeater) {
+    return;
+  }
+  if (hoverItem) {
+    const {
+      placeholder
+    } = hoverItem;
+    e.preventDefault();
+    const mp = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    const isBefore = (co, n) => n.x <= co.x + co.width * 0.3 || n.y <= co.y + co.height * 0.3;
+    const isAfter = (co, n) => n.x >= co.x + co.width * 0.7 || n.y >= co.y + co.height * 0.7;
+    const targetBounds = target.getBoundingClientRect();
+    if (isAfter(targetBounds, mp)) {
+      const next = target.nextElementSibling;
+      if (next === placeholder) {
         return;
+      }
+      placeholder.remove();
+      target.insertAdjacentElement("afterend", placeholder);
+      return;
     }
-    if (hoverItem) {
-        const { placeholder } = hoverItem;
-        e.preventDefault();
-        const mp = { x: e.clientX, y: e.clientY };
-        const isBefore = (co, n) => n.x <= (co.x + (co.width * 0.3)) || n.y <= (co.y + (co.height * 0.3));
-        const isAfter = (co, n) => n.x >= (co.x + (co.width * 0.7)) || n.y >= (co.y + (co.height * 0.7));
-        const targetBounds = target.getBoundingClientRect();
-        if (isAfter(targetBounds, mp)) {
-            const next = target.nextElementSibling;
-            if (next === placeholder) {
-                return;
-            }
-            placeholder.remove();
-            target.insertAdjacentElement("afterend", placeholder);
-            return;
-        }
-        if (isBefore(targetBounds, mp)) {
-            const previous = target.previousElementSibling;
-            if (previous === placeholder) {
-                return;
-            }
-            placeholder.remove();
-            target.insertAdjacentElement("beforebegin", placeholder);
-        }
+    if (isBefore(targetBounds, mp)) {
+      const previous = target.previousElementSibling;
+      if (previous === placeholder) {
         return;
+      }
+      placeholder.remove();
+      target.insertAdjacentElement("beforebegin", placeholder);
     }
+    return;
+  }
 };
 document.body.addEventListener("dragover", dragOver);
-document.body.addEventListener("dragenter", dragOver);
-//# sourceMappingURL=AtomRepeater.js.map
+document.body.addEventListener("dragenter", dragOver);