@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

package/dist/ripple/wm-tab-item.entry.js

@@ -1,78 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-20b65f86.js';
-
-const wmTabItemCss = ":host{font-family:inherit;display:inline-block}:host *{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: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.hide{display:none}";
-
-const TabItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabSelected = createEvent(this, "tabSelected", 7);
-    this.keydownOnTabItem = createEvent(this, "keydownOnTabItem", 7);
-    this.tabItemLoaded = createEvent(this, "tabItemLoaded", 7);
-    /**
-     * Indicates whether the tab is currently active
-     */
-    this.selected = false;
-    this.show = true;
-    /**
-     * The id of the tab, linked to a tab panel.
-     */
-    this.tabId = "";
-    this.tabClicked = (ev) => {
-      ev.preventDefault();
-      this.tabSelected.emit({ tabId: this.tabId });
-    };
-    this.tabPressed = (ev) => {
-      const key = ev.key;
-      if (key === "Enter" || key === " ") {
-        ev.preventDefault();
-        this.tabSelected.emit({ tabId: this.tabId });
-      }
-      else if (key === "Tab") {
-        this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
-      }
-      else {
-        ev.preventDefault();
-        this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
-      }
-    };
-  }
-  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");
-  }
-  componentWillLoad() {
-    // @ts-ignore
-    this.el.focus = function () {
-      const linkEl = this.shadowRoot.querySelector("a");
-      linkEl && linkEl.focus();
-    };
-  }
-  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)))));
-  }
-  get el() { return getElement(this); }
-};
-TabItem.style = wmTabItemCss;
-
-export { TabItem as wm_tab_item };

package/dist/ripple/wm-tab-panel.entry.js

@@ -1,38 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-20b65f86.js';
-import { g as generateId } from './functions-316c1b23.js';
-
-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);
-    /**
-     * Indicates whether the panel should be displayed or not.
-     */
-    this.active = false;
-    /**
-     * The id of the panel, linked to a tabItem in the tablist.
-     */
-    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", "aria-hidden": this.active ? "false" : "true", class: { "tab-hidden": !this.active }, onBlur: () => (this.el.tabIndex = -1), tabIndex: -1 }));
-  }
-  get el() { return getElement(this); }
-};
-TabPanel.style = wmTabPanelCss;
-
-export { TabPanel as wm_tab_panel };