@limetech/lime-elements 37.75.4 → 37.76.1

package/dist/lime-elements/p-ec3fd127.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,g as r}from"./p-443111b3.js";import{c as i}from"./p-96460db3.js";import{E as s}from"./p-e03dfe70.js";import{z as n}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";function a(e,o){var t;if(e.contains(o)||((t=e.shadowRoot)===null||t===void 0?void 0:t.contains(o))){return true}const r=c(o);if(!r){return false}return a(e,r)}function c(e){const o=e.closest(".limel-portal--container");if(o){return o.portalSource}const t=e.getRootNode();return t.host}const p=".trigger-anchor{display:inline-block;position:relative}";const l=class{constructor(t){e(this,t);this.close=o(this,"close",7);this.handleGlobalKeyPress=e=>{if(e.key!==s){return}e.stopPropagation();e.preventDefault();this.close.emit()};this.setTriggerAttributes=e=>{const o={"aria-haspopup":true,"aria-expanded":this.open,"aria-controls":this.portalId,role:"button"};for(const[t,r]of Object.entries(o)){if(!r){e.removeAttribute(t)}else{e.setAttribute(t,String(r))}}};this.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}componentDidRender(){const e=this.host.shadowRoot.querySelector("slot");e.assignedElements().forEach(this.setTriggerAttributes)}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 e=this.getCssProperties();const o=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return t("div",{class:"trigger-anchor"},t("slot",{name:"trigger"}),t("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":o},openDirection:this.openDirection},t("limel-popover-surface",{contentCollection:this.host.children,style:e})))}globalClickListener(e){const o=e.target;const t=a(this.host,o);if(this.open&&!t){e.stopPropagation();e.preventDefault();this.close.emit()}}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius","--popover-box-shadow"];const o=getComputedStyle(this.host);const t=e.map((e=>o.getPropertyValue(e)));return n(e,t)}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=p;const d='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-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.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';const h=class{constructor(o){e(this,o);this.contentCollection=undefined}componentDidLoad(){this.appendElement()}render(){return t("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((o=>{if(o.slot==="trigger"){return}e.appendChild(o)}))}get host(){return r(this)}};h.style=d;export{l as limel_popover,h as limel_popover_surface};
+//# sourceMappingURL=p-ec3fd127.entry.js.map

package/dist/lime-elements/p-ec3fd127.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["portalContains","element","child","contains","_a","shadowRoot","parent","findParent","portal","closest","portalSource","rootNode","getRootNode","host","popoverCss","Popover","constructor","hostRef","this","handleGlobalKeyPress","event","key","ESCAPE","stopPropagation","preventDefault","close","emit","setTriggerAttributes","attributes","open","portalId","role","value","Object","entries","removeAttribute","setAttribute","String","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","componentDidRender","slotElement","querySelector","assignedElements","forEach","document","addEventListener","capture","removeEventListener","render","cssProperties","getCssProperties","popoverZIndex","getComputedStyle","getPropertyValue","h","class","name","visible","containerId","containerStyle","openDirection","contentCollection","children","style","target","clickedInside","propertyNames","values","map","property","zipObject","popoverSurfaceCss","PopoverSurface","componentDidLoad","appendElement","tabindex","portalContainer","Array","from","slot","appendChild"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n    element: HTMLElement,\n    child: HTMLElement,\n): boolean {\n    if (element.contains(child) || element.shadowRoot?.contains(child)) {\n        return true;\n    }\n\n    const parent = findParent(child);\n    if (!parent) {\n        return false;\n    }\n\n    return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n    const portal: any = element.closest('.limel-portal--container');\n    if (portal) {\n        return portal.portalSource;\n    }\n\n    const rootNode = element.getRootNode() as ShadowRoot;\n\n    return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.\n */\n\n.trigger-anchor {\n    display: inline-block;\n    position: relative;\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n * @exampleComponent limel-example-popover-styling\n */\n@Component({\n    tag: 'limel-popover',\n    shadow: true,\n    styleUrl: 'popover.scss',\n})\nexport class Popover {\n    /**\n     * True if the content within the popover should be visible\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Decides the popover's location in relation to its trigger\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Emits an event when the component is closing\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelPopoverElement;\n\n    private portalId: string;\n\n    constructor() {\n        this.portalId = createRandomString();\n        this.globalClickListener = this.globalClickListener.bind(this);\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentWillLoad() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentDidRender() {\n        const slotElement = this.host.shadowRoot.querySelector('slot');\n        slotElement.assignedElements().forEach(this.setTriggerAttributes);\n    }\n\n    private setupGlobalHandlers() {\n        if (this.open) {\n            document.addEventListener('click', this.globalClickListener, {\n                capture: true,\n            });\n            document.addEventListener('keyup', this.handleGlobalKeyPress);\n        } else {\n            document.removeEventListener('click', this.globalClickListener);\n            document.removeEventListener('keyup', this.handleGlobalKeyPress);\n        }\n    }\n\n    public render() {\n        const cssProperties = this.getCssProperties();\n        const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--popover-z-index',\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <slot name=\"trigger\" />\n                <limel-portal\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{ 'z-index': popoverZIndex }}\n                    openDirection={this.openDirection}\n                >\n                    <limel-popover-surface\n                        contentCollection={this.host.children}\n                        style={cssProperties}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private globalClickListener(event: MouseEvent) {\n        const element: HTMLElement = event.target as HTMLElement;\n        const clickedInside = portalContains(this.host, element);\n        if (this.open && !clickedInside) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.close.emit();\n        }\n    }\n\n    private getCssProperties() {\n        const propertyNames = [\n            '--popover-surface-width',\n            '--popover-body-background-color',\n            '--popover-border-radius',\n            '--popover-box-shadow',\n        ];\n        const style = getComputedStyle(this.host);\n        const values = propertyNames.map((property) => {\n            return style.getPropertyValue(property);\n        });\n\n        return zipObject(propertyNames, values);\n    }\n\n    private handleGlobalKeyPress = (event: KeyboardEvent) => {\n        if (event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.close.emit();\n    };\n\n    private setTriggerAttributes = (element: HTMLElement) => {\n        const attributes = {\n            'aria-haspopup': true,\n            'aria-expanded': this.open,\n            'aria-controls': this.portalId,\n            role: 'button',\n        };\n\n        for (const [key, value] of Object.entries(attributes)) {\n            if (!value) {\n                element.removeAttribute(key);\n            } else {\n                element.setAttribute(key, String(value));\n            }\n        }\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n    isolation: isolate;\n\n    position: relative;\n    display: flex;\n\n    width: var(--popover-surface-width, auto);\n    max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n    max-width: calc(100vw - 2rem);\n    margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    border-radius: var(--popover-border-radius, functions.pxToRem(12));\n    box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));\n\n    backdrop-filter: blur(functions.pxToRem(5));\n    -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n    &:after {\n        // allows using `--popover-body-background-color` while\n        // getting the blurred backdrop effect\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        z-index: -1;\n\n        opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n        border-radius: var(--popover-border-radius, functions.pxToRem(12));\n        background-color: var(\n            --popover-body-background-color,\n            var(--lime-elevated-surface-background-color)\n        );\n    }\n\n    @include mixins.visualize-keyboard-focus;\n\n    &:focus,\n    &:focus-within {\n        &:after {\n            opacity: 1;\n        }\n    }\n\n    & > * {\n        // this fixes some unwanted layout issues\n        // which might be very hard for consumers to realize\n        // and fix by themselves. Without this code,\n        // if the consumer sets for example paddings in\n        // what they send to the popover, their element\n        // can grow larger than the popover surface\n        box-sizing: border-box;\n    }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n    tag: 'limel-popover-surface',\n    shadow: true,\n    styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n    /**\n     * Content to render\n     */\n    @Prop()\n    public contentCollection: HTMLCollection;\n\n    @Element()\n    private host: HTMLLimelPopoverSurfaceElement;\n\n    public componentDidLoad() {\n        this.appendElement();\n    }\n\n    public render() {\n        return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n    }\n\n    private appendElement() {\n        const portalContainer = this.host.shadowRoot.querySelector(\n            '.limel-popover-surface',\n        );\n\n        Array.from(this.contentCollection).forEach((child) => {\n            if (child.slot === 'trigger') {\n                return;\n            }\n\n            portalContainer.appendChild(child);\n        });\n    }\n}\n"],"mappings":"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"}

package/dist/types/components/popover/popover.d.ts

@@ -42,6 +42,7 @@ import { OpenDirection } from '../menu/menu.types';
  * @slot - Content to put inside the surface
  * @exampleComponent limel-example-popover-basic
  * @exampleComponent limel-example-popover-trigger-interaction
+ * @exampleComponent limel-example-popover-styling
  */
 export declare class Popover {
   /**

package/dist/types/components.d.ts

@@ -2101,6 +2101,7 @@ export namespace Components {
      * :::
      * @exampleComponent limel-example-popover-basic
      * @exampleComponent limel-example-popover-trigger-interaction
+     * @exampleComponent limel-example-popover-styling
      */
     interface LimelPopover {
         /**
@@ -4075,6 +4076,7 @@ declare global {
      * :::
      * @exampleComponent limel-example-popover-basic
      * @exampleComponent limel-example-popover-trigger-interaction
+     * @exampleComponent limel-example-popover-styling
      */
     interface HTMLLimelPopoverElement extends Components.LimelPopover, HTMLStencilElement {
     }
@@ -6724,6 +6726,7 @@ declare namespace LocalJSX {
      * :::
      * @exampleComponent limel-example-popover-basic
      * @exampleComponent limel-example-popover-trigger-interaction
+     * @exampleComponent limel-example-popover-styling
      */
     interface LimelPopover {
         /**
@@ -8464,6 +8467,7 @@ declare module "@stencil/core" {
              * :::
              * @exampleComponent limel-example-popover-basic
              * @exampleComponent limel-example-popover-trigger-interaction
+             * @exampleComponent limel-example-popover-styling
              */
             "limel-popover": LocalJSX.LimelPopover & JSXBase.HTMLAttributes<HTMLLimelPopoverElement>;
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.75.4",
+  "version": "37.76.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-a8412bd0.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,g as r}from"./p-443111b3.js";import{c as i}from"./p-96460db3.js";import{E as s}from"./p-e03dfe70.js";import{z as n}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";function a(e,t){var o;if(e.contains(t)||((o=e.shadowRoot)===null||o===void 0?void 0:o.contains(t))){return true}const r=c(t);if(!r){return false}return a(e,r)}function c(e){const t=e.closest(".limel-portal--container");if(t){return t.portalSource}const o=e.getRootNode();return o.host}const p=".trigger-anchor{display:inline-block;position:relative}";const l=class{constructor(o){e(this,o);this.close=t(this,"close",7);this.handleGlobalKeyPress=e=>{if(e.key!==s){return}e.stopPropagation();e.preventDefault();this.close.emit()};this.setTriggerAttributes=e=>{const t={"aria-haspopup":true,"aria-expanded":this.open,"aria-controls":this.portalId,role:"button"};for(const[o,r]of Object.entries(t)){if(!r){e.removeAttribute(o)}else{e.setAttribute(o,String(r))}}};this.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}componentDidRender(){const e=this.host.shadowRoot.querySelector("slot");e.assignedElements().forEach(this.setTriggerAttributes)}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 e=this.getCssProperties();const t=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return o("div",{class:"trigger-anchor"},o("slot",{name:"trigger"}),o("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t},openDirection:this.openDirection},o("limel-popover-surface",{contentCollection:this.host.children,style:e})))}globalClickListener(e){const t=e.target;const o=a(this.host,t);if(this.open&&!o){e.stopPropagation();e.preventDefault();this.close.emit()}}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius"];const t=getComputedStyle(this.host);const o=e.map((e=>t.getPropertyValue(e)));return n(e,o)}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=p;const d='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;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.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';const u=class{constructor(t){e(this,t);this.contentCollection=undefined}componentDidLoad(){this.appendElement()}render(){return o("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((t=>{if(t.slot==="trigger"){return}e.appendChild(t)}))}get host(){return r(this)}};u.style=d;export{l as limel_popover,u as limel_popover_surface};
-//# sourceMappingURL=p-a8412bd0.entry.js.map

package/dist/lime-elements/p-a8412bd0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["portalContains","element","child","contains","_a","shadowRoot","parent","findParent","portal","closest","portalSource","rootNode","getRootNode","host","popoverCss","Popover","constructor","hostRef","this","handleGlobalKeyPress","event","key","ESCAPE","stopPropagation","preventDefault","close","emit","setTriggerAttributes","attributes","open","portalId","role","value","Object","entries","removeAttribute","setAttribute","String","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","componentDidRender","slotElement","querySelector","assignedElements","forEach","document","addEventListener","capture","removeEventListener","render","cssProperties","getCssProperties","popoverZIndex","getComputedStyle","getPropertyValue","h","class","name","visible","containerId","containerStyle","openDirection","contentCollection","children","style","target","clickedInside","propertyNames","values","map","property","zipObject","popoverSurfaceCss","PopoverSurface","componentDidLoad","appendElement","tabindex","portalContainer","Array","from","slot","appendChild"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n    element: HTMLElement,\n    child: HTMLElement,\n): boolean {\n    if (element.contains(child) || element.shadowRoot?.contains(child)) {\n        return true;\n    }\n\n    const parent = findParent(child);\n    if (!parent) {\n        return false;\n    }\n\n    return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n    const portal: any = element.closest('.limel-portal--container');\n    if (portal) {\n        return portal.portalSource;\n    }\n\n    const rootNode = element.getRootNode() as ShadowRoot;\n\n    return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n */\n\n.trigger-anchor {\n    display: inline-block;\n    position: relative;\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n */\n@Component({\n    tag: 'limel-popover',\n    shadow: true,\n    styleUrl: 'popover.scss',\n})\nexport class Popover {\n    /**\n     * True if the content within the popover should be visible\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Decides the popover's location in relation to its trigger\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Emits an event when the component is closing\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelPopoverElement;\n\n    private portalId: string;\n\n    constructor() {\n        this.portalId = createRandomString();\n        this.globalClickListener = this.globalClickListener.bind(this);\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentWillLoad() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentDidRender() {\n        const slotElement = this.host.shadowRoot.querySelector('slot');\n        slotElement.assignedElements().forEach(this.setTriggerAttributes);\n    }\n\n    private setupGlobalHandlers() {\n        if (this.open) {\n            document.addEventListener('click', this.globalClickListener, {\n                capture: true,\n            });\n            document.addEventListener('keyup', this.handleGlobalKeyPress);\n        } else {\n            document.removeEventListener('click', this.globalClickListener);\n            document.removeEventListener('keyup', this.handleGlobalKeyPress);\n        }\n    }\n\n    public render() {\n        const cssProperties = this.getCssProperties();\n        const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--popover-z-index',\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <slot name=\"trigger\" />\n                <limel-portal\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{ 'z-index': popoverZIndex }}\n                    openDirection={this.openDirection}\n                >\n                    <limel-popover-surface\n                        contentCollection={this.host.children}\n                        style={cssProperties}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private globalClickListener(event: MouseEvent) {\n        const element: HTMLElement = event.target as HTMLElement;\n        const clickedInside = portalContains(this.host, element);\n        if (this.open && !clickedInside) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.close.emit();\n        }\n    }\n\n    private getCssProperties() {\n        const propertyNames = [\n            '--popover-surface-width',\n            '--popover-body-background-color',\n            '--popover-border-radius',\n        ];\n        const style = getComputedStyle(this.host);\n        const values = propertyNames.map((property) => {\n            return style.getPropertyValue(property);\n        });\n\n        return zipObject(propertyNames, values);\n    }\n\n    private handleGlobalKeyPress = (event: KeyboardEvent) => {\n        if (event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.close.emit();\n    };\n\n    private setTriggerAttributes = (element: HTMLElement) => {\n        const attributes = {\n            'aria-haspopup': true,\n            'aria-expanded': this.open,\n            'aria-controls': this.portalId,\n            role: 'button',\n        };\n\n        for (const [key, value] of Object.entries(attributes)) {\n            if (!value) {\n                element.removeAttribute(key);\n            } else {\n                element.setAttribute(key, String(value));\n            }\n        }\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n    isolation: isolate;\n\n    position: relative;\n    display: flex;\n\n    width: var(--popover-surface-width, auto);\n    max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n    max-width: calc(100vw - 2rem);\n    margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    border-radius: var(--popover-border-radius, functions.pxToRem(12));\n    box-shadow: var(--shadow-depth-16);\n\n    backdrop-filter: blur(functions.pxToRem(5));\n    -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n    &:after {\n        // allows using `--popover-body-background-color` while\n        // getting the blurred backdrop effect\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        z-index: -1;\n\n        opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n        border-radius: var(--popover-border-radius, functions.pxToRem(12));\n        background-color: var(\n            --popover-body-background-color,\n            var(--lime-elevated-surface-background-color)\n        );\n    }\n\n    @include mixins.visualize-keyboard-focus;\n\n    &:focus,\n    &:focus-within {\n        &:after {\n            opacity: 1;\n        }\n    }\n\n    & > * {\n        // this fixes some unwanted layout issues\n        // which might be very hard for consumers to realize\n        // and fix by themselves. Without this code,\n        // if the consumer sets for example paddings in\n        // what they send to the popover, their element\n        // can grow larger than the popover surface\n        box-sizing: border-box;\n    }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n    tag: 'limel-popover-surface',\n    shadow: true,\n    styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n    /**\n     * Content to render\n     */\n    @Prop()\n    public contentCollection: HTMLCollection;\n\n    @Element()\n    private host: HTMLLimelPopoverSurfaceElement;\n\n    public componentDidLoad() {\n        this.appendElement();\n    }\n\n    public render() {\n        return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n    }\n\n    private appendElement() {\n        const portalContainer = this.host.shadowRoot.querySelector(\n            '.limel-popover-surface',\n        );\n\n        Array.from(this.contentCollection).forEach((child) => {\n            if (child.slot === 'trigger') {\n                return;\n            }\n\n            portalContainer.appendChild(child);\n        });\n    }\n}\n"],"mappings":"sSAWgBA,EACZC,EACAC,G,MAEA,GAAID,EAAQE,SAASD,MAAUE,EAAAH,EAAQI,cAAU,MAAAD,SAAA,SAAAA,EAAED,SAASD,IAAQ,CAChE,OAAO,I,CAGX,MAAMI,EAASC,EAAWL,GAC1B,IAAKI,EAAQ,CACT,OAAO,K,CAGX,OAAON,EAAeC,EAASK,EACnC,CAEA,SAASC,EAAWN,GAChB,MAAMO,EAAcP,EAAQQ,QAAQ,4BACpC,GAAID,EAAQ,CACR,OAAOA,EAAOE,Y,CAGlB,MAAMC,EAAWV,EAAQW,cAEzB,OAAOD,EAASE,IACpB,CCpCA,MAAMC,EAAa,0D,MCgENC,EAAO,MAwBhBC,YAAAC,G,uCA+EQC,KAAAC,qBAAwBC,IAC5B,GAAIA,EAAMC,MAAQC,EAAQ,CACtB,M,CAGJF,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,MAAM,EAGbR,KAAAS,qBAAwB1B,IAC5B,MAAM2B,EAAa,CACf,gBAAiB,KACjB,gBAAiBV,KAAKW,KACtB,gBAAiBX,KAAKY,SACtBC,KAAM,UAGV,IAAK,MAAOV,EAAKW,KAAUC,OAAOC,QAAQN,GAAa,CACnD,IAAKI,EAAO,CACR/B,EAAQkC,gBAAgBd,E,KACrB,CACHpB,EAAQmC,aAAaf,EAAKgB,OAAOL,G,cAxH/B,M,6BAoBVd,KAAKY,SAAWQ,IAChBpB,KAAKqB,oBAAsBrB,KAAKqB,oBAAoBC,KAAKtB,K,CAInDuB,YACNvB,KAAKwB,qB,CAGFC,oBACHzB,KAAKwB,qB,CAGFE,qBACH,MAAMC,EAAc3B,KAAKL,KAAKR,WAAWyC,cAAc,QACvDD,EAAYE,mBAAmBC,QAAQ9B,KAAKS,qB,CAGxCe,sBACJ,GAAIxB,KAAKW,KAAM,CACXoB,SAASC,iBAAiB,QAAShC,KAAKqB,oBAAqB,CACzDY,QAAS,OAEbF,SAASC,iBAAiB,QAAShC,KAAKC,qB,KACrC,CACH8B,SAASG,oBAAoB,QAASlC,KAAKqB,qBAC3CU,SAASG,oBAAoB,QAASlC,KAAKC,qB,EAI5CkC,SACH,MAAMC,EAAgBpC,KAAKqC,mBAC3B,MAAMC,EAAgBC,iBAAiBvC,KAAKL,MAAM6C,iBAC9C,qBAGJ,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,QAAME,KAAK,YACXF,EAAA,gBACIG,QAAS5C,KAAKW,KACdkC,YAAa7C,KAAKY,SAClBkC,eAAgB,CAAE,UAAWR,GAC7BS,cAAe/C,KAAK+C,eAEpBN,EAAA,yBACIO,kBAAmBhD,KAAKL,KAAKsD,SAC7BC,MAAOd,K,CAOnBf,oBAAoBnB,GACxB,MAAMnB,EAAuBmB,EAAMiD,OACnC,MAAMC,EAAgBtE,EAAekB,KAAKL,KAAMZ,GAChD,GAAIiB,KAAKW,OAASyC,EAAe,CAC7BlD,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,M,EAIX6B,mBACJ,MAAMgB,EAAgB,CAClB,0BACA,kCACA,2BAEJ,MAAMH,EAAQX,iBAAiBvC,KAAKL,MACpC,MAAM2D,EAASD,EAAcE,KAAKC,GACvBN,EAAMV,iBAAiBgB,KAGlC,OAAOC,EAAUJ,EAAeC,E,wFCpKxC,MAAMI,EAAoB,s+B,MCYbC,EAAc,M,0DAUhBC,mBACH5D,KAAK6D,e,CAGF1B,SACH,OAAOM,EAAA,OAAKC,MAAM,wBAAwBoB,SAAS,K,CAG/CD,gBACJ,MAAME,EAAkB/D,KAAKL,KAAKR,WAAWyC,cACzC,0BAGJoC,MAAMC,KAAKjE,KAAKgD,mBAAmBlB,SAAS9C,IACxC,GAAIA,EAAMkF,OAAS,UAAW,CAC1B,M,CAGJH,EAAgBI,YAAYnF,EAAM,G"}