@genexus/genexus-ide-ui 0.0.9

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

@@ -0,0 +1,261 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.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}";
+
+const EXPANDABLE_BUTTON_ID = "expandable-button";
+const SECTION_ID = "section";
+const DROPDOWN_ITEM_TAG_NAME = "ch-dropdown-item";
+const DROPDOWN_ITEM_SELECTOR = `:scope > ${DROPDOWN_ITEM_TAG_NAME}`;
+// Keys
+const TAB_KEY = "Tab";
+const ChDropDown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.expandedChange = createEvent(this, "expandedChange", 7);
+    this.keyEventsDictionary = {
+      ArrowDown: (event) => {
+        event.preventDefault();
+        if (!this.currentFocusedItem) {
+          this.focusFirstDropDownItem();
+          return;
+        }
+        const nextDropDownItem = this.findNextDropDownItemSibling();
+        if (nextDropDownItem) {
+          // This is wrong, it should call the focusElement Method. StencilJS bug?
+          nextDropDownItem.handleFocusElement();
+        }
+      },
+      ArrowUp: (event) => {
+        event.preventDefault();
+        if (!this.currentFocusedItem) {
+          this.focusFirstDropDownItem();
+          return;
+        }
+        const previousDropDownItem = this.findPreviousDropDownItemSibling();
+        if (previousDropDownItem) {
+          // This is wrong, it should call the focusElement Method. StencilJS bug?
+          previousDropDownItem.handleFocusElement();
+        }
+      },
+      Escape: () => {
+        this.closeDropdown();
+        this.returnFocusToButton();
+      }
+    };
+    this.showHeader = false;
+    this.showFooter = false;
+    this.expanded = false;
+    this.expandedWithHover = false;
+    /**
+     * Specifies the horizontal alignment the dropdown section has when using
+     * `position === "Top"` or `position === "Bottom"`.
+     */
+    this.align = "Center";
+    /**
+     * This attribute lets you specify the label for the expandable button.
+     * Important for accessibility.
+     */
+    this.buttonLabel = "Show options";
+    /**
+     * Determine which actions on the expandable button display the dropdown
+     * section.
+     */
+    this.expandBehavior = "Click or Hover";
+    /**
+     * Determine if the dropdown section should be opened when the expandable
+     * button of the control is focused.
+     */
+    this.openOnFocus = false;
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the expandable button.
+     */
+    this.position = "Bottom";
+    /**
+     * Specifies the separation (in pixels) between the expandable button and the
+     * dropdown section of the control.
+     */
+    this.dropdownSeparation = 12;
+    /**
+     * Specifies the vertical alignment the dropdown section has when using
+     * `position === "Right"` or `position === "Left"`.
+     */
+    this.valign = "Middle";
+    this.closeDropdown = () => {
+      this.closeDropdownWithHover();
+      this.expanded = false;
+      this.expandedChange.emit(false);
+    };
+    this.closeDropdownWithHover = () => {
+      this.expandedWithHover = false;
+      // If the control was not expanded with focus
+      if (!this.expanded) {
+        this.expandedChange.emit(false);
+      }
+    };
+    this.closeDropdownWhenClickingOutside = (event) => {
+      if (event.composedPath().find(el => el === this.element) === undefined) {
+        this.closeDropdown();
+      }
+    };
+    this.handleKeyDownEvents = (event) => {
+      const keyEventHandler = this.keyEventsDictionary[event.code];
+      if (keyEventHandler) {
+        keyEventHandler(event);
+      }
+    };
+    /**
+     * Check if the next focused element is a child element of the dropdown
+     * control.
+     */
+    this.handleKeyUpEvents = (event) => {
+      if (event.code !== TAB_KEY) {
+        return;
+      }
+      const nextFocusedElement = event.target;
+      const isChildElement = nextFocusedElement.closest("ch-dropdown") === this.element;
+      if (isChildElement) {
+        return;
+      }
+      this.closeDropdown();
+    };
+    this.handleMouseLeave = () => {
+      const focusedElementIsInsideDropDown = document.activeElement.closest("ch-dropdown") === this.element;
+      if (focusedElementIsInsideDropDown) {
+        this.expanded = true;
+      }
+      this.closeDropdownWithHover();
+    };
+    this.handleMouseEnter = () => {
+      if (this.expandedWithHover) {
+        return;
+      }
+      this.expandedWithHover = true;
+      // If not previously expanded, emit the event
+      if (!this.expanded) {
+        this.expandedChange.emit(true);
+      }
+    };
+    this.handleButtonClick = () => {
+      this.expandedChange.emit(!this.expanded);
+      this.expanded = !this.expanded;
+    };
+    this.handleButtonFocus = () => {
+      if (this.expanded) {
+        return;
+      }
+      this.expanded = true;
+      // If not previously expanded, emit the event
+      if (!this.expandedWithHover) {
+        this.expandedChange.emit(true);
+      }
+    };
+  }
+  handleExpandedChange(newExpandedValue) {
+    if (newExpandedValue) {
+      this.currentFocusedItem = undefined;
+      // Click
+      document.body.addEventListener("click", this.closeDropdownWhenClickingOutside, {
+        capture: true
+      });
+      // Keyboard events
+      document.body.addEventListener("keydown", this.handleKeyDownEvents, {
+        capture: true
+      });
+      document.body.addEventListener("keyup", this.handleKeyUpEvents, {
+        capture: true
+      });
+    }
+    else {
+      // Click
+      document.body.removeEventListener("click", this.closeDropdownWhenClickingOutside, {
+        capture: true
+      });
+      // Keyboard events
+      document.body.removeEventListener("keydown", this.handleKeyDownEvents, {
+        capture: true
+      });
+      document.body.removeEventListener("keyup", this.handleKeyUpEvents, {
+        capture: true
+      });
+    }
+  }
+  handleActionClick() {
+    this.closeDropdown();
+    // @todo This behavior must be specified by a property
+    // this.returnFocusToButton();
+  }
+  handleDropDownItemFocusChange(event) {
+    this.currentFocusedItem = event.target;
+  }
+  focusFirstDropDownItem() {
+    this.currentFocusedItem = this.element.querySelector(DROPDOWN_ITEM_SELECTOR);
+    if (this.currentFocusedItem) {
+      this.currentFocusedItem.handleFocusElement();
+    }
+  }
+  findNextDropDownItemSibling() {
+    let nextSibling = this.currentFocusedItem
+      .nextElementSibling;
+    while (nextSibling &&
+      nextSibling.tagName.toLowerCase() !== DROPDOWN_ITEM_TAG_NAME) {
+      nextSibling = nextSibling.nextElementSibling;
+    }
+    return nextSibling;
+  }
+  findPreviousDropDownItemSibling() {
+    let previousSibling = this.currentFocusedItem
+      .previousElementSibling;
+    while (previousSibling &&
+      previousSibling.tagName.toLowerCase() !== DROPDOWN_ITEM_TAG_NAME) {
+      previousSibling =
+        previousSibling.previousElementSibling;
+    }
+    return previousSibling;
+  }
+  /**
+   * Returns focus to the expandable button when closing the dropdown. Only
+   * works if `openOnFocus = "false"`
+   */
+  returnFocusToButton() {
+    if (!this.openOnFocus) {
+      this.expandableButton.focus();
+    }
+  }
+  componentWillLoad() {
+    this.showHeader = !!this.element.querySelector(':scope > [slot="header"]');
+    this.showFooter = !!this.element.querySelector(':scope > [slot="footer"]');
+  }
+  render() {
+    const hasVerticalPosition = this.position === "Bottom" || this.position === "Top";
+    const isExpanded = this.expanded || this.expandedWithHover;
+    return (h(Host, { onMouseLeave: this.expandBehavior === "Click or Hover"
+        ? this.handleMouseLeave
+        : undefined, style: {
+        "--separation-between-button": `-${this.dropdownSeparation}px`,
+        "--separation-between-button-size": `${this.dropdownSeparation}px`
+      } }, h("button", { id: EXPANDABLE_BUTTON_ID, "aria-controls": SECTION_ID, "aria-expanded": this.expanded.toString(), "aria-haspopup": "true", "aria-label": this.buttonLabel, class: "expandable-button", part: "dropdown__expandable-button", type: "button", onClick: this.handleButtonClick, onFocus: this.openOnFocus ? this.handleButtonFocus : undefined, onMouseEnter: this.expandBehavior === "Click or Hover"
+        ? this.handleMouseEnter
+        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), this.expandBehavior === "Click or Hover" && this.expandedWithHover && (
+    // Necessary since the separation between the button and the section
+    // triggers the onMouseLeave event
+    h("div", { "aria-hidden": "true", class: {
+        "dummy-separation": true,
+        [`dummy-separation--${this.position.toLowerCase()}`]: true,
+        "dummy-separation--vertical": hasVerticalPosition,
+        "dummy-separation--horizontal": !hasVerticalPosition
+      }, part: "dropdown__separation" })), h("section", { id: SECTION_ID, "aria-labelledby": EXPANDABLE_BUTTON_ID, class: {
+        section: true,
+        [`position--${this.position.toLowerCase()}`]: true,
+        [`align--${this.align.toLowerCase()}`]: hasVerticalPosition,
+        [`valign--${this.valign.toLowerCase()}`]: !hasVerticalPosition
+      }, part: "dropdown__section", hidden: !isExpanded }, this.showHeader && (h("header", { class: "header", part: "dropdown__header" }, h("slot", { name: "header" }))), h("div", { role: "list", class: "list", part: "dropdown__list" }, h("slot", { name: "items" })), this.showFooter && (h("footer", { class: "footer", part: "dropdown__footer" }, h("slot", { name: "footer" }))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "expanded": ["handleExpandedChange"]
+  }; }
+};
+ChDropDown.style = dropdownCss;
+
+export { ChDropDown as ch_dropdown };

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

@@ -0,0 +1,71 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.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}";
+
+const ChFormCheckbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 7);
+    /**
+     * The presence of this attribute makes the checkbox checked by default
+     */
+    this.checked = false;
+    /**
+     * The presence of this attribute makes the checkbox indeterminate
+     */
+    this.indeterminate = false;
+    /**
+     * The presence of this attribute disables the checkbox
+     */
+    this.disabled = false;
+  }
+  /** *******************************
+    METHODS
+    *********************************/
+  compontentDidLoad() {
+    if (this.checked && this.disabled) {
+      this.checked = false;
+      this.checkboxInput.removeAttribute("checked");
+    }
+  }
+  changed() {
+    this.checked = this.checkboxInput.checked;
+    this.change.emit({
+      "checkbox id": this.checkboxId,
+      "checkbox value": this.checked
+    });
+  }
+  handlerOnKeyUp(event) {
+    if (event.keyCode == 13) {
+      // Enter key was pressed
+      if (!this.checked) {
+        this.el.setAttribute("checked", "true");
+      }
+      else {
+        this.el.removeAttribute("checked");
+      }
+      this.change.emit({
+        "checkbox id": this.checkboxId,
+        "checkbox value": this.checked
+      });
+    }
+  }
+  ariaChecked() {
+    if (this.checked) {
+      return "true";
+    }
+    else {
+      return "false";
+    }
+  }
+  handleInputClick(e) {
+    e.stopPropagation();
+  }
+  render() {
+    return (h(Host, { role: "checkbox", value: this.value, "aria-checked": this.ariaChecked, "aria-label": this.label }, h("label", { class: "label" }, h("input", { ref: el => (this.checkboxInput = el), type: "checkbox", checked: this.checked, class: "input", id: this.checkboxId, name: this.name, value: this.value, disabled: this.disabled, onChange: this.changed.bind(this), onKeyUp: this.handlerOnKeyUp.bind(this), tabindex: "0", onClick: this.handleInputClick }), h("span", { class: { checkmark: true, "no-label": !this.label }, role: "checkbox" }), this.label ? this.label : null)));
+  }
+  get el() { return getElement(this); }
+};
+ChFormCheckbox.style = chFormCheckboxCss;
+
+export { ChFormCheckbox as ch_form_checkbox };

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

@@ -0,0 +1,19 @@
+import { r as registerInstance, g as getElement } from './index-4f0a5746.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}";
+
+const ChGridColumnDisplay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.observer = new IntersectionObserver(() => {
+      this.column.hidden = getComputedStyle(this.el).display === "none";
+    });
+  }
+  componentWillLoad() {
+    this.observer.observe(this.el);
+  }
+  get el() { return getElement(this); }
+};
+ChGridColumnDisplay.style = chGridColumnDisplayCss;
+
+export { ChGridColumnDisplay as ch_grid_column_display };

package/dist/esm/ch-grid-column-resize_2.entry.js

@@ -0,0 +1,89 @@
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-4f0a5746.js';
+import { m as mouseEventModifierKey } from './helpers-78ca0d8a.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) {
+    registerInstance(this, hostRef);
+    this.columnResizeStarted = createEvent(this, "columnResizeStarted", 7);
+    this.columnResizeFinished = 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 (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 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;
+  }
+  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))));
+  }
+};
+ChGridColumnSettings.style = chGridColumnSettingsCss;
+
+export { ChGridColumnResize as ch_grid_column_resize, ChGridColumnSettings as ch_grid_column_settings };

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

@@ -0,0 +1,12 @@
+import { r as registerInstance } from './index-4f0a5746.js';
+
+const chGridRowActionsCss = "";
+
+const ChGridRowActions = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+};
+ChGridRowActions.style = chGridRowActionsCss;
+
+export { ChGridRowActions as ch_grid_row_actions };

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

@@ -0,0 +1,12 @@
+import { r as registerInstance } from './index-4f0a5746.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}";
+
+const ChGridRowsetEmpty = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+};
+ChGridRowsetEmpty.style = chGridRowsetEmptyCss;
+
+export { ChGridRowsetEmpty as ch_grid_rowset_empty };

package/dist/esm/ch-grid-rowset-legend-d6a0dd68.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-4f0a5746.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) {
+    registerInstance(this, hostRef);
+    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)));
+  }
+};
+ChGridRowsetLegend.TAG_NAME = "CH-GRID-ROWSET-LEGEND";
+ChGridRowsetLegend.style = chGridRowsetLegendCss;
+
+export { ChGridRowsetLegend as C };

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

@@ -0,0 +1,2 @@
+export { C as ch_grid_rowset_legend } from './ch-grid-rowset-legend-d6a0dd68.js';
+import './index-4f0a5746.js';

package/dist/esm/ch-grid-settings_2.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-4f0a5746.js';
+
+const chGridSettingsCss = ":host{display:contents;--ch-window-mask-z-index:var(--ch-grid-settings-layer)}";
+
+const ChGridSettings = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))));
+  }
+};
+ChGridSettings.style = chGridSettingsCss;
+
+const chGridSettingsColumnsCss = ":host{display:flex;flex-direction:column}ul{display:contents;list-style-type:none}";
+
+const ChGridSettingsColumns = class {
+  constructor(hostRef) {
+    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 (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))))));
+  }
+};
+ChGridSettingsColumns.style = chGridSettingsColumnsCss;
+
+export { ChGridSettings as ch_grid_settings, ChGridSettingsColumns as ch_grid_settings_columns };