@genexus/genexus-ide-ui 0.0.62 → 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/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';