@genexus/genexus-ide-ui 0.0.20 → 0.0.22

package/dist/cjs/ch-accordion.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const accordionCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--chevron:url('data:image/svg+xml,<svg width=\"14\" height=\"8\" viewBox=\"0 0 14 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.645 0.5L7 4.83019L12.355 0.5L14 1.83962L7 7.5L0 1.83962L1.645 0.5Z\" fill=\"%23000\"/></svg>');display:grid;grid-template-rows:min-content min-content;width:100%;height:100%;text-align:start}.header{display:grid;grid-template-columns:1fr min-content;grid-template-rows:1fr;text-align:start;cursor:pointer}.chevron{align-self:center;width:14px;height:8px;-webkit-mask:var(--chevron);background-color:#000;transition:transform 250ms}.chevron--expanded{transform:rotate(180deg)}.expandable{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 250ms}.expanded{visibility:visible;grid-template-rows:1fr}.expandable ::slotted(*){height:100%;overflow:hidden}";
 

package/dist/cjs/ch-checkbox.cjs.entry.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a32426a.js');
+const reserverdNames = require('./reserverd-names-1b00889a.js');
+
+const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;inset:calc(50% - min(0.25em, 5px));width:min(0.5em, 10px);height:min(0.5em, 10px);background-color:#000;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
+
+const CHECKBOX_ID = "checkbox";
+const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;
+const CheckBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.click = index.createEvent(this, "click", 7);
+    this.input = index.createEvent(this, "input", 7);
+    /**
+     * This attribute lets you specify if the element is disabled.
+     * If disabled, it will not fire any user interaction related event
+     * (for example, click event).
+     */
+    this.disabled = false;
+    /**
+     * True to highlight control when an action is fired.
+     */
+    this.highlightable = false;
+    /**
+     * `true` if the control's value is indeterminate.
+     */
+    this.indeterminate = false;
+    /**
+     * This attribute indicates that the user cannot modify the value of the control.
+     * Same as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+     * attribute for `input` elements.
+     */
+    this.readonly = false;
+    this.getValue = (checked) => checked ? this.checkedValue : this.unCheckedValue;
+    /**
+     * Checks if it is necessary to prevent the click from bubbling
+     */
+    this.handleClick = (event) => {
+      if (this.readonly || this.disabled) {
+        return;
+      }
+      event.stopPropagation();
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      const inputRef = event.target;
+      const checked = inputRef.checked;
+      const value = this.getValue(checked);
+      this.checked = checked;
+      this.value = value;
+      inputRef.value = value; // Update input's value before emitting the event
+      this.input.emit(event);
+      if (this.highlightable) {
+        this.click.emit();
+      }
+    };
+  }
+  valueChanged() {
+    this.checked = this.value === this.checkedValue;
+  }
+  componentWillLoad() {
+    this.checked = this.value === this.checkedValue;
+  }
+  render() {
+    var _a;
+    const additionalParts = PARTS(this.checked, this.indeterminate);
+    return (index.h(index.Host, { class: {
+        [reserverdNames.DISABLED_CLASS]: this.disabled,
+        "ch-checkbox--actionable": (!this.readonly && !this.disabled) ||
+          (this.readonly && this.highlightable)
+      } }, index.h("div", { class: {
+        container: true,
+        "container--checked": this.checked
+      }, part: `container${additionalParts}` }, index.h("input", { "aria-label": ((_a = this.accessibleName) === null || _a === void 0 ? void 0 : _a.trim()) !== "" &&
+        this.accessibleName !== this.caption
+        ? this.accessibleName
+        : null, id: this.caption ? CHECKBOX_ID : null, class: "input", part: "input", type: "checkbox", checked: this.checked, disabled: this.disabled || this.readonly, indeterminate: this.indeterminate, value: this.value, onClick: this.handleClick, onInput: this.handleChange }), index.h("div", { class: {
+        option: true,
+        "option--checked": this.checked && !this.indeterminate,
+        "option--indeterminate": this.indeterminate
+      }, part: `option${additionalParts}`, "aria-hidden": "true" })), this.caption && (index.h("label", { class: "label", part: "label", htmlFor: CHECKBOX_ID, onClick: this.handleClick }, this.caption))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+CheckBox.style = checkboxCss;
+
+exports.ch_checkbox = CheckBox;

package/dist/cjs/ch-drag-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const dragBarCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}.container{display:flex;width:100%;height:100%}.bar{position:relative;width:4px;background-color:#323942;cursor:col-resize}.bar-item{position:absolute;inset-block-start:calc(50% - 35px);inset-inline-start:calc(2px - 10px);display:flex;align-items:center;justify-content:center;background-color:#2d333a;border-radius:10px;width:20px;height:70px;padding:7px 4px;touch-action:manipulation;user-select:none}.bar-item-src{display:block;width:100%;height:100%;pointer-events:none}.bar-item-src--rtl{transform:rotateY(180deg)}.start-component{display:flex;width:var(--ch-drag-bar__start-component-width);max-width:calc(100% - 10px - 2px)}.end-component{display:flex;flex:1}";
 

package/dist/cjs/ch-dropdown-item-separator.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const dropdownItemSeparatorCss = ":host{display:flex;height:1px;background-color:#99999980;margin-block:2px}";
 

package/dist/cjs/ch-dropdown-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}@media (prefers-color-scheme: light){.action:focus,.action:hover{background-color:#ccc}.action:active{background-color:#e9e9e9}}@media (prefers-color-scheme: dark){.action:focus,.action:hover{background-color:#3e3e40}.action:active{background-color:#575965}}:host{display:flex;width:100%;height:100%}.action{display:flex;align-items:center;column-gap:8px;width:100%;height:100%;cursor:pointer;padding-block:8px;padding-inline:16px;font-size:0.875em;text-align:start;transition-property:background-color, border-color, box-shadow, color, filter, opacity;transition-duration:250ms}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}";
 

package/dist/cjs/ch-dropdown.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}@media (prefers-color-scheme: light){.section{background-color:#fbfbfb;color:#000}}@media (prefers-color-scheme: dark){.section{background-color:#242426;color:#e9e9e9}}:host{--ch-dropdown-rtl-initial-X:1;--ch-dropdown-translateX:0;--ch-dropdown-translateY:0;display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{box-shadow:0px 0px 0 1px currentColor;transition:box-shadow 250ms}.dummy-separation{display:flex;position:absolute;z-index:107}.dummy-separation--vertical{width:100%;height:var(--separation-between-button-size)}.dummy-separation--top{inset-block-start:var(--separation-between-button)}.dummy-separation--bottom{inset-block-end:var(--separation-between-button)}.dummy-separation--horizontal{width:var(--separation-between-button-size);height:100%}.dummy-separation--left{inset-inline-start:var(--separation-between-button)}.dummy-separation--right{inset-inline-end:var(--separation-between-button)}.section{position:absolute;border-radius:5px;box-shadow:0 3px 4px #80808024, 0 3px 3px -2px #8080801f, 0 1px 8px #80808030;width:max-content;max-width:350px;z-index:107}.header+.list,.list+.footer{margin-block-start:8px}.list{display:flex;flex-direction:column;gap:4px}.position--top{inset-block-start:var(--separation-between-button);transform:translate(var(--ch-dropdown-translateX), -100%)}.position--right{inset-inline-end:var(--separation-between-button);transform:translate(calc(100% * var(--ch-dropdown-rtl-initial-X)), var(--ch-dropdown-translateY))}.position--bottom{inset-block-end:var(--separation-between-button);transform:translate(var(--ch-dropdown-translateX), 100%)}.position--left{inset-inline-start:var(--separation-between-button);transform:translate(calc(-100% * var(--ch-dropdown-rtl-initial-X)), var(--ch-dropdown-translateY))}.align--left{inset-inline-start:0}.align--center{inset-inline-start:50%;--ch-dropdown-translateX:calc(-50% * var(--ch-dropdown-rtl-initial-X))}.align--right{inset-inline-end:0}.valign--top{inset-block-start:0}.valign--middle{inset-block-start:50%;--ch-dropdown-translateY:calc(-50% * var(--ch-dropdown-rtl-initial-X))}.valign--bottom{inset-block-end:0}";
 

package/dist/cjs/ch-form-checkbox.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const chFormCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}:host{display:flex}:host .label{display:block;margin-bottom:16px}:host .label:last-child{margin-bottom:0}:host input:focus+.checkmark{box-shadow:0px 0px 0px var(--border-width-sm) var(--color-primary-active);border-color:var(--color-primary-active) !important}:host input[disabled]{cursor:not-allowed}:host input[disabled]+.checkmark{border-color:var(--darkGray) !important;pointer-events:none}:host input[disabled]+.checkmark:after{border-color:var(--darkGray) !important}:host([inline]) .outer-wrapper{display:flex}:host([inline]) .label{margin-inline-end:var(--spacing-comp-04);margin-bottom:0}:host{}:host .label{display:flex;align-items:center;position:relative;cursor:pointer;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;margin-bottom:var(--spacing-lay-xs)}:host .label__required{font-size:var(--font-size-xs);padding-left:var(--spacing-lay-xs)}:host .label input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host .label input[on-focus]+.checkmark{box-shadow:inset 0px 0px 0px 1px var(--color-primary-active);border-color:var(--color-primary-active) !important}:host .checkmark:focus{box-shadow:none}:host .checkmark{display:inline-block;position:relative;margin-inline-end:var(--spacing-comp-02);height:var(--spacing-comp-04);width:var(--spacing-comp-04);border-width:1px;border-style:solid;border-radius:3px;border-color:var(--gray-04);box-sizing:border-box;flex-shrink:0;background:var(--color-background)}:host .checkmark.no-label{margin-inline-end:0}:host .checkmark:after{content:\"\";position:absolute;display:none}:host .label input~.checkmark:after{display:block;border-color:transparent}:host .label input:checked~.checkmark:after{display:block;border-color:var(--color-primary-hover);transition-property:border-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .label input:checked~.checkmark{border-color:var(--color-primary-hover)}:host .label .checkmark:after{left:5px;top:2px;width:3px;height:7px;border:solid;border-color:var(--color-primary-hover);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host([indeterminate]) .label input:checked~.checkmark:after{display:block;width:10px;height:2px;transform:rotate(0deg);border:0;background-color:var(--color-primary-hover);left:2px;top:6px}:host([disabled=true]) label{cursor:not-allowed}";
 

package/dist/cjs/ch-grid-action-refresh_6.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const chGridActionRefreshCss = "@layer ch-grid {\n  ch-grid-action-refresh[disabled] {\n    pointer-events: none;\n  }\n}";
 

package/dist/cjs/ch-grid-column-display.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const chGridColumnDisplayCss = "@layer ch-grid {\n  ch-grid-column-display {\n    position: fixed !important;\n    width: 0 !important;\n    height: 0 !important;\n    padding: 0 !important;\n    border: none !important;\n    margin: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    pointer-events: none !important;\n  }\n}";
 

package/dist/cjs/ch-grid-column-resize_4.cjs.entry.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a32426a.js');
+const helpers = require('./helpers-8845f008.js');
+
+const chGridColumnResizeCss = ":host{display:block;min-width:1px;height:100%;cursor:ew-resize}.resize-mask{position:fixed;inset:0}";
+
+const ChGridColumnResize = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.columnResizeStarted = index.createEvent(this, "columnResizeStarted", 7);
+    this.columnResizeFinished = index.createEvent(this, "columnResizeFinished", 7);
+    this.mousemoveFn = this.mousemoveHandler.bind(this);
+    /**
+     * Whether the component is currently resizing the column.
+     */
+    this.resizing = false;
+  }
+  componentDidLoad() {
+    this.el.addEventListener("mousedown", this.mousedownHandler.bind(this));
+  }
+  clickHandler(eventInfo) {
+    eventInfo.stopPropagation();
+  }
+  dblclickHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    if (helpers.mouseEventModifierKey(eventInfo)) {
+      this.column.size = "auto";
+    }
+    else {
+      this.column.size = "max-content";
+    }
+  }
+  columnResizeStartedHandler() {
+    this.resizing = true;
+  }
+  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)`;
+    }
+  }
+  mouseupHandler() {
+    document.removeEventListener("mousemove", this.mousemoveFn);
+    this.columnResizeFinished.emit();
+  }
+  render() {
+    return index.h("div", { class: "resize-mask", hidden: !this.resizing });
+  }
+  get el() { return index.getElement(this); }
+};
+ChGridColumnResize.style = chGridColumnResizeCss;
+
+const chGridColumnSettingsCss = ":host{display:contents}";
+
+const ChGridColumnSettings = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * 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 (index.h(index.Host, null, index.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" }, index.h("slot", null))));
+  }
+};
+ChGridColumnSettings.style = chGridColumnSettingsCss;
+
+const chGridSettingsCss = ":host{display:contents;--ch-window-mask-z-index:var(--ch-grid-settings-layer)}";
+
+const ChGridSettings = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.settingsCloseClicked = index.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 (index.h(index.Host, null, index.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" }, index.h("slot", null))));
+  }
+};
+ChGridSettings.style = chGridSettingsCss;
+
+const chGridSettingsColumnsCss = ":host{display:flex;flex-direction:column}ul{display:contents;list-style-type:none}";
+
+const ChGridSettingsColumns = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h("ul", null, columnsSorted.map(column => (index.h("li", { part: "column" }, index.h("label", { part: "column-label" }, index.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))))));
+  }
+};
+ChGridSettingsColumns.style = chGridSettingsColumnsCss;
+
+exports.ch_grid_column_resize = ChGridColumnResize;
+exports.ch_grid_column_settings = ChGridColumnSettings;
+exports.ch_grid_settings = ChGridSettings;
+exports.ch_grid_settings_columns = ChGridSettingsColumns;

package/dist/cjs/ch-grid-row-actions.cjs.entry.js

@@ -2,18 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
-const chGridRowActionsCss = ":host{display:contents}";
+const chGridRowActionsCss = ":host{display:contents}.mouse-position{position:fixed;pointer-events:none}";
 
 const ChGridRowActions = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.rowActionOpened = index.createEvent(this, "rowActionOpened", 7);
   }
   /**
    * Opens the row actions on row hover.
    */
   async openRowHover(row) {
+    this.rowActionOpened.emit();
     this.window.container = row;
     this.window.xAlign = "inside-end";
     this.window.yAlign = "center";
@@ -24,20 +26,41 @@ const ChGridRowActions = class {
    * Opens the row actions on the row-actions-button cell.
    */
   async openRowActions(cell) {
+    this.rowActionOpened.emit();
     this.window.container = cell;
     this.window.xAlign = "outside-start";
     this.window.yAlign = "outside-end";
     this.window.closeOnOutsideClick = true;
+    this.window.closeOnEscape = true;
     this.window.hidden = false;
   }
+  /**
+   * Opens the row actions on the row-actions-button cell.
+   */
+  async openRowContext(clientX, clientY) {
+    const eventInfo = this.rowActionOpened.emit();
+    if (!eventInfo.defaultPrevented) {
+      this.window.hidden = true;
+      this.mousePosition.style.top = `${clientY}px`;
+      this.mousePosition.style.left = `${clientX}px`;
+      this.mousePosition.hidden = false;
+      this.window.container = this.mousePosition;
+      this.window.xAlign = "outside-end";
+      this.window.yAlign = "outside-end";
+      this.window.closeOnOutsideClick = true;
+      this.window.closeOnEscape = true;
+      this.window.hidden = false;
+    }
+  }
   /**
    * Closes the row actions window.
    */
   async close() {
     this.window.hidden = true;
+    this.mousePosition.hidden = true;
   }
   render() {
-    return (index.h(index.Host, { slot: "row-actions" }, index.h("ch-window", { ref: el => (this.window = el), xAlign: "inside-end", modal: false, showHeader: false, showFooter: false, exportparts: "main:box" }, index.h("slot", null))));
+    return (index.h(index.Host, { slot: "row-actions" }, index.h("ch-window", { ref: el => (this.window = el), xAlign: "inside-end", modal: false, showHeader: false, showFooter: false, exportparts: "mask,window,header,caption,close,main,footer" }, index.h("slot", null)), index.h("div", { class: "mouse-position", hidden: true, ref: el => (this.mousePosition = el) })));
   }
 };
 ChGridRowActions.style = chGridRowActionsCss;

package/dist/cjs/ch-grid-rowset-empty.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 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}";
 

package/dist/cjs/ch-grid-rowset-legend.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a32426a.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.rowsetLegendClicked = index.createEvent(this, "rowsetLegendClicked", 7);
+  }
+  clickHandler() {
+    this.rowsetLegendClicked.emit();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { part: "caret" }), index.h("label", { part: "selector-label" }, index.h("input", { type: "checkbox", part: "selector" })), index.h("div", { part: "icon" }), index.h("slot", null)));
+  }
+};
+ChGridRowsetLegend.style = chGridRowsetLegendCss;
+
+exports.ch_grid_rowset_legend = ChGridRowsetLegend;

package/dist/cjs/ch-grid-virtual-scroller.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b74a39f.js');
+const index = require('./index-5a32426a.js');
 
 const chGridVirtualScrollerCss = "@layer ch-grid {\n  ch-grid-virtual-scroller {\n    display: contents;\n  }\n\n  ch-grid-virtual-scroller::before {\n    content: \"\";\n    height: 0;\n    padding-top: inherit;\n    grid-column: 1/-1;\n    grid-row: 2;\n  }\n\n  ch-grid-virtual-scroller::after {\n    content: \"\";\n    height: 0;\n    padding-bottom: inherit;\n    grid-column: 1/-1;\n  }\n}";