@limetech/lime-elements 37.61.2 → 37.61.4

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

@@ -1992,6 +1992,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
 
 const portalCss = ":host(limel-portal){display:block;position:absolute;top:0;bottom:0;width:100%;pointer-events:none}:host([hidden]){display:none}slot{display:none}";
 
+const IS_VISIBLE_CLASS = 'is-visible';
 const Portal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -2069,8 +2070,6 @@ const Portal = class {
     this.container = document.createElement('div');
     this.container.setAttribute('id', this.containerId);
     this.container.setAttribute('class', 'limel-portal--container');
-    this.container.style.fontFamily =
-      'var(--limel-portal-font-family, inherit)';
     Object.assign(this.container, {
       portalSource: this.host,
     });
@@ -2097,19 +2096,21 @@ const Portal = class {
     this.container.parentElement.removeChild(this.container);
   }
   hideContainer() {
-    this.container.style.opacity = '0';
+    if (!this.container) {
+      return;
+    }
+    this.container.classList.remove(IS_VISIBLE_CLASS);
   }
   showContainer() {
-    this.container.style.opacity = '1';
+    this.container.classList.add(IS_VISIBLE_CLASS);
   }
   styleContainer() {
+    this.setContainerWidth();
+    this.setContainerHeight();
+    this.setContainerStyles();
+  }
+  setContainerWidth() {
     const hostWidth = this.host.getBoundingClientRect().width;
-    if (this.visible) {
-      this.container.style.display = 'block';
-    }
-    else {
-      this.container.style.display = 'none';
-    }
     if (this.inheritParentWidth) {
       const containerWidth = this.getContentWidth(this.container);
       let width = containerWidth;
@@ -2118,10 +2119,6 @@ const Portal = class {
       }
       this.container.style.width = `${width}px`;
     }
-    this.ensureContainerFitsInViewPort();
-    Object.keys(this.containerStyle).forEach((property) => {
-      this.container.style[property] = this.containerStyle[property];
-    });
   }
   getContentWidth(element) {
     if (!element) {
@@ -2134,6 +2131,11 @@ const Portal = class {
     const elementContent = element.querySelector('*');
     return this.getContentWidth(elementContent);
   }
+  setContainerStyles() {
+    Object.keys(this.containerStyle).forEach((property) => {
+      this.container.style[property] = this.containerStyle[property];
+    });
+  }
   createPopper() {
     const config = this.createPopperConfig();
     this.popperInstance = createPopper(this.anchor || this.host, this.container, config);
@@ -2193,7 +2195,7 @@ const Portal = class {
     };
     return flipPlacements[direction];
   }
-  ensureContainerFitsInViewPort() {
+  setContainerHeight() {
     const viewHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
     const { top, bottom } = this.host.getBoundingClientRect();
     const spaceAboveTopOfSurface = Math.max(top, 0);