@limetech/lime-elements 37.55.4 → 37.55.6

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

@@ -1994,24 +1994,20 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const portalCss = ":host(limel-portal){display:block;position:absolute;top:0;bottom:0;width:100%;pointer-events:none}:host([hidden]){display:none}";
+const portalCss = ":host(limel-portal){font-family:var(--kompendium-example-font-family, inherit);font-size:var(--kompendium-example-font-size, inherit);line-height:var(--kompendium-example-line-height, inherit)}:host(limel-portal){display:block;top:0;bottom:0;width:100%}[popover]{border:none;background:transparent;overflow:visible}";
 
 const Portal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.loaded = false;
+    this.stopEventPropagation = (event) => event.stopPropagation();
     this.openDirection = 'bottom';
     this.position = 'absolute';
-    this.containerId = undefined;
-    this.containerStyle = {};
-    this.parent = document.body;
     this.inheritParentWidth = false;
     this.visible = false;
     this.anchor = null;
-    this.parents = new WeakMap();
   }
   disconnectedCallback() {
-    this.removeContainer();
     this.destroyPopper();
     if (this.observer) {
       this.observer.unobserve(this.container);
@@ -2021,9 +2017,7 @@ const Portal = class {
     if (!this.loaded) {
       return;
     }
-    this.createContainer();
     this.hideContainer();
-    this.attachContainer();
     this.styleContainer();
     if (this.visible) {
       this.createPopper();
@@ -2039,12 +2033,12 @@ const Portal = class {
       observer.observe(this.container);
     }
   }
-  componentDidLoad() {
+  componentDidRender() {
     this.loaded = true;
     this.connectedCallback();
   }
   render() {
-    return index.h("slot", null);
+    return (index.h(index.Host, { onChange: this.stopEventPropagation, onClick: this.stopEventPropagation }, index.h("div", { popover: "manual" }, index.h("slot", null))));
   }
   onVisible() {
     if (!this.visible) {
@@ -2059,53 +2053,21 @@ const Portal = class {
       this.showContainer();
     });
   }
-  createContainer() {
-    const slot = this.host.shadowRoot.querySelector('slot');
-    const content = (slot.assignedElements && slot.assignedElements()) || [];
-    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,
-    });
-    content.forEach((element) => {
-      this.parents.set(element, element.parentElement);
-      this.container.appendChild(element);
-    });
-  }
-  attachContainer() {
-    this.parent.appendChild(this.container);
-  }
-  removeContainer() {
-    if (!this.container) {
-      return;
-    }
-    Array.from(this.container.children).forEach((element) => {
-      const parent = this.parents.get(element);
-      if (!parent) {
-        return;
-      }
-      parent.appendChild(element);
-    });
-    this.hideContainer();
-    this.container.parentElement.removeChild(this.container);
-  }
   hideContainer() {
-    this.container.style.opacity = '0';
+    var _a;
+    // @ts-ignore
+    (_a = this.container) === null || _a === void 0 ? void 0 : _a.hidePopover();
   }
   showContainer() {
-    this.container.style.opacity = '1';
+    var _a;
+    // @ts-ignore
+    (_a = this.container) === null || _a === void 0 ? void 0 : _a.showPopover();
   }
   styleContainer() {
-    const hostWidth = this.host.getBoundingClientRect().width;
-    if (this.visible) {
-      this.container.style.display = 'block';
-    }
-    else {
-      this.container.style.display = 'none';
+    if (!this.container) {
+      return;
     }
+    const hostWidth = this.host.getBoundingClientRect().width;
     if (this.inheritParentWidth) {
       const containerWidth = this.getContentWidth(this.container);
       let width = containerWidth;
@@ -2115,9 +2077,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) {
@@ -2199,6 +2158,9 @@ const Portal = class {
       extraCosmeticSpace;
     this.container.style.maxHeight = `${maxHeight}px`;
   }
+  get container() {
+    return this.host.shadowRoot.querySelector('[popover]');
+  }
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "visible": ["onVisible"]