@limetech/lime-elements 37.62.0 → 37.62.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [37.62.1](https://github.com/Lundalogik/lime-elements/compare/v37.62.0...v37.62.1) (2024-09-30)
+
+
+### Bug Fixes
+
+
+* **components:** animate showing & hiding popover-, tooltip-, & menu surfaces ([71edb3d](https://github.com/Lundalogik/lime-elements/commit/71edb3d2e7434e27004e15867fd26687c2f29e6a))
+
 ## [37.62.0](https://github.com/Lundalogik/lime-elements/compare/v37.61.10...v37.62.0) (2024-09-30)
 
 

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

@@ -127,7 +127,7 @@ const Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-const tooltipContentCss = ":host(limel-tooltip-content){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 tooltipContentCss = ":host(limel-tooltip-content){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}";
 
 const TooltipContent = class {
   constructor(hostRef) {

package/dist/cjs/limel-badge_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-badge.limel-tooltip.limel-tooltip-content.entry.cjs.js","mappings":"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","names":["h","Host","abbreviate","createRandomString"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx","./src/components/tooltip/getOwnerElement.tsx","./src/components/tooltip/tooltipTimer.ts","./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":["@use '../../style/functions';\n@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: 2.75rem;\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n","export function getOwnerElement(\n    id: string,\n    startingPoint: Node,\n): HTMLElement | undefined {\n    let element: Node = startingPoint;\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(id);\n}\n","const DEFAULT_DELAY_FOR_SHOWING = 500;\n\nexport class TooltipTimer {\n    private timerHandle: number | null = null;\n    private showCallback: Function;\n    private hideCallback: Function;\n    private delayForShowing: number;\n\n    constructor(\n        showCallback: Function,\n        hideCallback: Function,\n        delayForShowing: number = DEFAULT_DELAY_FOR_SHOWING,\n    ) {\n        this.showCallback = showCallback;\n        this.hideCallback = hideCallback;\n        this.delayForShowing = delayForShowing;\n    }\n\n    showAfterDelay(): void {\n        if (!this.timerHandle) {\n            this.timerHandle = setTimeout(\n                this.showCallback,\n                this.delayForShowing,\n            );\n        }\n    }\n\n    hide(): void {\n        clearTimeout(this.timerHandle);\n        this.timerHandle = null;\n        this.hideCallback();\n    }\n}\n","/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n:host(limel-tooltip) {\n    // Absolutely positioning ensures that this invisible element\n    // does not occupy visible space in the UI.\n    // Without this, `limel-tooltip` could in many cases\n    // mess up the layout, where it is used.\n    // For example, inside a `grid` or `flex` section,\n    // every instance of the tooltip would take some space,\n    // creating gaps and empty holes.\n    position: absolute;\n    pointer-events: none;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './getOwnerElement';\nimport { TooltipTimer } from './tooltipTimer';\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 (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\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 *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\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    /**\n     * Decides the tooltip's location in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top';\n\n    @Element()\n    private host: HTMLLimelTooltipElement;\n\n    @State()\n    private open: boolean;\n\n    private portalId: string;\n    private tooltipId: string;\n    private ownerElement: HTMLElement;\n    private tooltipTimer: TooltipTimer;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n        this.tooltipTimer = new TooltipTimer(\n            () => (this.open = true),\n            () => (this.open = false),\n        );\n    }\n\n    public connectedCallback() {\n        this.ownerElement = getOwnerElement(this.elementId, this.host);\n        this.setOwnerAriaLabel();\n        this.addListeners();\n    }\n\n    public disconnectedCallback() {\n        this.removeListeners();\n    }\n\n    public render(): JSX.Element {\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={this.openDirection}\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                    anchor={this.ownerElement}\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        this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.addEventListener('focus', this.showTooltip);\n        this.ownerElement?.addEventListener('blur', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.removeEventListener('focus', this.showTooltip);\n        this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        this.tooltipTimer.showAfterDelay();\n    };\n\n    private hideTooltip = () => {\n        this.tooltipTimer.hide();\n    };\n}\n",":host(limel-tooltip-content) {\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 *\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"],"version":3}
+{"file":"limel-badge.limel-tooltip.limel-tooltip-content.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,w7DAAw7D;;MCgB57D,KAAK;;;;;EAUP,MAAM;IACT,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,EAC5C,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE;OACzC,IAEDD,sBAAO,IAAI,CAAC,WAAW,EAAE,CAAQ,CAC9B,EACT;GACL;EAEO,WAAW;IACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAChC,OAAOE,iBAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAEO,YAAY;IAChB,MAAM,iBAAiB,GAAG,GAAG,CAAC;IAC9B,MAAM,gBAAgB,GAAG,CAAC,CAAC;IAC3B,IACI,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MAC3B,IAAI,CAAC,KAAK,GAAG,iBAAiB;OACjC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,EAC3C;MACE,OAAO,IAAI,CAAC;KACf;GACJ;;;;SC1DW,eAAe,CAC3B,EAAU,EACV,aAAmB;EAEnB,IAAI,OAAO,GAAS,aAAa,CAAC;EAElC,GAAG;IACC,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC;GAChC,QACG,OAAO;IACP,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,sBAAsB;IAChD,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,aAAa,EACzC;EAEF,OAAQ,OAAsB,aAAtB,OAAO,uBAAP,OAAO,CAAiB,cAAc,CAAC,EAAE,CAAC,CAAC;AACvD;;ACfA,MAAM,yBAAyB,GAAG,GAAG,CAAC;MAEzB,YAAY;EAMrB,YACI,YAAsB,EACtB,YAAsB,EACtB,kBAA0B,yBAAyB;IAR/C,gBAAW,GAAkB,IAAI,CAAC;IAUtC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACjC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;GAC1C;EAED,cAAc;IACV,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACnB,IAAI,CAAC,WAAW,GAAG,UAAU,CACzB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,eAAe,CACvB,CAAC;KACL;GACJ;EAED,IAAI;IACA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,YAAY,EAAE,CAAC;GACvB;;;AC/BL,MAAM,UAAU,GAAG,6DAA6D;;ACOhF,MAAM,kBAAkB,GAAG,EAAE,CAAC;MAmDjB,OAAO;EA+ChB;;IAmEQ,gBAAW,GAAG;MAClB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;KACtC,CAAC;IAEM,gBAAW,GAAG;MAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;;;;qBA5F0B,kBAAkB;yBAMR,KAAK;;IAcvC,IAAI,CAAC,QAAQ,GAAGC,+BAAkB,EAAE,CAAC;IACrC,IAAI,CAAC,SAAS,GAAGA,+BAAkB,EAAE,CAAC;IACtC,IAAI,CAAC,YAAY,GAAG,IAAI,YAAY,CAChC,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EACxB,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAC5B,CAAC;GACL;EAEM,iBAAiB;IACpB,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,YAAY,EAAE,CAAC;GACvB;EAEM,oBAAoB;IACvB,IAAI,CAAC,eAAe,EAAE,CAAC;GAC1B;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC9D,mBAAmB,CACtB,CAAC;IAEF,QACIH,iBAAK,KAAK,EAAC,gBAAgB,IACvBA,0BACI,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,cAAc,EAAE;QACZ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE,MAAM;OAC3B,EACD,MAAM,EAAE,IAAI,CAAC,YAAY,IAEzBA,mCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,IAAI,EACvB,EAAE,EAAE,IAAI,CAAC,SAAS,GACpB,CACS,CACb,EACR;GACL;EAEO,iBAAiB;;IACrB,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;GACvE;EAEO,YAAY;;IAChB,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACnE,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAClE,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;GACjE;EAEO,eAAe;;IACnB,MAAA,IAAI,CAAC,YAAY,0CAAE,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACtE,MAAA,IAAI,CAAC,YAAY,0CAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACrE,MAAA,IAAI,CAAC,YAAY,0CAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAClE,MAAA,IAAI,CAAC,YAAY,0CAAE,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;GACpE;;;;;AC1KL,MAAM,iBAAiB,GAAG,kkBAAkkB;;MCY/kB,cAAc;;;;;;;EAmBhB,MAAM;IACT,IAAI,gBAAgB,GAAG,KAAK,CAAC;IAC7B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE;MACpC,gBAAgB;QACZ,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;KACpE;IAED,MAAM,KAAK,GAAQ,EAAE,CAAC;IACtB,IAAI,IAAI,CAAC,SAAS,EAAE;MAChB,KAAK,CAAC,KAAK,GAAG;QACV,6BAA6B,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI;OAC5D,CAAC;KACL;IAED,OAAO;MACHA,gCAAM,KAAK,EAAE,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,IAAM,KAAK,GAC7DA,iBAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,EACrCA,iBAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAC/C;KACV,CAAC;GACL;;;;;;;;","names":["h","Host","abbreviate","createRandomString"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx","./src/components/tooltip/getOwnerElement.tsx","./src/components/tooltip/tooltipTimer.ts","./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":["@use '../../style/functions';\n@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: 2.75rem;\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n","export function getOwnerElement(\n    id: string,\n    startingPoint: Node,\n): HTMLElement | undefined {\n    let element: Node = startingPoint;\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(id);\n}\n","const DEFAULT_DELAY_FOR_SHOWING = 500;\n\nexport class TooltipTimer {\n    private timerHandle: number | null = null;\n    private showCallback: Function;\n    private hideCallback: Function;\n    private delayForShowing: number;\n\n    constructor(\n        showCallback: Function,\n        hideCallback: Function,\n        delayForShowing: number = DEFAULT_DELAY_FOR_SHOWING,\n    ) {\n        this.showCallback = showCallback;\n        this.hideCallback = hideCallback;\n        this.delayForShowing = delayForShowing;\n    }\n\n    showAfterDelay(): void {\n        if (!this.timerHandle) {\n            this.timerHandle = setTimeout(\n                this.showCallback,\n                this.delayForShowing,\n            );\n        }\n    }\n\n    hide(): void {\n        clearTimeout(this.timerHandle);\n        this.timerHandle = null;\n        this.hideCallback();\n    }\n}\n","/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n:host(limel-tooltip) {\n    // Absolutely positioning ensures that this invisible element\n    // does not occupy visible space in the UI.\n    // Without this, `limel-tooltip` could in many cases\n    // mess up the layout, where it is used.\n    // For example, inside a `grid` or `flex` section,\n    // every instance of the tooltip would take some space,\n    // creating gaps and empty holes.\n    position: absolute;\n    pointer-events: none;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './getOwnerElement';\nimport { TooltipTimer } from './tooltipTimer';\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 (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\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 *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\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    /**\n     * Decides the tooltip's location in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top';\n\n    @Element()\n    private host: HTMLLimelTooltipElement;\n\n    @State()\n    private open: boolean;\n\n    private portalId: string;\n    private tooltipId: string;\n    private ownerElement: HTMLElement;\n    private tooltipTimer: TooltipTimer;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n        this.tooltipTimer = new TooltipTimer(\n            () => (this.open = true),\n            () => (this.open = false),\n        );\n    }\n\n    public connectedCallback() {\n        this.ownerElement = getOwnerElement(this.elementId, this.host);\n        this.setOwnerAriaLabel();\n        this.addListeners();\n    }\n\n    public disconnectedCallback() {\n        this.removeListeners();\n    }\n\n    public render(): JSX.Element {\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={this.openDirection}\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                    anchor={this.ownerElement}\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        this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.addEventListener('focus', this.showTooltip);\n        this.ownerElement?.addEventListener('blur', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.removeEventListener('focus', this.showTooltip);\n        this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        this.tooltipTimer.showAfterDelay();\n    };\n\n    private hideTooltip = () => {\n        this.tooltipTimer.hide();\n    };\n}\n",":host(limel-tooltip-content) {\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","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * This component is used internally by `limel-tooltip`.\n *\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"],"version":3}

package/dist/cjs/limel-dynamic-label_4.cjs.entry.js

@@ -485,7 +485,7 @@ const List = class {
 };
 List.style = listCss;
 
-const menuSurfaceCss = ":host(limel-menu-surface){display:block;max-height:inherit}.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-width:var(--mdc-menu-max-width, calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:var(--mdc-menu-max-height, calc(100vh - 32px));margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform, opacity;z-index:8;transition:opacity 0.03s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1), height 250ms cubic-bezier(0, 0, 0.2, 1);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);background-color:#fff;background-color:var(--mdc-theme-surface, #fff);color:#000;color:var(--mdc-theme-on-surface, #000);border-radius:4px;border-radius:var(--mdc-shape-medium, 4px);transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(0.8);opacity:0}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity 0.075s linear}[dir=rtl] .mdc-menu-surface,.mdc-menu-surface[dir=rtl]{transform-origin-left:top right;transform-origin-right:top left;}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}.mdc-menu-surface--fullwidth{width:100%}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-menu{min-width:112px;min-width:var(--mdc-menu-min-width, 112px)}.mdc-menu .mdc-deprecated-list-item__meta{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list-item__graphic{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list,.mdc-menu .mdc-list{position:relative}.mdc-menu .mdc-deprecated-list .mdc-elevation-overlay,.mdc-menu .mdc-list .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-menu .mdc-deprecated-list-divider{margin:8px 0}.mdc-menu .mdc-deprecated-list-item{user-select:none}.mdc-menu .mdc-deprecated-list-item--disabled{cursor:auto}.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__text,.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic{pointer-events:none}.mdc-menu__selection-group{padding:0;fill:currentColor}.mdc-menu__selection-group .mdc-deprecated-list-item{padding-left:56px;padding-right:16px}[dir=rtl] .mdc-menu__selection-group .mdc-deprecated-list-item,.mdc-menu__selection-group .mdc-deprecated-list-item[dir=rtl]{padding-left:16px;padding-right:56px;}.mdc-menu__selection-group .mdc-menu__selection-group-icon{left:16px;right:initial;display:none;position:absolute;top:50%;transform:translateY(-50%)}[dir=rtl] .mdc-menu__selection-group .mdc-menu__selection-group-icon,.mdc-menu__selection-group .mdc-menu__selection-group-icon[dir=rtl]{left:initial;right:16px;}.mdc-menu-item--selected .mdc-menu__selection-group-icon{display:inline}.mdc-menu-surface{display:var(--limel-menu-surface-display, block);flex-direction:var(--limel-menu-surface-flex-direction, row);max-height:inherit;position:relative;--mdc-menu-max-width:var(\n      --menu-surface-width,\n      min(calc(100vw - 2rem), 20rem)\n  );background-color:var(--lime-elevated-surface-background-color)}:host(limel-menu-surface.has-grid-layout) .mdc-menu-surface{width:var(--menu-surface-width, min(100vw - 2rem, 40rem));max-width:unset}";
+const menuSurfaceCss = ":host(limel-menu-surface){display:block;max-height:inherit}.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-width:var(--mdc-menu-max-width, calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:var(--mdc-menu-max-height, calc(100vh - 32px));margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform, opacity;z-index:8;transition:opacity 0.03s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1), height 250ms cubic-bezier(0, 0, 0.2, 1);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);background-color:#fff;background-color:var(--mdc-theme-surface, #fff);color:#000;color:var(--mdc-theme-on-surface, #000);border-radius:4px;border-radius:var(--mdc-shape-medium, 4px);transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(0.8);opacity:0}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity 0.075s linear}[dir=rtl] .mdc-menu-surface,.mdc-menu-surface[dir=rtl]{transform-origin-left:top right;transform-origin-right:top left;}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}.mdc-menu-surface--fullwidth{width:100%}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-menu{min-width:112px;min-width:var(--mdc-menu-min-width, 112px)}.mdc-menu .mdc-deprecated-list-item__meta{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list-item__graphic{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list,.mdc-menu .mdc-list{position:relative}.mdc-menu .mdc-deprecated-list .mdc-elevation-overlay,.mdc-menu .mdc-list .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-menu .mdc-deprecated-list-divider{margin:8px 0}.mdc-menu .mdc-deprecated-list-item{user-select:none}.mdc-menu .mdc-deprecated-list-item--disabled{cursor:auto}.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__text,.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic{pointer-events:none}.mdc-menu__selection-group{padding:0;fill:currentColor}.mdc-menu__selection-group .mdc-deprecated-list-item{padding-left:56px;padding-right:16px}[dir=rtl] .mdc-menu__selection-group .mdc-deprecated-list-item,.mdc-menu__selection-group .mdc-deprecated-list-item[dir=rtl]{padding-left:16px;padding-right:56px;}.mdc-menu__selection-group .mdc-menu__selection-group-icon{left:16px;right:initial;display:none;position:absolute;top:50%;transform:translateY(-50%)}[dir=rtl] .mdc-menu__selection-group .mdc-menu__selection-group-icon,.mdc-menu__selection-group .mdc-menu__selection-group-icon[dir=rtl]{left:initial;right:16px;}.mdc-menu-item--selected .mdc-menu__selection-group-icon{display:inline}.mdc-menu-surface{opacity:1;display:var(--limel-menu-surface-display, block);flex-direction:var(--limel-menu-surface-flex-direction, row);max-height:inherit;position:relative;--mdc-menu-max-width:var(\n      --menu-surface-width,\n      min(calc(100vw - 2rem), 20rem)\n  );background-color:var(--lime-elevated-surface-background-color)}:host(limel-menu-surface.has-grid-layout) .mdc-menu-surface{width:var(--menu-surface-width, min(100vw - 2rem, 40rem));max-width:unset}";
 
 const MenuSurface = class {
   constructor(hostRef) {

package/dist/cjs/limel-dynamic-label_4.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-dynamic-label.limel-helper-line.limel-list.limel-menu-surface.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MC2Bhf,YAAY;;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;GACL;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAGA,wBAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAOC,wCAAgB,SAAS,EAAI,CAAC;GACxC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAOA,sBAAO,KAAK,CAAQ,CAAC;GAC/B;;;;AC1FL,MAAM,aAAa,GAAG,+yBAA+yB;;MC2BxzB,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,kBAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAOA,kBAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACIA,QAACC,UAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBACvC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/BD,qBACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;ACpEE,MAAM,mBAAmB,GAE5B,CAAC,KAAK;EACN,QACIA,iBAAK,KAAK,EAAC,gBAAgB;IACvBA,iBACI,KAAK,EAAE;;0BAEG,KAAK,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE;qBAChD;MAELA,mBACI,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B;MACFA,iBAAK,KAAK,EAAC,uBAAuB;QAC9BA,iBAAK,KAAK,EAAC,yBAAyB,GAAG;QACvCA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;IACNA,mBACI,KAAK,EAAE,GAAG,KAAK,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN,EACR;AACN,CAAC;;MCjCY,YAAY;EAAzB;IACY,kBAAa,GAAuB;MACxC,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,KAAK;KACpB,CAAC;;;;;;;;;;IAuEM,oCAA+B,GAAG,CACtC,KAAsC;MAEtC,IAAI,MAAM,CAAC;MACX,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE;QACjD,IAAI,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAE5B;aAAM;UACH,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAkB,CAAC;UACvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,MAAM,GAAG,CAAC,CAAC;YACX,MAAM;WACT;UAED,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACxC,MAAM,GAAG,CAAC,CAAC;;;WAGd;SACJ;OACJ;MAED,OAAO,MAAM,CAAC;KACjB,CAAC;;;;;;;;IASM,mBAAc,GAAG,CACrB,IAA8B,EAC9BE,OAAa;MAEb,IAAI,WAAW,IAAI,IAAI,EAAE;QACrB,QACIF,gBAAI,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,WAAW;UACnD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;UAClCA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACtC,EACP;OACL;MAED,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QAClD,OAAO,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAEE,OAAK,CAAC,CAAC;OAC/D;MAED,MAAM,UAAU,GAAG;QACf,0BAA0B,EAAE,IAAI;QAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,uBAAuB,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;OAC1D,CAAC;MAEF,MAAM,UAAU,GAA0B,EAAE,CAAC;MAC7C,IAAIA,OAAK,KAAK,IAAI,CAAC,0BAA0B,EAAE;QAC3C,UAAU,CAAC,QAAQ,GAAG,GAAG,CAAC;OAC7B;MAED,QACIF,8BACI,KAAK,EAAE,UAAU,mBACF,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnCE,OAAK,IACb,UAAU;QAEb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;QAClC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI;QAC9D,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CACnC,EACP;KACL,CAAC;IAEM,2BAAsB,GAAG,CAAC,IAAmB;MACjD,IAAI,MAAM,IAAI,IAAI,EAAE;QAChB,OAAOF,gBAAI,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAM,CAAC;OAChE;KACJ,CAAC;IAaM,wBAAmB,GAAG,CAAC,IAAc;;MACzC,OAAO,CAAC,EAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,0CAAE,IAAI,CAAA,CAAC;KACzC,CAAC;;;;;;;IAQM,eAAU,GAAG,CAAC,IAAc;MAChC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;QACzB,QACIA,kBAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ,EACjE;OACL;MAED,QACIA,iBAAK,KAAK,EAAC,gCAAgC;QACvCA,iBAAK,KAAK,EAAC,gDAAgD;UACvDA,iBAAK,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,IAAI,CACR,CACJ;QACNA,iBAAK,KAAK,EAAC,0CAA0C,IAChD,IAAI,CAAC,aAAa,CACjB,CACJ,EACR;KACL,CAAC;IAEM,iBAAY,GAAG,CAAC,IAAc;MAClC,OAAO,EAAE,eAAe,IAAI,IAAI,CAAC,CAAC;KACrC,CAAC;;;;;;;;IASM,eAAU,GAAG,CAAC,MAA0B,EAAE,IAAc;MAC5D,MAAM,KAAK,GAAQ,EAAE,CAAC;MACtB,MAAM,IAAI,GAAGD,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACpC,IAAI,CAAC,IAAI,EAAE;QACP,OAAO;OACV;MAED,MAAM,KAAK,GAAGI,yBAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;MAEtD,IAAI,KAAK,EAAE;QACP,IAAI,MAAM,CAAC,UAAU,EAAE;UACnB,KAAK,CAAC,yBAAyB,CAAC,GAAG,KAAK,CAAC;SAC5C;aAAM;UACH,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;SACvB;OACJ;MAED,QACIH,wBACI,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,KAAK,EAAC,mCAAmC,EACzC,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,MAAM,CAAC,QAAQ,GACvB,EACJ;KACL,CAAC;IAEM,kBAAa,GAAG;MACpB,MAAM,OAAO,GAAG;QACZ,6BAA6B,EAAE,IAAI;QACnC,oCAAoC,EAAE,IAAI;OAC7C,CAAC;MACF,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;QACtB,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;OACxC;MAED,OAAOA,gBAAI,KAAK,EAAE,OAAO,GAAI,CAAC;KACjC,CAAC;IAEM,qBAAgB,GAAG,CAAC,OAAwC;MAChE,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QAClC,OAAO;OACV;MAED,QACIA,wBACI,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,OAAO,EACd,aAAa,EAAC,YAAY;QAE1BA,+BACI,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,GACf,CACO,EACf;KACL,CAAC;IAEM,0BAAqB,GAAG,CAC5B,MAA0B,EAC1B,IAAc,EACdE,OAAa;MAEb,IAAI,YAAY,CAAC;MACjB,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE;QACzB,YAAY,IACRF,QAAC,mBAAmB,IAChB,EAAE,EAAE,KAAKE,OAAK,EAAE,EAChB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL,CAAC;OACL;WAAM,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;QACnC,YAAY,IACRF,QAACI,kCAAgB,IACb,EAAE,EAAE,KAAKF,OAAK,EAAE,EAChB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL,CAAC;OACL;MAED,MAAM,UAAU,GAAG;QACf,0BAA0B,EAAE,IAAI;QAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,gCAAgC,EAAE,CAAC,IAAI,CAAC,aAAa;QACrD,uBAAuB,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;OAC1D,CAAC;MAEF,MAAM,UAAU,GAA0B,EAAE,CAAC;MAC7C,IAAIA,OAAK,KAAK,IAAI,CAAC,0BAA0B,EAAE;QAC3C,UAAU,CAAC,QAAQ,GAAG,GAAG,CAAC;OAC7B;MAED,QACIF,8BACI,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAM,CAAC,IAAI,kBACH,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnCE,OAAK,IACb,UAAU,GAEb,IAAI,CAAC,4BAA4B,CAAC,MAAM,EAAE,IAAI,EAAE,YAAY,CAAC,CAC7D,EACP;KACL,CAAC;IAEM,iCAA4B,GAAG,CACnC,MAA0B,EAC1B,IAAc,EACd,YAAiB;MAEjB,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO;UACH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI;UAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UACrBF,iBAAK,KAAK,EAAC,gCAAgC,IACtC,YAAY,CACX;SACT,CAAC;OACL;MAED,OAAO;QACHA,iBAAK,KAAK,EAAC,mCAAmC,IAAE,YAAY,CAAO;QACnE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;OACxB,CAAC;KACL,CAAC;GACL;EAzUU,MAAM,CACT,KAAsC,EACtC,SAA6B,EAAE;IAE/B,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;IACpB,IAAI,CAAC,MAAM,mCAAQ,IAAI,CAAC,aAAa,GAAK,MAAM,CAAE,CAAC;IAEnD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI;MAC5B,OAAO,eAAe,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;KAC1D,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI;MAC5B,OAAO,MAAM,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;KACxC,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC;IAC1D,MAAM,mBAAmB,GAAG,CAAC,YAAY,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC;IACT,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI;MACpB,KAAK,UAAU;QACX,IAAI,GAAG,OAAO,CAAC;QACf,MAAM;MACV,KAAK,OAAO;QACR,IAAI,GAAG,YAAY,CAAC;QACpB,MAAM;MACV;QACI,IAAI,GAAG,SAAS,CAAC;KACxB;IAED,IAAI,CAAC,0BAA0B;MAC3B,IAAI,CAAC,+BAA+B,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG;MACf,qBAAqB,EAAE,IAAI;MAC3B,+BAA+B,EAAE,IAAI,CAAC,QAAQ;MAC9C,UAAU,EAAE,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;MAC1D,kCAAkC,EAAE,IAAI,CAAC,UAAU;MACnD,eAAe,EACX,IAAI,CAAC,QAAQ;QACb,IAAI,CAAC,UAAU;QACf,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;KAC1D,CAAC;IAEF,QACIA,gBAAI,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,sBAAmB,UAAU,IACzD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAC9B,EACP;GACL;EA+FO,mBAAmB,CAAC,IAAc;IACtC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE;MACjC,OAAO;KACV;IAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAE1C,OAAOA,QAAC,gBAAgB,oBAAK,KAAK,EAAI,CAAC;GAC1C;;;ACjLL,MAAM,OAAO,GAAG,i91JAAi91J;;ACkBj+1J,MAAM,EAAE,YAAY,EAAE,GAAGK,iBAAW,CAAC;MAwBxB,IAAI;;;;;IAyCL,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;IAyFlC,UAAK,GAAG;MACZ,IAAI,CAAC,SAAS,EAAE,CAAC;MAEjB,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB,CAAC;IAEM,cAAS,GAAG;MAChB,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;OACvB;MAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CACjD,sBAAsB,CACzB,CAAC;MACF,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;OACV;MAED,IAAI,CAAC,OAAO,GAAG,IAAIC,iBAAO,CAAC,OAAO,CAAC,CAAC;MACpC,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC;KACpC,CAAC;IAEM,mBAAc,GAAG;MACrB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MAEvD,IAAI,CAAC,UAAU,GAAG,CAAC,YAAY,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAC1D,IAAI,CAAC,IAAI,CACZ,CAAC;MACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC;MAEzC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MACrD,IAAI,CAAC,OAAO,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KACjD,CAAC;IAEM,aAAQ,GAAG;;MACf,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MACxD,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,EAAE,CAAC;KAC3B,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAyB;MAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAChB,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE5C,OAAO;OACV;MAED,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC;IAEM,uBAAkB,GAAG,CAAC,KAAa;MACvC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAe,CAAC;MACnE,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;QAC3B,OAAO;OACV;MAED,MAAM,YAAY,GAAa,SAAS,CAAC,IAAI,CAAC,CAAC,IAAc;QACzD,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;OAC1B,CAAC,CAAC;MAEH,IAAI,YAAY,EAAE;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;UACvB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;SACnC;QAED,IAAI,CAAC,MAAM,CAAC,IAAI,iCAAM,YAAY,KAAE,QAAQ,EAAE,KAAK,IAAG,CAAC;OAC1D;MAED,IAAI,SAAS,CAAC,KAAK,CAAC,KAAK,YAAY,EAAE;QACnC,IAAI,CAAC,MAAM,CAAC,IAAI,iCAAM,SAAS,CAAC,KAAK,CAAC,KAAE,QAAQ,EAAE,IAAI,IAAG,CAAC;OAC7D;KACJ,CAAC;IAEM,sBAAiB,GAAG,CAAC,KAAa;MACtC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAe,CAAC;MACnE,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;QAC3B,OAAO;OACV;MAED,MAAM,aAAa,GAAe,SAAS;SACtC,MAAM,CAAC,CAAC,IAAc,EAAE,SAAiB;QACtC,IAAI,SAAS,KAAK,KAAK,EAAE;;;UAGrB,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;SACzB;;QAGD,OAAO,IAAI,CAAC,QAAQ,CAAC;OACxB,CAAC;SACD,GAAG,CAAC,CAAC,IAAc;QAChB,uCAAY,IAAI,KAAE,QAAQ,EAAE,IAAI,IAAG;OACtC,CAAC,CAAC;MAEP,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACnC,CAAC;IAEM,eAAU,GAAG,CAAC,IAAc;MAChC,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;KACjC,CAAC;;;oBA5N0B,OAAO;;iCAkBK,CAAC;;EAwBlC,iBAAiB;IACpB,IAAI,CAAC,KAAK,EAAE,CAAC;GAChB;EAEM,oBAAoB;IACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;GACnB;EAEM,gBAAgB;IACnB,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAClC;EAEM,MAAM;;IACT,IAAI,CAAC,MAAM,GAAG;MACV,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;KAC1B,CAAC;IACF,IAAI,qBAAqB,GAAG,EAAC,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,EAAE,CAAA,CAAC;IACnE,IAAI,IAAI,CAAC,qBAAqB,GAAG,CAAC,EAAE;MAChC,qBAAqB,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAE/D,QACIN,QAACC,UAAI,IACD,KAAK,EAAE;QACH,yBAAyB,EAAE,GAAG,qBAAqB,EAAE;OACxD,IAEA,IAAI,CACF,EACT;GACL;EAGS,UAAU;IAChB,IAAI,CAAC,cAAc,EAAE,CAAC;GACzB;EAGS,YAAY;IAClB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO;KACV;IAED,UAAU,CAAC;MACP,IAAI,CAAC,KAAK,EAAE,CAAC;MAEb,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,SAAS;WACjC,MAAM,CAAC,CAAC,IAAc,KAAK,IAAI,CAAC,QAAQ,CAAC;WACzC,GAAG,CAAC,CAAC,IAAc,KAAK,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;OACzD;WAAM;QACH,MAAM,aAAa,GAAG,SAAS,CAAC,SAAS,CACrC,CAAC,IAAc,KAAK,IAAI,CAAC,QAAQ,CACpC,CAAC;QAEF,IAAI,aAAa,KAAK,CAAC,CAAC,EAAE;UACtB,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC;SACrC;aAAM;UACH,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;SAC9C;OACJ;KACJ,EAAE,CAAC,CAAC,CAAC;GACT;EA+GO,uBAAuB;;IAC3B,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,EAAE;;MAEjD,OAAO,CAAC,IAAI,CACR,sKAAsK,CACzK,CAAC;KACL;GACJ;;;;;;;;;;AChSL,MAAM,cAAc,GAAG,ynIAAynI;;MC0BnoI,WAAW;;;;IAoDZ,UAAK,GAAG;MACZ,MAAM,WAAW,GACb,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;MAC5D,IAAI,CAAC,WAAW,EAAE;QACd,OAAO;OACV;MAED,IAAI,CAAC,WAAW,GAAG,IAAIM,wBAAc,CAAC,WAAW,CAAC,CAAC;MACnD,IAAI,CAAC,WAAW,CAAC,eAAe,CAACC,gBAAM,CAAC,SAAS,CAAC,CAAC;MAEnD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,mBAAmB,EAAE;QAC7D,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;MAC1D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE;QACjD,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;KACN,CAAC;IAEM,aAAQ,GAAG;;MACf,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,EAAE,CAAC;MAC5B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,mBAAmB,EAAE;QAChE,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;MAC7D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC3D,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAK;MAChC,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC;MAEnE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACZ,OAAO;OACV;MAED,IAAIC,gBAAY,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;QACvC,OAAO;OACV;MAED,IAAI,IAAI,CAAC,kBAAkB,EAAE;QACzB,MAAM,uBAAuB,GAAG,WAAW,CAAC,QAAQ,CAChD,IAAI,CAAC,kBAAkB,CAC1B,CAAC;QAEF,IAAI,uBAAuB,EAAE;UACzB,OAAO;SACV;OACJ;MAED,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,4BAA4B,EAAE,CAAC;KACvC,CAAC;IAEM,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;OACvB;KACJ,CAAC;IAEM,iCAA4B,GAAG;;;;;;MAMnC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;QAC/C,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,IAAI;OACb,CAAC,CAAC;;MAEH,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;QACjD,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,IAAI;OACb,CAAC,CAAC;;;;MAIH,QAAQ,CAAC,gBAAgB,CACrB,SAAS,EACT;QACI,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;UAClD,OAAO,EAAE,IAAI;SAChB,CAAC,CAAC;OACN,EACD;QACI,IAAI,EAAE,IAAI;OACb,CACJ,CAAC;KACL,CAAC;IAEM,cAAS,GAAG,CAAC,KAAK;MACtB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;KAC1B,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB;MACzC,MAAM,QAAQ,GACV,KAAK,CAAC,GAAG,KAAKC,eAAM,IAAI,KAAK,CAAC,OAAO,KAAKC,wBAAe,CAAC;MAC9D,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,KAAKC,YAAG,IAAI,KAAK,CAAC,OAAO,KAAKC,qBAAY,CAAC;MAElE,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,EAAE;QAClC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;OACvB;KACJ,CAAC;gBAvJY,KAAK;;;EAmBZ,iBAAiB;IACpB,IAAI,CAAC,KAAK,EAAE,CAAC;GAChB;EAEM,oBAAoB;IACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;GACnB;EAEM,gBAAgB;IACnB,IAAI,CAAC,KAAK,EAAE,CAAC;GAChB;EAEM,MAAM;IACT,MAAM,SAAS,GAAG;MACd,UAAU,EAAE,IAAI;MAChB,kBAAkB,EAAE,IAAI;MACxB,wBAAwB,EAAE,IAAI,CAAC,IAAI;MACnC,0BAA0B,EAAE,IAAI;MAChC,mBAAmB,EAAE,IAAI;KAC5B,CAAC;IAEF,QACIb,iBAAK,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAC,IAAI,IAChCA,qBAAQ,CACN,EACR;GACL;;;;;;;;;;","names":["getIconName","h","Host","index","getIconColor","CheckboxTemplate","listStrings","MDCList","MDCMenuSurface","Corner","isDescendant","ESCAPE","ESCAPE_KEY_CODE","TAB","TAB_KEY_CODE"],"sources":["./src/components/dynamic-label/dynamic-label.scss?tag=limel-dynamic-label&encapsulation=shadow","./src/components/dynamic-label/dynamic-label.tsx","./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx","./src/components/list/radio-button/radio-button.template.tsx","./src/components/list/list-renderer.tsx","./src/components/list/list.scss?tag=limel-list&encapsulation=shadow","./src/components/list/list.tsx","./src/components/menu-surface/menu-surface.scss?tag=limel-menu-surface&encapsulation=shadow","./src/components/menu-surface/menu-surface.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n\n* {\n    box-sizing: border-box;\n    min-width: 0;\n}\n\n:host(limel-dynamic-label) {\n    --limel-dynamic-label-min-height: 1.75rem;\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    border-radius: 0.5rem;\n    min-width: 0;\n}\n\nlimel-icon {\n    --limel-icon-svg-margin: 0.125rem;\n    border-radius: 0.25rem;\n    flex-shrink: 0;\n    width: var(--limel-dynamic-label-min-height);\n    color: rgb(\n        var(--contrast-900)\n    ); // The default `false` color. Will be overwritten by `Icon`\n}\n\nspan {\n    @include mixins.truncate-text;\n    flex-grow: 1;\n    font-size: 0.8125rem; // `13px`, Like Checkbox & Switch\n    color: var(--mdc-theme-on-surface);\n}\n","import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <span>{label}</span>;\n    }\n}\n",":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n","import { FunctionalComponent, h } from '@stencil/core';\n\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div class=\"mdc-form-field\">\n            <div\n                class={`\n                        mdc-radio\n                        ${props.disabled ? 'mdc-radio--disabled' : ''}\n                    `}\n            >\n                <input\n                    class=\"mdc-radio__native-control\"\n                    type=\"radio\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled}\n                    onChange={props.onChange}\n                />\n                <div class=\"mdc-radio__background\">\n                    <div class=\"mdc-radio__outer-circle\" />\n                    <div class=\"mdc-radio__inner-circle\" />\n                </div>\n            </div>\n            <label\n                class={`${props.disabled ? 'disabled' : ''}`}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","import { ListItem } from './list-item.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { h } from '@stencil/core';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { ListRendererConfig } from './list-renderer-config';\nimport { RadioButtonTemplate } from './radio-button/radio-button.template';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nexport class ListRenderer {\n    private defaultConfig: ListRendererConfig = {\n        isOpen: true,\n        badgeIcons: false,\n    };\n\n    private config: ListRendererConfig;\n\n    private hasIcons: boolean;\n    private twoLines: boolean;\n    private avatarList: boolean;\n    private commandKey: boolean;\n\n    private applyTabIndexToItemAtIndex: number;\n\n    public render(\n        items: Array<ListItem | ListSeparator>,\n        config: ListRendererConfig = {},\n    ) {\n        items = items || [];\n        this.config = { ...this.defaultConfig, ...config };\n\n        this.twoLines = items.some((item) => {\n            return 'secondaryText' in item && !!item.secondaryText;\n        });\n\n        this.hasIcons = items.some((item) => {\n            return 'icon' in item && !!item.icon;\n        });\n\n        this.avatarList = this.config.badgeIcons && this.hasIcons;\n        const selectableListTypes = ['selectable', 'radio', 'checkbox'];\n\n        let role;\n        switch (this.config.type) {\n            case 'checkbox':\n                role = 'group';\n                break;\n            case 'radio':\n                role = 'radiogroup';\n                break;\n            default:\n                role = 'listbox';\n        }\n\n        this.applyTabIndexToItemAtIndex =\n            this.getIndexForWhichToApplyTabIndex(items);\n\n        const classNames = {\n            'mdc-deprecated-list': true,\n            'mdc-deprecated-list--two-line': this.twoLines,\n            selectable: selectableListTypes.includes(this.config.type),\n            'mdc-deprecated-list--avatar-list': this.avatarList,\n            'list--compact':\n                this.twoLines &&\n                this.commandKey &&\n                ['small', 'x-small'].includes(this.config.iconSize),\n        };\n\n        return (\n            <ul class={classNames} role={role} aria-orientation=\"vertical\">\n                {items.map(this.renderListItem)}\n            </ul>\n        );\n    }\n\n    /**\n     * Determine which ListItem should have the `tab-index` attribute set,\n     * and return the index at which that ListItem is located in `items`.\n     * Returns `undefined` if no item should have the attribute set.\n     * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n     *\n     * @param items - the items of the list, including any `ListSeparator`:s\n     * @returns the index as per the description\n     */\n    private getIndexForWhichToApplyTabIndex = (\n        items: Array<ListItem | ListSeparator>,\n    ) => {\n        let result;\n        for (let i = 0, max = items.length; i < max; i += 1) {\n            if ('separator' in items[i]) {\n                // Ignore ListSeparator\n            } else {\n                const item = items[i] as ListItem<any>;\n                if (item.selected) {\n                    result = i;\n                    break;\n                }\n\n                if (result === undefined && !item.disabled) {\n                    result = i;\n                    // Do NOT break, as any later item with\n                    // `selected=true` should get the tab-index instead!\n                }\n            }\n        }\n\n        return result;\n    };\n\n    /**\n     * Render a single list item\n     *\n     * @param item - the item to render\n     * @param index - the index the item had in the `items` array\n     * @returns the list item\n     */\n    private renderListItem = (\n        item: ListItem | ListSeparator,\n        index: number,\n    ) => {\n        if ('separator' in item) {\n            return (\n                <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n                    {this.renderTextForSeparator(item)}\n                    <div class=\"limel-list-divider-line\" />\n                </li>\n            );\n        }\n\n        if (['radio', 'checkbox'].includes(this.config.type)) {\n            return this.renderVariantListItem(this.config, item, index);\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item--selected': item.selected,\n            'has-primary-component': this.hasPrimaryComponent(item),\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                aria-selected={item.selected ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {this.renderIcon(this.config, item)}\n                {this.getPrimaryComponent(item)}\n                {this.renderText(item)}\n                {this.twoLines && this.avatarList ? this.renderDivider() : null}\n                {this.renderActionMenu(item.actions)}\n            </li>\n        );\n    };\n\n    private renderTextForSeparator = (item: ListSeparator) => {\n        if ('text' in item) {\n            return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n        }\n    };\n\n    private getPrimaryComponent(item: ListItem): Element {\n        if (!this.hasPrimaryComponent(item)) {\n            return;\n        }\n\n        const PrimaryComponent = item.primaryComponent.name;\n        const props = item.primaryComponent.props;\n\n        return <PrimaryComponent {...props} />;\n    }\n\n    private hasPrimaryComponent = (item: ListItem) => {\n        return !!item?.primaryComponent?.name;\n    };\n\n    /**\n     * Render the text of the list item\n     *\n     * @param item - the list item\n     * @returns the text for the list item\n     */\n    private renderText = (item: ListItem) => {\n        if (this.isSimpleItem(item)) {\n            return (\n                <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n            );\n        }\n\n        return (\n            <div class=\"mdc-deprecated-list-item__text\">\n                <div class=\"mdc-deprecated-list-item__primary-command-text\">\n                    <div class=\"mdc-deprecated-list-item__primary-text\">\n                        {item.text}\n                    </div>\n                </div>\n                <div class=\"mdc-deprecated-list-item__secondary-text\">\n                    {item.secondaryText}\n                </div>\n            </div>\n        );\n    };\n\n    private isSimpleItem = (item: ListItem): boolean => {\n        return !('secondaryText' in item);\n    };\n\n    /**\n     * Render an icon for a list item\n     *\n     * @param config - the config object, passed on from the `renderListItem` function\n     * @param item - the list item\n     * @returns the icon element\n     */\n    private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n        const style: any = {};\n        const name = getIconName(item.icon);\n        if (!name) {\n            return;\n        }\n\n        const color = getIconColor(item.icon, item.iconColor);\n\n        if (color) {\n            if (config.badgeIcons) {\n                style['--icon-background-color'] = color;\n            } else {\n                style.color = color;\n            }\n        }\n\n        return (\n            <limel-icon\n                badge={config.badgeIcons}\n                class=\"mdc-deprecated-list-item__graphic\"\n                name={name}\n                style={style}\n                size={config.iconSize}\n            />\n        );\n    };\n\n    private renderDivider = () => {\n        const classes = {\n            'mdc-deprecated-list-divider': true,\n            'mdc-deprecated-list-divider--inset': true,\n        };\n        if (this.config.iconSize) {\n            classes[this.config.iconSize] = true;\n        }\n\n        return <hr class={classes} />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={actions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                />\n            </limel-menu>\n        );\n    };\n\n    private renderVariantListItem = (\n        config: ListRendererConfig,\n        item: ListItem,\n        index: number,\n    ) => {\n        let itemTemplate;\n        if (config.type === 'radio') {\n            itemTemplate = (\n                <RadioButtonTemplate\n                    id={`c_${index}`}\n                    checked={item.selected}\n                    disabled={item.disabled}\n                />\n            );\n        } else if (config.type === 'checkbox') {\n            itemTemplate = (\n                <CheckboxTemplate\n                    id={`c_${index}`}\n                    checked={item.selected}\n                    disabled={item.disabled}\n                />\n            );\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item__text': !item.secondaryText,\n            'has-primary-component': this.hasPrimaryComponent(item),\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                role={config.type}\n                aria-checked={item.selected ? 'true' : 'false'}\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {this.renderVariantListItemContent(config, item, itemTemplate)}\n            </li>\n        );\n    };\n\n    private renderVariantListItemContent = (\n        config: ListRendererConfig,\n        item: ListItem,\n        itemTemplate: any,\n    ) => {\n        if (this.hasIcons) {\n            return [\n                item.icon ? this.renderIcon(config, item) : null,\n                this.getPrimaryComponent(item),\n                this.renderText(item),\n                <div class=\"mdc-deprecated-list-item__meta\">\n                    {itemTemplate}\n                </div>,\n            ];\n        }\n\n        return [\n            <div class=\"mdc-deprecated-list-item__graphic\">{itemTemplate}</div>,\n            this.getPrimaryComponent(item),\n            this.renderText(item),\n        ];\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n@use '../checkbox/checkbox.scss';\n\n@use '@material/list';\n\n$list-border-radius: 0.375rem; // 6px\n$list--has-interactive-items--mdc-list-item--hover: 1;\n$list-static-actions-list: 1;\n$list-mdc-list-item: 0;\n\n/**\n * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.\n * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.\n * @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.\n * @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.\n * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.\n * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.\n * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.\n * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.\n * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;\n */\n\n:host(limel-list) {\n    display: block;\n    isolation: isolate;\n    @include checkbox.custom-checkbox-styles;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n@include list.deprecated-core-styles;\n\n.mdc-deprecated-list,\n.mdc-deprecated-list-item__secondary-text {\n    // As long as this component is depended on MDC,\n    // we need to force it to be font-agnostic.\n    // When MDC-dependency is removed, this block can also be removed.\n    // However, on removal of MDC-dependency, we should also make sure to check\n    // other font-related styles that might be set by MDC,\n    // such as `letter-spacing` or `font-size`.\n    font-family: inherit;\n}\n\n.mdc-deprecated-list {\n    --mdc-theme-text-icon-on-background: var(\n        --icon-color,\n        rgb(var(--contrast-900))\n    );\n    margin: var(\n        --list-margin,\n        0.25rem\n    ); // added space to visualize keyboard-focused items\n    padding: 0;\n    border-radius: $list-border-radius;\n\n    .mdc-deprecated-list-divider {\n        border-bottom-color: transparent;\n        display: flex;\n        align-items: center;\n        gap: 0.75rem;\n        height: auto;\n        padding: 0 0.5rem;\n    }\n\n    .limel-list-divider-line {\n        background-color: rgb(var(--contrast-400));\n        height: 0.125rem;\n        border-radius: 1rem;\n        min-width: 1rem;\n        flex-grow: 1;\n    }\n\n    .limel-list-divider-title {\n        all: unset;\n        @include mixins.truncate-text;\n        color: rgb(var(--contrast-900));\n        font-size: 0.8125rem; // 13px\n    }\n\n    .mdc-deprecated-list-item {\n        gap: 0.5rem;\n        transition: background-color 0.2s ease;\n        box-sizing: border-box;\n        z-index: $list-mdc-list-item; // in Chrome on Windows, menus flicker when they have a scroll bar and user hovers on them. We may be able to remove this in future versions of Chrome. Kia 2021-May-12\n        min-height: 2.5rem;\n\n        &:not(.mdc-deprecated-list-item--disabled) {\n            &:hover {\n                background-color: rgb(var(--contrast-300));\n                z-index: 1;\n            }\n        }\n\n        &.mdc-deprecated-list-item--disabled {\n            cursor: not-allowed;\n\n            limel-icon {\n                opacity: 0.38; // similar to `mdc-deprecated-list-item__text` when disabled\n            }\n        }\n\n        &:first-child {\n            border-top-left-radius: $list-border-radius;\n            border-top-right-radius: $list-border-radius;\n        }\n        &:last-child {\n            border-bottom-right-radius: $list-border-radius;\n            border-bottom-left-radius: $list-border-radius;\n        }\n    }\n\n    &.selectable\n        .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled) {\n        cursor: pointer;\n    }\n\n    .mdc-deprecated-list-item__meta {\n        // the action menu on the right side a list item\n        line-height: 100%;\n        margin-right: -0.5rem;\n        order: var(--limel-list-meta-order, 3);\n    }\n\n    .mdc-deprecated-list-item__graphic {\n        margin-right: 0;\n    }\n\n    &.mdc-deprecated-list--avatar-list {\n        position: relative;\n\n        limel-icon.mdc-deprecated-list-item__graphic {\n            background-color: var(\n                --icon-background-color,\n                rgb(var(--contrast-900))\n            );\n            color: var(--icon-color, rgba(var(--color-white), 0.88));\n            margin-left: functions.pxToRem(-4);\n        }\n\n        hr.mdc-deprecated-list-divider {\n            position: absolute;\n            bottom: 0;\n\n            &.mdc-deprecated-list-divider--inset {\n                --icon-width: #{functions.pxToRem(40)};\n                --icon-right-padding: #{functions.pxToRem(12)};\n                --list-right-padding: #{functions.pxToRem(12)};\n                right: 0;\n                width: calc(\n                    100% - var(--icon-width) - var(--icon-right-padding) - var(\n                            --list-right-padding\n                        )\n                );\n\n                &.x-small {\n                    --icon-width: #{functions.pxToRem(24)};\n                }\n\n                &.small {\n                    --icon-width: #{functions.pxToRem(32)};\n                }\n\n                &.medium {\n                    --icon-width: #{functions.pxToRem(40)};\n                }\n\n                &.large {\n                    --icon-width: #{functions.pxToRem(48)};\n                }\n            }\n        }\n\n        .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {\n            display: none;\n        }\n    }\n\n    &.mdc-deprecated-list--two-line {\n        .mdc-deprecated-list-item__text {\n            padding-top: functions.pxToRem(8);\n            padding-bottom: functions.pxToRem(8);\n        }\n    }\n\n    .mdc-deprecated-list-item__secondary-text,\n    .mdc-deprecated-list-item__primary-text,\n    .mdc-deprecated-list-item__command-text {\n        margin: 0;\n        &:before,\n        &:after {\n            display: none;\n        }\n    }\n\n    .mdc-deprecated-list-item__command-text {\n        color: rgb(var(--contrast-800));\n        margin-left: 0.7rem;\n    }\n\n    .mdc-deprecated-list-item__text {\n        align-self: center;\n        width: 100%;\n    }\n\n    .mdc-deprecated-list-item__primary-command-text {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: baseline;\n    }\n\n    // Tweaks to display the icon correctly in Edge\n    limel-icon.mdc-deprecated-list-item__graphic {\n        display: block;\n    }\n}\n\n.mdc-deprecated-list:not(.mdc-deprecated-list--avatar-list) {\n    limel-icon.mdc-deprecated-list-item__graphic {\n        // Tweaks to make icon lists align nicely with badge-icon lists.\n        &[size='x-small'] {\n            margin-right: 0;\n        }\n        &[size='small'] {\n            margin-right: 0;\n        }\n        &[size='medium'] {\n            margin-right: 0.25rem;\n        }\n        &[size='large'] {\n            margin-right: 0.5rem;\n        }\n    }\n}\n\n.mdc-deprecated-list-item.mdc-deprecated-list-item--selected {\n    &:before {\n        background-color: var(--mdc-theme-primary);\n        opacity: 0.15;\n    }\n}\n\n:not(.mdc-deprecated-list--non-interactive) {\n    > {\n        :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n            @include mixins.visualize-keyboard-focus;\n\n            &:focus-visible {\n                border-radius: $list-border-radius;\n                z-index: $list--has-interactive-items--mdc-list-item--hover;\n            }\n        }\n    }\n}\n\n@import '../checkbox/checkbox.scss';\n\n@import './radio-button/radio-button.scss';\n\n@import './partial-styles/custom-styles.scss';\n@import './partial-styles/enable-multiline-text.scss';\n@import './partial-styles/_has-grid-layout.scss';\n@import './partial-styles/_static-actions.scss';\n","import { IconSize } from '../icon/icon.types';\nimport { ListItem, ListSeparator } from './list-item.types';\nimport { ListType } from './list.types';\nimport { MDCList, MDCListActionEvent } from '@material/list';\nimport { strings as listStrings } from '@material/list/constants';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { ListRenderer } from './list-renderer';\nimport { ListRendererConfig } from './list-renderer-config';\n\nconst { ACTION_EVENT } = listStrings;\n\n/**\n * @exampleComponent limel-example-list\n * @exampleComponent limel-example-list-secondary\n * @exampleComponent limel-example-list-separator\n * @exampleComponent limel-example-list-selectable\n * @exampleComponent limel-example-list-icons\n * @exampleComponent limel-example-list-badge-icons\n * @exampleComponent limel-example-list-checkbox\n * @exampleComponent limel-example-list-checkbox-icons\n * @exampleComponent limel-example-list-radio-button\n * @exampleComponent limel-example-list-radio-button-icons\n * @exampleComponent limel-example-list-action\n * @exampleComponent limel-example-list-striped\n * @exampleComponent limel-example-list-badge-icons-with-multiple-lines\n * @exampleComponent limel-example-list-grid\n * @exampleComponent limel-example-list-primary-component\n */\n@Component({\n    tag: 'limel-list',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'list.scss',\n})\nexport class List {\n    /**\n     * List of items to display\n     */\n    @Prop()\n    public items: Array<ListItem | ListSeparator>;\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop()\n    public badgeIcons: boolean;\n\n    /**\n     * Size of the icons in the list\n     */\n    @Prop()\n    public iconSize: IconSize = 'small';\n\n    /**\n     * The type of the list, omit to get a regular list. Available types are:\n     * `selectable`: regular list with single selection.\n     * `radio`: radio button list with single selection.\n     * `checkbox`: checkbox list with multiple selection.\n     */\n    @Prop()\n    public type: ListType;\n\n    /**\n     * By default, lists will display 3 lines of text, and then truncate the rest.\n     * Consumers can increase or decrease this number by specifying\n     * `maxLinesSecondaryText`. If consumer enters zero or negative\n     * numbers we default to 1; and if they type decimals we round up.\n     */\n    // eslint-disable-next-line no-magic-numbers\n    @Prop() maxLinesSecondaryText: number = 3;\n\n    @Element()\n    private element: HTMLLimelListElement;\n\n    private config: ListRendererConfig;\n    private listRenderer = new ListRenderer();\n    private mdcList: MDCList;\n    private multiple: boolean;\n    private selectable: boolean;\n\n    /**\n     * Fired when a new value has been selected from the list.\n     * Only fired if `type` is set to `selectable`, `radio` or `checkbox`.\n     */\n    @Event()\n    private change: EventEmitter<ListItem | ListItem[]>;\n\n    /**\n     * Fired when an action has been selected from the action menu of a list item\n     */\n    @Event()\n    protected select: EventEmitter<ListItem | ListItem[]>;\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public disconnectedCallback() {\n        this.teardown();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n        this.triggerIconColorWarning();\n    }\n\n    public render() {\n        this.config = {\n            badgeIcons: this.badgeIcons,\n            type: this.type,\n            iconSize: this.iconSize,\n        };\n        let maxLinesSecondaryText = +this.maxLinesSecondaryText?.toFixed();\n        if (this.maxLinesSecondaryText < 1) {\n            maxLinesSecondaryText = 1;\n        }\n\n        const html = this.listRenderer.render(this.items, this.config);\n\n        return (\n            <Host\n                style={{\n                    '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,\n                }}\n            >\n                {html}\n            </Host>\n        );\n    }\n\n    @Watch('type')\n    protected handleType() {\n        this.setupListeners();\n    }\n\n    @Watch('items')\n    protected itemsChanged() {\n        if (!this.mdcList) {\n            return;\n        }\n\n        setTimeout(() => {\n            this.setup();\n\n            const listItems = this.items.filter(this.isListItem);\n\n            if (this.multiple) {\n                this.mdcList.selectedIndex = listItems\n                    .filter((item: ListItem) => item.selected)\n                    .map((item: ListItem) => listItems.indexOf(item));\n            } else {\n                const selectedIndex = listItems.findIndex(\n                    (item: ListItem) => item.selected,\n                );\n\n                if (selectedIndex === -1) {\n                    this.mdcList.initializeListType();\n                } else {\n                    this.mdcList.selectedIndex = selectedIndex;\n                }\n            }\n        }, 0);\n    }\n\n    private setup = () => {\n        this.setupList();\n\n        this.setupListeners();\n    };\n\n    private setupList = () => {\n        if (this.mdcList) {\n            this.teardown();\n            this.mdcList = null;\n        }\n\n        const element = this.element.shadowRoot.querySelector(\n            '.mdc-deprecated-list',\n        );\n        if (!element) {\n            return;\n        }\n\n        this.mdcList = new MDCList(element);\n        this.mdcList.hasTypeahead = true;\n    };\n\n    private setupListeners = () => {\n        if (!this.mdcList) {\n            return;\n        }\n\n        this.mdcList.unlisten(ACTION_EVENT, this.handleAction);\n\n        this.selectable = ['selectable', 'radio', 'checkbox'].includes(\n            this.type,\n        );\n        this.multiple = this.type === 'checkbox';\n\n        if (!this.selectable) {\n            return;\n        }\n\n        this.mdcList.listen(ACTION_EVENT, this.handleAction);\n        this.mdcList.singleSelection = !this.multiple;\n    };\n\n    private teardown = () => {\n        this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);\n        this.mdcList?.destroy();\n    };\n\n    private handleAction = (event: MDCListActionEvent) => {\n        if (!this.multiple) {\n            this.handleSingleSelect(event.detail.index);\n\n            return;\n        }\n\n        this.handleMultiSelect(event.detail.index);\n    };\n\n    private handleSingleSelect = (index: number) => {\n        const listItems = this.items.filter(this.isListItem) as ListItem[];\n        if (listItems[index].disabled) {\n            return;\n        }\n\n        const selectedItem: ListItem = listItems.find((item: ListItem) => {\n            return !!item.selected;\n        });\n\n        if (selectedItem) {\n            if (this.type !== 'radio') {\n                this.mdcList.selectedIndex = -1;\n            }\n\n            this.change.emit({ ...selectedItem, selected: false });\n        }\n\n        if (listItems[index] !== selectedItem) {\n            this.change.emit({ ...listItems[index], selected: true });\n        }\n    };\n\n    private handleMultiSelect = (index: number) => {\n        const listItems = this.items.filter(this.isListItem) as ListItem[];\n        if (listItems[index].disabled) {\n            return;\n        }\n\n        const selectedItems: ListItem[] = listItems\n            .filter((item: ListItem, listIndex: number) => {\n                if (listIndex === index) {\n                    // This is the item that was selected or deselected,\n                    // so we negate its previous selection status.\n                    return !item.selected;\n                }\n\n                // This is an item that didn't change, so we keep its selection status.\n                return item.selected;\n            })\n            .map((item: ListItem) => {\n                return { ...item, selected: true };\n            });\n\n        this.change.emit(selectedItems);\n    };\n\n    private isListItem = (item: ListItem): boolean => {\n        return !('separator' in item);\n    };\n\n    private triggerIconColorWarning() {\n        if (this.items?.some((item) => 'iconColor' in item)) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","@use '@material/menu-surface';\n@use '@material/elevation';\n@use '@material/menu';\n\n/**\n* @prop --limel-menu-surface-display: defines whether the surface is treated as a block, flex or grid. It affects layout used to display its children. Defaults to `block`.\n* @prop --limel-menu-surface-flex-direction: defines the direction of menu-surface layout.\n*/\n\n:host(limel-menu-surface) {\n    display: block;\n    max-height: inherit;\n}\n\n@include menu-surface.core-styles;\n@include menu.core-styles;\n\n.mdc-menu-surface {\n    display: var(--limel-menu-surface-display, block);\n    flex-direction: var(--limel-menu-surface-flex-direction, row);\n    max-height: inherit;\n    position: relative;\n    --mdc-menu-max-width: var(\n        --menu-surface-width,\n        min(calc(100vw - 2rem), 20rem)\n    );\n    background-color: var(--lime-elevated-surface-background-color);\n}\n\n:host(limel-menu-surface.has-grid-layout) {\n    .mdc-menu-surface {\n        width: var(--menu-surface-width, min(calc(100vw - 2rem), 40rem));\n        max-width: unset;\n    }\n}\n","import { Corner, MDCMenuSurface } from '@material/menu-surface';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n@Component({\n    tag: 'limel-menu-surface',\n    shadow: true,\n    styleUrl: 'menu-surface.scss',\n})\nexport class MenuSurface {\n    /**\n     * True if the menu surface is open, false otherwise\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Clicks in this element should not be prevented when the menu surface is open\n     */\n    @Prop()\n    public allowClicksElement: HTMLElement;\n\n    /**\n     * Emitted when the menu surface is dismissed and should be closed\n     */\n    @Event()\n    public dismiss: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelMenuSurfaceElement;\n\n    private menuSurface: MDCMenuSurface;\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public disconnectedCallback() {\n        this.teardown();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n    }\n\n    public render() {\n        const classList = {\n            'mdc-menu': true,\n            'mdc-menu-surface': true,\n            'mdc-menu-surface--open': this.open,\n            'mdc-elevation-transition': true,\n            'mdc-elevation--z4': true,\n        };\n\n        return (\n            <div class={classList} tabindex=\"-1\">\n                <slot />\n            </div>\n        );\n    }\n\n    private setup = () => {\n        const menuElement: HTMLElement =\n            this.host.shadowRoot.querySelector('.mdc-menu-surface');\n        if (!menuElement) {\n            return;\n        }\n\n        this.menuSurface = new MDCMenuSurface(menuElement);\n        this.menuSurface.setAnchorCorner(Corner.TOP_START);\n\n        document.addEventListener('mousedown', this.handleDocumentClick, {\n            capture: true,\n        });\n        this.host.addEventListener('keydown', this.handleKeyDown);\n        window.addEventListener('resize', this.handleResize, {\n            passive: true,\n        });\n    };\n\n    private teardown = () => {\n        this.menuSurface?.destroy();\n        document.removeEventListener('mousedown', this.handleDocumentClick, {\n            capture: true,\n        });\n        this.host.removeEventListener('keydown', this.handleKeyDown);\n        window.removeEventListener('resize', this.handleResize);\n    };\n\n    private handleDocumentClick = (event) => {\n        const elementPath = event.composedPath ? event.composedPath() : [];\n\n        if (!this.open) {\n            return;\n        }\n\n        if (isDescendant(event.target, this.host)) {\n            return;\n        }\n\n        if (this.allowClicksElement) {\n            const clickedInAllowedElement = elementPath.includes(\n                this.allowClicksElement,\n            );\n\n            if (clickedInAllowedElement) {\n                return;\n            }\n        }\n\n        this.dismiss.emit();\n        this.preventClickEventPropagation();\n    };\n\n    private handleResize = () => {\n        if (this.open) {\n            this.dismiss.emit();\n        }\n    };\n\n    private preventClickEventPropagation = () => {\n        // When the menu surface is open, we want to stop the `click` event from propagating\n        // when clicking outside the surface itself. This is to prevent any dialog that might\n        // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,\n        // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener\n        // for `click`, so we can capture and \"kill\" it.\n        document.addEventListener('click', this.stopEvent, {\n            capture: true,\n            once: true,\n        });\n        // We also capture and \"kill\" the next `mouseup` event.\n        document.addEventListener('mouseup', this.stopEvent, {\n            capture: true,\n            once: true,\n        });\n        // If the user dragged the scrollbar, no `click` event happens. So when we get the\n        // `mouseup` event, remove the handler for `click` if it's still there.\n        // Otherwise, we would catch the next click even though the menu is no longer open.\n        document.addEventListener(\n            'mouseup',\n            () => {\n                document.removeEventListener('click', this.stopEvent, {\n                    capture: true,\n                });\n            },\n            {\n                once: true,\n            },\n        );\n    };\n\n    private stopEvent = (event) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        const isEscape =\n            event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n        const isTab = event.key === TAB || event.keyCode === TAB_KEY_CODE;\n\n        if (this.open && (isEscape || isTab)) {\n            event.stopPropagation();\n            this.dismiss.emit();\n        }\n    };\n}\n"],"version":3}
+{"file":"limel-dynamic-label.limel-helper-line.limel-list.limel-menu-surface.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MC2Bhf,YAAY;;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;GACL;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAGA,wBAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAOC,wCAAgB,SAAS,EAAI,CAAC;GACxC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAOA,sBAAO,KAAK,CAAQ,CAAC;GAC/B;;;;AC1FL,MAAM,aAAa,GAAG,+yBAA+yB;;MC2BxzB,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,kBAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAOA,kBAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACIA,QAACC,UAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBACvC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/BD,qBACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;ACpEE,MAAM,mBAAmB,GAE5B,CAAC,KAAK;EACN,QACIA,iBAAK,KAAK,EAAC,gBAAgB;IACvBA,iBACI,KAAK,EAAE;;0BAEG,KAAK,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE;qBAChD;MAELA,mBACI,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B;MACFA,iBAAK,KAAK,EAAC,uBAAuB;QAC9BA,iBAAK,KAAK,EAAC,yBAAyB,GAAG;QACvCA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;IACNA,mBACI,KAAK,EAAE,GAAG,KAAK,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN,EACR;AACN,CAAC;;MCjCY,YAAY;EAAzB;IACY,kBAAa,GAAuB;MACxC,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,KAAK;KACpB,CAAC;;;;;;;;;;IAuEM,oCAA+B,GAAG,CACtC,KAAsC;MAEtC,IAAI,MAAM,CAAC;MACX,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE;QACjD,IAAI,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAE5B;aAAM;UACH,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAkB,CAAC;UACvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,MAAM,GAAG,CAAC,CAAC;YACX,MAAM;WACT;UAED,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACxC,MAAM,GAAG,CAAC,CAAC;;;WAGd;SACJ;OACJ;MAED,OAAO,MAAM,CAAC;KACjB,CAAC;;;;;;;;IASM,mBAAc,GAAG,CACrB,IAA8B,EAC9BE,OAAa;MAEb,IAAI,WAAW,IAAI,IAAI,EAAE;QACrB,QACIF,gBAAI,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,WAAW;UACnD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;UAClCA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACtC,EACP;OACL;MAED,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QAClD,OAAO,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAEE,OAAK,CAAC,CAAC;OAC/D;MAED,MAAM,UAAU,GAAG;QACf,0BAA0B,EAAE,IAAI;QAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,uBAAuB,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;OAC1D,CAAC;MAEF,MAAM,UAAU,GAA0B,EAAE,CAAC;MAC7C,IAAIA,OAAK,KAAK,IAAI,CAAC,0BAA0B,EAAE;QAC3C,UAAU,CAAC,QAAQ,GAAG,GAAG,CAAC;OAC7B;MAED,QACIF,8BACI,KAAK,EAAE,UAAU,mBACF,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnCE,OAAK,IACb,UAAU;QAEb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;QAClC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI;QAC9D,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CACnC,EACP;KACL,CAAC;IAEM,2BAAsB,GAAG,CAAC,IAAmB;MACjD,IAAI,MAAM,IAAI,IAAI,EAAE;QAChB,OAAOF,gBAAI,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAM,CAAC;OAChE;KACJ,CAAC;IAaM,wBAAmB,GAAG,CAAC,IAAc;;MACzC,OAAO,CAAC,EAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,0CAAE,IAAI,CAAA,CAAC;KACzC,CAAC;;;;;;;IAQM,eAAU,GAAG,CAAC,IAAc;MAChC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;QACzB,QACIA,kBAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ,EACjE;OACL;MAED,QACIA,iBAAK,KAAK,EAAC,gCAAgC;QACvCA,iBAAK,KAAK,EAAC,gDAAgD;UACvDA,iBAAK,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,IAAI,CACR,CACJ;QACNA,iBAAK,KAAK,EAAC,0CAA0C,IAChD,IAAI,CAAC,aAAa,CACjB,CACJ,EACR;KACL,CAAC;IAEM,iBAAY,GAAG,CAAC,IAAc;MAClC,OAAO,EAAE,eAAe,IAAI,IAAI,CAAC,CAAC;KACrC,CAAC;;;;;;;;IASM,eAAU,GAAG,CAAC,MAA0B,EAAE,IAAc;MAC5D,MAAM,KAAK,GAAQ,EAAE,CAAC;MACtB,MAAM,IAAI,GAAGD,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACpC,IAAI,CAAC,IAAI,EAAE;QACP,OAAO;OACV;MAED,MAAM,KAAK,GAAGI,yBAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;MAEtD,IAAI,KAAK,EAAE;QACP,IAAI,MAAM,CAAC,UAAU,EAAE;UACnB,KAAK,CAAC,yBAAyB,CAAC,GAAG,KAAK,CAAC;SAC5C;aAAM;UACH,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;SACvB;OACJ;MAED,QACIH,wBACI,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,KAAK,EAAC,mCAAmC,EACzC,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,MAAM,CAAC,QAAQ,GACvB,EACJ;KACL,CAAC;IAEM,kBAAa,GAAG;MACpB,MAAM,OAAO,GAAG;QACZ,6BAA6B,EAAE,IAAI;QACnC,oCAAoC,EAAE,IAAI;OAC7C,CAAC;MACF,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;QACtB,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;OACxC;MAED,OAAOA,gBAAI,KAAK,EAAE,OAAO,GAAI,CAAC;KACjC,CAAC;IAEM,qBAAgB,GAAG,CAAC,OAAwC;MAChE,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QAClC,OAAO;OACV;MAED,QACIA,wBACI,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,OAAO,EACd,aAAa,EAAC,YAAY;QAE1BA,+BACI,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,GACf,CACO,EACf;KACL,CAAC;IAEM,0BAAqB,GAAG,CAC5B,MAA0B,EAC1B,IAAc,EACdE,OAAa;MAEb,IAAI,YAAY,CAAC;MACjB,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE;QACzB,YAAY,IACRF,QAAC,mBAAmB,IAChB,EAAE,EAAE,KAAKE,OAAK,EAAE,EAChB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL,CAAC;OACL;WAAM,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;QACnC,YAAY,IACRF,QAACI,kCAAgB,IACb,EAAE,EAAE,KAAKF,OAAK,EAAE,EAChB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL,CAAC;OACL;MAED,MAAM,UAAU,GAAG;QACf,0BAA0B,EAAE,IAAI;QAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,gCAAgC,EAAE,CAAC,IAAI,CAAC,aAAa;QACrD,uBAAuB,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;OAC1D,CAAC;MAEF,MAAM,UAAU,GAA0B,EAAE,CAAC;MAC7C,IAAIA,OAAK,KAAK,IAAI,CAAC,0BAA0B,EAAE;QAC3C,UAAU,CAAC,QAAQ,GAAG,GAAG,CAAC;OAC7B;MAED,QACIF,8BACI,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAM,CAAC,IAAI,kBACH,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnCE,OAAK,IACb,UAAU,GAEb,IAAI,CAAC,4BAA4B,CAAC,MAAM,EAAE,IAAI,EAAE,YAAY,CAAC,CAC7D,EACP;KACL,CAAC;IAEM,iCAA4B,GAAG,CACnC,MAA0B,EAC1B,IAAc,EACd,YAAiB;MAEjB,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO;UACH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI;UAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UACrBF,iBAAK,KAAK,EAAC,gCAAgC,IACtC,YAAY,CACX;SACT,CAAC;OACL;MAED,OAAO;QACHA,iBAAK,KAAK,EAAC,mCAAmC,IAAE,YAAY,CAAO;QACnE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;OACxB,CAAC;KACL,CAAC;GACL;EAzUU,MAAM,CACT,KAAsC,EACtC,SAA6B,EAAE;IAE/B,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;IACpB,IAAI,CAAC,MAAM,mCAAQ,IAAI,CAAC,aAAa,GAAK,MAAM,CAAE,CAAC;IAEnD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI;MAC5B,OAAO,eAAe,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;KAC1D,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI;MAC5B,OAAO,MAAM,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;KACxC,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC;IAC1D,MAAM,mBAAmB,GAAG,CAAC,YAAY,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC;IACT,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI;MACpB,KAAK,UAAU;QACX,IAAI,GAAG,OAAO,CAAC;QACf,MAAM;MACV,KAAK,OAAO;QACR,IAAI,GAAG,YAAY,CAAC;QACpB,MAAM;MACV;QACI,IAAI,GAAG,SAAS,CAAC;KACxB;IAED,IAAI,CAAC,0BAA0B;MAC3B,IAAI,CAAC,+BAA+B,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG;MACf,qBAAqB,EAAE,IAAI;MAC3B,+BAA+B,EAAE,IAAI,CAAC,QAAQ;MAC9C,UAAU,EAAE,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;MAC1D,kCAAkC,EAAE,IAAI,CAAC,UAAU;MACnD,eAAe,EACX,IAAI,CAAC,QAAQ;QACb,IAAI,CAAC,UAAU;QACf,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;KAC1D,CAAC;IAEF,QACIA,gBAAI,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,sBAAmB,UAAU,IACzD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAC9B,EACP;GACL;EA+FO,mBAAmB,CAAC,IAAc;IACtC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE;MACjC,OAAO;KACV;IAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAE1C,OAAOA,QAAC,gBAAgB,oBAAK,KAAK,EAAI,CAAC;GAC1C;;;ACjLL,MAAM,OAAO,GAAG,i91JAAi91J;;ACkBj+1J,MAAM,EAAE,YAAY,EAAE,GAAGK,iBAAW,CAAC;MAwBxB,IAAI;;;;;IAyCL,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;IAyFlC,UAAK,GAAG;MACZ,IAAI,CAAC,SAAS,EAAE,CAAC;MAEjB,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB,CAAC;IAEM,cAAS,GAAG;MAChB,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;OACvB;MAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CACjD,sBAAsB,CACzB,CAAC;MACF,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;OACV;MAED,IAAI,CAAC,OAAO,GAAG,IAAIC,iBAAO,CAAC,OAAO,CAAC,CAAC;MACpC,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC;KACpC,CAAC;IAEM,mBAAc,GAAG;MACrB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MAEvD,IAAI,CAAC,UAAU,GAAG,CAAC,YAAY,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAC1D,IAAI,CAAC,IAAI,CACZ,CAAC;MACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC;MAEzC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MACrD,IAAI,CAAC,OAAO,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KACjD,CAAC;IAEM,aAAQ,GAAG;;MACf,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MACxD,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,EAAE,CAAC;KAC3B,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAyB;MAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAChB,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE5C,OAAO;OACV;MAED,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC;IAEM,uBAAkB,GAAG,CAAC,KAAa;MACvC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAe,CAAC;MACnE,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;QAC3B,OAAO;OACV;MAED,MAAM,YAAY,GAAa,SAAS,CAAC,IAAI,CAAC,CAAC,IAAc;QACzD,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;OAC1B,CAAC,CAAC;MAEH,IAAI,YAAY,EAAE;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;UACvB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;SACnC;QAED,IAAI,CAAC,MAAM,CAAC,IAAI,iCAAM,YAAY,KAAE,QAAQ,EAAE,KAAK,IAAG,CAAC;OAC1D;MAED,IAAI,SAAS,CAAC,KAAK,CAAC,KAAK,YAAY,EAAE;QACnC,IAAI,CAAC,MAAM,CAAC,IAAI,iCAAM,SAAS,CAAC,KAAK,CAAC,KAAE,QAAQ,EAAE,IAAI,IAAG,CAAC;OAC7D;KACJ,CAAC;IAEM,sBAAiB,GAAG,CAAC,KAAa;MACtC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAe,CAAC;MACnE,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;QAC3B,OAAO;OACV;MAED,MAAM,aAAa,GAAe,SAAS;SACtC,MAAM,CAAC,CAAC,IAAc,EAAE,SAAiB;QACtC,IAAI,SAAS,KAAK,KAAK,EAAE;;;UAGrB,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;SACzB;;QAGD,OAAO,IAAI,CAAC,QAAQ,CAAC;OACxB,CAAC;SACD,GAAG,CAAC,CAAC,IAAc;QAChB,uCAAY,IAAI,KAAE,QAAQ,EAAE,IAAI,IAAG;OACtC,CAAC,CAAC;MAEP,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACnC,CAAC;IAEM,eAAU,GAAG,CAAC,IAAc;MAChC,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;KACjC,CAAC;;;oBA5N0B,OAAO;;iCAkBK,CAAC;;EAwBlC,iBAAiB;IACpB,IAAI,CAAC,KAAK,EAAE,CAAC;GAChB;EAEM,oBAAoB;IACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;GACnB;EAEM,gBAAgB;IACnB,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAClC;EAEM,MAAM;;IACT,IAAI,CAAC,MAAM,GAAG;MACV,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;KAC1B,CAAC;IACF,IAAI,qBAAqB,GAAG,EAAC,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,EAAE,CAAA,CAAC;IACnE,IAAI,IAAI,CAAC,qBAAqB,GAAG,CAAC,EAAE;MAChC,qBAAqB,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAE/D,QACIN,QAACC,UAAI,IACD,KAAK,EAAE;QACH,yBAAyB,EAAE,GAAG,qBAAqB,EAAE;OACxD,IAEA,IAAI,CACF,EACT;GACL;EAGS,UAAU;IAChB,IAAI,CAAC,cAAc,EAAE,CAAC;GACzB;EAGS,YAAY;IAClB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO;KACV;IAED,UAAU,CAAC;MACP,IAAI,CAAC,KAAK,EAAE,CAAC;MAEb,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,SAAS;WACjC,MAAM,CAAC,CAAC,IAAc,KAAK,IAAI,CAAC,QAAQ,CAAC;WACzC,GAAG,CAAC,CAAC,IAAc,KAAK,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;OACzD;WAAM;QACH,MAAM,aAAa,GAAG,SAAS,CAAC,SAAS,CACrC,CAAC,IAAc,KAAK,IAAI,CAAC,QAAQ,CACpC,CAAC;QAEF,IAAI,aAAa,KAAK,CAAC,CAAC,EAAE;UACtB,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC;SACrC;aAAM;UACH,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;SAC9C;OACJ;KACJ,EAAE,CAAC,CAAC,CAAC;GACT;EA+GO,uBAAuB;;IAC3B,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,EAAE;;MAEjD,OAAO,CAAC,IAAI,CACR,sKAAsK,CACzK,CAAC;KACL;GACJ;;;;;;;;;;AChSL,MAAM,cAAc,GAAG,moIAAmoI;;MC0B7oI,WAAW;;;;IAoDZ,UAAK,GAAG;MACZ,MAAM,WAAW,GACb,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;MAC5D,IAAI,CAAC,WAAW,EAAE;QACd,OAAO;OACV;MAED,IAAI,CAAC,WAAW,GAAG,IAAIM,wBAAc,CAAC,WAAW,CAAC,CAAC;MACnD,IAAI,CAAC,WAAW,CAAC,eAAe,CAACC,gBAAM,CAAC,SAAS,CAAC,CAAC;MAEnD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,mBAAmB,EAAE;QAC7D,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;MAC1D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE;QACjD,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;KACN,CAAC;IAEM,aAAQ,GAAG;;MACf,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,EAAE,CAAC;MAC5B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,mBAAmB,EAAE;QAChE,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;MAC7D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC3D,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAK;MAChC,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC;MAEnE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACZ,OAAO;OACV;MAED,IAAIC,gBAAY,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;QACvC,OAAO;OACV;MAED,IAAI,IAAI,CAAC,kBAAkB,EAAE;QACzB,MAAM,uBAAuB,GAAG,WAAW,CAAC,QAAQ,CAChD,IAAI,CAAC,kBAAkB,CAC1B,CAAC;QAEF,IAAI,uBAAuB,EAAE;UACzB,OAAO;SACV;OACJ;MAED,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,4BAA4B,EAAE,CAAC;KACvC,CAAC;IAEM,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;OACvB;KACJ,CAAC;IAEM,iCAA4B,GAAG;;;;;;MAMnC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;QAC/C,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,IAAI;OACb,CAAC,CAAC;;MAEH,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;QACjD,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,IAAI;OACb,CAAC,CAAC;;;;MAIH,QAAQ,CAAC,gBAAgB,CACrB,SAAS,EACT;QACI,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;UAClD,OAAO,EAAE,IAAI;SAChB,CAAC,CAAC;OACN,EACD;QACI,IAAI,EAAE,IAAI;OACb,CACJ,CAAC;KACL,CAAC;IAEM,cAAS,GAAG,CAAC,KAAK;MACtB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;KAC1B,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB;MACzC,MAAM,QAAQ,GACV,KAAK,CAAC,GAAG,KAAKC,eAAM,IAAI,KAAK,CAAC,OAAO,KAAKC,wBAAe,CAAC;MAC9D,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,KAAKC,YAAG,IAAI,KAAK,CAAC,OAAO,KAAKC,qBAAY,CAAC;MAElE,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,EAAE;QAClC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;OACvB;KACJ,CAAC;gBAvJY,KAAK;;;EAmBZ,iBAAiB;IACpB,IAAI,CAAC,KAAK,EAAE,CAAC;GAChB;EAEM,oBAAoB;IACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;GACnB;EAEM,gBAAgB;IACnB,IAAI,CAAC,KAAK,EAAE,CAAC;GAChB;EAEM,MAAM;IACT,MAAM,SAAS,GAAG;MACd,UAAU,EAAE,IAAI;MAChB,kBAAkB,EAAE,IAAI;MACxB,wBAAwB,EAAE,IAAI,CAAC,IAAI;MACnC,0BAA0B,EAAE,IAAI;MAChC,mBAAmB,EAAE,IAAI;KAC5B,CAAC;IAEF,QACIb,iBAAK,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAC,IAAI,IAChCA,qBAAQ,CACN,EACR;GACL;;;;;;;;;;","names":["getIconName","h","Host","index","getIconColor","CheckboxTemplate","listStrings","MDCList","MDCMenuSurface","Corner","isDescendant","ESCAPE","ESCAPE_KEY_CODE","TAB","TAB_KEY_CODE"],"sources":["./src/components/dynamic-label/dynamic-label.scss?tag=limel-dynamic-label&encapsulation=shadow","./src/components/dynamic-label/dynamic-label.tsx","./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx","./src/components/list/radio-button/radio-button.template.tsx","./src/components/list/list-renderer.tsx","./src/components/list/list.scss?tag=limel-list&encapsulation=shadow","./src/components/list/list.tsx","./src/components/menu-surface/menu-surface.scss?tag=limel-menu-surface&encapsulation=shadow","./src/components/menu-surface/menu-surface.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n\n* {\n    box-sizing: border-box;\n    min-width: 0;\n}\n\n:host(limel-dynamic-label) {\n    --limel-dynamic-label-min-height: 1.75rem;\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    border-radius: 0.5rem;\n    min-width: 0;\n}\n\nlimel-icon {\n    --limel-icon-svg-margin: 0.125rem;\n    border-radius: 0.25rem;\n    flex-shrink: 0;\n    width: var(--limel-dynamic-label-min-height);\n    color: rgb(\n        var(--contrast-900)\n    ); // The default `false` color. Will be overwritten by `Icon`\n}\n\nspan {\n    @include mixins.truncate-text;\n    flex-grow: 1;\n    font-size: 0.8125rem; // `13px`, Like Checkbox & Switch\n    color: var(--mdc-theme-on-surface);\n}\n","import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <span>{label}</span>;\n    }\n}\n",":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n","import { FunctionalComponent, h } from '@stencil/core';\n\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div class=\"mdc-form-field\">\n            <div\n                class={`\n                        mdc-radio\n                        ${props.disabled ? 'mdc-radio--disabled' : ''}\n                    `}\n            >\n                <input\n                    class=\"mdc-radio__native-control\"\n                    type=\"radio\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled}\n                    onChange={props.onChange}\n                />\n                <div class=\"mdc-radio__background\">\n                    <div class=\"mdc-radio__outer-circle\" />\n                    <div class=\"mdc-radio__inner-circle\" />\n                </div>\n            </div>\n            <label\n                class={`${props.disabled ? 'disabled' : ''}`}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","import { ListItem } from './list-item.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { h } from '@stencil/core';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { ListRendererConfig } from './list-renderer-config';\nimport { RadioButtonTemplate } from './radio-button/radio-button.template';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nexport class ListRenderer {\n    private defaultConfig: ListRendererConfig = {\n        isOpen: true,\n        badgeIcons: false,\n    };\n\n    private config: ListRendererConfig;\n\n    private hasIcons: boolean;\n    private twoLines: boolean;\n    private avatarList: boolean;\n    private commandKey: boolean;\n\n    private applyTabIndexToItemAtIndex: number;\n\n    public render(\n        items: Array<ListItem | ListSeparator>,\n        config: ListRendererConfig = {},\n    ) {\n        items = items || [];\n        this.config = { ...this.defaultConfig, ...config };\n\n        this.twoLines = items.some((item) => {\n            return 'secondaryText' in item && !!item.secondaryText;\n        });\n\n        this.hasIcons = items.some((item) => {\n            return 'icon' in item && !!item.icon;\n        });\n\n        this.avatarList = this.config.badgeIcons && this.hasIcons;\n        const selectableListTypes = ['selectable', 'radio', 'checkbox'];\n\n        let role;\n        switch (this.config.type) {\n            case 'checkbox':\n                role = 'group';\n                break;\n            case 'radio':\n                role = 'radiogroup';\n                break;\n            default:\n                role = 'listbox';\n        }\n\n        this.applyTabIndexToItemAtIndex =\n            this.getIndexForWhichToApplyTabIndex(items);\n\n        const classNames = {\n            'mdc-deprecated-list': true,\n            'mdc-deprecated-list--two-line': this.twoLines,\n            selectable: selectableListTypes.includes(this.config.type),\n            'mdc-deprecated-list--avatar-list': this.avatarList,\n            'list--compact':\n                this.twoLines &&\n                this.commandKey &&\n                ['small', 'x-small'].includes(this.config.iconSize),\n        };\n\n        return (\n            <ul class={classNames} role={role} aria-orientation=\"vertical\">\n                {items.map(this.renderListItem)}\n            </ul>\n        );\n    }\n\n    /**\n     * Determine which ListItem should have the `tab-index` attribute set,\n     * and return the index at which that ListItem is located in `items`.\n     * Returns `undefined` if no item should have the attribute set.\n     * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n     *\n     * @param items - the items of the list, including any `ListSeparator`:s\n     * @returns the index as per the description\n     */\n    private getIndexForWhichToApplyTabIndex = (\n        items: Array<ListItem | ListSeparator>,\n    ) => {\n        let result;\n        for (let i = 0, max = items.length; i < max; i += 1) {\n            if ('separator' in items[i]) {\n                // Ignore ListSeparator\n            } else {\n                const item = items[i] as ListItem<any>;\n                if (item.selected) {\n                    result = i;\n                    break;\n                }\n\n                if (result === undefined && !item.disabled) {\n                    result = i;\n                    // Do NOT break, as any later item with\n                    // `selected=true` should get the tab-index instead!\n                }\n            }\n        }\n\n        return result;\n    };\n\n    /**\n     * Render a single list item\n     *\n     * @param item - the item to render\n     * @param index - the index the item had in the `items` array\n     * @returns the list item\n     */\n    private renderListItem = (\n        item: ListItem | ListSeparator,\n        index: number,\n    ) => {\n        if ('separator' in item) {\n            return (\n                <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n                    {this.renderTextForSeparator(item)}\n                    <div class=\"limel-list-divider-line\" />\n                </li>\n            );\n        }\n\n        if (['radio', 'checkbox'].includes(this.config.type)) {\n            return this.renderVariantListItem(this.config, item, index);\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item--selected': item.selected,\n            'has-primary-component': this.hasPrimaryComponent(item),\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                aria-selected={item.selected ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {this.renderIcon(this.config, item)}\n                {this.getPrimaryComponent(item)}\n                {this.renderText(item)}\n                {this.twoLines && this.avatarList ? this.renderDivider() : null}\n                {this.renderActionMenu(item.actions)}\n            </li>\n        );\n    };\n\n    private renderTextForSeparator = (item: ListSeparator) => {\n        if ('text' in item) {\n            return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n        }\n    };\n\n    private getPrimaryComponent(item: ListItem): Element {\n        if (!this.hasPrimaryComponent(item)) {\n            return;\n        }\n\n        const PrimaryComponent = item.primaryComponent.name;\n        const props = item.primaryComponent.props;\n\n        return <PrimaryComponent {...props} />;\n    }\n\n    private hasPrimaryComponent = (item: ListItem) => {\n        return !!item?.primaryComponent?.name;\n    };\n\n    /**\n     * Render the text of the list item\n     *\n     * @param item - the list item\n     * @returns the text for the list item\n     */\n    private renderText = (item: ListItem) => {\n        if (this.isSimpleItem(item)) {\n            return (\n                <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n            );\n        }\n\n        return (\n            <div class=\"mdc-deprecated-list-item__text\">\n                <div class=\"mdc-deprecated-list-item__primary-command-text\">\n                    <div class=\"mdc-deprecated-list-item__primary-text\">\n                        {item.text}\n                    </div>\n                </div>\n                <div class=\"mdc-deprecated-list-item__secondary-text\">\n                    {item.secondaryText}\n                </div>\n            </div>\n        );\n    };\n\n    private isSimpleItem = (item: ListItem): boolean => {\n        return !('secondaryText' in item);\n    };\n\n    /**\n     * Render an icon for a list item\n     *\n     * @param config - the config object, passed on from the `renderListItem` function\n     * @param item - the list item\n     * @returns the icon element\n     */\n    private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n        const style: any = {};\n        const name = getIconName(item.icon);\n        if (!name) {\n            return;\n        }\n\n        const color = getIconColor(item.icon, item.iconColor);\n\n        if (color) {\n            if (config.badgeIcons) {\n                style['--icon-background-color'] = color;\n            } else {\n                style.color = color;\n            }\n        }\n\n        return (\n            <limel-icon\n                badge={config.badgeIcons}\n                class=\"mdc-deprecated-list-item__graphic\"\n                name={name}\n                style={style}\n                size={config.iconSize}\n            />\n        );\n    };\n\n    private renderDivider = () => {\n        const classes = {\n            'mdc-deprecated-list-divider': true,\n            'mdc-deprecated-list-divider--inset': true,\n        };\n        if (this.config.iconSize) {\n            classes[this.config.iconSize] = true;\n        }\n\n        return <hr class={classes} />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={actions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                />\n            </limel-menu>\n        );\n    };\n\n    private renderVariantListItem = (\n        config: ListRendererConfig,\n        item: ListItem,\n        index: number,\n    ) => {\n        let itemTemplate;\n        if (config.type === 'radio') {\n            itemTemplate = (\n                <RadioButtonTemplate\n                    id={`c_${index}`}\n                    checked={item.selected}\n                    disabled={item.disabled}\n                />\n            );\n        } else if (config.type === 'checkbox') {\n            itemTemplate = (\n                <CheckboxTemplate\n                    id={`c_${index}`}\n                    checked={item.selected}\n                    disabled={item.disabled}\n                />\n            );\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item__text': !item.secondaryText,\n            'has-primary-component': this.hasPrimaryComponent(item),\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                role={config.type}\n                aria-checked={item.selected ? 'true' : 'false'}\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {this.renderVariantListItemContent(config, item, itemTemplate)}\n            </li>\n        );\n    };\n\n    private renderVariantListItemContent = (\n        config: ListRendererConfig,\n        item: ListItem,\n        itemTemplate: any,\n    ) => {\n        if (this.hasIcons) {\n            return [\n                item.icon ? this.renderIcon(config, item) : null,\n                this.getPrimaryComponent(item),\n                this.renderText(item),\n                <div class=\"mdc-deprecated-list-item__meta\">\n                    {itemTemplate}\n                </div>,\n            ];\n        }\n\n        return [\n            <div class=\"mdc-deprecated-list-item__graphic\">{itemTemplate}</div>,\n            this.getPrimaryComponent(item),\n            this.renderText(item),\n        ];\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n@use '../checkbox/checkbox.scss';\n\n@use '@material/list';\n\n$list-border-radius: 0.375rem; // 6px\n$list--has-interactive-items--mdc-list-item--hover: 1;\n$list-static-actions-list: 1;\n$list-mdc-list-item: 0;\n\n/**\n * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.\n * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.\n * @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.\n * @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.\n * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.\n * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.\n * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.\n * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.\n * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;\n */\n\n:host(limel-list) {\n    display: block;\n    isolation: isolate;\n    @include checkbox.custom-checkbox-styles;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n@include list.deprecated-core-styles;\n\n.mdc-deprecated-list,\n.mdc-deprecated-list-item__secondary-text {\n    // As long as this component is depended on MDC,\n    // we need to force it to be font-agnostic.\n    // When MDC-dependency is removed, this block can also be removed.\n    // However, on removal of MDC-dependency, we should also make sure to check\n    // other font-related styles that might be set by MDC,\n    // such as `letter-spacing` or `font-size`.\n    font-family: inherit;\n}\n\n.mdc-deprecated-list {\n    --mdc-theme-text-icon-on-background: var(\n        --icon-color,\n        rgb(var(--contrast-900))\n    );\n    margin: var(\n        --list-margin,\n        0.25rem\n    ); // added space to visualize keyboard-focused items\n    padding: 0;\n    border-radius: $list-border-radius;\n\n    .mdc-deprecated-list-divider {\n        border-bottom-color: transparent;\n        display: flex;\n        align-items: center;\n        gap: 0.75rem;\n        height: auto;\n        padding: 0 0.5rem;\n    }\n\n    .limel-list-divider-line {\n        background-color: rgb(var(--contrast-400));\n        height: 0.125rem;\n        border-radius: 1rem;\n        min-width: 1rem;\n        flex-grow: 1;\n    }\n\n    .limel-list-divider-title {\n        all: unset;\n        @include mixins.truncate-text;\n        color: rgb(var(--contrast-900));\n        font-size: 0.8125rem; // 13px\n    }\n\n    .mdc-deprecated-list-item {\n        gap: 0.5rem;\n        transition: background-color 0.2s ease;\n        box-sizing: border-box;\n        z-index: $list-mdc-list-item; // in Chrome on Windows, menus flicker when they have a scroll bar and user hovers on them. We may be able to remove this in future versions of Chrome. Kia 2021-May-12\n        min-height: 2.5rem;\n\n        &:not(.mdc-deprecated-list-item--disabled) {\n            &:hover {\n                background-color: rgb(var(--contrast-300));\n                z-index: 1;\n            }\n        }\n\n        &.mdc-deprecated-list-item--disabled {\n            cursor: not-allowed;\n\n            limel-icon {\n                opacity: 0.38; // similar to `mdc-deprecated-list-item__text` when disabled\n            }\n        }\n\n        &:first-child {\n            border-top-left-radius: $list-border-radius;\n            border-top-right-radius: $list-border-radius;\n        }\n        &:last-child {\n            border-bottom-right-radius: $list-border-radius;\n            border-bottom-left-radius: $list-border-radius;\n        }\n    }\n\n    &.selectable\n        .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled) {\n        cursor: pointer;\n    }\n\n    .mdc-deprecated-list-item__meta {\n        // the action menu on the right side a list item\n        line-height: 100%;\n        margin-right: -0.5rem;\n        order: var(--limel-list-meta-order, 3);\n    }\n\n    .mdc-deprecated-list-item__graphic {\n        margin-right: 0;\n    }\n\n    &.mdc-deprecated-list--avatar-list {\n        position: relative;\n\n        limel-icon.mdc-deprecated-list-item__graphic {\n            background-color: var(\n                --icon-background-color,\n                rgb(var(--contrast-900))\n            );\n            color: var(--icon-color, rgba(var(--color-white), 0.88));\n            margin-left: functions.pxToRem(-4);\n        }\n\n        hr.mdc-deprecated-list-divider {\n            position: absolute;\n            bottom: 0;\n\n            &.mdc-deprecated-list-divider--inset {\n                --icon-width: #{functions.pxToRem(40)};\n                --icon-right-padding: #{functions.pxToRem(12)};\n                --list-right-padding: #{functions.pxToRem(12)};\n                right: 0;\n                width: calc(\n                    100% - var(--icon-width) - var(--icon-right-padding) - var(\n                            --list-right-padding\n                        )\n                );\n\n                &.x-small {\n                    --icon-width: #{functions.pxToRem(24)};\n                }\n\n                &.small {\n                    --icon-width: #{functions.pxToRem(32)};\n                }\n\n                &.medium {\n                    --icon-width: #{functions.pxToRem(40)};\n                }\n\n                &.large {\n                    --icon-width: #{functions.pxToRem(48)};\n                }\n            }\n        }\n\n        .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {\n            display: none;\n        }\n    }\n\n    &.mdc-deprecated-list--two-line {\n        .mdc-deprecated-list-item__text {\n            padding-top: functions.pxToRem(8);\n            padding-bottom: functions.pxToRem(8);\n        }\n    }\n\n    .mdc-deprecated-list-item__secondary-text,\n    .mdc-deprecated-list-item__primary-text,\n    .mdc-deprecated-list-item__command-text {\n        margin: 0;\n        &:before,\n        &:after {\n            display: none;\n        }\n    }\n\n    .mdc-deprecated-list-item__command-text {\n        color: rgb(var(--contrast-800));\n        margin-left: 0.7rem;\n    }\n\n    .mdc-deprecated-list-item__text {\n        align-self: center;\n        width: 100%;\n    }\n\n    .mdc-deprecated-list-item__primary-command-text {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: baseline;\n    }\n\n    // Tweaks to display the icon correctly in Edge\n    limel-icon.mdc-deprecated-list-item__graphic {\n        display: block;\n    }\n}\n\n.mdc-deprecated-list:not(.mdc-deprecated-list--avatar-list) {\n    limel-icon.mdc-deprecated-list-item__graphic {\n        // Tweaks to make icon lists align nicely with badge-icon lists.\n        &[size='x-small'] {\n            margin-right: 0;\n        }\n        &[size='small'] {\n            margin-right: 0;\n        }\n        &[size='medium'] {\n            margin-right: 0.25rem;\n        }\n        &[size='large'] {\n            margin-right: 0.5rem;\n        }\n    }\n}\n\n.mdc-deprecated-list-item.mdc-deprecated-list-item--selected {\n    &:before {\n        background-color: var(--mdc-theme-primary);\n        opacity: 0.15;\n    }\n}\n\n:not(.mdc-deprecated-list--non-interactive) {\n    > {\n        :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n            @include mixins.visualize-keyboard-focus;\n\n            &:focus-visible {\n                border-radius: $list-border-radius;\n                z-index: $list--has-interactive-items--mdc-list-item--hover;\n            }\n        }\n    }\n}\n\n@import '../checkbox/checkbox.scss';\n\n@import './radio-button/radio-button.scss';\n\n@import './partial-styles/custom-styles.scss';\n@import './partial-styles/enable-multiline-text.scss';\n@import './partial-styles/_has-grid-layout.scss';\n@import './partial-styles/_static-actions.scss';\n","import { IconSize } from '../icon/icon.types';\nimport { ListItem, ListSeparator } from './list-item.types';\nimport { ListType } from './list.types';\nimport { MDCList, MDCListActionEvent } from '@material/list';\nimport { strings as listStrings } from '@material/list/constants';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { ListRenderer } from './list-renderer';\nimport { ListRendererConfig } from './list-renderer-config';\n\nconst { ACTION_EVENT } = listStrings;\n\n/**\n * @exampleComponent limel-example-list\n * @exampleComponent limel-example-list-secondary\n * @exampleComponent limel-example-list-separator\n * @exampleComponent limel-example-list-selectable\n * @exampleComponent limel-example-list-icons\n * @exampleComponent limel-example-list-badge-icons\n * @exampleComponent limel-example-list-checkbox\n * @exampleComponent limel-example-list-checkbox-icons\n * @exampleComponent limel-example-list-radio-button\n * @exampleComponent limel-example-list-radio-button-icons\n * @exampleComponent limel-example-list-action\n * @exampleComponent limel-example-list-striped\n * @exampleComponent limel-example-list-badge-icons-with-multiple-lines\n * @exampleComponent limel-example-list-grid\n * @exampleComponent limel-example-list-primary-component\n */\n@Component({\n    tag: 'limel-list',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'list.scss',\n})\nexport class List {\n    /**\n     * List of items to display\n     */\n    @Prop()\n    public items: Array<ListItem | ListSeparator>;\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop()\n    public badgeIcons: boolean;\n\n    /**\n     * Size of the icons in the list\n     */\n    @Prop()\n    public iconSize: IconSize = 'small';\n\n    /**\n     * The type of the list, omit to get a regular list. Available types are:\n     * `selectable`: regular list with single selection.\n     * `radio`: radio button list with single selection.\n     * `checkbox`: checkbox list with multiple selection.\n     */\n    @Prop()\n    public type: ListType;\n\n    /**\n     * By default, lists will display 3 lines of text, and then truncate the rest.\n     * Consumers can increase or decrease this number by specifying\n     * `maxLinesSecondaryText`. If consumer enters zero or negative\n     * numbers we default to 1; and if they type decimals we round up.\n     */\n    // eslint-disable-next-line no-magic-numbers\n    @Prop() maxLinesSecondaryText: number = 3;\n\n    @Element()\n    private element: HTMLLimelListElement;\n\n    private config: ListRendererConfig;\n    private listRenderer = new ListRenderer();\n    private mdcList: MDCList;\n    private multiple: boolean;\n    private selectable: boolean;\n\n    /**\n     * Fired when a new value has been selected from the list.\n     * Only fired if `type` is set to `selectable`, `radio` or `checkbox`.\n     */\n    @Event()\n    private change: EventEmitter<ListItem | ListItem[]>;\n\n    /**\n     * Fired when an action has been selected from the action menu of a list item\n     */\n    @Event()\n    protected select: EventEmitter<ListItem | ListItem[]>;\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public disconnectedCallback() {\n        this.teardown();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n        this.triggerIconColorWarning();\n    }\n\n    public render() {\n        this.config = {\n            badgeIcons: this.badgeIcons,\n            type: this.type,\n            iconSize: this.iconSize,\n        };\n        let maxLinesSecondaryText = +this.maxLinesSecondaryText?.toFixed();\n        if (this.maxLinesSecondaryText < 1) {\n            maxLinesSecondaryText = 1;\n        }\n\n        const html = this.listRenderer.render(this.items, this.config);\n\n        return (\n            <Host\n                style={{\n                    '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,\n                }}\n            >\n                {html}\n            </Host>\n        );\n    }\n\n    @Watch('type')\n    protected handleType() {\n        this.setupListeners();\n    }\n\n    @Watch('items')\n    protected itemsChanged() {\n        if (!this.mdcList) {\n            return;\n        }\n\n        setTimeout(() => {\n            this.setup();\n\n            const listItems = this.items.filter(this.isListItem);\n\n            if (this.multiple) {\n                this.mdcList.selectedIndex = listItems\n                    .filter((item: ListItem) => item.selected)\n                    .map((item: ListItem) => listItems.indexOf(item));\n            } else {\n                const selectedIndex = listItems.findIndex(\n                    (item: ListItem) => item.selected,\n                );\n\n                if (selectedIndex === -1) {\n                    this.mdcList.initializeListType();\n                } else {\n                    this.mdcList.selectedIndex = selectedIndex;\n                }\n            }\n        }, 0);\n    }\n\n    private setup = () => {\n        this.setupList();\n\n        this.setupListeners();\n    };\n\n    private setupList = () => {\n        if (this.mdcList) {\n            this.teardown();\n            this.mdcList = null;\n        }\n\n        const element = this.element.shadowRoot.querySelector(\n            '.mdc-deprecated-list',\n        );\n        if (!element) {\n            return;\n        }\n\n        this.mdcList = new MDCList(element);\n        this.mdcList.hasTypeahead = true;\n    };\n\n    private setupListeners = () => {\n        if (!this.mdcList) {\n            return;\n        }\n\n        this.mdcList.unlisten(ACTION_EVENT, this.handleAction);\n\n        this.selectable = ['selectable', 'radio', 'checkbox'].includes(\n            this.type,\n        );\n        this.multiple = this.type === 'checkbox';\n\n        if (!this.selectable) {\n            return;\n        }\n\n        this.mdcList.listen(ACTION_EVENT, this.handleAction);\n        this.mdcList.singleSelection = !this.multiple;\n    };\n\n    private teardown = () => {\n        this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);\n        this.mdcList?.destroy();\n    };\n\n    private handleAction = (event: MDCListActionEvent) => {\n        if (!this.multiple) {\n            this.handleSingleSelect(event.detail.index);\n\n            return;\n        }\n\n        this.handleMultiSelect(event.detail.index);\n    };\n\n    private handleSingleSelect = (index: number) => {\n        const listItems = this.items.filter(this.isListItem) as ListItem[];\n        if (listItems[index].disabled) {\n            return;\n        }\n\n        const selectedItem: ListItem = listItems.find((item: ListItem) => {\n            return !!item.selected;\n        });\n\n        if (selectedItem) {\n            if (this.type !== 'radio') {\n                this.mdcList.selectedIndex = -1;\n            }\n\n            this.change.emit({ ...selectedItem, selected: false });\n        }\n\n        if (listItems[index] !== selectedItem) {\n            this.change.emit({ ...listItems[index], selected: true });\n        }\n    };\n\n    private handleMultiSelect = (index: number) => {\n        const listItems = this.items.filter(this.isListItem) as ListItem[];\n        if (listItems[index].disabled) {\n            return;\n        }\n\n        const selectedItems: ListItem[] = listItems\n            .filter((item: ListItem, listIndex: number) => {\n                if (listIndex === index) {\n                    // This is the item that was selected or deselected,\n                    // so we negate its previous selection status.\n                    return !item.selected;\n                }\n\n                // This is an item that didn't change, so we keep its selection status.\n                return item.selected;\n            })\n            .map((item: ListItem) => {\n                return { ...item, selected: true };\n            });\n\n        this.change.emit(selectedItems);\n    };\n\n    private isListItem = (item: ListItem): boolean => {\n        return !('separator' in item);\n    };\n\n    private triggerIconColorWarning() {\n        if (this.items?.some((item) => 'iconColor' in item)) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","@use '@material/menu-surface';\n@use '@material/elevation';\n@use '@material/menu';\n\n/**\n* @prop --limel-menu-surface-display: defines whether the surface is treated as a block, flex or grid. It affects layout used to display its children. Defaults to `block`.\n* @prop --limel-menu-surface-flex-direction: defines the direction of menu-surface layout.\n*/\n\n:host(limel-menu-surface) {\n    display: block;\n    max-height: inherit;\n}\n\n@include menu-surface.core-styles;\n@include menu.core-styles;\n\n.mdc-menu-surface {\n    opacity: 1; // overrides MDC's, to enable animating the surface when used in `limel-portal`\n    display: var(--limel-menu-surface-display, block);\n    flex-direction: var(--limel-menu-surface-flex-direction, row);\n    max-height: inherit;\n    position: relative;\n    --mdc-menu-max-width: var(\n        --menu-surface-width,\n        min(calc(100vw - 2rem), 20rem)\n    );\n    background-color: var(--lime-elevated-surface-background-color);\n}\n\n:host(limel-menu-surface.has-grid-layout) {\n    .mdc-menu-surface {\n        width: var(--menu-surface-width, min(calc(100vw - 2rem), 40rem));\n        max-width: unset;\n    }\n}\n","import { Corner, MDCMenuSurface } from '@material/menu-surface';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n@Component({\n    tag: 'limel-menu-surface',\n    shadow: true,\n    styleUrl: 'menu-surface.scss',\n})\nexport class MenuSurface {\n    /**\n     * True if the menu surface is open, false otherwise\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Clicks in this element should not be prevented when the menu surface is open\n     */\n    @Prop()\n    public allowClicksElement: HTMLElement;\n\n    /**\n     * Emitted when the menu surface is dismissed and should be closed\n     */\n    @Event()\n    public dismiss: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelMenuSurfaceElement;\n\n    private menuSurface: MDCMenuSurface;\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public disconnectedCallback() {\n        this.teardown();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n    }\n\n    public render() {\n        const classList = {\n            'mdc-menu': true,\n            'mdc-menu-surface': true,\n            'mdc-menu-surface--open': this.open,\n            'mdc-elevation-transition': true,\n            'mdc-elevation--z4': true,\n        };\n\n        return (\n            <div class={classList} tabindex=\"-1\">\n                <slot />\n            </div>\n        );\n    }\n\n    private setup = () => {\n        const menuElement: HTMLElement =\n            this.host.shadowRoot.querySelector('.mdc-menu-surface');\n        if (!menuElement) {\n            return;\n        }\n\n        this.menuSurface = new MDCMenuSurface(menuElement);\n        this.menuSurface.setAnchorCorner(Corner.TOP_START);\n\n        document.addEventListener('mousedown', this.handleDocumentClick, {\n            capture: true,\n        });\n        this.host.addEventListener('keydown', this.handleKeyDown);\n        window.addEventListener('resize', this.handleResize, {\n            passive: true,\n        });\n    };\n\n    private teardown = () => {\n        this.menuSurface?.destroy();\n        document.removeEventListener('mousedown', this.handleDocumentClick, {\n            capture: true,\n        });\n        this.host.removeEventListener('keydown', this.handleKeyDown);\n        window.removeEventListener('resize', this.handleResize);\n    };\n\n    private handleDocumentClick = (event) => {\n        const elementPath = event.composedPath ? event.composedPath() : [];\n\n        if (!this.open) {\n            return;\n        }\n\n        if (isDescendant(event.target, this.host)) {\n            return;\n        }\n\n        if (this.allowClicksElement) {\n            const clickedInAllowedElement = elementPath.includes(\n                this.allowClicksElement,\n            );\n\n            if (clickedInAllowedElement) {\n                return;\n            }\n        }\n\n        this.dismiss.emit();\n        this.preventClickEventPropagation();\n    };\n\n    private handleResize = () => {\n        if (this.open) {\n            this.dismiss.emit();\n        }\n    };\n\n    private preventClickEventPropagation = () => {\n        // When the menu surface is open, we want to stop the `click` event from propagating\n        // when clicking outside the surface itself. This is to prevent any dialog that might\n        // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,\n        // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener\n        // for `click`, so we can capture and \"kill\" it.\n        document.addEventListener('click', this.stopEvent, {\n            capture: true,\n            once: true,\n        });\n        // We also capture and \"kill\" the next `mouseup` event.\n        document.addEventListener('mouseup', this.stopEvent, {\n            capture: true,\n            once: true,\n        });\n        // If the user dragged the scrollbar, no `click` event happens. So when we get the\n        // `mouseup` event, remove the handler for `click` if it's still there.\n        // Otherwise, we would catch the next click even though the menu is no longer open.\n        document.addEventListener(\n            'mouseup',\n            () => {\n                document.removeEventListener('click', this.stopEvent, {\n                    capture: true,\n                });\n            },\n            {\n                once: true,\n            },\n        );\n    };\n\n    private stopEvent = (event) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        const isEscape =\n            event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n        const isTab = event.key === TAB || event.keyCode === TAB_KEY_CODE;\n\n        if (this.open && (isEscape || isTab)) {\n            event.stopPropagation();\n            this.dismiss.emit();\n        }\n    };\n}\n"],"version":3}

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

@@ -1997,6 +1997,8 @@ var createPopper = /*#__PURE__*/popperGenerator({
 const portalCss = ":host(limel-portal){display:block;position:absolute;top:0;bottom:0;width:100%;pointer-events:none}:host([hidden]){display:none}slot{display:none}";
 
 const IS_VISIBLE_CLASS = 'is-visible';
+const IS_HIDING_CLASS = 'is-hiding';
+const hideAnimationDuration = 300;
 const Portal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -2057,9 +2059,7 @@ const Portal = class {
       this.init();
     }
     if (!this.visible) {
-      this.hideContainer();
-      this.styleContainer();
-      this.destroyPopper();
+      this.animateHideAndCleanup();
       return;
     }
     this.styleContainer();
@@ -2096,7 +2096,6 @@ const Portal = class {
       }
       parent.appendChild(element);
     });
-    this.hideContainer();
     this.container.parentElement.removeChild(this.container);
   }
   hideContainer() {
@@ -2108,6 +2107,20 @@ const Portal = class {
   showContainer() {
     this.container.classList.add(IS_VISIBLE_CLASS);
   }
+  animateHideAndCleanup() {
+    if (!this.container) {
+      return;
+    }
+    this.container.classList.add(IS_HIDING_CLASS);
+    this.styleContainer();
+    setTimeout(() => {
+      this.container.classList.remove(IS_HIDING_CLASS);
+      if (!this.visible) {
+        this.container.classList.remove(IS_VISIBLE_CLASS);
+        this.destroyPopper();
+      }
+    }, hideAnimationDuration);
+  }
   styleContainer() {
     this.setContainerWidth();
     this.setContainerHeight();