scb-wc-test 0.1.1

package/scb-tooltip/scb-tooltip.js

@@ -0,0 +1,329 @@
+import { css as c, LitElement as d, html as h, nothing as f } from "lit";
+import { property as n, customElement as u } from "lit/decorators.js";
+import "../scb-button/scb-button.js";
+import "@material/web/icon/icon.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, i, l, e) => {
+  for (var s = e > 1 ? void 0 : e ? y(i, l) : i, a = t.length - 1, p; a >= 0; a--)
+    (p = t[a]) && (s = (e ? p(i, l, s) : p(s)) || s);
+  return e && s && b(i, l, s), s;
+};
+let o = class extends d {
+  constructor() {
+    super(...arguments), this.variant = "plain", this.arrow = null, this.supportingtext = "", this.label = "", this.trigger = "hover", this.position = "top", this.open = !1, this.delay = 1, this.offset = 0, this._hoverActive = !1, this._clickActive = !1, this._hideTimeout = null, this.handleEventElement = (t) => {
+      var s;
+      const e = (s = t.currentTarget.parentElement.shadowRoot) == null ? void 0 : s.querySelector(".scb-tooltip");
+      e && (t.type === "mouseenter" ? (this._hoverActive = !0, this.openTooltip(e)) : t.type === "mouseleave" ? (this._hoverActive = !1, this._clickActive || (this.closeTooltip(e), this.addHidden(e))) : t.type === "click" && (this._clickActive = !this._clickActive, this._clickActive ? this.openTooltip(e) : this._hoverActive || (this.closeTooltip(e), this.addHidden(e))));
+    };
+  }
+  render() {
+    const t = this.arrow ? h`<svg class="scb-tooltip-arrow" xmlns="http://www.w3.org/2000/svg" width="13" height="6" viewBox="0 0 13 6" fill="none">
+          <path d="M6.5 6L0.5 0H12.5L6.5 6Z" fill="var(--md-sys-color-inverse-surface, #0F0865)" />
+          </svg>` : f;
+    return this.variant === "rich" ? h`
+            <div class="scb-tooltip hidden" role="tooltip" aria-label=${this.label || this.supportingtext}>  
+              <div class="scb-tooltip-text-container">
+                  <label class="scb-tooltip-label">${this.label}</label>
+                  <span class="scb-tooltip-supporting-text">${this.supportingtext}</span>
+                </div>
+                <div class="scb-tooltip-button-container">
+                  <slot name="scb-tooltip-button"></slot>
+                </div>
+          </div>
+          <slot> </slot>  
+          ` : h` 
+            <div class="scb-tooltip hidden">  
+              <div class="scb-tooltip-container">       
+                <span class="scb-tooltip-supporting-text">${this.supportingtext}</span> 
+              </div>
+              ${t} 
+          </div>  
+          <slot> </slot>  
+          `;
+  }
+  firstUpdated() {
+    this.setAnchorName(), this.setDelay(), this.setPosition(), this.setVariant(), this.setOffset(), this.handleEventlistnerClick(), this.handleEventlistnerHover();
+  }
+  setVariant() {
+    this.hasAttribute("variant") && this.style.setProperty("--variant", this.variant);
+  }
+  setAnchorName() {
+    const t = Array.from({ length: 15 }, () => "abcdefghijklmnopqrstuvwxyz"[Math.floor(Math.random() * 26)]).join("");
+    this.style.setProperty("--anchorname", "--" + t);
+  }
+  setDelay() {
+    this.hasAttribute("delay") && this.style.setProperty("--delay", this.delay + "s");
+  }
+  setPosition() {
+    this.hasAttribute("position") && (this.style.setProperty("--position", this.position), this.style.setProperty("--oposition", this.position));
+  }
+  setDefaultPosition() {
+    if (this.hasAttribute("position")) {
+      let t = getComputedStyle(this).getPropertyValue("--oposition");
+      if (getComputedStyle(this).getPropertyValue("--position") !== t) {
+        this.style.setProperty("--position", t), this.setAttribute("position", t);
+        return;
+      }
+    }
+  }
+  setOffset() {
+    let t = getComputedStyle(this).getPropertyValue("--position");
+    this.hasAttribute("offset") && this.hasAttribute("position") && (t === "top" ? this.style.setProperty("--offset", "-" + (this.offset + 8) + "px") : this.style.setProperty("--offset", this.offset + 8 + "px"));
+  }
+  handleEventlistnerClick() {
+    const t = this.children[0];
+    t && t.hasAttribute("scb-tooltip-button") && (this.getAttribute("trigger") === "click" || this.getAttribute("trigger") === "hover-click") && t.addEventListener("click", this.handleEventElement);
+  }
+  handleEventlistnerHover() {
+    const t = this.children[0];
+    t && t.hasAttribute("scb-tooltip-button") && (this.getAttribute("trigger") === "hover" || this.getAttribute("trigger") === "hover-click") && (t.addEventListener("mouseenter", this.handleEventElement), t.addEventListener("mouseleave", this.handleEventElement));
+  }
+  // Ser till att hidden läggs till efter delay (när tooltip är helt stängd) för att inte bli focusable och därför tabbable
+  addHidden(t) {
+    const l = (parseFloat(getComputedStyle(this).getPropertyValue("--delay")) || 1) * 1e3;
+    this._hideTimeout = window.setTimeout(() => {
+      t.classList.add("hidden"), this._hideTimeout = null;
+    }, l);
+  }
+  openTooltip(t) {
+    this.setDefaultPosition(), this.adjustTooltipPosition(t), t.classList.remove("hidden"), this._hideTimeout && (clearTimeout(this._hideTimeout), this._hideTimeout = null);
+  }
+  closeTooltip(t) {
+    t.removeAttribute("open"), t.setAttribute("aria-hidden", "true");
+  }
+  adjustTooltipPosition(t) {
+    t && (this.closeTooltip(t), setTimeout(() => {
+      const i = t.getBoundingClientRect();
+      i.right > window.innerWidth && (this.style.setProperty("--position", "left"), this.setAttribute("position", "left")), i.left < 0 && (this.style.setProperty("--position", "right"), this.setAttribute("position", "right")), i.top < 0 && (this.style.setProperty("--position", "bottom"), this.setAttribute("position", "bottom")), i.bottom > window.innerHeight && (this.style.setProperty("--position", "top"), this.setAttribute("position", "top")), this.setOffset(), t.setAttribute("open", ""), t.setAttribute("aria-hidden", "false");
+    }, 10));
+  }
+};
+o.styles = [
+  c`
+  --anchorname: randomString;
+  --position: top;
+  --variant: plain;
+  --oposition: top;
+  --delay: 1s;
+  --offset: 0px;
+
+:host {
+  position: relative;
+  display: inline-block;
+}
+
+:host {
+  .scb-tooltip {
+    position: absolute;
+    position-anchor: var(--anchorname);
+    position-area: var(--position);
+    min-width: 120px;
+    max-width: 300px;
+    transition: opacity var(--delay) ease-in-out;
+    z-index: 10;
+    opacity:0; 
+
+    .scb-tooltip-supporting-text {
+        font-family: var(--brand-font, Inter);
+        font-size:  14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; 
+        letter-spacing: -0.1px;
+      }
+    }
+
+    .hidden{
+      visibility: hidden;
+    }
+}
+
+::slotted([scb-tooltip-button]) {
+    anchor-name: var(--anchorname);
+    display: inline-flex;
+  } 
+
+/* Plain variant styles */
+  :host([variant="plain"]) .scb-tooltip { 
+    max-width: 184px;
+    transition: opacity var(--delay) ease-in-out;
+    opacity:0;
+    z-index: 10;
+
+    .scb-tooltip-container {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: var(--md-sys-color-inverse-surface);
+      border-radius: 4px; 
+      min-height: 14px; 
+      width: 100%;         
+
+          .scb-tooltip-supporting-text {
+              padding: 4px 8px;
+              color: var(--md-sys-color-inverse-on-surface);          
+          }
+        }
+        .scb-tooltip-arrow {
+          width: 12px;
+          height: 6px;
+          position: absolute;
+          left: 50%;
+          bottom: -5px;
+          transform: translateX(-50%) rotate(0deg);
+        }
+      }
+
+  /* Rich variant styles */
+:host([variant="rich"]) {
+  align-items: flex-start;
+  gap: 4px;
+
+        .scb-tooltip {
+          background: var(--md-sys-color-surface-container, #EBF8FF);
+          box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
+          display: inline-flex;
+          padding-bottom: 8px;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 8px;
+          border-radius: 12px;
+          min-width: 200px;
+          max-width: 300px;
+          opacity: 0;
+          z-index: 10;
+          transition: opacity var(--delay) ease-in-out;
+
+    .scb-tooltip-text-container {
+      display: flex;
+      min-width: 220px;
+      padding: 12px 16px 4px 16px;
+      align-items: flex-start;
+      gap: 4px;
+      flex-direction: column;               
+
+      .scb-tooltip-supporting-text {
+          color: var(--md-sys-color-on-surface-variant, rgba(11, 5, 68, 0.75));
+      }
+
+      .scb-tooltip-label {
+        font-family: var(--brand-font, Inter);
+        font-size:  16px;
+        font-style: normal;
+        font-weight:  600;
+        line-height:  24px;
+        letter-spacing: -0.15px;
+      }
+    }   
+  }
+  
+  .scb-tooltip-button-container {
+    display: flex;
+    padding: 0  8px;
+    align-items: center;
+    gap:  8px;
+    align-self: stretch;
+  }  
+} 
+
+  /* Postion styles */
+  :host([position="left"]) .scb-tooltip {
+    right: calc(anchor( left) + var(--offset));
+    align-self: center;
+  }
+   :host([position="right"]) .scb-tooltip {
+    left: calc(anchor(right) + var(--offset));
+    align-self: center;
+  }
+
+  :host([position="top"]) .scb-tooltip,
+  :host([position="bottom"]) .scb-tooltip {
+    transform: translateY(var(--offset));
+  }
+
+  /* Plain tooltip arrow postions */
+  :host([position="top"][arrow]) .scb-tooltip {§
+    .scb-tooltip-arrow {
+        left: 50%;
+        bottom: -6px;
+        transform: translateX(-50%) rotate(0deg);
+    }
+  }
+
+  :host([position="right"][arrow]) .scb-tooltip {      
+    .scb-tooltip-arrow {
+      left: -9px;
+      top: 50%;
+      transform: translateY(-50%) rotate(90deg);
+    }
+  }
+
+:host([position="bottom"][arrow]) .scb-tooltip {
+    .scb-tooltip-arrow {
+      left: 50%;
+      top: -6px;
+      transform: translateX(-50%) rotate(180deg);
+    }
+}
+
+:host([variant="plain"][position="left"]) .scb-tooltip {   
+  .scb-tooltip-arrow{
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%) translateX(-3px) rotate(270deg);
+  }
+}
+
+:host([variant="plain"][arrow="false"]) .scb-tooltip {
+  .scb-tooltip-arrow {
+    display: none;
+  } 
+}
+
+/* tooltip open states */
+:host([variant="rich"]) .scb-tooltip[open],
+:host([variant="plain"]) .scb-tooltip[open]
+{
+  opacity:1;
+}
+
+:host([variant="plain"][open]) .scb-tooltip,
+:host([variant="rich"][open]) .scb-tooltip{
+  opacity:1;
+  visibility: visible;
+}
+  `
+];
+r([
+  n({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
+r([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "arrow", 2);
+r([
+  n({ type: String, attribute: "supporting-text" })
+], o.prototype, "supportingtext", 2);
+r([
+  n({ type: String })
+], o.prototype, "label", 2);
+r([
+  n({ type: String, reflect: !0 })
+], o.prototype, "trigger", 2);
+r([
+  n({ type: String, reflect: !0 })
+], o.prototype, "position", 2);
+r([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+r([
+  n({ type: Number, reflect: !0 })
+], o.prototype, "delay", 2);
+r([
+  n({ type: Number, reflect: !0 })
+], o.prototype, "offset", 2);
+o = r([
+  u("scb-tooltip")
+], o);
+export {
+  o as ScbTooltip
+};