@genexus/genexus-ide-ui 0.0.22 → 0.0.24

package/dist/cjs/{ch-grid_4.cjs.entry.js → ch-grid_8.cjs.entry.js}

@@ -2662,6 +2662,91 @@ const ChGridColumn = class {
 };
 ChGridColumn.style = chGridColumnCss;
 
+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 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 {
@@ -2680,6 +2765,60 @@ const ChGridColumnset = class {
 };
 ChGridColumnset.style = chGridColumnsetCss;
 
+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;
+
 const gxgGridCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{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}.gxg-text--negative{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;color:var(--color-on-primary)}.gxg-text--gray{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;color:var(--gray-05)}.gxg-quote{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;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{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;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{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;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{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;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{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;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{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;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{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;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:root{--indent:var(--spacing-comp-02)}:host{display:block}ch-grid{border:1px solid var(--gray-02);--focus-style:2px solid var(--color-primary-active)}ch-grid::part(main){}ch-grid::part(main)::-webkit-scrollbar{width:6px;height:6px}ch-grid::part(main)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}gxg-grid.no-border ch-grid{border:0}gxg-grid:focus-visible,ch-grid:focus-visible{outline:none}ch-grid::part(header),ch-grid::part(footer){padding:var(--spacing-comp-01);background-color:var(--color-background)}ch-grid-actionbar ch-grid-action-refresh,ch-grid-actionbar ch-grid-action-settings,ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending),ch-grid-column::part(bar-settings-button),ch-grid-column::part(settings-close),ch-grid::part(settings-close),ch-grid-cell::part(drag-icon),ch-grid-cell::part(caret),ch-grid-rowset-legend::part(caret){display:inline-flex;align-items:center;justify-content:center}ch-grid-actionbar ch-grid-action-refresh:before,ch-grid-actionbar ch-grid-action-settings:before,ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before,ch-grid-column::part(bar-settings-button):before,ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before,ch-grid-cell::part(drag-icon):before,ch-grid-cell::part(caret):before,ch-grid-rowset-legend::part(caret):before{content:\"\";display:block;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;width:70%;height:70%;background-color:var(--color-on-secondary)}ch-grid-action-refresh,ch-grid-action-settings{width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);display:inline-block}ch-grid-action-refresh:hover,ch-grid-action-settings:hover{background-color:var(--color-secondary-hover)}ch-grid-action-refresh:focus-visible,ch-grid-action-settings:focus-visible{outline:var(--focus-style)}ch-grid-action-refresh:before{-webkit-mask-image:var(--refreshIconUrl)}ch-grid-action-settings:before{-webkit-mask-image:var(--settingshIconUrl)}ch-grid{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--gray-06)}ch-grid-column{background-color:var(--color-background);font-weight:var(--font-weight-bold);padding:var(--spacing-comp-02) !important;cursor:pointer}ch-grid-column::part(bar){gap:var(--spacing-comp-02);width:100%}ch-grid-column:not([sort-direction])::part(bar-sort){display:none}ch-grid-column::part(bar-settings){line-height:0}ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending){width:var(--spacing-comp-03);height:var(--spacing-comp-03);margin-left:var(--spacing-comp-02);margin-right:var(--spacing-comp-01)}ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before{width:100%;height:100%;-webkit-mask-size:200%}ch-grid-column::part(bar-sort-descending):before{-webkit-mask-image:var(--barSortDescendingIconUrl)}ch-grid-column::part(bar-sort-ascending):before{-webkit-mask-image:var(--barSortAscendingIconUrl)}ch-grid-column::part(bar-resize-split){width:3px;background-color:var(--gray-02)}ch-grid-column:last-child::part(bar-resize-split){display:none}ch-grid-column::part(bar-settings-button){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);border:none;background-color:transparent;cursor:pointer}ch-grid-column::part(bar-settings-button):hover{background-color:var(--gray-02)}ch-grid-column::part(bar-settings-button):focus-visible{outline:var(--focus-style)}ch-grid-column::part(bar-settings-button):before{-webkit-mask-image:var(--barSettingsButtonIconUrl)}ch-grid-row{background-color:var(--color-background);color:var(--gray-04);border:2px solid transparent}ch-grid-row:nth-of-type(odd){background-color:var(--gray-00)}ch-grid-row[highlighted]{background-color:var(--color-hover)}ch-grid-row[dragging]{box-shadow:var(--box-shadow-03)}ch-grid-row[selected]>ch-grid-cell:not([selected]){background-color:var(--color-secondary-enabled)}ch-grid-cell[selected]{z-index:1;background-color:var(--color-secondary-enabled) !important}ch-grid-row[selected]>ch-grid-cell{color:var(--color-on-secondary)}ch-grid-row[selected]+ch-grid-row[selected] ch-grid-cell{border-top-color:var(--color-secondary-hover)}ch-grid-cell{box-sizing:border-box;padding-inline-start:var(--spacing-comp-02) !important;padding-inline-end:var(--spacing-comp-02) !important;padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01);align-items:center}ch-grid-column::part(settings-mask){cursor:default}ch-grid-column::part(settings-mask),ch-grid::part(settings-mask){background-color:rgba(0, 0, 0, 0.3);cursor:arrow;color:var(--color-on-secondary)}ch-grid-column::part(settings-window),ch-grid::part(settings-window){background-color:var(--color-background);width:100%;max-width:600px;padding:var(--spacing-comp-03);border-radius:var(--border-width-lg);box-shadow:var(--box-shadow-04)}ch-grid::part(settings-window){margin:0 var(--spacing-comp-05)}ch-grid-column::part(settings-header),ch-grid::part(settings-header){display:flex;align-items:center;gap:var(--spacing-comp-04);justify-content:space-between;border-bottom:var(--border-width-sm) solid var(--gray-02);padding-bottom:var(--spacing-comp-02);margin-bottom:var(--spacing-comp-03);font-weight:var(--font-weight-bold)}ch-grid-column::part(settings-close),ch-grid::part(settings-close){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);font-size:0;border:0}ch-grid-column::part(settings-close):hover,ch-grid::part(settings-close):hover{background-color:var(--color-secondary-hover)}ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before{-webkit-mask-image:var(--settingsCloseIconUrl)}ch-grid-column::part(settings-close):focus-visible,ch-grid::part(settings-close):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns){gap:var(--spacing-comp-03)}ch-grid::part(settings-columns-label){display:inline-flex;align-items:center;gap:var(--spacing-comp-03);cursor:pointer;height:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible),ch-grid-cell::part(selector),ch-grid-column::part(selector){position:relative;margin:0;height:var(--spacing-comp-04);width:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible):focus-visible,ch-grid-cell::part(selector):focus-visible,ch-grid-column::part(selector):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns-visible):before,ch-grid-cell::part(selector):before,ch-grid-column::part(selector):before{cursor:pointer;content:\"\";display:inline-block;position:relative;height:var(--spacing-comp-04);width:var(--spacing-comp-04);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:var(--border-radius-md);border-color:var(--gray-04);box-sizing:border-box;flex-shrink:0;background:var(--color-background)}ch-grid::part(settings-columns-visible):after,ch-grid-cell::part(selector):after,ch-grid-column::part(selector):after{opacity:0;display:block;position:absolute;content:\"\";left:6px;top:3px;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);transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;cursor:pointer}ch-grid-column::part(indeterminate):after{opacity:1;display:block;position:absolute;content:\"\";left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--color-primary-hover);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}ch-grid::part(settings-columns-visible-checked):before,ch-grid-cell::part(checked):before,ch-grid-column::part(checked):before{border-color:var(--color-primary-hover)}ch-grid::part(settings-columns-visible-checked):after,ch-grid-cell::part(checked):after,ch-grid-column::part(checked):after{opacity:1}ch-grid-cell::part(drag-icon):before{width:var(--spacing-comp-04);height:var(--spacing-comp-04);cursor:grab}ch-grid-cell::part(drag-icon):before{-webkit-mask-image:var(--dragIconUrl)}ch-grid::part(row-actions){padding-top:2px;right:var(--spacing-comp-02)}ch-grid-column::part(selector){margin-right:8px}ch-grid-rowset-legend{background-color:var(--gray-01);padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-02);padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01)}ch-grid>ch-grid-rowset:first-of-type ch-grid-rowset-legend{border-top:1px solid var(--color-background)}ch-grid-rowset-legend{margin-inline-start:calc(var(--indent) * (var(--level) - 1));display:flex;align-items:center;gap:var(--spacing-comp-01);cursor:pointer}ch-grid-rowset-legend::part(caret),ch-grid-cell::part(caret){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-grid-cell::part(caret){cursor:pointer;margin-right:var(--spacing-comp-01)}ch-grid-rowset>ch-grid-rowset-legend::part(caret):before,ch-grid-row>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretCollapseIconUrl)}ch-grid-rowset[collapsed]>ch-grid-rowset-legend::part(caret):before,ch-grid-row[collapsed]>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretExpandIconUrl)}ch-grid-rowset[collapsed] ch-grid-rowset-legend{border-bottom:1px solid var(--color-background)}ch-grid gxg-paginator{padding-top:0;padding-bottom:0}gxg-grid.large ch-grid{font-size:var(--font-size-lg)}";
 
 const GxgGrid = class {
@@ -2708,5 +2847,9 @@ GxgGrid.style = gxgGridCss;
 
 exports.ch_grid = ChGrid;
 exports.ch_grid_column = ChGridColumn;
+exports.ch_grid_column_resize = ChGridColumnResize;
+exports.ch_grid_column_settings = ChGridColumnSettings;
 exports.ch_grid_columnset = ChGridColumnset;
+exports.ch_grid_settings = ChGridSettings;
+exports.ch_grid_settings_columns = ChGridSettingsColumns;
 exports.gxg_grid = GxgGrid;

package/dist/cjs/{ch-suggest_5.cjs.entry.js → ch-suggest_4.cjs.entry.js}

@@ -311,72 +311,7 @@ const GxgSuggest = class {
 };
 GxgSuggest.style = stylesCss;
 
-const textCss = "/*! 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}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{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}.gxg-text--negative{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;color:var(--color-on-primary)}.gxg-text--gray{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;color:var(--gray-05)}.gxg-quote{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;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{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;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{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;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{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;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{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;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{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;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{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;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:block;font-size:14px}:host p,:host q,:host a{display:block;margin:0;padding:0;margin:0 auto}:host([text-align=start]){text-align:start}:host([text-align=start]) *{text-align:start}:host([text-align=center]){text-align:center}:host([text-align=center]) *{text-align:center}:host([text-align=end]){text-align:end}:host([text-align=end]) *{text-align:end}:host([padding=s]){padding:var(--spacing-comp-01)}:host([padding=m]){padding:var(--spacing-comp-02)}:host(.large) .gxg-text,:host(.large) .gxg-text--gray,:host(.large) .gxg-quote,:host(.large) .gxg-link,:host(.large) .gxg-link-gray,:host(.large) .gxg-alert-error,:host(.large) .gxg-alert-warning,:host(.large) .gxg-alert-success{font-size:var(--font-size-lg)}";
-
-const GxgText = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * The target (for "link" or "link-gray" types
-     * */
-    this.target = "_self";
-    /**
-     * Text type
-     */
-    this.type = "text-regular";
-    /**
-     * Text alignment
-     */
-    this.textAlign = "start";
-    /**
-     * Text padding
-     */
-    this.padding = "none";
-    /**
-     * Max. width
-     */
-    this.maxWidth = "100%";
-  }
-  textType() {
-    let text;
-    switch (this.type) {
-      case "text-regular":
-        text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text" }, index.h("slot", null)));
-        break;
-      case "text-gray":
-        text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text--gray" }, index.h("slot", null)));
-        break;
-      case "text-quote":
-        text = (index.h("q", { style: { maxWidth: this.maxWidth }, class: "gxg-quote" }, index.h("slot", null)));
-        break;
-      case "text-link":
-        text = (index.h("a", { style: { maxWidth: this.maxWidth }, href: this.href, target: this.target, class: "gxg-link" }, index.h("slot", null)));
-        break;
-      case "text-link-gray":
-        text = (index.h("a", { style: { maxWidth: this.maxWidth }, href: this.href, target: this.target, class: "gxg-link-gray" }, index.h("slot", null)));
-        break;
-      case "text-alert-error":
-        text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-error" }, index.h("slot", null)));
-        break;
-      case "text-alert-warning":
-        text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-warning" }, index.h("slot", null)));
-        break;
-      case "text-alert-success":
-        text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-success" }, index.h("slot", null)));
-        break;
-      default:
-        text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text" }, index.h("slot", null)));
-    }
-    return text;
-  }
-  render() {
-    return index.h(index.Host, { class: { large: store.state.large } }, this.textType(), " ");
-  }
-};
-GxgText.style = textCss;
-
 exports.ch_suggest = ChSuggest;
 exports.ch_suggest_list = ChSuggestList;
 exports.ch_suggest_list_item = ChSuggestListItem;
 exports.gxg_suggest = GxgSuggest;
-exports.gxg_text = GxgText;

package/dist/cjs/ch-test-action-group.cjs.entry.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a32426a.js');
+
+const testActionGroupCss = "ch-test-action-group{display:flex;border:2px dashed #00000080;resize:both;overflow:auto;width:500px}.action-group{padding:20px;margin:20px;background-color:#ffffff;border:1px solid}.action-group::part(actions){gap:12px}.action-group::part(more-actions-button){border-radius:50%;width:fit-content;height:fit-content;color:#313aa1;align-self:center;margin-inline-end:8px}.dropdown-item::part(action){--separation:8px;background-color:#f3d0c3;border-radius:4px;padding-inline:16px;padding-block:8px}.dropdown-item::part(action):focus-within{outline:1px solid}.dropdown-item::part(action):hover{background-color:#d3b1a4}.action-group::part(more-actions-list),.dropdown-item::part(list){row-gap:8px;margin-block:8px}.action-group::part(more-actions-section),.dropdown-item::part(section){background-color:#edeaff;padding:8px;box-shadow:0 4px 8px 1px #22222220}";
+
+const ChTestActionGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.displayedItemsCount = -1;
+    /**
+     * 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 = "ClickOrHover";
+    /**
+     * This attribute determines how items behave when the content of the ActionGroup overflows horizontal. This property is needed
+     * to make the control responsive to changes in the Width of the container of ActionGroup.
+     *
+     * | Value                 | Details                                                                                          |
+     * | --------------------- | ------------------------------------------------------------------------------------------------ |
+     * | `Add Scroll`          | The items of the ActionGroup that overflow horizontally are shown by means of a scroll.          |
+     * | `Multiline`           | The ActionGroup items that overflow horizontally are shown in a second line of the control.      |
+     * | `Responsive Collapse` | The Action Group items, when they start to overflow the control, are placed in the More Actions. |
+     */
+    this.itemsOverflowBehavior = "ResponsiveCollapse";
+    /**
+     * 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 more actions button.
+     */
+    this.moreActionsDropdownPosition = "InsideStart_OutsideEnd";
+    /**
+     * Specifies the separation (in pixels) between the expandable button and the
+     * dropdown section of the control.
+     */
+    this.separation = 0;
+    // /**
+    //  * Fired when the visibility of the dropdown section is changed
+    //  */
+    // @Event() expandedChange: EventEmitter<boolean>;
+    this.renderItem = (item) => (index.h("ch-dropdown-item", { slot: "items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.position || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
+    this.firstLevelRenderItem = (item, index$1) => (index.h("ch-dropdown-item", { id: item.id, class: item.class, expandBehavior: this.expandBehavior, forceContainingBlock: false, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.position || "Center_OutsideEnd", rightImgSrc: item.rightIcon }, item.title, this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+      (this.displayedItemsCount === -1 || index$1 < this.displayedItemsCount) &&
+      item.items != null &&
+      item.items.map(this.renderItem)));
+    this.firstLevelRenderCollapsedItem = (item) => (index.h("ch-dropdown-item", { id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.responsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
+    this.handleDisplayedItemsCountChange = (event) => {
+      this.displayedItemsCount = event.detail;
+    };
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ch-action-group", { buttonLabel: this.buttonLabel, class: "action-group", expandBehavior: this.expandBehavior, itemsOverflowBehavior: this.itemsOverflowBehavior, openOnFocus: this.openOnFocus, moreActionsDropdownPosition: this.moreActionsDropdownPosition,
+      // style={{
+      //   "--separation": `${this.separation}px`
+      // }}
+      onDisplayedItemsCountChange: this.handleDisplayedItemsCountChange }, this.itemsModel != null &&
+      this.itemsModel.map((item, index$1) => (index.h("ch-action-group-item", { slot: "items" }, this.firstLevelRenderItem(item, index$1)))), this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+      this.itemsModel != null &&
+      this.itemsModel
+        .filter((_, index) => this.displayedItemsCount !== -1 &&
+        index >= this.displayedItemsCount)
+        .map(item => (index.h("ch-action-group-item", { slot: "more-items", avoidFloating: true }, this.firstLevelRenderCollapsedItem(item)))))));
+  }
+};
+ChTestActionGroup.style = testActionGroupCss;
+
+exports.ch_test_action_group = ChTestActionGroup;

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a32426a.js');
+
+const testDropdownCss = ".dropdown::part(expandable-button){background-color:aliceblue;border:1px solid;border-radius:4px;padding-block:4px;padding-inline:16px}.dropdown::part(expandable-button):focus{box-shadow:0 0 0 1px black}.dropdown-item::part(action){--separation:8px;background-color:#f3d0c3;border-radius:4px;padding-inline:16px;padding-block:8px}.dropdown-item::part(action):focus-within{outline:1px solid}.dropdown-item::part(action):hover{background-color:#d3b1a4}.dropdown::part(section),.dropdown-item::part(section){background-color:#edeaff;padding:8px;box-shadow:0 4px 8px 1px #22222220}.dropdown::part(list),.dropdown-item::part(list){row-gap:8px;margin-block:8px}";
+
+const ChTestDropdownX = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * 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 = "ClickOrHover";
+    /**
+     * 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 = "Center_OutsideEnd";
+    /**
+     * Specifies the separation (in pixels) between the expandable button and the
+     * dropdown section of the control.
+     */
+    this.separation = 0;
+    // /**
+    //  * Fired when the visibility of the dropdown section is changed
+    //  */
+    // @Event() expandedChange: EventEmitter<boolean>;
+    this.renderItem = (item) => [
+      index.h("ch-dropdown-item", { slot: "items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)),
+      item.showSeparator && (index.h("ch-dropdown-item-separator", { class: item.separatorClass }))
+    ];
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ch-dropdown", { buttonLabel: this.buttonLabel, class: "dropdown", expandBehavior: this.expandBehavior, openOnFocus: this.openOnFocus, position: this.position, style: {
+        "--separation": `${this.separation}px`
+      } }, index.h("span", { slot: "action" }, "User info"), index.h("div", { slot: "header" }, index.h("h1", null, "John Doe"), index.h("span", null, "johndoe@example.com")), this.itemsModel != null && this.itemsModel.map(this.renderItem), index.h("div", { slot: "footer" }, "Footer"))));
+  }
+};
+ChTestDropdownX.style = testDropdownCss;
+
+exports.ch_test_dropdown = ChTestDropdownX;

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

@@ -5,14 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5a32426a.js');
 const chGlobalStylesheet = require('./ch-global-stylesheet-145c4b20.js');
 
-const chWindowCss = ":host{--ch-window-offset-x:0px;--ch-window-offset-y:0px}:host(:not([hidden])){display:contents}:host(:is(:not([modal]),[modal=\"false\"])) .mask{pointer-events:none}.window{pointer-events:all}.mask{display:flex;position:fixed;inset:0;inset-inline-start:calc( var(--ch-window-inset-inline-start) + var(--ch-window-offset-x) );inset-block-start:calc( var(--ch-window-inset-block-start) + var(--ch-window-offset-y) );z-index:var(--ch-window-mask-z-index, 1000)}:host(:is([x-align=\"outside-start\"],[x-align=\"inside-start\"])) .mask{justify-content:flex-start}:host([x-align=center]) .mask{justify-content:center}:host(:is([x-align=\"outside-end\"],[x-align=\"inside-end\"])) .mask{justify-content:flex-end}:host(:is([y-align=\"outside-start\"],[y-align=\"inside-start\"])) .mask{align-items:flex-start}:host([y-align=center]) .mask{align-items:center}:host(:is([y-align=\"outside-end\"],[y-align=\"inside-end\"])) .mask{align-items:flex-end}.window{display:flex;flex-direction:column;transform:translate(var(--ch-window-x-outside, 0px), var(--ch-window-y-outside, 0px)) translate(var(--ch-window-x-drag, 0px), var(--ch-window-y-drag, 0px))}:host([x-align=outside-start]) .window{--ch-window-x-outside:-100%}:host([x-align=outside-end]) .window{--ch-window-x-outside:100%}:host([y-align=outside-start]) .window{--ch-window-y-outside:-100%}:host([y-align=outside-end]) .window{--ch-window-y-outside:100%}";
+const chWindowCss = ":host{--ch-window-offset-x:0px;--ch-window-offset-y:0px;--ch-window-x-outside:0px;--ch-window-y-outside:0px}:host(:not([hidden])){display:contents}:host(:is(:not([modal]),[modal=\"false\"])) .mask{pointer-events:none}.window{pointer-events:all}.mask{display:flex;position:fixed;inset:0;inset-inline-start:calc( var(--ch-window-inset-inline-start) + var(--ch-window-offset-x) );inset-block-start:calc( var(--ch-window-inset-block-start) + var(--ch-window-offset-y) );z-index:var(--ch-window-mask-z-index, 1000)}:host(:is([x-align=\"outside-start\"],[x-align=\"inside-start\"])) .mask{justify-content:flex-start}:host([x-align=center]) .mask{justify-content:center}:host(:is([x-align=\"outside-end\"],[x-align=\"inside-end\"])) .mask{justify-content:flex-end}:host(:is([y-align=\"outside-start\"],[y-align=\"inside-start\"])) .mask{align-items:flex-start}:host([y-align=center]) .mask{align-items:center}:host(:is([y-align=\"outside-end\"],[y-align=\"inside-end\"])) .mask{align-items:flex-end}.window{display:flex;flex-direction:column;transform:translate(var(--ch-window-x-outside), var(--ch-window-y-outside)) translate(var(--ch-window-x-drag, 0px), var(--ch-window-y-drag, 0px))}:host([x-align=outside-start]) .window{--ch-window-x-outside:-100%}:host([x-align=outside-end]) .window{--ch-window-x-outside:100%}:host([y-align=outside-start]) .window{--ch-window-y-outside:-100%}:host([y-align=outside-end]) .window{--ch-window-y-outside:100%}";
 
+const CONTAINING_BLOCK_RESET_CUSTOM_VAR = "--ch-window-relative-position";
 const ChWindow = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.windowOpened = index.createEvent(this, "windowOpened", 7);
     this.windowClosed = index.createEvent(this, "windowClosed", 7);
     this.isContainerCssOverride = false;
+    this.relativeWindow = false;
     this.validCssAligns = [
       "outside-start",
       "inside-start",
@@ -60,17 +62,25 @@ const ChWindow = class {
     this.updatePosition = () => {
       if (!this.isContainerCssOverride && this.container && this.mask) {
         const rect = this.container.getBoundingClientRect();
+        this.mask.style.width = `${rect.width}px`;
+        this.mask.style.height = `${rect.height}px`;
+        // Nested windows are positioned relative to its initial containing block,
+        // so there is no need to align them relative to the document
+        if (this.relativeWindow) {
+          return;
+        }
         // TODO: RTL positioning bug
         this.mask.style.setProperty("--ch-window-inset-inline-start", `${rect.left}px`);
         this.mask.style.setProperty("--ch-window-inset-block-start", `${rect.top}px`);
-        this.mask.style.width = `${rect.width}px`;
-        this.mask.style.height = `${rect.height}px`;
       }
       else if (this.isContainerCssOverride || !this.container) {
-        this.mask.style.removeProperty("--ch-window-inset-inline-start");
-        this.mask.style.removeProperty("--ch-window-inset-block-start");
         this.mask.style.removeProperty("width");
         this.mask.style.removeProperty("height");
+        if (this.relativeWindow) {
+          return;
+        }
+        this.mask.style.removeProperty("--ch-window-inset-inline-start");
+        this.mask.style.removeProperty("--ch-window-inset-block-start");
       }
     };
     this.windowResizeHandler = () => {
@@ -92,6 +102,7 @@ const ChWindow = class {
     };
   }
   containerHandler(value, oldValue) {
+    this.checkRelativePosition();
     this.containerResizeObserverHandler(value, oldValue);
     this.updatePosition();
   }
@@ -102,6 +113,7 @@ const ChWindow = class {
       this.windowClosed.emit();
     }
     else {
+      this.checkRelativePosition();
       this.updatePosition();
       this.watchCSSAlign();
       this.addListeners();
@@ -129,6 +141,10 @@ const ChWindow = class {
   windowCloseClickedHandler() {
     this.hidden = true;
   }
+  checkRelativePosition() {
+    const computed = getComputedStyle(this.el);
+    this.relativeWindow = !!computed.getPropertyValue(CONTAINING_BLOCK_RESET_CUSTOM_VAR);
+  }
   resetDrag() {
     this.dragStartX = undefined;
     this.dragStartY = undefined;
@@ -204,7 +220,10 @@ const ChWindow = class {
     this.el.shadowRoot.adoptedStyleSheets.push(chGlobalStylesheet.CH_GLOBAL_STYLESHEET);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "mask", part: "mask", ref: el => (this.mask = el), onClick: this.maskClickHandler }, index.h("section", { class: "window", part: "window", ref: el => (this.window = el) }, this.showHeader && (index.h("header", { part: "header", ref: el => (this.header = el) }, index.h("slot", { name: "header" }, index.h("span", { part: "caption" }, this.caption), index.h("ch-window-close", { part: "close", title: this.closeTooltip }, this.closeText)))), index.h("div", { part: "main" }, index.h("slot", null)), this.showFooter && (index.h("footer", { part: "footer" }, index.h("slot", { name: "footer" })))))));
+    return (index.h(index.Host, null, index.h("div", { class: "mask", part: "mask", style: this.relativeWindow && {
+        "--ch-window-inset-inline-start": "0px",
+        "--ch-window-inset-block-start": "0px"
+      }, ref: el => (this.mask = el), onClick: this.maskClickHandler }, index.h("section", { class: "window", part: "window", ref: el => (this.window = el) }, this.showHeader && (index.h("header", { part: "header", ref: el => (this.header = el) }, index.h("slot", { name: "header" }, index.h("span", { part: "caption" }, this.caption), index.h("ch-window-close", { part: "close", title: this.closeTooltip }, this.closeText)))), index.h("div", { part: "main" }, index.h("slot", null)), this.showFooter && (index.h("footer", { part: "footer" }, index.h("slot", { name: "footer" })))))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/format-date-f2c49d1a.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const index = require('./index-5a32426a.js');
+
+/* STENCIL IMPORTS */
+const renderComboItems = (gxOptions) => {
+  const comboItemsArray = [];
+  gxOptions.forEach((gxOption) => {
+    const iconName = gxOption.iconName || gxOption.icon;
+    comboItemsArray.push(index.h("gxg-combo-box-item", { value: gxOption.value, icon: iconName }, gxOption.label || gxOption.name));
+  });
+  return comboItemsArray;
+};
+
+const formatDate = (dateObject) => {
+  const date = dateObject.toISOString().slice(0, 10);
+  const hours = dateObject.getHours();
+  const minutes = dateObject.getMinutes();
+  const time = `${hours}:${minutes}`;
+  let period = "AM"; // Assume it's AM by default
+  if (hours >= 12) {
+    period = "PM";
+  }
+  return `${date} ${time}${period} `;
+};
+
+exports.formatDate = formatDate;
+exports.renderComboItems = renderComboItems;