@genexus/genexus-ide-ui 0.0.61 → 0.0.63

package/dist/esm/gx-ide-test.entry.js

@@ -1,140 +1,132 @@
-import { h, r as registerInstance, H as Host } from './index-0da01575.js';
+import { r as registerInstance, c as createEvent, h } from './index-0da01575.js';
 
-/* eslint-disable @typescript-eslint/no-use-before-define */
-const renderTreeItems = (treeItemsModel, firstCall = true) => {
-  if (treeItemsModel === null || treeItemsModel === void 0 ? void 0 : treeItemsModel.length) {
-    if (firstCall) {
-      return treeItemsModel.map((item) => {
-        return renderTreeItem(item);
-      });
-    }
-    else {
-      return (h("gxg-tree", { slot: "tree" }, treeItemsModel.map((item) => {
-        return renderTreeItem(item);
-      })));
-    }
-  }
-  return [];
-};
-const renderTreeItem = (item) => {
-  var _a;
-  const childrenLength = item.items ? item.items.length : 0;
-  const isLeaf = !!(childrenLength === 0 || item.leaf);
-  const lazy = !!item.lazy;
-  return (h("gxg-tree-item", { checkbox: item.checkbox, checked: item.checked, description: item.description, disabled: item.disabled, icon: item.icon, indeterminate: item.indeterminate, id: item.id, key: `tree-item-${item.id}`, label: item.label, leaf: isLeaf && !lazy, numberOfChildren: childrenLength, opened: item.opened, selected: item.selected }, [item.label, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && renderTreeItems(item.items, false)]));
-};
-
-const updateNodeById = (actualModel, nodeUpdatedState, updatedNodeId) => {
-  return actualModel.map(nodeActualState => {
-    if (nodeActualState.id === updatedNodeId) {
-      return Object.assign(Object.assign({}, nodeActualState), nodeUpdatedState);
-    }
-    else if (nodeActualState.items) {
-      return Object.assign(Object.assign({}, nodeActualState), { items: updateNodeById(nodeActualState.items, nodeUpdatedState, updatedNodeId) });
-    }
-    else {
-      return nodeActualState;
-    }
-  });
-};
-const updateTreeModel = (actualModel, updatedNodeModel, updatedNodeId) => {
-  if (actualModel.length && updatedNodeModel && updatedNodeId) {
-    return updateNodeById(actualModel, updatedNodeModel, updatedNodeId);
-  }
-  else {
-    /* If no newItemModel was passed, at least return the actualModel, to avoid having an updated empty tree */
-    return actualModel;
-  }
-};
-
-const testCss = ":host{display:block}";
+const testCss = ":host{display:block}.tree-container{display:flex;height:200px}";
 
 const GxIdeTest = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
+    /* THIS IS A COMPONENT FOR TESTING PURPOSES. DO WHATEVER YOU WANT.*/
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE METHODS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
+    this.renderedFirstTime = false;
+    // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
-    /* Gxg-Tree Methods*/
-    this.closeTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"], false);
+    this.checkAllHandler = () => {
+      this.treeViewEl.updateAllItemsProperties({ checked: true });
     };
-    this.openTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"], true);
-    };
-    this.toggleTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"]);
-    };
-    this.getSelectedItemsHandler = () => {
-      (async () => {
-        const selected = await this.tree.getSelectedItems();
-        console.log(selected);
-      })();
-    };
-    this.getCheckedItemsHandler = () => {
-      (async () => {
-        const checked = await this.tree.getCheckedItems();
-        console.log(checked);
-      })();
-    };
-    this.deleteNodeHandler = () => {
-      this.treeModel = [];
-    };
-    /* Update model test*/
-    // private showTree = () => {
-    //   this.treeModel = [];
-    // };
-    // private updateTree = () => {
-    //   this.treeModel = [];
-    // };
-    this.treeItemStateChangedHandler = (e) => {
-      // const event = e.detail.emittedBy;
-      const nodeData = e.detail.itemData;
-      const nodeId = e.detail.itemData.id;
-      if (nodeData.lazy) {
-        this.updateLazyCallback(nodeId).then(children => {
-          if (children === null || children === void 0 ? void 0 : children.length) {
-            const updatedTreeModel = updateTreeModel(this.treeModel, { id: nodeId, label: nodeData.label, items: children }, nodeId);
-            this.treeModel = updatedTreeModel;
-          }
-        });
-      }
-    };
-    this.treeModel = undefined;
-    this.lazyNode = undefined;
-    this.updateLazyCallback = undefined;
-    this.newNode = undefined;
-    this.testUpdateNode = false;
-    this.lazyLoadTreeItemsCallback = undefined;
   }
-  // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE METHODS //
-  // 7.LISTENERS //
-  loadLazyChildrenHandler(e) {
-    const treeItemId = e.detail;
-    if (this.lazyLoadTreeItemsCallback) {
-      const promise = this.lazyLoadTreeItemsCallback(treeItemId);
-      setTimeout(() => {
-        promise.then(result => {
-          this.treeModel = result;
-        });
-      }, 1000);
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit("test");
+      this.renderedFirstTime = true;
     }
   }
-  treeItemStateChanged(event) {
-    const updatedTreeModel = updateTreeModel(this.treeModel, event.detail, event.detail.id);
-    console.log("updatedTreeModel", updatedTreeModel);
+  componentDidLoad() {
+    this.treeViewEl.treeModel = [
+      {
+        id: "number-1",
+        caption: "number-1 label (always editable)",
+        class: "tree-view-item tree-view-item--success",
+        leaf: false,
+        leftImgSrc: "./objects/datastore",
+        editable: true,
+        checkbox: true,
+        items: [
+          {
+            id: "number-1-1",
+            caption: "number-1-1 (always editable)",
+            leaf: false,
+            leftImgSrc: "/build/ch-icon-assets/patterns",
+            editable: true,
+            checkbox: true,
+            items: [
+              {
+                id: "number-1-1-1",
+                caption: "number-1-1-1",
+                leaf: true,
+                checkbox: true,
+                leftImgSrc: "./objects/knowledge-base"
+              },
+              {
+                id: "number-1-1-2",
+                caption: "number-1-1-2",
+                leaf: false,
+                checkbox: true,
+                leftImgSrc: "./objects/knowledge-base",
+                items: [
+                  {
+                    id: "number-1-1-2-1",
+                    caption: "number-1-1-2-1 (lazy, drag disabled)",
+                    leaf: false,
+                    leftImgSrc: "./objects/knowledge-base",
+                    lazy: true,
+                    checkbox: true,
+                    dragDisabled: true,
+                    toggleCheckboxes: true
+                  },
+                  {
+                    id: "number-1-1-2-2",
+                    caption: "number-1-1-2-2",
+                    leaf: true,
+                    checkbox: true,
+                    leftImgSrc: "/build/ch-icon-assets/java"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: "number-1-2",
+            caption: "number-1-2",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "./objects/knowledge-base"
+          }
+        ]
+      },
+      {
+        id: "number-2",
+        caption: "number-2",
+        class: "tree-view-item tree-view-item--custom-image",
+        checkbox: true,
+        leaf: false,
+        items: [
+          {
+            id: "number-2-1",
+            caption: "number-2-1",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "/build/ch-icon-assets/java"
+          },
+          {
+            id: "number-2-2",
+            caption: "number-2-2",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "./objects/knowledge-base"
+          }
+        ]
+      }
+    ];
   }
   // 10.RENDER() FUNCTION //
   render() {
-    if (!this.testUpdateNode && this.treeModel) {
-      return (h(Host, null, h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el) }, renderTreeItems(this.treeModel)), ",", h("div", { class: "tree-buttons" }, h("gxg-button", { type: "outlined", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.getSelectedItemsHandler }, "Get Selected Items"), h("gxg-button", { type: "outlined", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), h("gxg-button", { type: "outlined", onClick: this.deleteNodeHandler }, "Delete Tree"))));
-    }
-    else if (this.testUpdateNode) {
-      return (h(Host, null, h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el), onTreeItemStateChanged: this.treeItemStateChangedHandler }, renderTreeItems(this.treeModel))));
-    }
-    else {
-      return h("slot", null);
-    }
+    return (h("div", null, h("div", { class: "tree-container" }, h("gxg-tree-view", { ref: el => (this.treeViewEl = el) })), h("label", null, "Check item", h("input", { type: "checkbox", name: "", id: "check-all", onInput: this.checkAllHandler }))));
   }
 };
 GxIdeTest.style = testCss;

package/dist/esm/gx-ide-ww-images.entry.js

@@ -1,27 +1,37 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { L as Locale } from './locale-e183487a.js';
+import { c as config } from './config-ee66bdf4.js';
 import { r as renderFormItems } from './common-ec35ec2f.js';
 import { F as FILTER_AFTER } from './constants-7882d1a8.js';
 import { f as formatDate } from './helpers-c29a9591.js';
-import { g as gridCommon } from './grid-1354bf8f.js';
+import { g as gridCommon } from './grid-9988c857.js';
 
-const wwImagesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-object-selector--shadow){border:none;box-shadow:var(--box-shadow-01)}.filter-grid{grid-template-columns:repeat(4, 1fr)}.filter-grid>:nth-child(3),.filter-grid>:nth-child(6){display:flex;flex-direction:row;align-items:flex-end}.filter-grid>:nth-child(4){grid-area:2/1/3/4}.filter-grid>:nth-child(5){grid-area:3/1/4/2}.filter-grid>:nth-child(6){grid-area:3/4/4/5}.filter-grid>:nth-child(7){grid-area:4/1/5/4}.filter-grid>:nth-child(8){grid-area:5/1/6/2}.filter-grid>:nth-child(9){grid-area:5/2/6/3}.filter-grid>:nth-child(10){grid-area:5/3/6/4}.filter-grid>:nth-child(11){grid-area:5/4/6/5}.flex{display:flex;flex-direction:row;align-items:center}.with-gap{gap:var(--gx-ide-grid-row-gap)}.hide{display:none !important}.images-grid{grid-template-columns:repeat(2, 1fr);grid-column-gap:0}.images-grid>:nth-child(1){grid-area:1/1/1/3}.images-data-flex{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--gx-ide-grid-row-gap);text-overflow:ellipsis;overflow:hidden}.images-data-flex .image-item{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:120px}.images-data-flex .image-item .img{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gxg-border-color--regular);padding:var(--gx-ide-grid-row-gap)}.images-data-flex .image-item .img img{max-width:100%;max-height:100%}.objects-count{grid-template-columns:repeat(2, 1fr)}.objects-count *:nth-child(2){justify-content:flex-end;align-items:flex-start}";
+const wwImagesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block}.filter--padding{padding:var(--gxg-container--padding)}.filter--gap{gap:var(--gx-ide-grid-row-gap)}.filter{display:flex;flex-direction:column}.filter>*{display:flex;gap:var(--gx-ide-grid-column-gap)}.filter>*>*{flex:1}.filter__first-row .name,.filter__first-row .module-folder{flex:1}.filter__first-row .filter-btn{flex:none}.filter__first-row .second-column{display:flex;flex-direction:row;align-items:end;gap:var(--gx-ide-grid-column-gap)}.filter__second-row{padding-top:var(--gx-ide-grid-row-gap)}.filter__third-row{display:flex;align-items:end;gap:var(--gx-ide-grid-column-gap)}.filter__third-row .checkboxes-wrapper{display:flex;gap:var(--gx-ide-grid-column-gap)}.filter__third-row .all-descendants,.filter__third-row .modified{padding-bottom:3px}.filter__third-row .user{max-width:100% !important}.filter__third-row>*{flex:1}.filter .filters-outer-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows 200ms}.filter .filters-outer-wrapper--hidden{grid-template-rows:0fr}.filter .filters-inner-wrapper{overflow:hidden}.master-wrapper{height:100%;display:grid;grid-template-rows:auto 1fr}.grid-images-container{border-top:1px solid var(--gx-ide-container-border-color);display:grid;grid-template-columns:1fr 220px;grid-column-gap:0;grid-row-gap:0;flex-grow:1}.images-grid{grid-template-columns:repeat(2, 1fr);grid-column-gap:0}.images-grid>:nth-child(1){grid-area:1/1/1/3}.images-container .image-item{display:inline-block;width:50%;height:110px;}.images-container .image-item__container img{width:100%;height:100%;object-fit:cover}.images-container .image-item__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;width:100%;display:block;font-size:10px;padding:4px 8px;box-sizing:border-box;background-color:var(--gray-00)}.images-container .image-item:nth-child(odd) .image-item__name{border-inline-end:1px solid var(--gray-02)}.objects-count{grid-template-columns:repeat(2, 1fr)}.objects-count *:nth-child(2){justify-content:flex-end;align-items:flex-start}";
 
 const GxIdeWWImages = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
+    this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
+    this.renderedFirstTime = false;
     // 9.LOCAL METHODS //
     // Renders
     this.renderFilter = () => {
       var _a, _b, _c, _d, _e;
-      return (h("gxg-container", { displayBorder: true, containerTitle: this._componentLocale.filter.title, part: "filters-container" }, h("div", { class: "grid filter-grid" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name" }), h("gx-ide-entity-selector", { label: this._componentLocale.filter.moduleFolder, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), part: "filter-module-folder" }), h("div", null, h("gxg-button", { id: "button-more-less", type: "primary-text-only", onClick: this.showMoreFilter, part: "gxg-button gxg-button--more-less" }, this.filterMore
-        ? this._componentLocale.filter.btnLess
-        : this._componentLocale.filter.btnMore)), h("gxg-form-text", { class: { hide: !this.filterMore }, "label-position": "above", label: this._componentLocale.filter.search, ref: (el) => (this.filterSearchContentsEl = el), part: "filter-search" }), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, ref: (el) => (this.filterCategoryEl = el), part: "filter-category" }, renderFormItems("gxg-combo-box-item", (_a = this.categories) !== null && _a !== void 0 ? _a : [])), h("div", { class: { hide: !this.filterMore } }, h("gxg-form-checkbox", { label: this._componentLocale.filter.allDescendants, class: "align-center", ref: (el) => (this.filterAllDescendantsEl = el), part: "filter-all-descendants" })), h("div", { class: {
-          "flex": true,
-          "with-gap": true,
-          "hide": !this.filterMore
-        } }, h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, class: "align-center", ref: (el) => (this.filterModifiedEl = el), part: "filter-modified" }), h("gxg-combo-box", { class: { hide: !this.filterModified }, "disable-filter": true, value: this.filterAfterType, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderFormItems("gxg-combo-box-item", [
+      return (h("div", { class: "filter filter--padding" }, h("div", { class: "filter__first-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name", class: "name" }), h("div", { class: "second-column" }, h("gx-ide-entity-selector", { label: this._componentLocale.filter.moduleFolder, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module-folder", part: "filter-module-folder" }), h("gxg-button", { onClick: this.toggleFiltersHandler, part: "gxg-button gxg-button--more-less", type: "secondary-icon-only", icon: "window-tools/filter-conditions" , class: "filter-btn" }))), h("div", { class: {
+          "filters-outer-wrapper": true,
+          "filters-outer-wrapper--hidden": this.filtersHidden
+        } }, h("div", { class: {
+          "filter": true,
+          "filter--gap": true,
+          "filters-inner-wrapper": true
+        } }, h("div", { class: "filter__second-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.search, ref: (el) => (this.filterSearchContentsEl = el), class: { "search-contents": true }, part: "filter-search" }), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, ref: (el) => (this.filterCategoryEl = el), class: { category: true }, part: "filter-category" }, renderFormItems("gxg-combo-box-item", (_a = this.categories) !== null && _a !== void 0 ? _a : []))), h("div", { class: "filter__third-row" }, h("div", { class: "checkboxes-wrapper" }, h("gxg-form-checkbox", { label: this._componentLocale.filter.allDescendants, ref: (el) => (this.filterAllDescendantsEl =
+          el), class: "all-descendants", part: "filter-all-descendants" }), h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, ref: (el) => (this.filterModifiedEl = el), class: "modified", part: "filter-modified" })), h("div", { class: {
+          "hide": !this.filterModified ||
+            this.filterAfterType !== FILTER_AFTER.DATE_TIME,
+          "date-time": true
+        }, part: "filter-datetime" }, h("div", { class: "date-time-wrapper" }, h("gxg-label", { "label-position": "above" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { disabled: !this.filterModified, ref: (el) => (this.filterModifiedDateEl =
+          el) })))), h("div", { class: "filter__fourth-row" }, h("gxg-combo-box", { class: { "after-date-time": true }, disabled: !this.filterModified, label: this._componentLocale.filter.afterLabel, "disable-filter": true, value: this.filterAfterType, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderFormItems("gxg-combo-box-item", [
         {
           id: FILTER_AFTER.NONE,
           label: this._componentLocale.filter.afterNone,
@@ -42,30 +52,24 @@ const GxIdeWWImages = class {
           label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],
           value: FILTER_AFTER.LAST_BUILD
         }
-      ])), h("gxg-form-text", { class: { hide: !this.filterModified }, "label-position": "start", label: this._componentLocale.filter.user, "max-width": "150px", ref: (el) => (this.filterUserEl = el), part: "filter-user" }), h("div", { class: {
-          flex: true,
-          hide: !this.filterModified ||
-            this.filterAfterType !== FILTER_AFTER.DATE_TIME
-        }, part: "filter-datetime" }, h("gxg-label", { "label-position": "start" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { ref: (el) => (this.filterModifiedDateEl = el) }))), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.style, disabled: !this.styles, ref: (el) => (this.filterStyleEl = el), part: "filter-style" }, renderFormItems("gxg-combo-box-item", (_b = this.styles) !== null && _b !== void 0 ? _b : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.language, disabled: !this.languages, ref: (el) => (this.filterLanguageEl = el), part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), part: "filter-density" }, renderFormItems("gxg-combo-box-item", (_d = this.densities) !== null && _d !== void 0 ? _d : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.layer, disabled: !this.layers, ref: (el) => (this.filterLayerEl = el), part: "filter-layer" }, renderFormItems("gxg-combo-box-item", (_e = this.layers) !== null && _e !== void 0 ? _e : [])))));
+      ])), h("gxg-form-text", { class: { user: true }, disabled: !this.filterModified, labelPosition: "above", label: this._componentLocale.filter.user, ref: (el) => (this.filterUserEl = el), centerLabel: false, part: "filter-user" })), h("div", { class: "filter__fifth-row" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.style, disabled: !this.styles, ref: (el) => (this.filterStyleEl = el), class: "style", part: "filter-style" }, renderFormItems("gxg-combo-box-item", (_b = this.styles) !== null && _b !== void 0 ? _b : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.language, disabled: !this.languages, ref: (el) => (this.filterLanguageEl = el), part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : []))), h("div", { class: "filter__sixth-row" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), part: "filter-density" }, renderFormItems("gxg-combo-box-item", (_d = this.densities) !== null && _d !== void 0 ? _d : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.layer, disabled: !this.layers, ref: (el) => (this.filterLayerEl = el), part: "filter-layer" }, renderFormItems("gxg-combo-box-item", (_e = this.layers) !== null && _e !== void 0 ? _e : [])))))));
     };
-    this.renderImages = () => {
-      return (h("gxg-grid", { part: "images-table", "ellipsis-cell-wrapper": true }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-images" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.module, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastBuildDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto })), this.images.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }), h("gxg-icon", { type: obj.icon, color: "auto" })), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.name)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.description), " "), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedDate)}`)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.lastUser), " "), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.importDate)}`)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.lastBuildDate)}`))))))));
+    this.renderImagesData = () => {
+      return (h("gx-ide-container", { containerTitle: this._componentLocale.imagesDataTitle, contentBorderEnd: true, noContentPadding: true, titleType: "secondary", part: "grid-container" }, h("gxg-grid", { part: "images-table", "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-images" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.module, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastBuildDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto })), this.images.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }), h("gxg-icon", { type: obj.icon, color: "auto" })), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.name)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.description), " "), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedDate)}`)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.lastUser), " "), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.importDate)}`)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.lastBuildDate)}`)))))))));
     };
-    this.renderImageData = () => {
-      return (h("gxg-container", { displayBorder: true, containerTitle: this._componentLocale.imageDataTitle, part: "image-data-container" }, h("div", { class: "grid images-data-flex" }, this.imagesSelectedItems.map(item => (h("div", { class: "image-item" }, h("div", { class: "img" }, h("img", { src: item.url, alt: item.id })), h("gxg-text", { type: "text-regular" }, item.name)))))));
+    this.renderImages = () => {
+      return (h("gx-ide-container", { containerTitle: this._componentLocale.imagesTitle, noContentPadding: true, titleType: "secondary", part: "image-data-container" }, h("div", { class: "images-container" }, this.imagesSelectedItems.map(item => (h("div", { class: "image-item" }, h("div", { class: "image-item__container" }, h("div", { class: "img" }, h("img", { src: item.url, alt: item.id }))), h("span", { class: "image-item__name" }, item.name)))))));
     };
     this.getImages = () => {
       let filters = {
         name: this.filterNameEl.value,
         parent: this.filterModuleEl.value ? this.filterModuleEl.value.id : null
       };
-      if (this.filterMore) {
-        const modified = this.filterModifiedEl.checked;
-        const modifiedAfter = this.filterAfterTypeEl.value;
-        filters = Object.assign(Object.assign({}, filters), { searchContents: this.filterSearchContentsEl.value, category: this.filterCategoryEl.value, allDescendants: this.filterAllDescendantsEl.checked, modifiedAfter: modified ? modifiedAfter : null, modifiedBy: modified ? this.filterUserEl.value : null, modifiedDate: modified && modifiedAfter === FILTER_AFTER.DATE_TIME
-            ? this.filterModifiedDateEl.value
-            : null, style: this.filterStyleEl.value, language: this.filterLanguageEl.value, density: this.filterDensityEl.value, layer: this.filterLayerEl.value });
-      }
+      const modified = this.filterModifiedEl.checked;
+      const modifiedAfter = this.filterAfterTypeEl.value;
+      filters = Object.assign(Object.assign({}, filters), { searchContents: this.filterSearchContentsEl.value, category: this.filterCategoryEl.value, allDescendants: this.filterAllDescendantsEl.checked, modifiedAfter: modified ? modifiedAfter : null, modifiedBy: modified ? this.filterUserEl.value : null, modifiedDate: modified && modifiedAfter === FILTER_AFTER.DATE_TIME
+          ? this.filterModifiedDateEl.value
+          : null, style: this.filterStyleEl.value, language: this.filterLanguageEl.value, density: this.filterDensityEl.value, layer: this.filterLayerEl.value });
       this.loadCallback(filters).then((items) => {
         this.images = items;
         this.selectedObjectsIds = [];
@@ -81,8 +85,8 @@ const GxIdeWWImages = class {
     this.deleteSelectionCallbackHandler = () => {
       this.deleteSelectionCallback(this.selectedObjectsIds);
     };
-    this.showMoreFilter = () => {
-      this.filterMore = !this.filterMore;
+    this.toggleFiltersHandler = () => {
+      this.filtersHidden = !this.filtersHidden;
     };
     this.selectAll = () => {
       this.chGridEl.selectAllRows();
@@ -140,9 +144,9 @@ const GxIdeWWImages = class {
         });
       });
     };
+    this.filtersHidden = true;
     this.filterAfterType = "";
     this.filterModified = false;
-    this.filterMore = false;
     this.images = [];
     this.imagesSelectedItems = [];
     this.selectedObjectsIds = [];
@@ -175,6 +179,12 @@ const GxIdeWWImages = class {
     this.listenChanges();
     this.getImages();
   }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
   // 7.LISTENERS //
   keyDownHandler(eventInfo) {
     if (document.activeElement === this.el) {
@@ -204,7 +214,7 @@ const GxIdeWWImages = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, this.renderFilter(), h("gxg-container", null, h("div", { class: "grid images-grid" }, this.renderImages(), this.renderImageData())), h("gxg-container", null, h("div", { class: "grid objects-count" }, h("div", { class: "flex with-gap" }, h("gxg-button", { id: "button-select-all", type: "primary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all" }, this._componentLocale.footer.btnSelectAll), h("gxg-button", { id: "button-new-file", type: "primary-text-only", onClick: this.newObjectCallbackHandler, part: "gxg-button gxg-button--new-file" }, this._componentLocale.footer.btnNew)), h("gxg-text", { class: "align-end", part: "objects-matching" }, `${this.images.length} ${this._componentLocale.objCount.matching}`))))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "master-wrapper" }, this.renderFilter(), h("div", { class: "grid-images-container" }, this.renderImagesData(), this.renderImages())), h("gxg-button", { id: "button-select-all", type: "primary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-end" }, this._componentLocale.footer.btnSelectAll), h("gxg-button", { id: "button-new-file", type: "primary-text-only", onClick: this.newObjectCallbackHandler, part: "gxg-button gxg-button--new-file", slot: "footer-end" }, this._componentLocale.footer.btnNew), h("gxg-text", { class: "align-end", part: "objects-matching", slot: "footer-start" }, `${this.images.length} ${this._componentLocale.objCount.matching}`)))));
   }
   static get assetsDirs() { return ["gx-ide-assets/ww-images"]; }
   get el() { return getElement(this); }

package/dist/esm/gxg-button-group.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-0da01575.js';
 import { s as state } from './store-c2650ca5.js';
 
-const buttonGroupCss = "/*! 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:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host(.button-group){display:inline-block;line-height:0;outline:none}:host(.button-group) .button-group-container{font-size:0;position:relative}:host(.button-group) ::slotted(button){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;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);transition:background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;color:var(--color-on-primary);border-radius:0;background-color:var(--gray-00);color:var(--color-primary);border-inline-end:1px solid var(--gray-02);padding-left:var(--spacing-comp-03);padding-right:var(--spacing-comp-03);height:20px}:host(.button-group) ::slotted(button:first-child){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md)}:host(.button-group) ::slotted(button:last-child){border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md)}:host(.button-group) ::slotted(button:focus){outline:none}:host(.button-group) ::slotted(button[data-active]){color:var(--color-on-primary);background-color:var(--color-primary-enabled);border-right-color:var(--color-primary-enabled)}:host(.button-group) ::slotted(button:not([outlined]):hover){color:var(--color-on-primary);background-color:var(--color-primary-hover);cursor:pointer}:host([disable-active]) ::slotted(button[data-active]){pointer-events:none}:host(:not([outlined])) ::slotted(button[data-active]){--gxg-border-color--focused:var(--color-primary-active--inverted);color:var(--color-on-primary);background-color:var(--color-primary-enabled);border-right-color:var(--color-primary-enabled)}:host(:not([outlined])) ::slotted(button[disabled]){background-color:var(--gxg-background-color--disabled);color:var(--gxg-color--disabled);border-inline-end-color:var(--gxg-border-color--disabled);pointer-events:none}:host([outlined]) ::slotted(button[disabled]),:host([outlined]) ::slotted(button[data-active][disabled]){background-color:var(--color-background);color:var(--gxg-color--disabled);border-color:var(--gxg-border-color--disabled);pointer-events:none;cursor:cell}:host(.button-group:not([disabled])) ::slotted(button:focus){outline:none;outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host(.rtl) ::slotted(button:last-child){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md);border-top-right-radius:0;border-bottom-right-radius:0}:host(.rtl) ::slotted(button:first-child){border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md);border-top-left-radius:0;border-bottom-left-radius:0}:host(.rtl) ::slotted(button){border-left:1px solid var(--gray-02);border-right:0}:host(.rtl) ::slotted(button:last-child){border-left:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([outlined]) ::slotted(button){background:var(--color-background);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-color:var(--color-primary-enabled)}:host([outlined]) ::slotted(button[data-active]){color:var(--color-primary-hover);background-color:var(--color-primary-hover-opacity-01)}:host([outlined]) ::slotted(button:hover){color:var(--color-primary-hover);background-color:var(--color-primary-hover-opacity-01)}:host([outlined]) ::slotted(button:not(:last-child)){border-right:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([title-alignment=center]){}:host([title-alignment=center]) .button-group-header-title{justify-content:center}:host([title-alignment=right]){}:host([title-alignment=right]) .button-group-header-title{justify-content:flex-end}:host([full-width]){display:block;width:100%}:host([full-width]) .button-group-container{display:flex}:host([full-width]) .button-group-container ::slotted(*){flex:1 1 auto !important}:host(.button-group.large) .button-group-header-title{font-size:var(--font-size-lg)}:host(.button-group.large) ::slotted(button){height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}";
+const buttonGroupCss = "/*! 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:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host(.button-group){display:inline-block;line-height:0;outline:none}:host(.button-group) .button-group-container{font-size:0;position:relative}:host(.button-group) ::slotted(button){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;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);transition:background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;color:var(--color-on-primary);border-radius:0;background-color:var(--gray-00);color:var(--color-primary);border-inline-end:1px solid var(--gray-02);padding-left:var(--spacing-comp-03);padding-right:var(--spacing-comp-03);height:20px}:host(.button-group) ::slotted(button:first-child){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md)}:host(.button-group) ::slotted(button:last-child){border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md)}:host(.button-group) ::slotted(button:focus){outline:none}:host(.button-group) ::slotted(button[data-active]){color:var(--color-on-primary);background-color:var(--color-primary-enabled);border-right-color:var(--color-primary-enabled)}:host(.button-group) ::slotted(button:not([outlined]):hover){color:var(--color-on-primary);background-color:var(--color-primary-hover);cursor:pointer}:host([disable-active]) ::slotted(button[data-active]){pointer-events:none}:host(:not([outlined])) ::slotted(button[data-active]){--gxg-border-color--focused:var(--color-primary-active--inverted);color:var(--color-on-primary);background-color:var(--color-primary-enabled);border-right-color:var(--color-primary-enabled)}:host(:not([outlined])) ::slotted(button[disabled]){background-color:var(--gxg-background-color--disabled);color:var(--gxg-color--disabled);border-inline-end-color:var(--gxg-border-color--disabled);pointer-events:none}:host([outlined]) ::slotted(button[disabled]),:host([outlined]) ::slotted(button[data-active][disabled]){background-color:var(--color-background);color:var(--gxg-color--disabled);border-color:var(--gxg-border-color--disabled);pointer-events:none;cursor:cell}:host(.button-group:not([disabled])) ::slotted(button:focus){outline:none;outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host(.rtl) ::slotted(button:last-child){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md);border-top-right-radius:0;border-bottom-right-radius:0}:host(.rtl) ::slotted(button:first-child){border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md);border-top-left-radius:0;border-bottom-left-radius:0}:host(.rtl) ::slotted(button){border-left:1px solid var(--gray-02);border-right:0}:host(.rtl) ::slotted(button:last-child){border-left:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([outlined]) ::slotted(button){background:var(--color-background);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-color:var(--color-primary-enabled)}:host([outlined]) ::slotted(button[data-active]){color:var(--color-primary-hover);background-color:var(--color-primary-hover-opacity-01)}:host([outlined]) ::slotted(button:hover){color:var(--color-primary-hover) !important;background-color:var(--color-primary-hover-opacity-01) !important}:host([outlined]) ::slotted(button:not(:last-child)){border-right:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([title-alignment=center]){}:host([title-alignment=center]) .button-group-header-title{justify-content:center}:host([title-alignment=right]){}:host([title-alignment=right]) .button-group-header-title{justify-content:flex-end}:host([full-width]){display:block;width:100%}:host([full-width]) .button-group-container{display:flex}:host([full-width]) .button-group-container ::slotted(*){flex:1 1 auto !important}:host(.button-group.large) .button-group-header-title{font-size:var(--font-size-lg)}:host(.button-group.large) ::slotted(button){height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}";
 
 const GxgButtonGroup = class {
   constructor(hostRef) {