@web-atoms/web-controls 2.2.0 → 2.2.2

package/dist/basic/AtomRepeater.js

@@ -1,1158 +1,1117 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
+System.register(["@web-atoms/core/dist/core/AtomBinder", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/StringHelper", "@web-atoms/core/dist/core/WatchProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/core/dist/web/styles/CSS", "./InlinePopup"], function (_export, _context) {
+  "use strict";
+
+  var AtomBinder, Bind, BindableProperty, Colors, StringHelper, WatchProperty, XNode, StyleRule, AtomControl, PopupWindow, CSS, InlinePopup, SelectAllControl, AtomRepeater, __decorate, __metadata, __rest, popupCSS, getParentRepeaterItem, MatchTrue, MatchFalse, ArrowToString, MatchCaseInsensitive, MatchAnyCaseInsensitive, SameObjectValue, maxHeight, getFirstChild, hoverItem, dragOver;
+  function askSuggestion(items, itemRenderer, match, options) {
+    class Suggestions extends PopupWindow {
+      create() {
+        var _a;
+        this.title = (_a = options === null || options === void 0 ? void 0 : options.title) !== null && _a !== void 0 ? _a : "Select";
+        this.render(XNode.create("div", {
+          class: popupCSS
+        }, 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
+        }))));
+      }
     }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@web-atoms/core/dist/core/AtomBinder", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/StringHelper", "@web-atoms/core/dist/core/WatchProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/core/dist/web/styles/CSS", "./InlinePopup"], factory);
+    __decorate([BindableProperty, __metadata("design:type", String)], Suggestions.prototype, "search", void 0);
+    options !== null && options !== void 0 ? options : 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%";
+      }
     }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.defaultComparer = exports.disposeChild = exports.disposeChildren = exports.SelectAll = exports.SelectorCheckBox = exports.askSuggestionPopup = exports.askSuggestion = exports.SameObjectValue = exports.MatchAnyCaseInsensitive = exports.MatchCaseInsensitive = exports.ArrowToString = exports.MatchFalse = exports.MatchTrue = exports.getParentRepeaterItem = void 0;
-    const AtomBinder_1 = require("@web-atoms/core/dist/core/AtomBinder");
-    const Bind_1 = require("@web-atoms/core/dist/core/Bind");
-    const BindableProperty_1 = require("@web-atoms/core/dist/core/BindableProperty");
-    const Colors_1 = require("@web-atoms/core/dist/core/Colors");
-    const StringHelper_1 = require("@web-atoms/core/dist/core/StringHelper");
-    const WatchProperty_1 = require("@web-atoms/core/dist/core/WatchProperty");
-    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
-    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
-    const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
-    const PopupService_1 = require("@web-atoms/core/dist/web/services/PopupService");
-    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
-    const InlinePopup_1 = require("./InlinePopup");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .display("none"), "[data-ui-display=none]");
-    const popupCSS = (0, CSS_1.default)((0, StyleRule_1.default)()
-        // .minHeight(300)
-        .minWidth(200)
-        .verticalFlexLayout({ alignItems: "stretch" })
-        .child((0, StyleRule_1.default)(".items")
-        .flexStretch()
-        .overflow("auto")
-        .child((0, StyleRule_1.default)(".presenter")
-        .child((0, StyleRule_1.default)("*")
-        .padding(5))
-        .child((0, StyleRule_1.default)("[data-selected-item=true]")
-        .backgroundColor(Colors_1.default.lightGreen)))));
-    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.dataset.itemIndex;
-                if (typeof itemIndex !== "undefined") {
-                    root = target;
-                    // tslint:disable-next-line: no-bitwise
-                    index = ~~itemIndex;
-                }
-            }
-            if (eventName === undefined) {
-                const itemClickEvent = target.dataset.clickEvent;
-                if (itemClickEvent) {
-                    eventName = itemClickEvent.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-                }
-            }
-            target = target.parentElement;
+    return Suggestions.showModal(options);
+  }
+  function askSuggestionPopup(opener, items, itemRenderer, match, selectedItem) {
+    const updateSearch = ("search" in opener);
+    const itemsInOpener = ("items" in opener);
+    class Suggestions extends InlinePopup {
+      get items() {
+        return itemsInOpener ? this.opener.items : items;
+      }
+      onPropertyChanged(name) {
+        if (updateSearch && name === "search") {
+          opener.search = this.search;
         }
-        if (index === void 0 || repeater === void 0) {
-            return undefined;
+        super.onPropertyChanged(name);
+      }
+      create() {
+        this.anchorItem = selectedItem;
+        this.opener = opener;
+        if (this.opener.search) {
+          this.search = this.opener.search;
         }
-        // tslint:disable-next-line: no-bitwise
-        const item = repeater.items[~~index];
-        return [eventName, repeater, item, index, root];
-    };
-    exports.getParentRepeaterItem = getParentRepeaterItem;
-    const MatchTrue = (...a) => true;
-    exports.MatchTrue = MatchTrue;
-    const MatchFalse = (...a) => false;
-    exports.MatchFalse = MatchFalse;
-    const ArrowToString = (item) => { var _a, _b; return (_b = (_a = item.label) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : item.toString(); };
-    exports.ArrowToString = ArrowToString;
-    const MatchCaseInsensitive = (textField = exports.ArrowToString) => {
-        return (s) => {
-            if (!s) {
-                return exports.MatchTrue;
-            }
-            const r = StringHelper_1.StringHelper.createContainsRegExp(s);
-            return (item) => r.test(textField(item));
-        };
-    };
-    exports.MatchCaseInsensitive = MatchCaseInsensitive;
-    const MatchAnyCaseInsensitive = (textField = exports.ArrowToString) => {
-        return (s) => {
-            if (!s) {
-                return exports.MatchTrue;
-            }
-            const r = StringHelper_1.StringHelper.createContainsAnyWordRegExp(s);
-            return (item) => r.test(textField(item));
-        };
-    };
-    exports.MatchAnyCaseInsensitive = MatchAnyCaseInsensitive;
-    const SameObjectValue = (item) => item;
-    exports.SameObjectValue = SameObjectValue;
-    /**
-     * Asks user for selecting item from given suggestions
-     * @param items items to display
-     * @param itemRenderer render function
-     * @param match search match
-     * @returns selected item
-     */
-    function askSuggestion(items, itemRenderer, match, options) {
-        class Suggestions extends PopupService_1.PopupWindow {
-            create() {
-                var _a;
-                this.title = (_a = options === null || options === void 0 ? void 0 : options.title) !== null && _a !== void 0 ? _a : "Select";
-                this.render(XNode_1.default.create("div", { class: popupCSS },
-                    XNode_1.default.create("input", { type: "search", value: Bind_1.default.twoWaysImmediate(() => this.search), autofocus: true }),
-                    XNode_1.default.create("div", { class: "items" },
-                        XNode_1.default.create(AtomRepeater, { class: "presenter", itemRenderer: itemRenderer, visibilityFilter: Bind_1.default.oneWay(() => match(this.search)), eventItemClick: (e) => {
-                                this.close(e.detail);
-                            }, items: items }))));
-            }
+        if (selectedItem) {
+          this.anchorIndex = items.indexOf(selectedItem);
         }
-        __decorate([
-            BindableProperty_1.BindableProperty,
-            __metadata("design:type", String)
-        ], Suggestions.prototype, "search", void 0);
-        options !== null && options !== void 0 ? options : (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%";
-            }
+        const disableSearch = opener.disableSearch;
+        if (itemsInOpener) {
+          this.render(XNode.create("div", {
+            "data-suggestion-popup": "suggestion-popup"
+          }, !disableSearch && XNode.create("input", {
+            type: "search",
+            value: Bind.twoWaysImmediate(() => this.search),
+            eventKeydown: e => this.onKey(e),
+            autofocus: true
+          }), XNode.create("div", {
+            class: "items"
+          }, XNode.create(AtomRepeater, {
+            class: "presenter",
+            selectedItem: Bind.oneWay(() => this.anchorItem),
+            itemRenderer: itemRenderer,
+            visibilityFilter: Bind.oneWay(() => match(this.search)),
+            eventItemClick: e => {
+              this.anchorItem = e.detail;
+              setTimeout(() => this.close(e.detail), 100);
+            },
+            items: Bind.oneWay(() => this.opener.items)
+          }))));
+          return;
         }
-        return Suggestions.showModal(options);
-    }
-    exports.askSuggestion = askSuggestion;
-    const maxHeight = (window.screen.availHeight / 2) > 250
-        ? (0, StyleRule_1.default)().height("250px")
-        : (0, StyleRule_1.default)().maxHeight(80);
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .merge(maxHeight)
-        .minWidth(80)
-        .verticalFlexLayout({ alignItems: "stretch" })
-        .child((0, StyleRule_1.default)(".items")
-        .flexStretch()
-        .overflow("auto")
-        .child((0, StyleRule_1.default)(".presenter")
-        .child((0, StyleRule_1.default)("*")
-        .padding(5))
-        .child((0, StyleRule_1.default)("[data-selected-item=true]")
-        .backgroundColor(Colors_1.default.lightGreen)))), "*[data-suggestion-popup=suggestion-popup]");
-    /**
-     * Asks user for selecting item from given suggestions
-     * @param items items to display
-     * @param itemRenderer render function
-     * @param match search match
-     * @returns selected item
-     */
-    function askSuggestionPopup(opener, items, itemRenderer, match, selectedItem) {
-        const updateSearch = "search" in opener;
-        const itemsInOpener = "items" in opener;
-        class Suggestions extends InlinePopup_1.default {
-            get items() {
-                return itemsInOpener ? this.opener.items : items;
-            }
-            onPropertyChanged(name) {
-                if (updateSearch && name === "search") {
-                    opener.search = this.search;
-                }
-                super.onPropertyChanged(name);
-            }
-            create() {
-                this.anchorItem = selectedItem;
-                this.opener = opener;
-                if (this.opener.search) {
-                    this.search = this.opener.search;
-                }
-                if (selectedItem) {
-                    this.anchorIndex = items.indexOf(selectedItem);
-                }
-                const disableSearch = opener.disableSearch;
-                if (itemsInOpener) {
-                    this.render(XNode_1.default.create("div", { "data-suggestion-popup": "suggestion-popup" },
-                        !disableSearch && XNode_1.default.create("input", { type: "search", value: Bind_1.default.twoWaysImmediate(() => this.search), eventKeydown: (e) => this.onKey(e), autofocus: true }),
-                        XNode_1.default.create("div", { class: "items" },
-                            XNode_1.default.create(AtomRepeater, { class: "presenter", selectedItem: Bind_1.default.oneWay(() => this.anchorItem), itemRenderer: itemRenderer, visibilityFilter: Bind_1.default.oneWay(() => match(this.search)), eventItemClick: (e) => {
-                                    this.anchorItem = e.detail;
-                                    setTimeout(() => this.close(e.detail), 100);
-                                }, items: Bind_1.default.oneWay(() => this.opener.items) }))));
-                    return;
+        this.render(XNode.create("div", {
+          "data-suggestion-popup": "suggestion-popup"
+        }, !disableSearch && XNode.create("input", {
+          type: "search",
+          value: Bind.twoWaysImmediate(() => this.search),
+          eventKeydown: e => this.onKey(e),
+          autofocus: true
+        }), XNode.create("div", {
+          class: "items"
+        }, XNode.create(AtomRepeater, {
+          class: "presenter",
+          selectedItem: Bind.oneWay(() => this.anchorItem),
+          itemRenderer: itemRenderer,
+          visibilityFilter: Bind.oneWay(() => match(this.search)),
+          scrollToSelection: true,
+          eventItemClick: e => {
+            this.close(e.detail);
+          },
+          items: items
+        }))));
+      }
+      onKey(e) {
+        var _a;
+        const suggested = match ? (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(match(this.search)) : this.items;
+        switch (e.key) {
+          case "Enter":
+            const anchorItem = this.anchorItem;
+            if (!anchorItem) {
+              return;
+            }
+            this.anchorIndex = 0;
+            this.close(anchorItem);
+            this.anchorItem = null;
+            this.search = "";
+            break;
+          case "ArrowDown":
+            if (suggested) {
+              if (!this.anchorItem) {
+                this.anchorIndex = 0;
+              } else {
+                if (this.anchorIndex < suggested.length - 1) {
+                  this.anchorIndex++;
                 }
-                this.render(XNode_1.default.create("div", { "data-suggestion-popup": "suggestion-popup" },
-                    !disableSearch && XNode_1.default.create("input", { type: "search", value: Bind_1.default.twoWaysImmediate(() => this.search), eventKeydown: (e) => this.onKey(e), autofocus: true }),
-                    XNode_1.default.create("div", { class: "items" },
-                        XNode_1.default.create(AtomRepeater, { class: "presenter", selectedItem: Bind_1.default.oneWay(() => this.anchorItem), itemRenderer: itemRenderer, visibilityFilter: Bind_1.default.oneWay(() => match(this.search)), scrollToSelection: true, eventItemClick: (e) => {
-                                this.close(e.detail);
-                            }, items: items }))));
+              }
+              this.anchorItem = suggested[this.anchorIndex];
             }
-            onKey(e) {
-                var _a;
-                const suggested = match ? (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(match(this.search)) : this.items;
-                switch (e.key) {
-                    case "Enter":
-                        // selection mode...
-                        const anchorItem = this.anchorItem;
-                        if (!anchorItem) {
-                            return;
-                        }
-                        this.anchorIndex = 0;
-                        this.close(anchorItem);
-                        this.anchorItem = null;
-                        this.search = "";
-                        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];
-                        }
-                        break;
-                    case "ArrowUp":
-                        if (suggested) {
-                            if (!this.anchorItem) {
-                                return;
-                            }
-                            if (this.anchorIndex) {
-                                this.anchorIndex--;
-                            }
-                            this.anchorItem = suggested[this.anchorIndex];
-                        }
-                        break;
-                }
+            break;
+          case "ArrowUp":
+            if (suggested) {
+              if (!this.anchorItem) {
+                return;
+              }
+              if (this.anchorIndex) {
+                this.anchorIndex--;
+              }
+              this.anchorItem = suggested[this.anchorIndex];
             }
+            break;
         }
-        __decorate([
-            BindableProperty_1.BindableProperty,
-            __metadata("design:type", String)
-        ], Suggestions.prototype, "search", void 0);
-        return Suggestions.showControl(opener);
+      }
     }
-    exports.askSuggestionPopup = askSuggestionPopup;
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .nested((0, StyleRule_1.default)("i[data-click-event]")
-        .padding(5))
-        .nested((0, StyleRule_1.default)("[data-no-wrap=true]")
-        .whiteSpace("nowrap")), "*[data-selected-item]");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .nested((0, StyleRule_1.default)("i[data-click-event=item-select]")
-        .padding(5))
-        .displayNone(" i[data-click-event=item-select]"), "*[data-selected-item=true]");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .displayNone(" i[data-click-event=item-deselect]"), "*[data-selected-item=false]");
-    function SelectorCheckBox(_a, ...nodes) {
-        var { text, icon = "far fa-square", iconSelected = "fas fa-check-square" } = _a, a = __rest(_a, ["text", "icon", "iconSelected"]);
-        if (text) {
-            return XNode_1.default.create("label", null,
-                XNode_1.default.create("i", { class: icon, "data-click-event": "item-select" }),
-                XNode_1.default.create("i", { class: iconSelected, "data-click-event": "item-deselect" }),
-                XNode_1.default.create("span", { "data-no-wrap": "true", text: text }),
-                ...nodes);
-        }
-        return XNode_1.default.create("label", null,
-            XNode_1.default.create("i", { class: icon, "data-click-event": "item-select" }),
-            XNode_1.default.create("i", { class: iconSelected, "data-click-event": "item-deselect" }),
-            ...nodes);
+    __decorate([BindableProperty, __metadata("design:type", String)], Suggestions.prototype, "search", void 0);
+    return Suggestions.showControl(opener);
+  }
+  function SelectorCheckBox(_a, ...nodes) {
+    var {
+        text,
+        icon = "far fa-square",
+        iconSelected = "fas fa-check-square"
+      } = _a,
+      a = __rest(_a, ["text", "icon", "iconSelected"]);
+    if (text) {
+      return XNode.create("label", null, 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);
     }
-    exports.SelectorCheckBox = SelectorCheckBox;
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .flexLayout({ alignItems: "center", justifyContent: "flex-start" })
-        .margin(0)
-        .nested((0, StyleRule_1.default)("i[data-ui-type]")
-        .padding(5))
-        .nested((0, StyleRule_1.default)("[data-no-wrap=true]")
-        .whiteSpace("nowrap"))
-        .displayNone("[data-is-selected=true] i[data-ui-type=item-select]")
-        .displayNone("[data-is-selected=false] i[data-ui-type=item-deselect]"), "*[data-select-all=select-all]");
-    class SelectAllControl extends AtomControl_1.AtomControl {
-        preCreate() {
-            this.element.dataset.selectAll = "select-all";
-            this.items = [];
-            this.selectedItems = [];
-            this.render(XNode_1.default.create(SelectAllControl, { "data-is-selected": Bind_1.default.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();
-                }
-            });
-        }
+    return XNode.create("label", null, XNode.create("i", {
+      class: icon,
+      "data-click-event": "item-select"
+    }), XNode.create("i", {
+      class: iconSelected,
+      "data-click-event": "item-deselect"
+    }), ...nodes);
+  }
+  function SelectAll(_a, ...nodes) {
+    var {
+        text = "Select All",
+        icon = "far fa-square",
+        iconSelected = "fas fa-check-square"
+      } = _a,
+      a = __rest(_a, ["text", "icon", "iconSelected"]);
+    if (text) {
+      return XNode.create(SelectAllControl, Object.assign({
+        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, Object.assign({
+      for: "label"
+    }, a), XNode.create("i", {
+      class: icon,
+      "data-ui-type": "item-select"
+    }), XNode.create("i", {
+      class: iconSelected,
+      "data-ui-type": "item-deselect"
+    }), ...nodes);
+  }
+  function disposeChildren(owner, e) {
+    if (!e) {
+      return;
     }
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], SelectAllControl.prototype, "items", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], SelectAllControl.prototype, "selectedItems", void 0);
-    function SelectAll(_a, ...nodes) {
-        var { text = "Select All", icon = "far fa-square", iconSelected = "fas fa-check-square" } = _a, a = __rest(_a, ["text", "icon", "iconSelected"]);
-        if (text) {
-            return XNode_1.default.create(SelectAllControl, Object.assign({ for: "label" }, a),
-                XNode_1.default.create("i", { class: icon, "data-ui-type": "item-select" }),
-                XNode_1.default.create("i", { class: iconSelected, "data-ui-type": "item-deselect" }),
-                XNode_1.default.create("span", { "data-no-wrap": "true", text: text }));
+    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 = "";
+  }
+  function disposeChild(owner, e) {
+    const ac = e.atomControl;
+    if (ac) {
+      ac.dispose();
+      return;
+    }
+    disposeChildren(owner, e);
+    owner.unbind(e);
+    owner.unbindEvent(e);
+    e.remove();
+  }
+  function defaultComparer(left, right) {
+    if (left && right) {
+      if (left instanceof Date) {
+        if (right instanceof Date) {
+          return left.getTime() === right.getTime();
         }
-        return XNode_1.default.create(SelectAllControl, Object.assign({ for: "label" }, a),
-            XNode_1.default.create("i", { class: icon, "data-ui-type": "item-select" }),
-            XNode_1.default.create("i", { class: iconSelected, "data-ui-type": "item-deselect" }),
-            ...nodes);
+        return false;
+      }
     }
-    exports.SelectAll = SelectAll;
-    function disposeChildren(owner, e) {
-        if (!e) {
-            return;
+    return left === right;
+  }
+  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({
+    askSuggestion: askSuggestion,
+    askSuggestionPopup: askSuggestionPopup,
+    SelectorCheckBox: SelectorCheckBox,
+    SelectAll: SelectAll,
+    disposeChildren: disposeChildren,
+    disposeChild: disposeChild,
+    defaultComparer: defaultComparer,
+    default: void 0
+  });
+  return {
+    setters: [function (_webAtomsCoreDistCoreAtomBinder) {
+      AtomBinder = _webAtomsCoreDistCoreAtomBinder.AtomBinder;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreStringHelper) {
+      StringHelper = _webAtomsCoreDistCoreStringHelper.StringHelper;
+    }, function (_webAtomsCoreDistCoreWatchProperty) {
+      WatchProperty = _webAtomsCoreDistCoreWatchProperty.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistWebServicesPopupService) {
+      PopupWindow = _webAtomsCoreDistWebServicesPopupService.PopupWindow;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }, function (_InlinePopup) {
+      InlinePopup = _InlinePopup.default;
+    }],
+    execute: function () {
+      __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+        var c = arguments.length,
+          r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+          d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+      };
+      __metadata = void 0 && (void 0).__metadata || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+      };
+      __rest = void 0 && (void 0).__rest || function (s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
         }
-        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);
+        return t;
+      };
+      CSS(StyleRule().display("none"), "[data-ui-display=none]");
+      popupCSS = CSS(StyleRule().minWidth(200).verticalFlexLayout({
+        alignItems: "stretch"
+      }).child(StyleRule(".items").flexStretch().overflow("auto").child(StyleRule(".presenter").child(StyleRule("*").padding(5)).child(StyleRule("[data-selected-item=true]").backgroundColor(Colors.lightGreen)))));
+      _export("getParentRepeaterItem", 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.dataset.itemIndex;
+            if (typeof itemIndex !== "undefined") {
+              root = target;
+              index = ~~itemIndex;
+            }
+          }
+          if (eventName === undefined) {
+            const itemClickEvent = target.dataset.clickEvent;
+            if (itemClickEvent) {
+              eventName = itemClickEvent.replace(/-([a-z])/g, g => g[1].toUpperCase());
+            }
+          }
+          target = target.parentElement;
         }
-        e.innerHTML = ""; // this should remove all elements... fast.. probably??
-    }
-    exports.disposeChildren = disposeChildren;
-    function disposeChild(owner, e) {
-        const ac = e.atomControl;
-        if (ac) {
-            ac.dispose();
-            return;
+        if (index === void 0 || repeater === void 0) {
+          return undefined;
         }
-        disposeChildren(owner, e);
-        owner.unbind(e);
-        owner.unbindEvent(e);
-        e.remove();
-    }
-    exports.disposeChild = disposeChild;
-    function defaultComparer(left, right) {
-        if (left && right) {
-            if (left instanceof Date) {
-                if (right instanceof Date) {
-                    return left.getTime() === right.getTime();
-                }
-                return false;
+        const item = repeater.items[~~index];
+        return [eventName, repeater, item, index, root];
+      });
+      _export("MatchTrue", MatchTrue = (...a) => true);
+      _export("MatchFalse", MatchFalse = (...a) => false);
+      _export("ArrowToString", ArrowToString = item => {
+        var _a, _b;
+        return (_b = (_a = item.label) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : item.toString();
+      });
+      _export("MatchCaseInsensitive", MatchCaseInsensitive = (textField = ArrowToString) => {
+        return s => {
+          if (!s) {
+            return MatchTrue;
+          }
+          const r = StringHelper.createContainsRegExp(s);
+          return item => r.test(textField(item));
+        };
+      });
+      _export("MatchAnyCaseInsensitive", MatchAnyCaseInsensitive = (textField = ArrowToString) => {
+        return s => {
+          if (!s) {
+            return MatchTrue;
+          }
+          const r = StringHelper.createContainsAnyWordRegExp(s);
+          return item => r.test(textField(item));
+        };
+      });
+      _export("SameObjectValue", SameObjectValue = item => item);
+      maxHeight = window.screen.availHeight / 2 > 250 ? StyleRule().height("250px") : StyleRule().maxHeight(80);
+      CSS(StyleRule().merge(maxHeight).minWidth(80).verticalFlexLayout({
+        alignItems: "stretch"
+      }).child(StyleRule(".items").flexStretch().overflow("auto").child(StyleRule(".presenter").child(StyleRule("*").padding(5)).child(StyleRule("[data-selected-item=true]").backgroundColor(Colors.lightGreen)))), "*[data-suggestion-popup=suggestion-popup]");
+      CSS(StyleRule().nested(StyleRule("i[data-click-event]").padding(5)).nested(StyleRule("[data-no-wrap=true]").whiteSpace("nowrap")), "*[data-selected-item]");
+      CSS(StyleRule().nested(StyleRule("i[data-click-event=item-select]").padding(5)).displayNone(" i[data-click-event=item-select]"), "*[data-selected-item=true]");
+      CSS(StyleRule().displayNone(" i[data-click-event=item-deselect]"), "*[data-selected-item=false]");
+      CSS(StyleRule().flexLayout({
+        alignItems: "center",
+        justifyContent: "flex-start"
+      }).margin(0).nested(StyleRule("i[data-ui-type]").padding(5)).nested(StyleRule("[data-no-wrap=true]").whiteSpace("nowrap")).displayNone("[data-is-selected=true] i[data-ui-type=item-select]").displayNone("[data-is-selected=false] i[data-ui-type=item-deselect]"), "*[data-select-all=select-all]");
+      SelectAllControl = class SelectAllControl extends AtomControl {
+        preCreate() {
+          this.element.dataset.selectAll = "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();
+            }
+          });
         }
-        return left === right;
-    }
-    exports.defaultComparer = defaultComparer;
-    const getFirstChild = (container) => {
+      };
+      __decorate([BindableProperty, __metadata("design:type", Array)], SelectAllControl.prototype, "items", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Array)], SelectAllControl.prototype, "selectedItems", void 0);
+      getFirstChild = container => {
         let child = container.firstElementChild;
         while (child && child.dataset.itemIndex === void 0) {
-            child = child.nextElementSibling;
+          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;
-        }
-    }
-    class AtomRepeater extends AtomControl_1.AtomControl {
+      };
+      _export("default", AtomRepeater = class AtomRepeater extends AtomControl {
         constructor() {
-            super(...arguments);
-            this.bubbleEvents = true;
+          super(...arguments);
+          this.bubbleEvents = true;
         }
         static from(element) {
-            while (element) {
-                const { atomControl } = element;
-                if (atomControl instanceof AtomRepeater) {
-                    return atomControl;
-                }
-                element = element.parentElement;
-            }
+          while (element) {
+            const {
+              atomControl
+            } = element;
+            if (atomControl instanceof AtomRepeater) {
+              return atomControl;
+            }
+            element = element.parentElement;
+          }
         }
         set refreshEventScope(v) {
-            this.registerDisposable(v.listen((ce) => {
-                this.refreshItem(ce.detail);
-            }));
+          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;
+          const selectedItems = this.selectedItems;
+          const items = this.items;
+          if (!(items && selectedItems)) {
+            return false;
+          }
+          return items.length && items.length === selectedItems.length;
         }
         get value() {
-            var _a;
-            if (this.initialValue !== undefined) {
-                return this.initialValue;
-            }
-            const sp = this.selectedItem;
-            if (sp === undefined) {
-                return sp;
-            }
-            const vp = (_a = this.valuePath) !== null && _a !== void 0 ? _a : exports.SameObjectValue;
-            return vp(sp);
+          var _a;
+          if (this.initialValue !== undefined) {
+            return this.initialValue;
+          }
+          const sp = this.selectedItem;
+          if (sp === undefined) {
+            return sp;
+          }
+          const vp = (_a = this.valuePath) !== null && _a !== void 0 ? _a : SameObjectValue;
+          return vp(sp);
         }
         set value(v) {
-            var _a, _b;
-            this.initialValue = v;
-            if (!this.items || !this.items.length) {
-                // this will force value based items loader
-                AtomBinder_1.AtomBinder.refreshValue(this, "value");
-                return;
-            }
-            const vp = (_a = this.valuePath) !== null && _a !== void 0 ? _a : exports.SameObjectValue;
-            const c = (_b = this.comparer) !== null && _b !== void 0 ? _b : defaultComparer;
-            const selectedItem = this.items.find((item) => c(vp(item), v));
-            this.selectedItem = selectedItem;
-            delete this.initialValue;
+          var _a, _b;
+          this.initialValue = v;
+          if (!this.items || !this.items.length) {
+            AtomBinder.refreshValue(this, "value");
+            return;
+          }
+          const vp = (_a = this.valuePath) !== null && _a !== void 0 ? _a : SameObjectValue;
+          const c = (_b = this.comparer) !== null && _b !== void 0 ? _b : defaultComparer;
+          const selectedItem = this.items.find(item => c(vp(item), v));
+          this.selectedItem = selectedItem;
+          delete this.initialValue;
         }
         get selectedItem() {
-            var _a;
-            return (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a[0];
+          var _a;
+          return (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a[0];
         }
         set selectedItem(value) {
-            var _a;
-            const si = (_a = this.selectedItems) !== null && _a !== void 0 ? _a : (this.selectedItems = []);
-            const first = si[0];
-            if (value === first) {
-                return;
-            }
-            si.set(0, value);
+          var _a;
+          const si = (_a = this.selectedItems) !== null && _a !== void 0 ? _a : this.selectedItems = [];
+          const first = si[0];
+          if (value === first) {
+            return;
+          }
+          si.set(0, value);
         }
         onPropertyChanged(name) {
-            var _a, _b;
-            switch (name) {
-                case "items":
-                    (_a = this.itemsDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-                    const items = this.items;
-                    const d = items === null || items === void 0 ? void 0 : 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_1.AtomBinder.refreshValue(this, "selectedItem");
-                        AtomBinder_1.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":
-                    (_b = this.selectedItemsDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
-                    const selectedItems = this.selectedItems;
-                    const sd = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.watch(() => {
-                        this.updateClasses();
-                        if (this.scrollToSelection) {
-                            this.bringSelectionIntoView();
-                        }
-                        if (this.selectedItem) {
-                            delete this.initialValue;
-                        }
-                        AtomBinder_1.AtomBinder.refreshValue(this, "selectedItem");
-                        AtomBinder_1.AtomBinder.refreshValue(this, "value");
-                        AtomBinder_1.AtomBinder.refreshValue(this, "allSelected");
-                        this.dispatchCustomEvent("selection-updated", selectedItems);
-                    });
-                    if (sd) {
-                        this.selectedItemsDisposable = this.registerDisposable(sd);
-                    }
-                    this.updateClasses();
-                    this.dispatchCustomEvent("selection-updated", selectedItems);
-                    AtomBinder_1.AtomBinder.refreshValue(this, "allSelected");
+          var _a, _b;
+          switch (name) {
+            case "items":
+              (_a = this.itemsDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+              const items = this.items;
+              const d = items === null || items === void 0 ? void 0 : items.watch((target, type, index, item) => {
+                switch (type) {
+                  case "add":
+                  case "remove":
+                  case "set":
+                    this.updatePartial(type, index, item);
                     break;
-                case "itemRenderer":
-                case "watch":
+                  default:
                     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;
-            }
+                }
+                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":
+              (_b = this.selectedItemsDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+              const selectedItems = this.selectedItems;
+              const sd = selectedItems === null || selectedItems === void 0 ? void 0 : 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 === null || element === void 0 ? void 0 : element.scrollIntoView();
-                }
-                return;
+          if (force) {
+            const selection = this.selectedItem;
+            if (selection) {
+              const element = this.elementForItem(selection);
+              element === null || element === void 0 ? void 0 : element.scrollIntoView();
             }
-            if (this.bringIntoViewId) {
-                clearTimeout(this.bringIntoViewId);
-            }
-            this.bringIntoViewId = setTimeout(() => {
-                clearTimeout(this.bringIntoViewId);
-                this.bringIntoViewId = undefined;
-                this.bringSelectionIntoView(true);
-            }, 100);
+            return;
+          }
+          if (this.bringIntoViewId) {
+            clearTimeout(this.bringIntoViewId);
+          }
+          this.bringIntoViewId = setTimeout(() => {
+            clearTimeout(this.bringIntoViewId);
+            this.bringIntoViewId = undefined;
+            this.bringSelectionIntoView(true);
+          }, 100);
         }
         forEach(action, container) {
-            var _a;
-            container !== null && container !== void 0 ? container : (container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element);
-            const items = this.items;
-            let start = getFirstChild(container);
-            while (start) {
-                const index = start.dataset.itemIndex;
-                // tslint:disable-next-line: no-bitwise
-                const item = items[~~index];
-                action(item, start);
-                start = start.nextElementSibling;
-            }
+          var _a;
+          container !== null && container !== void 0 ? container : container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
+          const items = this.items;
+          let start = getFirstChild(container);
+          while (start) {
+            const index = start.dataset.itemIndex;
+            const item = items[~~index];
+            action(item, start);
+            start = start.nextElementSibling;
+          }
         }
         *any(fx, itemSelector, container) {
-            var _a;
-            container !== null && container !== void 0 ? container : (container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element);
-            const items = this.items;
-            let node = getFirstChild(container);
-            while (node) {
-                const index = node.dataset.itemIndex;
-                // tslint:disable-next-line: no-bitwise
-                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;
-                }
+          var _a;
+          container !== null && container !== void 0 ? container : container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
+          const items = this.items;
+          let node = getFirstChild(container);
+          while (node) {
+            const index = node.dataset.itemIndex;
+            const item = items[~~index];
+            let element = node;
+            if (itemSelector) {
+              element = element.querySelector(itemSelector);
+            }
+            const ie = {
+              item,
+              element
+            };
+            if (fx) {
+              if (fx(item)) {
                 yield ie;
-                node = node.nextElementSibling;
+              }
+              continue;
             }
+            yield ie;
+            node = node.nextElementSibling;
+          }
         }
         *all(container) {
-            var _a;
-            container !== null && container !== void 0 ? container : (container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element);
-            const items = this.items;
-            let element = getFirstChild(container);
-            while (element) {
-                const index = element.dataset.itemIndex;
-                // tslint:disable-next-line: no-bitwise
-                const item = items[~~index];
-                yield { item, element };
-                element = element.nextElementSibling;
-            }
+          var _a;
+          container !== null && container !== void 0 ? container : container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
+          const items = this.items;
+          let element = getFirstChild(container);
+          while (element) {
+            const index = element.dataset.itemIndex;
+            const item = items[~~index];
+            yield {
+              item,
+              element
+            };
+            element = element.nextElementSibling;
+          }
         }
         elementForItem(itemToFind, container) {
-            var _a;
-            container !== null && container !== void 0 ? container : (container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element);
-            const items = this.items;
-            let element = getFirstChild(container);
-            while (element) {
-                const index = element.dataset.itemIndex;
-                // tslint:disable-next-line: no-bitwise
-                const item = items[~~index];
-                if (item === itemToFind) {
-                    return element;
-                }
-                element = element.nextElementSibling;
-            }
+          var _a;
+          container !== null && container !== void 0 ? container : container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
+          const items = this.items;
+          let element = getFirstChild(container);
+          while (element) {
+            const index = element.dataset.itemIndex;
+            const item = items[~~index];
+            if (item === itemToFind) {
+              return element;
+            }
+            element = element.nextElementSibling;
+          }
         }
         refreshItem(item, fx, index = -1) {
-            if (index === -1) {
-                index = this.items.indexOf(item);
-            }
-            if (fx === null || fx === void 0 ? void 0 : fx.then) {
-                const finalize = () => {
-                    this.refreshItem(item, undefined, index);
-                };
-                fx.then(finalize, finalize);
-                return;
-            }
-            this.updatePartial("set", index, item);
+          if (index === -1) {
+            index = this.items.indexOf(item);
+          }
+          if (fx === null || fx === void 0 ? void 0 : fx.then) {
+            const finalize = () => {
+              this.refreshItem(item, undefined, index);
+            };
+            fx.then(finalize, finalize);
+            return;
+          }
+          this.updatePartial("set", index, item);
         }
         updatePartial(key, index, item, container) {
-            var _a, _b, _c, _d, _e, _f;
-            const items = this.items;
-            if (!items) {
-                return;
-            }
-            const ir = this.itemRenderer;
-            if (!ir) {
-                return;
-            }
-            container !== null && container !== void 0 ? container : (container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element);
-            let start = getFirstChild(container);
-            let ei;
-            while (start) {
-                // tslint:disable-next-line: no-bitwise
-                ei = ~~start.dataset.itemIndex;
-                if (ei === index) {
-                    break;
-                }
-                start = start.nextElementSibling;
-            }
-            if (key !== "add" && !start) {
-                return;
-            }
-            const vp = (_b = this.valuePath) !== null && _b !== void 0 ? _b : ((it) => it);
-            const si = ((_c = this.selectedItems) !== null && _c !== void 0 ? _c : []).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();
-            }
-            if (!isRemove) {
-                const en = ir(item, index, this);
-                const ea = (_d = en.attributes) !== null && _d !== void 0 ? _d : (en.attributes = {});
-                const v = vp(item);
-                const e = document.createElement((_f = (_e = ea.for) !== null && _e !== void 0 ? _e : en.name) !== null && _f !== void 0 ? _f : "div");
-                e.dataset.itemIndex = (index++).toString();
-                e.dataset.selectedItem = si.indexOf(v) !== -1 ? "true" : "false";
-                if (this.enableDragDrop) {
-                    updateDragDrop(e);
-                }
-                if (start) {
-                    container.insertBefore(e, start);
-                }
-                else {
-                    container.appendChild(e);
-                }
-                this.render(en, e, this);
-                // start = start.nextElementSibling as HTMLElement;
-            }
-            while (start) {
-                const ci = items[index];
-                const cv = vp(ci);
-                start.dataset.itemIndex = (index++).toString();
-                start.dataset.selectedItem = si.indexOf(cv) !== -1
-                    ? "true"
-                    : "false";
-                start = start.nextElementSibling;
-            }
-            this.onPropertyChanged("footer");
+          var _a, _b, _c, _d, _e, _f;
+          const items = this.items;
+          if (!items) {
+            return;
+          }
+          const ir = this.itemRenderer;
+          if (!ir) {
+            return;
+          }
+          container !== null && container !== void 0 ? container : container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
+          let start = getFirstChild(container);
+          let ei;
+          while (start) {
+            ei = ~~start.dataset.itemIndex;
+            if (ei === index) {
+              break;
+            }
+            start = start.nextElementSibling;
+          }
+          if (key !== "add" && !start) {
+            return;
+          }
+          const vp = (_b = this.valuePath) !== null && _b !== void 0 ? _b : it => it;
+          const si = ((_c = this.selectedItems) !== null && _c !== void 0 ? _c : []).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();
+          }
+          if (!isRemove) {
+            const en = ir(item, index, this);
+            const ea = (_d = en.attributes) !== null && _d !== void 0 ? _d : en.attributes = {};
+            const v = vp(item);
+            const e = document.createElement((_f = (_e = ea.for) !== null && _e !== void 0 ? _e : en.name) !== null && _f !== void 0 ? _f : "div");
+            e.dataset.itemIndex = (index++).toString();
+            e.dataset.selectedItem = si.indexOf(v) !== -1 ? "true" : "false";
+            if (this.enableDragDrop) {
+              updateDragDrop(e);
+            }
+            if (start) {
+              container.insertBefore(e, start);
+            } else {
+              container.appendChild(e);
+            }
+            this.render(en, e, this);
+          }
+          while (start) {
+            const ci = items[index];
+            const cv = vp(ci);
+            start.dataset.itemIndex = (index++).toString();
+            start.dataset.selectedItem = si.indexOf(cv) !== -1 ? "true" : "false";
+            start = start.nextElementSibling;
+          }
+          this.onPropertyChanged("footer");
         }
         updateItems(container, force) {
-            var _a, _b, _c, _d, _e, _f;
-            if (this.deferUpdates && !force) {
-                if (this.deferredUpdateId) {
-                    return;
-                }
-                this.deferredUpdateId = setTimeout(() => {
-                    this.deferredUpdateId = 0;
-                    this.updateItems(container, true);
-                }, 1);
-                return;
-            }
-            container !== null && container !== void 0 ? container : (container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element);
-            // this is case when
-            // updateItems is fired after
-            // repeater is disposed
-            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 = (_b = this.valuePath) !== null && _b !== void 0 ? _b : ((it) => it);
-            const si = ((_c = this.selectedItems) !== null && _c !== void 0 ? _c : []).map(vp);
-            let i = 0;
-            for (const iterator of items) {
-                const index = i++;
-                const e = ir(iterator, index, this);
-                const ea = (_d = e.attributes) !== null && _d !== void 0 ? _d : (e.attributes = {});
-                const v = vp(iterator);
-                const element = document.createElement((_f = (_e = ea.for) !== null && _e !== void 0 ? _e : e.name) !== null && _f !== void 0 ? _f : "div");
-                element.dataset.itemIndex = index.toString();
-                element.dataset.selectedItem = si.indexOf(v) !== -1 ? "true" : "false";
-                this.render(e, element, this);
-                if (this.enableDragDrop) {
-                    updateDragDrop(element);
-                }
-                container.appendChild(element);
-            }
+          var _a, _b, _c, _d, _e, _f;
+          if (this.deferUpdates && !force) {
+            if (this.deferredUpdateId) {
+              return;
+            }
+            this.deferredUpdateId = setTimeout(() => {
+              this.deferredUpdateId = 0;
+              this.updateItems(container, true);
+            }, 1);
+            return;
+          }
+          container !== null && container !== void 0 ? container : container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : 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 = (_b = this.valuePath) !== null && _b !== void 0 ? _b : it => it;
+          const si = ((_c = this.selectedItems) !== null && _c !== void 0 ? _c : []).map(vp);
+          let i = 0;
+          for (const iterator of items) {
+            const index = i++;
+            const e = ir(iterator, index, this);
+            const ea = (_d = e.attributes) !== null && _d !== void 0 ? _d : e.attributes = {};
+            const v = vp(iterator);
+            const element = document.createElement((_f = (_e = ea.for) !== null && _e !== void 0 ? _e : e.name) !== null && _f !== void 0 ? _f : "div");
+            element.dataset.itemIndex = index.toString();
+            element.dataset.selectedItem = si.indexOf(v) !== -1 ? "true" : "false";
+            this.render(e, element, this);
+            if (this.enableDragDrop) {
+              updateDragDrop(element);
+            }
+            container.appendChild(element);
+          }
+          this.onPropertyChanged("footer");
         }
         preCreate() {
-            this.element.setAttribute("data-click-event", "item-click");
+          this.element.setAttribute("data-click-event", "item-click");
         }
         dispatchCustomEvent(type, detail) {
-            var _a;
-            type = StringHelper_1.StringHelper.fromHyphenToCamel(type);
-            (_a = this.element) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(type, {
-                detail,
-                bubbles: false,
-                cancelable: true
-            }));
+          var _a;
+          type = StringHelper.fromHyphenToCamel(type);
+          (_a = this.element) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(type, {
+            detail,
+            bubbles: false,
+            cancelable: true
+          }));
         }
         updateClasses() {
-            var _a, _b, _c;
-            const container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
-            const items = this.items;
-            let element = getFirstChild(container);
-            const vp = (_b = this.valuePath) !== null && _b !== void 0 ? _b : ((i) => i);
-            const si = ((_c = this.selectedItems) !== null && _c !== void 0 ? _c : []).map(vp);
-            while (element) {
-                // tslint:disable-next-line: no-bitwise
-                const index = ~~element.dataset.itemIndex;
-                const item = items[index];
-                const v = vp(item);
-                element.dataset.selectedItem = si.indexOf(v) !== -1
-                    ? "true"
-                    : "false";
-                element = element.nextElementSibling;
-            }
+          var _a, _b, _c;
+          const container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
+          const items = this.items;
+          let element = getFirstChild(container);
+          const vp = (_b = this.valuePath) !== null && _b !== void 0 ? _b : i => i;
+          const si = ((_c = this.selectedItems) !== null && _c !== void 0 ? _c : []).map(vp);
+          while (element) {
+            const index = ~~element.dataset.itemIndex;
+            const item = items[index];
+            const v = vp(item);
+            element.dataset.selectedItem = si.indexOf(v) !== -1 ? "true" : "false";
+            element = element.nextElementSibling;
+          }
         }
         updateVisibility() {
-            var _a, _b;
-            const container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
-            const items = this.items;
-            let element = container.firstElementChild;
-            const vf = (_b = this.visibilityFilter) !== null && _b !== void 0 ? _b : exports.MatchTrue;
-            while (element) {
-                // tslint:disable-next-line: no-bitwise
-                const index = ~~element.dataset.itemIndex;
-                const item = items[index];
-                if (vf(item)) {
-                    element.removeAttribute("data-ui-display");
-                }
-                else {
-                    element.dataset.uiDisplay = "none";
-                }
-                element = element.nextElementSibling;
-            }
+          var _a, _b;
+          const container = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.element;
+          const items = this.items;
+          let element = container.firstElementChild;
+          const vf = (_b = this.visibilityFilter) !== null && _b !== void 0 ? _b : MatchTrue;
+          while (element) {
+            const index = ~~element.dataset.itemIndex;
+            const item = items[index];
+            if (vf(item)) {
+              element.removeAttribute("data-ui-display");
+            } else {
+              element.dataset.uiDisplay = "none";
+            }
+            element = element.nextElementSibling;
+          }
         }
         updateHeaderFooter(name, presenter, item, itemRenderer, insert) {
-            var _a, _b, _c, _d;
-            presenter !== null && presenter !== void 0 ? presenter : (presenter = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : (this.itemsPresenter = this.element));
-            if (!presenter) {
-                return;
-            }
-            let current;
-            // remove only the header...
-            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);
-            }
-            if (!(item && itemRenderer)) {
-                return;
-            }
-            const node = itemRenderer(item);
-            const element = document.createElement((_d = (_c = (_b = node.attributes) === null || _b === void 0 ? void 0 : _b.for) !== null && _c !== void 0 ? _c : node.name) !== null && _d !== void 0 ? _d : "div");
-            element.dataset[name] = name;
-            this.render(node, element, this);
-            if (insert) {
-                presenter.insertBefore(element, presenter.firstElementChild);
-            }
-            else {
-                presenter.appendChild(element);
-            }
+          var _a, _b, _c, _d;
+          presenter !== null && presenter !== void 0 ? presenter : presenter = (_a = this.itemsPresenter) !== null && _a !== void 0 ? _a : this.itemsPresenter = this.element;
+          if (!presenter) {
+            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);
+          }
+          if (!(item && itemRenderer)) {
+            return;
+          }
+          const node = itemRenderer(item);
+          const element = document.createElement((_d = (_c = (_b = node.attributes) === null || _b === void 0 ? void 0 : _b.for) !== null && _c !== void 0 ? _c : node.name) !== null && _d !== void 0 ? _d : "div");
+          element.dataset[name] = name;
+          this.render(node, element, this);
+          if (insert) {
+            presenter.insertBefore(element, presenter.firstElementChild);
+          } else {
+            presenter.appendChild(element);
+          }
         }
         dispatchHeaderFooterEvent(eventName, type, originalTarget) {
-            const detail = this[type];
-            const ce = new CustomEvent(eventName !== null && eventName !== void 0 ? eventName : `${type}Click`, {
-                detail,
-                bubbles: this.bubbleEvents,
-                cancelable: true
-            });
-            originalTarget.dispatchEvent(ce);
-            if (!ce.defaultPrevented) {
-                this.onPropertyChanged(type);
-            }
+          const detail = this[type];
+          const ce = new CustomEvent(eventName !== null && eventName !== void 0 ? eventName : `${type}Click`, {
+            detail,
+            bubbles: this.bubbleEvents,
+            cancelable: true
+          });
+          originalTarget.dispatchEvent(ce);
+          if (!ce.defaultPrevented) {
+            this.onPropertyChanged(type);
+          }
         }
         dispatchItemEvent(eventName, item, recreate, originalTarget, nestedItem) {
-            const ce = new CustomEvent(eventName !== null && eventName !== void 0 ? eventName : "itemClick", {
-                detail: nestedItem !== null && nestedItem !== void 0 ? nestedItem : item,
-                bubbles: this.bubbleEvents,
-                cancelable: true
-            });
-            originalTarget.dispatchEvent(ce);
-            if (recreate && ce.executed && !ce.defaultPrevented) {
-                this.refreshItem(item, ce.promise);
-            }
+          const ce = new CustomEvent(eventName !== null && eventName !== void 0 ? eventName : "itemClick", {
+            detail: nestedItem !== null && nestedItem !== void 0 ? nestedItem : item,
+            bubbles: this.bubbleEvents,
+            cancelable: true
+          });
+          originalTarget.dispatchEvent(ce);
+          if (recreate && ce.executed && !ce.defaultPrevented) {
+            this.refreshItem(item, ce.promise);
+          }
         }
         dispatchClickEvent(e, data) {
-            var _a;
-            let { clickEvent = "itemClick", 
-            // tslint:disable-next-line: prefer-const
-            recreate, 
-            // tslint:disable-next-line: prefer-const
-            header, 
-            // tslint:disable-next-line: prefer-const
-            footer, 
-            // tslint:disable-next-line: prefer-const
-            itemIndex, 
-            // tslint:disable-next-line: prefer-const
-            itemPath } = data;
-            clickEvent = clickEvent.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-            if (header) {
-                this.dispatchHeaderFooterEvent(clickEvent, header, e.target);
-                return;
-            }
-            if (footer) {
-                this.dispatchHeaderFooterEvent(clickEvent, header, e.target);
-                return;
-            }
-            if (itemIndex === void 0 || itemIndex === null) {
+          var _a;
+          let {
+            clickEvent = "itemClick",
+            recreate,
+            header,
+            footer,
+            itemIndex,
+            itemPath
+          } = data;
+          clickEvent = clickEvent.replace(/-([a-z])/g, g => g[1].toUpperCase());
+          if (header) {
+            this.dispatchHeaderFooterEvent(clickEvent, header, e.target);
+            return;
+          }
+          if (footer) {
+            this.dispatchHeaderFooterEvent(clickEvent, header, e.target);
+            return;
+          }
+          if (itemIndex === void 0 || itemIndex === null) {
+            return;
+          }
+          let index = ~~itemIndex;
+          const item = this.items[index];
+          if (clickEvent === "itemSelect" || clickEvent === "itemDeselect") {
+            const si = (_a = this.selectedItems) !== null && _a !== void 0 ? _a : this.selectedItems = [];
+            if (si) {
+              index = si.indexOf(item);
+              if (index === -1) {
+                if (this.allowMultipleSelection) {
+                  si.add(item);
+                } else {
+                  si.set(0, item);
+                }
+              } else {
+                si.removeAt(index);
+              }
+            }
+          }
+          if (item) {
+            if (itemPath) {
+              if (/^[\{\"}]/.test(itemPath)) {
+                this.dispatchItemEvent(clickEvent, item, recreate, e.target, JSON.parse(itemPath));
                 return;
-            }
-            // tslint:disable-next-line: no-bitwise
-            let index = ~~itemIndex;
-            const item = this.items[index];
-            if (clickEvent === "itemSelect" || clickEvent === "itemDeselect") {
-                const si = (_a = this.selectedItems) !== null && _a !== void 0 ? _a : (this.selectedItems = []);
-                if (si) {
-                    index = si.indexOf(item);
-                    if (index === -1) {
-                        if (this.allowMultipleSelection) {
-                            si.add(item);
-                        }
-                        else {
-                            si.set(0, item);
-                        }
-                    }
-                    else {
-                        si.removeAt(index);
-                    }
+              }
+              let nestedItem = {};
+              const all = itemPath.split(",");
+              for (const iterator of all) {
+                let [name, paths] = iterator.split(/\=|\:/);
+                if (paths === void 0) {
+                  if (all.length > 1) {
+                    throw new Error("Invalid path, please use name=path format");
+                  }
+                  paths = name;
                 }
-            }
-            if (item) {
-                if (itemPath) {
-                    // check path...
-                    if (/^[\{\"}]/.test(itemPath)) {
-                        this.dispatchItemEvent(clickEvent, item, recreate, e.target, JSON.parse(itemPath));
-                        return;
-                    }
-                    let nestedItem = {};
-                    const all = itemPath.split(",");
-                    for (const iterator of all) {
-                        let [name, paths] = iterator.split(/\=|\:/);
-                        if (paths === void 0) {
-                            if (all.length > 1) {
-                                throw new Error("Invalid path, please use name=path format");
-                            }
-                            paths = name;
-                        }
-                        let start = item;
-                        for (const path of paths.split(".")) {
-                            if (path === "$") {
-                                start = item;
-                                continue;
-                            }
-                            start = start[path];
-                        }
-                        if (all.length === 1) {
-                            nestedItem = start;
-                            break;
-                        }
-                        nestedItem[name] = start;
-                    }
-                    this.dispatchItemEvent(clickEvent, item, recreate, e.target, nestedItem);
-                    return;
+                let start = item;
+                for (const path of paths.split(".")) {
+                  if (path === "$") {
+                    start = item;
+                    continue;
+                  }
+                  start = start[path];
                 }
-                this.dispatchItemEvent(clickEvent, item, recreate, e.target);
+                if (all.length === 1) {
+                  nestedItem = start;
+                  break;
+                }
+                nestedItem[name] = start;
+              }
+              this.dispatchItemEvent(clickEvent, item, recreate, e.target, nestedItem);
+              return;
             }
+            this.dispatchItemEvent(clickEvent, item, recreate, e.target);
+          }
         }
-    }
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Boolean)
-    ], AtomRepeater.prototype, "allowMultipleSelection", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], AtomRepeater.prototype, "selectedItems", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AtomRepeater.prototype, "itemsPresenter", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], AtomRepeater.prototype, "items", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AtomRepeater.prototype, "watch", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomRepeater.prototype, "visibilityFilter", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomRepeater.prototype, "enableFunc", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomRepeater.prototype, "itemRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomRepeater.prototype, "valuePath", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Function)
-    ], AtomRepeater.prototype, "comparer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Boolean)
-    ], AtomRepeater.prototype, "deferUpdates", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AtomRepeater.prototype, "header", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AtomRepeater.prototype, "headerRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AtomRepeater.prototype, "footer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AtomRepeater.prototype, "footerRenderer", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], AtomRepeater.prototype, "enableDragDrop", void 0);
-    __decorate([
-        WatchProperty_1.default,
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], AtomRepeater.prototype, "allSelected", null);
-    exports.default = AtomRepeater;
-    let hoverItem = {
+      });
+      __decorate([BindableProperty, __metadata("design:type", Boolean)], AtomRepeater.prototype, "allowMultipleSelection", 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([WatchProperty, __metadata("design:type", Object), __metadata("design:paramtypes", [])], AtomRepeater.prototype, "allSelected", null);
+      hoverItem = {
         repeater: null,
         target: null,
         item: null,
         placeholder: null
-    };
-    document.body.addEventListener("dragstart", (e) => {
-        const { target } = e;
+      };
+      document.body.addEventListener("dragstart", e => {
+        const {
+          target
+        } = e;
         if (target.draggable) {
-            const ri = (0, exports.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_1.default.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);
+          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) => {
+      });
+      document.body.addEventListener("dragend", e => {
         var _a, _b;
         if (!(hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.placeholder)) {
-            return;
+          return;
         }
-        const { item, placeholder, repeater } = hoverItem;
+        const {
+          item,
+          placeholder,
+          repeater
+        } = hoverItem;
         let start = placeholder;
         let index = -1;
         while (start) {
-            const itemIndex = (_b = (_a = start.previousElementSibling) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.itemIndex;
-            if (itemIndex !== void 0) {
-                // tslint:disable-next-line: no-bitwise
-                index = ~~itemIndex;
-            }
-            if (start.parentElement.atomControl) {
-                break;
-            }
-            start = start.parentElement;
+          const itemIndex = (_b = (_a = start.previousElementSibling) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.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 } });
+        const ce = new CustomEvent("itemDropped", {
+          detail: {
+            item,
+            index
+          }
+        });
         if (ce.defaultPrevented) {
-            return;
+          return;
         }
-        const { detail } = ce;
+        const {
+          detail
+        } = ce;
         targetRepeater.items.insert(detail.index, detail.item);
-    });
-    const dragOver = (e) => {
+      });
+      dragOver = e => {
         if (hoverItem) {
-            const { placeholder } = hoverItem;
-            if (e.target === placeholder) {
-                return;
-            }
+          const {
+            placeholder
+          } = hoverItem;
+          if (e.target === placeholder) {
+            return;
+          }
         }
-        const ri = (0, exports.getParentRepeaterItem)(e.target);
+        const ri = getParentRepeaterItem(e.target);
         if (!ri) {
-            return;
+          return;
         }
         const [type, repeater, item, index, target] = ri;
         if (!repeater) {
-            return;
+          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 midPoint = (co: DOMRect) => ({ x : co.left + (co.width / 2), y: co.top + (co.height / 2) });
-            // const isBetween = (n: IPoint, start: IPoint, end: IPoint) =>
-            //     start.x <= n.x && n.x >= end.x || start.y <= n.y && n.y <= end.y;
-            // set placeholder...
-            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);
-            }
+          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);
-});
+      };
+      document.body.addEventListener("dragover", dragOver);
+      document.body.addEventListener("dragenter", dragOver);
+    }
+  };
+});
 //# sourceMappingURL=AtomRepeater.js.map