kemet-ui 4.0.0 → 4.0.2

package/dist/elements/tooltip.js

@@ -0,0 +1,654 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/tooltip.ts
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  default: () => KemetTooltip
+});
+module.exports = __toCommonJS(tooltip_exports);
+var import_lit4 = require("lit");
+var import_decorators2 = require("lit/decorators.js");
+
+// src/styles/elements/tooltip.ts
+var import_lit = require("lit");
+var stylesTooltip = import_lit.css`
+  :host {
+    --kemet-tooltip-deg: -45deg;
+    --kemet-tooltip-size: 22px;
+    --kemet-tooltip-border-size: 1px;
+    --kemet-tooltip-rounded-tip: 4px;
+    --kemet-tooltip-background-color: rgb(var(--kemet-color-background));
+    --kemet-tooltip-border-color: rgb(var(--kemet-color-foreground));
+    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);
+  }
+
+  #arrow {
+    content: '';
+    width: var(--kemet-tooltip-size);
+    height: var(--kemet-tooltip-size);
+    position: relative;
+    display: inline-block;
+    background: linear-gradient(
+        var(--kemet-tooltip-deg),
+        transparent calc(var(--kemet-tooltip-size) / 1.5),
+        var(--kemet-tooltip-background-color) 0
+      )
+      no-repeat;
+    background-repeat: no-repeat;
+    transform-origin: center center;
+    border-top-left-radius: var(--kemet-tooltip-rounded-tip);
+    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
+    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
+  }
+
+  [data-popper-placement^="top"] #arrow {
+    top: var(--kemet-tooltip-placement-offset);
+    transform: rotate(225deg);
+
+  }
+
+  [data-popper-placement^="bottom"] #arrow-container {
+    top: 0px;
+  }
+
+  [data-popper-placement^="bottom"] #arrow {
+    top: var(--kemet-tooltip-placement-offset);
+    transform: rotate(45deg);
+  }
+
+  [data-popper-placement^="right"] #arrow {
+    left: var(--kemet-tooltip-placement-offset);
+    transform: rotate(-45deg);
+  }
+
+  [data-popper-placement^="left"] #arrow-container {
+    right: 0;
+  }
+
+  [data-popper-placement^="left"] #arrow {
+    right: var(--kemet-tooltip-placement-offset);
+    transform: rotate(135deg);
+  }
+`;
+
+// src/styles/elements/popper.ts
+var import_lit2 = require("lit");
+var stylesPopper = import_lit2.css`
+  :host {
+    --kemet-popper-width: auto;
+    --kemet-popper-height: auto;
+    --kemet-popper-padding: 1rem;
+    --kemet-popper-border-color: rgb(var(--kemet-color-foreground));
+    --kemet-popper-background-color: rgb(var(--kemet-color-background));
+
+    display: inline-block;
+  }
+
+  #content {
+    visibility: hidden;
+    pointer-events: none;
+    width: var(--kemet-popper-width);
+    height: var(--kemet-popper-height);
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+    transition: all var(--kemet-popover-transition-speed, 0.3s);
+  }
+
+  :host([opened]) #content {
+    visibility: visible;
+    z-index: 9;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  ::slotted([slot="content"]) {
+    padding: var(--kemet-popper-padding);
+    border: 1px solid var(--kemet-popper-border-color);
+    background-color: var(--kemet-popper-background-color);
+  }
+`;
+var stylesPopperFade = import_lit2.css`
+  :host([effect="fade"]) #content {
+    opacity: 0;
+    transition: all var(--kemet-popover-transition-speed, 0.3s);
+  }
+
+  :host([effect="fade"][opened]) #content {
+    opacity: 1;
+  }
+`;
+var stylesPopperScale = import_lit2.css`
+  :host([effect="scale"]) #content {
+    opacity: 0;
+    transition: all var(--kemet-popover-transition-speed, 0.3s);
+  }
+
+  :host([effect="scale"][opened]) #content {
+    opacity: 1;
+  }
+
+  :host([effect="scale"][position="top"]) #content,
+  :host([effect="scale"][position="bottom"]) #content {
+    transform: translateX(-50%) scale(0.7);
+  }
+
+  :host([effect="scale"][position="top"][opened]) #content,
+  :host([effect="scale"][position="bottom"][opened]) #content {
+    transform: translateX(-50%) scale(1);
+  }
+
+  :host([effect="scale"][position="left"]) #content,
+  :host([effect="scale"][position="right"]) #content {
+    transform: translateY(-50%) scale(0.7);
+  }
+
+  :host([effect="scale"][position="left"][opened]) #content,
+  :host([effect="scale"][position="right"][opened]) #content {
+    transform: translateY(-50%) scale(1);
+  }
+`;
+var stylesPopperSlide = import_lit2.css`
+  :host([effect="slide"]) #content {
+    opacity: 0;
+    transition: all var(--kemet-popover-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
+  }
+
+  :host([effect="slide"][opened]) #content {
+    opacity: 1;
+  }
+
+  :host([effect="slide"][position="top"]) #content {
+    transform: translateX(-50%) translateY(20%);
+  }
+
+  :host([effect="slide"][position="top"][opened]) #content {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  :host([effect="slide"][position="bottom"]) #content {
+    transform: translateX(-50%) translateY(-20%);
+  }
+
+  :host([effect="slide"][position="bottom"][opened]) #content {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  :host([effect="slide"][position="right"]) #content {
+    transform: translateY(-50%) translateX(-20%);
+  }
+
+  :host([effect="slide"][position="right"][opened]) #content {
+    transform: translateY(-50%) translateX(0);
+  }
+
+  :host([effect="slide"][position="left"]) #content {
+    transform: translateY(-50%) translateX(20%);
+  }
+
+  :host([effect="slide"][position="left"][opened]) #content {
+    transform: translateY(-50%) translateX(0);
+  }
+`;
+var stylesPopperFall = import_lit2.css`
+  :host([effect="fall"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="fall"]) #content {
+    transform-style: preserve-3d;
+    opacity: 0;
+  }
+
+  :host([effect="fall"][opened]) #content {
+    transition: all var(--kemet-popover-transition-speed, 0.3s) ease-in;
+    opacity: 1;
+  }
+
+  :host([effect="fall"][position="top"]) #content {
+    transform: translateX(-50%) translateZ(600px) rotateX(20deg);
+  }
+
+  :host([effect="fall"][position="top"][opened]) #content {
+    transform: translateX(-50%) translateZ(0px) rotateX(0deg);
+  }
+
+  :host([effect="fall"][position="bottom"]) #content {
+    transform: translateX(-50%) translateZ(600px) rotateX(20deg);
+  }
+
+  :host([effect="fall"][position="bottom"][opened]) #content {
+    transform: translateX(-50%) translateZ(0px) rotateX(0deg);
+  }
+
+  :host([effect="fall"][position="right"]) #content {
+    transform: translateY(-50%) translateZ(600px) rotateX(20deg);
+  }
+
+  :host([effect="fall"][position="right"][opened]) #content {
+    transform: translateY(-50%) translateZ(0px) rotateX(0deg);
+  }
+
+  :host([effect="fall"][position="left"]) #content {
+    transform: translateY(-50%) translateZ(600px) rotateX(20deg);
+  }
+
+  :host([effect="fall"][position="left"][opened]) #content {
+    transform: translateY(-50%) translateZ(0px) rotateX(0deg);
+  }
+`;
+var stylesPopperFlipHorizontal = import_lit2.css`
+  :host([effect="flip-horizontal"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="flip-horizontal"]) #content {
+    transform-style: preserve-3d;
+    transition: all var(--kemet-popover-transition-speed, 0.3s);
+    opacity: 0;
+  }
+
+  :host([effect="flip-horizontal"][opened]) #content {
+    opacity: 1;
+  }
+
+  :host([effect="flip-horizontal"][position="top"]) #content {
+    transform: translateX(-50%) rotateY(-70deg);
+  }
+
+  :host([effect="flip-horizontal"][position="top"][opened]) #content {
+    transform: translateX(-50%) rotateY(0deg);
+  }
+
+  :host([effect="flip-horizontal"][position="bottom"]) #content {
+    transform: translateX(-50%) rotateY(-70deg);
+  }
+
+  :host([effect="flip-horizontal"][position="bottom"][opened]) #content {
+    transform: translateX(-50%) rotateY(0deg);
+  }
+
+  :host([effect="flip-horizontal"][position="right"]) #content {
+    transform: translateY(-50%) rotateY(-70deg);
+  }
+
+  :host([effect="flip-horizontal"][position="right"][opened]) #content {
+    transform: translateY(-50%) rotateY(0deg);
+  }
+
+  :host([effect="flip-horizontal"][position="left"]) #content {
+    transform: translateY(-50%) rotateY(-70deg);
+  }
+
+  :host([effect="flip-horizontal"][position="left"][opened]) #content {
+    transform: translateY(-50%) rotateY(0deg);
+  }
+`;
+var stylesPopperFlipVertical = import_lit2.css`
+  :host([effect="flip-vertical"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="flip-vertical"]) #content {
+    transform-style: preserve-3d;
+    transition: all var(--kemet-popover-transition-speed, 0.3s);
+    opacity: 0;
+  }
+
+  :host([effect="flip-vertical"][opened]) #content {
+    opacity: 1;
+  }
+
+  :host([effect="flip-vertical"][position="top"]) #content {
+    transform: translateX(-50%) rotateX(-70deg);
+  }
+
+  :host([effect="flip-vertical"][position="top"][opened]) #content {
+    transform: translateX(-50%) rotateX(0deg);
+  }
+
+  :host([effect="flip-vertical"][position="bottom"]) #content {
+    transform: translateX(-50%) rotateX(-70deg);
+  }
+
+  :host([effect="flip-vertical"][position="bottom"][opened]) #content {
+    transform: translateX(-50%) rotateX(0deg);
+  }
+
+  :host([effect="flip-vertical"][position="right"]) #content {
+    transform: translateY(-50%) rotateX(-70deg);
+  }
+
+  :host([effect="flip-vertical"][position="right"][opened]) #content {
+    transform: translateY(-50%) rotateX(0deg);
+  }
+
+  :host([effect="flip-vertical"][position="left"]) #content {
+    transform: translateY(-50%) rotateX(-70deg);
+  }
+
+  :host([effect="flip-vertical"][position="left"][opened]) #content {
+    transform: translateY(-50%) rotateX(0deg);
+  }
+`;
+var stylesPopperSign = import_lit2.css`
+  :host([effect="sign"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="sign"]) #content {
+    transform-style: preserve-3d;
+    transition: all var(--kemet-popover-transition-speed, 0.3s);
+    opacity: 0;
+  }
+
+  :host([effect="sign"][opened]) #content {
+    opacity: 1;
+  }
+
+  :host([effect="sign"][position="top"]) #content {
+    transform-origin: 0 100%;
+    transform: translateX(-50%) rotateX(90deg);
+  }
+
+  :host([effect="sign"][position="top"][opened]) #content {
+    transform: translateX(-50%) rotateX(0deg);
+  }
+
+  :host([effect="sign"][position="bottom"]) #content {
+    transform-origin: 100% 0;
+    transform: translateX(-50%) rotateX(90deg);
+  }
+
+  :host([effect="sign"][position="bottom"][opened]) #content {
+    transform: translateX(-50%) rotateX(0deg);
+  }
+
+  :host([effect="sign"][position="right"]) #content {
+    transform-origin: 0 100%;
+    transform: translateY(-50%) rotateY(90deg);
+  }
+
+  :host([effect="sign"][position="right"][opened]) #content {
+    transform: translateY(-50%) rotateY(0deg);
+  }
+
+  :host([effect="sign"][position="left"]) #content {
+    transform-origin: 100% 0;
+    transform: translateY(-50%) rotateY(90deg);
+  }
+
+  :host([effect="sign"][position="left"][opened]) #content {
+    transform: translateY(-50%) rotateY(0deg);
+  }
+`;
+var stylesPopperSuperScaled = import_lit2.css`
+  :host([effect="super-scaled"]) #content {
+    opacity: 0;
+    transition: all var(--kemet-popover-transition-speed, 0.3s);
+  }
+
+  :host([effect="super-scaled"][opened]) #content {
+    opacity: 1;
+  }
+
+  :host([effect="super-scaled"][position="top"]) #content,
+  :host([effect="super-scaled"][position="bottom"]) #content {
+    transform: translateX(-50%) scale(2);
+  }
+
+  :host([effect="super-scaled"][position="top"][opened]) #content,
+  :host([effect="super-scaled"][position="bottom"][opened]) #content {
+    transform: translateX(-50%) scale(1);
+  }
+
+  :host([effect="super-scaled"][position="left"]) #content,
+  :host([effect="super-scaled"][position="right"]) #content {
+    transform: translateY(-50%) scale(2);
+  }
+
+  :host([effect="super-scaled"][position="left"][opened]) #content,
+  :host([effect="super-scaled"][position="right"][opened]) #content {
+    transform: translateY(-50%) scale(1);
+  }
+`;
+
+// src/elements/popper.ts
+var import_lit3 = require("lit");
+var import_decorators = require("lit/decorators.js");
+var import_esm = require("@popperjs/core/dist/esm");
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/popper.ts
+var KemetPopper = class extends import_lit3.LitElement {
+  constructor() {
+    super();
+    this.placement = "top" /* TOP */;
+    this.fireOn = "hover" /* HOVER */;
+    this.strategy = "fixed" /* FIXED */;
+    this.skidding = 0;
+    this.distance = 0;
+    this.addEventListener("kemet-closed-pressed", () => {
+      this.opened = false;
+    });
+  }
+  firstUpdated() {
+    if (this.fireOn === "click") {
+      this.focusableElements.forEach((element) => {
+        element.addEventListener("keydown", (event) => this.handleFocusableDown(event));
+      });
+    }
+  }
+  updated(prevProps) {
+    this.refresh();
+    if (!prevProps.get("opened") && this.opened === true) {
+      emitEvent(this, "kemet-opened", this);
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      emitEvent(this, "kemet-closed", this);
+    }
+  }
+  render() {
+    return import_lit3.html`
+      <div
+        id="trigger"
+        part="trigger"
+        tabIndex="0"
+        @click=${this.fireOn === "click" ? (event) => this.toggle(event) : null}
+        @keyup=${this.fireOn === "click" ? (event) => this.handleKeyUp(event) : null}
+        @mouseover=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @focus=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @mouseout=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+        @blur=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        id="content"
+        @mouseover=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @mouseout=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+      >
+        <slot name="content" @slotchange=${() => this.makePopper()}></slot>
+      </div>
+    `;
+  }
+  refresh() {
+    this.popperInstance?.setOptions({
+      placement: this.placement,
+      strategy: this.strategy,
+      modifiers: [
+        { name: "offset", options: { offset: [this.skidding, this.distance] } }
+      ]
+    });
+  }
+  makePopper() {
+    this.popperInstance = (0, import_esm.createPopper)(this.triggerElement, this.contentElement, {
+      placement: this.placement,
+      strategy: this.strategy,
+      modifiers: [
+        { name: "offset", options: { offset: [this.skidding, this.distance] } }
+      ]
+    });
+  }
+  toggle(event) {
+    const target = event.target;
+    const isSlotTrigger = target.getAttribute("slot") === "trigger";
+    const isPartTrigger = target.getAttribute("part") === "trigger";
+    if (isSlotTrigger || isPartTrigger) {
+      this.opened = !this.opened;
+    }
+  }
+  handleKeyUp(event) {
+    event.preventDefault();
+    if (event.key === "Escape") {
+      this.opened = false;
+    }
+    if (event.key === "Enter" || event.code === "Space") {
+      this.toggle(event);
+    }
+  }
+  handleFocusableDown(event) {
+    const firstFocusable = this.focusableElements[0];
+    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
+    if (event.key === "Tab") {
+      if (event.shiftKey && document.activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      } else if (!event.shiftKey && document.activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus();
+      }
+    }
+  }
+};
+KemetPopper.styles = [stylesPopper];
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetPopper.prototype, "placement", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetPopper.prototype, "opened", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, attribute: "fire-on" })
+], KemetPopper.prototype, "fireOn", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetPopper.prototype, "strategy", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetPopper.prototype, "skidding", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetPopper.prototype, "distance", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetPopper.prototype, "popperInstance", 2);
+__decorateClass([
+  (0, import_decorators.query)("#trigger")
+], KemetPopper.prototype, "triggerElement", 2);
+__decorateClass([
+  (0, import_decorators.query)("#content")
+], KemetPopper.prototype, "contentElement", 2);
+__decorateClass([
+  (0, import_decorators.queryAll)("body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close")
+], KemetPopper.prototype, "focusableElements", 2);
+KemetPopper = __decorateClass([
+  (0, import_decorators.customElement)("kemet-popper")
+], KemetPopper);
+
+// src/elements/tooltip.ts
+var KemetTooltip = class extends KemetPopper {
+  render() {
+    return import_lit4.html`
+      <div
+        id="trigger"
+        part="trigger"
+        tabIndex="0"
+        @click=${this.fireOn === "click" ? (event) => this.toggle(event) : null}
+        @keyup=${this.fireOn === "click" ? (event) => this.handleKeyUp(event) : null}
+        @mouseover=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @focus=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @mouseout=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+        @blur=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        id="content"
+        @mouseover=${this.fireOn !== "click" ? () => {
+      this.opened = true;
+    } : null}
+        @mouseout=${this.fireOn !== "click" ? () => {
+      this.opened = false;
+    } : null}
+      >
+        <slot name="content" @slotchange=${() => {
+      this.makePopper();
+      this.measureContent();
+    }}></slot>
+        <div id="arrow-container" part="arrow-container" data-popper-arrow>
+          <div id="arrow" part="arrow"></div>
+        </div>
+      </div>
+    `;
+  }
+  measureContent() {
+    const height = this.contentElement.offsetHeight;
+    this.contentElement.style.setProperty("--kemet-tooltip-content-height", `${height}px`);
+  }
+};
+KemetTooltip.styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
+KemetTooltip = __decorateClass([
+  (0, import_decorators2.customElement)("kemet-tooltip")
+], KemetTooltip);
+//# sourceMappingURL=tooltip.js.map