@genexus/genexus-ide-ui 0.0.12 → 0.0.14

package/dist/esm/{ch-grid_9.entry.js → ch-grid_7.entry.js}

@@ -1,5 +1,4 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
-import { m as mouseEventModifierKey } from './helpers-78ca0d8a.js';
 
 /**
  * The `ch-grid-row` component represents a grid row.
@@ -283,7 +282,7 @@ class HTMLChGridRowsetElement extends HTMLElement {
   }
   hasLegend() {
     var _a;
-    return ((_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName) === "ch-grid-rowset-legend";
+    return ((_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName) === "CH-GRID-ROWSET-LEGEND";
   }
   isNestedRow() {
     return this.parentElement.tagName === "CH-GRID-ROW";
@@ -1803,6 +1802,15 @@ class ChGridManager {
   }
 }
 
+function mouseEventModifierKey(eventInfo) {
+  if (navigator.userAgent.includes("Mac")) {
+    return eventInfo.metaKey;
+  }
+  else {
+    return eventInfo.ctrlKey;
+  }
+}
+
 const chGridCss = ":host{display:flex;position:relative;flex-direction:column;--ch-grid-cell-active-layer:calc(var(--ch-grid-base-layer) * 1);--ch-grid-column-header-layer:calc(var(--ch-grid-base-layer) * 2);--ch-grid-column-freeze-layer:calc(var(--ch-grid-base-layer) * 4);--ch-grid-column-active-layer:calc(var(--ch-grid-base-layer) * 8);--ch-grid-settings-layer:calc(var(--ch-grid-base-layer) * 16)}.main{display:none;grid-auto-flow:dense;overflow-x:auto;user-select:none}";
 
 const ChGrid = class {
@@ -2367,54 +2375,6 @@ const ChGrid = class {
 };
 ChGrid.style = chGridCss;
 
-const chGridActionRefreshCss = "@layer ch-grid {\n  ch-grid-action-refresh[disabled] {\n    pointer-events: none;\n  }\n}";
-
-const ChGridActionRefresh = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.refreshClicked = createEvent(this, "refreshClicked", 7);
-  }
-  pressedHandler(eventInfo) {
-    if (!eventInfo.key || eventInfo.key === "Enter" || eventInfo.key === " ") {
-      this.refreshClicked.emit();
-      eventInfo.stopPropagation();
-    }
-  }
-  render() {
-    return h(Host, { role: "button", tabindex: "0", disabled: this.disabled });
-  }
-};
-ChGridActionRefresh.style = chGridActionRefreshCss;
-
-const chGridActionSettingsCss = "@layer ch-grid {\n  ch-grid-action-settings[disabled] {\n    pointer-events: none;\n  }\n}";
-
-const ChGridActionSettings = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.settingsShowClicked = createEvent(this, "settingsShowClicked", 7);
-  }
-  pressedHandler(eventInfo) {
-    if (!eventInfo.key || eventInfo.key === "Enter" || eventInfo.key === " ") {
-      this.settingsShowClicked.emit();
-      eventInfo.stopPropagation();
-    }
-  }
-  render() {
-    return h(Host, { role: "button", tabindex: "0", disabled: this.disabled });
-  }
-};
-ChGridActionSettings.style = chGridActionSettingsCss;
-
-const chGridActionbarCss = "";
-
-const ChGridActionbar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  get el() { return getElement(this); }
-};
-ChGridActionbar.style = chGridActionbarCss;
-
 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 = class {
@@ -2617,321 +2577,161 @@ const ChGridColumn = class {
 };
 ChGridColumn.style = chGridColumnCss;
 
-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 chGridColumnResizeCss = ":host{display:block;min-width:1px;height:100%;cursor:ew-resize}.resize-mask{position:fixed;inset:0}";
 
-const ChGridColumnset = class {
+const ChGridColumnResize = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-  }
-  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 getElement(this); }
-};
-ChGridColumnset.style = chGridColumnsetCss;
-
-const chPaginatorCss = ":host{display:flex}";
-
-const ChPaginator = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.activePageChanged = createEvent(this, "activePageChanged", 7);
-    this.pageNavigationRequested = createEvent(this, "pageNavigationRequested", 7);
-    /**
-     * The active page number.
-     */
-    this.activePage = 1;
-    /**
-     * The total number of pages.
-     * Use -1 if not known and 'hasNextPage' property to indicate
-     * that the end has been reached.
-     */
-    this.totalPages = 1;
+    this.columnResizeStarted = createEvent(this, "columnResizeStarted", 7);
+    this.columnResizeFinished = createEvent(this, "columnResizeFinished", 7);
+    this.mousemoveFn = this.mousemoveHandler.bind(this);
     /**
-     * Indicates that the end has been reached.
-     * Use when total pages are not known (totalPages = -1).
+     * Whether the component is currently resizing the column.
      */
-    this.hasNextPage = false;
-  }
-  activePageHandler() {
-    this.activePageChanged.emit({ activePage: this.activePage });
+    this.resizing = false;
   }
-  componentWillLoad() {
-    this.loadElements();
+  componentDidLoad() {
+    this.el.addEventListener("mousedown", this.mousedownHandler.bind(this));
   }
-  navigateClickedHandler(eventInfo) {
+  clickHandler(eventInfo) {
     eventInfo.stopPropagation();
-    switch (eventInfo.detail.type) {
-      case "first":
-        this.first();
-        break;
-      case "previous":
-        this.previous();
-        break;
-      case "next":
-        this.next();
-        break;
-      case "last":
-        this.last();
-        break;
-    }
-    this.pageNavigationRequested.emit({ type: eventInfo.detail.type });
   }
-  pageChangedHandler(eventInfo) {
+  dblclickHandler(eventInfo) {
     eventInfo.stopPropagation();
-    const emitPageNavigationRequested = this.activePage !== eventInfo.detail.page;
-    this.activePage = eventInfo.detail.page;
-    if (emitPageNavigationRequested) {
-      this.pageNavigationRequested.emit({
-        type: "goto",
-        page: eventInfo.detail.page
-      });
+    if (mouseEventModifierKey(eventInfo)) {
+      this.column.size = "auto";
+    }
+    else {
+      this.column.size = "max-content";
     }
   }
-  loadElements() {
-    this.elPages = this.el.querySelector("ch-paginator-pages");
-    this.elFirst = this.el.querySelector("ch-paginator-navigate[type='first']");
-    this.elPrevious = this.el.querySelector("ch-paginator-navigate[type='previous']");
-    this.elNext = this.el.querySelector("ch-paginator-navigate[type='next']");
-    this.elLast = this.el.querySelector("ch-paginator-navigate[type='last']");
+  columnResizeStartedHandler() {
+    this.resizing = true;
   }
-  keyDownHandler(eventInfo) {
-    switch (eventInfo.key) {
-      case "Home":
-        this.first();
-        this.elFirst.focus();
-        break;
-      case "PageUp":
-        this.previous();
-        this.elPrevious.focus();
-        break;
-      case "PageDown":
-        this.next();
-        this.elNext.focus();
-        break;
-      case "End":
-        this.last();
-        this.elLast.focus();
-        break;
+  columnResizeFinishedHandler() {
+    this.resizing = false;
+  }
+  mousedownHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    eventInfo.preventDefault();
+    this.startPageX = eventInfo.pageX;
+    this.startColumnWidth = this.column.getBoundingClientRect().width;
+    document.addEventListener("mousemove", this.mousemoveFn, { passive: true });
+    document.addEventListener("mouseup", this.mouseupHandler.bind(this), {
+      once: true
+    });
+    this.columnResizeStarted.emit();
+  }
+  mousemoveHandler(eventInfo) {
+    const columnSize = this.startColumnWidth - (this.startPageX - eventInfo.pageX);
+    if (columnSize >= 0) {
+      this.column.size = `minmax(min-content, ${columnSize}px)`;
     }
   }
-  first() {
-    this.activePage = 1;
+  mouseupHandler() {
+    document.removeEventListener("mousemove", this.mousemoveFn);
+    this.columnResizeFinished.emit();
   }
-  previous() {
-    this.activePage = Math.max(this.activePage - 1, 1);
+  render() {
+    return h("div", { class: "resize-mask", hidden: !this.resizing });
+  }
+  get el() { return getElement(this); }
+};
+ChGridColumnResize.style = chGridColumnResizeCss;
+
+const chGridColumnSettingsCss = ":host{display:contents}";
+
+const ChGridColumnSettings = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Indicates whether the settings window is currently shown or not.
+     */
+    this.show = false;
   }
-  next() {
-    this.activePage =
-      this.totalPages < 0
-        ? this.activePage + 1
-        : Math.min(this.activePage + 1, this.totalPages);
+  windowClosedHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    this.column.showSettings = false;
   }
-  last() {
-    this.activePage = this.totalPages;
+  columnSettingsChangedHandler() {
+    this.column.showSettings = false;
   }
   render() {
-    if (this.elPages) {
-      this.elPages.totalPages = this.totalPages;
-      this.elPages.page = this.activePage;
-    }
-    if (this.elFirst) {
-      this.elFirst.disabled = this.activePage === 1;
-    }
-    if (this.elPrevious) {
-      this.elPrevious.disabled = this.activePage === 1;
-    }
-    if (this.elNext) {
-      this.elNext.disabled =
-        this.activePage === this.totalPages ||
-          (this.totalPages < 0 && !this.hasNextPage);
-    }
-    if (this.elLast) {
-      this.elLast.disabled =
-        this.activePage === this.totalPages ||
-          (this.totalPages < 0 && !this.hasNextPage);
-    }
+    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))));
+  }
+};
+ChGridColumnSettings.style = chGridColumnSettingsCss;
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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 getElement(this); }
-  static get watchers() { return {
-    "activePage": ["activePageHandler"]
-  }; }
 };
-ChPaginator.style = chPaginatorCss;
+ChGridColumnset.style = chGridColumnsetCss;
 
-const chPaginatorNavigateCss = "ch-paginator-navigate[disabled]{pointer-events:none}";
+const chGridSettingsCss = ":host{display:contents;--ch-window-mask-z-index:var(--ch-grid-settings-layer)}";
 
-const ChPaginatorNavigate = class {
+const ChGridSettings = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.navigateClicked = createEvent(this, "navigateClicked", 7);
+    this.settingsCloseClicked = createEvent(this, "settingsCloseClicked", 7);
+    /**
+     * Indicates whether the settings window is currently shown or not.
+     */
+    this.show = false;
   }
-  pressedHandler(eventInfo) {
-    if (!eventInfo.key || eventInfo.key === "Enter" || eventInfo.key === " ") {
-      this.navigateClicked.emit({ type: this.type });
-      eventInfo.stopPropagation();
-    }
+  windowClosedHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    this.show = false;
+    this.settingsCloseClicked.emit();
   }
   render() {
-    return h(Host, { role: "button", tabindex: "0", disabled: this.disabled });
+    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))));
   }
 };
-ChPaginatorNavigate.style = chPaginatorNavigateCss;
-
-var GxControlType;
-(function (GxControlType) {
-  GxControlType[GxControlType["EDIT"] = 1] = "EDIT";
-  GxControlType[GxControlType["RADIO"] = 4] = "RADIO";
-  GxControlType[GxControlType["COMBO"] = 5] = "COMBO";
-  GxControlType[GxControlType["CHECK"] = 7] = "CHECK";
-})(GxControlType || (GxControlType = {}));
-var GxControlDataType;
-(function (GxControlDataType) {
-  GxControlDataType[GxControlDataType["NUMBER"] = 0] = "NUMBER";
-  GxControlDataType[GxControlDataType["CHAR"] = 1] = "CHAR";
-  GxControlDataType[GxControlDataType["DATE"] = 2] = "DATE";
-  GxControlDataType[GxControlDataType["DATETIME"] = 3] = "DATETIME";
-  GxControlDataType[GxControlDataType["VARCHAR"] = 5] = "VARCHAR";
-  GxControlDataType[GxControlDataType["LONGVARCHAR"] = 6] = "LONGVARCHAR";
-  GxControlDataType[GxControlDataType["BOOLEAN"] = 7] = "BOOLEAN";
-})(GxControlDataType || (GxControlDataType = {}));
+ChGridSettings.style = chGridSettingsCss;
 
-const gxGridChameleonColumnFilterCss = "";
+const chGridSettingsColumnsCss = ":host{display:flex;flex-direction:column}ul{display:contents;list-style-type:none}";
 
-const GridChameleonColumnFilter = class {
+const ChGridSettingsColumns = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.columnSettingsChanged = createEvent(this, "columnSettingsChanged", 7);
-    this.filterEnum = [];
-    this.applyClickHandler = () => {
-      this.equal = this.getControlValue(this.inputEqual);
-      this.less = this.getControlValue(this.inputLess);
-      this.greater = this.getControlValue(this.inputGreater);
-      this.columnSettingsChanged.emit({
-        column: this.column,
-        equal: this.equal,
-        less: this.less,
-        greater: this.greater
-      });
-    };
-    this.resetClickHandler = () => {
-      this.equal = "";
-      this.less = "";
-      this.greater = "";
-      this.columnSettingsChanged.emit({
-        column: this.column,
-        equal: this.equal,
-        less: this.less,
-        greater: this.greater
-      });
+    this.handleClick = (eventInfo) => {
+      const checkbox = eventInfo.target;
+      const column = this.columns.find(column => column.columnId === checkbox.name);
+      column.hidden = !checkbox.checked;
+      eventInfo.stopPropagation();
     };
   }
-  componentWillLoad() {
-    if (Array.isArray(this.column.FilterEnum) &&
-      this.column.FilterEnum.length > 0) {
-      this.filterEnum = this.column.FilterEnum;
-    }
-  }
-  getControlValue(input) {
-    var _a;
-    const value = (_a = input === null || input === void 0 ? void 0 : input.value) !== null && _a !== void 0 ? _a : "";
-    let dataType = this.column.gxControl.dataType;
-    if (dataType === GxControlDataType.DATETIME &&
-      this.column.FilterDateTimeAsDate === -1) {
-      dataType = GxControlDataType.DATE;
-    }
-    switch (dataType) {
-      case GxControlDataType.DATE:
-        return gx.date.ctod(value, "Y4MD").toString();
-      case GxControlDataType.DATETIME:
-        return gx.date.ctot(value, "Y4MD").toString();
-      default:
-        return value;
-    }
-  }
-  toControlValue(value) {
-    let dataType = this.column.gxControl.dataType;
-    if (!value) {
-      return "";
-    }
-    if (dataType === GxControlDataType.DATETIME &&
-      this.column.FilterDateTimeAsDate === -1) {
-      dataType = GxControlDataType.DATE;
-    }
-    switch (dataType) {
-      case GxControlDataType.DATE:
-        return this.convertGxDateToISO(gx.date.ctod(value), false);
-      case GxControlDataType.DATETIME:
-        return this.convertGxDateToISO(gx.date.ctot(value), true);
-      default:
-        return value;
-    }
-  }
-  convertGxDateToISO(gxdate, isDateTime) {
-    const pad = (n) => n.toString().padStart(2, "0");
-    const date = gxdate.Value;
-    if (gx.date.isNullDate(date)) {
-      return "";
-    }
-    if (isDateTime) {
-      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
-    }
-    else {
-      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-    }
-  }
-  getFilterInputType(dataType) {
-    switch (dataType) {
-      case GxControlDataType.BOOLEAN:
-        return "checkbox";
-      case GxControlDataType.CHAR:
-      case GxControlDataType.VARCHAR:
-      case GxControlDataType.LONGVARCHAR:
-        return "text";
-      case GxControlDataType.DATE:
-        return "date";
-      case GxControlDataType.DATETIME:
-        return "datetime-local";
-      case GxControlDataType.NUMBER:
-        return "number";
-      default:
-        return "text";
-    }
-  }
-  renderColumnFilterControl(input, type, dataType, possibleValues, label, value) {
-    const part = input.replace("input", "").toLowerCase();
-    if (this.filterEnum.length > 0) {
-      type = GxControlType.COMBO;
-      possibleValues = this.filterEnum.map(filter => [
-        filter.Value,
-        filter.Description
-      ]);
-    }
-    if (dataType === GxControlDataType.DATETIME &&
-      this.column.FilterDateTimeAsDate === -1) {
-      dataType = GxControlDataType.DATE;
-    }
-    switch (type) {
-      case GxControlType.EDIT:
-      case GxControlType.CHECK:
-        return (h("label", { part: `label ${part}` }, label, h("input", { type: this.getFilterInputType(dataType), value: this.toControlValue(value), ref: el => (this[input] = el), part: `field ${part}` })));
-      case GxControlType.COMBO:
-        return (h("label", { part: `label ${part}` }, label, h("select", { ref: el => (this[input] = el), part: `field ${part}` }, possibleValues.map(([optionValue, optionDescription]) => (h("option", { value: optionValue, selected: optionValue === value }, optionDescription))))));
-    }
+  getColumnsSorted() {
+    return [...this.columns].sort((a, b) => {
+      if (a.order < b.order) {
+        return -1;
+      }
+      if (a.order > b.order) {
+        return 1;
+      }
+      return 0;
+    });
   }
   render() {
-    return (h(Host, null, h("fieldset", { part: "main" }, h("caption", { part: "caption" }, this.column.FilterCaption), this.column.FilterMode === "single" &&
-      this.renderColumnFilterControl("inputEqual", this.column.gxControl.type, this.column.gxControl.dataType, this.column.gxControl.possibleValues, this.column.FilterLabelEqual, this.equal), this.column.FilterMode === "range" &&
-      this.renderColumnFilterControl("inputGreater", this.column.gxControl.type, this.column.gxControl.dataType, this.column.gxControl.possibleValues, this.column.FilterLabelGreater, this.greater), this.column.FilterMode === "range" &&
-      this.renderColumnFilterControl("inputLess", this.column.gxControl.type, this.column.gxControl.dataType, this.column.gxControl.possibleValues, this.column.FilterLabelLess, this.less)), h("section", { part: "footer" }, h("button", { part: "button reset", onClick: this.resetClickHandler }, this.buttonResetText), h("button", { part: "button apply", onClick: this.applyClickHandler }, this.buttonApplyText))));
+    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))))));
   }
-  get el() { return getElement(this); }
 };
-GridChameleonColumnFilter.style = gxGridChameleonColumnFilterCss;
+ChGridSettingsColumns.style = chGridSettingsColumnsCss;
 
-export { ChGrid as ch_grid, ChGridActionRefresh as ch_grid_action_refresh, ChGridActionSettings as ch_grid_action_settings, ChGridActionbar as ch_grid_actionbar, ChGridColumn as ch_grid_column, ChGridColumnset as ch_grid_columnset, ChPaginator as ch_paginator, ChPaginatorNavigate as ch_paginator_navigate, GridChameleonColumnFilter as gx_grid_chameleon_column_filter };
+export { ChGrid as ch_grid, ChGridColumn as ch_grid_column, ChGridColumnResize as ch_grid_column_resize, ChGridColumnSettings as ch_grid_column_settings, ChGridColumnset as ch_grid_columnset, ChGridSettings as ch_grid_settings, ChGridSettingsColumns as ch_grid_settings_columns };