@genexus/genexus-ide-ui 0.0.23 → 0.0.24

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

@@ -0,0 +1,137 @@
+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", { 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(item => (h("ch-action-group-item", { slot: "more-items", avoidFloating: true }, this.firstLevelRenderCollapsedItem(item)))))));
+  }
+  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

@@ -0,0 +1,104 @@
+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/ch-window2.js

@@ -2,8 +2,9 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet.js';
 import { d as defineCustomElement$1 } from './ch-window-close2.js';
 
-const chWindowCss = ":host{--ch-window-offset-x:0px;--ch-window-offset-y:0px}:host(:not([hidden])){display:contents}:host(:is(:not([modal]),[modal=\"false\"])) .mask{pointer-events:none}.window{pointer-events:all}.mask{display:flex;position:fixed;inset:0;inset-inline-start:calc( var(--ch-window-inset-inline-start) + var(--ch-window-offset-x) );inset-block-start:calc( var(--ch-window-inset-block-start) + var(--ch-window-offset-y) );z-index:var(--ch-window-mask-z-index, 1000)}:host(:is([x-align=\"outside-start\"],[x-align=\"inside-start\"])) .mask{justify-content:flex-start}:host([x-align=center]) .mask{justify-content:center}:host(:is([x-align=\"outside-end\"],[x-align=\"inside-end\"])) .mask{justify-content:flex-end}:host(:is([y-align=\"outside-start\"],[y-align=\"inside-start\"])) .mask{align-items:flex-start}:host([y-align=center]) .mask{align-items:center}:host(:is([y-align=\"outside-end\"],[y-align=\"inside-end\"])) .mask{align-items:flex-end}.window{display:flex;flex-direction:column;transform:translate(var(--ch-window-x-outside, 0px), var(--ch-window-y-outside, 0px)) translate(var(--ch-window-x-drag, 0px), var(--ch-window-y-drag, 0px))}:host([x-align=outside-start]) .window{--ch-window-x-outside:-100%}:host([x-align=outside-end]) .window{--ch-window-x-outside:100%}:host([y-align=outside-start]) .window{--ch-window-y-outside:-100%}:host([y-align=outside-end]) .window{--ch-window-y-outside:100%}";
+const chWindowCss = ":host{--ch-window-offset-x:0px;--ch-window-offset-y:0px;--ch-window-x-outside:0px;--ch-window-y-outside:0px}:host(:not([hidden])){display:contents}:host(:is(:not([modal]),[modal=\"false\"])) .mask{pointer-events:none}.window{pointer-events:all}.mask{display:flex;position:fixed;inset:0;inset-inline-start:calc( var(--ch-window-inset-inline-start) + var(--ch-window-offset-x) );inset-block-start:calc( var(--ch-window-inset-block-start) + var(--ch-window-offset-y) );z-index:var(--ch-window-mask-z-index, 1000)}:host(:is([x-align=\"outside-start\"],[x-align=\"inside-start\"])) .mask{justify-content:flex-start}:host([x-align=center]) .mask{justify-content:center}:host(:is([x-align=\"outside-end\"],[x-align=\"inside-end\"])) .mask{justify-content:flex-end}:host(:is([y-align=\"outside-start\"],[y-align=\"inside-start\"])) .mask{align-items:flex-start}:host([y-align=center]) .mask{align-items:center}:host(:is([y-align=\"outside-end\"],[y-align=\"inside-end\"])) .mask{align-items:flex-end}.window{display:flex;flex-direction:column;transform:translate(var(--ch-window-x-outside), var(--ch-window-y-outside)) translate(var(--ch-window-x-drag, 0px), var(--ch-window-y-drag, 0px))}:host([x-align=outside-start]) .window{--ch-window-x-outside:-100%}:host([x-align=outside-end]) .window{--ch-window-x-outside:100%}:host([y-align=outside-start]) .window{--ch-window-y-outside:-100%}:host([y-align=outside-end]) .window{--ch-window-y-outside:100%}";
 
+const CONTAINING_BLOCK_RESET_CUSTOM_VAR = "--ch-window-relative-position";
 const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -12,6 +13,7 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.windowOpened = createEvent(this, "windowOpened", 7);
     this.windowClosed = createEvent(this, "windowClosed", 7);
     this.isContainerCssOverride = false;
+    this.relativeWindow = false;
     this.validCssAligns = [
       "outside-start",
       "inside-start",
@@ -59,17 +61,25 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.updatePosition = () => {
       if (!this.isContainerCssOverride && this.container && this.mask) {
         const rect = this.container.getBoundingClientRect();
+        this.mask.style.width = `${rect.width}px`;
+        this.mask.style.height = `${rect.height}px`;
+        // Nested windows are positioned relative to its initial containing block,
+        // so there is no need to align them relative to the document
+        if (this.relativeWindow) {
+          return;
+        }
         // TODO: RTL positioning bug
         this.mask.style.setProperty("--ch-window-inset-inline-start", `${rect.left}px`);
         this.mask.style.setProperty("--ch-window-inset-block-start", `${rect.top}px`);
-        this.mask.style.width = `${rect.width}px`;
-        this.mask.style.height = `${rect.height}px`;
       }
       else if (this.isContainerCssOverride || !this.container) {
-        this.mask.style.removeProperty("--ch-window-inset-inline-start");
-        this.mask.style.removeProperty("--ch-window-inset-block-start");
         this.mask.style.removeProperty("width");
         this.mask.style.removeProperty("height");
+        if (this.relativeWindow) {
+          return;
+        }
+        this.mask.style.removeProperty("--ch-window-inset-inline-start");
+        this.mask.style.removeProperty("--ch-window-inset-block-start");
       }
     };
     this.windowResizeHandler = () => {
@@ -91,6 +101,7 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
   }
   containerHandler(value, oldValue) {
+    this.checkRelativePosition();
     this.containerResizeObserverHandler(value, oldValue);
     this.updatePosition();
   }
@@ -101,6 +112,7 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.windowClosed.emit();
     }
     else {
+      this.checkRelativePosition();
       this.updatePosition();
       this.watchCSSAlign();
       this.addListeners();
@@ -128,6 +140,10 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   windowCloseClickedHandler() {
     this.hidden = true;
   }
+  checkRelativePosition() {
+    const computed = getComputedStyle(this.el);
+    this.relativeWindow = !!computed.getPropertyValue(CONTAINING_BLOCK_RESET_CUSTOM_VAR);
+  }
   resetDrag() {
     this.dragStartX = undefined;
     this.dragStartY = undefined;
@@ -203,7 +219,10 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.el.shadowRoot.adoptedStyleSheets.push(CH_GLOBAL_STYLESHEET);
   }
   render() {
-    return (h(Host, null, h("div", { class: "mask", part: "mask", ref: el => (this.mask = el), onClick: this.maskClickHandler }, h("section", { class: "window", part: "window", ref: el => (this.window = el) }, this.showHeader && (h("header", { part: "header", ref: el => (this.header = el) }, h("slot", { name: "header" }, h("span", { part: "caption" }, this.caption), h("ch-window-close", { part: "close", title: this.closeTooltip }, this.closeText)))), h("div", { part: "main" }, h("slot", null)), this.showFooter && (h("footer", { part: "footer" }, h("slot", { name: "footer" })))))));
+    return (h(Host, null, h("div", { class: "mask", part: "mask", style: this.relativeWindow && {
+        "--ch-window-inset-inline-start": "0px",
+        "--ch-window-inset-block-start": "0px"
+      }, ref: el => (this.mask = el), onClick: this.maskClickHandler }, h("section", { class: "window", part: "window", ref: el => (this.window = el) }, this.showHeader && (h("header", { part: "header", ref: el => (this.header = el) }, h("slot", { name: "header" }, h("span", { part: "caption" }, this.caption), h("ch-window-close", { part: "close", title: this.closeTooltip }, this.closeText)))), h("div", { part: "main" }, h("slot", null)), this.showFooter && (h("footer", { part: "footer" }, h("slot", { name: "footer" })))))));
   }
   get el() { return this; }
   static get watchers() { return {

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

@@ -0,0 +1,30 @@
+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/components/dropdown-item.js

@@ -0,0 +1,109 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './dropdown.js';
+import { d as defineCustomElement$2 } from './ch-window2.js';
+import { d as defineCustomElement$1 } from './ch-window-close2.js';
+
+const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}:host([force-containing-block]){transform:translateX(0);--ch-window-relative-position:true}.action{display:flex;align-items:center;width:100%;height:100%;cursor:pointer;text-align:start}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}.dummy-wrapper{display:contents}";
+
+const DROPDOWN_ITEM = "ch-dropdown-item";
+const ChDropDownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.actionClick = createEvent(this, "actionClick", 7);
+    this.focusChange = createEvent(this, "focusChange", 7);
+    this.hasItems = false;
+    /**
+     * Determine which actions on the expandable button display the dropdown
+     * section.
+     * Only works if the control has subitems.
+     */
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * `true` to force the control to make its own containing block.
+     */
+    this.forceContainingBlock = true;
+    /**
+     * Determine if the dropdown section should be opened when the expandable
+     * button of the control is focused.
+     * Only works if the control has subitems.
+     */
+    this.openOnFocus = false;
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the expandable button.
+     */
+    this.position = "Center_OutsideEnd";
+    this.dropDownItemContent = () => [
+      !!this.leftImgSrc && (h("img", { "aria-hidden": "true", class: "left-img", part: "left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
+      h("span", { class: "content", part: "content" }, h("slot", null)),
+      !!this.rightImgSrc && (h("img", { "aria-hidden": "true", class: "right-img", part: "right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
+    ];
+    this.checkItems = () => {
+      this.hasItems = !!this.element.querySelector(`:scope>${DROPDOWN_ITEM}`);
+    };
+    this.noItemsRender = () => this.href ? (h("a", { class: "action", part: "action target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems }))) : (h("button", { class: "action", part: "action button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems })));
+    this.itemsRender = () => (h("ch-dropdown", { class: "action", exportparts: "expandable-button:action,expandable-button:button,expandable-button:expandable-action,separation,list,section,mask,header,footer,window", expandBehavior: this.expandBehavior, nestedDropdown: true, openOnFocus: this.openOnFocus, position: this.position }, h("div", { class: "dummy-wrapper", slot: "action" }, this.dropDownItemContent()), h("slot", { name: "items", slot: "items", onSlotchange: this.checkItems })));
+    this.handleActionClick = () => {
+      this.actionClick.emit(this.element.id);
+    };
+    this.handleFocus = () => {
+      this.focusChange.emit();
+    };
+  }
+  /**
+   * Focuses the control's anchor or button.
+   */
+  async handleFocusElement() {
+    this.mainElement.focus();
+  }
+  componentWillLoad() {
+    this.checkItems();
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, this.hasItems ? this.itemsRender() : this.noItemsRender()));
+  }
+  get element() { return this; }
+  static get style() { return dropdownItemCss; }
+}, [1, "ch-dropdown-item", {
+    "expandBehavior": [1, "expand-behavior"],
+    "forceContainingBlock": [516, "force-containing-block"],
+    "href": [1],
+    "leftImgSrc": [1, "left-img-src"],
+    "openOnFocus": [4, "open-on-focus"],
+    "position": [1],
+    "rightImgSrc": [1, "right-img-src"],
+    "hasItems": [32],
+    "handleFocusElement": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-dropdown-item", "ch-dropdown", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-dropdown-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChDropDownItem);
+      }
+      break;
+    case "ch-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ChDropDownItem as C, defineCustomElement as d };