@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -1,315 +1,357 @@
-import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event } from "@stencil/core";
-import { debounce } from "../../../global/functions";
+import { h, Host } from "@stencil/core";
+import { debounce, intl } from "../../../global/functions";
 export class TabList {
-  constructor() {
-    /**
-     * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.
-     */
-    this.controllerEnabled = false;
-    this.getSelectedTabItem = () => this.tabItems.filter((t) => t.selected)[0];
-    this.debouncedSetLayout = debounce(() => {
-      if (!this.listWidth) {
-        this.setListWidth();
-      }
-      forceUpdate(this.el);
-    }, 250);
-  }
-  /**
-   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.
-   */
-  get menuLayout() {
-    if (this.listWidth) {
-      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul
+    constructor() {
+        this.debouncedUpdateContainerState = debounce(() => {
+            this.updateContainerFade();
+            this.updateArrowVisibility();
+        }, 16);
+        this.customBackground = undefined;
+        this.selectedTab = undefined;
+        this.announcement = "";
+        this.containerFadeLeft = false;
+        this.containerFadeRight = false;
+        this.scrollArrowsVisible = false;
     }
-    else {
-      return false; // in case listWidth couldn't get computed, we render regular tabs
+    get tabItems() {
+        return Array.from(this.el.querySelectorAll("wm-tab-item"));
     }
-  }
-  get tabItems() {
-    return Array.from(this.el.querySelectorAll("wm-tab-item"));
-  }
-  getLinkEl(tab) {
-    return tab.shadowRoot.querySelector("a");
-  }
-  get panels() {
-    const allPanels = Array.from(document.querySelectorAll("wm-tab-panel"));
-    const tabIds = this.tabItems.map((t) => t.tabId);
-    return allPanels.filter((p) => tabIds.includes(p.tabId));
-  }
-  getPanel(tabId) {
-    return this.panels.find((p) => p.tabId === tabId);
-  }
-  setListWidth() {
-    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);
-    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value
-  }
-  setSelected(id) {
-    this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
-    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
-    if (singlePanel) {
-      /**
-       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.
-       */
-      const selected = this.getSelectedTabItem();
-      this.setAttributesOnPanel(this.panels[0], selected);
-      this.panels[0].active = true;
+    get selectedTabItem() {
+        return this.tabItems.filter((t) => t.selected)[0];
     }
-    else {
-      this.panels.map((panel) => (panel.active = panel.tabId === id));
+    getLinkEl(tab) {
+        return tab.shadowRoot.querySelector("a");
     }
-  }
-  showItems() {
-    this.tabItems.map((t) => (t.show = true));
-  }
-  hideItems() {
-    this.tabItems.map((t) => (t.show = false));
-  }
-  componentWillLoad() {
-    // @ts-ignore
-    this.el.focus = function () {
-      const items = Array.from(this.querySelectorAll("wm-tab-item"));
-      const selectedItem = items.filter((t) => t.selected)[0];
-      selectedItem && selectedItem.focus();
-    };
-  }
-  componentDidLoad() {
-    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint
-    const selectedTab = this.selectedTab || this.tabItems[0].tabId;
-    this.setSelected(selectedTab);
-  }
-  tabItemLoaded(ev) {
-    this.setAriaOnPanelAndTab(ev.target);
-  }
-  setAriaOnPanelAndTab(tab) {
-    const panel = this.getPanel(tab.tabId);
-    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
-    if (!panel) {
-      if (this.panels.length === 1) {
-        this.setAttributesOnTab(tab, this.panels[0]);
-      }
+    get panels() {
+        const allPanels = Array.from(document.querySelectorAll("wm-tab-panel"));
+        const tabIds = this.tabItems.map((t) => t.tabId);
+        return allPanels.filter((p) => tabIds.includes(p.tabId));
     }
-    else {
-      // Otherwise, set attributes on each tab item that loads and its associated panel
-      this.setAttributesOnPanel(panel, tab);
-      this.setAttributesOnTab(tab, panel);
+    setSelected(id) {
+        this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
+        const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
+        if (singlePanel) {
+            /**
+             * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.
+             */
+            this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);
+            this.panels[0].active = true;
+        }
+        else {
+            this.panels.map((panel) => (panel.active = panel.tabId === id));
+        }
+        this.handleTabFocused(this.selectedTabItem);
     }
-  }
-  setAttributesOnTab(tab, panel) {
-    const link = this.getLinkEl(tab);
-    if (link) {
-      link.setAttribute("aria-controls", panel.id);
-      link.setAttribute("href", `#${panel.id}`);
+    componentWillLoad() {
+        this.el.focus = () => {
+            // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item
+            this.selectedTabItem && this.selectedTabItem.focus({ preventScroll: true });
+        };
     }
-  }
-  removeAttributesOnTab(tab) {
-    const link = this.getLinkEl(tab);
-    if (link) {
-      link.removeAttribute("aria-controls");
-      link.removeAttribute("href");
+    componentDidLoad() {
+        const selectedTab = this.selectedTab || this.tabItems[0].tabId;
+        this.setSelected(selectedTab);
+        this.updateArrowVisibility();
+        this.tabContainerEl.addEventListener("scroll", this.debouncedUpdateContainerState);
+        const resizeObserver = new ResizeObserver(() => this.debouncedUpdateContainerState());
+        resizeObserver.observe(this.el);
+        requestAnimationFrame(() => {
+            // Wait for layout to complete before measuring and scrolling initial tab into view
+            this.handleTabFocused(this.selectedTabItem);
+        });
     }
-  }
-  setAttributesOnPanel(panel, tab) {
-    const link = this.getLinkEl(tab);
-    if (link) {
-      panel.setAttribute("aria-labelledby", link.id);
-      panel.setAttribute("tab-id", tab.tabId);
+    tabItemLoaded(ev) {
+        this.setAriaOnPanelAndTab(ev.target);
     }
-  }
-  handleTabSelected(ev) {
-    if (this.controllerEnabled) {
-      this.setSelected(ev.detail.tabId);
+    wmTabFocused(ev) {
+        this.handleTabFocused(ev.detail.tabItem);
     }
-  }
-  handleKeydown(ev) {
-    const tabItem = ev.detail.tabItem;
-    const key = ev.detail.key;
-    const index = this.tabItems.indexOf(tabItem);
-    if (key === "ArrowLeft" || key === "ArrowRight") {
-      this.handleLeftRightArrow(index, key);
+    setAriaOnPanelAndTab(tab) {
+        const panel = this.panels.find((p) => p.tabId === tab.tabId);
+        // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
+        if (!panel) {
+            if (this.panels.length === 1) {
+                this.setAttributesOnTab(tab, this.panels[0]);
+            }
+        }
+        else {
+            // Otherwise, set attributes on each tab item that loads and its associated panel
+            this.setAttributesOnPanel(panel, tab);
+            this.setAttributesOnTab(tab, panel);
+        }
+    }
+    setAttributesOnTab(tab, panel) {
+        const link = this.getLinkEl(tab);
+        if (link) {
+            link.setAttribute("href", `#${panel.id}`);
+        }
+    }
+    removeAttributesOnTab(tab) {
+        const link = this.getLinkEl(tab);
+        if (link) {
+            link.removeAttribute("href");
+        }
+    }
+    setAttributesOnPanel(panel, tab) {
+        const link = this.getLinkEl(tab);
+        if (link) {
+            panel.setAttribute("aria-labelledby", link.id);
+            panel.setAttribute("tab-id", tab.tabId);
+        }
+    }
+    handleKeydown(ev) {
+        const key = ev.detail.key;
+        let index = this.tabItems.indexOf(ev.detail.tabItem);
+        // focusing panel on down arrow
+        if (key === "ArrowDown") {
+            const activePanel = this.panels.filter((p) => p.active)[0];
+            activePanel && activePanel.focus();
+        }
+        else if (key === "ArrowLeft" || key === "ArrowRight") {
+            // focusing prev/next tab item on right/left arrow
+            if (key) {
+                index = key === "ArrowLeft" ? index - 1 : index + 1;
+            }
+            if (index < 0) {
+                index = this.tabItems.length - 1;
+            }
+            else if (index === this.tabItems.length) {
+                index = 0;
+            }
+            const tabToFocus = this.tabItems[index];
+            this.getLinkEl(tabToFocus).focus({ preventScroll: true });
+        }
+    }
+    handleTabFocused(tabItem, alignment = "auto") {
+        // Calculate and apply scroll position
+        const targetScrollLeft = this.calculateScrollPositionForTab(tabItem, alignment);
+        this.tabContainerEl.scrollTo({ left: targetScrollLeft, behavior: "smooth" });
+    }
+    calculateScrollPositionForTab(tabItem, alignment = "auto") {
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerScrollLeft = this.tabContainerEl.scrollLeft;
+        const tabRect = tabItem.getBoundingClientRect();
+        const tabLeft = containerScrollLeft + (tabRect.left - containerRect.left);
+        const tabRight = tabLeft + tabRect.width;
+        // Explicit alignment
+        if (alignment === "left") {
+            return tabLeft; // Snap to left edge
+        }
+        if (alignment === "right") {
+            return Math.max(0, tabRight - containerRect.width); // Snap to right edge
+        }
+        // Auto alignment
+        const firstTab = this.tabItems[0];
+        const lastTab = this.tabItems[this.tabItems.length - 1];
+        if (tabItem === firstTab) {
+            return 0;
+        }
+        if (tabItem === lastTab) {
+            return Math.max(0, this.tabContainerEl.scrollWidth - containerRect.width);
+        }
+        if (tabLeft < containerScrollLeft) {
+            return tabLeft; // Left edge cut off, align left
+        }
+        if (tabRight > containerScrollLeft + containerRect.width) {
+            return tabRight - containerRect.width; // Right edge cut off, align right
+        }
+        return containerScrollLeft; // Fully visible, no scroll needed
     }
-    if (key === "ArrowDown" || key === "ArrowUp") {
-      this.handleUpDownArrow(key);
+    updateContainerFade() {
+        const tolerance = 1; // 1px tolerance for floating-point precision
+        // Check if there's content scrolled out of view on each side
+        let shouldFadeLeft = this.tabContainerEl.scrollLeft > tolerance;
+        let shouldFadeRight = this.tabContainerEl.scrollLeft + this.tabContainerEl.clientWidth < this.tabContainerEl.scrollWidth - tolerance;
+        const focusedTab = this.tabItems.find((tab) => tab.matches(":focus-within"));
+        if (focusedTab) {
+            const containerRect = this.tabContainerEl.getBoundingClientRect();
+            const tabRect = focusedTab.getBoundingClientRect();
+            const isAtOrOverlappingLeft = tabRect.left <= containerRect.left + tolerance;
+            const isAtOrOverlappingRight = tabRect.right >= containerRect.right - tolerance;
+            if (isAtOrOverlappingLeft) {
+                shouldFadeLeft = false; // Don't fade left if focused tab is at/beyond left edge
+            }
+            if (isAtOrOverlappingRight) {
+                shouldFadeRight = false; // Don't fade right if focused tab is at/beyond right edge
+            }
+        }
+        this.containerFadeLeft = shouldFadeLeft;
+        this.containerFadeRight = shouldFadeRight;
     }
-  }
-  handleLeftRightArrow(index, key) {
-    if (key) {
-      index = key === "ArrowLeft" ? index - 1 : index + 1;
+    updateArrowVisibility() {
+        const leftArrowEl = this.el.shadowRoot.querySelector(".left-arrow");
+        const rightArrowEl = this.el.shadowRoot.querySelector(".right-arrow");
+        const isScrollable = this.tabContainerEl.scrollWidth > this.tabContainerEl.clientWidth;
+        this.scrollArrowsVisible = isScrollable;
+        requestAnimationFrame(() => {
+            // Let arrows render before checking if they should be disabled
+            if (this.scrollArrowsVisible) {
+                const tolerance = 1; // 1px tolerance for floating-point precision
+                const canScrollLeft = this.tabContainerEl.scrollLeft > tolerance;
+                const canScrollRight = this.tabContainerEl.scrollLeft + this.tabContainerEl.clientWidth <
+                    this.tabContainerEl.scrollWidth - tolerance;
+                leftArrowEl.classList.toggle("disabled", !canScrollLeft);
+                rightArrowEl.classList.toggle("disabled", !canScrollRight);
+            }
+        });
     }
-    if (index < 0) {
-      index = this.tabItems.length - 1;
+    handleLeftArrowClick(ev) {
+        const buttonEl = ev.target;
+        if (buttonEl.classList.contains("disabled")) {
+            // If the arrow is disabled, take no action and announce reason
+            this.announce(intl.formatMessage({
+                id: "tabs.cannotScrollLeft",
+                defaultMessage: "No more tabs to the left",
+                description: "Announcement for button scrolling tab group.",
+            }));
+            return;
+        }
+        // Find the first tab that's partially or completely obscured on the left
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerLeft = containerRect.left;
+        let tabToFocus = null;
+        const reversedTabItems = this.tabItems.reverse();
+        reversedTabItems.forEach((tab) => {
+            if (!tabToFocus) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.left < containerLeft - 1) {
+                    tabToFocus = tab;
+                }
+            }
+        });
+        if (tabToFocus) {
+            this.handleTabFocused(tabToFocus, "right"); // Snap to right edge for page-scroll behavior
+        }
     }
-    else if (index === this.tabItems.length) {
-      index = 0;
+    handleRightArrowClick(ev) {
+        const buttonEl = ev.target;
+        if (buttonEl.classList.contains("disabled")) {
+            this.announce(intl.formatMessage({
+                id: "tabs.cannotScrollRight",
+                defaultMessage: "No more tabs to the right",
+                description: "Announcement for button scrolling tab group.",
+            }));
+            return;
+        }
+        // Find the first tab that's partially or completely obscured on the right
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerRight = containerRect.right;
+        let tabToFocus = null;
+        this.tabItems.forEach((tab) => {
+            if (!tabToFocus) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.right > containerRight + 1) {
+                    tabToFocus = tab;
+                }
+            }
+        });
+        if (tabToFocus) {
+            this.handleTabFocused(tabToFocus, "left"); // Snap to left edge for page-scroll behavior
+        }
     }
-    const tabToFocus = this.tabItems[index];
-    this.getLinkEl(tabToFocus).focus();
-  }
-  handleUpDownArrow(key) {
-    if (key === "ArrowDown") {
-      // Focus panel when arrow down is pressed
-      if (this.selectedTab) {
-        const tabPanel = this.getPanel(this.selectedTab); //Find the currently displayed tab panel
-        if (tabPanel) {
-          tabPanel.focus();
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
         }
-      }
+        this.announcement = message;
+    }
+    render() {
+        return (h(Host, { key: 'b9ad28e5f95356c3563be850e2c138c9ef15785f' }, h("div", { key: 'cefebd37c1de1c70a6a8b458398ebde182800658', class: "component-wrapper" }, h("wm-button", { key: 'ba39a280147b31c044c587d4cc1e1459a6566ca8', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+                id: "tabs.showPreviousTabs",
+                defaultMessage: "Show previous tabs",
+                description: "Tooltip for button scrolling tab group.",
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '2718d4671d8f901415646d5d89476a5b0a2646d0', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '81a1dbdbb0c81c942c4e404e92c1dcf573a30067' })), h("wm-button", { key: '4f928cc980a030abf23fba8fa061bcf034350f1a', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+                id: "tabs.showNextTabs",
+                defaultMessage: "Show next tabs",
+                description: "Tooltip for button scrolling tab group.",
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: '374a648cc8e379ef70ac7d037ee17f2bae7dd685', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+    }
+    static get is() { return "wm-tab-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-tab-list.scss"]
+        };
     }
-  }
-  /**
-   * Change layout if parent size drops below tab list width
-   */
-  setLayout() {
-    this.debouncedSetLayout();
-  }
-  renderMenuOrTabs() {
-    if (this.menuLayout) {
-      this.hideItems();
-      return (h("wm-select", { label: "Tab Selection", "label-position": "none" }, this.renderOptions()));
+    static get styleUrls() {
+        return {
+            "$": ["wm-tab-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dark\" | \"\"",
+                    "resolved": "\"\" | \"dark\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "custom-background",
+                "reflect": false
+            },
+            "selectedTab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected-tab",
+                "reflect": false
+            }
+        };
     }
-    else {
-      this.showItems();
-      let margins = {};
-      if (this.customPadding) {
-        margins = {
-          "margin-left": "-" + this.customPadding,
+    static get states() {
+        return {
+            "announcement": {},
+            "containerFadeLeft": {},
+            "containerFadeRight": {},
+            "scrollArrowsVisible": {}
         };
-      }
-      return (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" },
-        h("slot", null)));
     }
-  }
-  renderOptions() {
-    return this.tabItems.map((t) => (h("wm-option", { id: `tab-link-${t.tabId}`, selected: t.tabId === this.selectedTab, onClick: (ev) => {
-        ev.preventDefault();
-        this.tabSelected.emit({ tabId: t.tabId });
-      } }, t.textContent)));
-  }
-  render() {
-    return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
-  }
-  static get is() { return "wm-tab-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-tab-list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-tab-list.css"]
-  }; }
-  static get properties() { return {
-    "customBackground": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"dark\" | \"\"",
-        "resolved": "\"\" | \"dark\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-background",
-      "reflect": false
-    },
-    "customPadding": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-padding",
-      "reflect": false
-    },
-    "selectedTab": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected-tab",
-      "reflect": false
-    },
-    "controllerEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched."
-      },
-      "attribute": "controller-enabled",
-      "reflect": false,
-      "defaultValue": "false"
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedTab",
+                "methodName": "setSelected"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "tabItemLoaded",
+                "method": "tabItemLoaded",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmIntTabFocused",
+                "method": "wmTabFocused",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydownOnTabItem",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
     }
-  }; }
-  static get events() { return [{
-      "method": "tabSelected",
-      "name": "tabSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted by wm-select options when tabs have the menu format"
-      },
-      "complexType": {
-        "original": "{ tabId: string }",
-        "resolved": "{ tabId: string; }",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "selectedTab",
-      "methodName": "setSelected"
-    }]; }
-  static get listeners() { return [{
-      "name": "tabItemLoaded",
-      "method": "tabItemLoaded",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "tabSelected",
-      "method": "handleTabSelected",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydownOnTabItem",
-      "method": "handleKeydown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "setLayout",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
 }