@genexus/genexus-ide-ui 0.0.23 → 0.0.25

package/dist/esm/ch-dropdown-item.entry.js

@@ -1,17 +1,45 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 
-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 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 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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: "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.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);
     };
@@ -25,8 +53,11 @@ const ChDropDownItem = class {
   async handleFocusElement() {
     this.mainElement.focus();
   }
+  componentWillLoad() {
+    this.checkItems();
+  }
   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()))));
+    return (h(Host, { role: "listitem" }, this.hasItems ? this.itemsRender() : this.noItemsRender()));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/ch-dropdown.entry.js

@@ -1,7 +1,14 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 
-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 dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--separation:0px;--separation-x:var(--separation);--separation-y:var(--separation);display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{transition:box-shadow 250ms}::slotted([slot=action]){pointer-events:none}.separation{display:flex;position:absolute;z-index:107}.separation--y{width:100%;height:var(--separation-y)}.separation--y-outside-start{inset-block-start:calc(var(--separation-y) * -1)}.separation--y-outside-start+ch-window{--ch-window-offset-y:calc(var(--separation-y) * -1)}.separation--y-outside-end{inset-block-end:calc(var(--separation-y) * -1)}.separation--y-outside-end+ch-window{--ch-window-offset-y:var(--separation-y)}.separation--x{width:var(--separation-x);height:100%}.separation--x-outside-start{inset-inline-start:calc(var(--separation-x) * -1)}.separation--x-outside-start+ch-window{--ch-window-offset-x:calc(var(--separation-x) * -1)}.separation--x-outside-end{inset-inline-end:calc(var(--separation-x) * -1)}.separation--x-outside-end+ch-window{--ch-window-offset-x:var(--separation-x)}.list{display:flex;flex-direction:column}";
 
+const mapDropdownAlignToChWindowAlign = {
+  OutsideStart: "outside-start",
+  InsideStart: "inside-start",
+  Center: "center",
+  InsideEnd: "inside-end",
+  OutsideEnd: "outside-end"
+};
 const EXPANDABLE_BUTTON_ID = "expandable-button";
 const SECTION_ID = "section";
 const DROPDOWN_ITEM_TAG_NAME = "ch-dropdown-item";
@@ -46,11 +53,6 @@ const ChDropDown = class {
     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.
@@ -60,7 +62,12 @@ const ChDropDown = class {
      * Determine which actions on the expandable button display the dropdown
      * section.
      */
-    this.expandBehavior = "Click or Hover";
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * This attribute lets you specify if the control is nested in another
+     * dropdown. Useful to manage keyboard interaction.
+     */
+    this.nestedDropdown = false;
     /**
      * Determine if the dropdown section should be opened when the expandable
      * button of the control is focused.
@@ -70,17 +77,7 @@ const ChDropDown = class {
      * 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.position = "Center_OutsideEnd";
     this.closeDropdown = () => {
       this.closeDropdownWithHover();
       this.expanded = false;
@@ -94,7 +91,7 @@ const ChDropDown = class {
       }
     };
     this.closeDropdownWhenClickingOutside = (event) => {
-      if (event.composedPath().find(el => el === this.element) === undefined) {
+      if (event.composedPath().find(el => el === this.el) === undefined) {
         this.closeDropdown();
       }
     };
@@ -112,15 +109,14 @@ const ChDropDown = class {
       if (event.code !== TAB_KEY) {
         return;
       }
-      const nextFocusedElement = event.target;
-      const isChildElement = nextFocusedElement.closest("ch-dropdown") === this.element;
+      const isChildElement = event.composedPath().includes(this.el);
       if (isChildElement) {
         return;
       }
       this.closeDropdown();
     };
     this.handleMouseLeave = () => {
-      const focusedElementIsInsideDropDown = document.activeElement.closest("ch-dropdown") === this.element;
+      const focusedElementIsInsideDropDown = document.activeElement.closest("ch-dropdown") === this.el;
       if (focusedElementIsInsideDropDown) {
         this.expanded = true;
       }
@@ -136,11 +132,13 @@ const ChDropDown = class {
         this.expandedChange.emit(true);
       }
     };
-    this.handleButtonClick = () => {
+    this.handleButtonClick = (event) => {
+      event.stopPropagation();
       this.expandedChange.emit(!this.expanded);
       this.expanded = !this.expanded;
     };
-    this.handleButtonFocus = () => {
+    this.handleButtonFocus = (event) => {
+      event.stopPropagation();
       if (this.expanded) {
         return;
       }
@@ -159,9 +157,11 @@ const ChDropDown = class {
         capture: true
       });
       // Keyboard events
-      document.body.addEventListener("keydown", this.handleKeyDownEvents, {
-        capture: true
-      });
+      if (!this.nestedDropdown) {
+        document.body.addEventListener("keydown", this.handleKeyDownEvents, {
+          capture: true
+        });
+      }
       document.body.addEventListener("keyup", this.handleKeyUpEvents, {
         capture: true
       });
@@ -172,9 +172,11 @@ const ChDropDown = class {
         capture: true
       });
       // Keyboard events
-      document.body.removeEventListener("keydown", this.handleKeyDownEvents, {
-        capture: true
-      });
+      if (!this.nestedDropdown) {
+        document.body.removeEventListener("keydown", this.handleKeyDownEvents, {
+          capture: true
+        });
+      }
       document.body.removeEventListener("keyup", this.handleKeyUpEvents, {
         capture: true
       });
@@ -189,7 +191,7 @@ const ChDropDown = class {
     this.currentFocusedItem = event.target;
   }
   focusFirstDropDownItem() {
-    this.currentFocusedItem = this.element.querySelector(DROPDOWN_ITEM_SELECTOR);
+    this.currentFocusedItem = this.el.querySelector(DROPDOWN_ITEM_SELECTOR);
     if (this.currentFocusedItem) {
       this.currentFocusedItem.handleFocusElement();
     }
@@ -218,40 +220,36 @@ const ChDropDown = class {
    * works if `openOnFocus = "false"`
    */
   returnFocusToButton() {
-    if (!this.openOnFocus) {
+    if (!this.openOnFocus && !this.nestedDropdown) {
       this.expandableButton.focus();
     }
   }
   componentWillLoad() {
-    this.showHeader = !!this.element.querySelector(':scope > [slot="header"]');
-    this.showFooter = !!this.element.querySelector(':scope > [slot="footer"]');
+    this.showHeader = !!this.el.querySelector(':scope > [slot="header"]');
+    this.showFooter = !!this.el.querySelector(':scope > [slot="footer"]');
   }
   render() {
-    const hasVerticalPosition = this.position === "Bottom" || this.position === "Top";
+    const aligns = this.position.split("_");
+    const alignX = aligns[0];
+    const alignY = aligns[1];
+    const hasVerticalPosition = alignY === "OutsideStart" || alignY === "OutsideEnd";
+    const xAlignMapping = mapDropdownAlignToChWindowAlign[alignX];
+    const yAlignMapping = mapDropdownAlignToChWindowAlign[alignY];
     const isExpanded = this.expanded || this.expandedWithHover;
-    return (h(Host, { onMouseLeave: this.expandBehavior === "Click or Hover"
+    return (h(Host, { onMouseLeave: this.expandBehavior === "ClickOrHover"
         ? 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"
+        : undefined }, 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: "expandable-button", type: "button", onClick: this.handleButtonClick, onFocus: this.openOnFocus ? this.handleButtonFocus : undefined, onMouseEnter: this.expandBehavior === "ClickOrHover"
         ? this.handleMouseEnter
-        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), this.expandBehavior === "Click or Hover" && this.expandedWithHover && (
+        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), this.expandBehavior === "ClickOrHover" && (
     // 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" }))))));
+        separation: true,
+        [`separation--y separation--y-${yAlignMapping}`]: hasVerticalPosition,
+        [`separation--x separation--x-${xAlignMapping}`]: !hasVerticalPosition
+      }, part: "separation" })), h("ch-window", { part: "window", exportparts: "window:section,mask,header,footer", container: this.el, closeOnEscape: true, hidden: !isExpanded, modal: false, showFooter: this.showFooter, showHeader: this.showHeader, xAlign: xAlignMapping, yAlign: yAlignMapping }, this.showHeader && h("slot", { name: "header", slot: "header" }), h("div", { role: "list", class: "list", part: "list" }, h("slot", { name: "items" })), this.showFooter && h("slot", { name: "footer", slot: "footer" }))));
   }
-  get element() { return getElement(this); }
+  get el() { return getElement(this); }
   static get watchers() { return {
     "expanded": ["handleExpandedChange"]
   }; }

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

@@ -0,0 +1,75 @@
+import { r as registerInstance, h, H as Host } from './index-0da01575.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", { 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)))))));
+  }
+};
+ChTestActionGroup.style = testActionGroupCss;
+
+export { ChTestActionGroup as ch_test_action_group };

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

@@ -0,0 +1,50 @@
+import { r as registerInstance, h, H as Host } from './index-0da01575.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) {
+    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) => [
+      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"))));
+  }
+};
+ChTestDropdownX.style = testDropdownCss;
+
+export { ChTestDropdownX as ch_test_dropdown };

package/dist/esm/ch-window_2.entry.js

@@ -1,14 +1,16 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet-f8bbf095.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 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.windowOpened = createEvent(this, "windowOpened", 7);
     this.windowClosed = createEvent(this, "windowClosed", 7);
     this.isContainerCssOverride = false;
+    this.relativeWindow = false;
     this.validCssAligns = [
       "outside-start",
       "inside-start",
@@ -56,17 +58,25 @@ const ChWindow = class {
     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 = () => {
@@ -88,6 +98,7 @@ const ChWindow = class {
     };
   }
   containerHandler(value, oldValue) {
+    this.checkRelativePosition();
     this.containerResizeObserverHandler(value, oldValue);
     this.updatePosition();
   }
@@ -98,6 +109,7 @@ const ChWindow = class {
       this.windowClosed.emit();
     }
     else {
+      this.checkRelativePosition();
       this.updatePosition();
       this.watchCSSAlign();
       this.addListeners();
@@ -125,6 +137,10 @@ const ChWindow = class {
   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;
@@ -200,7 +216,10 @@ const ChWindow = class {
     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 getElement(this); }
   static get watchers() { return {