@limetech/lime-elements 37.61.0 → 37.61.1

package/dist/collection/components/portal/portal.css

@@ -12,4 +12,8 @@
 
 :host([hidden]) {
   display: none;
+}
+
+slot {
+  display: none;
 }

package/dist/collection/components/portal/portal.js

@@ -64,6 +64,15 @@ export class Portal {
     if (!this.loaded) {
       return;
     }
+    if (this.visible) {
+      this.init();
+    }
+  }
+  componentDidLoad() {
+    this.loaded = true;
+    this.connectedCallback();
+  }
+  init() {
     this.createContainer();
     this.hideContainer();
     this.attachContainer();
@@ -82,14 +91,13 @@ export class Portal {
       observer.observe(this.container);
     }
   }
-  componentDidLoad() {
-    this.loaded = true;
-    this.connectedCallback();
-  }
   render() {
     return h("slot", null);
   }
   onVisible() {
+    if (!this.container && this.visible) {
+      this.init();
+    }
     if (!this.visible) {
       this.hideContainer();
       this.styleContainer();

package/dist/collection/components/portal/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n    createPopper,\n    Instance,\n    OptionsGeneric,\n    Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\n/**\n * The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n *\n * When the limel-portal component is used, it creates a new DOM node (a div element)\n * and appends it to a parent element (by default, the body of the document).\n * The child elements of the limel-portal are then moved from\n * their original location in the DOM to this new div element.\n *\n * This technique is often used to overcome CSS stacking context issues,\n * or to render UI elements like modals, dropdowns, tooltips, etc.,\n * that need to visually \"break out\" of their container.\n *\n * Using this component, we ensure that the content is always rendered in the\n * correct position, and never covers its own trigger, or another component\n * that is opened in the stacking layer. This way, we don't need to worry about\n * z-indexes, or other stacking context issues.\n *\n * :::important\n * There are some caveats when using this component\n *\n * 1. Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * 2. Any styling that is applied to content from the parent will be lost, if the\n * content is just another web-component it will work without any issues.\n * Alternatively, use the `style=\"\"` html attribute.\n * 3. Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * 4. When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * :::\n *\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n */\n@Component({\n    tag: 'limel-portal',\n    shadow: true,\n    styleUrl: 'portal.scss',\n})\nexport class Portal {\n    /**\n     * Decides which direction the portal content should open.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom';\n\n    /**\n     * Position of the content.\n     */\n    @Prop({ reflect: true })\n    public position: 'fixed' | 'absolute' = 'absolute';\n\n    /**\n     * A unique ID.\n     */\n    @Prop({ reflect: true })\n    public containerId: string;\n\n    /**\n     * Dynamic styling that can be applied to the container holding the content.\n     */\n    @Prop()\n    public containerStyle: object = {};\n\n    /**\n     * The `parent` property specifies the parent element where the content\n     * of the portal will be moved to.\n     * By default, it is set to `document.body`, meaning the content\n     * will be appended as a child of the body element in the DOM.\n     * If you want the content to be appended to a different element,\n     * you can specify that element by setting this property.\n     * Please note that the specified parent element should exist\n     * in the DOM at the time of rendering the portal.\n     */\n    @Prop()\n    public parent: HTMLElement = document.body;\n\n    /**\n     * Used to make a dropdown have the same width as the trigger, for example\n     * in `limel-picker`.\n     */\n    @Prop({ reflect: true })\n    public inheritParentWidth = false;\n\n    /**\n     * True if the content within the portal should be visible.\n     *\n     * If the content is from within a dialog for instance, this can be set to\n     * true from false when the dialog opens to position the content properly.\n     */\n    @Prop({ reflect: true })\n    public visible = false;\n\n    /**\n     * The element that the content should be positioned relative to.\n     * Defaults to the limel-portal element.\n     */\n    @Prop()\n    public anchor?: HTMLElement = null;\n\n    @Element()\n    private host: HTMLLimelPortalElement;\n\n    private parents: WeakMap<HTMLElement, HTMLElement>;\n    private container: HTMLElement;\n    private popperInstance: Instance;\n    private loaded = false;\n    private observer: ResizeObserver;\n\n    constructor() {\n        this.parents = new WeakMap();\n    }\n\n    public disconnectedCallback() {\n        this.removeContainer();\n        this.destroyPopper();\n        if (this.observer) {\n            this.observer.unobserve(this.container);\n        }\n    }\n\n    public connectedCallback() {\n        if (!this.loaded) {\n            return;\n        }\n\n        this.createContainer();\n        this.hideContainer();\n        this.attachContainer();\n        this.styleContainer();\n\n        if (this.visible) {\n            this.createPopper();\n            this.showContainer();\n        }\n\n        if ('ResizeObserver' in window) {\n            const observer = new ResizeObserver(() => {\n                if (this.popperInstance) {\n                    this.styleContainer();\n                    this.popperInstance.update();\n                }\n            });\n            observer.observe(this.container);\n        }\n    }\n\n    public componentDidLoad() {\n        this.loaded = true;\n        this.connectedCallback();\n    }\n\n    public render() {\n        return <slot />;\n    }\n\n    @Watch('visible')\n    protected onVisible() {\n        if (!this.visible) {\n            this.hideContainer();\n            this.styleContainer();\n            this.destroyPopper();\n\n            return;\n        }\n\n        this.styleContainer();\n        this.createPopper();\n        requestAnimationFrame(() => {\n            this.showContainer();\n        });\n    }\n\n    private createContainer() {\n        const slot: HTMLSlotElement =\n            this.host.shadowRoot.querySelector('slot');\n        const content =\n            (slot.assignedElements && slot.assignedElements()) || [];\n\n        this.container = document.createElement('div');\n        this.container.setAttribute('id', this.containerId);\n        this.container.setAttribute('class', 'limel-portal--container');\n        this.container.style.fontFamily =\n            'var(--limel-portal-font-family, inherit)';\n        Object.assign(this.container, {\n            portalSource: this.host,\n        });\n\n        content.forEach((element: HTMLElement) => {\n            this.parents.set(element, element.parentElement);\n            this.container.appendChild(element);\n        });\n    }\n\n    private attachContainer() {\n        this.parent.appendChild(this.container);\n    }\n\n    private removeContainer() {\n        if (!this.container) {\n            return;\n        }\n\n        Array.from(this.container.children).forEach((element: HTMLElement) => {\n            const parent = this.parents.get(element);\n            if (!parent) {\n                return;\n            }\n\n            parent.appendChild(element);\n        });\n\n        this.hideContainer();\n        this.container.parentElement.removeChild(this.container);\n    }\n\n    private hideContainer() {\n        this.container.style.opacity = '0';\n    }\n\n    private showContainer() {\n        this.container.style.opacity = '1';\n    }\n\n    private styleContainer() {\n        const hostWidth = this.host.getBoundingClientRect().width;\n\n        if (this.visible) {\n            this.container.style.display = 'block';\n        } else {\n            this.container.style.display = 'none';\n        }\n\n        if (this.inheritParentWidth) {\n            const containerWidth = this.getContentWidth(this.container);\n            let width = containerWidth;\n            if (hostWidth > 0) {\n                width = hostWidth;\n            }\n\n            this.container.style.width = `${width}px`;\n        }\n\n        this.ensureContainerFitsInViewPort();\n\n        Object.keys(this.containerStyle).forEach((property) => {\n            this.container.style[property] = this.containerStyle[property];\n        });\n    }\n\n    private getContentWidth(element: HTMLElement | Element) {\n        if (!element) {\n            return null;\n        }\n\n        const width = element.getBoundingClientRect().width;\n        if (width !== 0) {\n            return width;\n        }\n\n        const elementContent = element.querySelector('*');\n\n        return this.getContentWidth(elementContent);\n    }\n\n    private createPopper() {\n        const config = this.createPopperConfig();\n\n        this.popperInstance = createPopper(\n            this.anchor || this.host,\n            this.container,\n            config,\n        );\n    }\n\n    private destroyPopper() {\n        this.popperInstance?.destroy();\n        this.popperInstance = null;\n    }\n\n    private createPopperConfig(): Partial<\n        OptionsGeneric<Partial<FlipModifier>>\n    > {\n        const placement = this.getPlacement(this.openDirection);\n        const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n        return {\n            strategy: this.position,\n            placement: placement,\n            modifiers: [\n                {\n                    name: 'flip',\n                    options: {\n                        fallbackPlacements: [flipPlacement],\n                    },\n                },\n            ],\n        };\n    }\n\n    private getPlacement(direction: OpenDirection): Placement {\n        const placements: Record<OpenDirection, Placement> = {\n            'left-start': 'left-start',\n            left: 'left',\n            'left-end': 'left-end',\n            'right-start': 'right-start',\n            right: 'right',\n            'right-end': 'right-end',\n            'top-start': 'top-start',\n            top: 'top',\n            'top-end': 'top-end',\n            'bottom-start': 'bottom-start',\n            bottom: 'bottom',\n            'bottom-end': 'bottom-end',\n        };\n\n        return placements[direction];\n    }\n\n    private getFlipPlacement(direction: OpenDirection): Placement {\n        const flipPlacements: Record<OpenDirection, Placement> = {\n            'left-start': 'right-start',\n            left: 'right',\n            'left-end': 'right-end',\n            'right-start': 'left-start',\n            right: 'left',\n            'right-end': 'left-end',\n            'top-start': 'bottom-start',\n            top: 'bottom',\n            'top-end': 'bottom-end',\n            'bottom-start': 'top-start',\n            bottom: 'top',\n            'bottom-end': 'top-end',\n        };\n\n        return flipPlacements[direction];\n    }\n\n    private ensureContainerFitsInViewPort() {\n        const viewHeight = Math.max(\n            document.documentElement.clientHeight || 0,\n            window.innerHeight || 0,\n        );\n\n        const { top, bottom } = this.host.getBoundingClientRect();\n        const spaceAboveTopOfSurface = Math.max(top, 0);\n        const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n        const extraCosmeticSpace = 16;\n        const maxHeight =\n            Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n            extraCosmeticSpace;\n\n        this.container.style.maxHeight = `${maxHeight}px`;\n    }\n}\n"]}
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EACH,YAAY,GAIf,MAAM,gBAAgB,CAAC;AAGxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAMH,MAAM,OAAO,MAAM;EAsEf;IAHQ,WAAM,GAAG,KAAK,CAAC;yBA9De,QAAQ;oBAMN,UAAU;;0BAYlB,EAAE;kBAaL,QAAQ,CAAC,IAAI;8BAOd,KAAK;mBAShB,KAAK;kBAOQ,IAAI;IAY9B,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;GAChC;EAEM,oBAAoB;IACvB,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC3C;EACL,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACd,OAAO;KACV;IAED,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;EACL,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC7B,CAAC;EAEO,IAAI;IACR,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IAED,IAAI,gBAAgB,IAAI,MAAM,EAAE;MAC5B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QACrC,IAAI,IAAI,CAAC,cAAc,EAAE;UACrB,IAAI,CAAC,cAAc,EAAE,CAAC;UACtB,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;SAChC;MACL,CAAC,CAAC,CAAC;MACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACpC;EACL,CAAC;EAEM,MAAM;IACT,OAAO,eAAQ,CAAC;EACpB,CAAC;EAGS,SAAS;IACf,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;MACjC,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;IAED,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,IAAI,CAAC,aAAa,EAAE,CAAC;MACrB,IAAI,CAAC,cAAc,EAAE,CAAC;MACtB,IAAI,CAAC,aAAa,EAAE,CAAC;MAErB,OAAO;KACV;IAED,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,qBAAqB,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,eAAe;IACnB,MAAM,IAAI,GACN,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,OAAO,GACT,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE,CAAC;IAE7D,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU;MAC3B,0CAA0C,CAAC;IAC/C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE;MAC1B,YAAY,EAAE,IAAI,CAAC,IAAI;KAC1B,CAAC,CAAC;IAEH,OAAO,CAAC,OAAO,CAAC,CAAC,OAAoB,EAAE,EAAE;MACrC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;MACjD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,eAAe;IACnB,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC5C,CAAC;EAEO,eAAe;IACnB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,OAAoB,EAAE,EAAE;MACjE,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;MACzC,IAAI,CAAC,MAAM,EAAE;QACT,OAAO;OACV;MAED,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC7D,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;EACvC,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;EACvC,CAAC;EAEO,cAAc;IAClB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAE1D,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;KAC1C;SAAM;MACH,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KACzC;IAED,IAAI,IAAI,CAAC,kBAAkB,EAAE;MACzB,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MAC5D,IAAI,KAAK,GAAG,cAAc,CAAC;MAC3B,IAAI,SAAS,GAAG,CAAC,EAAE;QACf,KAAK,GAAG,SAAS,CAAC;OACrB;MAED,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;KAC7C;IAED,IAAI,CAAC,6BAA6B,EAAE,CAAC;IAErC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;MAClD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,eAAe,CAAC,OAA8B;IAClD,IAAI,CAAC,OAAO,EAAE;MACV,OAAO,IAAI,CAAC;KACf;IAED,MAAM,KAAK,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IACpD,IAAI,KAAK,KAAK,CAAC,EAAE;MACb,OAAO,KAAK,CAAC;KAChB;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAElD,OAAO,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;EAChD,CAAC;EAEO,YAAY;IAChB,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAEzC,IAAI,CAAC,cAAc,GAAG,YAAY,CAC9B,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EACxB,IAAI,CAAC,SAAS,EACd,MAAM,CACT,CAAC;EACN,CAAC;EAEO,aAAa;;IACjB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;EAC/B,CAAC;EAEO,kBAAkB;IAGtB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAEhE,OAAO;MACH,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,SAAS,EAAE,SAAS;MACpB,SAAS,EAAE;QACP;UACI,IAAI,EAAE,MAAM;UACZ,OAAO,EAAE;YACL,kBAAkB,EAAE,CAAC,aAAa,CAAC;WACtC;SACJ;OACJ;KACJ,CAAC;EACN,CAAC;EAEO,YAAY,CAAC,SAAwB;IACzC,MAAM,UAAU,GAAqC;MACjD,YAAY,EAAE,YAAY;MAC1B,IAAI,EAAE,MAAM;MACZ,UAAU,EAAE,UAAU;MACtB,aAAa,EAAE,aAAa;MAC5B,KAAK,EAAE,OAAO;MACd,WAAW,EAAE,WAAW;MACxB,WAAW,EAAE,WAAW;MACxB,GAAG,EAAE,KAAK;MACV,SAAS,EAAE,SAAS;MACpB,cAAc,EAAE,cAAc;MAC9B,MAAM,EAAE,QAAQ;MAChB,YAAY,EAAE,YAAY;KAC7B,CAAC;IAEF,OAAO,UAAU,CAAC,SAAS,CAAC,CAAC;EACjC,CAAC;EAEO,gBAAgB,CAAC,SAAwB;IAC7C,MAAM,cAAc,GAAqC;MACrD,YAAY,EAAE,aAAa;MAC3B,IAAI,EAAE,OAAO;MACb,UAAU,EAAE,WAAW;MACvB,aAAa,EAAE,YAAY;MAC3B,KAAK,EAAE,MAAM;MACb,WAAW,EAAE,UAAU;MACvB,WAAW,EAAE,cAAc;MAC3B,GAAG,EAAE,QAAQ;MACb,SAAS,EAAE,YAAY;MACvB,cAAc,EAAE,WAAW;MAC3B,MAAM,EAAE,KAAK;MACb,YAAY,EAAE,SAAS;KAC1B,CAAC;IAEF,OAAO,cAAc,CAAC,SAAS,CAAC,CAAC;EACrC,CAAC;EAEO,6BAA6B;IACjC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CACvB,QAAQ,CAAC,eAAe,CAAC,YAAY,IAAI,CAAC,EAC1C,MAAM,CAAC,WAAW,IAAI,CAAC,CAC1B,CAAC;IAEF,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC1D,MAAM,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAChD,MAAM,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;IAChE,MAAM,kBAAkB,GAAG,EAAE,CAAC;IAC9B,MAAM,SAAS,GACX,IAAI,CAAC,GAAG,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;MACxD,kBAAkB,CAAC;IAEvB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,SAAS,IAAI,CAAC;EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n    createPopper,\n    Instance,\n    OptionsGeneric,\n    Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\n/**\n * The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n *\n * When the limel-portal component is used, it creates a new DOM node (a div element)\n * and appends it to a parent element (by default, the body of the document).\n * The child elements of the limel-portal are then moved from\n * their original location in the DOM to this new div element.\n *\n * This technique is often used to overcome CSS stacking context issues,\n * or to render UI elements like modals, dropdowns, tooltips, etc.,\n * that need to visually \"break out\" of their container.\n *\n * Using this component, we ensure that the content is always rendered in the\n * correct position, and never covers its own trigger, or another component\n * that is opened in the stacking layer. This way, we don't need to worry about\n * z-indexes, or other stacking context issues.\n *\n * :::important\n * There are some caveats when using this component\n *\n * 1. Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * 2. Any styling that is applied to content from the parent will be lost, if the\n * content is just another web-component it will work without any issues.\n * Alternatively, use the `style=\"\"` html attribute.\n * 3. Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * 4. When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * :::\n *\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n */\n@Component({\n    tag: 'limel-portal',\n    shadow: true,\n    styleUrl: 'portal.scss',\n})\nexport class Portal {\n    /**\n     * Decides which direction the portal content should open.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom';\n\n    /**\n     * Position of the content.\n     */\n    @Prop({ reflect: true })\n    public position: 'fixed' | 'absolute' = 'absolute';\n\n    /**\n     * A unique ID.\n     */\n    @Prop({ reflect: true })\n    public containerId: string;\n\n    /**\n     * Dynamic styling that can be applied to the container holding the content.\n     */\n    @Prop()\n    public containerStyle: object = {};\n\n    /**\n     * The `parent` property specifies the parent element where the content\n     * of the portal will be moved to.\n     * By default, it is set to `document.body`, meaning the content\n     * will be appended as a child of the body element in the DOM.\n     * If you want the content to be appended to a different element,\n     * you can specify that element by setting this property.\n     * Please note that the specified parent element should exist\n     * in the DOM at the time of rendering the portal.\n     */\n    @Prop()\n    public parent: HTMLElement = document.body;\n\n    /**\n     * Used to make a dropdown have the same width as the trigger, for example\n     * in `limel-picker`.\n     */\n    @Prop({ reflect: true })\n    public inheritParentWidth = false;\n\n    /**\n     * True if the content within the portal should be visible.\n     *\n     * If the content is from within a dialog for instance, this can be set to\n     * true from false when the dialog opens to position the content properly.\n     */\n    @Prop({ reflect: true })\n    public visible = false;\n\n    /**\n     * The element that the content should be positioned relative to.\n     * Defaults to the limel-portal element.\n     */\n    @Prop()\n    public anchor?: HTMLElement = null;\n\n    @Element()\n    private host: HTMLLimelPortalElement;\n\n    private parents: WeakMap<HTMLElement, HTMLElement>;\n    private container: HTMLElement;\n    private popperInstance: Instance;\n    private loaded = false;\n    private observer: ResizeObserver;\n\n    constructor() {\n        this.parents = new WeakMap();\n    }\n\n    public disconnectedCallback() {\n        this.removeContainer();\n        this.destroyPopper();\n        if (this.observer) {\n            this.observer.unobserve(this.container);\n        }\n    }\n\n    public connectedCallback() {\n        if (!this.loaded) {\n            return;\n        }\n\n        if (this.visible) {\n            this.init();\n        }\n    }\n\n    public componentDidLoad() {\n        this.loaded = true;\n        this.connectedCallback();\n    }\n\n    private init() {\n        this.createContainer();\n        this.hideContainer();\n        this.attachContainer();\n        this.styleContainer();\n\n        if (this.visible) {\n            this.createPopper();\n            this.showContainer();\n        }\n\n        if ('ResizeObserver' in window) {\n            const observer = new ResizeObserver(() => {\n                if (this.popperInstance) {\n                    this.styleContainer();\n                    this.popperInstance.update();\n                }\n            });\n            observer.observe(this.container);\n        }\n    }\n\n    public render() {\n        return <slot />;\n    }\n\n    @Watch('visible')\n    protected onVisible() {\n        if (!this.container && this.visible) {\n            this.init();\n        }\n\n        if (!this.visible) {\n            this.hideContainer();\n            this.styleContainer();\n            this.destroyPopper();\n\n            return;\n        }\n\n        this.styleContainer();\n        this.createPopper();\n        requestAnimationFrame(() => {\n            this.showContainer();\n        });\n    }\n\n    private createContainer() {\n        const slot: HTMLSlotElement =\n            this.host.shadowRoot.querySelector('slot');\n        const content =\n            (slot.assignedElements && slot.assignedElements()) || [];\n\n        this.container = document.createElement('div');\n        this.container.setAttribute('id', this.containerId);\n        this.container.setAttribute('class', 'limel-portal--container');\n        this.container.style.fontFamily =\n            'var(--limel-portal-font-family, inherit)';\n        Object.assign(this.container, {\n            portalSource: this.host,\n        });\n\n        content.forEach((element: HTMLElement) => {\n            this.parents.set(element, element.parentElement);\n            this.container.appendChild(element);\n        });\n    }\n\n    private attachContainer() {\n        this.parent.appendChild(this.container);\n    }\n\n    private removeContainer() {\n        if (!this.container) {\n            return;\n        }\n\n        Array.from(this.container.children).forEach((element: HTMLElement) => {\n            const parent = this.parents.get(element);\n            if (!parent) {\n                return;\n            }\n\n            parent.appendChild(element);\n        });\n\n        this.hideContainer();\n        this.container.parentElement.removeChild(this.container);\n    }\n\n    private hideContainer() {\n        this.container.style.opacity = '0';\n    }\n\n    private showContainer() {\n        this.container.style.opacity = '1';\n    }\n\n    private styleContainer() {\n        const hostWidth = this.host.getBoundingClientRect().width;\n\n        if (this.visible) {\n            this.container.style.display = 'block';\n        } else {\n            this.container.style.display = 'none';\n        }\n\n        if (this.inheritParentWidth) {\n            const containerWidth = this.getContentWidth(this.container);\n            let width = containerWidth;\n            if (hostWidth > 0) {\n                width = hostWidth;\n            }\n\n            this.container.style.width = `${width}px`;\n        }\n\n        this.ensureContainerFitsInViewPort();\n\n        Object.keys(this.containerStyle).forEach((property) => {\n            this.container.style[property] = this.containerStyle[property];\n        });\n    }\n\n    private getContentWidth(element: HTMLElement | Element) {\n        if (!element) {\n            return null;\n        }\n\n        const width = element.getBoundingClientRect().width;\n        if (width !== 0) {\n            return width;\n        }\n\n        const elementContent = element.querySelector('*');\n\n        return this.getContentWidth(elementContent);\n    }\n\n    private createPopper() {\n        const config = this.createPopperConfig();\n\n        this.popperInstance = createPopper(\n            this.anchor || this.host,\n            this.container,\n            config,\n        );\n    }\n\n    private destroyPopper() {\n        this.popperInstance?.destroy();\n        this.popperInstance = null;\n    }\n\n    private createPopperConfig(): Partial<\n        OptionsGeneric<Partial<FlipModifier>>\n    > {\n        const placement = this.getPlacement(this.openDirection);\n        const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n        return {\n            strategy: this.position,\n            placement: placement,\n            modifiers: [\n                {\n                    name: 'flip',\n                    options: {\n                        fallbackPlacements: [flipPlacement],\n                    },\n                },\n            ],\n        };\n    }\n\n    private getPlacement(direction: OpenDirection): Placement {\n        const placements: Record<OpenDirection, Placement> = {\n            'left-start': 'left-start',\n            left: 'left',\n            'left-end': 'left-end',\n            'right-start': 'right-start',\n            right: 'right',\n            'right-end': 'right-end',\n            'top-start': 'top-start',\n            top: 'top',\n            'top-end': 'top-end',\n            'bottom-start': 'bottom-start',\n            bottom: 'bottom',\n            'bottom-end': 'bottom-end',\n        };\n\n        return placements[direction];\n    }\n\n    private getFlipPlacement(direction: OpenDirection): Placement {\n        const flipPlacements: Record<OpenDirection, Placement> = {\n            'left-start': 'right-start',\n            left: 'right',\n            'left-end': 'right-end',\n            'right-start': 'left-start',\n            right: 'left',\n            'right-end': 'left-end',\n            'top-start': 'bottom-start',\n            top: 'bottom',\n            'top-end': 'bottom-end',\n            'bottom-start': 'top-start',\n            bottom: 'top',\n            'bottom-end': 'top-end',\n        };\n\n        return flipPlacements[direction];\n    }\n\n    private ensureContainerFitsInViewPort() {\n        const viewHeight = Math.max(\n            document.documentElement.clientHeight || 0,\n            window.innerHeight || 0,\n        );\n\n        const { top, bottom } = this.host.getBoundingClientRect();\n        const spaceAboveTopOfSurface = Math.max(top, 0);\n        const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n        const extraCosmeticSpace = 16;\n        const maxHeight =\n            Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n            extraCosmeticSpace;\n\n        this.container.style.maxHeight = `${maxHeight}px`;\n    }\n}\n"]}

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

@@ -1990,7 +1990,7 @@ 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){display:block;position:absolute;top:0;bottom:0;width:100%;pointer-events:none}:host([hidden]){display:none}slot{display:none}";
 
 const Portal = class {
   constructor(hostRef) {
@@ -2017,6 +2017,15 @@ const Portal = class {
     if (!this.loaded) {
       return;
     }
+    if (this.visible) {
+      this.init();
+    }
+  }
+  componentDidLoad() {
+    this.loaded = true;
+    this.connectedCallback();
+  }
+  init() {
     this.createContainer();
     this.hideContainer();
     this.attachContainer();
@@ -2035,14 +2044,13 @@ const Portal = class {
       observer.observe(this.container);
     }
   }
-  componentDidLoad() {
-    this.loaded = true;
-    this.connectedCallback();
-  }
   render() {
     return h("slot", null);
   }
   onVisible() {
+    if (!this.container && this.visible) {
+      this.init();
+    }
     if (!this.visible) {
       this.hideContainer();
       this.styleContainer();