@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/esm/wm-tab-item_3.entry.js

@@ -1,279 +1,279 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-84a6ae22.js';
-import { d as debounce, g as generateId } from './functions-bb1309d0.js';
+import { d as debounce, g as generateId } from './functions-dc9964aa.js';
 
 const wmTabItemCss = ":host{font-family:inherit;display:inline-block}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tab-item{list-style-type:none;height:100%;display:inline-block}:host .tab-item .tab{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;color:#575195;text-decoration:none;letter-spacing:0.7px;font-size:0.875rem;font-weight:500;opacity:1;position:relative;text-transform:uppercase;display:inline-block;height:3.3333333333em;line-height:3.3333333333em;padding-right:1.5rem;padding-left:1.5rem}:host .tab-item .tab[aria-selected=true]{font-weight:700;opacity:1;background:-webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)) bottom/0 0 no-repeat;background:linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;background-size:calc(100% - 50px) 3px}:host .tab-item .tab[aria-selected=true].dark{color:#fff}:host .tab-item .tab,:host .tab-item .tab:hover,:host .tab-item .tab:active{outline:none}:host .tab-item .tab:focus{outline:none}:host .tab-item .tab.dark:not([aria-selected=true]){opacity:0.8;color:#fff}:host .tab-item .tab.user-is-tabbing:focus:not(:active){outline:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner{border:0}:host .tab-item .tab.user-is-tabbing:focus:not(:active).dark{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host.hide{display:none}";
 
-const TabItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmTabSelected = createEvent(this, "wmTabSelected", 7);
-    this.tabSelected = createEvent(this, "tabSelected", 7);
-    this.keydownOnTabItem = createEvent(this, "keydownOnTabItem", 7);
-    this.tabItemLoaded = createEvent(this, "tabItemLoaded", 7);
-    this.tabClicked = (ev) => {
-      ev.preventDefault();
-      this.wmTabSelected.emit({ tabId: this.tabId });
-      this.tabSelected.emit({ tabId: this.tabId }); // deprecated
-    };
-    this.tabPressed = (ev) => {
-      const key = ev.key;
-      if (key === "Enter" || key === " ") {
-        ev.preventDefault();
-        this.wmTabSelected.emit({ tabId: this.tabId });
-        this.tabSelected.emit({ tabId: this.tabId }); // deprecated
-      }
-      else if (key.includes("Arrow")) {
-        ev.preventDefault();
-        this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
-      }
-    };
-    this.selected = false;
-    this.show = true;
-    this.tabId = "";
-  }
-  get parentTabList() {
-    return this.el.parentElement;
-  }
-  toggleTabbingOn() {
-    this.linkEl && this.linkEl.classList.add("user-is-tabbing");
-  }
-  toggleTabbingOff() {
-    this.linkEl && this.linkEl.classList.remove("user-is-tabbing");
-  }
-  componentDidLoad() {
-    this.tabItemLoaded.emit();
-  }
-  render() {
-    let classes = this.show ? "" : "hide ";
-    classes += this.parentTabList && this.parentTabList.customBackground == "dark" ? "dark" : "";
-    let styles = {};
-    const padding = this.parentTabList && this.parentTabList.customPadding;
-    if (padding) {
-      const bkgSize = parseInt(padding, 10) * 2 || 0;
-      const units = padding.split(/([0-9]+)/).pop();
-      styles = {
-        "padding-left": this.parentTabList.customPadding,
-        "padding-right": this.parentTabList.customPadding,
-        "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
-      };
-    }
-    return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-};
+const TabItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmTabSelected = createEvent(this, "wmTabSelected", 7);
+    this.tabSelected = createEvent(this, "tabSelected", 7);
+    this.keydownOnTabItem = createEvent(this, "keydownOnTabItem", 7);
+    this.tabItemLoaded = createEvent(this, "tabItemLoaded", 7);
+    this.tabClicked = (ev) => {
+      ev.preventDefault();
+      this.wmTabSelected.emit({ tabId: this.tabId });
+      this.tabSelected.emit({ tabId: this.tabId }); // deprecated
+    };
+    this.tabPressed = (ev) => {
+      const key = ev.key;
+      if (key === "Enter" || key === " ") {
+        ev.preventDefault();
+        this.wmTabSelected.emit({ tabId: this.tabId });
+        this.tabSelected.emit({ tabId: this.tabId }); // deprecated
+      }
+      else if (key.includes("Arrow")) {
+        ev.preventDefault();
+        this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
+      }
+    };
+    this.selected = false;
+    this.show = true;
+    this.tabId = "";
+  }
+  get parentTabList() {
+    return this.el.parentElement;
+  }
+  toggleTabbingOn() {
+    this.linkEl && this.linkEl.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.linkEl && this.linkEl.classList.remove("user-is-tabbing");
+  }
+  componentDidLoad() {
+    this.tabItemLoaded.emit();
+  }
+  render() {
+    let classes = this.show ? "" : "hide ";
+    classes += this.parentTabList && this.parentTabList.customBackground == "dark" ? "dark" : "";
+    let styles = {};
+    const padding = this.parentTabList && this.parentTabList.customPadding;
+    if (padding) {
+      const bkgSize = parseInt(padding, 10) * 2 || 0;
+      const units = padding.split(/([0-9]+)/).pop();
+      styles = {
+        "padding-left": this.parentTabList.customPadding,
+        "padding-right": this.parentTabList.customPadding,
+        "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
+      };
+    }
+    return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+};
 TabItem.style = wmTabItemCss;
 
 const wmTabListCss = ":host,wm-tab-list{position:relative;white-space:nowrap;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:block}:host *,wm-tab-list *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";
 
-const TabList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmTabSelected = createEvent(this, "wmTabSelected", 7);
-    this.tabSelected = createEvent(this, "tabSelected", 7);
-    this.debouncedSetLayout = debounce(() => {
-      if (!this.listWidth) {
-        this.setListWidth();
-      }
-      forceUpdate(this.el);
-    }, 250);
-    this.customBackground = undefined;
-    this.customPadding = undefined;
-    this.selectedTab = undefined;
-    this.controllerEnabled = false;
-  }
-  /**
-   * 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
-    }
-    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 selectedTabItem() {
-    return this.tabItems.filter((t) => t.selected)[0];
-  }
-  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.
-       */
-      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);
-      this.panels[0].active = true;
-    }
-    else {
-      this.panels.map((panel) => (panel.active = panel.tabId === id));
-    }
-  }
-  showItems() {
-    this.tabItems.map((t) => (t.show = true));
-  }
-  hideItems() {
-    this.tabItems.map((t) => (t.show = false));
-  }
-  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();
-    };
-  }
-  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]);
-      }
-    }
-    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("aria-controls", panel.id);
-      link.setAttribute("href", `#${panel.id}`);
-    }
-  }
-  removeAttributesOnTab(tab) {
-    const link = this.getLinkEl(tab);
-    if (link) {
-      link.removeAttribute("aria-controls");
-      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);
-    }
-  }
-  handleTabSelected(ev) {
-    if (this.controllerEnabled) {
-      this.setSelected(ev.detail.tabId);
-    }
-  }
-  handleKeydown(ev) {
-    const key = ev.detail.key;
-    const index = this.tabItems.indexOf(ev.detail.tabItem);
-    if (key === "ArrowLeft" || key === "ArrowRight") {
-      this.handleLeftRightArrow(index, key);
-    }
-  }
-  handleLeftRightArrow(index, key) {
-    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();
-  }
-  /**
-   * 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()));
-    }
-    else {
-      this.showItems();
-      let margins = {};
-      if (this.customPadding) {
-        margins = {
-          "margin-left": "-" + this.customPadding,
-        };
-      }
-      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.wmTabSelected.emit({ tabId: t.tabId });
-        this.tabSelected.emit({ tabId: t.tabId }); // deprecated
-      } }, t.textContent)));
-  }
-  render() {
-    return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "selectedTab": ["setSelected"]
-  }; }
-};
+const TabList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmTabSelected = createEvent(this, "wmTabSelected", 7);
+    this.tabSelected = createEvent(this, "tabSelected", 7);
+    this.debouncedSetLayout = debounce(() => {
+      if (!this.listWidth) {
+        this.setListWidth();
+      }
+      forceUpdate(this.el);
+    }, 250);
+    this.customBackground = undefined;
+    this.customPadding = undefined;
+    this.selectedTab = undefined;
+    this.controllerEnabled = false;
+  }
+  /**
+   * 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
+    }
+    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 selectedTabItem() {
+    return this.tabItems.filter((t) => t.selected)[0];
+  }
+  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.
+       */
+      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);
+      this.panels[0].active = true;
+    }
+    else {
+      this.panels.map((panel) => (panel.active = panel.tabId === id));
+    }
+  }
+  showItems() {
+    this.tabItems.map((t) => (t.show = true));
+  }
+  hideItems() {
+    this.tabItems.map((t) => (t.show = false));
+  }
+  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();
+    };
+  }
+  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]);
+      }
+    }
+    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("aria-controls", panel.id);
+      link.setAttribute("href", `#${panel.id}`);
+    }
+  }
+  removeAttributesOnTab(tab) {
+    const link = this.getLinkEl(tab);
+    if (link) {
+      link.removeAttribute("aria-controls");
+      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);
+    }
+  }
+  handleTabSelected(ev) {
+    if (this.controllerEnabled) {
+      this.setSelected(ev.detail.tabId);
+    }
+  }
+  handleKeydown(ev) {
+    const key = ev.detail.key;
+    const index = this.tabItems.indexOf(ev.detail.tabItem);
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      this.handleLeftRightArrow(index, key);
+    }
+  }
+  handleLeftRightArrow(index, key) {
+    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();
+  }
+  /**
+   * 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()));
+    }
+    else {
+      this.showItems();
+      let margins = {};
+      if (this.customPadding) {
+        margins = {
+          "margin-left": "-" + this.customPadding,
+        };
+      }
+      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.wmTabSelected.emit({ tabId: t.tabId });
+        this.tabSelected.emit({ tabId: t.tabId }); // deprecated
+      } }, t.textContent)));
+  }
+  render() {
+    return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "selectedTab": ["setSelected"]
+  }; }
+};
 TabList.style = wmTabListCss;
 
 const wmTabPanelCss = "wm-tab-panel{visibility:inherit}wm-tab-panel.tab-hidden{display:none}wm-tab-panel:active{outline:none}wm-tab-panel:focus{outline:none}wm-tab-panel.user-is-tabbing:focus{outline:-webkit-focus-ring-color auto 5px}";
 
-const TabPanel = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabPanelLoaded = createEvent(this, "tabPanelLoaded", 7);
-    this.active = false;
-    this.tabId = "";
-  }
-  componentWillLoad() {
-    !this.el.id && this.el.setAttribute("id", generateId());
-  }
-  componentDidLoad() {
-    this.tabPanelLoaded.emit({ tabId: this.tabId });
-  }
-  toggleTabbingOn() {
-    this.el.classList.add("user-is-tabbing");
-  }
-  toggleTabbingOff() {
-    this.el.classList.remove("user-is-tabbing");
-  }
-  render() {
-    return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
-  }
-  get el() { return getElement(this); }
-};
+const TabPanel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabPanelLoaded = createEvent(this, "tabPanelLoaded", 7);
+    this.active = false;
+    this.tabId = "";
+  }
+  componentWillLoad() {
+    !this.el.id && this.el.setAttribute("id", generateId());
+  }
+  componentDidLoad() {
+    this.tabPanelLoaded.emit({ tabId: this.tabId });
+  }
+  toggleTabbingOn() {
+    this.el.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.el.classList.remove("user-is-tabbing");
+  }
+  render() {
+    return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
+  }
+  get el() { return getElement(this); }
+};
 TabPanel.style = wmTabPanelCss;
 
 export { TabItem as wm_tab_item, TabList as wm_tab_list, TabPanel as wm_tab_panel };