@genexus/genexus-ide-ui 0.0.12 → 0.0.14

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

@@ -0,0 +1,433 @@
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { L as Locale } from './locale.js';
+import { r as renderTreeItems } from './render-tree.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 './ch-window2.js';
+import { d as defineCustomElement$e } from './ch-window-close2.js';
+import { d as defineCustomElement$d } from './container.js';
+import { d as defineCustomElement$c } from './top-bar.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';
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const renderSuggestLists = (suggestData) => {
+  if (suggestData === null || suggestData === void 0 ? void 0 : suggestData.suggestLists.length) {
+    return suggestData.suggestLists.map((list) => {
+      return (h("ch-suggest-list", { label: list.label }, list.items.map((item) => {
+        return renderSuggestListsItem(item);
+      })));
+    });
+  }
+  return [];
+};
+const renderSuggestListsItem = (suggestItem) => {
+  return (h("ch-suggest-list-item", { description: suggestItem.description, value: suggestItem.value }, [suggestItem.label, suggestItem.icon && renderIcon(suggestItem.icon)]));
+};
+const renderIcon = (iconName) => {
+  return h("gxg-icon", { color: "auto", type: iconName, slot: "icon" });
+};
+
+/**
+ * @description This function converts SelectorCategoryData[] SuggestData
+ */
+const convertObjectDataToSuggestData = (selectorCategoriesData) => {
+  const suggestData = {
+    suggestItems: null,
+    suggestLists: []
+  };
+  if (selectorCategoriesData.length) {
+    selectorCategoriesData.forEach(selectorCategory => {
+      const suggestList = {
+        label: selectorCategory.name,
+        items: []
+      };
+      selectorCategory.items.forEach((objectData) => {
+        const suggestItem = {
+          value: objectData.id,
+          label: objectData.name,
+          description: objectData.description,
+          icon: objectData.icon
+        };
+        suggestList.items.push(suggestItem);
+      });
+      suggestData.suggestLists.push(suggestList);
+    });
+  }
+  return suggestData;
+};
+/**
+ * @description Keeps an updated state of the last suggested categories objects passed by the host.
+ */
+const updateSuggestedObjects = (selectorCategoryData) => {
+  const suggestedObjects = [];
+  if (selectorCategoryData === null || selectorCategoryData === void 0 ? void 0 : selectorCategoryData.length) {
+    selectorCategoryData.forEach(category => {
+      if (category.items) {
+        category.items.forEach(object => {
+          suggestedObjects.push({
+            id: object.id,
+            icon: object.icon,
+            name: object.name,
+            description: object.description
+          });
+        });
+      }
+    });
+  }
+  return suggestedObjects;
+};
+/**
+ * @description This function converts ReferenceData[] data to GxgTreeItemData[]
+ */
+const convertReferenceDataToTreeData = (referencedBy) => {
+  const treeData = [];
+  if (!referencedBy) {
+    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));
+  });
+  return treeData;
+};
+
+const referencesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.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}: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-right: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-right: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 GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
+    /**
+     * Keeps an array of the last suggested objects, returned by selectorSourceCallback
+     */
+    this.suggestedObjects = [];
+    /**
+     * The references messages max. width that appear if the tree is empty or could not be retrieved.
+     */
+    this.referencesMessagesMaxWidth = "200px";
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    /**
+     * @description 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 itemValue = e.detail.value;
+        this.selectedObject = this.suggestedObjects.find(item => {
+          return item.id === itemValue;
+        });
+      });
+    };
+    /**
+     * @description It attaches several events on the 'referencedByEl' element, which is a tree.
+     */
+    this.attachReferencedByListeners = () => {
+      /* 'toggleIconClicked' Event: This events gets fired when the user clicks on the toggle icon, that opens/close a tree. Here we only use it to check if the item has lazy items to be loaded. */
+      this.referencedByEl.addEventListener("toggleIconClicked", async (e) => {
+        if (e.detail.lazy && e.detail.id) {
+          this.loadReferencesCallback(e.detail.id, false)
+            .then(result => {
+            this.referencedBy = result;
+          })
+            .catch(() => {
+            // to do
+          });
+        }
+      });
+      /* 'selectionChanged' Event: Fired when a new tree item was selected.*/
+      this.referencedByEl.addEventListener("selectionChanged", (e) => {
+        this.selectReferenceCallback(e.detail.id);
+        /* Returns void Promise*/
+      });
+      /* 'doubleClicked' Event: Fired when a tree item was double-clicked.*/
+      this.referencedByEl.addEventListener("doubleClicked", (e) => {
+        this.openObjectCallback(e.detail.id);
+        /* Returns void Promise*/
+      });
+    };
+    /**
+     * @description It attaches several events on the 'referencesToEl' element, which is a tree.
+     */
+    this.attachReferencesToListeners = () => {
+      /* 'toggleIconClicked' Event: (Read description on 'attachReferencedByListeners' as it does the same)*/
+      this.referencesToEl.addEventListener("toggleIconClicked", async (e) => {
+        if (e.detail.lazy && e.detail.id) {
+          this.loadReferencesCallback(e.detail.id, true)
+            .then(result => {
+            this.referencesTo = result;
+          })
+            .catch(() => {
+            // to do
+          });
+        }
+      });
+      /* 'selectionChanged' Event: Fired when a new tree item was selected.*/
+      this.referencesToEl.addEventListener("selectionChanged", (e) => {
+        this.selectReferenceCallback(e.detail.id);
+        /* Returns void Promise*/
+      });
+      /* 'doubleClicked' Event: Fired when a tree item was double-clicked.*/
+      this.referencesToEl.addEventListener("doubleClicked", (e) => {
+        this.openObjectCallback(e.detail.id);
+        /* Returns void Promise*/
+      });
+    };
+    /**
+     * @description This handler gets fired every time the value of the 'Select Object' ch-suggest changes. Then, it calls the 'updateSuggestedObjects' method, that keeps the state of the last suggested objects that were passed bu the host. Also, it shows the suggested objects on the ch-suggest box.
+     */
+    this.selectObjectValueChangedHandler = async (e) => {
+      const value = e.detail;
+      this.selectorSourceCallback(value)
+        .then(result => {
+        /* update selected objects state*/
+        this.suggestedObjects = updateSuggestedObjects(result);
+        /* show suggestions*/
+        this.objectsSuggestions = convertObjectDataToSuggestData(result);
+      })
+        .catch(() => {
+        // to do
+      });
+    };
+    this.openObjectCallbackHandler = async () => {
+      this.openObjectCallback(this.selectedObject.id);
+      /* Returns an empty Promise*/
+    };
+    /**
+     * @description handler that gets fired when the use clicks on the ch-suggest button (...)
+     */
+    this.openSelectorDialogCallbackHandler = async () => {
+      this.selectedObject = await this.openSelectorDialogCallback();
+    };
+    /**
+     * @description It evaluates if loadReferencesCallback should be called, depending wether there is or not an actual selected object.
+     */
+    this.evaluateInitialReferenceData = () => {
+      var _a;
+      const selectedObjectId = (_a = this.selectedObject) === null || _a === void 0 ? void 0 : _a.id;
+      selectedObjectId && this.loadReferencesHandler(selectedObjectId);
+    };
+    /**
+     * @description This method invokes 'loadReferencesCallback' callback for 'Is Referenced By' and 'Has References To' panels.
+     */
+    this.loadReferencesHandler = async (id) => {
+      /* Referenced By*/
+      if (this.loadReferencesCallback) {
+        this.loadReferencesCallback(id, false)
+          .then(result => {
+          this.referencedBy = result;
+        })
+          .catch(() => {
+          /* To do*/
+        });
+      }
+      /* References To*/
+      if (this.loadReferencesCallback) {
+        this.loadReferencesCallback(id, true)
+          .then(result => {
+          this.referencesTo = result;
+        })
+          .catch(() => {
+          /* To do*/
+        });
+      }
+    };
+    /**
+     * @description It hides/show the bar (The header bottom section).
+     */
+    this.hideBarButtonClickedHandler = () => {
+      this.barHidden = !this.barHidden;
+    };
+    this.barHidden = false;
+    this.objectsSuggestions = undefined;
+    this.referencedBy = undefined;
+    this.referencesTo = undefined;
+    this.hideTopBar = false;
+    this.selectedObject = undefined;
+    this.selectorSourceCallback = undefined;
+    this.loadReferencesCallback = undefined;
+    this.openObjectCallback = undefined;
+    this.openSelectorDialogCallback = undefined;
+    this.selectReferenceCallback = undefined;
+  }
+  selectedObjectHandler(newSelectedObject) {
+    this.loadReferencesHandler(newSelectedObject.id);
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.evaluateInitialReferenceData();
+  }
+  componentDidLoad() {
+    this.attachSelectObjectListener();
+    this.attachReferencedByListeners();
+    this.attachReferencesToListeners();
+  }
+  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" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, 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.id, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest" }, 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" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, justifyContent: "center", part: "referenced-by-container" }, h("gxg-tree", { ref: el => (this.referencedByEl = el), class: { "gxi-hidden": !((_a = this.referencedBy) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: false, part: "referenced-by-tree" }, renderTreeItems(convertReferenceDataToTreeData(this.referencedBy))), !((_b = this.referencedBy) === 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.referencedBy) === null || _c === void 0 ? void 0 : _c.length) === 0
+      ? this._componentLocale.main.isReferencedByEmpty
+      : this._componentLocale.main.isReferencedByError))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, justifyContent: "center", part: "references-to-container" }, h("gxg-tree", { ref: el => (this.referencesToEl = el), class: { "gxi-hidden": !((_d = this.referencesTo) === null || _d === void 0 ? void 0 : _d.length) }, checkbox: false, part: "references-to-tree" }, renderTreeItems(convertReferenceDataToTreeData(this.referencesTo))), !((_e = this.referencesTo) === 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.referencesTo) === null || _f === void 0 ? void 0 : _f.length) === 0
+      ? this._componentLocale.main.hasReferencesEmpty
+      : this._componentLocale.main.hasReferencesToError)))))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/references"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "selectedObject": ["selectedObjectHandler"]
+  }; }
+  static get style() { return referencesCss; }
+}, [1, "gx-ide-references", {
+    "hideTopBar": [4, "hide-top-bar"],
+    "selectedObject": [1040],
+    "selectorSourceCallback": [16],
+    "loadReferencesCallback": [16],
+    "openObjectCallback": [16],
+    "openSelectorDialogCallback": [16],
+    "selectReferenceCallback": [16],
+    "barHidden": [32],
+    "objectsSuggestions": [32],
+    "referencedBy": [32],
+    "referencesTo": [32]
+  }]);
+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", "gx-ide-top-bar", "gxg-button", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-suggest", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree", "gxg-tree-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-references":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeReferences$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "ch-suggest":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "ch-suggest-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "ch-suggest-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "gx-ide-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "gx-ide-top-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "gxg-form-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-suggest":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-tree":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tree-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxIdeReferences = GxIdeReferences$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeReferences, defineCustomElement };

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

@@ -1,48 +1,101 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
+import { d as defineCustomElement$a } from './icon.js';
+import { d as defineCustomElement$9 } from './container.js';
+import { d as defineCustomElement$8 } from './top-bar.js';
+import { d as defineCustomElement$7 } from './button.js';
+import { d as defineCustomElement$6 } from './form-text.js';
+import { d as defineCustomElement$5 } from './icon2.js';
+import { d as defineCustomElement$4 } from './gxg-label2.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 
-const templateCss = ".gxi-hidden{display:none !important}.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}:host{display:block}";
+const templateCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.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}: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-right: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-right:2px}:host{display:block}";
 
 const GxIdeTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.renderPresentation = () => {
-      return Locale.format(this._componentLocale.presentation, [this.firstName]);
-    };
-    this.firstName = undefined;
+    this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
+    this.hideTopBar = false;
   }
-  // 6.METHODS //
+  // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
-    this.componentDidLoadEvent.emit(true);
   }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: { "gx-ide-component": true } }, h("p", null, this.renderPresentation())));
+    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { fullHeight: true, "container-title": "Header Title" }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
   }
   static get assetsDirs() { return ["gx-ide-assets/template"]; }
   get el() { return this; }
   static get style() { return templateCss; }
 }, [1, "gx-ide-template", {
-    "firstName": [1, "first-name"]
+    "hideTopBar": [4, "hide-top-bar"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-template"];
+  const components = ["gx-ide-template", "ch-icon", "gx-ide-container", "gx-ide-top-bar", "gxg-button", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-title", "gxg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-template":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GxIdeTemplate$1);
       }
       break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "gx-ide-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gx-ide-top-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-form-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

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

@@ -1,4 +1,5 @@
-import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { r as renderTreeItems } from './render-tree.js';
 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';
@@ -8,30 +9,6 @@ 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, 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 testCss = ":host{display:block}";
 
 const GxIdeUiTest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/gx-ide-top-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdeTopBar extends Components.GxIdeTopBar, HTMLElement {}
+export const GxIdeTopBar: {
+  prototype: GxIdeTopBar;
+  new (): GxIdeTopBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gx-ide-top-bar.js

@@ -0,0 +1,6 @@
+import { G as GxIdeTopBar$1, d as defineCustomElement$1 } from './top-bar.js';
+
+const GxIdeTopBar = GxIdeTopBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeTopBar, defineCustomElement };

package/dist/components/gxg-breadcrumb.js

@@ -12,7 +12,6 @@ const GxgBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.breadcrumbClicked = createEvent(this, "breadcrumbClicked", 7);
   }
   breadcrumbClickedFunc() {
-    parseInt(this.el.getAttribute("data-index"), 10);
     this.breadcrumbClicked.emit({
       id: this.id,
     });