@genexus/genexus-ide-ui 0.0.13 → 0.0.15

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-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/gxg-suggest.js

@@ -1,58 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as state } from './store.js';
-import { f as formMessageLogic } from './form.js';
-import { f as formClasses, c as commonClassesNames } from './classesNames.js';
-
-const stylesCss = "@charset \"UTF-8\";: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}:host(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}ch-suggest{font-family:var(--font-family-primary);font-size:var(--font-size-lg);color:var(--color-on-background);}ch-suggest::-webkit-scrollbar{width:6px;height:6px}ch-suggest::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}ch-suggest ::-webkit-scrollbar{width:6px;height:6px}ch-suggest ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(label){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;align-items:center;cursor:default;font-size:inherit}ch-suggest[label-position=start]::part(label){margin-inline-end:var(--gxg-label-margin-horizontal)}ch-suggest[label-position=above]::part(label){margin-block-end:var(--gxg-label-margin-vertical)}ch-suggest::part(input){height:var(--spacing-comp-05);border:var(--border-width-sm) solid var(--gxg-border-color--regular);padding:var(--spacing-comp-01) var(--spacing-comp-02);box-sizing:border-box;background-color:var(--color-background)}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(header){display:block;padding-block-end:var(--spacing-comp-02);display:flex;justify-content:flex-end}ch-suggest::part(close-button){height:var(--spacing-comp-05);width:var(--spacing-comp-05);background-color:var(--color-background);color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-sizing:border-box;cursor:pointer;display:block}ch-suggest::part(close-button):hover{background-color:var(--color-primary-hover-opacity-01)}ch-suggest::part(close-button)::after{content:\"✖\";width:100%;display:block;line-height:24px;text-align:center}ch-suggest::part(close-button):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(dropdown){background-color:var(--color-background);margin-top:var(--spacing-comp-01);padding:var(--spacing-comp-02);box-shadow:var(--box-shadow-02);}ch-suggest::part(dropdown)::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(dropdown) .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}ch-suggest::part(dropdown) ::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown) ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}gxg-suggest.gxg-validation--success ch-suggest::part(input){outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--success ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input){outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input){outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-error-dark)}gxg-suggest.gxg--disabled ch-suggest{pointer-events:none}gxg-suggest.gxg--disabled ch-suggest::part(input){background-color:var(--gray-01);color:var(--color-on-disabled)}gxg-suggest[ellipsis]:not([ellipsis=false]) ch-suggest-list-item::part(content-wrapper){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}ch-suggest-list{margin:var(--spacing-comp-01) 0;font-family:inherit;border:var(--border-width-sm) solid var(--gxg-border-color--regular)}ch-suggest-list:first-child{margin-top:0}ch-suggest-list:last-child{margin-bottom:0}ch-suggest-list::part(title){text-transform:uppercase;font-weight:var(--font-weight-semibold);margin:var(--spacing-comp-01) 0 0 0;padding:var(--spacing-comp-01) var(--spacing-comp-02)}ch-suggest-list-item{}ch-suggest-list-item::part(button){padding:var(--spacing-comp-01) var(--spacing-comp-02);align-items:center;gap:var(--spacing-comp-01);box-sizing:border-box}ch-suggest-list-item::part(button):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest-list-item::part(description)::before{content:\" - \"}ch-suggest-list-item gxg-icon::part(ch-icon){--icon-size:16px;margin-right:2px}ch-suggest-list-item:hover{background-color:var(--gxg-background-color-item-hover)}";
-
-const GxgSuggest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /* VALIDATION */
-    /**
-     * The validation status
-     */
-    this.validationStatus = "indeterminate";
-    /**
-     * The presence of this attribute makes the suggest disabled.
-     */
-    this.disabled = false;
-    /**
-     * The presence of this attribute forces the suggest list items to not wrap to a second line, and it will display ellipsis. (...)
-     */
-    this.ellipsis = true;
-  }
-  render() {
-    return (h(Host, { class: {
-        large: state.large,
-        [formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
-        [formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
-        [formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
-        [formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
-        [commonClassesNames["DISABLED_CLASS"]]: this.disabled,
-      } }, h("slot", null), formMessageLogic(this)));
-  }
-  static get style() { return stylesCss; }
-}, [4, "gxg-suggest", {
-    "validationStatus": [1025, "validation-status"],
-    "validationMessage": [1, "validation-message"],
-    "disabled": [4],
-    "ellipsis": [516]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["gxg-suggest"];
-  components.forEach(tagName => { switch (tagName) {
-    case "gxg-suggest":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, GxgSuggest$1);
-      }
-      break;
-  } });
-}
+import { G as GxgSuggest$1, d as defineCustomElement$1 } from './suggest.js';
 
 const GxgSuggest = GxgSuggest$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gxg-test.js

@@ -119,8 +119,8 @@ const GxgTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     else if (this.showGrid) {
       return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "none", part: "ch-grid-pending-for-updates", class: "no-border" }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, "column-type": "rich", "rich-row-selector": true, "rich-row-selector-mode": "mark" }), h("ch-grid-column", { "column-name": "name", "column-name-position": "text", settingable: false }), h("ch-grid-column", { "column-name": "productos", "column-name-position": "text", settingable: false })), this.showGridData && [
-        h("ch-grid-row", { rowid: "123" }, h("ch-grid-cell", null), h("ch-grid-cell", null, "Nombre"), h("ch-grid-cell", null, "Productos")),
-        h("ch-grid-rowset", null, h("ch-grid-rowset-legend", null, "Identidad"), h("ch-grid-row", null, h("ch-grid-cell", null), h("ch-grid-cell", null, "Nombre"), h("ch-grid-cell", null, "Productos")), h("ch-grid-row", null, h("ch-grid-cell", null), h("ch-grid-cell", null, "English"), h("ch-grid-cell", null, "Products")), h("ch-grid-row", null, h("ch-grid-cell", null), h("ch-grid-cell", null, "Portugu\u00EAs"), h("ch-grid-cell", null, "Produtos"))),
+        h("ch-grid-row", { rowid: "123" }, h("ch-grid-cell", { ref: (el) => (el.type = "rich") }), h("ch-grid-cell", null, "Nombre"), h("ch-grid-cell", null, "Productos")),
+        h("ch-grid-rowset", null, h("ch-grid-rowset-legend", null, "Identidad"), h("ch-grid-row", { rowSelector: true }, h("ch-grid-cell", { rowSelector: true }), h("ch-grid-cell", null, "Nombre"), h("ch-grid-cell", null, "Productos")), h("ch-grid-row", null, h("ch-grid-cell", null), h("ch-grid-cell", null, "English"), h("ch-grid-cell", null, "Products")), h("ch-grid-row", null, h("ch-grid-cell", null), h("ch-grid-cell", null, "Portugu\u00EAs"), h("ch-grid-cell", null, "Produtos"))),
       ])));
     }
     else {