@genexus/genexus-ide-ui 0.0.9

package/dist/components/ch-grid-column-settings2.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './ch-window2.js';
+import { d as defineCustomElement$1 } from './ch-window-close2.js';
+
+const chGridColumnSettingsCss = ":host{display:contents}";
+
+const ChGridColumnSettings = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Indicates whether the settings window is currently shown or not.
+     */
+    this.show = false;
+  }
+  windowClosedHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    this.column.showSettings = false;
+  }
+  columnSettingsChangedHandler() {
+    this.column.showSettings = false;
+  }
+  render() {
+    return (h(Host, null, h("ch-window", { modal: true, container: this.column, xAlign: "inside-start", yAlign: "outside-end", caption: this.column.columnName, closeText: "Close", closeOnOutsideClick: true, closeOnEscape: true, allowDrag: "header", hidden: !this.show, exportparts: "mask,window,header,caption,close,main,footer" }, h("slot", null))));
+  }
+  static get style() { return chGridColumnSettingsCss; }
+}, [1, "ch-grid-column-settings", {
+    "column": [16],
+    "show": [516]
+  }, [[0, "windowClosed", "windowClosedHandler"], [0, "columnSettingsChanged", "columnSettingsChangedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-column-settings", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-column-settings":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridColumnSettings);
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ChGridColumnSettings as C, defineCustomElement as d };

package/dist/components/ch-grid-column.js

@@ -0,0 +1,6 @@
+import { C as ChGridColumn$1, d as defineCustomElement$1 } from './ch-grid-column2.js';
+
+const ChGridColumn = ChGridColumn$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChGridColumn, defineCustomElement };

package/dist/components/ch-grid-column2.js

@@ -0,0 +1,272 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './ch-grid-column-resize2.js';
+import { d as defineCustomElement$3 } from './ch-grid-column-settings2.js';
+import { d as defineCustomElement$2 } from './ch-window2.js';
+import { d as defineCustomElement$1 } from './ch-window-close2.js';
+
+const chGridColumnCss = ":host{display:flex;position:sticky;top:0}:host{background-color:inherit;margin-block-start:inherit;margin-block-end:inherit;border-block-start:inherit;border-block-end:inherit;padding-block-start:inherit;padding-block-end:inherit;transition:transform var(--column-drag-transition-duration, 0.2s)}:host{--ch-grid-column-z-index-head:var(--ch-grid-column-header-layer)}:host([show-settings]),:host([resizing]){--ch-grid-column-z-index-active:var(--ch-grid-column-active-layer)}:host([sort-direction=asc]) .bar .sort .sort-asc{visibility:visible}:host([sort-direction=desc]) .bar .sort .sort-desc{visibility:visible}.bar{list-style-type:none;margin:0;padding:0;display:flex;align-items:center}.bar .selector{overflow:hidden;order:0}.bar .selector:not([hidden]){display:flex}.bar .name{display:flex;overflow:hidden;order:1}.bar .name .name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar .sort{position:relative;align-items:center;order:2}.bar .sort:not([hidden]){display:flex}.bar .sort .sort-asc{visibility:hidden;animation-fill-mode:forwards}.bar .sort .sort-desc{position:absolute;visibility:hidden;animation-fill-mode:forwards}.bar .settings{order:3}.bar .resize{align-self:stretch;margin-left:auto;order:4}@keyframes column-sort{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}";
+
+const ChGridColumn = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.columnHiddenChanged = createEvent(this, "columnHiddenChanged", 7);
+    this.columnSizeChanging = createEvent(this, "columnSizeChanging", 7);
+    this.columnSizeChanged = createEvent(this, "columnSizeChanged", 7);
+    this.columnOrderChanged = createEvent(this, "columnOrderChanged", 7);
+    this.columnSortChanged = createEvent(this, "columnSortChanged", 7);
+    this.columnFreezeChanged = createEvent(this, "columnFreezeChanged", 7);
+    this.columnDragStarted = createEvent(this, "columnDragStarted", 7);
+    this.columnDragging = createEvent(this, "columnDragging", 7);
+    this.columnDragEnded = createEvent(this, "columnDragEnded", 7);
+    this.columnSelectorClicked = createEvent(this, "columnSelectorClicked", 7);
+    this.dragging = false;
+    this.dragMouseMoveFn = this.dragMouseMoveHandler.bind(this);
+    /**
+     * One of "plain", "rich", or "tree", indicating the type of cell displayed in the column.
+     */
+    this.columnType = "plain";
+    /**
+     * @deprecated Use "columnTooltip" and "columnNameHidden" instead.
+     * One of "text" or "title", indicating whether the `columnName` should be displayed as the column text or as tooltip of the column image.
+     */
+    this.columnNamePosition = "text";
+    /**
+     * One of "select" or "mark", indicating the mode of rich row selector.
+     * "select" indicates that the row selector is bound to the row selection.
+     * "mark" allows to mark a row independently of the selection.
+     */
+    this.richRowSelectorMode = "select";
+    /**
+     * Indicate the state of the rich row selector.
+     * "" indicates that all rows are unchecked.
+     * "checked" indicates that all rows are checked.
+     * "indeterminate" indicates that some rows are marked.
+     */
+    this.richRowSelectorState = "";
+    /**
+     * A boolean indicating whether the column should be hidden.
+     * The user can display it from the grid settings.
+     */
+    this.hidden = false;
+    /**
+     * A boolean indicating whether the column should be hideable (i.e. whether the user should be able to show/hide the column).
+     */
+    this.hideable = true;
+    /**
+     * A boolean indicating whether the column should be resizable (i.e. whether the user should be able to drag its width).
+     */
+    this.resizable = true;
+    /**
+     * A boolean indicating whether the column should be sortable (i.e. whether the user should be able to click the column header to sort the data).
+     */
+    this.sortable = true;
+    /**
+     * A boolean indicating whether the user should be able to open a settings panel for the column.
+     */
+    this.settingable = true;
+    /**
+     * A boolean indicating whether the settings panel for the column should be visible.
+     */
+    this.showSettings = false;
+    this.settingsClickHandler = (eventInfo) => {
+      eventInfo.stopPropagation();
+      this.showSettings = true;
+    };
+    this.selectorClickHandler = (eventInfo) => {
+      const target = eventInfo.target;
+      this.richRowSelectorState = target.checked ? "checked" : "";
+      this.columnSelectorClicked.emit({
+        checked: target.checked
+      });
+      eventInfo.stopPropagation();
+    };
+  }
+  freezeHandler() {
+    this.columnFreezeChanged.emit({
+      columnId: this.columnId,
+      freeze: this.freeze
+    });
+  }
+  hiddenHandler() {
+    this.columnHiddenChanged.emit({
+      columnId: this.columnId,
+      hidden: this.hidden
+    });
+  }
+  orderHandler() {
+    this.columnOrderChanged.emit({
+      columnId: this.columnId,
+      order: this.order
+    });
+  }
+  sizeHandler() {
+    this.columnSizeChanging.emit({
+      columnId: this.columnId,
+      size: this.size
+    });
+  }
+  sortDirectionHandler() {
+    if (this.sortDirection) {
+      this.columnSortChanged.emit({
+        columnId: this.columnId,
+        sortDirection: this.sortDirection
+      });
+    }
+  }
+  componentDidLoad() {
+    this.el.addEventListener("mousedown", this.mousedownHandler.bind(this));
+  }
+  clickHandler() {
+    if (!this.dragging) {
+      if (this.sortable) {
+        this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
+      }
+    }
+    else {
+      this.dragging = false;
+    }
+  }
+  columnResizeStartedHandler() {
+    this.resizing = true;
+  }
+  columnResizeFinishedHandler() {
+    this.resizing = false;
+    this.columnSizeChanged.emit({
+      columnId: this.columnId,
+      size: this.size
+    });
+  }
+  allowColumnReorder() {
+    return this.el.closest("ch-grid").allowColumnReorder;
+  }
+  mousedownHandler(eventInfo) {
+    eventInfo.preventDefault();
+    eventInfo.stopPropagation();
+    if (this.allowColumnReorder()) {
+      this.dragMouseDownHandler(eventInfo);
+      document.addEventListener("mousemove", this.dragMouseMoveFn, {
+        passive: true
+      });
+      document.addEventListener("mouseup", this.dragMouseUpHandler.bind(this), {
+        once: true
+      });
+    }
+  }
+  dragMouseDownHandler(eventInfo) {
+    this.dragMouseMoveStartPositionX = eventInfo.pageX;
+    this.columnDragStarted.emit({ columnId: this.columnId });
+  }
+  dragMouseMoveHandler(eventInfo) {
+    if (this.dragging ||
+      Math.abs(this.dragMouseMoveStartPositionX - eventInfo.pageX) > 5) {
+      this.dragging = true;
+      this.columnDragging.emit({
+        columnId: this.columnId,
+        positionX: eventInfo.pageX,
+        direction: eventInfo.movementX > 0 ? "right" : "left"
+      });
+    }
+  }
+  dragMouseUpHandler() {
+    document.removeEventListener("mousemove", this.dragMouseMoveFn);
+    this.columnDragEnded.emit({ columnId: this.columnId });
+  }
+  settingsMouseDownHandler(eventInfo) {
+    eventInfo.stopPropagation();
+  }
+  render() {
+    return (h(Host, null, h("ul", { class: "bar", part: "bar" }, this.renderSelector(), this.renderName(), this.renderSort(), this.renderSettings(), this.renderResize()), h("ch-grid-column-settings", { column: this.el, onMouseDown: this.settingsMouseDownHandler, show: this.showSettings, exportparts: "\n            mask:settings-mask,\n            window:settings-window,\n            header:settings-header,\n            caption:settings-caption,\n            close:settings-close,\n            main:settings-main,\n            footer:settings-footer\n          " }, h("slot", { name: "settings" }))));
+  }
+  renderSelector() {
+    return (h("li", { class: "selector", part: "bar-selector", hidden: !(this.columnType === "rich" && this.richRowSelector) }, h("label", { part: "selector-label" }, h("input", { type: "checkbox", part: ["selector", this.richRowSelectorState]
+        .filter(part => part !== "")
+        .join(" "), onClick: this.selectorClickHandler, checked: this.richRowSelectorState === "checked", indeterminate: this.richRowSelectorState === "indeterminate" }))));
+  }
+  renderName() {
+    return (h("li", { class: "name", part: "bar-name", title: this.columnTooltip ||
+        (this.columnNamePosition === "title" ? this.columnName : null) }, this.columnIconUrl || this.columnImage || this.columnImageSet ? (h("img", { class: "name-icon", part: "bar-name-icon", src: this.columnImage || this.columnIconUrl, srcSet: this.columnImageSet })) : (h("div", { class: "name-icon", part: "bar-name-icon" })), h("span", { class: "name-text", part: "bar-name-text", hidden: this.columnNameHidden || this.columnNamePosition !== "text" }, this.columnName)));
+  }
+  renderSort() {
+    return (h("li", { class: "sort", part: "bar-sort", hidden: !this.sortable }, h("div", { class: "sort-asc", part: "bar-sort-ascending" }), h("div", { class: "sort-desc", part: "bar-sort-descending" })));
+  }
+  renderSettings() {
+    return (h("li", { class: "settings", part: "bar-settings", hidden: !this.settingable }, h("button", { class: "button", part: "bar-settings-button", onClick: this.settingsClickHandler })));
+  }
+  renderResize() {
+    return (h("li", { class: "resize", part: "bar-resize", hidden: !this.resizable }, h("ch-grid-column-resize", { column: this.el, class: "resize-split", part: "bar-resize-split" })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "freeze": ["freezeHandler"],
+    "hidden": ["hiddenHandler"],
+    "order": ["orderHandler"],
+    "size": ["sizeHandler"],
+    "sortDirection": ["sortDirectionHandler"]
+  }; }
+  static get style() { return chGridColumnCss; }
+}, [1, "ch-grid-column", {
+    "columnId": [1, "column-id"],
+    "columnType": [1, "column-type"],
+    "columnIconUrl": [1, "column-icon-url"],
+    "columnImage": [1, "column-image"],
+    "columnImageSet": [1, "column-image-set"],
+    "columnName": [1, "column-name"],
+    "columnNameHidden": [4, "column-name-hidden"],
+    "columnTooltip": [1, "column-tooltip"],
+    "columnNamePosition": [1, "column-name-position"],
+    "richRowDrag": [4, "rich-row-drag"],
+    "richRowSelector": [4, "rich-row-selector"],
+    "richRowSelectorMode": [1, "rich-row-selector-mode"],
+    "richRowSelectorState": [1025, "rich-row-selector-state"],
+    "richRowActions": [4, "rich-row-actions"],
+    "displayObserverClass": [1, "display-observer-class"],
+    "freeze": [1],
+    "hidden": [516],
+    "hideable": [4],
+    "order": [514],
+    "physicalOrder": [2, "physical-order"],
+    "size": [1],
+    "resizable": [4],
+    "resizing": [1540],
+    "sortable": [4],
+    "settingable": [4],
+    "sortDirection": [1537, "sort-direction"],
+    "showSettings": [1540, "show-settings"]
+  }, [[1, "click", "clickHandler"], [0, "columnResizeStarted", "columnResizeStartedHandler"], [0, "columnResizeFinished", "columnResizeFinishedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-column", "ch-grid-column-resize", "ch-grid-column-settings", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-column":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridColumn);
+      }
+      break;
+    case "ch-grid-column-resize":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-grid-column-settings":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ChGridColumn as C, defineCustomElement as d };

package/dist/components/ch-grid-columnset.js

@@ -0,0 +1,6 @@
+import { C as ChGridColumnset$1, d as defineCustomElement$1 } from './ch-grid-columnset2.js';
+
+const ChGridColumnset = ChGridColumnset$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChGridColumnset, defineCustomElement };

package/dist/components/ch-grid-columnset2.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const chGridColumnsetCss = "@layer ch-grid {\n  ch-grid-columnset {\n    display: contents;\n  }\n}\n@layer ch-grid {\n  ch-grid-row {\n    display: contents;\n  }\n\n  ch-grid-row[collapsed] > ch-grid-rowset {\n    display: none;\n  }\n\n  ch-grid-row:is([leaf=\"false\"], :has(> ch-grid-rowset)) > ch-grid-cell::part(caret) {\n    visibility: visible;\n  }\n\n  ch-grid-row[dragging] {\n    display: flex;\n    position: fixed;\n    pointer-events: none;\n    box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px;\n    z-index: 1000;\n    transition: top var(--row-drag-transition-duration, 0.1s);\n  }\n}\n@layer ch-grid {\n  ch-grid-rowset {\n    display: contents;\n  }\n\n  ch-grid-rowset[collapsed] > :not(ch-grid-rowset-legend) {\n    display: none;\n  }\n}\n@layer ch-grid {\n  ch-grid-cell {\n    position: sticky;\n    grid-column: var(--grid-column);\n    transition: transform var(--column-drag-transition-duration, 0.2s);\n  }\n\n  ch-grid-cell[selected] {\n    --ch-grid-cell-z-index-active: var(--ch-grid-cell-active-layer);\n  }\n\n  ch-grid-cell,\nch-grid-row[selected] > ch-grid-cell,\nch-grid-row[highlighted] > ch-grid-cell {\n    background-color: inherit;\n    margin-block-start: inherit;\n    margin-block-end: inherit;\n    border-block-start: inherit;\n    border-block-end: inherit;\n    padding-block-start: inherit;\n    padding-block-end: inherit;\n  }\n\n  ch-grid-cell:before {\n    margin-inline-start: calc(var(--indent) * var(--level));\n  }\n\n  ch-grid-cell::part(indent) {\n    width: calc(var(--indent) * var(--level));\n  }\n\n  ch-grid-cell::part(caret) {\n    visibility: hidden;\n  }\n}";
+
+const ChGridColumnset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  columnSortChangedHandler(eventInfo) {
+    const columns = Array.from(this.el.querySelectorAll("ch-grid-column"));
+    columns.forEach(column => {
+      if (column.columnId !== eventInfo.detail.columnId) {
+        column.sortDirection = null;
+      }
+    });
+  }
+  get el() { return this; }
+  static get style() { return chGridColumnsetCss; }
+}, [0, "ch-grid-columnset", undefined, [[0, "columnSortChanged", "columnSortChangedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-columnset"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-columnset":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridColumnset);
+      }
+      break;
+  } });
+}
+
+export { ChGridColumnset as C, defineCustomElement as d };

package/dist/components/ch-grid-row-actions.js

@@ -0,0 +1,30 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const chGridRowActionsCss = "";
+
+const ChGridRowActions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  static get style() { return chGridRowActionsCss; }
+}, [1, "ch-grid-row-actions"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-row-actions"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-row-actions":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridRowActions$1);
+      }
+      break;
+  } });
+}
+
+const ChGridRowActions = ChGridRowActions$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChGridRowActions, defineCustomElement };

package/dist/components/ch-grid-rowset-empty.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const chGridRowsetEmptyCss = "@layer ch-grid {\n  ch-grid-rowset-empty {\n    display: flex;\n    grid-column-start: 1;\n    grid-column-end: -1;\n    margin-inline-start: calc(var(--indent) * (var(--level)));\n  }\n}";
+
+const ChGridRowsetEmpty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  static get style() { return chGridRowsetEmptyCss; }
+}, [0, "ch-grid-rowset-empty"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-rowset-empty"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-rowset-empty":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridRowsetEmpty$1);
+      }
+      break;
+  } });
+}
+
+const ChGridRowsetEmpty = ChGridRowsetEmpty$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChGridRowsetEmpty, defineCustomElement };

package/dist/components/ch-grid-rowset-legend.js

@@ -0,0 +1,6 @@
+import { C as ChGridRowsetLegend$1, d as defineCustomElement$1 } from './ch-grid-rowset-legend2.js';
+
+const ChGridRowsetLegend = ChGridRowsetLegend$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChGridRowsetLegend, defineCustomElement };

package/dist/components/ch-grid-rowset-legend2.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const chGridRowsetLegendCss = ":host{display:flex;grid-column-start:1;grid-column-end:-1;margin-inline-start:calc(var(--indent) * (var(--level) - 1))}:host::part(selector-label){display:none}";
+
+const ChGridRowsetLegend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.rowsetLegendClicked = createEvent(this, "rowsetLegendClicked", 7);
+  }
+  clickHandler() {
+    this.rowsetLegendClicked.emit();
+  }
+  render() {
+    return (h(Host, null, h("div", { part: "caret" }), h("label", { part: "selector-label" }, h("input", { type: "checkbox", part: "selector" })), h("div", { part: "icon" }), h("slot", null)));
+  }
+  static get style() { return chGridRowsetLegendCss; }
+}, [1, "ch-grid-rowset-legend", undefined, [[1, "click", "clickHandler"]]]);
+ChGridRowsetLegend.TAG_NAME = "CH-GRID-ROWSET-LEGEND";
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-rowset-legend"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-rowset-legend":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridRowsetLegend);
+      }
+      break;
+  } });
+}
+
+export { ChGridRowsetLegend as C, defineCustomElement as d };

package/dist/components/ch-grid-settings-columns.js

@@ -0,0 +1,6 @@
+import { C as ChGridSettingsColumns$1, d as defineCustomElement$1 } from './ch-grid-settings-columns2.js';
+
+const ChGridSettingsColumns = ChGridSettingsColumns$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChGridSettingsColumns, defineCustomElement };

package/dist/components/ch-grid-settings-columns2.js

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const chGridSettingsColumnsCss = ":host{display:flex;flex-direction:column}ul{display:contents;list-style-type:none}";
+
+const ChGridSettingsColumns = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.handleClick = (eventInfo) => {
+      const checkbox = eventInfo.target;
+      const column = this.columns.find(column => column.columnId === checkbox.name);
+      column.hidden = !checkbox.checked;
+      eventInfo.stopPropagation();
+    };
+  }
+  getColumnsSorted() {
+    return [...this.columns].sort((a, b) => {
+      if (a.order < b.order) {
+        return -1;
+      }
+      if (a.order > b.order) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+  render() {
+    const columnsSorted = this.getColumnsSorted();
+    return (h("ul", null, columnsSorted.map(column => (h("li", { part: "column" }, h("label", { part: "column-label" }, h("input", { part: !column.hidden
+        ? "column-visible column-visible-checked"
+        : "column-visible", type: "checkbox", checked: !column.hidden, disabled: !column.hideable, name: column.columnId, onClick: this.handleClick }), column.columnName))))));
+  }
+  static get style() { return chGridSettingsColumnsCss; }
+}, [1, "ch-grid-settings-columns", {
+    "columns": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-settings-columns"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-settings-columns":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridSettingsColumns);
+      }
+      break;
+  } });
+}
+
+export { ChGridSettingsColumns as C, defineCustomElement as d };

package/dist/components/ch-grid-settings.js

@@ -0,0 +1,6 @@
+import { C as ChGridSettings$1, d as defineCustomElement$1 } from './ch-grid-settings2.js';
+
+const ChGridSettings = ChGridSettings$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChGridSettings, defineCustomElement };

package/dist/components/ch-grid-settings2.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './ch-window2.js';
+import { d as defineCustomElement$1 } from './ch-window-close2.js';
+
+const chGridSettingsCss = ":host{display:contents;--ch-window-mask-z-index:var(--ch-grid-settings-layer)}";
+
+const ChGridSettings = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.settingsCloseClicked = createEvent(this, "settingsCloseClicked", 7);
+    /**
+     * Indicates whether the settings window is currently shown or not.
+     */
+    this.show = false;
+  }
+  windowClosedHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    this.show = false;
+    this.settingsCloseClicked.emit();
+  }
+  render() {
+    return (h(Host, null, h("ch-window", { modal: true, container: this.grid, caption: "Options", closeText: "Close", closeOnOutsideClick: true, closeOnEscape: true, allowDrag: "header", hidden: !this.show, exportparts: "mask,window,header,caption,close,main,footer" }, h("slot", null))));
+  }
+  static get style() { return chGridSettingsCss; }
+}, [1, "ch-grid-settings", {
+    "grid": [16],
+    "show": [1540]
+  }, [[0, "windowClosed", "windowClosedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-settings", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-settings":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridSettings);
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ChGridSettings as C, defineCustomElement as d };