@genexus/genexus-ide-ui 0.0.57 → 0.0.59

package/dist/components/gx-ide-references.js

@@ -1,24 +1,26 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
-import { u as updateTreeModel, r as renderTreeItems } from './update-tree-model.js';
+import { c as config } from './config.js';
 import { r as renderSuggestLists } from './render-suggest.js';
-import { d as defineCustomElement$i } from './icon.js';
-import { d as defineCustomElement$h } from './ch-suggest2.js';
-import { d as defineCustomElement$g } from './ch-suggest-list2.js';
-import { d as defineCustomElement$f } from './ch-suggest-list-item2.js';
-import { d as defineCustomElement$e } from './ch-window2.js';
-import { d as defineCustomElement$d } from './ch-window-close2.js';
-import { d as defineCustomElement$c } from './container.js';
-import { d as defineCustomElement$b } from './button.js';
-import { d as defineCustomElement$a } from './form-checkbox.js';
-import { d as defineCustomElement$9 } from './icon2.js';
-import { d as defineCustomElement$8 } from './gxg-label2.js';
-import { d as defineCustomElement$7 } from './suggest.js';
-import { d as defineCustomElement$6 } from './text.js';
-import { d as defineCustomElement$5 } from './title.js';
-import { d as defineCustomElement$4 } from './tooltip.js';
-import { d as defineCustomElement$3 } from './gxg-tree2.js';
-import { d as defineCustomElement$2 } from './gxg-tree-item2.js';
+import { d as defineCustomElement$k } from './checkbox.js';
+import { d as defineCustomElement$j } from './icon.js';
+import { d as defineCustomElement$i } from './ch-suggest2.js';
+import { d as defineCustomElement$h } from './ch-suggest-list2.js';
+import { d as defineCustomElement$g } from './ch-suggest-list-item2.js';
+import { d as defineCustomElement$f } from './tree-x.js';
+import { d as defineCustomElement$e } from './tree-x-list-item.js';
+import { d as defineCustomElement$d } from './ch-window2.js';
+import { d as defineCustomElement$c } from './ch-window-close2.js';
+import { d as defineCustomElement$b } from './container.js';
+import { d as defineCustomElement$a } from './button.js';
+import { d as defineCustomElement$9 } from './form-checkbox.js';
+import { d as defineCustomElement$8 } from './icon2.js';
+import { d as defineCustomElement$7 } from './gxg-label2.js';
+import { d as defineCustomElement$6 } from './suggest.js';
+import { d as defineCustomElement$5 } from './text.js';
+import { d as defineCustomElement$4 } from './title.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$2 } from './tree-view.js';
 
 /**
  * @description This function converts SelectorCategoryData[] SuggestData
@@ -47,35 +49,32 @@ const convertObjectDataToSuggestData = (selectorCategoriesData) => {
   }
   return suggestData;
 };
+const convertToTreeItem = (item) => {
+  var _a;
+  return ({
+    caption: item.description,
+    id: item.id,
+    items: ((_a = item.items) !== null && _a !== void 0 ? _a : []).map(convertToTreeItem),
+    lazy: item.hasChildren && (item.items == null || item.items.length === 0),
+    leaf: item.hasChildren === false,
+    leftImgSrc: item.icon
+  });
+};
 /**
- * @description This function converts ReferenceData[] data to GxgTreeItemData[]
+ * @description This function converts ReferenceData[] data to TreeItemData[]
  */
-const convertReferenceDataToTreeData = (referencedBy) => {
+const convertReferenceDataToTreeViewData = (referenceData) => {
   const treeData = [];
-  if (!referencedBy) {
+  if (!referenceData) {
     return treeData;
   }
-  const convertItem = (item) => {
-    var _a;
-    const treeItem = {
-      description: item.description,
-      lazy: item.hasChildren,
-      icon: item.icon,
-      id: item.id,
-      label: item.name
-    };
-    if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      treeItem.items = item.items.map(child => convertItem(child));
-    }
-    return treeItem;
-  };
-  referencedBy.forEach(item => {
-    treeData.push(convertItem(item));
+  referenceData.forEach(item => {
+    treeData.push(convertToTreeItem(item));
   });
   return treeData;
 };
 
-const referencesCss = ".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}.header{}.header__top{grid-template-columns:min-content auto 1fr min-content;grid-template-rows:1fr;grid-template-areas:\"hide-bar-button suggest-label gxg-suggest selector-dialog-button\"}.header__top .hide-bar-button{grid-area:hide-bar-button}.header__top .suggest-label{grid-area:suggest-label}.header__top gxg-suggest{grid-area:gxg-suggest}.header__top .selector-dialog-button{grid-area:selector-dialog-button}.header__bottom{display:grid;grid-template-rows:1fr;transition:var(--gx-ide-timing-super-fast-ms) grid-template-rows}.header__bottom--hidden{grid-template-rows:0fr}.header__bottom .outer-wrapper{overflow:hidden}.header__bottom .inner-wrapper{padding-top:var(--gx-ide-grid-row-gap);display:flex;flex-direction:row;align-items:center;justify-content:space-between}.header__bottom .inner-wrapper__left{display:flex;align-items:center;gap:var(--gx-ide-grid-row-gap)}.header-hidden .first-row{grid-template-columns:auto 1fr auto}.header-hidden .first-row>:nth-child(3){align-self:end}.header-hidden .second-row{display:none}.main{grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-template-areas:\"is-referenced has-references\";height:100%;gap:0}.main>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.main .is-referenced{grid-area:is-referenced}.main .has-references{grid-area:has-references}";
+const referencesCss = ".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}.header{}.header__top{grid-template-columns:min-content auto 1fr min-content;grid-template-rows:1fr;grid-template-areas:\"hide-bar-button suggest-label gxg-suggest selector-dialog-button\"}.header__top .hide-bar-button{grid-area:hide-bar-button}.header__top .suggest-label{grid-area:suggest-label}.header__top gxg-suggest{grid-area:gxg-suggest}.header__top .selector-dialog-button{grid-area:selector-dialog-button}.header__bottom{display:grid;grid-template-rows:1fr;transition:var(--gx-ide-timing-super-fast-ms) grid-template-rows}.header__bottom--hidden{grid-template-rows:0fr}.header__bottom .outer-wrapper{overflow:hidden}.header__bottom .inner-wrapper{padding-top:var(--gx-ide-grid-row-gap);display:flex;flex-direction:row;align-items:center;justify-content:space-between}.header__bottom .inner-wrapper__left{display:flex;align-items:center;gap:var(--gx-ide-grid-row-gap)}.header-hidden .first-row{grid-template-columns:auto 1fr auto}.header-hidden .first-row>:nth-child(3){align-self:end}.header-hidden .second-row{display:none}.main{grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-template-areas:\"is-referenced has-references\";height:100%;gap:0}.main .reference-container{display:flex;min-height:300px}.main .reference-container--no-references{display:flex;align-items:center;justify-content:center}.main>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.main .is-referenced{grid-area:is-referenced}.main .has-references{grid-area:has-references}";
 
 const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -83,10 +82,6 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.__attachShadow();
     this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
-    /**
-     * The references messages max. width that appear if the tree is empty or could not be retrieved.
-     */
-    this.referencesMessagesMaxWidth = "200px";
     /**
      * The last SelectorCategoryData[] returned by selectorSourceCallback
      */
@@ -94,16 +89,28 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
+    this.attachTreeEvents = () => {
+      // this.referencedByTreeEl.addEventListener(
+      //   "expandedItemChange",
+      //   (item: CustomEvent<{ id: string; expanded: boolean }>) => {
+      //     console.log(item.detail.id);
+      //   }
+      // );
+      // this.referencesToTreeEl.addEventListener(
+      //   "expandedItemChange",
+      //   (item: CustomEvent<{ id: string; expanded: boolean }>) => {
+      //     console.log(item.detail.id);
+      //   }
+      // );
+    };
     /**
      * It attaches on the ch-suggest, the "itemSelected" event triggered by the ch-suggest-list-item. This helps set the new 'selectedObject'.
      */
-    this.attachSelectObjectListener = () => {
-      this.selectObjectSuggestEl.addEventListener("itemSelected", (e) => {
-        const categoryIndex = e.detail.indexes.listIndex;
-        const itemIndex = e.detail.indexes.itemIndex;
-        this.selectedObject =
-          this.selectorCategoryData[categoryIndex].items[itemIndex];
-      });
+    this.selectObjectSelectionChanged = (e) => {
+      const categoryIndex = e.detail.indexes.listIndex;
+      const itemIndex = e.detail.indexes.itemIndex;
+      this.selectedObject =
+        this.selectorCategoryData[categoryIndex].items[itemIndex];
     };
     /**
      * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
@@ -149,26 +156,16 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      */
     this.loadReferencesHandler = async (id, to = false) => {
       if (this.loadReferencesCallback) {
-        /* is referenced by*/
-        if (!to) {
-          this.loadReferencesCallback(id, false)
-            .then(result => {
-            this.referencedByTreeData = convertReferenceDataToTreeData(result);
-          })
-            .catch(() => {
-            /* To do*/
-          });
-        }
-        /* is referenced by*/
-        if (to) {
-          this.loadReferencesCallback(id, true)
-            .then(result => {
-            this.referencesToTreeData = convertReferenceDataToTreeData(result);
-          })
-            .catch(() => {
-            /* To do*/
-          });
-        }
+        this.loadReferencesCallback(id, to).then(result => {
+          if (to) {
+            this.referencesToTreeData =
+              convertReferenceDataToTreeViewData(result);
+          }
+          else {
+            this.referencedByTreeData =
+              convertReferenceDataToTreeViewData(result);
+          }
+        });
       }
     };
     /**
@@ -177,71 +174,27 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.hideBarButtonClickedHandler = () => {
       this.barHidden = !this.barHidden;
     };
-    /**
-     * Simple helper function to get 'this.referencedByTreeData' or 'this.referencesToTreeData'
-     */
-    this.getRef = (to = false) => {
-      if (!to) {
-        /* referenced by*/
-        return this.referencedByTreeData;
-      }
-      else {
-        /* references to*/
-        return this.referencesToTreeData;
-      }
-    };
-    /**
-     * Simple helper function to update 'this.referencedByTreeData' or 'this.referencesToTreeData'
-     */
-    this.updateRef = (to = false, updatedData) => {
-      if (!to) {
-        /* referenced by*/
-        this.referencedByTreeData = updatedData;
-      }
-      else {
-        /* references to*/
-        this.referencesToTreeData = updatedData;
+    this.referencesLazyLoadCallbackHandler = (ref) => async (treeItemId) => {
+      if (this.loadReferencesCallback) {
+        const to = ref === "references-to";
+        const referencesLazyChildren = await this.loadReferencesCallback(treeItemId, to);
+        const treeLazyChildren = convertReferenceDataToTreeViewData(referencesLazyChildren);
+        return new Promise(resolve => {
+          resolve(treeLazyChildren);
+        });
       }
+      return new Promise(resolve => {
+        resolve([]);
+      });
     };
-    /**
-     * Handles changes on any of the references (by or to). Used to:
-     * 1) Keep the models updated.
-     * 2) call the openObjectCallback.
-     * 3) call the loadReferencesCallback if a lazy node was toggled.
-     */
-    this.referencesPanelStateChangedHandler = (to = false) => (e) => {
-      const event = e.detail.emittedBy;
-      const nodeData = e.detail.itemData;
-      const nodeId = e.detail.itemData.id;
-      const nodeLabel = e.detail.itemData.label;
-      /* tree item was selected*/
-      if (event === "selectionChanged") {
-        this.selectReferenceCallback(nodeId);
-        /* Returns void Promise*/
-      }
-      /* tree item was double-clicked.*/
-      if (event === "doubleClicked") {
-        this.openObjectCallback(nodeId);
-      }
-      let updatedTreeModel = [];
-      const lazy = nodeData.lazy;
-      if (lazy) {
-        // loadReferencesCallback
-        let children = [];
-        this.loadReferencesCallback(nodeId, to)
-          .then(result => {
-          children = convertReferenceDataToTreeData(result);
-          // Then update model
-          updatedTreeModel = updateTreeModel(this.getRef(to), { id: nodeId, label: nodeLabel, items: children }, nodeId);
-          this.updateRef(to, updatedTreeModel);
-        })
-          .catch(() => {
-          /* To do*/
+    this.referenceSelectedHandler = (selectedItem) => {
+      if (this.selectReferenceCallback) {
+        const selectedItems = [];
+        selectedItem.detail.forEach(item => {
+          selectedItems.push(item.id);
         });
-      }
-      else {
-        updatedTreeModel = updateTreeModel(this.getRef(to), nodeData, nodeId);
-        this.updateRef(to, updatedTreeModel);
+        this.selectReferenceCallback(selectedItems[0]);
+        // returns void
       }
     };
     this.referencedByTreeData = undefined;
@@ -271,22 +224,28 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.evaluateInitialReferenceData();
   }
   componentDidLoad() {
-    this.attachSelectObjectListener();
+    this.attachTreeEvents();
   }
   componentDidRender() {
     this.componentDidRenderEvent.emit(this._componentLocale.componentName);
   }
   // 10.RENDER() FUNCTION //
   render() {
-    var _a, _b, _c, _d, _e, _f;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, onSelectionChanged: this.selectObjectSelectionChanged, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
         "header__bottom": true,
         "header__bottom--hidden": this.barHidden
-      } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid gxi-full-height gxi-overflow-auto" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, fullHeight: true, noContentPadding: true, class: "gxi-overflow-auto", part: "referenced-by-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(false), part: "referenced-by-tree" }, renderTreeItems(this.referencedByTreeData)), !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "referenced-by-text" }, ((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) === 0
+      } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid gxi-full-height gxi-overflow-auto" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, fullHeight: true, class: "gxi-overflow-auto", part: "referenced-by-container" }, h("div", { class: {
+        "reference-container": true,
+        "reference-container--no-references": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length)
+      } }, h("gxg-tree-view", { class: { "gxi-hidden": !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) }, part: "referenced-by-tree", treeModel: this.referencedByTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("referenced-by"), onSelectedItemsChange: this.referenceSelectedHandler, dragDisabled: true, dropDisabled: true }), !((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) && (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "referenced-by-text" }, ((_d = this.referencedByTreeData) === null || _d === void 0 ? void 0 : _d.length) === 0
       ? this._componentLocale.main.isReferencedByEmpty
-      : this._componentLocale.main.isReferencedByError))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, fullHeight: true, noContentPadding: true, class: "gxi-overflow-auto", part: "references-to-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_d = this.referencesToTreeData) === null || _d === void 0 ? void 0 : _d.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(true), part: "references-to-tree" }, renderTreeItems(this.referencesToTreeData)), !((_e = this.referencesToTreeData) === null || _e === void 0 ? void 0 : _e.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "references-to-text" }, ((_f = this.referencesToTreeData) === null || _f === void 0 ? void 0 : _f.length) === 0
+      : this._componentLocale.main.isReferencedByError)))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, fullHeight: true, class: "gxi-overflow-auto", part: "references-to-container" }, h("div", { class: {
+        "reference-container": true,
+        "reference-container--no-references": !((_e = this.referencesToTreeData) === null || _e === void 0 ? void 0 : _e.length)
+      } }, h("gxg-tree-view", { class: { "gxi-hidden": !((_f = this.referencesToTreeData) === null || _f === void 0 ? void 0 : _f.length) }, part: "referenced-to-tree", treeModel: this.referencesToTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("references-to"), onSelectedItemsChange: this.referenceSelectedHandler }), !((_g = this.referencesToTreeData) === null || _g === void 0 ? void 0 : _g.length) && (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "references-to-text" }, ((_h = this.referencesToTreeData) === null || _h === void 0 ? void 0 : _h.length) === 0
       ? this._componentLocale.main.hasReferencesEmpty
-      : this._componentLocale.main.hasReferencesToError)))))));
+      : this._componentLocale.main.hasReferencesToError))))))));
   }
   static get assetsDirs() { return ["gx-ide-assets/references"]; }
   get el() { return this; }
@@ -312,94 +271,104 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-references", "ch-icon", "ch-suggest", "ch-suggest-list", "ch-suggest-list-item", "ch-window", "ch-window-close", "gx-ide-container", "gxg-button", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-suggest", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree", "gxg-tree-item"];
+  const components = ["gx-ide-references", "ch-checkbox", "ch-icon", "ch-suggest", "ch-suggest-list", "ch-suggest-list-item", "ch-tree-x", "ch-tree-x-list-item", "ch-window", "ch-window-close", "gx-ide-container", "gxg-button", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-suggest", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree-view"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-references":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GxIdeReferences$1);
       }
       break;
+    case "ch-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
     case "ch-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "ch-suggest":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "ch-suggest-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "ch-suggest-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "ch-tree-x":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }
       break;
-    case "ch-window":
+    case "ch-tree-x-list-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "ch-window-close":
+    case "ch-window":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }
       break;
-    case "gx-ide-container":
+    case "ch-window-close":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }
       break;
-    case "gxg-button":
+    case "gx-ide-container":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }
       break;
-    case "gxg-form-checkbox":
+    case "gxg-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
       break;
-    case "gxg-icon":
+    case "gxg-form-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "gxg-label":
+    case "gxg-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "gxg-suggest":
+    case "gxg-label":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "gxg-text":
+    case "gxg-suggest":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "gxg-title":
+    case "gxg-text":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "gxg-tooltip":
+    case "gxg-title":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "gxg-tree":
+    case "gxg-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "gxg-tree-item":
+    case "gxg-tree-view":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/gx-ide-test.js

@@ -1,5 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { u as updateTreeModel, r as renderTreeItems } from './update-tree-model.js';
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$9 } from './icon.js';
 import { d as defineCustomElement$8 } from './button.js';
 import { d as defineCustomElement$7 } from './form-checkbox.js';
@@ -9,6 +8,53 @@ import { d as defineCustomElement$4 } from './tooltip.js';
 import { d as defineCustomElement$3 } from './gxg-tree2.js';
 import { d as defineCustomElement$2 } from './gxg-tree-item2.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 GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/gxg-accordion-item.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './icon2.js';
 import { d as defineCustomElement$3 } from './gxg-label2.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const accordionItemCss = "@charset \"UTF-8\";/*! 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{position:relative;outline:none;display:block;margin-bottom:var(--spacing-lay-s);font-family:\"Times New Roman\", Times, serif}:host:last-child{margin-bottom:0}:host .item__header__button{display:flex;align-items:center;border-width:var(--border-width-md);border-style:solid;border-color:transparent}:host .item__header__button:focus{outline:none;border-color:var(--color-primary-active)}:host .item__header__button__title-subtitle__title{margin:0}:host .item__header__button__title-subtitle__subtitle{margin:0}:host .item__header__button__meta-icon-wrapper__icon{display:flex}:host .item__header__button:hover{cursor:pointer}:host .item__container{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;text-align:start}:host .disabled-layer{width:100%;height:100%;position:absolute;z-index:99;cursor:not-allowed}:host([mode=classical]) .item__header__button,:host([mode=boxed]) .item__header__button{justify-content:space-between;padding-top:0;padding-inline-end:var(--spacing-comp-01);padding-bottom:0;padding-inline-start:var(--spacing-comp-02);min-height:20px;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host([mode=classical]) .item__header__button .cover,:host([mode=boxed]) .item__header__button .cover{position:absolute;height:100%;width:100%;left:0;top:0;background-color:transparent;z-index:10}:host([mode=classical]) .item__header__button .cover.hidden,:host([mode=boxed]) .item__header__button .cover.hidden{display:none}:host([mode=classical]) .item__header__button__title-subtitle,:host([mode=boxed]) .item__header__button__title-subtitle{margin-inline-end:var(--spacing-comp-04);width:100%}:host([mode=classical]) .item__header__button__title-subtitle__title,:host([mode=boxed]) .item__header__button__title-subtitle__title{display:flex;align-items:center;text-align:start;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;letter-spacing:0.06em}:host([mode=classical]) .item__header__button__title-subtitle__title gxg-form-text::part(input),:host([mode=boxed]) .item__header__button__title-subtitle__title gxg-form-text::part(input){letter-spacing:0.06em}:host([mode=classical]) .item__header__button__title-subtitle__title__icon,:host([mode=boxed]) .item__header__button__title-subtitle__title__icon{display:flex;margin-inline-end:var(--spacing-comp-01)}:host([mode=classical]) .item__header__button__title-subtitle__subtitle,:host([mode=boxed]) .item__header__button__title-subtitle__subtitle{padding-bottom:2px;max-width:300px;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;text-align:start}:host([mode=classical]) .item__header__button__meta-icon-wrapper,:host([mode=boxed]) .item__header__button__meta-icon-wrapper{display:flex;align-items:center;flex-shrink:0}:host([mode=classical]) .item__header__button__meta-icon-wrapper__meta,:host([mode=boxed]) .item__header__button__meta-icon-wrapper__meta{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;margin-right:var(--spacing-comp-02)}:host([mode=classical]) .item__container,:host([mode=boxed]) .item__container{padding-top:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02);padding-inline-start:var(--spacing-comp-02)}:host([mode=classical].has-subtitle) .item__header__button,:host([mode=boxed].has-subtitle) .item__header__button{align-items:start}:host([mode=classical][no-padding]) .item__container,:host([mode=boxed][no-padding]) .item__container{padding:0}:host([mode=classical][has-border]) .item__container{border:var(--border-width-sm) solid var(--gray-02);border-top:0}:host([mode=classical]) .item__header__button{background-color:var(--color-secondary-enabled)}:host([mode=classical]) .item__header__button:hover{background-color:var(--color-secondary-hover)}:host([mode=classical]) .item__container{background-color:var(--color-background)}:host([mode=classical]) .item--disabled{cursor:not-allowed}:host([mode=classical]) .item--disabled .item__header__button{background-color:var(--color-primary-disabled)}:host([mode=classical]) .item--disabled .item__header__button .icon-wrapper{padding-inline-end:2px}:host([mode=classical]) .item--disabled .item__header__button__title-subtitle__title,:host([mode=classical]) .item--disabled .item__header__button__title-subtitle__subtitle{color:var(--color-on-disabled)}:host([mode=classical]) .item--disabled .item__header__button__meta-icon-wrapper__meta{color:var(--color-on-primary);opacity:0.3}:host([mode=classical][editable-title]) .item__header__button__title-subtitle__subtitle{margin-inline-start:5px}:host([mode=classical][editable-title]) .item--disabled .item__header__button__title-subtitle__title{opacity:0.3}:host([mode=boxed]) .item{background-color:var(--gray-01);transition-property:border-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host([mode=boxed]) .item__header__button{background:transparent}:host([mode=boxed]) .item__header__button:hover{background-color:var(--gray-02)}:host([mode=boxed]) .item__container{background:transparent}:host([mode=boxed]) .item:hover{border-color:var(--color-primary-hover)}:host([mode=boxed]) .item--disabled .item__header__button__title-subtitle__title,:host([mode=boxed]) .item--disabled .item__header__button__title-subtitle__subtitle{color:var(--color-primary-disabled)}:host([mode=boxed]) .item--disabled .item__header__button__meta-icon-wrapper__meta{opacity:0.5}:host([mode=boxed][editable-title]) .item__header__button__title-subtitle__subtitle{margin-inline-start:5px}:host([mode=boxed][editable-title]) .item--disabled .item__header__button__title-subtitle__title{opacity:0.5}:host([mode=slim]) .item__header__button,:host([mode=minimal]) .item__header__button{justify-content:flex-end;flex-direction:row-reverse}:host([mode=slim]) .item__container,:host([mode=minimal]) .item__container{padding-top:var(--spacing-comp-01);padding-inline-end:0;padding-bottom:var(--spacing-comp-01);padding-inline-start:0}:host([mode=slim][no-padding]) .item__container,:host([mode=minimal][no-padding]) .item__container{padding:0;margin-inline-start:0}:host([mode=slim]){margin-bottom:var(--spacing-lay-xs)}:host([mode=slim]) .item__header__button{padding:2px 0}:host([mode=slim]) .item__header__button:hover gxg-icon{background-color:var(--color-primary-hover)}:host([mode=slim]) .item__header__button:active gxg-icon{background-color:var(--color-primary-active)}:host([mode=slim]) .item__header__button gxg-icon{background:var(--color-primary-enabled);border-radius:50%;margin-inline-end:var(--spacing-comp-02);width:16px;height:16px}:host([mode=slim]) .item__header__button__title-subtitle__title{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}:host([mode=slim]) .item__container{margin-inline-start:26px}:host([mode=slim]) .item--open gxg-icon{background:var(--color-primary-active)}:host([mode=slim]) .item--disabled{cursor:not-allowed;pointer-events:none}:host([mode=slim]) .item--disabled gxg-icon{background:var(--color-primary-disabled)}:host([mode=minimal]){margin-bottom:var(--spacing-lay-xs)}:host([mode=minimal]) .item__header__button gxg-icon{margin-inline-end:var(--spacing-comp-01)}:host([mode=minimal]) .item__header__button__title-subtitle__title{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}:host([mode=minimal]) .item__container{margin-inline-start:26px}:host([mode=classical].large) .item__header__button__title-subtitle__title,:host([mode=boxed].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__header__button__title-subtitle__subtitle,:host([mode=boxed].large) .item__header__button__title-subtitle__subtitle{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__header__button__meta-icon-wrapper__meta,:host([mode=boxed].large) .item__header__button__meta-icon-wrapper__meta{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__container,:host([mode=boxed].large) .item__container{font-size:var(--font-size-lg)}:host([mode=slim].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=slim].large) .item__container{font-size:var(--font-size-lg)}:host([mode=minimal].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=minimal].large) .item__container{font-size:var(--font-size-lg)}";
+const accordionItemCss = "@charset \"UTF-8\";/*! 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)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background)}:host{position:relative;outline:none;display:block;margin-bottom:var(--spacing-lay-s);font-family:\"Times New Roman\", Times, serif}:host:last-child{margin-bottom:0}:host .item__header__button{display:flex;align-items:center;border-width:var(--border-width-md);border-style:solid;border-color:transparent}:host .item__header__button:focus{outline:none;border-color:var(--color-primary-active)}:host .item__header__button__title-subtitle__title{margin:0}:host .item__header__button__title-subtitle__subtitle{margin:0}:host .item__header__button__meta-icon-wrapper__icon{display:flex}:host .item__header__button:hover{cursor:pointer}:host .item__container{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;text-align:start}:host .disabled-layer{width:100%;height:100%;position:absolute;z-index:99;cursor:not-allowed}:host([mode=classical]) .item__header__button,:host([mode=boxed]) .item__header__button{justify-content:space-between;padding-top:0;padding-inline-end:var(--spacing-comp-01);padding-bottom:0;padding-inline-start:var(--spacing-comp-02);min-height:20px;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host([mode=classical]) .item__header__button .cover,:host([mode=boxed]) .item__header__button .cover{position:absolute;height:100%;width:100%;left:0;top:0;background-color:transparent;z-index:10}:host([mode=classical]) .item__header__button .cover.hidden,:host([mode=boxed]) .item__header__button .cover.hidden{display:none}:host([mode=classical]) .item__header__button__title-subtitle,:host([mode=boxed]) .item__header__button__title-subtitle{margin-inline-end:var(--spacing-comp-04);width:100%}:host([mode=classical]) .item__header__button__title-subtitle__title,:host([mode=boxed]) .item__header__button__title-subtitle__title{display:flex;align-items:center;text-align:start;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;letter-spacing:0.06em}:host([mode=classical]) .item__header__button__title-subtitle__title gxg-form-text::part(input),:host([mode=boxed]) .item__header__button__title-subtitle__title gxg-form-text::part(input){letter-spacing:0.06em}:host([mode=classical]) .item__header__button__title-subtitle__title__icon,:host([mode=boxed]) .item__header__button__title-subtitle__title__icon{display:flex;margin-inline-end:var(--spacing-comp-01)}:host([mode=classical]) .item__header__button__title-subtitle__subtitle,:host([mode=boxed]) .item__header__button__title-subtitle__subtitle{padding-bottom:2px;max-width:300px;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;text-align:start}:host([mode=classical]) .item__header__button__meta-icon-wrapper,:host([mode=boxed]) .item__header__button__meta-icon-wrapper{display:flex;align-items:center;flex-shrink:0}:host([mode=classical]) .item__header__button__meta-icon-wrapper__meta,:host([mode=boxed]) .item__header__button__meta-icon-wrapper__meta{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;margin-right:var(--spacing-comp-02)}:host([mode=classical]) .item__container,:host([mode=boxed]) .item__container{padding-top:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02);padding-inline-start:var(--spacing-comp-02)}:host([mode=classical].has-subtitle) .item__header__button,:host([mode=boxed].has-subtitle) .item__header__button{align-items:start}:host([mode=classical][no-padding]) .item__container,:host([mode=boxed][no-padding]) .item__container{padding:0}:host([mode=classical][has-border]) .item__container{border:var(--border-width-sm) solid var(--gray-02);border-top:0}:host([mode=classical]) .item__header__button{background-color:var(--color-secondary-enabled)}:host([mode=classical]) .item__header__button:hover{background-color:var(--color-secondary-hover)}:host([mode=classical]) .item__container{background-color:var(--color-background)}:host([mode=classical]) .item--disabled{cursor:not-allowed}:host([mode=classical]) .item--disabled .item__header__button{background-color:var(--color-primary-disabled)}:host([mode=classical]) .item--disabled .item__header__button .icon-wrapper{padding-inline-end:2px}:host([mode=classical]) .item--disabled .item__header__button__title-subtitle__title,:host([mode=classical]) .item--disabled .item__header__button__title-subtitle__subtitle{color:var(--color-on-disabled)}:host([mode=classical]) .item--disabled .item__header__button__meta-icon-wrapper__meta{color:var(--color-on-primary);opacity:0.3}:host([mode=classical][editable-title]) .item__header__button__title-subtitle__subtitle{margin-inline-start:5px}:host([mode=classical][editable-title]) .item--disabled .item__header__button__title-subtitle__title{opacity:0.3}:host([mode=boxed]) .item{background-color:var(--gray-01);transition-property:border-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host([mode=boxed]) .item__header__button{background:transparent}:host([mode=boxed]) .item__header__button:hover{background-color:var(--gray-02)}:host([mode=boxed]) .item__container{background:transparent}:host([mode=boxed]) .item:hover{border-color:var(--color-primary-hover)}:host([mode=boxed]) .item--disabled .item__header__button__title-subtitle__title,:host([mode=boxed]) .item--disabled .item__header__button__title-subtitle__subtitle{color:var(--color-primary-disabled)}:host([mode=boxed]) .item--disabled .item__header__button__meta-icon-wrapper__meta{opacity:0.5}:host([mode=boxed][editable-title]) .item__header__button__title-subtitle__subtitle{margin-inline-start:5px}:host([mode=boxed][editable-title]) .item--disabled .item__header__button__title-subtitle__title{opacity:0.5}:host([mode=slim]) .item__header__button,:host([mode=minimal]) .item__header__button{justify-content:flex-end;flex-direction:row-reverse}:host([mode=slim]) .item__container,:host([mode=minimal]) .item__container{padding-top:var(--spacing-comp-01);padding-inline-end:0;padding-bottom:var(--spacing-comp-01);padding-inline-start:0}:host([mode=slim][no-padding]) .item__container,:host([mode=minimal][no-padding]) .item__container{padding:0;margin-inline-start:0}:host([mode=slim]){margin-bottom:var(--spacing-lay-xs)}:host([mode=slim]) .item__header__button{padding:2px 0}:host([mode=slim]) .item__header__button:hover gxg-icon{background-color:var(--color-primary-hover)}:host([mode=slim]) .item__header__button:active gxg-icon{background-color:var(--color-primary-active)}:host([mode=slim]) .item__header__button gxg-icon{background:var(--color-primary-enabled);border-radius:50%;margin-inline-end:var(--spacing-comp-02);width:16px;height:16px}:host([mode=slim]) .item__header__button__title-subtitle__title{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}:host([mode=slim]) .item__container{margin-inline-start:26px}:host([mode=slim]) .item--open gxg-icon{background:var(--color-primary-active)}:host([mode=slim]) .item--disabled{cursor:not-allowed;pointer-events:none}:host([mode=slim]) .item--disabled gxg-icon{background:var(--color-primary-disabled)}:host([mode=minimal]){margin-bottom:var(--spacing-lay-xs)}:host([mode=minimal]) .item__header__button gxg-icon{margin-inline-end:var(--spacing-comp-01)}:host([mode=minimal]) .item__header__button__title-subtitle__title{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}:host([mode=minimal]) .item__container{margin-inline-start:26px}:host([mode=classical].large) .item__header__button__title-subtitle__title,:host([mode=boxed].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__header__button__title-subtitle__subtitle,:host([mode=boxed].large) .item__header__button__title-subtitle__subtitle{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__header__button__meta-icon-wrapper__meta,:host([mode=boxed].large) .item__header__button__meta-icon-wrapper__meta{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__container,:host([mode=boxed].large) .item__container{font-size:var(--font-size-lg)}:host([mode=slim].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=slim].large) .item__container{font-size:var(--font-size-lg)}:host([mode=minimal].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=minimal].large) .item__container{font-size:var(--font-size-lg)}";
 
 const GxgAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {