@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/basic/DataGrid.js

@@ -6,283 +6,289 @@ import XNode from "@web-atoms/core/dist/core/XNode.js";
 import { SelectorCheckBox } from "./AtomRepeater.js";
 import { EditableInput, getPropertyInfo } from "./Editable.js";
 import TableRepeater from "./TableRepeater.js";
-import "./styles/data-grid.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/data-grid.global.css"));
 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) => {
-    const r = fromHyphenToCamel(name.replace(/\s+/, "-"));
-    return r[0].toLowerCase() + r.substring(1);
+const fromHyphenToCamel = input => input.replace(/-([a-z])/ig, g => g[1].toUpperCase());
+const toEventName = name => {
+  const r = fromHyphenToCamel(name.replace(/\s+/, "-"));
+  return r[0].toLowerCase() + r.substring(1);
 };
-const getCellEventName = (d) => {
-    let name = d[cellEventName];
-    if (name !== void 0) {
-        return name;
-    }
-    name = toEventName(d.cellClickEvent ?? `cell-${d.header}-click`);
-    d[cellEventName] = name;
+const getCellEventName = d => {
+  let name = d[cellEventName];
+  if (name !== void 0) {
     return name;
+  }
+  name = toEventName(d.cellClickEvent ?? `cell-${d.header}-click`);
+  d[cellEventName] = name;
+  return name;
 };
-const getHeaderEventName = (d) => {
-    let name = d[headerEventName];
-    if (name !== void 0) {
-        return name;
-    }
-    name = toEventName(d.headerClickEvent ?? `header-${d.header}-click`);
-    d[headerEventName] = name;
+const getHeaderEventName = d => {
+  let name = d[headerEventName];
+  if (name !== void 0) {
     return name;
+  }
+  name = toEventName(d.headerClickEvent ?? `header-${d.header}-click`);
+  d[headerEventName] = name;
+  return name;
 };
-const getFooterEventName = (d) => {
-    let name = d[footerEventName];
-    if (name !== void 0) {
-        return name;
-    }
-    name = toEventName(d.footerClickEvent ?? `footer-${d.header}-click`);
-    d[footerEventName] = name;
+const getFooterEventName = d => {
+  let name = d[footerEventName];
+  if (name !== void 0) {
     return name;
+  }
+  name = toEventName(d.footerClickEvent ?? `footer-${d.header}-click`);
+  d[footerEventName] = name;
+  return name;
 };
 export const SelectAllColumn = {
-    header: "Select All",
-    headerRenderer: () => XNode.create("th", null,
-        XNode.create("input", { type: "checkbox", checked: Bind.oneTime((x) => x.allSelected) })),
-    headerClickHandler: (e) => {
-        const s = e.detail.repeater;
-        const items = s.items;
-        if (!(items)) {
-            return;
-        }
-        const selectedItems = s.selectedItems ??= [];
-        if (s.allSelected) {
-            selectedItems.clear();
-            return;
-        }
-        selectedItems.length = 0;
-        selectedItems.push(...items);
-        selectedItems.refresh();
-    },
-    cellRenderer: () => XNode.create(SelectorCheckBox, null)
+  header: "Select All",
+  headerRenderer: () => XNode.create("th", null, XNode.create("input", {
+    type: "checkbox",
+    checked: Bind.oneTime(x => x.allSelected)
+  })),
+  headerClickHandler: e => {
+    const s = e.detail.repeater;
+    const items = s.items;
+    if (!items) {
+      return;
+    }
+    const selectedItems = s.selectedItems ??= [];
+    if (s.allSelected) {
+      selectedItems.clear();
+      return;
+    }
+    selectedItems.length = 0;
+    selectedItems.push(...items);
+    selectedItems.refresh();
+  },
+  cellRenderer: () => XNode.create(SelectorCheckBox, null)
 };
-export 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 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 default class DataGrid extends TableRepeater {
-    constructor(app, e = document.createElement("table")) {
-        super(app, e);
+  constructor(app, e = document.createElement("table")) {
+    super(app, e);
+  }
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    if (name === "columns") {
+      super.onPropertyChanged("header");
+      super.onPropertyChanged("footer");
+      super.onPropertyChanged("items");
     }
-    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) => XNode.create("tr", null, ...this.columns?.map?.((x) => {
-            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", { "data-recreate": "true", text: x.header, title: 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 = node.attributes ??= {};
-            na["data-click-event"] ??= getHeaderEventName(x);
-            if (x.width !== void 0) {
-                na["style-width"] ??= x.width;
-            }
-            else {
-                if (x.maxWidth !== void 0) {
-                    na["style-max-width"] ??= x.maxWidth;
-                }
-                if (x.minWidth !== void 0) {
-                    na["style-min-width"] ??= x.minWidth;
-                }
-            }
-            return node;
-        }) ?? []);
-        this.itemRenderer = (item) => XNode.create("tr", null, ...this.columns?.map?.((x) => {
-            x.ellipsis ??= true;
-            if (x.cellRenderer === void 0) {
-                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 = x.cellRenderer?.(item);
-            const na = node.attributes ??= {};
-            if (x.ellipsis) {
-                na["data-ellipsis"] = "true";
-            }
-            na["data-click-event"] ??= getCellEventName(x);
-            if (x.width !== void 0) {
-                na["style-width"] ??= x.width;
-            }
-            else {
-                if (x.maxWidth !== void 0) {
-                    na["style-max-width"] ??= x.maxWidth;
-                }
-                if (x.minWidth !== void 0) {
-                    na["style-min-width"] ??= x.minWidth;
-                }
-            }
-            return node;
-        }) ?? []);
-        this.footerRenderer = (item) => XNode.create("tr", null, ...this.columns?.map?.((x) => {
-            const node = x.footerRenderer?.(item);
-            if (node === void 0) {
-                return node;
-            }
-            const na = node.attributes ??= {};
-            if (na["data-click-event"] === void 0) {
-                na["data-click-event"] = getFooterEventName(x);
-            }
-            return node;
-        }) ?? []);
+    if (name === "orderBy") {
+      if (!this.orderBySet) {
+        this.onPropertyChanged("header");
+      }
+      this.orderBySet = true;
     }
-    dispatchHeaderFooterEvent(eventName, type, recreate, originalTarget) {
-        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 = column.headerSortDefault ?? column.headerSort;
-                }
+  }
+  preCreate() {
+    super.preCreate();
+    this.header = true;
+    this.footer = null;
+    this.element.dataset.dataGrid = "data-grid";
+    this.headerRenderer = item => XNode.create("tr", null, ...(this.columns?.map?.(x => {
+      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;
             }
-            detail = {
-                repeater: this,
-                detail,
-                type,
-                order
-            };
+          }
+          return XNode.create("th", null, XNode.create("span", {
+            "data-recreate": "true",
+            text: x.header,
+            title: 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 = node.attributes ??= {};
+      na["data-click-event"] ??= getHeaderEventName(x);
+      if (x.width !== void 0) {
+        na["style-width"] ??= x.width;
+      } else {
+        if (x.maxWidth !== void 0) {
+          na["style-max-width"] ??= x.maxWidth;
         }
-        const ce = new CustomEvent(eventName ?? `${type}Click`, {
-            detail,
-            bubbles: this.bubbleEvents,
-            cancelable: true
-        });
-        originalTarget.dispatchEvent(ce);
-        if (ce.defaultPrevented) {
-            return;
+        if (x.minWidth !== void 0) {
+          na["style-min-width"] ??= x.minWidth;
         }
-        this.invokeHandler(isHeader ? column.headerClickHandler : column.footerClickHandler, ce);
-        if (ce.defaultPrevented) {
-            return;
+      }
+      return node;
+    }) ?? []));
+    this.itemRenderer = item => XNode.create("tr", null, ...(this.columns?.map?.(x => {
+      x.ellipsis ??= true;
+      if (x.cellRenderer === void 0) {
+        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)
+          });
         }
-        if (setOrderBy && this.orderBy === originalOrder) {
-            this.orderBy = order;
-            ce.executed = true;
+      }
+      const node = x.cellRenderer?.(item);
+      const na = node.attributes ??= {};
+      if (x.ellipsis) {
+        na["data-ellipsis"] = "true";
+      }
+      na["data-click-event"] ??= getCellEventName(x);
+      if (x.width !== void 0) {
+        na["style-width"] ??= x.width;
+      } else {
+        if (x.maxWidth !== void 0) {
+          na["style-max-width"] ??= x.maxWidth;
         }
-        if (ce.executed) {
-            this.onPropertyChanged(type);
+        if (x.minWidth !== void 0) {
+          na["style-min-width"] ??= x.minWidth;
         }
-    }
-    dispatchItemEvent(eventName, item, recreate, originalTarget) {
-        const ce = new CustomEvent(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 (eventName === "itemSelect" || eventName === "itemDeselect") {
-            const si = this.selectedItems ??= [];
-            if (si) {
-                const index = si.indexOf(item);
-                if (index === -1) {
-                    if (this.allowMultipleSelection) {
-                        si.add(item);
-                    }
-                    else {
-                        si.set(0, item);
-                    }
-                }
-                else {
-                    si.removeAt(index);
-                }
-            }
-        }
-        if (recreate && ce.executed) {
-            this.refreshItem(item, ce.promise);
+      }
+      return node;
+    }) ?? []));
+    this.footerRenderer = item => XNode.create("tr", null, ...(this.columns?.map?.(x => {
+      const node = x.footerRenderer?.(item);
+      if (node === void 0) {
+        return node;
+      }
+      const na = node.attributes ??= {};
+      if (na["data-click-event"] === void 0) {
+        na["data-click-event"] = getFooterEventName(x);
+      }
+      return node;
+    }) ?? []));
+  }
+  dispatchHeaderFooterEvent(eventName, type, recreate, originalTarget) {
+    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 = column.headerSortDefault ?? column.headerSort;
         }
+      }
+      detail = {
+        repeater: this,
+        detail,
+        type,
+        order
+      };
+    }
+    const ce = new CustomEvent(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;
     }
-    invokeHandler(h, e) {
-        if (!h) {
-            return;
+    if (ce.executed) {
+      this.onPropertyChanged(type);
+    }
+  }
+  dispatchItemEvent(eventName, item, recreate, originalTarget) {
+    const ce = new CustomEvent(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 (eventName === "itemSelect" || eventName === "itemDeselect") {
+      const si = this.selectedItems ??= [];
+      if (si) {
+        const index = si.indexOf(item);
+        if (index === -1) {
+          if (this.allowMultipleSelection) {
+            si.add(item);
+          } else {
+            si.set(0, item);
+          }
+        } else {
+          si.removeAt(index);
         }
-        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?.catch((error) => {
-                if (CancelToken.isCancelled(error)) {
-                    return;
-                }
-                console.error(error);
-            });
+      }
+    }
+    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?.catch(error => {
+        if (CancelToken.isCancelled(error)) {
+          return;
         }
+        console.error(error);
+      });
     }
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], DataGrid.prototype, "columns", void 0);
-//# sourceMappingURL=DataGrid.js.map
+__decorate([BindableProperty, __metadata("design:type", Array)], DataGrid.prototype, "columns", void 0);