@genexus/genexus-ide-ui 0.0.61 → 0.0.63

package/dist/components/gxg-tree.js

@@ -1,4 +1,239 @@
-import { G as GxgTree$1, d as defineCustomElement$1 } from './gxg-tree2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const gxgTreeCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:block;--gxg-tree-item-inner-spacing:var(--spacing-comp-01);overflow:auto;height:100%}:host::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}:host::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}:host::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}:host::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host ul{margin:0;padding-left:0;width:100%}";
+
+const GxgTree$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.treeItemStateChanged = createEvent(this, "treeItemStateChanged", 7);
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE METHODS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
+    this.masterTree = false;
+    // 3.STATE() VARIABLES //
+    // 4.PUBLIC PROPERTY API | WATCH'S //
+    /**
+     * Set this attribute if you want all the items to have a checkbox.
+     */
+    this.checkbox = true;
+    /**
+     * Set this attribute if you want all the items to be checked by default.
+     */
+    this.checked = false;
+    /**
+     * Set this attribute if you want all the items to be opened by default.
+     */
+    this.opened = true;
+    /**
+     * Set this attribute if you want all the items checkboxes to be toggled when the parent tree item checkbox is toggled.
+     */
+    this.toggleCheckboxes = false;
+    /**
+     * Set this attribute if you want to allow multi selection of the items. This property should only be set on the master tree.
+     */
+    this.multiSelection = false;
+    // 9.LOCAL METHODS //
+    /**
+     * This method evaluates if this tree is the master tree
+     */
+    this.evaluateIsMasterTree = () => {
+      var _a;
+      const grandFather = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+      if (grandFather === undefined || grandFather.nodeName !== "GXG-TREE") {
+        this.masterTree = true;
+      }
+    };
+    this.initialConfig = () => {
+      const parent = this.el.parentElement;
+      if ((parent === null || parent === void 0 ? void 0 : parent.tagName) === "GXG-TREE-ITEM") {
+        const treeItem = parent;
+        this.checkbox =
+          treeItem.checkbox !== undefined ? treeItem.checkbox : this.checkbox;
+        this.checked =
+          treeItem.checked !== undefined ? treeItem.checked : this.checked;
+        this.opened =
+          treeItem.opened !== undefined ? treeItem.opened : this.opened;
+        this.toggleCheckboxes =
+          treeItem.toggleCheckboxes !== undefined
+            ? treeItem.toggleCheckboxes
+            : this.toggleCheckboxes;
+      }
+    };
+    /**
+     * @description This functions is supposed to be called from any of the listeners that are attached to the tree-item events that are emitted when the state changes (toggleIconClicked, selectionChanged, checkboxToggled). When an item state is changed, this function emits the update item data, so that the host can update the tree model, if any, if desired.
+     */
+    this.emitTreeItemNewState = (itemData, emittedBy) => {
+      this.treeItemStateChanged.emit({ itemData, emittedBy: emittedBy });
+    };
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  componentWillLoad() {
+    this.initialConfig();
+    this.evaluateIsMasterTree();
+  }
+  // 7.LISTENERS //
+  checkboxToggledHandler(e) {
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "checkboxToggled");
+    }
+  }
+  doubleClickedHandler(e) {
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "doubleClicked");
+    }
+  }
+  selectionChangedHandler(e) {
+    //Unselect all items, except the one that triggered this event. This action should be done once, by the master tree.
+    const allChildren = this.el.querySelectorAll("gxg-tree-item");
+    if ((this.masterTree && this.multiSelection && !e.detail.ctrl) ||
+      (this.masterTree && !this.multiSelection)) {
+      Array.from(allChildren).forEach((item) => {
+        if (item !== e.detail.ref) {
+          item.selected = false;
+        }
+      });
+    }
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "selectionChanged");
+    }
+  }
+  toggleIconClickedHandler(e) {
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "toggleIconClicked");
+    }
+  }
+  // 8.PUBLIC METHODS API //
+  /**
+   * Returns an array of the selected tree-items, providing the id, checked status, selected status, and label.
+   */
+  async getCheckedItems(idsArray) {
+    const allTreeItems = Array.from(this.el.querySelectorAll("gxg-tree-item"));
+    const checkedTreeItems = [];
+    if (idsArray === null || idsArray === void 0 ? void 0 : idsArray.length) {
+      idsArray.forEach((id) => {
+        const found = allTreeItems.find((item) => id === item.id);
+        found &&
+          checkedTreeItems.push({
+            id: found.id,
+            label: found.label,
+            checked: found.checked,
+            selected: found.selected,
+          });
+      });
+    }
+    else {
+      allTreeItems.forEach((item) => {
+        item.checked &&
+          checkedTreeItems.push({
+            id: item.id,
+            label: item.label,
+            checked: item.checked,
+            selected: item.selected,
+          });
+      });
+    }
+    return checkedTreeItems;
+  }
+  /**
+   * Returns an array of the selected tree-items, providing the id, checked status, selected status, and label.
+   */
+  async getSelectedItems() {
+    const selectedItems = [];
+    const allItems = this.el.querySelectorAll("gxg-tree-item");
+    if (allItems === null || allItems === void 0 ? void 0 : allItems.length) {
+      Array.from(allItems).forEach((item) => {
+        if (item.selected) {
+          selectedItems.push({
+            id: item.id,
+            label: item.label,
+            checked: item.checked,
+            selected: item.selected,
+          });
+        }
+      });
+    }
+    return selectedItems;
+  }
+  /**
+   * @param ids: An array id the tree items to be toggled.
+   * @param open: A boolean indicating that the tree item should be opened or closed. (optional)
+   * @description This method is used to toggle a tree-item by the tree-item id/ids.
+   * @returns a boolean value indicating if the selected tree-item is open or not, after the method was called.
+   */
+  async toggleItems(ids, open) {
+    if (!(ids === null || ids === void 0 ? void 0 : ids.length)) {
+      return [];
+    }
+    const allTreeItems = Array.from(this.el.querySelectorAll("gxg-tree-item"));
+    const toggledTreeItems = [];
+    ids.forEach((id) => {
+      const found = allTreeItems.find((item) => id === item.id);
+      if (found && open === undefined) {
+        found.opened = !found.opened;
+      }
+      else if (found && open && !found.opened) {
+        found.opened = true;
+      }
+      else if (found && !open && found.opened) {
+        found.opened = false;
+      }
+      if (found) {
+        toggledTreeItems.push({
+          id: found.id,
+          opened: found.opened,
+        });
+      }
+    });
+    return toggledTreeItems;
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, null, h("div", { class: {
+        tree: true,
+      } }, h("ul", { ref: (el) => (this.ulTree = el) }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get style() { return gxgTreeCss; }
+}, [1, "gxg-tree", {
+    "checkbox": [1028],
+    "checked": [1540],
+    "opened": [4],
+    "toggleCheckboxes": [4, "toggle-checkboxes"],
+    "multiSelection": [4, "multi-selection"],
+    "getCheckedItems": [64],
+    "getSelectedItems": [64],
+    "toggleItems": [64]
+  }, [[0, "checkboxToggled", "checkboxToggledHandler"], [0, "doubleClicked", "doubleClickedHandler"], [0, "selectionChanged", "selectionChangedHandler"], [0, "toggleIconClicked", "toggleIconClickedHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tree"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tree":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTree$1);
+      }
+      break;
+  } });
+}
 
 const GxgTree = GxgTree$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ide-loader.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$3 } from './ch-window2.js';
 import { d as defineCustomElement$2 } from './ch-window-close2.js';
-import { d as defineCustomElement$1 } from './title.js';
+import { d as defineCustomElement$1 } from './title2.js';
 
 const ideLoaderCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--gxg-background-color--disabled) !important;color:var(--gxg-color--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader-wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:rgba(var(--color-background--rgb), 0.45);backdrop-filter:blur(15px);padding:var(--spacing-comp-05);flex-direction:column;gap:var(--spacing-comp-04);align-items:center;justify-content:center;box-sizing:border-box;-webkit-animation:wrapper 0.6s infinite alternate;animation:wrapper 0.6s infinite alternate;color:var(--color-on-secondary)}.loader-wrapper--visible{opacity:1}.loader-spinner{border:2px var(--gray-01) solid;border-top:2px var(--color-primary-enabled) solid;border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:30px;height:30px}.loader-description{max-width:400px;text-align:center}@keyframes wrapper{from{background-color:rgba(var(--color-background--rgb), 0.45)}to{background-color:rgba(var(--gray-02--rgb), 0.25)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}";
 

package/dist/components/index.d.ts

@@ -1,29 +1,32 @@
 /* GenexusIdeUi custom elements */
-export { GxIdeBpmAppDeclaration as GxIdeBpmAppDeclaration } from '../types/components/application-declaration/bpm-app-declaration';
-export { GxIdeContainer as GxIdeContainer } from '../types/components/container/container';
+export { GxIdeBpmAppDeclaration as GxIdeBpmAppDeclaration } from '../types/components/bpm-application-declaration/bpm-app-declaration';
+export { GxIdeContainer as GxIdeContainer } from '../types/components/_helpers/container/container';
 export { GxIdeCreateKbFromServer as GxIdeCreateKbFromServer } from '../types/components/create-kb-from-server/create-kb-from-server';
-export { GxIdeDirectorySelector as GxIdeDirectorySelector } from '../types/components/directory-selector/directory-selector';
-export { GxIdeEntitySelector as GxIdeEntitySelector } from '../types/components/entity-selector/entity-selector';
+export { GxIdeDirectorySelector as GxIdeDirectorySelector } from '../types/components/_helpers/directory-selector/directory-selector';
+export { GxIdeEntitySelector as GxIdeEntitySelector } from '../types/components/_helpers/entity-selector/entity-selector';
 export { GxIdeFileSelector as GxIdeFileSelector } from '../types/components/file-selector/file-selector';
 export { GxIdeKbManagerExport as GxIdeKbManagerExport } from '../types/components/kb-manager-export/kb-manager-export';
 export { GxIdeKbManagerImport as GxIdeKbManagerImport } from '../types/components/kb-manager-import/kb-manager-import';
-export { GxIdeListSelector as GxIdeListSelector } from '../types/components/list-selector/list-selector';
-export { GxIdeListSelectorItem as GxIdeListSelectorItem } from '../types/components/list-selector/list-selector-item/list-selector-item';
+export { GxIdeListSelector as GxIdeListSelector } from '../types/components/_helpers/list-selector/list-selector';
+export { GxIdeListSelectorItem as GxIdeListSelectorItem } from '../types/components/_helpers/list-selector/list-selector-item/list-selector-item';
 export { GxIdeNewEnvironment as GxIdeNewEnvironment } from '../types/components/new-environment/new-environment';
 export { GxIdeNewKb as GxIdeNewKb } from '../types/components/new-kb/new-kb';
 export { GxIdeNewObject as GxIdeNewObject } from '../types/components/new-object/new-object';
 export { GxIdeObjectSelector as GxIdeObjectSelector } from '../types/components/object-selector/object-selector';
 export { GxIdeReferences as GxIdeReferences } from '../types/components/references/references';
 export { GxIdeShareKb as GxIdeShareKb } from '../types/components/share-kb/share-kb';
-export { GxIdeStatusButtons as GxIdeStatusButtons } from '../types/components/status-buttons/gx-ide-status-buttons';
-export { GxIdeTeamDevCommit as GxIdeTeamDevCommit } from '../types/components/team-dev-commit/team-dev-commit';
-export { GxIdeTeamDevSelectRecentComment as GxIdeTeamDevSelectRecentComment } from '../types/components/team-dev-select-recent-comment/team-dev-select-recent-comment';
-export { GxIdeTeamDevUpdate as GxIdeTeamDevUpdate } from '../types/components/team-dev-update/team-dev-update';
-export { GxIdeTeamDevUpdatePartialSelection as GxIdeTeamDevUpdatePartialSelection } from '../types/components/team-dev-update-partial-selection/team-dev-update-partial-selection';
-export { GxIdeTeamDevUpdateToRevision as GxIdeTeamDevUpdateToRevision } from '../types/components/team-dev-update-to-revision/team-dev-update-to-revision';
-export { GxIdeTemplate as GxIdeTemplate } from '../types/components/_template/template';
+export { GxIdeStatusButtons as GxIdeStatusButtons } from '../types/components/_helpers/status-buttons/gx-ide-status-buttons';
+export { GxIdeSwitchPanel as GxIdeSwitchPanel } from '../types/components/_helpers/switcher/switch-panel/switch-panel';
+export { GxIdeSwitcher as GxIdeSwitcher } from '../types/components/_helpers/switcher/switcher';
+export { GxIdeTeamDevCommit as GxIdeTeamDevCommit } from '../types/components/team-dev/commit/team-dev-commit';
+export { GxIdeTeamDevSelectRecentComment as GxIdeTeamDevSelectRecentComment } from '../types/components/team-dev/select-recent-comment/team-dev-select-recent-comment';
+export { GxIdeTeamDevUpdate as GxIdeTeamDevUpdate } from '../types/components/team-dev/update/team-dev-update';
+export { GxIdeTeamDevUpdatePartialSelection as GxIdeTeamDevUpdatePartialSelection } from '../types/components/team-dev/update-partial-selection/team-dev-update-partial-selection';
+export { GxIdeTeamDevUpdateToRevision as GxIdeTeamDevUpdateToRevision } from '../types/components/team-dev/update-to-revision/team-dev-update-to-revision';
+export { GxIdeTemplate as GxIdeTemplate } from '../types/components/_starting-template/template';
 export { GxIdeTest as GxIdeTest } from '../types/components/_test/test';
-export { GxIdeTopBar as GxIdeTopBar } from '../types/components/top-bar/top-bar';
+export { GxIdeTitle as GxIdeTitle } from '../types/components/_helpers/title/title';
+export { GxIdeTopBar as GxIdeTopBar } from '../types/components/_helpers/top-bar/top-bar';
 export { GxIdeWWImages as GxIdeWwImages } from '../types/components/ww-images/ww-images';
 
 /**

package/dist/components/index.js

@@ -29,6 +29,7 @@ export { ChIcon, defineCustomElement as defineCustomElementChIcon } from './ch-i
 export { ChIntersectionObserver, defineCustomElement as defineCustomElementChIntersectionObserver } from './ch-intersection-observer.js';
 export { ChNextDataModeling, defineCustomElement as defineCustomElementChNextDataModeling } from './ch-next-data-modeling.js';
 export { ChNextDataModelingItem, defineCustomElement as defineCustomElementChNextDataModelingItem } from './ch-next-data-modeling-item.js';
+export { ChNextDataModelingRender, defineCustomElement as defineCustomElementChNextDataModelingRender } from './ch-next-data-modeling-render.js';
 export { ChNextProgressBar, defineCustomElement as defineCustomElementChNextProgressBar } from './ch-next-progress-bar.js';
 export { ChNotifications, defineCustomElement as defineCustomElementChNotifications } from './ch-notifications.js';
 export { ChNotificationsItem, defineCustomElement as defineCustomElementChNotificationsItem } from './ch-notifications-item.js';
@@ -50,14 +51,15 @@ export { ChSuggestListItem, defineCustomElement as defineCustomElementChSuggestL
 export { ChTestActionGroup, defineCustomElement as defineCustomElementChTestActionGroup } from './ch-test-action-group.js';
 export { ChTestDropdown, defineCustomElement as defineCustomElementChTestDropdown } from './ch-test-dropdown.js';
 export { ChTestSuggest, defineCustomElement as defineCustomElementChTestSuggest } from './ch-test-suggest.js';
-export { ChTestTreeX, defineCustomElement as defineCustomElementChTestTreeX } from './ch-test-tree-x.js';
 export { ChTextblock, defineCustomElement as defineCustomElementChTextblock } from './ch-textblock.js';
 export { ChTimer, defineCustomElement as defineCustomElementChTimer } from './ch-timer.js';
 export { ChTooltip, defineCustomElement as defineCustomElementChTooltip } from './ch-tooltip.js';
 export { ChTree, defineCustomElement as defineCustomElementChTree } from './ch-tree.js';
 export { ChTreeItem, defineCustomElement as defineCustomElementChTreeItem } from './ch-tree-item.js';
-export { ChTreeX, defineCustomElement as defineCustomElementChTreeX } from './ch-tree-x.js';
-export { ChTreeXListItem, defineCustomElement as defineCustomElementChTreeXListItem } from './ch-tree-x-list-item.js';
+export { ChTreeView, defineCustomElement as defineCustomElementChTreeView } from './ch-tree-view.js';
+export { ChTreeViewItem, defineCustomElement as defineCustomElementChTreeViewItem } from './ch-tree-view-item.js';
+export { ChTreeViewRender, defineCustomElement as defineCustomElementChTreeViewRender } from './ch-tree-view-render.js';
+export { ChTreeViewRenderWrapper, defineCustomElement as defineCustomElementChTreeViewRenderWrapper } from './ch-tree-view-render-wrapper.js';
 export { ChWindow, defineCustomElement as defineCustomElementChWindow } from './ch-window.js';
 export { ChWindowClose, defineCustomElement as defineCustomElementChWindowClose } from './ch-window-close.js';
 export { GxGridChameleon, defineCustomElement as defineCustomElementGxGridChameleon } from './gx-grid-chameleon.js';
@@ -79,6 +81,8 @@ export { GxIdeObjectSelector, defineCustomElement as defineCustomElementGxIdeObj
 export { GxIdeReferences, defineCustomElement as defineCustomElementGxIdeReferences } from './gx-ide-references.js';
 export { GxIdeShareKb, defineCustomElement as defineCustomElementGxIdeShareKb } from './gx-ide-share-kb.js';
 export { GxIdeStatusButtons, defineCustomElement as defineCustomElementGxIdeStatusButtons } from './gx-ide-status-buttons.js';
+export { GxIdeSwitchPanel, defineCustomElement as defineCustomElementGxIdeSwitchPanel } from './gx-ide-switch-panel.js';
+export { GxIdeSwitcher, defineCustomElement as defineCustomElementGxIdeSwitcher } from './gx-ide-switcher.js';
 export { GxIdeTeamDevCommit, defineCustomElement as defineCustomElementGxIdeTeamDevCommit } from './gx-ide-team-dev-commit.js';
 export { GxIdeTeamDevSelectRecentComment, defineCustomElement as defineCustomElementGxIdeTeamDevSelectRecentComment } from './gx-ide-team-dev-select-recent-comment.js';
 export { GxIdeTeamDevUpdate, defineCustomElement as defineCustomElementGxIdeTeamDevUpdate } from './gx-ide-team-dev-update.js';
@@ -86,6 +90,7 @@ export { GxIdeTeamDevUpdatePartialSelection, defineCustomElement as defineCustom
 export { GxIdeTeamDevUpdateToRevision, defineCustomElement as defineCustomElementGxIdeTeamDevUpdateToRevision } from './gx-ide-team-dev-update-to-revision.js';
 export { GxIdeTemplate, defineCustomElement as defineCustomElementGxIdeTemplate } from './gx-ide-template.js';
 export { GxIdeTest, defineCustomElement as defineCustomElementGxIdeTest } from './gx-ide-test.js';
+export { GxIdeTitle, defineCustomElement as defineCustomElementGxIdeTitle } from './gx-ide-title.js';
 export { GxIdeTopBar, defineCustomElement as defineCustomElementGxIdeTopBar } from './gx-ide-top-bar.js';
 export { GxIdeWwImages, defineCustomElement as defineCustomElementGxIdeWwImages } from './gx-ide-ww-images.js';
 export { GxgAccordion, defineCustomElement as defineCustomElementGxgAccordion } from './gxg-accordion.js';
@@ -140,6 +145,7 @@ export { GxgOptions, defineCustomElement as defineCustomElementGxgOptions } from
 export { GxgOptionsItem, defineCustomElement as defineCustomElementGxgOptionsItem } from './gxg-options-item.js';
 export { GxgPaginator, defineCustomElement as defineCustomElementGxgPaginator } from './gxg-paginator.js';
 export { GxgPill, defineCustomElement as defineCustomElementGxgPill } from './gxg-pill.js';
+export { GxgPills, defineCustomElement as defineCustomElementGxgPills } from './gxg-pills.js';
 export { GxgProgressBar, defineCustomElement as defineCustomElementGxgProgressBar } from './gxg-progress-bar.js';
 export { GxgScroll, defineCustomElement as defineCustomElementGxgScroll } from './gxg-scroll.js';
 export { GxgSelect, defineCustomElement as defineCustomElementGxgSelect } from './gxg-select.js';
@@ -160,6 +166,7 @@ export { GxgTabs, defineCustomElement as defineCustomElementGxgTabs } from './gx
 export { GxgTest, defineCustomElement as defineCustomElementGxgTest } from './gxg-test.js';
 export { GxgText, defineCustomElement as defineCustomElementGxgText } from './gxg-text.js';
 export { GxgTitle, defineCustomElement as defineCustomElementGxgTitle } from './gxg-title.js';
+export { GxgTitleEditable, defineCustomElement as defineCustomElementGxgTitleEditable } from './gxg-title-editable.js';
 export { GxgToggle, defineCustomElement as defineCustomElementGxgToggle } from './gxg-toggle.js';
 export { GxgToolbar, defineCustomElement as defineCustomElementGxgToolbar } from './gxg-toolbar.js';
 export { GxgToolbarItem, defineCustomElement as defineCustomElementGxgToolbarItem } from './gxg-toolbar-item.js';

package/dist/components/list-selector-item.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
-const listSelectorItemCss = "*,::after,::before{box-sizing:border-box}gx-ide-list-selector-item{display:block;max-width:100%;display:flex;font-size:inherit}gx-ide-list-selector-item:hover .label{background-color:var(--gxg-background-color--hover);cursor:pointer}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--gxg-background-color--selected-hover)}gx-ide-list-selector-item:not(:first-child){border-block-start:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item:not(:first-child):has(input:checked){border-block-color:var(--gxg-border-color--selected)}gx-ide-list-selector-item[readonly]:not([readonly=false]) .label{pointer-events:none;background-color:transparent}gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) .label__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}input{width:0;height:0;opacity:0;margin:0}input:focus+.label{outline:var(--border-width-md) solid var(--color-primary-active);outline-offset:-2px}input:checked+.label{background-color:var(--gxg-background-color--selected)}.label{width:100%}.label__wrapper{display:flex;min-height:28px;align-items:center;gap:var(--spacing-comp-02);padding:var(--spacing-comp-01) var(--spacing-comp-02);width:100%}.label__wrapper__description{flex:1}gx-ide-list-selector-item[no-border]{border-block-start:none}.label__universal-slot{display:flex;align-items:center;justify-content:center}";
+const listSelectorItemCss = "*,::after,::before{box-sizing:border-box}gx-ide-list-selector-item{display:block;max-width:100%;display:flex;font-size:inherit}gx-ide-list-selector-item:hover .label{background-color:var(--gxg-background-color--hover);cursor:pointer}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--gxg-background-color--selected-hover)}gx-ide-list-selector-item:not(:first-child){border-block-start:var(--gx-ide-list-items-border)}gx-ide-list-selector-item:not(:first-child):has(input:checked){border-block-color:var(--gxg-border-color--selected)}gx-ide-list-selector-item[readonly]:not([readonly=false]) .label{pointer-events:none;background-color:transparent}gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) .label__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}input{width:0;height:0;opacity:0;margin:0}input:focus+.label{outline:var(--border-width-md) solid var(--color-primary-active);outline-offset:-2px}input:checked+.label{background-color:var(--gxg-background-color--selected)}.label{width:100%}.label__index{align-self:baseline}.label__wrapper{display:flex;min-height:28px;align-items:center;gap:var(--spacing-comp-02);padding:var(--spacing-comp-01) var(--spacing-comp-02);width:100%}.label__description{flex:1;display:flex;align-items:center;gap:var(--spacing-comp-02)}gx-ide-list-selector-item[no-border]{border-block-start:none}.label__universal-slot{display:flex;align-items:center;justify-content:center}";
 
 const GxIdeListSelectorItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -10,6 +10,7 @@ const GxIdeListSelectorItem = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.__registerHost();
     this.itemSelectionChanged = createEvent(this, "itemSelectionChanged", 7);
     this.hasUniversalSlot = false;
+    this.index = undefined;
     // 6.COMPONENT LIFECYCLE METHODS //
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
@@ -73,6 +74,19 @@ const GxIdeListSelectorItem = /*@__PURE__*/ proxyCustomElement(class extends HTM
         this.parentList.listName &&
         (this.name = this.parentList.listName);
     };
+    this.evaluateOrderedList = () => {
+      if (this.parentIsListSelector && this.parentList.ordered) {
+        let index = Array.from(this.parentList.children).indexOf(this.el) + 1;
+        if (index < 10) {
+          // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.
+          index = `0${index}`;
+        }
+        else {
+          index = `${index}`;
+        }
+        this.index = index;
+      }
+    };
     this.evaluateIconColor = () => {
       this.parentIsListSelector &&
         this.parentList.iconsColor &&
@@ -100,6 +114,7 @@ const GxIdeListSelectorItem = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.iconColor = undefined;
     this.iconSize = undefined;
     this.noBorder = false;
+    this.universalSlotEnd = false;
   }
   // 5.EVENTS (EMIT) //
   componentWillLoad() {
@@ -113,10 +128,11 @@ const GxIdeListSelectorItem = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.evaluateBorder();
     this.evaluateUniversalSlot();
     this.assignName();
+    this.evaluateOrderedList();
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { role: "listitem" }, h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.icon ? (h("gxg-icon", { class: "label__icon", type: this.icon, size: this.iconSize, color: this.iconColor, part: "icon" })) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, h("span", { class: "label__description", part: "description" }, this.itemValue)))));
+    return (h(Host, { role: "listitem" }, h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.index ? (h("span", { class: "label__index" }, this.index, ". ")) : null, this.icon ? (h("gxg-icon", { class: "label__icon", type: this.icon, size: this.iconSize, color: this.iconColor, part: "icon" })) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, h("span", { class: "label__description", part: "description" }, this.itemValue ? this.itemValue : h("slot", null))))));
   }
   get el() { return this; }
   static get style() { return listSelectorItemCss; }
@@ -129,7 +145,8 @@ const GxIdeListSelectorItem = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "icon": [1],
     "iconColor": [1025, "icon-color"],
     "iconSize": [1025, "icon-size"],
-    "noBorder": [1540, "no-border"]
+    "noBorder": [1540, "no-border"],
+    "universalSlotEnd": [516, "universal-slot-end"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/list-selector.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './title.js';
+import { d as defineCustomElement$1 } from './title2.js';
 
 const listSelectorCss = "*,::after,::before{box-sizing:border-box}:host{display:flex;flex-direction:column;max-height:100%;font-family:var(--font-family-primary)}gxg-title{display:block;margin-block-end:var(--gxg-label-margin-vertical)}.list{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0;list-style-type:none;margin:0;padding:0;color:var(--gx-ide-component-text-color);background-color:var(--gx-ide-component-background-color);font-size:var(--gx-ide-component-text-size);font-weight:var(--font-weight-regular);display:block;background-color:var(--color-background);max-height:100%;overflow-y:auto;border:1px solid var(--gx-ide-container-border-color)}.list::-webkit-scrollbar{width:6px;height:6px}.list::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.list::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.list::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.list .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host([no-list-border]) .list{border:none}";