@limetech/lime-elements 38.23.5 → 38.24.1

package/dist/esm/limel-linear-progress.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-2714248e.js';
-import { t as translate } from './translations-0c3c0779.js';
+import { t as translate } from './translations-91c611da.js';
 
 const linearProgressCss = ":host(limel-linear-progress){isolation:isolate;position:relative;overflow:hidden;display:flex;width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--background-color, rgb(var(--contrast-800), 0.5))}.progress{height:100%;width:var(--percentage, 0%);border-radius:0.25rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress{background-color:transparent;width:100%}:host(limel-linear-progress[indeterminate]) .progress:before,:host(limel-linear-progress[indeterminate]) .progress:after{will-change:left, right, opacity;content:\"\";position:absolute;inset:0;height:100%;border-radius:0.25rem;opacity:0;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress:before{animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}:host(limel-linear-progress[indeterminate]) .progress:after{animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 1.15s}@keyframes indeterminate{0%{left:-35%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:100%;right:-90%}100%{left:100%;right:-90%;opacity:0}}@keyframes indeterminate-short{0%{left:-200%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:107%;right:-8%}100%{left:107%;right:-8%;opacity:0}}";
 

package/dist/esm/{limel-portal_2.entry.js → limel-portal_3.entry.js}

@@ -1,4 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-2714248e.js';
+import { c as createRandomString } from './random-string-355331d3.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -262,7 +263,7 @@ function contains(parent, child) {
   return false;
 }
 
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 
@@ -295,7 +296,7 @@ function getParentNode(element) {
 
 function getTrueOffsetParent(element) {
   if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
-  getComputedStyle(element).position === 'fixed') {
+  getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
 
@@ -310,7 +311,7 @@ function getContainingBlock(element) {
 
   if (isIE && isHTMLElement(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
-    var elementCss = getComputedStyle(element);
+    var elementCss = getComputedStyle$1(element);
 
     if (elementCss.position === 'fixed') {
       return null;
@@ -324,7 +325,7 @@ function getContainingBlock(element) {
   }
 
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
-    var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
+    var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
     // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
 
@@ -344,11 +345,11 @@ function getOffsetParent(element) {
   var window = getWindow(element);
   var offsetParent = getTrueOffsetParent(element);
 
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
     offsetParent = getTrueOffsetParent(offsetParent);
   }
 
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static')) {
     return window;
   }
 
@@ -533,7 +534,7 @@ function mapToStyles(_ref2) {
     if (offsetParent === getWindow(popper)) {
       offsetParent = getDocumentElement(popper);
 
-      if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
+      if (getComputedStyle$1(offsetParent).position !== 'static' && position === 'absolute') {
         heightProp = 'scrollHeight';
         widthProp = 'scrollWidth';
       }
@@ -765,7 +766,7 @@ function getDocumentRect(element) {
   var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
   var y = -winScroll.scrollTop;
 
-  if (getComputedStyle(body || html).direction === 'rtl') {
+  if (getComputedStyle$1(body || html).direction === 'rtl') {
     x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
   }
 
@@ -779,7 +780,7 @@ function getDocumentRect(element) {
 
 function isScrollParent(element) {
   // Firefox wants us to check `-x` and `-y` variations as well
-  var _getComputedStyle = getComputedStyle(element),
+  var _getComputedStyle = getComputedStyle$1(element),
       overflow = _getComputedStyle.overflow,
       overflowX = _getComputedStyle.overflowX,
       overflowY = _getComputedStyle.overflowY;
@@ -854,7 +855,7 @@ function getClientRectFromMixedType(element, clippingParent, strategy) {
 
 function getClippingParents(element) {
   var clippingParents = listScrollParents(getParentNode(element));
-  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
+  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle$1(element).position) >= 0;
   var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
 
   if (!isElement(clipperElement)) {
@@ -2045,6 +2046,100 @@ const Portal = class {
 };
 Portal.style = portalCss;
 
+/**
+ *
+ * @param id
+ * @param startingPoint
+ */
+function getOwnerElement(id, startingPoint) {
+  let element = startingPoint;
+  do {
+    element = element.parentNode;
+  } while (element &&
+    element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
+    element.nodeType !== Node.DOCUMENT_NODE);
+  return element === null || element === void 0 ? void 0 : element.getElementById(id);
+}
+
+const DEFAULT_DELAY_FOR_SHOWING = 500;
+class TooltipTimer {
+  constructor(showCallback, hideCallback, delayForShowing = DEFAULT_DELAY_FOR_SHOWING) {
+    this.timerHandle = null;
+    this.showCallback = showCallback;
+    this.hideCallback = hideCallback;
+    this.delayForShowing = delayForShowing;
+  }
+  showAfterDelay() {
+    if (!this.timerHandle) {
+      this.timerHandle = setTimeout(this.showCallback, this.delayForShowing);
+    }
+  }
+  hide() {
+    clearTimeout(this.timerHandle);
+    this.timerHandle = null;
+    this.hideCallback();
+  }
+}
+
+const tooltipCss = ":host(limel-tooltip){position:absolute;pointer-events:none}";
+
+const DEFAULT_MAX_LENGTH = 50;
+const Tooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showTooltip = () => {
+      this.tooltipTimer.showAfterDelay();
+    };
+    this.hideTooltip = () => {
+      this.tooltipTimer.hide();
+    };
+    this.elementId = undefined;
+    this.label = undefined;
+    this.helperLabel = undefined;
+    this.maxlength = DEFAULT_MAX_LENGTH;
+    this.openDirection = 'top';
+    this.open = undefined;
+    this.portalId = createRandomString();
+    this.tooltipId = createRandomString();
+    this.tooltipTimer = new TooltipTimer(() => (this.open = true), () => (this.open = false));
+  }
+  connectedCallback() {
+    this.ownerElement = getOwnerElement(this.elementId, this.host);
+    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: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
+        'z-index': tooltipZIndex,
+        'pointer-events': 'none',
+      }, anchor: this.ownerElement }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+  }
+  setOwnerAriaLabel() {
+    var _a;
+    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', this.tooltipId);
+  }
+  addListeners() {
+    var _a, _b, _c, _d;
+    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', this.showTooltip);
+    (_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', this.hideTooltip);
+    (_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.addEventListener('focus', this.showTooltip);
+    (_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.addEventListener('blur', this.hideTooltip);
+  }
+  removeListeners() {
+    var _a, _b, _c, _d;
+    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', this.showTooltip);
+    (_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', this.hideTooltip);
+    (_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.showTooltip);
+    (_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('blur', this.hideTooltip);
+  }
+  get host() { return getElement(this); }
+};
+Tooltip.style = tooltipCss;
+
 const tooltipContentCss = ":host(limel-tooltip-content){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:var(--limel-theme-default-font-size);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}";
 
 const TooltipContent = class {
@@ -2073,6 +2168,6 @@ const TooltipContent = class {
 };
 TooltipContent.style = tooltipContentCss;
 
-export { Portal as limel_portal, TooltipContent as limel_tooltip_content };
+export { Portal as limel_portal, Tooltip as limel_tooltip, TooltipContent as limel_tooltip_content };
 
-//# sourceMappingURL=limel-portal_2.entry.js.map
+//# sourceMappingURL=limel-portal_3.entry.js.map