@web-atoms/web-controls 2.5.39 → 2.5.41

package/dist-esm/basic/AtomRepeater.js

@@ -0,0 +1,1165 @@
+import { __decorate, __metadata } from "tslib";
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder.js";
+import Bind from "@web-atoms/core/dist/core/Bind.js";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
+import Colors from "@web-atoms/core/dist/core/Colors.js";
+import { StringHelper } from "@web-atoms/core/dist/core/StringHelper.js";
+import WatchProperty from "@web-atoms/core/dist/core/WatchProperty.js";
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+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";
+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;
+    }
+    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 MatchCaseInsensitive = (textField = ArrowToString) => {
+    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));
+    };
+};
+export const SameObjectValue = (item) => item;
+export function askSuggestion(items, itemRenderer, match, options) {
+    class Suggestions extends PopupWindow {
+        search;
+        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%";
+        }
+    }
+    return Suggestions.showModal(options);
+}
+export function askSuggestionPopup(opener, items, itemRenderer, match, selectedItem) {
+    const itemsInOpener = "items" in opener;
+    class Suggestions extends AtomPopover {
+        anchorItem = null;
+        anchorIndex = null;
+        repeater;
+        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;
+            }
+        }
+    }
+    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 {
+    items;
+    selectedItems;
+    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;
+            }
+            if (!items) {
+                return;
+            }
+            if (items.length === 0) {
+                return;
+            }
+            if (items.length === si.length) {
+                si.clear();
+            }
+            else {
+                si.length = 0;
+                si.push(...items);
+                si.refresh();
+            }
+        });
+    }
+}
+__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();
+            continue;
+        }
+        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;
+        }
+    }
+    return left === right;
+}
+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 (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 {
+    static from(element) {
+        while (element) {
+            const { atomControl } = element;
+            if (atomControl instanceof AtomRepeater) {
+                return atomControl;
+            }
+            element = element.parentElement;
+        }
+    }
+    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
+        };
+    }
+    "event-item-click";
+    "event-item-select";
+    "event-item-deselect";
+    "data-items-updated-event";
+    "data-selection-updated-event";
+    "event-items-updated";
+    "event-selection-updated";
+    bubbleEvents = true;
+    allowMultipleSelection;
+    selectOnClick;
+    selectedItems;
+    itemsPresenter;
+    items;
+    watch;
+    visibilityFilter;
+    enableFunc;
+    itemRenderer;
+    valuePath;
+    comparer;
+    deferUpdates;
+    header;
+    headerRenderer;
+    footer;
+    footerRenderer;
+    enableDragDrop;
+    orderBy;
+    itemTag;
+    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;
+        }
+        return items.length && items.length === selectedItems.length;
+    }
+    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);
+    }
+    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);
+    }
+    scrollToSelection;
+    mergeOnRefresh;
+    footerPresenter;
+    headerPresenter;
+    footerElement;
+    headerElement;
+    initialValue;
+    itemsDisposable;
+    selectedItemsDisposable;
+    deferredUpdateId;
+    bringIntoViewId;
+    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;
+        }
+    }
+    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;
+        }
+    }
+    *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;
+        }
+    }
+    *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;
+        }
+    }
+    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);
+        }
+        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);
+    }
+    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();
+    }
+    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;
+            }
+        }
+    }
+    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;
+            }
+        }
+        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);
+                        }
+                    }
+                    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);
+let hoverItem = {
+    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("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;
+        }
+        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;
+    }
+    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;
+        }
+        if (e.target === placeholder) {
+            return;
+        }
+    }
+    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 (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