@genexus/genexus-ide-ui 0.0.23 → 0.0.25

package/dist/components/action-group.js

@@ -0,0 +1,214 @@
+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 actionGroupCss = "*,::after,::before{box-sizing:border-box}:host{display:grid;position:relative;width:100%;grid-template:\"more-actions actions\" 1fr/min-content 1fr;overflow:hidden}.more-actions{grid-area:more-actions}.more-actions::part(expandable-button){width:1.375em;height:1.375em}.more-actions::part(expandable-button)::before{content:\"\";width:100%;height:100%;background-color:currentColor;-webkit-mask:url('data:image/svg+xml,<svg viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.26837 10.5625C4.16837 10.5625 3.26837 11.4625 3.26837 12.5625C3.26837 13.6625 4.16837 14.5625 5.26837 14.5625C6.36837 14.5625 7.26837 13.6625 7.26837 12.5625C7.26837 11.4625 6.36837 10.5625 5.26837 10.5625ZM19.2684 10.5625C18.1684 10.5625 17.2684 11.4625 17.2684 12.5625C17.2684 13.6625 18.1684 14.5625 19.2684 14.5625C20.3684 14.5625 21.2684 13.6625 21.2684 12.5625C21.2684 11.4625 20.3684 10.5625 19.2684 10.5625ZM12.2684 10.5625C11.1684 10.5625 10.2684 11.4625 10.2684 12.5625C10.2684 13.6625 11.1684 14.5625 12.2684 14.5625C13.3684 14.5625 14.2684 13.6625 14.2684 12.5625C14.2684 11.4625 13.3684 10.5625 12.2684 10.5625Z\"/></svg>') 50% 50%/1.25em 1.25em no-repeat}.actions{grid-area:actions;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;width:100%;max-width:100%}.actions--responsive{position:absolute;inset:0}.actions--scroll{overflow-x:auto}.actions--multiline{display:flex;flex-wrap:wrap}";
+
+const FLOATING_POINT_ERROR = 1;
+const ChActionGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.displayedItemsCountChange = createEvent(this, "displayedItemsCountChange", 7);
+    this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
+    this.totalItems = -1;
+    /**
+     * The visible actions when `itemsOverflowBehavior === "ResponsiveCollapse"`.
+     */
+    this.displayedItems = -1;
+    /**
+     * This attribute lets you specify the label for the more actions button.
+     * Important for accessibility.
+     */
+    this.buttonLabel = "More actions";
+    /**
+     * 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 which mouse actions on the expandable button display the dropdown
+     * section.
+     */
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * @todo Check a better convention for this property, for example, "ActionsInlineAlignment"
+     * This attribute determines the position of the More Actions button in the Action Group.
+     *
+     * | Value   | Details                                                               |
+     * | --------| --------------------------------------------------------------------- |
+     * | `Start` | The More Actions Button is displayed to the left of the ActionGroup.  |
+     * | `End`   | The More Actions Button is displayed to the right of the ActionGroup. |
+     */
+    this.moreActionsButtonPosition = "Start";
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the more actions button.
+     */
+    this.moreActionsDropdownPosition = "InsideStart_OutsideEnd";
+    /**
+     * Determine if the dropdowns should be opened when the action is focused.
+     */
+    this.openOnFocus = false;
+    /**
+     * Update the visibility of the actions.
+     * Only works if itemsOverflowBehavior === "ResponsiveCollapse"
+     */
+    this.updateDisplayedActions = () => {
+      const actionGroupItems = this.slotItems.assignedElements();
+      // The column-gap property must be taken into account
+      const columnGap = getComputedStyle(this.actionsContainer).columnGap;
+      const columnGapValue = columnGap != null && columnGap.endsWith("px")
+        ? Number(columnGap.replace("px", ""))
+        : 0;
+      // Since the last item does not add column-gap, we have to adjust the measurement
+      let availableWidth = this.actionsContainer.clientWidth + columnGapValue - FLOATING_POINT_ERROR;
+      let displayedItems = 0;
+      // Check which items are visible
+      actionGroupItems.forEach(action => {
+        const actionWidth = action.clientWidth;
+        availableWidth -= actionWidth + columnGapValue;
+        if (availableWidth >= 0) {
+          action.floating = false;
+          displayedItems++;
+        }
+        else {
+          action.floating = true;
+        }
+      });
+      this.totalItems = actionGroupItems.length;
+      this.displayedItems = displayedItems;
+      this.displayedItemsCountChange.emit(displayedItems);
+    };
+    this.updateDisplayedActionInFrame = () => {
+      if (!this.needForRAF) {
+        return;
+      }
+      this.needForRAF = false; // No need to call RAF up until next frame
+      requestAnimationFrame(() => {
+        this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
+        this.updateDisplayedActions();
+      });
+    };
+    this.updateActionsWatcher = () => {
+      if (this.itemsOverflowBehavior !== "ResponsiveCollapse") {
+        return;
+      }
+      // Avoid memory leaks by disconnecting and re-connecting the observer
+      this.disconnectActionsObserver();
+      this.connectActionsObserver();
+    };
+  }
+  handleOverflowBehaviorChange(newValue) {
+    if (newValue !== "ResponsiveCollapse") {
+      const actionGroupItems = this.slotItems.assignedElements();
+      // Reset floating
+      actionGroupItems.forEach(item => {
+        item.floating = false;
+      });
+    }
+    this.setResponsiveCollapse();
+  }
+  connectActionsObserver() {
+    this.actionsWatcher = new ResizeObserver(this.updateDisplayedActionInFrame);
+    // Observe the actions
+    const actionGroupItems = this.slotItems.assignedElements();
+    actionGroupItems.forEach(action => {
+      this.actionsWatcher.observe(action);
+    });
+  }
+  connectActionsContainerObserver() {
+    this.actionsContainerWatcher = new ResizeObserver(this.updateDisplayedActionInFrame);
+    this.actionsContainerWatcher.observe(this.el);
+  }
+  disconnectActionsObserver() {
+    if (this.actionsWatcher) {
+      this.actionsWatcher.disconnect();
+      this.actionsWatcher = null;
+    }
+  }
+  disconnectActionsContainerObserver() {
+    if (this.actionsContainerWatcher) {
+      this.actionsContainerWatcher.disconnect();
+      this.actionsContainerWatcher = null;
+    }
+  }
+  setResponsiveCollapse() {
+    this.disconnectActionsObserver();
+    this.disconnectActionsContainerObserver();
+    if (this.itemsOverflowBehavior !== "ResponsiveCollapse") {
+      return;
+    }
+    this.connectActionsObserver();
+    this.connectActionsContainerObserver();
+  }
+  componentDidLoad() {
+    this.setResponsiveCollapse();
+  }
+  disconnectedCallback() {
+    this.disconnectActionsObserver();
+    this.disconnectActionsContainerObserver();
+  }
+  render() {
+    // @todo TODO: Improve accessibility and keyboard navigation
+    return (h(Host, { role: "menubar", "aria-label": this.accessibleName }, this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+      this.totalItems !== this.displayedItems && (h("ch-dropdown", { exportparts: "expandable-button:more-actions-button,separation:more-actions-separation,list:more-actions-list,section:more-actions-section,mask:more-actions-mask", buttonLabel: this.buttonLabel, class: "more-actions", part: "more-actions", expandBehavior: this.expandBehavior, openOnFocus: this.openOnFocus, position: this.moreActionsDropdownPosition }, h("slot", { name: "more-items", slot: "items" }))), h("div", { class: {
+        actions: true,
+        "actions--scroll": this.itemsOverflowBehavior === "AddScroll",
+        "actions--multiline": this.itemsOverflowBehavior === "Multiline",
+        "actions--responsive": this.itemsOverflowBehavior === "ResponsiveCollapse"
+      }, part: "actions", ref: el => (this.actionsContainer = el) }, h("slot", { name: "items", onSlotchange: this.updateActionsWatcher, ref: el => (this.slotItems = el) }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "itemsOverflowBehavior": ["handleOverflowBehaviorChange"]
+  }; }
+  static get style() { return actionGroupCss; }
+}, [1, "ch-action-group", {
+    "accessibleName": [1, "accessible-name"],
+    "buttonLabel": [1, "button-label"],
+    "itemsOverflowBehavior": [1, "items-overflow-behavior"],
+    "expandBehavior": [1, "expand-behavior"],
+    "moreActionsButtonPosition": [1, "more-actions-button-position"],
+    "moreActionsDropdownPosition": [1, "more-actions-dropdown-position"],
+    "openOnFocus": [4, "open-on-focus"],
+    "displayedItems": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-action-group", "ch-dropdown", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-action-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChActionGroup);
+      }
+      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 { ChActionGroup as C, defineCustomElement as d };

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

@@ -0,0 +1,6 @@
+import { C as ChActionGroupItem$1, d as defineCustomElement$1 } from './action-group-item.js';
+
+const ChActionGroupItem = ChActionGroupItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChActionGroupItem, defineCustomElement };

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

@@ -0,0 +1,6 @@
+import { C as ChActionGroup$1, d as defineCustomElement$1 } from './action-group.js';
+
+const ChActionGroup = ChActionGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChActionGroup, defineCustomElement };

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

@@ -1,31 +1,4 @@
-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$1() {
-  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;
-  } });
-}
+import { C as ChDropDownItemSeparator, d as defineCustomElement$1 } from './dropdown-item-separator.js';
 
 const ChDropdownItemSeparator = ChDropDownItemSeparator;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,56 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}@media (prefers-color-scheme: light){.action:focus,.action:hover{background-color:#ccc}.action:active{background-color:#e9e9e9}}@media (prefers-color-scheme: dark){.action:focus,.action:hover{background-color:#3e3e40}.action:active{background-color:#575965}}:host{display:flex;width:100%;height:100%}.action{display:flex;align-items:center;column-gap:8px;width:100%;height:100%;cursor:pointer;padding-block:8px;padding-inline:16px;font-size:0.875em;text-align:start;transition-property:background-color, border-color, box-shadow, color, filter, opacity;transition-duration:250ms}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}";
-
-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.dropDownItemContent = () => [
-      !!this.leftImgSrc && (h("img", { "aria-hidden": "true", class: "left-img", part: "dropdown-item__left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
-      h("span", { class: "content", part: "dropdown-item__content" }, h("slot", null)),
-      !!this.rightImgSrc && (h("img", { "aria-hidden": "true", class: "right-img", part: "dropdown-item__right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
-    ];
-    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();
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, this.href ? (h("a", { class: "action", part: "dropdown-item__target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent())) : (h("button", { class: "action", part: "dropdown-item__button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent()))));
-  }
-  get element() { return this; }
-  static get style() { return dropdownItemCss; }
-}, [1, "ch-dropdown-item", {
-    "href": [1],
-    "leftImgSrc": [1, "left-img-src"],
-    "rightImgSrc": [1, "right-img-src"],
-    "handleFocusElement": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-dropdown-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-dropdown-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChDropDownItem);
-      }
-      break;
-  } });
-}
+import { C as ChDropDownItem, d as defineCustomElement$1 } from './dropdown-item.js';
 
 const ChDropdownItem = ChDropDownItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ch-dropdown.js

@@ -1,287 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}@media (prefers-color-scheme: light){.section{background-color:#fbfbfb;color:#000}}@media (prefers-color-scheme: dark){.section{background-color:#242426;color:#e9e9e9}}:host{--ch-dropdown-rtl-initial-X:1;--ch-dropdown-translateX:0;--ch-dropdown-translateY:0;display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{box-shadow:0px 0px 0 1px currentColor;transition:box-shadow 250ms}.dummy-separation{display:flex;position:absolute;z-index:107}.dummy-separation--vertical{width:100%;height:var(--separation-between-button-size)}.dummy-separation--top{inset-block-start:var(--separation-between-button)}.dummy-separation--bottom{inset-block-end:var(--separation-between-button)}.dummy-separation--horizontal{width:var(--separation-between-button-size);height:100%}.dummy-separation--left{inset-inline-start:var(--separation-between-button)}.dummy-separation--right{inset-inline-end:var(--separation-between-button)}.section{position:absolute;border-radius:5px;box-shadow:0 3px 4px #80808024, 0 3px 3px -2px #8080801f, 0 1px 8px #80808030;width:max-content;max-width:350px;z-index:107}.header+.list,.list+.footer{margin-block-start:8px}.list{display:flex;flex-direction:column;gap:4px}.position--top{inset-block-start:var(--separation-between-button);transform:translate(var(--ch-dropdown-translateX), -100%)}.position--right{inset-inline-end:var(--separation-between-button);transform:translate(calc(100% * var(--ch-dropdown-rtl-initial-X)), var(--ch-dropdown-translateY))}.position--bottom{inset-block-end:var(--separation-between-button);transform:translate(var(--ch-dropdown-translateX), 100%)}.position--left{inset-inline-start:var(--separation-between-button);transform:translate(calc(-100% * var(--ch-dropdown-rtl-initial-X)), var(--ch-dropdown-translateY))}.align--left{inset-inline-start:0}.align--center{inset-inline-start:50%;--ch-dropdown-translateX:calc(-50% * var(--ch-dropdown-rtl-initial-X))}.align--right{inset-inline-end:0}.valign--top{inset-block-start:0}.valign--middle{inset-block-start:50%;--ch-dropdown-translateY:calc(-50% * var(--ch-dropdown-rtl-initial-X))}.valign--bottom{inset-block-end:0}";
-
-const EXPANDABLE_BUTTON_ID = "expandable-button";
-const SECTION_ID = "section";
-const DROPDOWN_ITEM_TAG_NAME = "ch-dropdown-item";
-const DROPDOWN_ITEM_SELECTOR = `:scope > ${DROPDOWN_ITEM_TAG_NAME}`;
-// Keys
-const TAB_KEY = "Tab";
-const ChDropDown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.expandedChange = createEvent(this, "expandedChange", 7);
-    this.keyEventsDictionary = {
-      ArrowDown: (event) => {
-        event.preventDefault();
-        if (!this.currentFocusedItem) {
-          this.focusFirstDropDownItem();
-          return;
-        }
-        const nextDropDownItem = this.findNextDropDownItemSibling();
-        if (nextDropDownItem) {
-          // This is wrong, it should call the focusElement Method. StencilJS bug?
-          nextDropDownItem.handleFocusElement();
-        }
-      },
-      ArrowUp: (event) => {
-        event.preventDefault();
-        if (!this.currentFocusedItem) {
-          this.focusFirstDropDownItem();
-          return;
-        }
-        const previousDropDownItem = this.findPreviousDropDownItemSibling();
-        if (previousDropDownItem) {
-          // This is wrong, it should call the focusElement Method. StencilJS bug?
-          previousDropDownItem.handleFocusElement();
-        }
-      },
-      Escape: () => {
-        this.closeDropdown();
-        this.returnFocusToButton();
-      }
-    };
-    this.showHeader = false;
-    this.showFooter = false;
-    this.expanded = false;
-    this.expandedWithHover = false;
-    /**
-     * Specifies the horizontal alignment the dropdown section has when using
-     * `position === "Top"` or `position === "Bottom"`.
-     */
-    this.align = "Center";
-    /**
-     * 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 = "Click or Hover";
-    /**
-     * 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 = "Bottom";
-    /**
-     * Specifies the separation (in pixels) between the expandable button and the
-     * dropdown section of the control.
-     */
-    this.dropdownSeparation = 12;
-    /**
-     * Specifies the vertical alignment the dropdown section has when using
-     * `position === "Right"` or `position === "Left"`.
-     */
-    this.valign = "Middle";
-    this.closeDropdown = () => {
-      this.closeDropdownWithHover();
-      this.expanded = false;
-      this.expandedChange.emit(false);
-    };
-    this.closeDropdownWithHover = () => {
-      this.expandedWithHover = false;
-      // If the control was not expanded with focus
-      if (!this.expanded) {
-        this.expandedChange.emit(false);
-      }
-    };
-    this.closeDropdownWhenClickingOutside = (event) => {
-      if (event.composedPath().find(el => el === this.element) === undefined) {
-        this.closeDropdown();
-      }
-    };
-    this.handleKeyDownEvents = (event) => {
-      const keyEventHandler = this.keyEventsDictionary[event.code];
-      if (keyEventHandler) {
-        keyEventHandler(event);
-      }
-    };
-    /**
-     * Check if the next focused element is a child element of the dropdown
-     * control.
-     */
-    this.handleKeyUpEvents = (event) => {
-      if (event.code !== TAB_KEY) {
-        return;
-      }
-      const nextFocusedElement = event.target;
-      const isChildElement = nextFocusedElement.closest("ch-dropdown") === this.element;
-      if (isChildElement) {
-        return;
-      }
-      this.closeDropdown();
-    };
-    this.handleMouseLeave = () => {
-      const focusedElementIsInsideDropDown = document.activeElement.closest("ch-dropdown") === this.element;
-      if (focusedElementIsInsideDropDown) {
-        this.expanded = true;
-      }
-      this.closeDropdownWithHover();
-    };
-    this.handleMouseEnter = () => {
-      if (this.expandedWithHover) {
-        return;
-      }
-      this.expandedWithHover = true;
-      // If not previously expanded, emit the event
-      if (!this.expanded) {
-        this.expandedChange.emit(true);
-      }
-    };
-    this.handleButtonClick = () => {
-      this.expandedChange.emit(!this.expanded);
-      this.expanded = !this.expanded;
-    };
-    this.handleButtonFocus = () => {
-      if (this.expanded) {
-        return;
-      }
-      this.expanded = true;
-      // If not previously expanded, emit the event
-      if (!this.expandedWithHover) {
-        this.expandedChange.emit(true);
-      }
-    };
-  }
-  handleExpandedChange(newExpandedValue) {
-    if (newExpandedValue) {
-      this.currentFocusedItem = undefined;
-      // Click
-      document.body.addEventListener("click", this.closeDropdownWhenClickingOutside, {
-        capture: true
-      });
-      // Keyboard events
-      document.body.addEventListener("keydown", this.handleKeyDownEvents, {
-        capture: true
-      });
-      document.body.addEventListener("keyup", this.handleKeyUpEvents, {
-        capture: true
-      });
-    }
-    else {
-      // Click
-      document.body.removeEventListener("click", this.closeDropdownWhenClickingOutside, {
-        capture: true
-      });
-      // Keyboard events
-      document.body.removeEventListener("keydown", this.handleKeyDownEvents, {
-        capture: true
-      });
-      document.body.removeEventListener("keyup", this.handleKeyUpEvents, {
-        capture: true
-      });
-    }
-  }
-  handleActionClick() {
-    this.closeDropdown();
-    // @todo This behavior must be specified by a property
-    // this.returnFocusToButton();
-  }
-  handleDropDownItemFocusChange(event) {
-    this.currentFocusedItem = event.target;
-  }
-  focusFirstDropDownItem() {
-    this.currentFocusedItem = this.element.querySelector(DROPDOWN_ITEM_SELECTOR);
-    if (this.currentFocusedItem) {
-      this.currentFocusedItem.handleFocusElement();
-    }
-  }
-  findNextDropDownItemSibling() {
-    let nextSibling = this.currentFocusedItem
-      .nextElementSibling;
-    while (nextSibling &&
-      nextSibling.tagName.toLowerCase() !== DROPDOWN_ITEM_TAG_NAME) {
-      nextSibling = nextSibling.nextElementSibling;
-    }
-    return nextSibling;
-  }
-  findPreviousDropDownItemSibling() {
-    let previousSibling = this.currentFocusedItem
-      .previousElementSibling;
-    while (previousSibling &&
-      previousSibling.tagName.toLowerCase() !== DROPDOWN_ITEM_TAG_NAME) {
-      previousSibling =
-        previousSibling.previousElementSibling;
-    }
-    return previousSibling;
-  }
-  /**
-   * Returns focus to the expandable button when closing the dropdown. Only
-   * works if `openOnFocus = "false"`
-   */
-  returnFocusToButton() {
-    if (!this.openOnFocus) {
-      this.expandableButton.focus();
-    }
-  }
-  componentWillLoad() {
-    this.showHeader = !!this.element.querySelector(':scope > [slot="header"]');
-    this.showFooter = !!this.element.querySelector(':scope > [slot="footer"]');
-  }
-  render() {
-    const hasVerticalPosition = this.position === "Bottom" || this.position === "Top";
-    const isExpanded = this.expanded || this.expandedWithHover;
-    return (h(Host, { onMouseLeave: this.expandBehavior === "Click or Hover"
-        ? this.handleMouseLeave
-        : undefined, style: {
-        "--separation-between-button": `-${this.dropdownSeparation}px`,
-        "--separation-between-button-size": `${this.dropdownSeparation}px`
-      } }, h("button", { id: EXPANDABLE_BUTTON_ID, "aria-controls": SECTION_ID, "aria-expanded": this.expanded.toString(), "aria-haspopup": "true", "aria-label": this.buttonLabel, class: "expandable-button", part: "dropdown__expandable-button", type: "button", onClick: this.handleButtonClick, onFocus: this.openOnFocus ? this.handleButtonFocus : undefined, onMouseEnter: this.expandBehavior === "Click or Hover"
-        ? this.handleMouseEnter
-        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), this.expandBehavior === "Click or Hover" && this.expandedWithHover && (
-    // Necessary since the separation between the button and the section
-    // triggers the onMouseLeave event
-    h("div", { "aria-hidden": "true", class: {
-        "dummy-separation": true,
-        [`dummy-separation--${this.position.toLowerCase()}`]: true,
-        "dummy-separation--vertical": hasVerticalPosition,
-        "dummy-separation--horizontal": !hasVerticalPosition
-      }, part: "dropdown__separation" })), h("section", { id: SECTION_ID, "aria-labelledby": EXPANDABLE_BUTTON_ID, class: {
-        section: true,
-        [`position--${this.position.toLowerCase()}`]: true,
-        [`align--${this.align.toLowerCase()}`]: hasVerticalPosition,
-        [`valign--${this.valign.toLowerCase()}`]: !hasVerticalPosition
-      }, part: "dropdown__section", hidden: !isExpanded }, this.showHeader && (h("header", { class: "header", part: "dropdown__header" }, h("slot", { name: "header" }))), h("div", { role: "list", class: "list", part: "dropdown__list" }, h("slot", { name: "items" })), this.showFooter && (h("footer", { class: "footer", part: "dropdown__footer" }, h("slot", { name: "footer" }))))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "expanded": ["handleExpandedChange"]
-  }; }
-  static get style() { return dropdownCss; }
-}, [1, "ch-dropdown", {
-    "align": [1],
-    "buttonLabel": [1, "button-label"],
-    "expandBehavior": [1, "expand-behavior"],
-    "openOnFocus": [4, "open-on-focus"],
-    "position": [1],
-    "dropdownSeparation": [2, "dropdown-separation"],
-    "valign": [1],
-    "expanded": [32],
-    "expandedWithHover": [32]
-  }, [[0, "actionClick", "handleActionClick"], [0, "focusChange", "handleDropDownItemFocusChange"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-dropdown"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-dropdown":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChDropDown);
-      }
-      break;
-  } });
-}
+import { C as ChDropDown, d as defineCustomElement$1 } from './dropdown.js';
 
 const ChDropdown = ChDropDown;
 const defineCustomElement = defineCustomElement$1;