@web-atoms/web-controls 2.5.42 → 2.5.61

package/dist-esm/basic/AtomRepeater.js

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