@genexus/genexus-ide-ui 0.0.56 → 0.0.58

package/dist/collection/components/references/references.js

@@ -2,10 +2,8 @@
 import { Host, h } from "@stencil/core";
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
-import { renderTreeItems } from "../../common/render-tree";
-import { updateTreeModel } from "../../common/update-tree-model";
 import { renderSuggestLists } from "../../common/render-suggest";
-import { convertObjectDataToSuggestData, convertReferenceDataToTreeData } from "./helpers";
+import { convertObjectDataToSuggestData, convertReferenceDataToTreeViewData } from "./helpers";
 export class GxIdeReferences {
   constructor() {
     /**
@@ -19,16 +17,28 @@ export class GxIdeReferences {
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
+    this.attachTreeEvents = () => {
+      // this.referencedByTreeEl.addEventListener(
+      //   "expandedItemChange",
+      //   (item: CustomEvent<{ id: string; expanded: boolean }>) => {
+      //     console.log(item.detail.id);
+      //   }
+      // );
+      // this.referencesToTreeEl.addEventListener(
+      //   "expandedItemChange",
+      //   (item: CustomEvent<{ id: string; expanded: boolean }>) => {
+      //     console.log(item.detail.id);
+      //   }
+      // );
+    };
     /**
      * It attaches on the ch-suggest, the "itemSelected" event triggered by the ch-suggest-list-item. This helps set the new 'selectedObject'.
      */
-    this.attachSelectObjectListener = () => {
-      this.selectObjectSuggestEl.addEventListener("itemSelected", (e) => {
-        const categoryIndex = e.detail.indexes.listIndex;
-        const itemIndex = e.detail.indexes.itemIndex;
-        this.selectedObject =
-          this.selectorCategoryData[categoryIndex].items[itemIndex];
-      });
+    this.selectObjectSelectionChanged = (e) => {
+      const categoryIndex = e.detail.indexes.listIndex;
+      const itemIndex = e.detail.indexes.itemIndex;
+      this.selectedObject =
+        this.selectorCategoryData[categoryIndex].items[itemIndex];
     };
     /**
      * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
@@ -74,26 +84,16 @@ export class GxIdeReferences {
      */
     this.loadReferencesHandler = async (id, to = false) => {
       if (this.loadReferencesCallback) {
-        /* is referenced by*/
-        if (!to) {
-          this.loadReferencesCallback(id, false)
-            .then(result => {
-            this.referencedByTreeData = convertReferenceDataToTreeData(result);
-          })
-            .catch(() => {
-            /* To do*/
-          });
-        }
-        /* is referenced by*/
-        if (to) {
-          this.loadReferencesCallback(id, true)
-            .then(result => {
-            this.referencesToTreeData = convertReferenceDataToTreeData(result);
-          })
-            .catch(() => {
-            /* To do*/
-          });
-        }
+        this.loadReferencesCallback(id, to).then(result => {
+          if (to) {
+            this.referencesToTreeData =
+              convertReferenceDataToTreeViewData(result);
+          }
+          else {
+            this.referencedByTreeData =
+              convertReferenceDataToTreeViewData(result);
+          }
+        });
       }
     };
     /**
@@ -102,71 +102,27 @@ export class GxIdeReferences {
     this.hideBarButtonClickedHandler = () => {
       this.barHidden = !this.barHidden;
     };
-    /**
-     * Simple helper function to get 'this.referencedByTreeData' or 'this.referencesToTreeData'
-     */
-    this.getRef = (to = false) => {
-      if (!to) {
-        /* referenced by*/
-        return this.referencedByTreeData;
-      }
-      else {
-        /* references to*/
-        return this.referencesToTreeData;
-      }
-    };
-    /**
-     * Simple helper function to update 'this.referencedByTreeData' or 'this.referencesToTreeData'
-     */
-    this.updateRef = (to = false, updatedData) => {
-      if (!to) {
-        /* referenced by*/
-        this.referencedByTreeData = updatedData;
-      }
-      else {
-        /* references to*/
-        this.referencesToTreeData = updatedData;
+    this.referencesLazyLoadCallbackHandler = (ref) => async (treeItemId) => {
+      if (this.loadReferencesCallback) {
+        const to = ref === "references-to";
+        const referencesLazyChildren = await this.loadReferencesCallback(treeItemId, to);
+        const treeLazyChildren = convertReferenceDataToTreeViewData(referencesLazyChildren);
+        return new Promise(resolve => {
+          resolve(treeLazyChildren);
+        });
       }
+      return new Promise(resolve => {
+        resolve([]);
+      });
     };
-    /**
-     * Handles changes on any of the references (by or to). Used to:
-     * 1) Keep the models updated.
-     * 2) call the openObjectCallback.
-     * 3) call the loadReferencesCallback if a lazy node was toggled.
-     */
-    this.referencesPanelStateChangedHandler = (to = false) => (e) => {
-      const event = e.detail.emittedBy;
-      const nodeData = e.detail.itemData;
-      const nodeId = e.detail.itemData.id;
-      const nodeLabel = e.detail.itemData.label;
-      /* tree item was selected*/
-      if (event === "selectionChanged") {
-        this.selectReferenceCallback(nodeId);
-        /* Returns void Promise*/
-      }
-      /* tree item was double-clicked.*/
-      if (event === "doubleClicked") {
-        this.openObjectCallback(nodeId);
-      }
-      let updatedTreeModel = [];
-      const lazy = nodeData.lazy;
-      if (lazy) {
-        // loadReferencesCallback
-        let children = [];
-        this.loadReferencesCallback(nodeId, to)
-          .then(result => {
-          children = convertReferenceDataToTreeData(result);
-          // Then update model
-          updatedTreeModel = updateTreeModel(this.getRef(to), { id: nodeId, label: nodeLabel, items: children }, nodeId);
-          this.updateRef(to, updatedTreeModel);
-        })
-          .catch(() => {
-          /* To do*/
+    this.referenceSelectedHandler = (selectedItem) => {
+      if (this.selectReferenceCallback) {
+        const selectedItems = [];
+        selectedItem.detail.forEach(item => {
+          selectedItems.push(item.id);
         });
-      }
-      else {
-        updatedTreeModel = updateTreeModel(this.getRef(to), nodeData, nodeId);
-        this.updateRef(to, updatedTreeModel);
+        this.selectReferenceCallback(selectedItems[0]);
+        // returns void
       }
     };
     this.referencedByTreeData = undefined;
@@ -196,22 +152,28 @@ export class GxIdeReferences {
     this.evaluateInitialReferenceData();
   }
   componentDidLoad() {
-    this.attachSelectObjectListener();
+    this.attachTreeEvents();
   }
   componentDidRender() {
     this.componentDidRenderEvent.emit(this._componentLocale.componentName);
   }
   // 10.RENDER() FUNCTION //
   render() {
-    var _a, _b, _c, _d, _e, _f;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, onSelectionChanged: this.selectObjectSelectionChanged, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
         "header__bottom": true,
         "header__bottom--hidden": this.barHidden
-      } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid gxi-full-height gxi-overflow-auto" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, fullHeight: true, noContentPadding: true, class: "gxi-overflow-auto", part: "referenced-by-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(false), part: "referenced-by-tree" }, renderTreeItems(this.referencedByTreeData)), !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "referenced-by-text" }, ((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) === 0
+      } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid gxi-full-height gxi-overflow-auto" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, fullHeight: true, class: "gxi-overflow-auto", part: "referenced-by-container" }, h("div", { class: {
+        "reference-container": true,
+        "reference-container--no-references": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length)
+      } }, h("gxg-tree-view", { class: { "gxi-hidden": !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) }, part: "referenced-by-tree", treeModel: this.referencedByTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("referenced-by"), onSelectedItemsChange: this.referenceSelectedHandler, dragDisabled: true, dropDisabled: true }), !((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "referenced-by-text" }, ((_d = this.referencedByTreeData) === null || _d === void 0 ? void 0 : _d.length) === 0
       ? this._componentLocale.main.isReferencedByEmpty
-      : this._componentLocale.main.isReferencedByError))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, fullHeight: true, noContentPadding: true, class: "gxi-overflow-auto", part: "references-to-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_d = this.referencesToTreeData) === null || _d === void 0 ? void 0 : _d.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(true), part: "references-to-tree" }, renderTreeItems(this.referencesToTreeData)), !((_e = this.referencesToTreeData) === null || _e === void 0 ? void 0 : _e.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "references-to-text" }, ((_f = this.referencesToTreeData) === null || _f === void 0 ? void 0 : _f.length) === 0
+      : this._componentLocale.main.isReferencedByError)))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, fullHeight: true, class: "gxi-overflow-auto", part: "references-to-container" }, h("div", { class: {
+        "reference-container": true,
+        "reference-container--no-references": !((_e = this.referencesToTreeData) === null || _e === void 0 ? void 0 : _e.length)
+      } }, h("gxg-tree-view", { class: { "gxi-hidden": !((_f = this.referencesToTreeData) === null || _f === void 0 ? void 0 : _f.length) }, part: "referenced-to-tree", treeModel: this.referencesToTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("references-to"), onSelectedItemsChange: this.referenceSelectedHandler }), !((_g = this.referencesToTreeData) === null || _g === void 0 ? void 0 : _g.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "references-to-text" }, ((_h = this.referencesToTreeData) === null || _h === void 0 ? void 0 : _h.length) === 0
       ? this._componentLocale.main.hasReferencesEmpty
-      : this._componentLocale.main.hasReferencesToError)))))));
+      : this._componentLocale.main.hasReferencesToError))))))));
   }
   static get is() { return "gx-ide-references"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/share-kb/share-kb.js

@@ -5,6 +5,7 @@ import { Host, h } from "@stencil/core";
 /* OTHER LIBRARIES IMPORTS */
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
+import { config } from "../../common/config";
 import { formSubmitValidation } from "../../common/form-validation";
 import { renderFormItems } from "../../common/common";
 export class GxIdeShareKb {
@@ -39,13 +40,13 @@ export class GxIdeShareKb {
   // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", { footerJustify: "end" }, h("main", { class: "main grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.main.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "server-url-label", noMargin: true }, this._componentLocale.main.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, labelPosition: "start", placeholder: "https://myexampleserver.com", strict: true, "max-width": "100%", value: this.serverUrls[0], ref: (el) => (this.serverUrlEl = el), part: "server-url", class: "server-url-input" }, renderFormItems("gxg-combo-box-item", this.serverUrls.map((item) => ({
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", { footerJustify: "end" }, h("main", { class: "main grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.main.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, toolTip: config.tooltip, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "server-url-label", noMargin: true }, this._componentLocale.main.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, labelPosition: "start", placeholder: "https://myexampleserver.com", strict: true, toolTip: config.tooltip, "max-width": "100%", value: this.serverUrls[0], ref: (el) => (this.serverUrlEl = el), part: "server-url", class: "server-url-input" }, renderFormItems("gxg-combo-box-item", this.serverUrls.map((item) => ({
       id: item,
       label: item
     })), "server-url")), h("gxg-combo-box", { labelPosition: "start", placeholder: "https://myexampleserver.com", "max-width": "100%", value: AUTHENTICATION_TYPE[0], ref: (el) => (this.authTypeEl = el), part: "auth-type", class: "auth-type-input" }, renderFormItems("gxg-combo-box-item", AUTHENTICATION_TYPE.map((item) => ({
       id: item,
       label: item
-    })), "auth-type")), h("gxg-label", { labelPosition: "start", class: "user-name-label", noMargin: true }, this._componentLocale.main.userName), h("gxg-form-text", { labelPosition: "start", placeholder: "My User", "max-width": "100%", ref: (el) => (this.userNameEl = el), part: "user-name", class: "user-name-input" }), h("gxg-label", { labelPosition: "start", class: "password-label", noMargin: true }, this._componentLocale.main.password), h("gxg-form-text", { labelPosition: "start", password: true, "max-width": "100%", ref: (el) => (this.passwordEl = el), part: "password", class: "password-input" })), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.createKBCallbackHandler }, this._componentLocale.footer.shareBtn)))));
+    })), "auth-type")), h("gxg-label", { labelPosition: "start", class: "user-name-label", noMargin: true }, this._componentLocale.main.userName), h("gxg-form-text", { labelPosition: "start", placeholder: "My User", "max-width": "100%", toolTip: config.tooltip, ref: (el) => (this.userNameEl = el), part: "user-name", class: "user-name-input" }), h("gxg-label", { labelPosition: "start", class: "password-label", noMargin: true }, this._componentLocale.main.password), h("gxg-form-text", { labelPosition: "start", password: true, toolTip: config.tooltip, "max-width": "100%", ref: (el) => (this.passwordEl = el), part: "password", class: "password-input" })), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.createKBCallbackHandler }, this._componentLocale.footer.shareBtn)))));
   }
   static get is() { return "gx-ide-share-kb"; }
   static get encapsulation() { return "shadow"; }

package/dist/components/ch-paginator-pages.js

@@ -1,174 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-
-const chPaginatorPagesCss = "button{all:unset}.pages{display:flex;align-items:center;list-style-type:none;margin:0;padding:0}";
-
-const ChPaginatorPages$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.pageChanged = createEvent(this, "pageChanged", 7);
-    /**
-     * The active page number.
-     */
-    this.page = 1;
-    /**
-     * The total number of pages.
-     */
-    this.totalPages = 1;
-    /**
-     * The maximum number of items to display in the pagination.
-     */
-    this.maxSize = 9;
-    /**
-     * Flag to render the first and last pages.
-     */
-    this.renderFirstLastPages = true;
-    /**
-     * The text to display for the dots.
-     */
-    this.textDots = "...";
-    this.clickHandler = (eventInfo) => {
-      const button = eventInfo.target;
-      this.page = parseInt(button.value);
-    };
-  }
-  pageHandler() {
-    this.pageChanged.emit({ page: this.page });
-  }
-  maxSizeHandler() {
-    this.validateMaxSize();
-  }
-  renderFirstLastPagesHandler() {
-    this.validateMaxSize();
-  }
-  componentDidUpdate() {
-    if (document.activeElement === this.el) {
-      this.buttonActive.focus();
-    }
-  }
-  keyDownHandler(eventInfo) {
-    switch (eventInfo.key) {
-      case "ArrowLeft":
-        this.page = Math.max(this.page - 1, 1);
-        break;
-      case "ArrowRight":
-        this.page = Math.min(this.page + 1, this.totalPages);
-        break;
-    }
-  }
-  focusHandler() {
-    this.buttonActive.focus();
-  }
-  getItems() {
-    const padLeft = Math.ceil((this.maxSize - 1) / 2);
-    const padRight = Math.floor((this.maxSize - 1) / 2);
-    let fillLeft, fillStart;
-    let fillRight, fillEnd;
-    if (this.maxSize === 0 || this.maxSize >= this.totalPages) {
-      fillStart = this.fillStart(false);
-      fillLeft = this.page - 1;
-      fillRight = this.totalPages - this.page;
-      fillEnd = this.fillEnd(false);
-    }
-    else if (this.page <= padLeft && this.page < this.totalPages - padRight) {
-      fillStart = this.fillStart(false);
-      fillLeft = this.page - 1;
-      fillEnd = this.fillEnd(true);
-      fillRight = padRight - fillEnd.length + (padLeft - fillLeft);
-    }
-    else if (this.page > padLeft && this.page < this.totalPages - padRight) {
-      fillStart = this.fillStart(true);
-      fillLeft = padLeft - fillStart.length;
-      fillEnd = this.fillEnd(true);
-      fillRight = padRight - fillEnd.length;
-    }
-    else if (this.page > padLeft && this.page >= this.totalPages - padRight) {
-      fillEnd = this.fillEnd(false);
-      fillRight = this.totalPages - this.page;
-      fillStart = this.fillStart(true);
-      fillLeft = padLeft - fillStart.length + padRight - fillRight;
-    }
-    const items = fillStart
-      .concat(this.getRangeItems(this.page - fillLeft, this.page - 1))
-      .concat([this.page])
-      .concat(this.getRangeItems(this.page + 1, this.page + fillRight))
-      .concat(fillEnd);
-    return {
-      items,
-      activeIndex: fillStart.length + fillLeft
-    };
-  }
-  fillStart(render) {
-    if (render) {
-      return this.renderFirstLastPages ? [1, this.textDots] : [this.textDots];
-    }
-    else {
-      return [];
-    }
-  }
-  fillEnd(render) {
-    if (render) {
-      return this.renderFirstLastPages
-        ? [this.textDots, this.totalPages]
-        : [this.textDots];
-    }
-    else {
-      return [];
-    }
-  }
-  getRangeItems(start, end) {
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  }
-  validateMaxSize() {
-    if (this.maxSize > 0) {
-      if (!this.renderFirstLastPages && this.maxSize < 3) {
-        this.maxSize = 3;
-      }
-      else if (this.renderFirstLastPages && this.maxSize < 5) {
-        this.maxSize = 5;
-      }
-    }
-  }
-  render() {
-    const { items, activeIndex } = this.getItems();
-    return (h("ol", { part: "pages", class: "pages" }, items.map((item, i) => {
-      if (typeof item === "number") {
-        return (h("li", null, h("button", { part: `page button ${i === activeIndex ? "active" : ""}`, value: item, onClick: this.clickHandler, ref: el => (this.buttonActive =
-            i === activeIndex ? el : this.buttonActive) }, item)));
-      }
-      else {
-        return (h("li", null, h("button", { part: "page button dots", disabled: true }, item)));
-      }
-    })));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "page": ["pageHandler"],
-    "maxSize": ["maxSizeHandler"],
-    "renderFirstLastPages": ["renderFirstLastPagesHandler"]
-  }; }
-  static get style() { return chPaginatorPagesCss; }
-}, [1, "ch-paginator-pages", {
-    "page": [1538],
-    "totalPages": [514, "total-pages"],
-    "maxSize": [1538, "max-size"],
-    "renderFirstLastPages": [4, "render-first-last-pages"],
-    "textDots": [1, "text-dots"]
-  }, [[1, "keydown", "keyDownHandler"], [1, "focusin", "focusHandler"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-paginator-pages"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-paginator-pages":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChPaginatorPages$1);
-      }
-      break;
-  } });
-}
+import { C as ChPaginatorPages$1, d as defineCustomElement$1 } from './ch-paginator-pages2.js';
 
 const ChPaginatorPages = ChPaginatorPages$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/ch-paginator-pages.entry.js → components/ch-paginator-pages2.js}

@@ -1,10 +1,12 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-0da01575.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
 const chPaginatorPagesCss = "button{all:unset}.pages{display:flex;align-items:center;list-style-type:none;margin:0;padding:0}";
 
-const ChPaginatorPages = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const ChPaginatorPages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.pageChanged = createEvent(this, "pageChanged", 7);
     /**
      * The active page number.
@@ -140,13 +142,32 @@ const ChPaginatorPages = class {
       }
     })));
   }
-  get el() { return getElement(this); }
+  get el() { return this; }
   static get watchers() { return {
     "page": ["pageHandler"],
     "maxSize": ["maxSizeHandler"],
     "renderFirstLastPages": ["renderFirstLastPagesHandler"]
   }; }
-};
-ChPaginatorPages.style = chPaginatorPagesCss;
+  static get style() { return chPaginatorPagesCss; }
+}, [1, "ch-paginator-pages", {
+    "page": [1538],
+    "totalPages": [514, "total-pages"],
+    "maxSize": [1538, "max-size"],
+    "renderFirstLastPages": [4, "render-first-last-pages"],
+    "textDots": [1, "text-dots"]
+  }, [[1, "keydown", "keyDownHandler"], [1, "focusin", "focusHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-paginator-pages"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-paginator-pages":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChPaginatorPages);
+      }
+      break;
+  } });
+}
 
-export { ChPaginatorPages as ch_paginator_pages };
+export { ChPaginatorPages as C, defineCustomElement as d };

package/dist/components/ch-paginator2.js

@@ -102,10 +102,24 @@ const ChPaginator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   loadElements() {
     this.elPages = this.el.querySelector("ch-paginator-pages");
-    this.elFirst = this.el.querySelector("ch-paginator-navigate[type='first']");
-    this.elPrevious = this.el.querySelector("ch-paginator-navigate[type='previous']");
-    this.elNext = this.el.querySelector("ch-paginator-navigate[type='next']");
-    this.elLast = this.el.querySelector("ch-paginator-navigate[type='last']");
+    this.el
+      .querySelectorAll("ch-paginator-navigate")
+      .forEach((el) => {
+      switch (el.type) {
+        case "first":
+          this.elFirst = el;
+          break;
+        case "previous":
+          this.elPrevious = el;
+          break;
+        case "next":
+          this.elNext = el;
+          break;
+        case "last":
+          this.elLast = el;
+          break;
+      }
+    });
   }
   render() {
     if (this.elPages) {

package/dist/components/ch-suggest2.js

@@ -12,6 +12,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
         const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN);
@@ -172,8 +173,10 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // 6.COMPONENT LIFECYCLE EVENTS //
   // 7.LISTENERS //
   itemSelectedHandler(event) {
+    event.stopPropagation();
     this.value = event.detail.value;
     this.closeWindow();
+    this.selectionChanged.emit(event.detail);
   }
   focusChangeAttemptHandler(event) {
     const keyEventHandler = this.keyEventsDictionary[event.detail.code];
@@ -196,6 +199,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   windowClosedHandler() {
     this.textInput.focus();
     this.windowHidden = true;
+    this.slot.innerHTML = "";
   }
   // 9.PUBLIC METHODS API //
   /**
@@ -207,7 +211,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
+    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty, ref: el => (this.slot = el) })))));
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }
@@ -223,7 +227,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "cursorEnd": [4, "cursor-end"],
     "windowHidden": [32],
     "selectInputText": [64]
-  }, [[0, "itemSelected", "itemSelectedHandler"], [0, "focusChangeAttempt", "focusChangeAttemptHandler"], [0, "windowClosed", "windowClosedHandler"]]]);
+  }, [[2, "itemSelected", "itemSelectedHandler"], [0, "focusChangeAttempt", "focusChangeAttemptHandler"], [0, "windowClosed", "windowClosedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;