kemet-ui 4.0.2 → 5.0.0

package/dist/elements/tooltip.js

@@ -1,654 +0,0 @@
-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