@limetech/lime-elements 36.0.0-next.2 → 36.0.0-next.22

package/dist/esm/limel-popover_4.entry.js

@@ -0,0 +1,232 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
+import { c as createRandomString } from './random-string-2246b81e.js';
+import { b as ESCAPE } from './keycodes-9f971b46.js';
+import { z as zipObject } from './zipObject-2bb1968e.js';
+import './_assignValue-fb2bf80a.js';
+import './_defineProperty-2105cb48.js';
+import './_getNative-93d6bfe9.js';
+import './eq-c1c7f528.js';
+import './isObject-c74e273c.js';
+
+/**
+ * Check if an element is a descendant of another
+ *
+ * If the child element is a descendant of a limel-portal, this function will
+ * go back through the portal and check the original tree recursively
+ *
+ * @param {HTMLElement} element the parent element
+ * @param {HTMLElement} child the child element to check
+ * @returns {boolean} `true` if child is a descendant of element, taking
+ * portals into account
+ */
+function portalContains(element, child) {
+  var _a;
+  if (element.contains(child) || ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(child))) {
+    return true;
+  }
+  const parent = findParent(child);
+  if (!parent) {
+    return false;
+  }
+  return portalContains(element, parent);
+}
+function findParent(element) {
+  const portal = element.closest('.limel-portal--container');
+  if (portal) {
+    return portal.portalSource;
+  }
+  const rootNode = element.getRootNode();
+  return rootNode.host;
+}
+
+const popoverCss = ".trigger-anchor{display:inline-block;position:relative}";
+
+const Popover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.close = createEvent(this, "close", 7);
+    /**
+     * True if the content within the popover should be visible
+     */
+    this.open = false;
+    this.handleGlobalKeyPress = (event) => {
+      if (event.key !== ESCAPE) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      this.close.emit();
+    };
+    this.portalId = createRandomString();
+    this.globalClickListener = this.globalClickListener.bind(this);
+  }
+  watchOpen() {
+    this.setupGlobalHandlers();
+  }
+  componentWillLoad() {
+    this.setupGlobalHandlers();
+  }
+  setupGlobalHandlers() {
+    if (this.open) {
+      document.addEventListener('click', this.globalClickListener, {
+        capture: true,
+      });
+      document.addEventListener('keyup', this.handleGlobalKeyPress);
+    }
+    else {
+      document.removeEventListener('click', this.globalClickListener);
+      document.removeEventListener('keyup', this.handleGlobalKeyPress);
+    }
+  }
+  render() {
+    const cssProperties = this.getCssProperties();
+    const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
+    return (h("div", { class: "trigger-anchor" }, h("slot", { name: "trigger" }), h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
+  }
+  globalClickListener(event) {
+    const element = event.target;
+    const clickedInside = portalContains(this.host, element);
+    if (this.open && !clickedInside) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.close.emit();
+    }
+  }
+  getCssProperties() {
+    const propertyNames = [
+      '--popover-surface-width',
+      '--popover-body-background-color',
+      '--popover-border-radius',
+    ];
+    const style = getComputedStyle(this.host);
+    const values = propertyNames.map((property) => {
+      return style.getPropertyValue(property);
+    });
+    return zipObject(propertyNames, values);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["watchOpen"]
+  }; }
+};
+Popover.style = popoverCss;
+
+const popoverSurfaceCss = ".limel-popover-surface{position:relative;display:flex;flex-direction:column;width:var(--popover-surface-width, auto);max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);margin:0 0.25rem;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.75;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, rgb(var(--contrast-100)))}.limel-popover-surface:focus,.limel-popover-surface:focus-within{outline:none}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface:focus-visible{box-shadow:var(--shadow-depth-16-focused)}";
+
+const PopoverSurface = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    this.appendElement();
+  }
+  render() {
+    return h("div", { class: "limel-popover-surface", tabindex: "0" });
+  }
+  appendElement() {
+    const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');
+    Array.from(this.contentCollection).forEach((child) => {
+      if (child.slot === 'trigger') {
+        return;
+      }
+      portalContainer.appendChild(child);
+    });
+  }
+  get host() { return getElement(this); }
+};
+PopoverSurface.style = popoverSurfaceCss;
+
+const tooltipCss = ".trigger-anchor{position:relative}";
+
+const DEFAULT_MAX_LENGTH = 50;
+const Tooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The maximum amount of characters before rendering 'label' and
+     * 'helperLabel' in two rows.
+     */
+    this.maxlength = DEFAULT_MAX_LENGTH;
+    this.showTooltip = () => {
+      const tooltipDelay = 500;
+      this.showTooltipTimeoutHandle = window.setTimeout(() => {
+        this.open = true;
+      }, tooltipDelay);
+    };
+    this.hideTooltip = () => {
+      clearTimeout(this.showTooltipTimeoutHandle);
+      this.open = false;
+    };
+    this.portalId = createRandomString();
+    this.tooltipId = createRandomString();
+  }
+  connectedCallback() {
+    this.setOwnerAriaLabel();
+    this.addListeners();
+  }
+  disconnectedCallback() {
+    this.removeListeners();
+  }
+  render() {
+    const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
+    return (h("div", { class: "trigger-anchor" }, h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
+        'z-index': tooltipZIndex,
+        'pointer-events': 'none',
+      } }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+  }
+  setOwnerAriaLabel() {
+    const owner = this.getOwnerElement();
+    owner === null || owner === void 0 ? void 0 : owner.setAttribute('aria-describedby', this.tooltipId);
+  }
+  addListeners() {
+    const owner = this.getOwnerElement();
+    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseover', this.showTooltip);
+    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseout', this.hideTooltip);
+    owner === null || owner === void 0 ? void 0 : owner.addEventListener('click', this.hideTooltip);
+  }
+  removeListeners() {
+    const owner = this.getOwnerElement();
+    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseover', this.showTooltip);
+    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseout', this.hideTooltip);
+    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('click', this.hideTooltip);
+  }
+  getOwnerElement() {
+    var _a;
+    let element = this.host;
+    do {
+      element = element.parentNode;
+    } while (element &&
+      element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
+      element.nodeType !== Node.DOCUMENT_NODE);
+    return (_a = element) === null || _a === void 0 ? void 0 : _a.getElementById(this.elementId);
+  }
+  get host() { return getElement(this); }
+};
+Tooltip.style = tooltipCss;
+
+const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
+
+const TooltipContent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    let isLabelsTextLong = false;
+    if (this.helperLabel && this.maxlength) {
+      isLabelsTextLong =
+        this.label.length + this.helperLabel.length > this.maxlength;
+    }
+    const props = {};
+    if (this.maxlength) {
+      props.style = {
+        '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',
+      };
+    }
+    return [
+      h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { class: "label" }, this.label), h("div", { class: "helper-label" }, this.helperLabel)),
+    ];
+  }
+};
+TooltipContent.style = tooltipContentCss;
+
+export { Popover as limel_popover, PopoverSurface as limel_popover_surface, Tooltip as limel_tooltip, TooltipContent as limel_tooltip_content };