@genexus/genexus-ide-ui 0.0.84 → 0.0.86

package/dist/types/components/object-selector/object-selector.d.ts

@@ -18,6 +18,8 @@ export declare class GxIdeObjectSelector {
   private filterUserEl;
   private filterModifiedDateEl;
   private chGridEl;
+  private gxgShortcutsEl;
+  private loaderEl;
   /**
    * The after types render in the after selector
    */
@@ -38,6 +40,10 @@ export declare class GxIdeObjectSelector {
    * If true it displays the component title on the header
    */
   readonly displayTitle = false;
+  /**
+   * If true, it will display a loader when needed.
+   */
+  readonly loader = false;
   /**
    * True' if multiple object selection is allowed. Default is 'True'
    */
@@ -97,15 +103,18 @@ export declare class GxIdeObjectSelector {
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   componentDidRender(): void;
+  /**
+   * Suspends or reactivates the shortcuts
+   */
+  suspendShortcuts(suspendShortcuts: boolean): Promise<void>;
   /**
    * Validate necessary data input
    */
   validate(): Promise<boolean>;
-  private renderFilter;
-  private renderObjects;
+  private loaderCancelCallbackHandler;
   private getObjects;
   private openSelectionCallbackHandler;
-  private cancelCallbackHandle;
+  private cancelCallbackHandler;
   private selectAll;
   private deselectAll;
   private newObjectCallbackHandler;
@@ -113,6 +122,8 @@ export declare class GxIdeObjectSelector {
   private chGridKeyDownHandler;
   private hostKeyPressHandler;
   private evaluateObjectsCount;
+  private renderFilter;
+  private renderObjects;
   render(): void;
 }
 export type ObjectType = {

package/dist/types/components/references/references.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { GxgTreeItemData } from "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item";
 import { TreeViewItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types";
 import { SuggestData } from "@genexus/chameleon-controls-library/dist/types/components/suggest/ch-suggest";
 export declare class GxIdeReferences {
@@ -25,14 +24,6 @@ export declare class GxIdeReferences {
    * The objects suggestions that will appear on the suggest
    */
   objectsSuggestions: SuggestData;
-  /**
-   * Keeps the objects that are referenced by the current selected object
-   */
-  referencedBy: GxgTreeItemData[];
-  /**
-   * Keeps the objects that have references to the current selected object
-   */
-  referencesTo: GxgTreeItemData[];
   /**
    * If true it displays the component title on the header
    */

package/dist/types/components/start-page/recent-news.d.ts

@@ -33,7 +33,7 @@ export declare class GxIdeRecentNews {
   private displayNews;
   private attachLoaderEvents;
   private getNews;
-  private NewsClickHandler;
+  private openNewsHandler;
   private renderNews;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -691,6 +691,10 @@ export namespace Components {
           * Belongs to checkbox 'Set as current environment' @default true
          */
         "setAsTarget"?: boolean;
+        /**
+          * Suspends or reactivates the shortcuts
+         */
+        "suspendShortcuts": (suspendShortcuts: boolean) => Promise<void>;
     }
     interface GxIdeNewKb {
         /**
@@ -773,6 +777,10 @@ export namespace Components {
           * Name of the DB server where we want to persist the information of our KB
          */
         "serverNames": GxOption[];
+        /**
+          * Suspends or reactivates the shortcuts
+         */
+        "suspendShortcuts": (suspendShortcuts: boolean) => Promise<void>;
         /**
           * Username for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)
          */
@@ -815,6 +823,10 @@ export namespace Components {
           * Applies a shadow all around
          */
         "shadow": false;
+        /**
+          * Suspends or reactivates the shortcuts
+         */
+        "suspendShortcuts": (suspendShortcuts: boolean) => Promise<void>;
         /**
           * Array containing category list and its corresponding types
          */
@@ -853,6 +865,10 @@ export namespace Components {
           * Callback invoked when the component needs to reload the list of attributes.
          */
         "loadCallback": LoadCallback;
+        /**
+          * If true, it will display a loader when needed.
+         */
+        "loader": false;
         /**
           * True' if multiple object selection is allowed. Default is 'True'
          */
@@ -873,6 +889,10 @@ export namespace Components {
           * Callback invoked when the action is executed in the Module/Folder filter. It returns the information of the selected object (id and name) or 'undefined' if it was canceled.
          */
         "selectModuleCallback": SelectModuleCallback;
+        /**
+          * Suspends or reactivates the shortcuts
+         */
+        "suspendShortcuts": (suspendShortcuts: boolean) => Promise<void>;
         /**
           * The types render in the filter type selector
          */
@@ -2559,6 +2579,10 @@ declare namespace LocalJSX {
           * Callback invoked when the component needs to reload the list of attributes.
          */
         "loadCallback": LoadCallback;
+        /**
+          * If true, it will display a loader when needed.
+         */
+        "loader"?: false;
         /**
           * True' if multiple object selection is allowed. Default is 'True'
          */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "0.0.84",
+  "version": "0.0.86",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -36,10 +36,10 @@
     "@types/react": "^18.2.8"
   },
   "peerDependencies": {
-    "@genexus/gemini": "*0.2.65"
+    "@genexus/gemini": "*0.2.70"
   },
   "devDependencies": {
-    "@genexus/gemini": "*0.2.65",
+    "@genexus/gemini": "*0.2.70",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/core": "^2.17.0",
     "@stencil/sass": "^2.0.1",

package/dist/cjs/ch-test-action-group.cjs.entry.js

@@ -1,79 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f9bb1815.js');
-
-const testActionGroupCss = "ch-test-action-group{display:flex;border:2px dashed #00000080;resize:both;overflow:auto;width:500px}.action-group{padding:20px;margin:20px;background-color:#ffffff;border:1px solid}.action-group::part(actions){gap:12px}.action-group::part(more-actions-button){border-radius:50%;width:fit-content;height:fit-content;color:#313aa1;align-self:center;margin-inline-end:8px}.dropdown-item::part(action){--separation:8px;background-color:#f3d0c3;border-radius:4px;padding-inline:16px;padding-block:8px}.dropdown-item::part(action):focus-within{outline:1px solid}.dropdown-item::part(action):hover{background-color:#d3b1a4}.action-group::part(more-actions-list),.dropdown-item::part(list){row-gap:8px;margin-block:8px}.action-group::part(more-actions-section),.dropdown-item::part(section){background-color:#edeaff;padding:8px;box-shadow:0 4px 8px 1px #22222220}";
-
-const ChTestActionGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.displayedItemsCount = -1;
-    /**
-     * This attribute lets you specify the label for the expandable button.
-     * Important for accessibility.
-     */
-    this.buttonLabel = "Show options";
-    /**
-     * Determine which actions on the expandable button display the dropdown
-     * section.
-     */
-    this.expandBehavior = "ClickOrHover";
-    /**
-     * This attribute determines how items behave when the content of the ActionGroup overflows horizontal. This property is needed
-     * to make the control responsive to changes in the Width of the container of ActionGroup.
-     *
-     * | Value                 | Details                                                                                          |
-     * | --------------------- | ------------------------------------------------------------------------------------------------ |
-     * | `Add Scroll`          | The items of the ActionGroup that overflow horizontally are shown by means of a scroll.          |
-     * | `Multiline`           | The ActionGroup items that overflow horizontally are shown in a second line of the control.      |
-     * | `Responsive Collapse` | The Action Group items, when they start to overflow the control, are placed in the More Actions. |
-     */
-    this.itemsOverflowBehavior = "ResponsiveCollapse";
-    /**
-     * Determine if the dropdown section should be opened when the expandable
-     * button of the control is focused.
-     */
-    this.openOnFocus = false;
-    /**
-     * Specifies the position of the dropdown section that is placed relative to
-     * the more actions button.
-     */
-    this.moreActionsDropdownPosition = "InsideStart_OutsideEnd";
-    /**
-     * Specifies the separation (in pixels) between the expandable button and the
-     * dropdown section of the control.
-     */
-    this.separation = 0;
-    // /**
-    //  * Fired when the visibility of the dropdown section is changed
-    //  */
-    // @Event() expandedChange: EventEmitter<boolean>;
-    this.renderItem = (item) => (index.h("ch-dropdown-item", { slot: "items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.position || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
-    this.firstLevelRenderItem = (item, index$1) => (index.h("ch-dropdown-item", { id: item.id, class: item.class, expandBehavior: this.expandBehavior, forceContainingBlock: false, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.position || "Center_OutsideEnd", rightImgSrc: item.rightIcon }, item.title, this.itemsOverflowBehavior === "ResponsiveCollapse" &&
-      (this.displayedItemsCount === -1 || index$1 < this.displayedItemsCount) &&
-      item.items != null &&
-      item.items.map(this.renderItem)));
-    this.firstLevelRenderCollapsedItem = (item) => (index.h("ch-dropdown-item", { slot: "more-items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.responsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
-    this.handleDisplayedItemsCountChange = (event) => {
-      this.displayedItemsCount = event.detail;
-    };
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("ch-action-group", { buttonLabel: this.buttonLabel, class: "action-group", expandBehavior: this.expandBehavior, itemsOverflowBehavior: this.itemsOverflowBehavior, openOnFocus: this.openOnFocus, moreActionsDropdownPosition: this.moreActionsDropdownPosition,
-      // style={{
-      //   "--separation": `${this.separation}px`
-      // }}
-      onDisplayedItemsCountChange: this.handleDisplayedItemsCountChange }, this.itemsModel != null &&
-      this.itemsModel.map((item, index$1) => (index.h("ch-action-group-item", { slot: "items" }, this.firstLevelRenderItem(item, index$1)))), this.itemsOverflowBehavior === "ResponsiveCollapse" &&
-      this.itemsModel != null &&
-      this.itemsModel
-        .filter((_, index) => this.displayedItemsCount !== -1 &&
-        index >= this.displayedItemsCount)
-        .map(this.firstLevelRenderCollapsedItem))));
-  }
-};
-ChTestActionGroup.style = testActionGroupCss;
-
-exports.ch_test_action_group = ChTestActionGroup;

package/dist/cjs/ch-test-dropdown.cjs.entry.js

@@ -1,54 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f9bb1815.js');
-
-const testDropdownCss = ".dropdown::part(expandable-button){background-color:aliceblue;border:1px solid;border-radius:4px;padding-block:4px;padding-inline:16px}.dropdown::part(expandable-button):focus{box-shadow:0 0 0 1px black}.dropdown-item::part(action){--separation:8px;background-color:#f3d0c3;border-radius:4px;padding-inline:16px;padding-block:8px}.dropdown-item::part(action):focus-within{outline:1px solid}.dropdown-item::part(action):hover{background-color:#d3b1a4}.dropdown::part(section),.dropdown-item::part(section){background-color:#edeaff;padding:8px;box-shadow:0 4px 8px 1px #22222220}.dropdown::part(list),.dropdown-item::part(list){row-gap:8px;margin-block:8px}";
-
-const ChTestDropdownX = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * This attribute lets you specify the label for the expandable button.
-     * Important for accessibility.
-     */
-    this.buttonLabel = "Show options";
-    /**
-     * Determine which actions on the expandable button display the dropdown
-     * section.
-     */
-    this.expandBehavior = "ClickOrHover";
-    /**
-     * Determine if the dropdown section should be opened when the expandable
-     * button of the control is focused.
-     */
-    this.openOnFocus = false;
-    /**
-     * Specifies the position of the dropdown section that is placed relative to
-     * the expandable button.
-     */
-    this.position = "Center_OutsideEnd";
-    /**
-     * Specifies the separation (in pixels) between the expandable button and the
-     * dropdown section of the control.
-     */
-    this.separation = 0;
-    // /**
-    //  * Fired when the visibility of the dropdown section is changed
-    //  */
-    // @Event() expandedChange: EventEmitter<boolean>;
-    this.renderItem = (item) => [
-      index.h("ch-dropdown-item", { slot: "items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)),
-      item.showSeparator && (index.h("ch-dropdown-item-separator", { class: item.separatorClass }))
-    ];
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("ch-dropdown", { buttonLabel: this.buttonLabel, class: "dropdown", expandBehavior: this.expandBehavior, openOnFocus: this.openOnFocus, position: this.position, style: {
-        "--separation": `${this.separation}px`
-      } }, index.h("span", { slot: "action" }, "User info"), index.h("div", { slot: "header" }, index.h("h1", null, "John Doe"), index.h("span", null, "johndoe@example.com")), this.itemsModel != null && this.itemsModel.map(this.renderItem), index.h("div", { slot: "footer" }, "Footer"))));
-  }
-};
-ChTestDropdownX.style = testDropdownCss;
-
-exports.ch_test_dropdown = ChTestDropdownX;

package/dist/components/ch-test-action-group.js

@@ -1,137 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$7 } from './action-group.js';
-import { d as defineCustomElement$6 } from './action-group-item.js';
-import { d as defineCustomElement$5 } from './dropdown.js';
-import { d as defineCustomElement$4 } from './dropdown-item.js';
-import { d as defineCustomElement$3 } from './ch-window2.js';
-import { d as defineCustomElement$2 } from './ch-window-close2.js';
-
-const testActionGroupCss = "ch-test-action-group{display:flex;border:2px dashed #00000080;resize:both;overflow:auto;width:500px}.action-group{padding:20px;margin:20px;background-color:#ffffff;border:1px solid}.action-group::part(actions){gap:12px}.action-group::part(more-actions-button){border-radius:50%;width:fit-content;height:fit-content;color:#313aa1;align-self:center;margin-inline-end:8px}.dropdown-item::part(action){--separation:8px;background-color:#f3d0c3;border-radius:4px;padding-inline:16px;padding-block:8px}.dropdown-item::part(action):focus-within{outline:1px solid}.dropdown-item::part(action):hover{background-color:#d3b1a4}.action-group::part(more-actions-list),.dropdown-item::part(list){row-gap:8px;margin-block:8px}.action-group::part(more-actions-section),.dropdown-item::part(section){background-color:#edeaff;padding:8px;box-shadow:0 4px 8px 1px #22222220}";
-
-const ChTestActionGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.displayedItemsCount = -1;
-    /**
-     * This attribute lets you specify the label for the expandable button.
-     * Important for accessibility.
-     */
-    this.buttonLabel = "Show options";
-    /**
-     * Determine which actions on the expandable button display the dropdown
-     * section.
-     */
-    this.expandBehavior = "ClickOrHover";
-    /**
-     * This attribute determines how items behave when the content of the ActionGroup overflows horizontal. This property is needed
-     * to make the control responsive to changes in the Width of the container of ActionGroup.
-     *
-     * | Value                 | Details                                                                                          |
-     * | --------------------- | ------------------------------------------------------------------------------------------------ |
-     * | `Add Scroll`          | The items of the ActionGroup that overflow horizontally are shown by means of a scroll.          |
-     * | `Multiline`           | The ActionGroup items that overflow horizontally are shown in a second line of the control.      |
-     * | `Responsive Collapse` | The Action Group items, when they start to overflow the control, are placed in the More Actions. |
-     */
-    this.itemsOverflowBehavior = "ResponsiveCollapse";
-    /**
-     * Determine if the dropdown section should be opened when the expandable
-     * button of the control is focused.
-     */
-    this.openOnFocus = false;
-    /**
-     * Specifies the position of the dropdown section that is placed relative to
-     * the more actions button.
-     */
-    this.moreActionsDropdownPosition = "InsideStart_OutsideEnd";
-    /**
-     * Specifies the separation (in pixels) between the expandable button and the
-     * dropdown section of the control.
-     */
-    this.separation = 0;
-    // /**
-    //  * Fired when the visibility of the dropdown section is changed
-    //  */
-    // @Event() expandedChange: EventEmitter<boolean>;
-    this.renderItem = (item) => (h("ch-dropdown-item", { slot: "items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.position || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
-    this.firstLevelRenderItem = (item, index) => (h("ch-dropdown-item", { id: item.id, class: item.class, expandBehavior: this.expandBehavior, forceContainingBlock: false, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.position || "Center_OutsideEnd", rightImgSrc: item.rightIcon }, item.title, this.itemsOverflowBehavior === "ResponsiveCollapse" &&
-      (this.displayedItemsCount === -1 || index < this.displayedItemsCount) &&
-      item.items != null &&
-      item.items.map(this.renderItem)));
-    this.firstLevelRenderCollapsedItem = (item) => (h("ch-dropdown-item", { slot: "more-items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.responsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
-    this.handleDisplayedItemsCountChange = (event) => {
-      this.displayedItemsCount = event.detail;
-    };
-  }
-  render() {
-    return (h(Host, null, h("ch-action-group", { buttonLabel: this.buttonLabel, class: "action-group", expandBehavior: this.expandBehavior, itemsOverflowBehavior: this.itemsOverflowBehavior, openOnFocus: this.openOnFocus, moreActionsDropdownPosition: this.moreActionsDropdownPosition,
-      // style={{
-      //   "--separation": `${this.separation}px`
-      // }}
-      onDisplayedItemsCountChange: this.handleDisplayedItemsCountChange }, this.itemsModel != null &&
-      this.itemsModel.map((item, index) => (h("ch-action-group-item", { slot: "items" }, this.firstLevelRenderItem(item, index)))), this.itemsOverflowBehavior === "ResponsiveCollapse" &&
-      this.itemsModel != null &&
-      this.itemsModel
-        .filter((_, index) => this.displayedItemsCount !== -1 &&
-        index >= this.displayedItemsCount)
-        .map(this.firstLevelRenderCollapsedItem))));
-  }
-  static get style() { return testActionGroupCss; }
-}, [0, "ch-test-action-group", {
-    "buttonLabel": [1, "button-label"],
-    "expandBehavior": [1, "expand-behavior"],
-    "itemsModel": [16],
-    "itemsOverflowBehavior": [1, "items-overflow-behavior"],
-    "openOnFocus": [4, "open-on-focus"],
-    "moreActionsDropdownPosition": [1, "more-actions-dropdown-position"],
-    "separation": [2],
-    "displayedItemsCount": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-test-action-group", "ch-action-group", "ch-action-group-item", "ch-dropdown", "ch-dropdown-item", "ch-window", "ch-window-close"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-test-action-group":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChTestActionGroup$1);
-      }
-      break;
-    case "ch-action-group":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ch-action-group-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ch-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ch-dropdown-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ch-window":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ch-window-close":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const ChTestActionGroup = ChTestActionGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ChTestActionGroup, defineCustomElement };

package/dist/components/ch-test-dropdown.js

@@ -1,104 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$6 } from './dropdown.js';
-import { d as defineCustomElement$5 } from './dropdown-item.js';
-import { d as defineCustomElement$4 } from './dropdown-item-separator.js';
-import { d as defineCustomElement$3 } from './ch-window2.js';
-import { d as defineCustomElement$2 } from './ch-window-close2.js';
-
-const testDropdownCss = ".dropdown::part(expandable-button){background-color:aliceblue;border:1px solid;border-radius:4px;padding-block:4px;padding-inline:16px}.dropdown::part(expandable-button):focus{box-shadow:0 0 0 1px black}.dropdown-item::part(action){--separation:8px;background-color:#f3d0c3;border-radius:4px;padding-inline:16px;padding-block:8px}.dropdown-item::part(action):focus-within{outline:1px solid}.dropdown-item::part(action):hover{background-color:#d3b1a4}.dropdown::part(section),.dropdown-item::part(section){background-color:#edeaff;padding:8px;box-shadow:0 4px 8px 1px #22222220}.dropdown::part(list),.dropdown-item::part(list){row-gap:8px;margin-block:8px}";
-
-const ChTestDropdownX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /**
-     * This attribute lets you specify the label for the expandable button.
-     * Important for accessibility.
-     */
-    this.buttonLabel = "Show options";
-    /**
-     * Determine which actions on the expandable button display the dropdown
-     * section.
-     */
-    this.expandBehavior = "ClickOrHover";
-    /**
-     * Determine if the dropdown section should be opened when the expandable
-     * button of the control is focused.
-     */
-    this.openOnFocus = false;
-    /**
-     * Specifies the position of the dropdown section that is placed relative to
-     * the expandable button.
-     */
-    this.position = "Center_OutsideEnd";
-    /**
-     * Specifies the separation (in pixels) between the expandable button and the
-     * dropdown section of the control.
-     */
-    this.separation = 0;
-    // /**
-    //  * Fired when the visibility of the dropdown section is changed
-    //  */
-    // @Event() expandedChange: EventEmitter<boolean>;
-    this.renderItem = (item) => [
-      h("ch-dropdown-item", { slot: "items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)),
-      item.showSeparator && (h("ch-dropdown-item-separator", { class: item.separatorClass }))
-    ];
-  }
-  render() {
-    return (h(Host, null, h("ch-dropdown", { buttonLabel: this.buttonLabel, class: "dropdown", expandBehavior: this.expandBehavior, openOnFocus: this.openOnFocus, position: this.position, style: {
-        "--separation": `${this.separation}px`
-      } }, h("span", { slot: "action" }, "User info"), h("div", { slot: "header" }, h("h1", null, "John Doe"), h("span", null, "johndoe@example.com")), this.itemsModel != null && this.itemsModel.map(this.renderItem), h("div", { slot: "footer" }, "Footer"))));
-  }
-  static get style() { return testDropdownCss; }
-}, [0, "ch-test-dropdown", {
-    "buttonLabel": [1, "button-label"],
-    "expandBehavior": [1, "expand-behavior"],
-    "itemsModel": [16],
-    "openOnFocus": [4, "open-on-focus"],
-    "position": [1],
-    "separation": [2]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-test-dropdown", "ch-dropdown", "ch-dropdown-item", "ch-dropdown-item-separator", "ch-window", "ch-window-close"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-test-dropdown":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChTestDropdownX);
-      }
-      break;
-    case "ch-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ch-dropdown-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ch-dropdown-item-separator":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ch-window":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ch-window-close":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const ChTestDropdown = ChTestDropdownX;
-const defineCustomElement = defineCustomElement$1;
-
-export { ChTestDropdown, defineCustomElement };

package/dist/components/dropdown-item-separator.js

@@ -1,30 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const dropdownItemSeparatorCss = ":host{display:flex;height:1px;background-color:#99999980;margin-block:2px}";
-
-const ChDropDownItemSeparator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    return h(Host, { role: "separator" });
-  }
-  static get style() { return dropdownItemSeparatorCss; }
-}, [1, "ch-dropdown-item-separator"]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-dropdown-item-separator"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-dropdown-item-separator":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChDropDownItemSeparator);
-      }
-      break;
-  } });
-}
-
-export { ChDropDownItemSeparator as C, defineCustomElement as d };

package/dist/esm/ch-test-action-group.entry.js

@@ -1,75 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-0aa3977d.js';
-
-const testActionGroupCss = "ch-test-action-group{display:flex;border:2px dashed #00000080;resize:both;overflow:auto;width:500px}.action-group{padding:20px;margin:20px;background-color:#ffffff;border:1px solid}.action-group::part(actions){gap:12px}.action-group::part(more-actions-button){border-radius:50%;width:fit-content;height:fit-content;color:#313aa1;align-self:center;margin-inline-end:8px}.dropdown-item::part(action){--separation:8px;background-color:#f3d0c3;border-radius:4px;padding-inline:16px;padding-block:8px}.dropdown-item::part(action):focus-within{outline:1px solid}.dropdown-item::part(action):hover{background-color:#d3b1a4}.action-group::part(more-actions-list),.dropdown-item::part(list){row-gap:8px;margin-block:8px}.action-group::part(more-actions-section),.dropdown-item::part(section){background-color:#edeaff;padding:8px;box-shadow:0 4px 8px 1px #22222220}";
-
-const ChTestActionGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.displayedItemsCount = -1;
-    /**
-     * This attribute lets you specify the label for the expandable button.
-     * Important for accessibility.
-     */
-    this.buttonLabel = "Show options";
-    /**
-     * Determine which actions on the expandable button display the dropdown
-     * section.
-     */
-    this.expandBehavior = "ClickOrHover";
-    /**
-     * This attribute determines how items behave when the content of the ActionGroup overflows horizontal. This property is needed
-     * to make the control responsive to changes in the Width of the container of ActionGroup.
-     *
-     * | Value                 | Details                                                                                          |
-     * | --------------------- | ------------------------------------------------------------------------------------------------ |
-     * | `Add Scroll`          | The items of the ActionGroup that overflow horizontally are shown by means of a scroll.          |
-     * | `Multiline`           | The ActionGroup items that overflow horizontally are shown in a second line of the control.      |
-     * | `Responsive Collapse` | The Action Group items, when they start to overflow the control, are placed in the More Actions. |
-     */
-    this.itemsOverflowBehavior = "ResponsiveCollapse";
-    /**
-     * Determine if the dropdown section should be opened when the expandable
-     * button of the control is focused.
-     */
-    this.openOnFocus = false;
-    /**
-     * Specifies the position of the dropdown section that is placed relative to
-     * the more actions button.
-     */
-    this.moreActionsDropdownPosition = "InsideStart_OutsideEnd";
-    /**
-     * Specifies the separation (in pixels) between the expandable button and the
-     * dropdown section of the control.
-     */
-    this.separation = 0;
-    // /**
-    //  * Fired when the visibility of the dropdown section is changed
-    //  */
-    // @Event() expandedChange: EventEmitter<boolean>;
-    this.renderItem = (item) => (h("ch-dropdown-item", { slot: "items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.position || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
-    this.firstLevelRenderItem = (item, index) => (h("ch-dropdown-item", { id: item.id, class: item.class, expandBehavior: this.expandBehavior, forceContainingBlock: false, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.position || "Center_OutsideEnd", rightImgSrc: item.rightIcon }, item.title, this.itemsOverflowBehavior === "ResponsiveCollapse" &&
-      (this.displayedItemsCount === -1 || index < this.displayedItemsCount) &&
-      item.items != null &&
-      item.items.map(this.renderItem)));
-    this.firstLevelRenderCollapsedItem = (item) => (h("ch-dropdown-item", { slot: "more-items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.responsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
-    this.handleDisplayedItemsCountChange = (event) => {
-      this.displayedItemsCount = event.detail;
-    };
-  }
-  render() {
-    return (h(Host, null, h("ch-action-group", { buttonLabel: this.buttonLabel, class: "action-group", expandBehavior: this.expandBehavior, itemsOverflowBehavior: this.itemsOverflowBehavior, openOnFocus: this.openOnFocus, moreActionsDropdownPosition: this.moreActionsDropdownPosition,
-      // style={{
-      //   "--separation": `${this.separation}px`
-      // }}
-      onDisplayedItemsCountChange: this.handleDisplayedItemsCountChange }, this.itemsModel != null &&
-      this.itemsModel.map((item, index) => (h("ch-action-group-item", { slot: "items" }, this.firstLevelRenderItem(item, index)))), this.itemsOverflowBehavior === "ResponsiveCollapse" &&
-      this.itemsModel != null &&
-      this.itemsModel
-        .filter((_, index) => this.displayedItemsCount !== -1 &&
-        index >= this.displayedItemsCount)
-        .map(this.firstLevelRenderCollapsedItem))));
-  }
-};
-ChTestActionGroup.style = testActionGroupCss;
-
-export { ChTestActionGroup as ch_test_action_group };