@web-atoms/web-controls 2.2.0 → 2.2.2

package/dist/basic/DataGrid.js

@@ -1,350 +1,333 @@
-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);
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@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"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.InputColumn = exports.SelectAllColumn = void 0;
-    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 types_1 = require("@web-atoms/core/dist/core/types");
-    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
-    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
-    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
-    const AtomRepeater_1 = require("./AtomRepeater");
-    const Editable_1 = require("./Editable");
-    const TableRepeater_1 = require("./TableRepeater");
-    const cellEventName = Symbol("cell-event-name");
-    const headerEventName = Symbol("header-event-name");
-    const footerEventName = Symbol("footer-event-name");
-    const fromHyphenToCamel = (input) => input.replace(/-([a-z])/ig, (g) => g[1].toUpperCase());
-    const toEventName = (name) => {
+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);
-    };
-    const getCellEventName = (d) => {
+      };
+      getCellEventName = d => {
         var _a;
         let name = d[cellEventName];
         if (name !== void 0) {
-            return name;
+          return name;
         }
         name = toEventName((_a = d.cellClickEvent) !== null && _a !== void 0 ? _a : `cell-${d.header}-click`);
         d[cellEventName] = name;
         return name;
-    };
-    const getHeaderEventName = (d) => {
+      };
+      getHeaderEventName = d => {
         var _a;
         let name = d[headerEventName];
         if (name !== void 0) {
-            return name;
+          return name;
         }
         name = toEventName((_a = d.headerClickEvent) !== null && _a !== void 0 ? _a : `header-${d.header}-click`);
         d[headerEventName] = name;
         return name;
-    };
-    const getFooterEventName = (d) => {
+      };
+      getFooterEventName = d => {
         var _a;
         let name = d[footerEventName];
         if (name !== void 0) {
-            return name;
+          return name;
         }
         name = toEventName((_a = d.footerClickEvent) !== null && _a !== void 0 ? _a : `footer-${d.header}-click`);
         d[footerEventName] = name;
         return name;
-    };
-    // export interface IDataGridColumn {
-    //     header: string;
-    //     headerClickEvent?: string;
-    //     cellClickEvent?: string;
-    //     footerClickEvent?: string;
-    //     cellRenderer: (item) => XNode;
-    //     headerRenderer?: (item) => XNode;
-    //     footerRenderer?: (item) => XNode;
-    //     headerClickHandler?: (e: CustomEvent) => void;
-    //     cellClickHandler?: (e: CustomEvent) => void;
-    //     footerClickHandler?: (e: CustomEvent) => void;
-    // }
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .child((0, StyleRule_1.default)("thead")
-        .child((0, StyleRule_1.default)("tr[data-header=header]")
-        .child((0, StyleRule_1.default)("th")
-        .child((0, StyleRule_1.default)("i[data-sort]")
-        .marginRight(5)
-        .marginLeft(3)
-        .opacity("0.5"))
-        .child((0, StyleRule_1.default)("input[type=checkbox]")
-        .margin(5)))))
-        .child((0, StyleRule_1.default)("tbody")
-        .child((0, StyleRule_1.default)("tr[data-item-index]")
-        .hoverBackgroundColor(Colors_1.default.lightSkyBlue.withAlphaPercent(0.3))
-        .and((0, StyleRule_1.default)("[data-selected-item=true]")
-        .backgroundColor(Colors_1.default.lightGray.withAlphaPercent(0.4)))
-        .child((0, StyleRule_1.default)("td[data-ellipsis]")
-        .maxWidth("200px")
-        .overflow("hidden")
-        .textOverflow("ellipsis")
-        .whiteSpace("nowrap")))), "table[data-data-grid=data-grid]");
-    exports.SelectAllColumn = {
+      };
+      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_1.default.create("th", null,
-            XNode_1.default.create("input", { type: "checkbox", checked: Bind_1.default.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();
+        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_1.default.create(AtomRepeater_1.SelectorCheckBox, null)
-    };
-    function InputColumn({ type = "text", header, propertyPath }) {
-        const property = (0, Editable_1.getPropertyInfo)(propertyPath);
-        return ({
-            header,
-            cellRenderer: (item) => XNode_1.default.create(Editable_1.EditableInput, { propertyPath: propertyPath, value: property.getter(item), type: type }),
-        });
-    }
-    exports.InputColumn = InputColumn;
-    class DataGrid extends TableRepeater_1.default {
+        cellRenderer: () => XNode.create(SelectorCheckBox, null)
+      });
+      _export("default", DataGrid = class DataGrid extends TableRepeater {
         constructor(app, e = document.createElement("table")) {
-            super(app, e);
+          super(app, e);
         }
         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;
+          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_1.default.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_1.default.create("th", null,
-                                XNode_1.default.create("span", { text: x.header }),
-                                typeof order === "boolean" &&
-                                    (order
-                                        ? XNode_1.default.create("i", { "data-sort": "up", class: "fa-solid fa-arrow-up-short-wide" })
-                                        : XNode_1.default.create("i", { "data-sort": "down", class: "fa-solid fa-arrow-down-wide-short" })));
-                        };
+          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;
                     }
-                    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_1.default.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_1.default.create("td", { text: x.labelPath(i) });
-                        }
-                        else {
-                            x.cellRenderer = (i) => XNode_1.default.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_1.default.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 : []);
-            };
+                  }
+                  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);
+          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);
+          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 (types_1.CancelToken.isCancelled(error)) {
-                        return;
-                    }
-                    // tslint:disable-next-line: no-console
-                    console.error(error);
-                });
+          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);
     }
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], DataGrid.prototype, "columns", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Object)
-    ], DataGrid.prototype, "orderBy", void 0);
-    exports.default = DataGrid;
-});
+  };
+});
 //# sourceMappingURL=DataGrid.js.map