genesys-spark-components 4.26.0 → 4.26.1

package/dist/collection/components/stable/gux-flyout-menu/gux-flyout-menu.js

@@ -8,230 +8,230 @@ import { hideDelay } from "./gux-menu/gux-menu.common";
  * @slot menu - gux-menu element
  */
 export class GuxFlyoutMenu {
-  constructor() {
-    this.isShown = false;
-  }
-  onKeydown(event) {
-    event.stopPropagation();
-    if (this.isShown) {
-      switch (event.key) {
-        case 'Escape':
-        case 'ArrowLeft':
-        case 'ArrowUp':
-          this.root.focus();
-          return;
-        case 'ArrowDown':
-          event.preventDefault();
-          this.focusOnMenu();
-          return;
-        case 'Enter':
-          this.hideDelayTimeout = afterNextRenderTimeout(() => {
-            this.focusOnMenu();
-          });
-          return;
-      }
-    }
-  }
-  // Using 'keyup' here because the native click handler behavior
-  // for buttons is triggered on keyup when using the space key
-  onKeyup(event) {
-    event.stopPropagation();
-    switch (event.key) {
-      case ' ':
-        if (this.root === event.target) {
-          this.focusOnMenu();
+    constructor() {
+        this.isShown = false;
+    }
+    onKeydown(event) {
+        event.stopPropagation();
+        if (this.isShown) {
+            switch (event.key) {
+                case 'Escape':
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    this.root.focus();
+                    return;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.focusOnMenu();
+                    return;
+                case 'Enter':
+                    this.hideDelayTimeout = afterNextRenderTimeout(() => {
+                        this.focusOnMenu();
+                    });
+                    return;
+            }
+        }
+    }
+    // Using 'keyup' here because the native click handler behavior
+    // for buttons is triggered on keyup when using the space key
+    onKeyup(event) {
+        event.stopPropagation();
+        switch (event.key) {
+            case ' ':
+                if (this.root === event.target) {
+                    this.focusOnMenu();
+                }
+                else {
+                    this.hideDelayTimeout = afterNextRenderTimeout(() => {
+                        this.root.focus();
+                    });
+                }
+                return;
+        }
+    }
+    onmouseenter() {
+        this.show();
+    }
+    onMouseleave() {
+        this.hide();
+    }
+    onClick(event) {
+        if (event.detail !== 0) {
+            this.hide();
+        }
+        this.root.focus();
+    }
+    onFocusin() {
+        this.show();
+    }
+    onFocusout() {
+        this.hide();
+    }
+    show() {
+        clearTimeout(this.hideDelayTimeout);
+        this.isShown = true;
+    }
+    hide() {
+        if (this.isShown) {
+            this.hideDelayTimeout = setTimeout(() => {
+                this.isShown = false;
+            }, hideDelay);
+        }
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = autoUpdate(this.targetElement, this.menuContentElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
         }
         else {
-          this.hideDelayTimeout = afterNextRenderTimeout(() => {
-            this.root.focus();
-          });
+            this.disconnectedCallback();
         }
-        return;
-    }
-  }
-  onmouseenter() {
-    this.show();
-  }
-  onMouseleave() {
-    this.hide();
-  }
-  onClick(event) {
-    if (event.detail !== 0) {
-      this.hide();
-    }
-    this.root.focus();
-  }
-  onFocusin() {
-    this.show();
-  }
-  onFocusout() {
-    this.hide();
-  }
-  show() {
-    clearTimeout(this.hideDelayTimeout);
-    this.isShown = true;
-  }
-  hide() {
-    if (this.isShown) {
-      this.hideDelayTimeout = setTimeout(() => {
-        this.isShown = false;
-      }, hideDelay);
-    }
-  }
-  runUpdatePosition() {
-    if (this.root.isConnected) {
-      this.cleanupUpdatePosition = autoUpdate(this.targetElement, this.menuContentElement, () => this.updatePosition(), {
-        ancestorScroll: true,
-        elementResize: true,
-        animationFrame: true,
-        ancestorResize: true
-      });
-    }
-    else {
-      this.disconnectedCallback();
-    }
-  }
-  updatePosition() {
-    // This is 13 because this makes the arrow look aligned
-    const arrowLen = 13;
-    const borderWidth = 1;
-    if (this.root) {
-      void computePosition(this.targetElement, this.menuContentElement, {
-        placement: 'bottom-start',
-        strategy: 'fixed',
-        middleware: [
-          offset(16),
-          flip(),
-          shift(),
-          arrow({
-            element: this.arrowElement,
-            padding: 16
-          })
-        ]
-      }).then(({ x, y, middlewareData, placement }) => {
-        var _a;
-        Object.assign(this.menuContentElement.style, {
-          left: `${x}px`,
-          top: `${y}px`
-        });
-        const side = placement.split('-')[0];
-        const staticSide = {
-          top: 'bottom',
-          right: 'left',
-          bottom: 'top',
-          left: 'right'
-        }[side];
-        if (middlewareData.arrow) {
-          const { x, y } = middlewareData.arrow;
-          Object.assign((_a = this.arrowElement) === null || _a === void 0 ? void 0 : _a.style, {
-            left: x != null ? `${x}px` : '',
-            top: y != null ? `${y}px` : '',
-            right: '',
-            bottom: '',
-            [staticSide]: `${-arrowLen / 2 - borderWidth}px`,
-            transform: 'rotate(-45deg)'
-          });
+    }
+    updatePosition() {
+        // This is 13 because this makes the arrow look aligned
+        const arrowLen = 13;
+        const borderWidth = 1;
+        if (this.root) {
+            void computePosition(this.targetElement, this.menuContentElement, {
+                placement: 'bottom-start',
+                strategy: 'fixed',
+                middleware: [
+                    offset(16),
+                    flip(),
+                    shift(),
+                    arrow({
+                        element: this.arrowElement,
+                        padding: 16
+                    })
+                ]
+            }).then(({ x, y, middlewareData, placement }) => {
+                var _a;
+                Object.assign(this.menuContentElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+                const side = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[side];
+                if (middlewareData.arrow) {
+                    const { x, y } = middlewareData.arrow;
+                    Object.assign((_a = this.arrowElement) === null || _a === void 0 ? void 0 : _a.style, {
+                        left: x != null ? `${x}px` : '',
+                        top: y != null ? `${y}px` : '',
+                        right: '',
+                        bottom: '',
+                        [staticSide]: `${-arrowLen / 2 - borderWidth}px`,
+                        transform: 'rotate(-45deg)'
+                    });
+                }
+            });
         }
-      });
-    }
-  }
-  focusOnMenu() {
-    if (this.menuContentElement.contains(document.activeElement)) {
-      return;
-    }
-    const menu = this.root.querySelector('gux-menu');
-    const menuItems = Array.from(menu.children);
-    const nextFocusableElement = menuItems[0];
-    void nextFocusableElement.guxFocus();
-  }
-  componentWillLoad() {
-    trackComponent(this.root);
-  }
-  componentDidLoad() {
-    if (this.isShown) {
-      this.runUpdatePosition();
-    }
-  }
-  componentDidUpdate() {
-    if (this.isShown) {
-      this.runUpdatePosition();
-    }
-    else if (this.cleanupUpdatePosition) {
-      this.cleanupUpdatePosition();
-    }
-  }
-  disconnectedCallback() {
-    if (this.cleanupUpdatePosition) {
-      this.cleanupUpdatePosition();
-    }
-  }
-  render() {
-    return (h(Host, { tabIndex: 0, "aria-haspopup": "true" }, h("span", { ref: el => (this.targetElement = el) }, h("slot", { name: "target" })), h("div", { class: {
-        'gux-flyout-menu-content': true,
-        'gux-shown': this.isShown
-      }, ref: el => (this.menuContentElement = el) }, h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), h("slot", { name: "menu" }))));
-  }
-  static get is() { return "gux-flyout-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gux-flyout-menu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gux-flyout-menu.css"]
-    };
-  }
-  static get states() {
-    return {
-      "isShown": {}
-    };
-  }
-  static get elementRef() { return "root"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "onKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keyup",
-        "method": "onKeyup",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "mouseenter",
-        "method": "onmouseenter",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "mouseleave",
-        "method": "onMouseleave",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "click",
-        "method": "onClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focusin",
-        "method": "onFocusin",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focusout",
-        "method": "onFocusout",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    focusOnMenu() {
+        if (this.menuContentElement.contains(document.activeElement)) {
+            return;
+        }
+        const menu = this.root.querySelector('gux-menu');
+        const menuItems = Array.from(menu.children);
+        const nextFocusableElement = menuItems[0];
+        void nextFocusableElement.guxFocus();
+    }
+    componentWillLoad() {
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        if (this.isShown) {
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.isShown) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e11949e06cf3c44ea6ff5f85ca2eb8dec8866f49', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: '8352ee9dc7120a1ff1a38c1df7b53f6218e20c39', ref: el => (this.targetElement = el) }, h("slot", { key: '43860e5a015cffd72cd840e0884e0be889a2d56a', name: "target" })), h("div", { key: '1838c16e7bbe154a8a7f1d0a1479ceefe4a1b3b6', class: {
+                'gux-flyout-menu-content': true,
+                'gux-shown': this.isShown
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '0768b95dcbf3fa0bd17171866a7718c46a45df72', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), h("slot", { key: 'cece0e808468f83f15290311d7487b03fe18faaa', name: "menu" }))));
+    }
+    static get is() { return "gux-flyout-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-flyout-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-flyout-menu.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isShown": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keyup",
+                "method": "onKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mouseenter",
+                "method": "onmouseenter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "onMouseleave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "onFocusin",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.js

@@ -4,79 +4,79 @@ import { menuNavigation } from "../gux-menu.common";
  * @slot - text
  */
 export class GuxMenuOption {
-  /**
-   * Focus on the components button element
-   */
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocus() {
-    this.buttonElement.focus();
-  }
-  onKeydown(event) {
-    menuNavigation(event, this.root);
-    switch (event.key) {
-      case 'ArrowRight':
-      case 'Enter':
-        event.stopPropagation();
-        break;
+    /**
+     * Focus on the components button element
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocus() {
+        this.buttonElement.focus();
     }
-  }
-  onKeyup(event) {
-    switch (event.key) {
-      case ' ':
-        event.stopPropagation();
-        break;
+    onKeydown(event) {
+        menuNavigation(event, this.root);
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'Enter':
+                event.stopPropagation();
+                break;
+        }
     }
-  }
-  render() {
-    return (h("button", { type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { class: "gux-menu-option-button-text" }, h("slot", null))));
-  }
-  static get is() { return "gux-menu-option"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gux-menu-option.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gux-menu-option.css"]
-    };
-  }
-  static get methods() {
-    return {
-      "guxFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focus on the components button element",
-          "tags": []
+    onKeyup(event) {
+        switch (event.key) {
+            case ' ':
+                event.stopPropagation();
+                break;
         }
-      }
-    };
-  }
-  static get elementRef() { return "root"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "onKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keyup",
-        "method": "onKeyup",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    render() {
+        return (h("button", { key: '81bca1eeb08d4bfae5906d3339775424832c6956', type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: '016c8cc2ceec6c46b1a641bf78879c5d2d673a9d', class: "gux-menu-option-button-text" }, h("slot", { key: 'cb387f50192702632f6c86bb0e35a2cc6beb812d' }))));
+    }
+    static get is() { return "gux-menu-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-menu-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-menu-option.css"]
+        };
+    }
+    static get methods() {
+        return {
+            "guxFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus on the components button element",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keyup",
+                "method": "onKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }