@web-atoms/web-controls 2.1.265 → 2.1.266

package/dist/basic/CheckBoxList.sys.js

@@ -0,0 +1,88 @@
+System.register(["@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS", "./AtomRepeater"], function (_export, _context) {
+  "use strict";
+
+  var BindableProperty, Colors, XNode, StyleRule, CSS, AtomRepeater, CheckBoxList, __decorate, __metadata;
+
+  _export("default", void 0);
+
+  return {
+    setters: [function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }, function (_AtomRepeater) {
+      AtomRepeater = _AtomRepeater.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);
+      };
+
+      CSS(StyleRule().flexLayout({
+        inline: true,
+        justifyContent: "flex-start"
+      }).flexFlow("wrap"), "div[data-checkbox-list=checkbox-list]");
+      CSS(StyleRule().flexLayout({
+        justifyContent: "flex-start"
+      }).marginRight(5).child(StyleRule("span").cursor("pointer")).and(StyleRule("[data-selected-item=true]").color(Colors.blue)).displayNone("[data-selected-item=true] > i.far").displayNone("[data-selected-item=false] > i.fas"), "div[data-item-type=checkbox]");
+
+      _export("default", CheckBoxList = class CheckBoxList extends AtomRepeater {
+        preCreate() {
+          super.preCreate();
+          this.element.dataset.checkboxList = "checkbox-list";
+          this.bindEvent(this.element, "itemClick", e => {
+            const s = this.selectedItems;
+
+            if (!s) {
+              return;
+            }
+
+            const item = e.detail;
+
+            if (s.indexOf(item) === -1) {
+              s.add(item);
+              this.element.dispatchEvent(new CustomEvent("itemSelect", {
+                detail: item,
+                bubbles: false
+              }));
+            } else {
+              this.element.dispatchEvent(new CustomEvent("itemDeselect", {
+                detail: item,
+                bubbles: false
+              }));
+              s.remove(item);
+            }
+          });
+
+          this.itemRenderer = item => XNode.create("div", {
+            "data-item-type": "checkbox"
+          }, XNode.create("i", {
+            class: "far fa-square"
+          }), XNode.create("i", {
+            class: "fas fa-check-square"
+          }), XNode.create("span", {
+            text: item.label
+          }));
+        }
+
+      });
+
+      __decorate([BindableProperty, __metadata("design:type", Object)], CheckBoxList.prototype, "labelPath", void 0);
+    }
+  };
+});
+//# sourceMappingURL=CheckBoxList.sys.js.map

package/dist/basic/CheckBoxList.sys.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;qEAyBqBA,Y;;;;;;MAzBZC,gB,yCAAAA,gB;;MACFC,M;;MACAC,K;;MACAC,S;;MACAC,G;;MACAC,Y;;;;;;;;;;;;;;;MAEPD,GAAG,CAACD,SAAS,GACRG,UADD,CACY;QAAEC,MAAM,EAAE,IAAV;QAAgBC,cAAc,EAAE;MAAhC,CADZ,EAECC,QAFD,CAEU,MAFV,CAAD,EAGH,uCAHG,CAAH;MAKAL,GAAG,CAACD,SAAS,GACRG,UADD,CACY;QAAEE,cAAc,EAAE;MAAlB,CADZ,EAECE,WAFD,CAEa,CAFb,EAGCC,KAHD,CAGOR,SAAS,CAAC,MAAD,CAAT,CACFS,MADE,CACK,SADL,CAHP,EAMCC,GAND,CAMKV,SAAS,CAAC,2BAAD,CAAT,CACAW,KADA,CACMb,MAAM,CAACc,IADb,CANL,EASCC,WATD,CASa,mCATb,EAUCA,WAVD,CAUa,oCAVb,CAAD,EAWD,8BAXC,CAAH;;yBAaqBjB,Y,GAAP,MAAOA,YAAP,SAA4BM,YAA5B,CAAwC;QAKxCY,SAAS;UACf,MAAMA,SAAN;UACA,KAAKC,OAAL,CAAaC,OAAb,CAAqBC,YAArB,GAAoC,eAApC;UACA,KAAKC,SAAL,CAAe,KAAKH,OAApB,EAA6B,WAA7B,EAA2CI,CAAD,IAAmB;YACzD,MAAMC,CAAC,GAAG,KAAKC,aAAf;;YACA,IAAI,CAACD,CAAL,EAAQ;cACJ;YACH;;YACD,MAAME,IAAI,GAAGH,CAAC,CAACI,MAAf;;YACA,IAAIH,CAAC,CAACI,OAAF,CAAUF,IAAV,MAAoB,CAAC,CAAzB,EAA4B;cACxBF,CAAC,CAACK,GAAF,CAAMH,IAAN;cACA,KAAKP,OAAL,CAAaW,aAAb,CAA2B,IAAIC,WAAJ,CAAgB,YAAhB,EAA8B;gBAAEJ,MAAM,EAAED,IAAV;gBAAgBM,OAAO,EAAE;cAAzB,CAA9B,CAA3B;YACH,CAHD,MAGO;cACH,KAAKb,OAAL,CAAaW,aAAb,CAA2B,IAAIC,WAAJ,CAAgB,cAAhB,EAAgC;gBAAEJ,MAAM,EAAED,IAAV;gBAAgBM,OAAO,EAAE;cAAzB,CAAhC,CAA3B;cACAR,CAAC,CAACS,MAAF,CAASP,IAAT;YACH;UACJ,CAbD;;UAeA,KAAKQ,YAAL,GAAqBR,IAAD,IAAUvB;YAAA,kBAAoB;UAApB,GAC1BA;YAAGgC,KAAK,EAAC;UAAT,EAD0B,EAE1BhC;YAAGgC,KAAK,EAAC;UAAT,EAF0B,EAG1BhC;YAAMiC,IAAI,EAAEV,IAAI,CAACW;UAAjB,EAH0B,CAA9B;QAKH;;MA5BiD,C;;MAGlDC,YADCrC,gBACD","names":["CheckBoxList","BindableProperty","Colors","XNode","StyleRule","CSS","AtomRepeater","flexLayout","inline","justifyContent","flexFlow","marginRight","child","cursor","and","color","blue","displayNone","preCreate","element","dataset","checkboxList","bindEvent","e","s","selectedItems","item","detail","indexOf","add","dispatchEvent","CustomEvent","bubbles","remove","itemRenderer","class","text","label","__decorate"],"sourceRoot":"","sources":["../../src/basic/CheckBoxList.tsx"],"sourcesContent":[null]}

package/dist/basic/Checkbox.sys.js

@@ -0,0 +1,35 @@
+System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], function (_export, _context) {
+  "use strict";
+
+  var XNode, StyleRule, CSS, css;
+
+  function Checkbox({
+    checked,
+    text
+  }) {
+    return XNode.create("div", {
+      class: css
+    }, XNode.create("label", null, XNode.create("input", {
+      type: "checkbox",
+      checked: checked
+    }), XNode.create("span", {
+      text: text
+    })));
+  }
+
+  _export("default", Checkbox);
+
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }],
+    execute: function () {
+      css = CSS(StyleRule("check-box").display("inline-block").child(StyleRule("label").display("flex").paddingLeft(5).paddingRight(5).child(StyleRule("input[type=checkbox]").borderRadius(3).margin(0).padding(0).alignSelf("center")).child(StyleRule("span").alignSelf("center").whiteSpace("nowrap").marginLeft(5).flexStretch())));
+    }
+  };
+});
+//# sourceMappingURL=Checkbox.sys.js.map

package/dist/basic/Checkbox.sys.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;EA+Bc,SAAUA,QAAV,CAAmB;IAC7BC,OAD6B;IAE7BC;EAF6B,CAAnB,EAMb;IACG,OAAOC;MAAKC,KAAK,EAAEC;IAAZ,GACHF,4BACIA;MACIG,IAAI,EAAC,UADT;MAEIL,OAAO,EAAEA;IAFb,EADJ,EAIIE;MACID,IAAI,EAAEA;IADV,EAJJ,CADG,CAAP;EASH;;qBAhBuBF,Q;;;;MA9BjBG,K;;MACAI,S;;MACAC,G;;;MAEDH,G,GAAMG,GAAG,CACXD,SAAS,CAAC,WAAD,CAAT,CACCE,OADD,CACS,cADT,EAECC,KAFD,CAGIH,SAAS,CAAC,OAAD,CAAT,CACCE,OADD,CACS,MADT,EAECE,WAFD,CAEa,CAFb,EAGCC,YAHD,CAGc,CAHd,EAICF,KAJD,CAMIH,SAAS,CAAC,sBAAD,CAAT,CACCM,YADD,CACc,CADd,EAECC,MAFD,CAEQ,CAFR,EAGCC,OAHD,CAGS,CAHT,EAICC,SAJD,CAIW,QAJX,CANJ,EAYCN,KAZD,CAaIH,SAAS,CAAC,MAAD,CAAT,CACCS,SADD,CACW,QADX,EAECC,UAFD,CAEY,QAFZ,EAGCC,UAHD,CAGY,CAHZ,EAICC,WAJD,EAbJ,CAHJ,CADW,C","names":["Checkbox","checked","text","XNode","class","css","type","StyleRule","CSS","display","child","paddingLeft","paddingRight","borderRadius","margin","padding","alignSelf","whiteSpace","marginLeft","flexStretch"],"sourceRoot":"","sources":["../../src/basic/Checkbox.tsx"],"sourcesContent":[null]}

package/dist/basic/ComboBox.sys.js

@@ -0,0 +1,114 @@
+System.register(["@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/XNode", "./AtomRepeater"], function (_export, _context) {
+  "use strict";
+
+  var BindableProperty, XNode, AtomRepeater, ComboBox, __decorate, __metadata;
+
+  _export("default", void 0);
+
+  return {
+    setters: [function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_AtomRepeater) {
+      AtomRepeater = _AtomRepeater.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);
+      };
+
+      _export("default", ComboBox = class ComboBox extends AtomRepeater {
+        constructor(app, e) {
+          super(app, e !== null && e !== void 0 ? e : document.createElement("select"));
+          this.isChanging = false;
+          this.selectedItems = [];
+        }
+
+        updateItems(container) {
+          var _a, _b;
+
+          if (this.isChanging) {
+            return;
+          }
+
+          super.updateItems(container);
+          const selectedItems = this.selectedItems;
+
+          if (!selectedItems) {
+            return;
+          }
+
+          if (selectedItems.length === 0) {
+            return;
+          }
+
+          this.isChanging = true;
+          const first = selectedItems[0];
+          this.element.selectedIndex = (_b = (_a = this.items) === null || _a === void 0 ? void 0 : _a.indexOf(first)) !== null && _b !== void 0 ? _b : -1;
+          this.isChanging = false;
+        }
+
+        updateClasses() {
+          if (this.isChanging) {
+            return;
+          }
+
+          super.updateClasses();
+          this.updateItems();
+        }
+
+        preCreate() {
+          super.preCreate();
+
+          this.labelPath = item => {
+            var _a;
+
+            return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : item.toString();
+          };
+
+          this.valuePath = item => {
+            var _a;
+
+            return (_a = item === null || item === void 0 ? void 0 : item.value) !== null && _a !== void 0 ? _a : item.toString();
+          };
+
+          this.itemRenderer = item => XNode.create("option", null, this.labelPath(item));
+
+          this.bindEvent(this.element, "change", () => this.changeSelection());
+        }
+
+        changeSelection() {
+          if (this.isChanging) {
+            return;
+          }
+
+          this.isChanging = true;
+          const index = this.element.selectedIndex;
+
+          if (index !== -1) {
+            const si = this.selectedItems;
+
+            if (si) {
+              si.set(0, this.items[index]);
+            }
+          }
+
+          this.isChanging = false;
+        }
+
+      });
+
+      __decorate([BindableProperty, __metadata("design:type", Object)], ComboBox.prototype, "labelPath", void 0);
+    }
+  };
+});
+//# sourceMappingURL=ComboBox.sys.js.map

package/dist/basic/ComboBox.sys.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;6CAIqBA,Q;;;;;;MAJZC,gB,yCAAAA,gB;;MACFC,K;;MACAC,Y;;;;;;;;;;;;;;;yBAEcH,Q,GAAP,MAAOA,QAAP,SAAwBG,YAAxB,CAAoC;QAO9CC,YAAYC,GAAZ,EAAiBC,CAAjB,EAAkB;UACd,MAAMD,GAAN,EAAWC,CAAC,SAAD,KAAC,WAAD,OAAKC,QAAQ,CAACC,aAAT,CAAuB,QAAvB,CAAhB;UAHI,kBAAa,KAAb;UAIJ,KAAKC,aAAL,GAAqB,EAArB;QACH;;QAEMC,WAAW,CAACC,SAAD,EAAwB;;;UACtC,IAAI,KAAKC,UAAT,EAAqB;YACjB;UACH;;UACD,MAAMF,WAAN,CAAkBC,SAAlB;UACA,MAAMF,aAAa,GAAG,KAAKA,aAA3B;;UACA,IAAI,CAACA,aAAL,EAAoB;YAChB;UACH;;UACD,IAAIA,aAAa,CAACI,MAAd,KAAyB,CAA7B,EAAgC;YAC5B;UACH;;UACD,KAAKD,UAAL,GAAkB,IAAlB;UACA,MAAME,KAAK,GAAGL,aAAa,CAAC,CAAD,CAA3B;UACC,KAAKM,OAAL,CAAmCC,aAAnC,GAAmD,iBAAKC,KAAL,MAAU,IAAV,IAAUC,aAAV,GAAU,MAAV,GAAUA,GAAEC,OAAF,CAAUL,KAAV,CAAV,MAA0B,IAA1B,IAA0BM,aAA1B,GAA0BA,EAA1B,GAA8B,CAAC,CAAlF;UACD,KAAKR,UAAL,GAAkB,KAAlB;QACH;;QAESS,aAAa;UACnB,IAAI,KAAKT,UAAT,EAAqB;YACjB;UACH;;UACD,MAAMS,aAAN;UACA,KAAKX,WAAL;QACH;;QAESY,SAAS;UACf,MAAMA,SAAN;;UACA,KAAKC,SAAL,GAAkBC,IAAD,IAAS;YAAA;;YAAC,iBAAI,SAAJ,QAAI,WAAJ,GAAI,MAAJ,OAAI,CAAEC,KAAN,MAAW,IAAX,IAAWP,aAAX,GAAWA,EAAX,GAAeM,IAAI,CAACE,QAAL,EAAf;UAA8B,CAAzD;;UACA,KAAKC,SAAL,GAAkBH,IAAD,IAAS;YAAA;;YAAC,iBAAI,SAAJ,QAAI,WAAJ,GAAI,MAAJ,OAAI,CAAEI,KAAN,MAAW,IAAX,IAAWV,aAAX,GAAWA,EAAX,GAAeM,IAAI,CAACE,QAAL,EAAf;UAA8B,CAAzD;;UACA,KAAKG,YAAL,GAAqBL,IAAD,IAAUtB,6BAAS,KAAKqB,SAAL,CAAeC,IAAf,CAAT,CAA9B;;UAEA,KAAKM,SAAL,CAAe,KAAKf,OAApB,EAA6B,QAA7B,EAAuC,MAAM,KAAKgB,eAAL,EAA7C;QACH;;QAESA,eAAe;UACrB,IAAI,KAAKnB,UAAT,EAAqB;YACjB;UACH;;UACD,KAAKA,UAAL,GAAkB,IAAlB;UACA,MAAMoB,KAAK,GAAI,KAAKjB,OAAL,CAAmCC,aAAlD;;UACA,IAAIgB,KAAK,KAAK,CAAC,CAAf,EAAkB;YACd,MAAMC,EAAE,GAAG,KAAKxB,aAAhB;;YACA,IAAIwB,EAAJ,EAAQ;cACJA,EAAE,CAACC,GAAH,CAAO,CAAP,EAAU,KAAKjB,KAAL,CAAWe,KAAX,CAAV;YACH;UACJ;;UACD,KAAKpB,UAAL,GAAkB,KAAlB;QACH;;MA5D6C,C;;MAG9CuB,YADClC,gBACD","names":["ComboBox","BindableProperty","XNode","AtomRepeater","constructor","app","e","document","createElement","selectedItems","updateItems","container","isChanging","length","first","element","selectedIndex","items","_a","indexOf","_b","updateClasses","preCreate","labelPath","item","label","toString","valuePath","value","itemRenderer","bindEvent","changeSelection","index","si","set","__decorate"],"sourceRoot":"","sources":["../../src/basic/ComboBox.tsx"],"sourcesContent":[null]}

package/dist/basic/DataGrid.sys.js

@@ -0,0 +1,415 @@
+System.register(["@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS", "./AtomRepeater", "./Editable", "./TableRepeater"], function (_export, _context) {
+  "use strict";
+
+  var Bind, BindableProperty, Colors, CancelToken, XNode, StyleRule, CSS, SelectorCheckBox, EditableInput, getPropertyInfo, TableRepeater, DataGrid, __decorate, __metadata, cellEventName, headerEventName, footerEventName, fromHyphenToCamel, toEventName, getCellEventName, getHeaderEventName, getFooterEventName, SelectAllColumn;
+
+  function InputColumn({
+    type = "text",
+    header,
+    propertyPath
+  }) {
+    const property = getPropertyInfo(propertyPath);
+    return {
+      header,
+      cellRenderer: item => XNode.create(EditableInput, {
+        propertyPath: propertyPath,
+        value: property.getter(item),
+        type: type
+      })
+    };
+  }
+
+  _export({
+    InputColumn: InputColumn,
+    default: void 0
+  });
+
+  return {
+    setters: [function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreTypes) {
+      CancelToken = _webAtomsCoreDistCoreTypes.CancelToken;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }, function (_AtomRepeater) {
+      SelectorCheckBox = _AtomRepeater.SelectorCheckBox;
+    }, function (_Editable) {
+      EditableInput = _Editable.EditableInput;
+      getPropertyInfo = _Editable.getPropertyInfo;
+    }, function (_TableRepeater) {
+      TableRepeater = _TableRepeater.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);
+      };
+
+      cellEventName = Symbol("cell-event-name");
+      headerEventName = Symbol("header-event-name");
+      footerEventName = Symbol("footer-event-name");
+
+      fromHyphenToCamel = input => input.replace(/-([a-z])/ig, g => g[1].toUpperCase());
+
+      toEventName = name => {
+        const r = fromHyphenToCamel(name.replace(/\s+/, "-"));
+        return r[0].toLowerCase() + r.substring(1);
+      };
+
+      getCellEventName = d => {
+        var _a;
+
+        let name = d[cellEventName];
+
+        if (name !== void 0) {
+          return name;
+        }
+
+        name = toEventName((_a = d.cellClickEvent) !== null && _a !== void 0 ? _a : `cell-${d.header}-click`);
+        d[cellEventName] = name;
+        return name;
+      };
+
+      getHeaderEventName = d => {
+        var _a;
+
+        let name = d[headerEventName];
+
+        if (name !== void 0) {
+          return name;
+        }
+
+        name = toEventName((_a = d.headerClickEvent) !== null && _a !== void 0 ? _a : `header-${d.header}-click`);
+        d[headerEventName] = name;
+        return name;
+      };
+
+      getFooterEventName = d => {
+        var _a;
+
+        let name = d[footerEventName];
+
+        if (name !== void 0) {
+          return name;
+        }
+
+        name = toEventName((_a = d.footerClickEvent) !== null && _a !== void 0 ? _a : `footer-${d.header}-click`);
+        d[footerEventName] = name;
+        return name;
+      };
+
+      CSS(StyleRule().child(StyleRule("thead").child(StyleRule("tr[data-header=header]").child(StyleRule("th").child(StyleRule("i[data-sort]").marginRight(5).marginLeft(3).opacity("0.5")).child(StyleRule("input[type=checkbox]").margin(5))))).child(StyleRule("tbody").child(StyleRule("tr[data-item-index]").hoverBackgroundColor(Colors.lightSkyBlue.withAlphaPercent(0.3)).and(StyleRule("[data-selected-item=true]").backgroundColor(Colors.lightGray.withAlphaPercent(0.4))).child(StyleRule("td[data-ellipsis]").maxWidth("200px").overflow("hidden").textOverflow("ellipsis").whiteSpace("nowrap")))), "table[data-data-grid=data-grid]");
+
+      _export("SelectAllColumn", SelectAllColumn = {
+        header: "Select All",
+        headerRenderer: () => XNode.create("th", null, XNode.create("input", {
+          type: "checkbox",
+          checked: Bind.oneTime(x => x.allSelected)
+        })),
+        headerClickHandler: e => {
+          var _a;
+
+          const s = e.detail.repeater;
+          const items = s.items;
+
+          if (!items) {
+            return;
+          }
+
+          const selectedItems = (_a = s.selectedItems) !== null && _a !== void 0 ? _a : s.selectedItems = [];
+
+          if (s.allSelected) {
+            selectedItems.clear();
+            return;
+          }
+
+          selectedItems.length = 0;
+          selectedItems.push(...items);
+          selectedItems.refresh();
+        },
+        cellRenderer: () => XNode.create(SelectorCheckBox, null)
+      });
+
+      _export("default", DataGrid = class DataGrid extends TableRepeater {
+        constructor(app, e) {
+          super(app, e !== null && e !== void 0 ? e : document.createElement("table"));
+        }
+
+        onPropertyChanged(name) {
+          super.onPropertyChanged(name);
+
+          if (name === "columns") {
+            super.onPropertyChanged("header");
+            super.onPropertyChanged("footer");
+            super.onPropertyChanged("items");
+          }
+
+          if (name === "orderBy") {
+            if (!this.orderBySet) {
+              this.onPropertyChanged("header");
+            }
+
+            this.orderBySet = true;
+          }
+        }
+
+        preCreate() {
+          super.preCreate();
+          this.header = true;
+          this.footer = null;
+          this.element.dataset.dataGrid = "data-grid";
+
+          this.headerRenderer = item => {
+            var _a, _b, _c;
+
+            return XNode.create("tr", null, ...((_c = (_b = (_a = this.columns) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, x => {
+              var _a, _b, _c, _d, _e;
+
+              if (x.headerRenderer === void 0) {
+                x.headerRenderer = _ => {
+                  let order = this.orderBy;
+
+                  if (order !== void 0) {
+                    if (order === x.headerSort) {
+                      order = true;
+                    } else if (order === x.headerSortDescending) {
+                      order = false;
+                    }
+                  }
+
+                  return XNode.create("th", null, XNode.create("span", {
+                    text: x.header
+                  }), typeof order === "boolean" && (order ? XNode.create("i", {
+                    "data-sort": "up",
+                    class: "fa-solid fa-arrow-up-short-wide"
+                  }) : XNode.create("i", {
+                    "data-sort": "down",
+                    class: "fa-solid fa-arrow-down-wide-short"
+                  })));
+                };
+              }
+
+              const node = x.headerRenderer(item);
+              const na = (_a = node.attributes) !== null && _a !== void 0 ? _a : node.attributes = {};
+              (_b = na["data-click-event"]) !== null && _b !== void 0 ? _b : na["data-click-event"] = getHeaderEventName(x);
+
+              if (x.width !== void 0) {
+                (_c = na["style-width"]) !== null && _c !== void 0 ? _c : na["style-width"] = x.width;
+              } else {
+                if (x.maxWidth !== void 0) {
+                  (_d = na["style-max-width"]) !== null && _d !== void 0 ? _d : na["style-max-width"] = x.maxWidth;
+                }
+
+                if (x.minWidth !== void 0) {
+                  (_e = na["style-min-width"]) !== null && _e !== void 0 ? _e : na["style-min-width"] = x.minWidth;
+                }
+              }
+
+              return node;
+            })) !== null && _c !== void 0 ? _c : []));
+          };
+
+          this.itemRenderer = item => {
+            var _a, _b, _c;
+
+            return XNode.create("tr", null, ...((_c = (_b = (_a = this.columns) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, x => {
+              var _a, _b, _c, _d, _e, _f, _g, _h;
+
+              (_a = x.ellipsis) !== null && _a !== void 0 ? _a : x.ellipsis = true;
+
+              if (x.cellRenderer === void 0) {
+                (_b = x.labelPath) !== null && _b !== void 0 ? _b : x.labelPath = i => i[x.label];
+
+                if (x.ellipsis) {
+                  x.cellRenderer = i => XNode.create("td", {
+                    text: x.labelPath(i)
+                  });
+                } else {
+                  x.cellRenderer = i => XNode.create("td", {
+                    text: x.labelPath(i),
+                    title: x.labelPath(i)
+                  });
+                }
+              }
+
+              const node = (_c = x.cellRenderer) === null || _c === void 0 ? void 0 : _c.call(x, item);
+              const na = (_d = node.attributes) !== null && _d !== void 0 ? _d : node.attributes = {};
+
+              if (x.ellipsis) {
+                na["data-ellipsis"] = "true";
+              }
+
+              (_e = na["data-click-event"]) !== null && _e !== void 0 ? _e : na["data-click-event"] = getCellEventName(x);
+
+              if (x.width !== void 0) {
+                (_f = na["style-width"]) !== null && _f !== void 0 ? _f : na["style-width"] = x.width;
+              } else {
+                if (x.maxWidth !== void 0) {
+                  (_g = na["style-max-width"]) !== null && _g !== void 0 ? _g : na["style-max-width"] = x.maxWidth;
+                }
+
+                if (x.minWidth !== void 0) {
+                  (_h = na["style-min-width"]) !== null && _h !== void 0 ? _h : na["style-min-width"] = x.minWidth;
+                }
+              }
+
+              return node;
+            })) !== null && _c !== void 0 ? _c : []));
+          };
+
+          this.footerRenderer = item => {
+            var _a, _b, _c;
+
+            return XNode.create("tr", null, ...((_c = (_b = (_a = this.columns) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, x => {
+              var _a, _b;
+
+              const node = (_a = x.footerRenderer) === null || _a === void 0 ? void 0 : _a.call(x, item);
+
+              if (node === void 0) {
+                return node;
+              }
+
+              const na = (_b = node.attributes) !== null && _b !== void 0 ? _b : node.attributes = {};
+
+              if (na["data-click-event"] === void 0) {
+                na["data-click-event"] = getFooterEventName(x);
+              }
+
+              return node;
+            })) !== null && _c !== void 0 ? _c : []));
+          };
+        }
+
+        dispatchHeaderFooterEvent(eventName, type, originalTarget) {
+          var _a;
+
+          let detail = this[type];
+          const column = this.columns.find(x => getHeaderEventName(x) === eventName || getFooterEventName(x) === eventName);
+          let order = this.orderBy;
+          const originalOrder = this.orderBy;
+          const isHeader = type === "header";
+          const setOrderBy = isHeader && column.headerSort !== void 0;
+
+          if (isHeader) {
+            if (setOrderBy) {
+              if (order === column.headerSortDescending) {
+                order = column.headerSort;
+              } else if (order === column.headerSort) {
+                order = column.headerSortDescending;
+              } else {
+                order = (_a = column.headerSortDefault) !== null && _a !== void 0 ? _a : column.headerSort;
+              }
+            }
+
+            detail = {
+              repeater: this,
+              detail,
+              type,
+              order
+            };
+          }
+
+          const ce = new CustomEvent(eventName !== null && eventName !== void 0 ? eventName : `${type}Click`, {
+            detail,
+            bubbles: this.bubbleEvents,
+            cancelable: true
+          });
+          originalTarget.dispatchEvent(ce);
+
+          if (ce.defaultPrevented) {
+            return;
+          }
+
+          this.invokeHandler(isHeader ? column.headerClickHandler : column.footerClickHandler, ce);
+
+          if (ce.defaultPrevented) {
+            return;
+          }
+
+          if (setOrderBy && this.orderBy === originalOrder) {
+            this.orderBy = order;
+            ce.executed = true;
+          }
+
+          if (ce.executed) {
+            this.onPropertyChanged(type);
+          }
+        }
+
+        dispatchItemEvent(eventName, item, recreate, originalTarget) {
+          const ce = new CustomEvent(eventName !== null && eventName !== void 0 ? eventName : "itemClick", {
+            detail: item,
+            bubbles: this.bubbleEvents,
+            cancelable: true
+          });
+          originalTarget.dispatchEvent(ce);
+
+          if (ce.defaultPrevented) {
+            return;
+          }
+
+          for (const iterator of this.columns) {
+            if (getCellEventName(iterator) === eventName) {
+              this.invokeHandler(iterator.cellClickHandler, ce);
+              break;
+            }
+          }
+
+          if (ce.defaultPrevented) {
+            return;
+          }
+
+          if (recreate && ce.executed) {
+            this.refreshItem(item, ce.promise);
+          }
+        }
+
+        invokeHandler(h, e) {
+          if (!h) {
+            return;
+          }
+
+          const p = h(e);
+          e.executed = true;
+
+          if (p && p.then) {
+            if (e.promise) {
+              e.promise = Promise.all([e.promise, p]);
+            } else {
+              e.promise = p;
+            }
+
+            p === null || p === void 0 ? void 0 : p.catch(error => {
+              if (CancelToken.isCancelled(error)) {
+                return;
+              }
+
+              console.error(error);
+            });
+          }
+        }
+
+      });
+
+      __decorate([BindableProperty, __metadata("design:type", Array)], DataGrid.prototype, "columns", void 0);
+
+      __decorate([BindableProperty, __metadata("design:type", Object)], DataGrid.prototype, "orderBy", void 0);
+    }
+  };
+});
+//# sourceMappingURL=DataGrid.sys.js.map