@limetech/lime-elements 36.4.0 → 37.0.0-dev.1

package/dist/lime-elements/p-623d09d9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["spinnerCss","Spinner","render","h","viewBox","xmlns","this","renderSpinner","limeBranded","class","cx","cy","r","id","d"],"sources":["./src/components/spinner/spinner.scss?tag=limel-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@use 'sass:math';\n@use '../../style/functions';\n@use '../../style/internal/lime-theme';\n\n/**\n * @prop --spinner-color-1: 1st animated stroke color, defaults to `--lime-brand-color-deep-red`.\n * @prop --spinner-color-2: 2nd animated stroke color, defaults to `--lime-brand-color-sellable-orange`.\n * @prop --spinner-color-3: 3rd animated stroke color, defaults to `--lime-brand-color-simple-blue`.\n * @prop --spinner-color-4: 4th animated stroke color, defaults to `--lime-brand-color-orange`.\n * @prop --spinner-color-5: 5th animated stroke color, defaults to `--lime-brand-color-lime-green`.\n * @prop --spinner-color-6: 6th animated stroke color, defaults to `--lime-brand-color-yellow`.\n * @prop --spinner-color-7: 7th animated stroke color, defaults to `--lime-brand-color-flexible-turquoise`.\n * @prop --spinner-color-8: 8th animated stroke color, defaults to `--lime-brand-color-loving-magenta`.\n * @prop --spinner-color-9: 9th animated stroke color, defaults to `--lime-brand-color-dark-blue`.\n * @prop --spinner-color-10: 10th animated stroke color, defaults to `--lime-brand-color-light-grey`.\n */\n\n$stroke-width-normal: 4;\n$stroke-width-thick: 10;\n$colors: var(--spinner-color-1, rgb(var(--lime-brand-color-deep-red))),\n    var(--spinner-color-2, rgb(var(--lime-brand-color-sellable-orange))),\n    var(--spinner-color-3, rgb(var(--lime-brand-color-simple-blue))),\n    var(--spinner-color-4, rgb(var(--lime-brand-color-orange))),\n    var(--spinner-color-5, rgb(var(--lime-brand-color-lime-green))),\n    var(--spinner-color-6, rgb(var(--lime-brand-color-yellow))),\n    var(--spinner-color-7, rgb(var(--lime-brand-color-flexible-turquoise))),\n    var(--spinner-color-8, rgb(var(--lime-brand-color-loving-magenta))),\n    var(--spinner-color-9, rgb(var(--lime-brand-color-dark-blue))),\n    var(--spinner-color-9, rgb(var(--lime-brand-color-light-grey)));\n$dash: 63;\n$duration: length($colors) * 1s;\n$duration-alt: math.div($duration, length($colors));\n$keyframe: math.div(1, length($colors) * 2) * 100;\n\n:host(limel-spinner) {\n    display: block;\n}\n\n@keyframes spin {\n    50% {\n        transform: rotate(180deg);\n    }\n    100% {\n        transform: rotate(720deg);\n    }\n}\n\n@keyframes fade-in-the-spinner {\n    0% {\n        transform: scale(0.7);\n        opacity: 0;\n    }\n    100% {\n        transform: scale(1);\n        opacity: 1;\n    }\n}\n\n@keyframes animate-colored-circles {\n    #{$keyframe * 1%} {\n        stroke-dashoffset: 0;\n    }\n    #{$keyframe * 2%},\n    100% {\n        stroke-dashoffset: $dash;\n    }\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    // size=mini is the default\n    height: functions.pxToRem(24);\n    width: functions.pxToRem(24);\n    transform: translate3d(0, 0, 0);\n    animation: fade-in-the-spinner 0.5s ease forwards;\n}\n\n:host([size='x-small']) {\n    height: functions.pxToRem(32);\n    width: functions.pxToRem(32);\n}\n\n:host([size='small']) {\n    height: functions.pxToRem(34);\n    width: functions.pxToRem(34);\n}\n\n:host([size='medium']) {\n    height: functions.pxToRem(44);\n    width: functions.pxToRem(44);\n}\n\n:host([size='large']) {\n    height: functions.pxToRem(64);\n    width: functions.pxToRem(64);\n}\n\n.spinner {\n    animation: spin $duration-alt linear infinite;\n    transform-origin: center;\n}\n\n.color {\n    animation: animate-colored-circles $duration linear infinite;\n    fill: none;\n    stroke-dasharray: $dash;\n    stroke-dashoffset: $dash;\n    stroke-linecap: round;\n    stroke-width: $stroke-width-normal;\n\n    &.thick {\n        stroke-width: $stroke-width-thick;\n    }\n\n    @for $i from 1 through length($colors) {\n        &:nth-child(#{$i}) {\n            stroke: nth($colors, $i);\n\n            @if $i > 1 {\n                animation-delay: ($i - 1) * $duration-alt;\n            }\n        }\n    }\n}\n\n.outline {\n    stroke: rgba(var(--lime-brand-color-light-grey), 0.3);\n    fill: none;\n    stroke-linecap: round;\n    stroke-width: $stroke-width-normal;\n\n    &.thick {\n        stroke-width: $stroke-width-thick;\n    }\n}\n","import { SpinnerSize } from '@limetech/lime-elements';\nimport { Component, Prop, h } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-spinner\n * @exampleComponent limel-example-spinner-color\n * @exampleComponent limel-example-spinner-size\n */\n@Component({\n    tag: 'limel-spinner',\n    shadow: true,\n    styleUrl: 'spinner.scss',\n})\nexport class Spinner {\n    /**\n     * Determines the size of the spinner.\n     */\n    @Prop({ reflect: true })\n    public size: SpinnerSize = 'mini';\n\n    /**\n     * Gives the spinner the shape of Lime Technologies' logo\n     */\n    @Prop()\n    public limeBranded: boolean = true;\n\n    public render() {\n        return [\n            <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n                {this.renderSpinner()}\n            </svg>,\n        ];\n    }\n\n    private renderSpinner() {\n        if (!this.limeBranded) {\n            return (\n                <g>\n                    <circle class=\"outline\" cx=\"12\" cy=\"12\" r=\"10\" />\n                    <g class=\"spinner\">\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                        <circle class=\"color\" cx=\"12\" cy=\"12\" r=\"10\" />\n                    </g>\n                </g>\n            );\n        }\n\n        return (\n            <g>\n                <g clip-path=\"url(#mask)\">\n                    <circle class=\"outline thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                    <g class=\"spinner\">\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                        <circle class=\"color thick\" cx=\"12\" cy=\"12\" r=\"12\" />\n                    </g>\n                </g>\n                <clipPath id=\"mask\">\n                    <path d=\"M2.166 11.248C2.166 5.04 7.058 0 13.083 0 19.108 0 24 5.04 24 11.248c0 3.229-1.307 6.548-4.533 9.306-3.908 3.343-9.15 3.8-17.254 3.249-2.405-.164-2.753-.588-1.51-1.533C4.61 19.3 2.165 17.025 2.165 11.248zm3.124 9.834c5.563.227 9.416-.246 12.397-2.76 2.432-2.05 3.482-4.56 3.51-7.074.05-4.613-3.636-8.36-8.114-8.36-4.478 0-8.114 3.746-8.114 8.36 0 2.793.607 4.737.726 6.345.092 1.252.03 2.388-.405 3.49z\" />\n                </clipPath>\n            </g>\n        );\n    }\n}\n"],"mappings":"sCAAA,MAAMA,EAAa,sxG,MCaNC,EAAO,M,mCAKW,O,iBAMG,I,CAEvBC,SACH,MAAO,CACHC,EAAA,OAAKC,QAAQ,YAAYC,MAAM,8BAC1BC,KAAKC,iB,CAKVA,gBACJ,IAAKD,KAAKE,YAAa,CACnB,OACIL,EAAA,SACIA,EAAA,UAAQM,MAAM,UAAUC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC1CT,EAAA,KAAGM,MAAM,WACLN,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCT,EAAA,UAAQM,MAAM,QAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,Q,CAMxD,OACIT,EAAA,SACIA,EAAA,iBAAa,cACTA,EAAA,UAAQM,MAAM,gBAAgBC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAChDT,EAAA,KAAGM,MAAM,WACLN,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC9CT,EAAA,UAAQM,MAAM,cAAcC,GAAG,KAAKC,GAAG,KAAKC,EAAE,SAGtDT,EAAA,YAAUU,GAAG,QACTV,EAAA,QAAMW,EAAE,wZ"}

package/dist/lime-elements/p-63111b62.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,g as i}from"./p-c8818b66.js";import{c as r}from"./p-240fda3b.js";const s="@limetech/lime-elements/icons";class n{constructor(){this.promises={};this.cache=caches.open(s)}async get(t,e=""){const i=await this.cache;const r=this.getUrl(t,e);let s=await i.match(r);if(!s){s=await this.fetchData(r,i)}return this.getIcon(s)}async fetchData(t,e){let i=this.promises[t];if(i===undefined){i=e.add(t);this.promises[t]=i}await i;return e.match(t)}async getIcon(t){let e=await t.text();e=e.replace(/#000000/g,"currentColor");if(!this.validSvg(e)){throw new Error("Invalid SVG")}return e}validSvg(t){const e=new DOMParser;const i=e.parseFromString(t,"image/svg+xml");return i.documentElement.tagName.toLowerCase()==="svg"}getUrl(t,e){let i=e||"";if(e&&!e.endsWith("/")){i=`${e}/`}return`${i}assets/icons/${t}.svg`}}const o=new n;const a=(()=>o)();const h=":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important}:host([badge][size=x-small])>div{margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=small])>div{margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important}:host([badge][size=medium])>div{margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important}:host([badge][size=large])>div{margin:0.5rem}";const m=class{constructor(e){t(this,e);this.size=undefined;this.name=undefined;this.badge=undefined}componentDidLoad(){this.loadIcon(this.name)}render(){return e("div",{class:"container"})}async loadIcon(t){if(t===undefined||t===""){return}const e=await this.loadSvg(t);this.renderSvg(e)}loadSvg(t){return a.get(t,r.iconPath)}renderSvg(t){const e=this.host.shadowRoot.querySelector("div.container");if(e){e.innerHTML=t}}get host(){return i(this)}static get watchers(){return{name:["loadIcon"]}}};m.style=h;export{m as limel_icon};
+//# sourceMappingURL=p-63111b62.entry.js.map

package/dist/lime-elements/p-63111b62.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CACHE_NAME","IconCache","constructor","this","promises","cache","caches","open","async","name","path","url","getUrl","response","match","fetchData","getIcon","requestPromise","undefined","add","svgData","text","replace","validSvg","Error","data","parser","DOMParser","svgDoc","parseFromString","documentElement","tagName","toLowerCase","iconPath","endsWith","iconCache","iconCache$1","iconCss","Icon","componentDidLoad","loadIcon","render","h","class","loadSvg","renderSvg","get","config","container","host","shadowRoot","querySelector","innerHTML"],"sources":["./src/global/icon-cache.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["const CACHE_NAME = '@limetech/lime-elements/icons';\n\nexport class IconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache: Promise<Cache>;\n\n    private promises: Record<string, Promise<void>> = {};\n\n    constructor() {\n        this.cache = caches.open(CACHE_NAME);\n    }\n\n    /**\n     * Get icon data from the cache\n     * @param {string} name name of the icon\n     * @param {string} path path on the server where the assets are located\n     * @returns {Promise<string>} svg markup\n     */\n    public async get(name: string, path: string = ''): Promise<string> {\n        const cache = await this.cache;\n        const url = this.getUrl(name, path);\n\n        let response = await cache.match(url);\n        if (!response) {\n            response = await this.fetchData(url, cache);\n        }\n\n        return this.getIcon(response);\n    }\n\n    private async fetchData(url: string, cache: Cache): Promise<Response> {\n        let requestPromise = this.promises[url];\n        if (requestPromise === undefined) {\n            requestPromise = cache.add(url);\n            this.promises[url] = requestPromise;\n        }\n\n        await requestPromise;\n\n        return cache.match(url);\n    }\n\n    /*\n     * Get icon data from a response\n     */\n    private async getIcon(response: Response): Promise<string> {\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        return svgData;\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    private getUrl(name: string, path: string): string {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        return `${iconPath}assets/icons/${name}.svg`;\n    }\n}\n\nconst iconCache = new IconCache();\nexport default (() => {\n    return iconCache;\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n    background-color: var(--icon-background-color, transparent);\n    border-radius: 50%;\n    display: inline-block;\n    line-height: 0;\n    box-sizing: border-box;\n\n    svg {\n        fill: currentColor;\n        height: 100%;\n        pointer-events: none;\n        width: 100%;\n    }\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([size='x-small']) {\n    height: functions.pxToRem(15) !important;\n    width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n    height: functions.pxToRem(20) !important;\n    width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n    height: functions.pxToRem(25) !important;\n    width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n    height: functions.pxToRem(30) !important;\n    width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n    height: functions.pxToRem(23) !important;\n    width: functions.pxToRem(23) !important;\n\n    > div {\n        margin: functions.pxToRem(4);\n    }\n}\n:host([badge][size='small']) {\n    height: functions.pxToRem(30) !important;\n    width: functions.pxToRem(30) !important;\n\n    > div {\n        margin: functions.pxToRem(5);\n    }\n}\n:host([badge][size='medium']) {\n    height: functions.pxToRem(40) !important;\n    width: functions.pxToRem(40) !important;\n\n    > div {\n        margin: functions.pxToRem(8);\n    }\n}\n:host([badge][size='large']) {\n    height: functions.pxToRem(46) !important;\n    width: functions.pxToRem(46) !important;\n\n    > div {\n        margin: functions.pxToRem(8);\n    }\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache';\nimport { IconSize } from './icon.types';\n\n/**\n * The recommended icon library for use with Lime Elements is the Windows 10 set\n * from Icons8 (https://icons8.com/icons/windows). This set is included in the\n * relevant Lime products. If you are using Lime Elements in a non-Lime product,\n * you will have to supply your own icons.\n *\n * The size and color of the icon is set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * ### Setup\n * To use **@lundalogik/lime-icons8**, the `/assets` folder from\n * __@lundalogik/lime-icons8__ must be made available on the webserver.\n * To use a different icon set, the icons must be placed in a folder structure\n * that looks like this: `assets/icons/<name-of-icon>.svg`\n *\n * If `assets` is placed in the root, no other setup is needed. The icons will\n * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.\n *\n * If `assets` is placed in a sub-folder somewhere, the easiest way to make the\n * icons available is to use the HTML `base` element:\n *\n * ```\n * <base href=\"/my/parent/path/\">\n * ```\n *\n * If this is not enough, or if the `base` element is already in use for\n * something else, a global icon path can be configured with the `limel-config`\n * element:\n * ```\n * <limel-config config={{iconPath: '/my/parent/path/'}} />\n * ```\n *\n * ### Lime icons\n * There are icons included in the **@lundalogik/lime-icons8** package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n * :::note\n * Some of the `-lime-` icons have multiple colors and use our own CSS variables\n * instead of HEX or RGB values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * ### Icon Finder\n *\n * Search for an icon and **click on it to copy its name to clipboard**.\n *\n * <limel-example-icon-finder />\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n */\n@Component({\n    tag: 'limel-icon',\n    shadow: true,\n    styleUrl: 'icon.scss',\n})\nexport class Icon {\n    /**\n     * Size of the icon\n     */\n    @Prop({ reflect: true })\n    public size: IconSize;\n\n    /**\n     * Name of the icon\n     */\n    @Prop({ reflect: true })\n    public name: string;\n\n    /**\n     * Set to `true` to give the icon a round background with some padding.\n     * Only works when the `size` attribute is also set.\n     */\n    @Prop({ reflect: true })\n    public badge: boolean;\n\n    @Element()\n    private host: HTMLLimelIconElement;\n\n    public componentDidLoad() {\n        this.loadIcon(this.name);\n    }\n\n    public render() {\n        return <div class=\"container\" />;\n    }\n\n    @Watch('name')\n    protected async loadIcon(name: string) {\n        if (name === undefined || name === '') {\n            return;\n        }\n\n        const svgData = await this.loadSvg(name);\n        this.renderSvg(svgData);\n    }\n\n    /**\n     * Load the SVG data for the icon from the icon cache\n     * @param {string} name name of the icon\n     * @returns {string} the icon SVG data\n     */\n    private loadSvg(name: string) {\n        return iconCache.get(name, config.iconPath);\n    }\n\n    /*\n     * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n     * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n     * will remain the way they look in the file.\n     * Therefore we inject the svg as inline markup instead.\n     */\n    private renderSvg(svgData: string) {\n        const container = this.host.shadowRoot.querySelector('div.container');\n        if (container) {\n            container.innerHTML = svgData;\n        }\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAa,gC,MAENC,EAQTC,cAFQC,KAAAC,SAA0C,GAG9CD,KAAKE,MAAQC,OAAOC,KAAKP,E,CAStBQ,UAAUC,EAAcC,EAAe,IAC1C,MAAML,QAAcF,KAAKE,MACzB,MAAMM,EAAMR,KAAKS,OAAOH,EAAMC,GAE9B,IAAIG,QAAiBR,EAAMS,MAAMH,GACjC,IAAKE,EAAU,CACXA,QAAiBV,KAAKY,UAAUJ,EAAKN,E,CAGzC,OAAOF,KAAKa,QAAQH,E,CAGhBL,gBAAgBG,EAAaN,GACjC,IAAIY,EAAiBd,KAAKC,SAASO,GACnC,GAAIM,IAAmBC,UAAW,CAC9BD,EAAiBZ,EAAMc,IAAIR,GAC3BR,KAAKC,SAASO,GAAOM,C,OAGnBA,EAEN,OAAOZ,EAAMS,MAAMH,E,CAMfH,cAAcK,GAClB,IAAIO,QAAgBP,EAASQ,OAI7BD,EAAUA,EAAQE,QAAQ,WAAY,gBAEtC,IAAKnB,KAAKoB,SAASH,GAAU,CACzB,MAAM,IAAII,MAAM,c,CAGpB,OAAOJ,C,CAMHG,SAASE,GACb,MAAMC,EAAS,IAAIC,UACnB,MAAMC,EAASF,EAAOG,gBAAgBJ,EAAM,iBAE5C,OAAOG,EAAOE,gBAAgBC,QAAQC,gBAAkB,K,CAGpDpB,OAAOH,EAAcC,GACzB,IAAIuB,EAAWvB,GAAQ,GACvB,GAAIA,IAASA,EAAKwB,SAAS,KAAM,CAC7BD,EAAW,GAAGvB,I,CAGlB,MAAO,GAAGuB,iBAAwBxB,O,EAI1C,MAAM0B,EAAY,IAAIlC,EACtB,MAAAmC,EAAe,KACJD,EADI,GClFf,MAAME,EAAU,whC,MC+DHC,EAAI,M,sFAuBNC,mBACHpC,KAAKqC,SAASrC,KAAKM,K,CAGhBgC,SACH,OAAOC,EAAA,OAAKC,MAAM,a,CAIZnC,eAAeC,GACrB,GAAIA,IAASS,WAAaT,IAAS,GAAI,CACnC,M,CAGJ,MAAMW,QAAgBjB,KAAKyC,QAAQnC,GACnCN,KAAK0C,UAAUzB,E,CAQXwB,QAAQnC,GACZ,OAAO0B,EAAUW,IAAIrC,EAAMsC,EAAOd,S,CAS9BY,UAAUzB,GACd,MAAM4B,EAAY7C,KAAK8C,KAAKC,WAAWC,cAAc,iBACrD,GAAIH,EAAW,CACXA,EAAUI,UAAYhC,C"}

package/dist/lime-elements/p-648d9057.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i,g as e}from"./p-c8818b66.js";import{c as s}from"./p-6c094f3f.js";const o=".trigger-anchor{position:relative}";const l=50;const n=class{constructor(i){t(this,i);this.showTooltip=()=>{const t=500;this.showTooltipTimeoutHandle=window.setTimeout((()=>{this.open=true}),t)};this.hideTooltip=()=>{clearTimeout(this.showTooltipTimeoutHandle);this.open=false};this.elementId=undefined;this.label=undefined;this.helperLabel=undefined;this.maxlength=l;this.open=undefined;this.portalId=s();this.tooltipId=s()}connectedCallback(){this.setOwnerAriaLabel();this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){const t=getComputedStyle(this.host).getPropertyValue("--tooltip-z-index");return i("div",{class:"trigger-anchor"},i("limel-portal",{openDirection:"bottom-start",visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t,"pointer-events":"none"}},i("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,maxlength:this.maxlength,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){const t=this.getOwnerElement();t===null||t===void 0?void 0:t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){const t=this.getOwnerElement();t===null||t===void 0?void 0:t.addEventListener("mouseover",this.showTooltip);t===null||t===void 0?void 0:t.addEventListener("mouseout",this.hideTooltip);t===null||t===void 0?void 0:t.addEventListener("click",this.hideTooltip)}removeListeners(){const t=this.getOwnerElement();t===null||t===void 0?void 0:t.removeEventListener("mouseover",this.showTooltip);t===null||t===void 0?void 0:t.removeEventListener("mouseout",this.hideTooltip);t===null||t===void 0?void 0:t.removeEventListener("click",this.hideTooltip)}getOwnerElement(){let t=this.host;do{t=t.parentNode}while(t&&t.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&t.nodeType!==Node.DOCUMENT_NODE);return t===null||t===void 0?void 0:t.getElementById(this.elementId)}get host(){return e(this)}};n.style=o;const a=":host{animation:display-tooltip 0.2s ease;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:0.875rem;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}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";const r=class{constructor(i){t(this,i);this.label=undefined;this.helperLabel=undefined;this.maxlength=undefined}render(){let t=false;if(this.helperLabel&&this.maxlength){t=this.label.length+this.helperLabel.length>this.maxlength}const e={};if(this.maxlength){e.style={"--tooltip-max-width-of-text":`${this.maxlength}`+"ch"}}return[i("text",Object.assign({class:{"has-column-layout":t}},e),i("div",{class:"label"},this.label),i("div",{class:"helper-label"},this.helperLabel))]}};r.style=a;export{n as limel_tooltip,r as limel_tooltip_content};
+//# sourceMappingURL=p-648d9057.entry.js.map

package/dist/lime-elements/p-648d9057.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipCss","DEFAULT_MAX_LENGTH","Tooltip","constructor","hostRef","this","showTooltip","tooltipDelay","showTooltipTimeoutHandle","window","setTimeout","open","hideTooltip","clearTimeout","portalId","createRandomString","tooltipId","connectedCallback","setOwnerAriaLabel","addListeners","disconnectedCallback","removeListeners","render","tooltipZIndex","getComputedStyle","host","getPropertyValue","h","class","openDirection","visible","containerId","containerStyle","label","helperLabel","maxlength","role","id","owner","getOwnerElement","setAttribute","addEventListener","removeEventListener","element","parentNode","nodeType","Node","DOCUMENT_FRAGMENT_NODE","DOCUMENT_NODE","getElementById","elementId","tooltipContentCss","TooltipContent","isLabelsTextLong","length","props","style","Object","assign"],"sources":["./src/components/tooltip/tooltip.scss?tag=limel-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx","./src/components/tooltip/tooltip-content.scss?tag=limel-tooltip-content&encapsulation=shadow","./src/components/tooltip/tooltip-content.tsx"],"sourcesContent":["/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n.trigger-anchor {\n    position: relative;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment.\n * A good practice is to just place them next to each other like below:\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n * @exampleComponent limel-example-tooltip\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n * @private\n */\n@Component({\n    tag: 'limel-tooltip',\n    shadow: true,\n    styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n    /**\n     * ID of the owner element that the tooltip should describe.\n     * Must be a child within the same document fragment as the tooltip element\n     * itself.\n     */\n    @Prop({ reflect: true })\n    public elementId!: string;\n\n    /**\n     * Short descriptive text of the owner element.\n     */\n    @Prop({ reflect: true })\n    public label!: string;\n\n    /**\n     * Additional helper text for the element.\n     * Example usage can be a keyboard shortcut to activate the function of the\n     * owner element.\n     */\n    @Prop({ reflect: true })\n    public helperLabel?: string;\n\n    /**\n     * The maximum amount of characters before rendering 'label' and\n     * 'helperLabel' in two rows.\n     */\n    @Prop({ reflect: true })\n    public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n    @State()\n    private open: boolean;\n\n    @Element()\n    private host: HTMLLimelTooltipElement;\n\n    private portalId: string;\n    private tooltipId: string;\n    private showTooltipTimeoutHandle: number;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.setOwnerAriaLabel();\n        this.addListeners();\n    }\n\n    public disconnectedCallback() {\n        this.removeListeners();\n    }\n\n    public render() {\n        const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--tooltip-z-index'\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <limel-portal\n                    openDirection=\"bottom-start\"\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                >\n                    <limel-tooltip-content\n                        label={this.label}\n                        helperLabel={this.helperLabel}\n                        maxlength={this.maxlength}\n                        role=\"tooltip\"\n                        aria-hidden={!this.open}\n                        id={this.tooltipId}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private setOwnerAriaLabel() {\n        const owner = this.getOwnerElement();\n        owner?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        const owner = this.getOwnerElement();\n        owner?.addEventListener('mouseover', this.showTooltip);\n        owner?.addEventListener('mouseout', this.hideTooltip);\n        owner?.addEventListener('click', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        const owner = this.getOwnerElement();\n        owner?.removeEventListener('mouseover', this.showTooltip);\n        owner?.removeEventListener('mouseout', this.hideTooltip);\n        owner?.removeEventListener('click', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        const tooltipDelay = 500;\n        this.showTooltipTimeoutHandle = window.setTimeout(() => {\n            this.open = true;\n        }, tooltipDelay);\n    };\n\n    private hideTooltip = () => {\n        clearTimeout(this.showTooltipTimeoutHandle);\n        this.open = false;\n    };\n\n    private getOwnerElement(): HTMLElement | undefined {\n        let element: Node = this.host;\n\n        do {\n            element = element.parentNode;\n        } while (\n            element &&\n            element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n            element.nodeType !== Node.DOCUMENT_NODE\n        );\n\n        return (element as ShadowRoot)?.getElementById(this.elementId);\n    }\n}\n",":host {\n    animation: display-tooltip 0.2s ease;\n    display: flex;\n\n    border-radius: 0.25rem;\n    padding: 0.25rem 0.5rem;\n    background-color: rgb(var(--contrast-1300));\n    box-shadow: var(--shadow-depth-16);\n}\n\ntext {\n    font-size: 0.875rem; // 14px\n    line-height: 1.25;\n    display: flex;\n    column-gap: 1rem;\n\n    &.has-column-layout {\n        display: table-cell;\n        width: fit-content;\n        max-width: min(var(--tooltip-max-width-of-text), 80vw);\n        .label {\n            padding-bottom: 0.5rem;\n        }\n        .helper-label {\n            padding-bottom: 0.25rem;\n        }\n    }\n}\n\n.label {\n    color: rgb(var(--contrast-200));\n}\n\n.helper-label {\n    color: rgb(var(--contrast-800));\n\n    &:empty {\n        display: none;\n    }\n}\n\n@keyframes display-tooltip {\n    0% {\n        opacity: 0;\n        transform: translate3d(0, 0, 0) scale(0.94);\n    }\n    100% {\n        opacity: 1;\n        transform: translate3d(0, 0, 0) scale(1);\n    }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * This component is used internally by `limel-tooltip`.\n * @private\n */\n@Component({\n    tag: 'limel-tooltip-content',\n    shadow: true,\n    styleUrl: 'tooltip-content.scss',\n})\nexport class TooltipContent {\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    label!: string;\n\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    helperLabel?: string;\n\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    maxlength?: number;\n\n    public render() {\n        let isLabelsTextLong = false;\n        if (this.helperLabel && this.maxlength) {\n            isLabelsTextLong =\n                this.label.length + this.helperLabel.length > this.maxlength;\n        }\n\n        const props: any = {};\n        if (this.maxlength) {\n            props.style = {\n                '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',\n            };\n        }\n\n        return [\n            <text class={{ 'has-column-layout': isLabelsTextLong }} {...props}>\n                <div class=\"label\">{this.label}</div>\n                <div class=\"helper-label\">{this.helperLabel}</div>\n            </text>,\n        ];\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAa,qCCGnB,MAAMC,EAAqB,G,MAkDdC,EAAO,MAwChBC,YAAAC,G,UA8DQC,KAAAC,YAAc,KAClB,MAAMC,EAAe,IACrBF,KAAKG,yBAA2BC,OAAOC,YAAW,KAC9CL,KAAKM,KAAO,IAAI,GACjBJ,EAAa,EAGZF,KAAAO,YAAc,KAClBC,aAAaR,KAAKG,0BAClBH,KAAKM,KAAO,KAAK,E,wFAnFOV,E,oBAaxBI,KAAKS,SAAWC,IAChBV,KAAKW,UAAYD,G,CAGdE,oBACHZ,KAAKa,oBACLb,KAAKc,c,CAGFC,uBACHf,KAAKgB,iB,CAGFC,SACH,MAAMC,EAAgBC,iBAAiBnB,KAAKoB,MAAMC,iBAC9C,qBAGJ,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,gBACIE,cAAc,eACdC,QAASzB,KAAKM,KACdoB,YAAa1B,KAAKS,SAClBkB,eAAgB,CACZ,UAAWT,EACX,iBAAkB,SAGtBI,EAAA,yBACIM,MAAO5B,KAAK4B,MACZC,YAAa7B,KAAK6B,YAClBC,UAAW9B,KAAK8B,UAChBC,KAAK,UAAS,eACA/B,KAAKM,KACnB0B,GAAIhC,KAAKW,a,CAOrBE,oBACJ,MAAMoB,EAAQjC,KAAKkC,kBACnBD,IAAK,MAALA,SAAK,SAALA,EAAOE,aAAa,mBAAoBnC,KAAKW,U,CAGzCG,eACJ,MAAMmB,EAAQjC,KAAKkC,kBACnBD,IAAK,MAALA,SAAK,SAALA,EAAOG,iBAAiB,YAAapC,KAAKC,aAC1CgC,IAAK,MAALA,SAAK,SAALA,EAAOG,iBAAiB,WAAYpC,KAAKO,aACzC0B,IAAK,MAALA,SAAK,SAALA,EAAOG,iBAAiB,QAASpC,KAAKO,Y,CAGlCS,kBACJ,MAAMiB,EAAQjC,KAAKkC,kBACnBD,IAAK,MAALA,SAAK,SAALA,EAAOI,oBAAoB,YAAarC,KAAKC,aAC7CgC,IAAK,MAALA,SAAK,SAALA,EAAOI,oBAAoB,WAAYrC,KAAKO,aAC5C0B,IAAK,MAALA,SAAK,SAALA,EAAOI,oBAAoB,QAASrC,KAAKO,Y,CAerC2B,kBACJ,IAAII,EAAgBtC,KAAKoB,KAEzB,EAAG,CACCkB,EAAUA,EAAQC,U,OAElBD,GACAA,EAAQE,WAAaC,KAAKC,wBAC1BJ,EAAQE,WAAaC,KAAKE,eAG9B,OAAQL,IAAsB,MAAtBA,SAAO,SAAPA,EAAwBM,eAAe5C,KAAK6C,U,uCClL5D,MAAMC,EAAoB,2tB,MCWbC,EAAc,M,kGAmBhB9B,SACH,IAAI+B,EAAmB,MACvB,GAAIhD,KAAK6B,aAAe7B,KAAK8B,UAAW,CACpCkB,EACIhD,KAAK4B,MAAMqB,OAASjD,KAAK6B,YAAYoB,OAASjD,KAAK8B,S,CAG3D,MAAMoB,EAAa,GACnB,GAAIlD,KAAK8B,UAAW,CAChBoB,EAAMC,MAAQ,CACV,8BAA+B,GAAGnD,KAAK8B,YAAc,K,CAI7D,MAAO,CACHR,EAAA,OAAA8B,OAAAC,OAAA,CAAM9B,MAAO,CAAE,oBAAqByB,IAAwBE,GACxD5B,EAAA,OAAKC,MAAM,SAASvB,KAAK4B,OACzBN,EAAA,OAAKC,MAAM,gBAAgBvB,KAAK6B,c"}

package/dist/lime-elements/p-669626e5.js

@@ -1 +1,2 @@
-function r(r,n){for(var a=-1,t=null==r?0:r.length,u=Array(t);++a<t;)u[a]=n(r[a],a,r);return u}function n(r){return r}export{r as a,n as i}
+function r(r,n){var a=-1,t=r==null?0:r.length,u=Array(t);while(++a<t){u[a]=n(r[a],a,r)}return u}function n(r){return r}export{r as a,n as i};
+//# sourceMappingURL=p-669626e5.js.map

package/dist/lime-elements/p-669626e5.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["arrayMap","array","iteratee","index","length","result","Array","identity","value"],"sources":["./node_modules/lodash-es/_arrayMap.js","./node_modules/lodash-es/identity.js"],"sourcesContent":["/**\n * A specialized version of `_.map` for arrays without support for iteratee\n * shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns the new mapped array.\n */\nfunction arrayMap(array, iteratee) {\n  var index = -1,\n      length = array == null ? 0 : array.length,\n      result = Array(length);\n\n  while (++index < length) {\n    result[index] = iteratee(array[index], index, array);\n  }\n  return result;\n}\n\nexport default arrayMap;\n","/**\n * This method returns the first argument it receives.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Util\n * @param {*} value Any value.\n * @returns {*} Returns `value`.\n * @example\n *\n * var object = { 'a': 1 };\n *\n * console.log(_.identity(object) === object);\n * // => true\n */\nfunction identity(value) {\n  return value;\n}\n\nexport default identity;\n"],"mappings":"AASA,SAASA,EAASC,EAAOC,GACvB,IAAIC,GAAS,EACTC,EAASH,GAAS,KAAO,EAAIA,EAAMG,OACnCC,EAASC,MAAMF,GAEnB,QAASD,EAAQC,EAAQ,CACvBC,EAAOF,GAASD,EAASD,EAAME,GAAQA,EAAOF,EAClD,CACE,OAAOI,CACT,CCFA,SAASE,EAASC,GAChB,OAAOA,CACT,Q"}

package/dist/lime-elements/p-6b952164.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,g as r}from"./p-c8818b66.js";import{c as i}from"./p-6c094f3f.js";import{E as s}from"./p-d7801e00.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 c(e,o){var t;if(e.contains(o)||((t=e.shadowRoot)===null||t===void 0?void 0:t.contains(o))){return true}const r=a(o);if(!r){return false}return c(e,r)}function a(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.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}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=c(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"];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 u=':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;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.75;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 d=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)}};d.style=u;export{l as limel_popover,d as limel_popover_surface};
+//# sourceMappingURL=p-6b952164.entry.js.map

package/dist/lime-elements/p-6b952164.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","portalId","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","open","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","querySelector","Array","from","forEach","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 * @param {HTMLElement} element the parent element\n * @param {HTMLElement} child the child element to check\n * @returns {boolean} `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 * :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\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 * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\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    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\"></slot>\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","@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    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.75;\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":"sSAUgBA,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,CCnCA,MAAMC,EAAa,0D,MCqENC,EAAO,MAwBhBC,YAAAC,G,uCA0EQC,KAAAC,qBAAwBC,IAC5B,GAAIA,EAAMC,MAAQC,EAAQ,CACtB,M,CAGJF,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,MAAM,E,UApGP,M,6BAoBVR,KAAKS,SAAWC,IAChBV,KAAKW,oBAAsBX,KAAKW,oBAAoBC,KAAKZ,K,CAInDa,YACNb,KAAKc,qB,CAGFC,oBACHf,KAAKc,qB,CAGDA,sBACJ,GAAId,KAAKgB,KAAM,CACXC,SAASC,iBAAiB,QAASlB,KAAKW,oBAAqB,CACzDQ,QAAS,OAEbF,SAASC,iBAAiB,QAASlB,KAAKC,qB,KACrC,CACHgB,SAASG,oBAAoB,QAASpB,KAAKW,qBAC3CM,SAASG,oBAAoB,QAASpB,KAAKC,qB,EAI5CoB,SACH,MAAMC,EAAgBtB,KAAKuB,mBAC3B,MAAMC,EAAgBC,iBAAiBzB,KAAKL,MAAM+B,iBAC9C,qBAGJ,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,QAAME,KAAK,YACXF,EAAA,gBACIG,QAAS9B,KAAKgB,KACde,YAAa/B,KAAKS,SAClBuB,eAAgB,CAAE,UAAWR,GAC7BS,cAAejC,KAAKiC,eAEpBN,EAAA,yBACIO,kBAAmBlC,KAAKL,KAAKwC,SAC7BC,MAAOd,K,CAOnBX,oBAAoBT,GACxB,MAAMnB,EAAuBmB,EAAMmC,OACnC,MAAMC,EAAgBxD,EAAekB,KAAKL,KAAMZ,GAChD,GAAIiB,KAAKgB,OAASsB,EAAe,CAC7BpC,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,M,EAIXe,mBACJ,MAAMgB,EAAgB,CAClB,0BACA,kCACA,2BAEJ,MAAMH,EAAQX,iBAAiBzB,KAAKL,MACpC,MAAM6C,EAASD,EAAcE,KAAKC,GACvBN,EAAMV,iBAAiBgB,KAGlC,OAAOC,EAAUJ,EAAeC,E,wFCpKxC,MAAMI,EAAoB,47B,MCYbC,EAAc,M,0DAUhBC,mBACH9C,KAAK+C,e,CAGF1B,SACH,OAAOM,EAAA,OAAKC,MAAM,wBAAwBoB,SAAS,K,CAG/CD,gBACJ,MAAME,EAAkBjD,KAAKL,KAAKR,WAAW+D,cACzC,0BAGJC,MAAMC,KAAKpD,KAAKkC,mBAAmBmB,SAASrE,IACxC,GAAIA,EAAMsE,OAAS,UAAW,CAC1B,M,CAGJL,EAAgBM,YAAYvE,EAAM,G"}

package/dist/lime-elements/p-6c094f3f.js

@@ -1 +1,2 @@
-const t=()=>String.fromCharCode(97+Math.floor(26*Math.random()))+Math.random().toString(36).substring(2)+Math.random().toString(36).substring(2);export{t as c}
+const t=()=>{const t=36;const n=2;const c=97;const o=26;return String.fromCharCode(c+Math.floor(Math.random()*o))+Math.random().toString(t).substring(n)+Math.random().toString(t).substring(n)};export{t as c};
+//# sourceMappingURL=p-6c094f3f.js.map

package/dist/lime-elements/p-6c094f3f.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createRandomString","USE_HEX","SKIP_LEADING_ZERODOT","ASCII_A","NUMBER_OF_LETTERS","String","fromCharCode","Math","floor","random","toString","substring"],"sources":["./src/util/random-string.ts"],"sourcesContent":["export const createRandomString = () => {\n    const USE_HEX = 36;\n    const SKIP_LEADING_ZERODOT = 2;\n    const ASCII_A = 97;\n    const NUMBER_OF_LETTERS = 26;\n\n    return (\n        String.fromCharCode(\n            ASCII_A + Math.floor(Math.random() * NUMBER_OF_LETTERS)\n        ) +\n        Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT) +\n        Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT)\n    );\n};\n"],"mappings":"MAAaA,EAAqB,KAC9B,MAAMC,EAAU,GAChB,MAAMC,EAAuB,EAC7B,MAAMC,EAAU,GAChB,MAAMC,EAAoB,GAE1B,OACIC,OAAOC,aACHH,EAAUI,KAAKC,MAAMD,KAAKE,SAAWL,IAEzCG,KAAKE,SAASC,SAAST,GAASU,UAAUT,GAC1CK,KAAKE,SAASC,SAAST,GAASU,UAAUT,EAAqB,S"}

package/dist/lime-elements/p-6e219bb4.js

@@ -20,4 +20,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var e={UNKNOWN:"Unknown",BACKSPACE:"Backspace",ENTER:"Enter",SPACEBAR:"Spacebar",PAGE_UP:"PageUp",PAGE_DOWN:"PageDown",END:"End",HOME:"Home",ARROW_LEFT:"ArrowLeft",ARROW_UP:"ArrowUp",ARROW_RIGHT:"ArrowRight",ARROW_DOWN:"ArrowDown",DELETE:"Delete",ESCAPE:"Escape",TAB:"Tab"},r=new Set;r.add(e.BACKSPACE),r.add(e.ENTER),r.add(e.SPACEBAR),r.add(e.PAGE_UP),r.add(e.PAGE_DOWN),r.add(e.END),r.add(e.HOME),r.add(e.ARROW_LEFT),r.add(e.ARROW_UP),r.add(e.ARROW_RIGHT),r.add(e.ARROW_DOWN),r.add(e.DELETE),r.add(e.ESCAPE),r.add(e.TAB);var n=new Map;n.set(8,e.BACKSPACE),n.set(13,e.ENTER),n.set(32,e.SPACEBAR),n.set(33,e.PAGE_UP),n.set(34,e.PAGE_DOWN),n.set(35,e.END),n.set(36,e.HOME),n.set(37,e.ARROW_LEFT),n.set(38,e.ARROW_UP),n.set(39,e.ARROW_RIGHT),n.set(40,e.ARROW_DOWN),n.set(46,e.DELETE),n.set(27,e.ESCAPE),n.set(9,e.TAB);var E=new Set;function a(E){var a=E.key;return r.has(a)?a:n.get(E.keyCode)||e.UNKNOWN}function A(e){return E.has(a(e))}E.add(e.PAGE_UP),E.add(e.PAGE_DOWN),E.add(e.END),E.add(e.HOME),E.add(e.ARROW_LEFT),E.add(e.ARROW_UP),E.add(e.ARROW_RIGHT),E.add(e.ARROW_DOWN);export{e as K,A as i,a as n}
+var E={UNKNOWN:"Unknown",BACKSPACE:"Backspace",ENTER:"Enter",SPACEBAR:"Spacebar",PAGE_UP:"PageUp",PAGE_DOWN:"PageDown",END:"End",HOME:"Home",ARROW_LEFT:"ArrowLeft",ARROW_UP:"ArrowUp",ARROW_RIGHT:"ArrowRight",ARROW_DOWN:"ArrowDown",DELETE:"Delete",ESCAPE:"Escape",TAB:"Tab"};var A=new Set;A.add(E.BACKSPACE);A.add(E.ENTER);A.add(E.SPACEBAR);A.add(E.PAGE_UP);A.add(E.PAGE_DOWN);A.add(E.END);A.add(E.HOME);A.add(E.ARROW_LEFT);A.add(E.ARROW_UP);A.add(E.ARROW_RIGHT);A.add(E.ARROW_DOWN);A.add(E.DELETE);A.add(E.ESCAPE);A.add(E.TAB);var r={BACKSPACE:8,ENTER:13,SPACEBAR:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,ARROW_LEFT:37,ARROW_UP:38,ARROW_RIGHT:39,ARROW_DOWN:40,DELETE:46,ESCAPE:27,TAB:9};var R=new Map;R.set(r.BACKSPACE,E.BACKSPACE);R.set(r.ENTER,E.ENTER);R.set(r.SPACEBAR,E.SPACEBAR);R.set(r.PAGE_UP,E.PAGE_UP);R.set(r.PAGE_DOWN,E.PAGE_DOWN);R.set(r.END,E.END);R.set(r.HOME,E.HOME);R.set(r.ARROW_LEFT,E.ARROW_LEFT);R.set(r.ARROW_UP,E.ARROW_UP);R.set(r.ARROW_RIGHT,E.ARROW_RIGHT);R.set(r.ARROW_DOWN,E.ARROW_DOWN);R.set(r.DELETE,E.DELETE);R.set(r.ESCAPE,E.ESCAPE);R.set(r.TAB,E.TAB);var e=new Set;e.add(E.PAGE_UP);e.add(E.PAGE_DOWN);e.add(E.END);e.add(E.HOME);e.add(E.ARROW_LEFT);e.add(E.ARROW_UP);e.add(E.ARROW_RIGHT);e.add(E.ARROW_DOWN);function a(r){var e=r.key;if(A.has(e)){return e}var a=R.get(r.keyCode);if(a){return a}return E.UNKNOWN}function n(E){return e.has(a(E))}export{E as K,n as i,a as n};
+//# sourceMappingURL=p-6e219bb4.js.map

package/dist/lime-elements/p-6e219bb4.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["KEY","UNKNOWN","BACKSPACE","ENTER","SPACEBAR","PAGE_UP","PAGE_DOWN","END","HOME","ARROW_LEFT","ARROW_UP","ARROW_RIGHT","ARROW_DOWN","DELETE","ESCAPE","TAB","normalizedKeys","Set","add","KEY_CODE","mappedKeyCodes","Map","set","navigationKeys","normalizeKey","evt","key","has","mappedKey","get","keyCode","isNavigationEvent"],"sources":["./node_modules/@material/dom/keyboard.js"],"sourcesContent":["/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n/**\n * KEY provides normalized string values for keys.\n */\nexport var KEY = {\n    UNKNOWN: 'Unknown',\n    BACKSPACE: 'Backspace',\n    ENTER: 'Enter',\n    SPACEBAR: 'Spacebar',\n    PAGE_UP: 'PageUp',\n    PAGE_DOWN: 'PageDown',\n    END: 'End',\n    HOME: 'Home',\n    ARROW_LEFT: 'ArrowLeft',\n    ARROW_UP: 'ArrowUp',\n    ARROW_RIGHT: 'ArrowRight',\n    ARROW_DOWN: 'ArrowDown',\n    DELETE: 'Delete',\n    ESCAPE: 'Escape',\n    TAB: 'Tab',\n};\nvar normalizedKeys = new Set();\n// IE11 has no support for new Map with iterable so we need to initialize this\n// by hand.\nnormalizedKeys.add(KEY.BACKSPACE);\nnormalizedKeys.add(KEY.ENTER);\nnormalizedKeys.add(KEY.SPACEBAR);\nnormalizedKeys.add(KEY.PAGE_UP);\nnormalizedKeys.add(KEY.PAGE_DOWN);\nnormalizedKeys.add(KEY.END);\nnormalizedKeys.add(KEY.HOME);\nnormalizedKeys.add(KEY.ARROW_LEFT);\nnormalizedKeys.add(KEY.ARROW_UP);\nnormalizedKeys.add(KEY.ARROW_RIGHT);\nnormalizedKeys.add(KEY.ARROW_DOWN);\nnormalizedKeys.add(KEY.DELETE);\nnormalizedKeys.add(KEY.ESCAPE);\nnormalizedKeys.add(KEY.TAB);\nvar KEY_CODE = {\n    BACKSPACE: 8,\n    ENTER: 13,\n    SPACEBAR: 32,\n    PAGE_UP: 33,\n    PAGE_DOWN: 34,\n    END: 35,\n    HOME: 36,\n    ARROW_LEFT: 37,\n    ARROW_UP: 38,\n    ARROW_RIGHT: 39,\n    ARROW_DOWN: 40,\n    DELETE: 46,\n    ESCAPE: 27,\n    TAB: 9,\n};\nvar mappedKeyCodes = new Map();\n// IE11 has no support for new Map with iterable so we need to initialize this\n// by hand.\nmappedKeyCodes.set(KEY_CODE.BACKSPACE, KEY.BACKSPACE);\nmappedKeyCodes.set(KEY_CODE.ENTER, KEY.ENTER);\nmappedKeyCodes.set(KEY_CODE.SPACEBAR, KEY.SPACEBAR);\nmappedKeyCodes.set(KEY_CODE.PAGE_UP, KEY.PAGE_UP);\nmappedKeyCodes.set(KEY_CODE.PAGE_DOWN, KEY.PAGE_DOWN);\nmappedKeyCodes.set(KEY_CODE.END, KEY.END);\nmappedKeyCodes.set(KEY_CODE.HOME, KEY.HOME);\nmappedKeyCodes.set(KEY_CODE.ARROW_LEFT, KEY.ARROW_LEFT);\nmappedKeyCodes.set(KEY_CODE.ARROW_UP, KEY.ARROW_UP);\nmappedKeyCodes.set(KEY_CODE.ARROW_RIGHT, KEY.ARROW_RIGHT);\nmappedKeyCodes.set(KEY_CODE.ARROW_DOWN, KEY.ARROW_DOWN);\nmappedKeyCodes.set(KEY_CODE.DELETE, KEY.DELETE);\nmappedKeyCodes.set(KEY_CODE.ESCAPE, KEY.ESCAPE);\nmappedKeyCodes.set(KEY_CODE.TAB, KEY.TAB);\nvar navigationKeys = new Set();\n// IE11 has no support for new Set with iterable so we need to initialize this\n// by hand.\nnavigationKeys.add(KEY.PAGE_UP);\nnavigationKeys.add(KEY.PAGE_DOWN);\nnavigationKeys.add(KEY.END);\nnavigationKeys.add(KEY.HOME);\nnavigationKeys.add(KEY.ARROW_LEFT);\nnavigationKeys.add(KEY.ARROW_UP);\nnavigationKeys.add(KEY.ARROW_RIGHT);\nnavigationKeys.add(KEY.ARROW_DOWN);\n/**\n * normalizeKey returns the normalized string for a navigational action.\n */\nexport function normalizeKey(evt) {\n    var key = evt.key;\n    // If the event already has a normalized key, return it\n    if (normalizedKeys.has(key)) {\n        return key;\n    }\n    // tslint:disable-next-line:deprecation\n    var mappedKey = mappedKeyCodes.get(evt.keyCode);\n    if (mappedKey) {\n        return mappedKey;\n    }\n    return KEY.UNKNOWN;\n}\n/**\n * isNavigationEvent returns whether the event is a navigation event\n */\nexport function isNavigationEvent(evt) {\n    return navigationKeys.has(normalizeKey(evt));\n}\n//# sourceMappingURL=keyboard.js.map"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAyBU,IAACA,EAAM,CACbC,QAAS,UACTC,UAAW,YACXC,MAAO,QACPC,SAAU,WACVC,QAAS,SACTC,UAAW,WACXC,IAAK,MACLC,KAAM,OACNC,WAAY,YACZC,SAAU,UACVC,YAAa,aACbC,WAAY,YACZC,OAAQ,SACRC,OAAQ,SACRC,IAAK,OAET,IAAIC,EAAiB,IAAIC,IAGzBD,EAAeE,IAAIlB,EAAIE,WACvBc,EAAeE,IAAIlB,EAAIG,OACvBa,EAAeE,IAAIlB,EAAII,UACvBY,EAAeE,IAAIlB,EAAIK,SACvBW,EAAeE,IAAIlB,EAAIM,WACvBU,EAAeE,IAAIlB,EAAIO,KACvBS,EAAeE,IAAIlB,EAAIQ,MACvBQ,EAAeE,IAAIlB,EAAIS,YACvBO,EAAeE,IAAIlB,EAAIU,UACvBM,EAAeE,IAAIlB,EAAIW,aACvBK,EAAeE,IAAIlB,EAAIY,YACvBI,EAAeE,IAAIlB,EAAIa,QACvBG,EAAeE,IAAIlB,EAAIc,QACvBE,EAAeE,IAAIlB,EAAIe,KACvB,IAAII,EAAW,CACXjB,UAAW,EACXC,MAAO,GACPC,SAAU,GACVC,QAAS,GACTC,UAAW,GACXC,IAAK,GACLC,KAAM,GACNC,WAAY,GACZC,SAAU,GACVC,YAAa,GACbC,WAAY,GACZC,OAAQ,GACRC,OAAQ,GACRC,IAAK,GAET,IAAIK,EAAiB,IAAIC,IAGzBD,EAAeE,IAAIH,EAASjB,UAAWF,EAAIE,WAC3CkB,EAAeE,IAAIH,EAAShB,MAAOH,EAAIG,OACvCiB,EAAeE,IAAIH,EAASf,SAAUJ,EAAII,UAC1CgB,EAAeE,IAAIH,EAASd,QAASL,EAAIK,SACzCe,EAAeE,IAAIH,EAASb,UAAWN,EAAIM,WAC3Cc,EAAeE,IAAIH,EAASZ,IAAKP,EAAIO,KACrCa,EAAeE,IAAIH,EAASX,KAAMR,EAAIQ,MACtCY,EAAeE,IAAIH,EAASV,WAAYT,EAAIS,YAC5CW,EAAeE,IAAIH,EAAST,SAAUV,EAAIU,UAC1CU,EAAeE,IAAIH,EAASR,YAAaX,EAAIW,aAC7CS,EAAeE,IAAIH,EAASP,WAAYZ,EAAIY,YAC5CQ,EAAeE,IAAIH,EAASN,OAAQb,EAAIa,QACxCO,EAAeE,IAAIH,EAASL,OAAQd,EAAIc,QACxCM,EAAeE,IAAIH,EAASJ,IAAKf,EAAIe,KACrC,IAAIQ,EAAiB,IAAIN,IAGzBM,EAAeL,IAAIlB,EAAIK,SACvBkB,EAAeL,IAAIlB,EAAIM,WACvBiB,EAAeL,IAAIlB,EAAIO,KACvBgB,EAAeL,IAAIlB,EAAIQ,MACvBe,EAAeL,IAAIlB,EAAIS,YACvBc,EAAeL,IAAIlB,EAAIU,UACvBa,EAAeL,IAAIlB,EAAIW,aACvBY,EAAeL,IAAIlB,EAAIY,YAIhB,SAASY,EAAaC,GACzB,IAAIC,EAAMD,EAAIC,IAEd,GAAIV,EAAeW,IAAID,GAAM,CACzB,OAAOA,CACf,CAEI,IAAIE,EAAYR,EAAeS,IAAIJ,EAAIK,SACvC,GAAIF,EAAW,CACX,OAAOA,CACf,CACI,OAAO5B,EAAIC,OACf,CAIO,SAAS8B,EAAkBN,GAC9B,OAAOF,EAAeI,IAAIH,EAAaC,GAC3C,Q"}

package/dist/lime-elements/p-715d3252.entry.js

@@ -0,0 +1,2 @@
+import{r as n,h as e}from"./p-c8818b66.js";const r="/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  cursor: pointer;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";const i=class{constructor(r){n(this,r);this.renderPrefix=()=>{if(this.prefix){return e("span",{class:"prefix"},this.prefix)}};this.renderValue=()=>{var n;const r=((n=this.value)!==null&&n!==void 0?n:"").toString().length;if(!this.value&&this.loading){return e("span",{class:"value"},"···")}if(this.value){return e("span",{class:{value:true,[`ch-${r}`]:true}},this.value)}};this.renderSuffix=()=>{if(this.suffix){return e("span",{class:"suffix"},this.suffix)}};this.renderIcon=()=>{if(this.icon){return e("limel-icon",{class:"icon",name:this.icon})}};this.renderProgress=()=>{var n,r;if(((n=this.progress)===null||n===void 0?void 0:n.value)||((r=this.progress)===null||r===void 0?void 0:r.value)===0){return e("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})}};this.renderLabel=()=>{if(this.label){return e("span",{class:"label"},this.label)}};this.renderNotification=()=>{if(this.badge){return e("limel-badge",{label:this.badge})}};this.renderSpinner=()=>{if(this.loading){return e("limel-linear-progress",{indeterminate:true})}};this.value=undefined;this.icon=undefined;this.label=null;this.prefix=undefined;this.suffix=undefined;this.disabled=false;this.badge=undefined;this.loading=false;this.link=undefined;this.progress=undefined}render(){var n,r,i,o,t,s,l,a,c,f;const d=this.checkProps(this===null||this===void 0?void 0:this.prefix)+this.value+" "+this.checkProps(this===null||this===void 0?void 0:this.suffix)+this.checkProps(this===null||this===void 0?void 0:this.label)+". "+this.checkProps((n=this===null||this===void 0?void 0:this.progress)===null||n===void 0?void 0:n.prefix)+this.checkProps((r=this===null||this===void 0?void 0:this.progress)===null||r===void 0?void 0:r.value)+this.checkProps((i=this===null||this===void 0?void 0:this.progress)===null||i===void 0?void 0:i.suffix)+this.checkProps((o=this===null||this===void 0?void 0:this.link)===null||o===void 0?void 0:o.title);const h=!this.disabled?(t=this.link)===null||t===void 0?void 0:t.href:"#";return[e("a",{title:(s=this.link)===null||s===void 0?void 0:s.title,href:h,target:(l=this.link)===null||l===void 0?void 0:l.target,tabindex:"0","aria-label":d,"aria-disabled":this.disabled,class:{"is-clickable":!!((a=this.link)===null||a===void 0?void 0:a.href)&&!this.disabled,"has-circular-progress":!!((c=this.progress)===null||c===void 0?void 0:c.value)||((f=this.progress)===null||f===void 0?void 0:f.value)===0}},this.renderIcon(),this.renderProgress(),e("div",{class:"value-group"},this.renderPrefix(),e("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel()),this.renderNotification()]}checkProps(n){return!n?"":n+" "}};i.style=r;export{i as limel_info_tile};
+//# sourceMappingURL=p-715d3252.entry.js.map

package/dist/lime-elements/p-715d3252.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["infoTileCss","InfoTile","this","renderPrefix","prefix","h","class","renderValue","characterCount","_a","value","toString","length","loading","renderSuffix","suffix","renderIcon","icon","name","renderProgress","progress","_b","maxValue","displayPercentageColors","renderLabel","label","renderNotification","badge","renderSpinner","indeterminate","render","extendedAriaLabel","checkProps","_c","_d","link","title","disabled","_e","href","_f","target","_g","tabindex","_h","_j","_k","propValue"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n    --badge-text-color: var(\n        --info-tile-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --info-tile-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n\n    --circular-progress-text-color: var(\n        --info-tile-progress-text-color,\n        var(--info-tile-text-color)\n    );\n    --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n    --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n    --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n    --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n    --circular-progress-background-color: var(\n        --info-tile-progress-background-color,\n        var(--info-tile-background-color)\n    );\n\n    --label-min-size: 0.75rem;\n    --label-preferred-size: 6cqw;\n    --label-max-size: 1rem;\n\n    --value-min-size: 1rem;\n    --value-preferred-size: 20cqw;\n    --value-max-size: 4rem;\n\n    --suffix-prefix-min-size: 0.75rem;\n    --suffix-prefix-preferred-size: 8cqw;\n    --suffix-prefix-max-size: 1.5rem;\n\n    --icon-min-size: 2rem;\n    --icon-preferred-size: 60cqh;\n    --icon-max-size: calc(100cqw - 0.5rem);\n\n    isolation: isolate;\n    container-type: size;\n    position: relative;\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-info-tile[disabled]) {\n    a {\n        opacity: 0.5;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: flex-start;\n\n    height: 100%;\n    width: 100%;\n    flex-grow: 1;\n\n    padding: 0.25rem 1rem 0.5rem 1rem;\n    border-radius: var(--info-tile-border-radius, 1rem);\n    background-color: var(\n        --info-tile-background-color,\n        var(--lime-elevated-surface-background-color)\n    );\n\n    &.is-clickable {\n        @include mixins.is-elevated-clickable(\n            $background-color:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                ),\n            $background-color--hovered:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                )\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n}\n\n.icon {\n    z-index: 1;\n    position: absolute;\n    top: 0.5rem;\n    right: 0.75rem;\n    padding: 0.25rem;\n\n    aspect-ratio: 1/1;\n\n    color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n    border-radius: 0;\n    height: clamp(\n        var(--icon-min-size),\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n\n    @supports not (container-type: size) {\n        width: max(10%, 3rem);\n    }\n\n    .has-circular-progress & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\n.progress {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n\n    --circular-progress-size: min(\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n    @supports not (container-type: size) {\n        --circular-progress-size: initial;\n    }\n}\n\n.label {\n    z-index: 1;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n    line-height: 1.2;\n    font-size: clamp(\n        var(--label-min-size),\n        var(--label-preferred-size),\n        var(--label-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 0.875rem;\n    }\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: -0.25rem;\n}\n\nlimel-linear-progress {\n    --lime-primary-color: var(--info-tile-text-color);\n    position: absolute;\n    inset: auto 0 0 0;\n    border-radius: 1rem;\n    overflow: hidden;\n}\n\n.value-group {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n    text-shadow: 0 0 0.5rem\n            var(--info-tile-background-color, rgb(var(--contrast-100))),\n        0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n    display: flex;\n}\n\n.prefix,\n.suffix {\n    font-size: clamp(\n        var(--suffix-prefix-min-size),\n        var(--suffix-prefix-preferred-size),\n        var(--suffix-prefix-max-size)\n    );\n    opacity: 0.7;\n\n    @supports not (container-type: size) {\n        font-size: 0.75rem;\n    }\n}\n\n.prefix {\n    align-self: flex-start;\n    line-height: normal;\n    transform: translateY(40%);\n}\n\n.value {\n    transition: opacity 0.2s ease,\n        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n    transform-origin: left;\n    transform: translate3d(0, 0, 0) scale(1);\n\n    @include mixins.truncate-text;\n    font-weight: bold;\n    line-height: normal;\n\n    font-size: clamp(\n        var(--value-min-size),\n        var(--value-preferred-size),\n        var(--value-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 1.5rem;\n    }\n\n    :host(limel-info-tile[loading]) & {\n        opacity: 0.3;\n        transform: translate3d(0, 0, 0) scale(0.9);\n    }\n}\n\n.suffix {\n    transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n    .progress {\n        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n        .has-circular-progress & {\n            right: 0.25rem;\n            bottom: 0.25rem;\n        }\n    }\n}\n\n@container (width < #{$m}) {\n    .value {\n        &.ch-1,\n        &.ch-2,\n        &.ch-3,\n        &.ch-4 {\n            --value-preferred-size: 20cqw;\n        }\n        &.ch-5 {\n            --value-preferred-size: 18cqw;\n        }\n        &.ch-6 {\n            --value-preferred-size: 17cqw;\n        }\n        &.ch-7 {\n            --value-preferred-size: 16cqw;\n        }\n        &.ch-8 {\n            --value-preferred-size: 15cqw;\n        }\n        &.ch-9 {\n            --value-preferred-size: 14cqw;\n        }\n        --value-preferred-size: 13cqw;\n    }\n}\n\n@container (height > #{$xs}) {\n    a {\n        padding-top: 0.75rem;\n        padding-bottom: 1rem;\n    }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n    .value {\n        --value-preferred-size: 32cqh !important;\n    }\n    .suffix,\n    .prefix {\n        --suffix-prefix-preferred-size: 16cqh !important;\n    }\n}\n\n@container (height > #{$s}) {\n    .progress,\n    .icon {\n        position: relative;\n        top: unset;\n        right: unset;\n    }\n    a {\n        align-items: center;\n        justify-content: center;\n    }\n    .label {\n        text-align: center;\n        // -webkit-line-clamp: 3;\n    }\n    .has-circular-progress {\n        .icon {\n            position: absolute;\n            top: 0.5rem;\n            right: 0.5rem;\n            --icon-max-size: 3rem;\n        }\n    }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress } from './info-tile.types';\nimport { Link } from '@limetech/lime-elements';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n    tag: 'limel-info-tile',\n    shadow: true,\n    styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n    /**\n     * A piece of text or number that is the main piece of information\n     * which the component is intended to visualize.\n     */\n    @Prop({ reflect: true })\n    public value: number | string;\n\n    /**\n     * Name of icon for the info tile.\n     */\n    @Prop()\n    public icon?: string;\n\n    /**\n     * The text to show below the info tile. Long labels will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * A string of text that is visually placed before the value.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string;\n\n    /**\n     * A string of text that is visually placed after the value.\n     */\n    @Prop({ reflect: true })\n    public suffix?: string;\n\n    /**\n     * Set to `true` if info tile is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled? = false;\n\n    /**\n     * If supplied, the info tile will display a notification badge.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * Set to `true` to put the component in the `loading` state.\n     * This does _not_ disable the link. To do so, the\n     * `disabled` property should be set to `true` as well.\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * If supplied, the info tile will be a clickable link.\n     *\n     * Supplying a value also adds an elevated effect using a shadow,\n     * as well as `cursor: pointer`, which appears on hover.\n     * While we strongly recommend supplying a link whenever the\n     * component should act as a link, if this is not possible, and\n     * you need to provide interaction through a click handler,\n     * you can still get the correct styling by supplying a `Link`\n     * object with the `href` property set to `'#'`.\n     */\n    @Prop()\n    public link?: Link;\n\n    /**\n     * Properties of the optional circular progress bar.\n     *\n     * Defaults:\n     * - `maxValue`: 100\n     * - `suffix`: %\n     * - `displayPercentageColors`: false\n     *\n     * Colors change with intervals of 10 %.\n     */\n    @Prop()\n    public progress?: InfoTileProgress;\n\n    public render() {\n        const extendedAriaLabel =\n            this.checkProps(this?.prefix) +\n            this.value +\n            ' ' +\n            this.checkProps(this?.suffix) +\n            this.checkProps(this?.label) +\n            '. ' +\n            this.checkProps(this?.progress?.prefix) +\n            this.checkProps(this?.progress?.value) +\n            this.checkProps(this?.progress?.suffix) +\n            this.checkProps(this?.link?.title);\n\n        const link = !this.disabled ? this.link?.href : '#';\n\n        return [\n            <a\n                title={this.link?.title}\n                href={link}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={extendedAriaLabel}\n                aria-disabled={this.disabled}\n                class={{\n                    'is-clickable': !!this.link?.href && !this.disabled,\n                    'has-circular-progress':\n                        !!this.progress?.value || this.progress?.value === 0,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderProgress()}\n                <div class=\"value-group\">\n                    {this.renderPrefix()}\n                    <div class=\"value-and-suffix\">\n                        {this.renderValue()}\n                        {this.renderSuffix()}\n                    </div>\n                    {this.renderSpinner()}\n                </div>\n                {this.renderLabel()}\n            </a>,\n            this.renderNotification(),\n        ];\n    }\n\n    private checkProps(propValue) {\n        return !propValue ? '' : propValue + ' ';\n    }\n\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n\n    private renderValue = () => {\n        const characterCount = (this.value ?? '').toString().length;\n\n        if (!this.value && this.loading) {\n            return <span class=\"value\">···</span>;\n        }\n\n        if (this.value) {\n            return (\n                <span\n                    class={{\n                        value: true,\n                        [`ch-${characterCount}`]: true,\n                    }}\n                >\n                    {this.value}\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (this.suffix) {\n            return <span class=\"suffix\">{this.suffix}</span>;\n        }\n    };\n\n    private renderIcon = () => {\n        if (this.icon) {\n            return <limel-icon class=\"icon\" name={this.icon} />;\n        }\n    };\n\n    private renderProgress = () => {\n        if (this.progress?.value || this.progress?.value === 0) {\n            return (\n                <limel-circular-progress\n                    class=\"progress\"\n                    prefix={this.progress.prefix}\n                    value={this.progress.value}\n                    suffix={this.progress.suffix}\n                    maxValue={this.progress.maxValue}\n                    displayPercentageColors={\n                        this.progress.displayPercentageColors\n                    }\n                />\n            );\n        }\n    };\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span class=\"label\">{this.label}</span>;\n        }\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n\n    private renderSpinner = () => {\n        if (this.loading) {\n            return <limel-linear-progress indeterminate={true} />;\n        }\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAc,u4Q,MCuBPC,EAAQ,M,yBAgITC,KAAAC,aAAe,KACnB,GAAID,KAAKE,OAAQ,CACb,OAAOC,EAAA,QAAMC,MAAM,UAAUJ,KAAKE,O,GAIlCF,KAAAK,YAAc,K,MAClB,MAAMC,IAAkBC,EAAAP,KAAKQ,SAAK,MAAAD,SAAA,EAAAA,EAAI,IAAIE,WAAWC,OAErD,IAAKV,KAAKQ,OAASR,KAAKW,QAAS,CAC7B,OAAOR,EAAA,QAAMC,MAAM,SAAO,M,CAG9B,GAAIJ,KAAKQ,MAAO,CACZ,OACIL,EAAA,QACIC,MAAO,CACHI,MAAO,KACP,CAAC,MAAMF,KAAmB,OAG7BN,KAAKQ,M,GAMdR,KAAAY,aAAe,KACnB,GAAIZ,KAAKa,OAAQ,CACb,OAAOV,EAAA,QAAMC,MAAM,UAAUJ,KAAKa,O,GAIlCb,KAAAc,WAAa,KACjB,GAAId,KAAKe,KAAM,CACX,OAAOZ,EAAA,cAAYC,MAAM,OAAOY,KAAMhB,KAAKe,M,GAI3Cf,KAAAiB,eAAiB,K,QACrB,KAAIV,EAAAP,KAAKkB,YAAQ,MAAAX,SAAA,SAAAA,EAAEC,UAASW,EAAAnB,KAAKkB,YAAQ,MAAAC,SAAA,SAAAA,EAAEX,SAAU,EAAG,CACpD,OACIL,EAAA,2BACIC,MAAM,WACNF,OAAQF,KAAKkB,SAAShB,OACtBM,MAAOR,KAAKkB,SAASV,MACrBK,OAAQb,KAAKkB,SAASL,OACtBO,SAAUpB,KAAKkB,SAASE,SACxBC,wBACIrB,KAAKkB,SAASG,yB,GAO1BrB,KAAAsB,YAAc,KAClB,GAAItB,KAAKuB,MAAO,CACZ,OAAOpB,EAAA,QAAMC,MAAM,SAASJ,KAAKuB,M,GAIjCvB,KAAAwB,mBAAqB,KACzB,GAAIxB,KAAKyB,MAAO,CACZ,OAAOtB,EAAA,eAAaoB,MAAOvB,KAAKyB,O,GAIhCzB,KAAA0B,cAAgB,KACpB,GAAI1B,KAAKW,QAAS,CACd,OAAOR,EAAA,yBAAuBwB,cAAe,M,uDApL7B,K,0DAkBL,M,kCAcD,M,4CA6BXC,S,wBACH,MAAMC,EACF7B,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAME,QACtBF,KAAKQ,MACL,IACAR,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAMa,QACtBb,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAMuB,OACtB,KACAvB,KAAK8B,YAAWvB,EAAAP,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAX,SAAA,SAAAA,EAAEL,QAChCF,KAAK8B,YAAWX,EAAAnB,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAC,SAAA,SAAAA,EAAEX,OAChCR,KAAK8B,YAAWC,EAAA/B,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAa,SAAA,SAAAA,EAAElB,QAChCb,KAAK8B,YAAWE,EAAAhC,OAAI,MAAJA,YAAI,SAAJA,KAAMiC,QAAI,MAAAD,SAAA,SAAAA,EAAEE,OAEhC,MAAMD,GAAQjC,KAAKmC,UAAWC,EAAApC,KAAKiC,QAAI,MAAAG,SAAA,SAAAA,EAAEC,KAAO,IAEhD,MAAO,CACHlC,EAAA,KACI+B,OAAOI,EAAAtC,KAAKiC,QAAI,MAAAK,SAAA,SAAAA,EAAEJ,MAClBG,KAAMJ,EACNM,QAAQC,EAAAxC,KAAKiC,QAAI,MAAAO,SAAA,SAAAA,EAAED,OACnBE,SAAS,IAAG,aACAZ,EAAiB,gBACd7B,KAAKmC,SACpB/B,MAAO,CACH,mBAAkBsC,EAAA1C,KAAKiC,QAAI,MAAAS,SAAA,SAAAA,EAAEL,QAASrC,KAAKmC,SAC3C,4BACMQ,EAAA3C,KAAKkB,YAAQ,MAAAyB,SAAA,SAAAA,EAAEnC,UAASoC,EAAA5C,KAAKkB,YAAQ,MAAA0B,SAAA,SAAAA,EAAEpC,SAAU,IAG1DR,KAAKc,aACLd,KAAKiB,iBACNd,EAAA,OAAKC,MAAM,eACNJ,KAAKC,eACNE,EAAA,OAAKC,MAAM,oBACNJ,KAAKK,cACLL,KAAKY,gBAETZ,KAAK0B,iBAET1B,KAAKsB,eAEVtB,KAAKwB,qB,CAILM,WAAWe,GACf,OAAQA,EAAY,GAAKA,EAAY,G"}