@limetech/lime-elements 37.55.4 → 37.55.6

package/dist/lime-elements/{p-d1838cf6.entry.js → p-39c678f7.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as i,g as r}from"./p-443111b3.js";import{a as o}from"./p-8cb56052.js";import{c as s}from"./p-3ccdc4a3.js";import"./p-eab67c09.js";const n='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:2.75rem;padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}';const a=class{constructor(e){t(this,e);this.label=undefined}render(){return e(i,{title:this.labelIsLarge()?this.label:"",class:{"has-large-label":this.labelIsLarge()}},e("span",null,this.renderLabel()))}renderLabel(){if(typeof this.label==="number"){return o(this.label)}return this.label}labelIsLarge(){const t=999;const e=6;if(typeof this.label==="number"&&this.label>t||typeof this.label==="string"&&this.label.length>e){return true}}};a.style=n;function l(t,e){let i=e;do{i=i.parentNode}while(i&&i.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&i.nodeType!==Node.DOCUMENT_NODE);return i===null||i===void 0?void 0:i.getElementById(t)}const h=500;class d{constructor(t,e,i=h){this.timerHandle=null;this.showCallback=t;this.hideCallback=e;this.delayForShowing=i}showAfterDelay(){if(!this.timerHandle){this.timerHandle=setTimeout(this.showCallback,this.delayForShowing)}}hide(){clearTimeout(this.timerHandle);this.timerHandle=null;this.hideCallback()}}const c=":host(limel-tooltip){position:absolute;pointer-events:none}";const m=50;const u=class{constructor(e){t(this,e);this.showTooltip=()=>{this.tooltipTimer.showAfterDelay()};this.hideTooltip=()=>{this.tooltipTimer.hide()};this.elementId=undefined;this.label=undefined;this.helperLabel=undefined;this.maxlength=m;this.openDirection="top";this.open=undefined;this.portalId=s();this.tooltipId=s();this.tooltipTimer=new d((()=>this.open=true),(()=>this.open=false))}connectedCallback(){this.ownerElement=l(this.elementId,this.host);this.setOwnerAriaLabel();this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){const t=getComputedStyle(this.host).getPropertyValue("--tooltip-z-index");return e("div",{class:"trigger-anchor"},e("limel-portal",{openDirection:this.openDirection,visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t,"pointer-events":"none"},anchor:this.ownerElement},e("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,maxlength:this.maxlength,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){var t;(t=this.ownerElement)===null||t===void 0?void 0:t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){var t,e,i,r;(t=this.ownerElement)===null||t===void 0?void 0:t.addEventListener("mouseover",this.showTooltip);(e=this.ownerElement)===null||e===void 0?void 0:e.addEventListener("mouseout",this.hideTooltip);(i=this.ownerElement)===null||i===void 0?void 0:i.addEventListener("focus",this.showTooltip);(r=this.ownerElement)===null||r===void 0?void 0:r.addEventListener("blur",this.hideTooltip)}removeListeners(){var t,e,i,r;(t=this.ownerElement)===null||t===void 0?void 0:t.removeEventListener("mouseover",this.showTooltip);(e=this.ownerElement)===null||e===void 0?void 0:e.removeEventListener("mouseout",this.hideTooltip);(i=this.ownerElement)===null||i===void 0?void 0:i.removeEventListener("focus",this.showTooltip);(r=this.ownerElement)===null||r===void 0?void 0:r.removeEventListener("blur",this.hideTooltip)}get host(){return r(this)}};u.style=c;const b=":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 v=class{constructor(e){t(this,e);this.label=undefined;this.helperLabel=undefined;this.maxlength=undefined}render(){let t=false;if(this.helperLabel&&this.maxlength){t=this.label.length+this.helperLabel.length>this.maxlength}const i={};if(this.maxlength){i.style={"--tooltip-max-width-of-text":`${this.maxlength}`+"ch"}}return[e("text",Object.assign({class:{"has-column-layout":t}},i),e("div",{class:"label"},this.label),e("div",{class:"helper-label"},this.helperLabel))]}};v.style=b;export{a as limel_badge,u as limel_tooltip,v as limel_tooltip_content};
-//# sourceMappingURL=p-d1838cf6.entry.js.map
+import{r as t,h as e,H as i,g as r}from"./p-443111b3.js";import{a as o}from"./p-8cb56052.js";import{c as s}from"./p-3ccdc4a3.js";import"./p-eab67c09.js";const n='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:2.75rem;padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}';const a=class{constructor(e){t(this,e);this.label=undefined}render(){return e(i,{title:this.labelIsLarge()?this.label:"",class:{"has-large-label":this.labelIsLarge()}},e("span",null,this.renderLabel()))}renderLabel(){if(typeof this.label==="number"){return o(this.label)}return this.label}labelIsLarge(){const t=999;const e=6;if(typeof this.label==="number"&&this.label>t||typeof this.label==="string"&&this.label.length>e){return true}}};a.style=n;function l(t,e){let i=e;do{i=i.parentNode}while(i&&i.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&i.nodeType!==Node.DOCUMENT_NODE);return i===null||i===void 0?void 0:i.getElementById(t)}const h=500;class d{constructor(t,e,i=h){this.timerHandle=null;this.showCallback=t;this.hideCallback=e;this.delayForShowing=i}showAfterDelay(){if(!this.timerHandle){this.timerHandle=setTimeout(this.showCallback,this.delayForShowing)}}hide(){clearTimeout(this.timerHandle);this.timerHandle=null;this.hideCallback()}}const c=":host(limel-tooltip){position:absolute;pointer-events:none}";const m=50;const u=class{constructor(e){t(this,e);this.showTooltip=()=>{this.tooltipTimer.showAfterDelay()};this.hideTooltip=()=>{this.tooltipTimer.hide()};this.elementId=undefined;this.label=undefined;this.helperLabel=undefined;this.maxlength=m;this.openDirection="top";this.open=undefined;this.tooltipId=s();this.tooltipTimer=new d((()=>this.open=true),(()=>this.open=false))}connectedCallback(){this.ownerElement=l(this.elementId,this.host);this.setOwnerAriaLabel();this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){return e("div",{class:"trigger-anchor"},e("limel-portal",{openDirection:this.openDirection,visible:this.open,style:{"pointer-events":"none"},anchor:this.ownerElement},e("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,maxlength:this.maxlength,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){var t;(t=this.ownerElement)===null||t===void 0?void 0:t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){var t,e,i,r;(t=this.ownerElement)===null||t===void 0?void 0:t.addEventListener("mouseover",this.showTooltip);(e=this.ownerElement)===null||e===void 0?void 0:e.addEventListener("mouseout",this.hideTooltip);(i=this.ownerElement)===null||i===void 0?void 0:i.addEventListener("focus",this.showTooltip);(r=this.ownerElement)===null||r===void 0?void 0:r.addEventListener("blur",this.hideTooltip)}removeListeners(){var t,e,i,r;(t=this.ownerElement)===null||t===void 0?void 0:t.removeEventListener("mouseover",this.showTooltip);(e=this.ownerElement)===null||e===void 0?void 0:e.removeEventListener("mouseout",this.hideTooltip);(i=this.ownerElement)===null||i===void 0?void 0:i.removeEventListener("focus",this.showTooltip);(r=this.ownerElement)===null||r===void 0?void 0:r.removeEventListener("blur",this.hideTooltip)}get host(){return r(this)}};u.style=c;const b=":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 v=class{constructor(e){t(this,e);this.label=undefined;this.helperLabel=undefined;this.maxlength=undefined}render(){let t=false;if(this.helperLabel&&this.maxlength){t=this.label.length+this.helperLabel.length>this.maxlength}const i={};if(this.maxlength){i.style={"--tooltip-max-width-of-text":`${this.maxlength}`+"ch"}}return[e("text",Object.assign({class:{"has-column-layout":t}},i),e("div",{class:"label"},this.label),e("div",{class:"helper-label"},this.helperLabel))]}};v.style=b;export{a as limel_badge,u as limel_tooltip,v as limel_tooltip_content};
+//# sourceMappingURL=p-39c678f7.entry.js.map

package/dist/lime-elements/p-39c678f7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","Badge","render","h","Host","title","this","labelIsLarge","label","class","renderLabel","abbreviate","largeNumericLabel","largeStringLabel","length","getOwnerElement","id","startingPoint","element","parentNode","nodeType","Node","DOCUMENT_FRAGMENT_NODE","DOCUMENT_NODE","getElementById","DEFAULT_DELAY_FOR_SHOWING","TooltipTimer","constructor","showCallback","hideCallback","delayForShowing","timerHandle","showAfterDelay","setTimeout","hide","clearTimeout","tooltipCss","DEFAULT_MAX_LENGTH","Tooltip","hostRef","showTooltip","tooltipTimer","hideTooltip","tooltipId","createRandomString","open","connectedCallback","ownerElement","elementId","host","setOwnerAriaLabel","addListeners","disconnectedCallback","removeListeners","openDirection","visible","style","anchor","helperLabel","maxlength","role","_a","setAttribute","addEventListener","_b","_c","_d","removeEventListener","tooltipContentCss","TooltipContent","isLabelsTextLong","props","Object","assign"],"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",":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 tooltipId: string;\n    private ownerElement: HTMLElement;\n    private tooltipTimer: TooltipTimer;\n\n    public constructor() {\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        return (\n            <div class=\"trigger-anchor\">\n                <limel-portal\n                    openDirection={this.openDirection}\n                    visible={this.open}\n                    style={{\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"],"mappings":"yJAAA,MAAMA,EAAW,u7D,MCgBJC,EAAK,M,8CAUPC,SACH,OACIC,EAACC,EAAI,CACDC,MAAOC,KAAKC,eAAiBD,KAAKE,MAAQ,GAC1CC,MAAO,CACH,kBAAmBH,KAAKC,iBAG5BJ,EAAA,YAAOG,KAAKI,e,CAKhBA,cACJ,UAAWJ,KAAKE,QAAU,SAAU,CAChC,OAAOG,EAAWL,KAAKE,M,CAG3B,OAAOF,KAAKE,K,CAGRD,eACJ,MAAMK,EAAoB,IAC1B,MAAMC,EAAmB,EACzB,UACYP,KAAKE,QAAU,UACnBF,KAAKE,MAAQI,UACTN,KAAKE,QAAU,UACnBF,KAAKE,MAAMM,OAASD,EAC1B,CACE,OAAO,I,uBCxDHE,EACZC,EACAC,GAEA,IAAIC,EAAgBD,EAEpB,EAAG,CACCC,EAAUA,EAAQC,U,OAElBD,GACAA,EAAQE,WAAaC,KAAKC,wBAC1BJ,EAAQE,WAAaC,KAAKE,eAG9B,OAAQL,IAAsB,MAAtBA,SAAO,SAAPA,EAAwBM,eAAeR,EACnD,CCfA,MAAMS,EAA4B,I,MAErBC,EAMTC,YACIC,EACAC,EACAC,EAA0BL,GARtBnB,KAAAyB,YAA6B,KAUjCzB,KAAKsB,aAAeA,EACpBtB,KAAKuB,aAAeA,EACpBvB,KAAKwB,gBAAkBA,C,CAG3BE,iBACI,IAAK1B,KAAKyB,YAAa,CACnBzB,KAAKyB,YAAcE,WACf3B,KAAKsB,aACLtB,KAAKwB,gB,EAKjBI,OACIC,aAAa7B,KAAKyB,aAClBzB,KAAKyB,YAAc,KACnBzB,KAAKuB,c,EC9Bb,MAAMO,EAAa,8DCOnB,MAAMC,EAAqB,G,MAmDdC,EAAO,MA8ChBX,YAAAY,G,UA4DQjC,KAAAkC,YAAc,KAClBlC,KAAKmC,aAAaT,gBAAgB,EAG9B1B,KAAAoC,YAAc,KAClBpC,KAAKmC,aAAaP,MAAM,E,wFAnFAG,E,mBAMU,M,oBAalC/B,KAAKqC,UAAYC,IACjBtC,KAAKmC,aAAe,IAAIf,GACpB,IAAOpB,KAAKuC,KAAO,OACnB,IAAOvC,KAAKuC,KAAO,O,CAIpBC,oBACHxC,KAAKyC,aAAehC,EAAgBT,KAAK0C,UAAW1C,KAAK2C,MACzD3C,KAAK4C,oBACL5C,KAAK6C,c,CAGFC,uBACH9C,KAAK+C,iB,CAGFnD,SACH,OACIC,EAAA,OAAKM,MAAM,kBACPN,EAAA,gBACImD,cAAehD,KAAKgD,cACpBC,QAASjD,KAAKuC,KACdW,MAAO,CACH,iBAAkB,QAEtBC,OAAQnD,KAAKyC,cAEb5C,EAAA,yBACIK,MAAOF,KAAKE,MACZkD,YAAapD,KAAKoD,YAClBC,UAAWrD,KAAKqD,UAChBC,KAAK,UAAS,eACAtD,KAAKuC,KACnB7B,GAAIV,KAAKqC,a,CAOrBO,oB,OACJW,EAAAvD,KAAKyC,gBAAY,MAAAc,SAAA,SAAAA,EAAEC,aAAa,mBAAoBxD,KAAKqC,U,CAGrDQ,e,aACJU,EAAAvD,KAAKyC,gBAAY,MAAAc,SAAA,SAAAA,EAAEE,iBAAiB,YAAazD,KAAKkC,cACtDwB,EAAA1D,KAAKyC,gBAAY,MAAAiB,SAAA,SAAAA,EAAED,iBAAiB,WAAYzD,KAAKoC,cACrDuB,EAAA3D,KAAKyC,gBAAY,MAAAkB,SAAA,SAAAA,EAAEF,iBAAiB,QAASzD,KAAKkC,cAClD0B,EAAA5D,KAAKyC,gBAAY,MAAAmB,SAAA,SAAAA,EAAEH,iBAAiB,OAAQzD,KAAKoC,Y,CAG7CW,kB,aACJQ,EAAAvD,KAAKyC,gBAAY,MAAAc,SAAA,SAAAA,EAAEM,oBAAoB,YAAa7D,KAAKkC,cACzDwB,EAAA1D,KAAKyC,gBAAY,MAAAiB,SAAA,SAAAA,EAAEG,oBAAoB,WAAY7D,KAAKoC,cACxDuB,EAAA3D,KAAKyC,gBAAY,MAAAkB,SAAA,SAAAA,EAAEE,oBAAoB,QAAS7D,KAAKkC,cACrD0B,EAAA5D,KAAKyC,gBAAY,MAAAmB,SAAA,SAAAA,EAAEC,oBAAoB,OAAQ7D,KAAKoC,Y,uCCjK5D,MAAM0B,EAAoB,kvB,MCYbC,EAAc,M,kGAmBhBnE,SACH,IAAIoE,EAAmB,MACvB,GAAIhE,KAAKoD,aAAepD,KAAKqD,UAAW,CACpCW,EACIhE,KAAKE,MAAMM,OAASR,KAAKoD,YAAY5C,OAASR,KAAKqD,S,CAG3D,MAAMY,EAAa,GACnB,GAAIjE,KAAKqD,UAAW,CAChBY,EAAMf,MAAQ,CACV,8BAA+B,GAAGlD,KAAKqD,YAAc,K,CAI7D,MAAO,CACHxD,EAAA,OAAAqE,OAAAC,OAAA,CAAMhE,MAAO,CAAE,oBAAqB6D,IAAwBC,GACxDpE,EAAA,OAAKM,MAAM,SAASH,KAAKE,OACzBL,EAAA,OAAKM,MAAM,gBAAgBH,KAAKoD,c"}

package/dist/lime-elements/p-465c22b0.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,g as e}from"./p-443111b3.js";import{c as h}from"./p-3ccdc4a3.js";import{i as a,a as n}from"./p-cc9ebbef.js";import"./p-4ffb9b7a.js";import{m as r}from"./p-6aa5e7b8.js";import{i as l}from"./p-5e7b7b03.js";import{M as o}from"./p-9ab3a908.js";import"./p-eab67c09.js";import"./p-2ff3f85e.js";import"./p-11d5d44e.js";import"./p-dcc97cc2.js";import"./p-083d1db4.js";class d{constructor(t="en"){this.language=t}formatDate(t,i){if(t){return r(t).locale(this.getLanguage()).format(i)}return""}parseDate(t,i){if(t){return r(t,i).toDate()}return null}getLanguage(){if(this.language==="no"){return"nb"}return this.language}getDateFormat(t){return{date:"L",time:"LT",week:"[w] W GGGG",month:"MM/YYYY",quarter:"[Q]Q YYYY",year:"YYYY",datetime:"L - LT"}[t]||"L - LT"}}const m=":host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}";const u={date:"date",time:"time",week:a()?"date":"week",month:"month",quarter:"date",year:"date",datetime:"datetime-local",default:"datetime-local"};const c={date:"Y-MM-DD",time:"HH:mm",week:"GGGG-[W]WW",month:"Y-MM","datetime-local":"Y-MM-DD[T]HH:mm"};const p=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.portalId=`date-picker-calendar-${h()}`;this.documentClickListener=t=>{const i=t.composedPath();if(i.includes(this.textField)){return}if(!l(i[0],this.host)){this.hideCalendar()}};this.formatValue=t=>this.dateFormatter.formatDate(t,this.internalFormat);this.disabled=false;this.readonly=false;this.invalid=false;this.label=undefined;this.placeholder=undefined;this.helperText=undefined;this.required=false;this.value=undefined;this.type="datetime";this.format=undefined;this.language="en";this.formatter=undefined;this.internalFormat=undefined;this.showPortal=false;this.handleCalendarChange=this.handleCalendarChange.bind(this);this.handleInputElementChange=this.handleInputElementChange.bind(this);this.showCalendar=this.showCalendar.bind(this);this.dateFormatter=new d(this.language);this.clearValue=this.clearValue.bind(this);this.hideCalendar=this.hideCalendar.bind(this);this.onInputClick=this.onInputClick.bind(this);this.nativeChangeHandler=this.nativeChangeHandler.bind(this);this.preventBlurFromCalendarContainer=this.preventBlurFromCalendarContainer.bind(this)}componentWillLoad(){this.useNative=!this.readonly&&(a()||n());this.updateInternalFormatAndType()}componentWillUpdate(){this.updateInternalFormatAndType()}render(){const t={onAction:this.clearValue};if(this.value&&!this.readonly){t.trailingIcon="clear_symbol"}if(this.useNative){return s("limel-input-field",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:this.helperText,required:this.required,value:this.formatValue(this.value),type:this.nativeType,onChange:this.nativeChangeHandler})}const i=this.formatter||this.formatValue;return[s("limel-input-field",Object.assign({disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,placeholder:this.placeholder,helperText:this.helperText,required:this.required,value:this.value?i(this.value):"",onFocus:this.showCalendar,onClick:this.onInputClick,onChange:this.handleInputElementChange,ref:t=>this.textField=t},t)),s("limel-portal",{visible:this.showPortal},s("limel-flatpickr-adapter",{id:this.portalId,format:this.internalFormat,language:this.language,type:this.type,value:this.value,ref:t=>this.datePickerCalendar=t,isOpen:this.showPortal,formatter:i,onChange:this.handleCalendarChange}))]}updateInternalFormatAndType(){this.nativeType=u[this.type||"default"];this.nativeFormat=c[this.nativeType];if(this.useNative){this.internalFormat=this.nativeFormat}else if(this.formatter||this.format){this.internalFormat=this.format}else{this.internalFormat=this.dateFormatter.getDateFormat(this.type)}}nativeChangeHandler(t){t.stopPropagation();const i=this.dateFormatter.parseDate(t.detail,this.internalFormat);this.change.emit(i)}showCalendar(t){this.showPortal=true;const i=this.textField.shadowRoot.querySelector("input");setTimeout((()=>{this.datePickerCalendar.inputElement=i}));t.stopPropagation();document.addEventListener("mousedown",this.documentClickListener,{passive:true});document.addEventListener("blur",this.preventBlurFromCalendarContainer,{capture:true})}preventBlurFromCalendarContainer(t){if(t.relatedTarget===this.datePickerCalendar){t.stopPropagation()}}hideCalendar(){setTimeout((()=>{this.showPortal=false}));document.removeEventListener("mousedown",this.documentClickListener);document.removeEventListener("blur",this.preventBlurFromCalendarContainer);if(!this.pickerIsAutoClosing()){this.fixFlatpickrFocusBug()}}fixFlatpickrFocusBug(){const t=new o(this.textField.shadowRoot.querySelector(".mdc-text-field"));t.getDefaultFoundation().deactivateFocus()}handleCalendarChange(t){const i=t.detail;t.stopPropagation();if(this.pickerIsAutoClosing()){this.hideCalendar()}this.change.emit(i)}onInputClick(t){if(this.disabled||this.readonly){return}if(this.showPortal){return}this.showCalendar(t)}handleInputElementChange(t){if(t.detail===""){this.clearValue()}t.stopPropagation()}pickerIsAutoClosing(){return this.type!=="datetime"&&this.type!=="time"}clearValue(){this.change.emit(null)}get host(){return e(this)}};p.style=m;export{p as limel_date_picker};
+//# sourceMappingURL=p-465c22b0.entry.js.map

package/dist/lime-elements/p-465c22b0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DateFormatter","constructor","language","this","formatDate","date","dateFormat","moment","locale","getLanguage","format","parseDate","toDate","getDateFormat","type","time","week","month","quarter","year","datetime","datePickerCss","nativeTypeForConsumerType","isIOSDevice","default","nativeFormatForType","DatePicker","hostRef","portalId","createRandomString","documentClickListener","event","elementPath","composedPath","includes","textField","isDescendant","host","hideCalendar","formatValue","value","dateFormatter","internalFormat","handleCalendarChange","bind","handleInputElementChange","showCalendar","clearValue","onInputClick","nativeChangeHandler","preventBlurFromCalendarContainer","componentWillLoad","useNative","readonly","isAndroidDevice","updateInternalFormatAndType","componentWillUpdate","render","inputProps","onAction","trailingIcon","h","disabled","invalid","label","helperText","required","nativeType","onChange","formatter","Object","assign","placeholder","onFocus","onClick","ref","el","visible","showPortal","id","datePickerCalendar","isOpen","nativeFormat","stopPropagation","detail","change","emit","inputElement","shadowRoot","querySelector","setTimeout","document","addEventListener","passive","capture","relatedTarget","removeEventListener","pickerIsAutoClosing","fixFlatpickrFocusBug","mdcTextField","MDCTextField","getDefaultFoundation","deactivateFocus"],"sources":["./src/components/date-picker/dateFormatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n    private language: string;\n\n    public constructor(language: string = 'en') {\n        this.language = language;\n    }\n\n    public formatDate(date: Date, dateFormat: string) {\n        if (date) {\n            return moment(date).locale(this.getLanguage()).format(dateFormat);\n        }\n\n        return '';\n    }\n\n    public parseDate(date: string, dateFormat: string) {\n        if (date) {\n            return moment(date, dateFormat).toDate();\n        }\n\n        return null;\n    }\n\n    public getLanguage() {\n        if (this.language === 'no') {\n            return 'nb';\n        }\n\n        return this.language;\n    }\n\n    public getDateFormat(type: DateType) {\n        return (\n            {\n                date: 'L',\n                time: 'LT',\n                week: '[w] W GGGG',\n                month: 'MM/YYYY',\n                quarter: '[Q]Q YYYY',\n                year: 'YYYY',\n                datetime: 'L - LT',\n            }[type] || 'L - LT'\n        );\n    }\n}\n",":host(limel-date-picker) {\n    position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n    pointer-events: none;\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Element,\n    EventEmitter,\n    Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './dateFormatter';\nimport { MDCTextField } from '@material/textfield';\nimport { isDescendant } from 'src/util/dom';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n    date: 'date',\n    time: 'time',\n    // Mobile Safari feature detects as capable of input type `week`,\n    // but it just displays a non-interactive input\n    // TODO(ads): remove this when support is decent on iOS!\n    week: isIOSDevice() ? 'date' : 'week',\n    month: 'month',\n    quarter: 'date',\n    year: 'date',\n    datetime: 'datetime-local',\n    default: 'datetime-local',\n};\nconst nativeFormatForType = {\n    date: 'Y-MM-DD',\n    time: 'HH:mm',\n    week: 'GGGG-[W]WW',\n    month: 'Y-MM',\n    'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n    tag: 'limel-date-picker',\n    shadow: true,\n    styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the date picker is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Text to display next to the date picker\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * The placeholder text shown inside the input field, when the field is focused and empty\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * The value of the field.\n     */\n    @Prop()\n    public value: Date;\n\n    /**\n     * Type of date picker.\n     */\n    @Prop({ reflect: true })\n    public type: DateType = 'datetime';\n\n    /**\n     * Format to display the selected date in.\n     */\n    @Prop({ reflect: true })\n    public format: string;\n\n    /**\n     * Defines the localisation for translations and date formatting.\n     * Property `format` customizes the localized date format.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Custom formatting function. Will be used for date formatting.\n     *\n     * :::note\n     * overrides `format` and `language`\n     * :::\n     */\n    @Prop()\n    public formatter?: (date: Date) => string;\n\n    /**\n     * Emitted when the date picker value is changed.\n     */\n    @Event()\n    private change: EventEmitter<Date>;\n\n    @Element()\n    private host: HTMLLimelDatePickerElement;\n\n    @State()\n    private internalFormat: string;\n    @State()\n    private showPortal = false;\n\n    private useNative: boolean;\n    private nativeType: InputType;\n    private nativeFormat: string;\n    private textField: HTMLElement;\n    private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n    private portalId = `date-picker-calendar-${createRandomString()}`;\n    private dateFormatter: DateFormatter;\n\n    constructor() {\n        this.handleCalendarChange = this.handleCalendarChange.bind(this);\n        this.handleInputElementChange =\n            this.handleInputElementChange.bind(this);\n        this.showCalendar = this.showCalendar.bind(this);\n        this.dateFormatter = new DateFormatter(this.language);\n        this.clearValue = this.clearValue.bind(this);\n        this.hideCalendar = this.hideCalendar.bind(this);\n        this.onInputClick = this.onInputClick.bind(this);\n        this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n        this.preventBlurFromCalendarContainer =\n            this.preventBlurFromCalendarContainer.bind(this);\n    }\n\n    public componentWillLoad() {\n        this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n        this.updateInternalFormatAndType();\n    }\n\n    public componentWillUpdate() {\n        this.updateInternalFormatAndType();\n    }\n\n    public render() {\n        const inputProps: any = {\n            onAction: this.clearValue,\n        };\n\n        if (this.value && !this.readonly) {\n            inputProps.trailingIcon = 'clear_symbol';\n        }\n\n        if (this.useNative) {\n            return (\n                <limel-input-field\n                    disabled={this.disabled}\n                    readonly={this.readonly}\n                    invalid={this.invalid}\n                    label={this.label}\n                    helperText={this.helperText}\n                    required={this.required}\n                    value={this.formatValue(this.value)}\n                    type={this.nativeType}\n                    onChange={this.nativeChangeHandler}\n                />\n            );\n        }\n\n        const formatter = this.formatter || this.formatValue;\n\n        return [\n            <limel-input-field\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                placeholder={this.placeholder}\n                helperText={this.helperText}\n                required={this.required}\n                value={this.value ? formatter(this.value) : ''}\n                onFocus={this.showCalendar}\n                onClick={this.onInputClick}\n                onChange={this.handleInputElementChange}\n                ref={(el) => (this.textField = el)}\n                {...inputProps}\n            />,\n            <limel-portal visible={this.showPortal}>\n                <limel-flatpickr-adapter\n                    id={this.portalId}\n                    format={this.internalFormat}\n                    language={this.language}\n                    type={this.type}\n                    value={this.value}\n                    ref={(el) => (this.datePickerCalendar = el)}\n                    isOpen={this.showPortal}\n                    formatter={formatter}\n                    onChange={this.handleCalendarChange}\n                />\n            </limel-portal>,\n        ];\n    }\n\n    private updateInternalFormatAndType() {\n        this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n        this.nativeFormat = nativeFormatForType[this.nativeType];\n\n        if (this.useNative) {\n            this.internalFormat = this.nativeFormat;\n        } else if (this.formatter || this.format) {\n            this.internalFormat = this.format;\n        } else {\n            this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n        }\n    }\n\n    private nativeChangeHandler(event: CustomEvent<string>) {\n        event.stopPropagation();\n        const date = this.dateFormatter.parseDate(\n            event.detail,\n            this.internalFormat,\n        );\n        this.change.emit(date);\n    }\n\n    private showCalendar(event) {\n        this.showPortal = true;\n        const inputElement = this.textField.shadowRoot.querySelector('input');\n        setTimeout(() => {\n            this.datePickerCalendar.inputElement = inputElement;\n        });\n        event.stopPropagation();\n\n        document.addEventListener('mousedown', this.documentClickListener, {\n            passive: true,\n        });\n\n        document.addEventListener(\n            'blur',\n            this.preventBlurFromCalendarContainer,\n            {\n                capture: true,\n            },\n        );\n    }\n\n    private preventBlurFromCalendarContainer(event) {\n        // We don't want the input element to lose focus when we pick\n        // a date in the calendar container.\n        // This is also required in order to not close the non\n        // automatically closing pickers (type datetime and time)\n        // when you pick a value.\n        if (event.relatedTarget === this.datePickerCalendar) {\n            event.stopPropagation();\n        }\n    }\n\n    private hideCalendar() {\n        setTimeout(() => {\n            this.showPortal = false;\n        });\n        document.removeEventListener('mousedown', this.documentClickListener);\n        document.removeEventListener(\n            'blur',\n            this.preventBlurFromCalendarContainer,\n        );\n\n        if (!this.pickerIsAutoClosing()) {\n            this.fixFlatpickrFocusBug();\n        }\n    }\n\n    private fixFlatpickrFocusBug() {\n        // Flatpickr removes the focus from the input field\n        // but the 'visual focus' is still there\n        const mdcTextField = new MDCTextField(\n            this.textField.shadowRoot.querySelector('.mdc-text-field'),\n        );\n        mdcTextField.getDefaultFoundation().deactivateFocus();\n    }\n\n    private documentClickListener = (event: MouseEvent) => {\n        const elementPath = event.composedPath() as HTMLElement[];\n        if (elementPath.includes(this.textField)) {\n            return;\n        }\n\n        if (!isDescendant(elementPath[0], this.host)) {\n            this.hideCalendar();\n        }\n    };\n\n    private handleCalendarChange(event) {\n        const date = event.detail;\n        event.stopPropagation();\n        if (this.pickerIsAutoClosing()) {\n            this.hideCalendar();\n        }\n\n        this.change.emit(date);\n    }\n\n    private onInputClick(event) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.showPortal) {\n            return;\n        }\n\n        this.showCalendar(event);\n    }\n\n    private handleInputElementChange(event) {\n        if (event.detail === '') {\n            this.clearValue();\n        }\n\n        event.stopPropagation();\n    }\n\n    private pickerIsAutoClosing() {\n        return this.type !== 'datetime' && this.type !== 'time';\n    }\n\n    private clearValue() {\n        this.change.emit(null);\n    }\n\n    private formatValue = (value: Date): string =>\n        this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-47f7d74f.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["calloutIcons","note","important","tip","caution","warning","getIcon","icon","type","_a","getHeading","heading","language","key","translate","get","error","calloutCss","Callout","render","h","class","role","name","this"],"sources":["./src/components/callout/callout.helpers.ts","./src/components/callout/callout.scss?tag=limel-callout&encapsulation=shadow","./src/components/callout/callout.tsx"],"sourcesContent":["import translate from '../../global/translations';\n\nconst calloutIcons: Record<string, string> = {\n    note: 'info',\n    important: 'exclamation_mark',\n    tip: 'idea',\n    caution: 'high_priority',\n    warning: 'error',\n};\n\nexport function getIcon(icon: string, type: string = 'note'): string {\n    if (icon) {\n        return icon;\n    }\n\n    return calloutIcons[type] ?? calloutIcons.note;\n}\n\nexport function getHeading(\n    heading: string,\n    type: string = 'note',\n    language: string = 'en',\n): string {\n    if (heading) {\n        return heading;\n    }\n\n    const key = `callout.${type}`;\n\n    try {\n        return translate.get(key, language);\n    } catch (error) {\n        return translate.get(key, 'en');\n    }\n}\n","/**\n * @prop --callout-text-color: Text color of the component. Defaults to `--contrast-1100`.\n * @prop --callout-background-color: Background color of the component. Defaults to `--contrast-300`.\n * @prop --callout-color: Color used in the UI to add more contextual meaning about the type of the information. This color is different based on the chosen `type`, but you can override it using this prop.\n*/\n\n:host(limel-callout) {\n    display: flex;\n    border-radius: 0.5rem;\n    overflow: hidden;\n\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-contrast-100))\n    );\n    color: var(--callout-text-color, rgb(var(--contrast-1100)));\n}\n:host([type='note']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-gray-default))\n    );\n}\n:host([type='important']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-sky-default))\n    );\n}\n:host([type='tip']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-green-default))\n    );\n}\n:host([type='caution']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-orange-light))\n    );\n}\n:host([type='warning']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-red-dark))\n    );\n}\n\n.side {\n    padding: 0.25rem;\n    position: relative;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        opacity: 0.2;\n        background-color: var(--limel-callout-tint-color);\n    }\n\n    limel-icon {\n        width: 1.5rem;\n        color: var(--limel-callout-tint-color);\n        margin-top: 0.0625rem; // ensures vertical alignment with the `heading`\n    }\n}\n\n.main {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.25rem 0.5rem 0.5rem 0.5rem;\n    background-color: var(--callout-background-color, rgb(var(--contrast-300)));\n}\n\n.heading {\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { CalloutType } from '../callout/callout.types';\nimport { Languages } from '../date-picker/date.types';\nimport { getHeading, getIcon } from './callout.helpers';\n\n/**\n * Callouts—also known as Admonitions—are useful for including supportive or\n * special content within a large piece of text, or even inside a user\n * interface.\n *\n * When used in a document or text based user interface, the callout attracts\n * the reader's attention to a particular piece of information, without\n * significantly interrupting their flow of reading the document.\n *\n * In a user interface, a callout is more intrusive to the end-user. Still, it\n * could be a good choice when you intend to slightly disturb the user's\n * attention, and challenge them to pay extra attention to the information\n * presented. In such cases, a callout should not be used as a static and\n * constantly present element of the UI. Rather, it should be displayed when\n * something unusual or remarkable demands the user's attention.\n *\n * @exampleComponent limel-example-callout-note\n * @exampleComponent limel-example-callout-important\n * @exampleComponent limel-example-callout-tip\n * @exampleComponent limel-example-callout-caution\n * @exampleComponent limel-example-callout-warning\n * @exampleComponent limel-example-callout-rich-content\n * @exampleComponent limel-example-callout-custom-heading\n * @exampleComponent limel-example-callout-custom-icon\n * @exampleComponent limel-example-callout-styles\n * @exampleComponent limel-example-custom-type\n * @exampleComponent limel-example-callout-composite\n */\n@Component({\n    tag: 'limel-callout',\n    shadow: true,\n    styleUrl: 'callout.scss',\n})\nexport class Callout {\n    /**\n     * Heading of the callout, which can be used to override the\n     * default heading which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Icon of the callout, which can be used to override the\n     * default icon which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public icon?: string;\n\n    /**\n     * Defines how the component is visualized, for example\n     * which heading, color or icon is used in its user interface.\n     */\n    @Prop({ reflect: true })\n    public type?: CalloutType = 'note';\n\n    /**\n     * Defines the language for translations.\n     * Will translate the default headings for supported languages.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    public render() {\n        return [\n            <div class=\"side\" role=\"presentation\">\n                <limel-icon name={getIcon(this.icon, this.type)} />\n            </div>,\n            <div class=\"main\">\n                <h1 class=\"heading\">\n                    {getHeading(this.heading, this.type, this.language)}\n                </h1>\n                <slot />\n            </div>,\n        ];\n    }\n}\n"],"mappings":"+EAEA,MAAMA,EAAuC,CACzCC,KAAM,OACNC,UAAW,mBACXC,IAAK,OACLC,QAAS,gBACTC,QAAS,S,SAGGC,EAAQC,EAAcC,EAAe,Q,MACjD,GAAID,EAAM,CACN,OAAOA,C,CAGX,OAAOE,EAAAT,EAAaQ,MAAK,MAAAC,SAAA,EAAAA,EAAIT,EAAaC,IAC9C,C,SAEgBS,EACZC,EACAH,EAAe,OACfI,EAAmB,MAEnB,GAAID,EAAS,CACT,OAAOA,C,CAGX,MAAME,EAAM,WAAWL,IAEvB,IACI,OAAOM,EAAUC,IAAIF,EAAKD,E,CAC5B,MAAOI,GACL,OAAOF,EAAUC,IAAIF,EAAK,K,CAElC,CClCA,MAAMI,EAAa,wwC,MCsCNC,EAAO,M,8EAoBY,O,cAOC,I,CAEtBC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,OAAOC,KAAK,gBACnBF,EAAA,cAAYG,KAAMjB,EAAQkB,KAAKjB,KAAMiB,KAAKhB,SAE9CY,EAAA,OAAKC,MAAM,QACPD,EAAA,MAAIC,MAAM,WACLX,EAAWc,KAAKb,QAASa,KAAKhB,KAAMgB,KAAKZ,WAE9CQ,EAAA,c"}
+{"version":3,"names":["calloutIcons","note","important","tip","caution","warning","getIcon","icon","type","_a","getHeading","heading","language","key","translate","get","calloutCss","Callout","render","h","class","role","name","this"],"sources":["./src/components/callout/callout.helpers.ts","./src/components/callout/callout.scss?tag=limel-callout&encapsulation=shadow","./src/components/callout/callout.tsx"],"sourcesContent":["import translate from '../../global/translations';\n\nconst calloutIcons: Record<string, string> = {\n    note: 'info',\n    important: 'exclamation_mark',\n    tip: 'idea',\n    caution: 'high_priority',\n    warning: 'error',\n};\n\nexport function getIcon(icon: string, type: string = 'note'): string {\n    if (icon) {\n        return icon;\n    }\n\n    return calloutIcons[type] ?? calloutIcons.note;\n}\n\nexport function getHeading(\n    heading: string,\n    type: string = 'note',\n    language: string = 'en',\n): string {\n    if (heading) {\n        return heading;\n    }\n\n    const key = `callout.${type}`;\n\n    try {\n        return translate.get(key, language);\n    } catch {\n        return translate.get(key, 'en');\n    }\n}\n","/**\n * @prop --callout-text-color: Text color of the component. Defaults to `--contrast-1100`.\n * @prop --callout-background-color: Background color of the component. Defaults to `--contrast-300`.\n * @prop --callout-color: Color used in the UI to add more contextual meaning about the type of the information. This color is different based on the chosen `type`, but you can override it using this prop.\n*/\n\n:host(limel-callout) {\n    display: flex;\n    border-radius: 0.5rem;\n    overflow: hidden;\n\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-contrast-100))\n    );\n    color: var(--callout-text-color, rgb(var(--contrast-1100)));\n}\n:host([type='note']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-gray-default))\n    );\n}\n:host([type='important']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-sky-default))\n    );\n}\n:host([type='tip']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-green-default))\n    );\n}\n:host([type='caution']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-orange-light))\n    );\n}\n:host([type='warning']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-red-dark))\n    );\n}\n\n.side {\n    padding: 0.25rem;\n    position: relative;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        opacity: 0.2;\n        background-color: var(--limel-callout-tint-color);\n    }\n\n    limel-icon {\n        width: 1.5rem;\n        color: var(--limel-callout-tint-color);\n        margin-top: 0.0625rem; // ensures vertical alignment with the `heading`\n    }\n}\n\n.main {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.25rem 0.5rem 0.5rem 0.5rem;\n    background-color: var(--callout-background-color, rgb(var(--contrast-300)));\n}\n\n.heading {\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { CalloutType } from '../callout/callout.types';\nimport { Languages } from '../date-picker/date.types';\nimport { getHeading, getIcon } from './callout.helpers';\n\n/**\n * Callouts—also known as Admonitions—are useful for including supportive or\n * special content within a large piece of text, or even inside a user\n * interface.\n *\n * When used in a document or text based user interface, the callout attracts\n * the reader's attention to a particular piece of information, without\n * significantly interrupting their flow of reading the document.\n *\n * In a user interface, a callout is more intrusive to the end-user. Still, it\n * could be a good choice when you intend to slightly disturb the user's\n * attention, and challenge them to pay extra attention to the information\n * presented. In such cases, a callout should not be used as a static and\n * constantly present element of the UI. Rather, it should be displayed when\n * something unusual or remarkable demands the user's attention.\n *\n * @exampleComponent limel-example-callout-note\n * @exampleComponent limel-example-callout-important\n * @exampleComponent limel-example-callout-tip\n * @exampleComponent limel-example-callout-caution\n * @exampleComponent limel-example-callout-warning\n * @exampleComponent limel-example-callout-rich-content\n * @exampleComponent limel-example-callout-custom-heading\n * @exampleComponent limel-example-callout-custom-icon\n * @exampleComponent limel-example-callout-styles\n * @exampleComponent limel-example-custom-type\n * @exampleComponent limel-example-callout-composite\n */\n@Component({\n    tag: 'limel-callout',\n    shadow: true,\n    styleUrl: 'callout.scss',\n})\nexport class Callout {\n    /**\n     * Heading of the callout, which can be used to override the\n     * default heading which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Icon of the callout, which can be used to override the\n     * default icon which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public icon?: string;\n\n    /**\n     * Defines how the component is visualized, for example\n     * which heading, color or icon is used in its user interface.\n     */\n    @Prop({ reflect: true })\n    public type?: CalloutType = 'note';\n\n    /**\n     * Defines the language for translations.\n     * Will translate the default headings for supported languages.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    public render() {\n        return [\n            <div class=\"side\" role=\"presentation\">\n                <limel-icon name={getIcon(this.icon, this.type)} />\n            </div>,\n            <div class=\"main\">\n                <h1 class=\"heading\">\n                    {getHeading(this.heading, this.type, this.language)}\n                </h1>\n                <slot />\n            </div>,\n        ];\n    }\n}\n"],"mappings":"+EAEA,MAAMA,EAAuC,CACzCC,KAAM,OACNC,UAAW,mBACXC,IAAK,OACLC,QAAS,gBACTC,QAAS,S,SAGGC,EAAQC,EAAcC,EAAe,Q,MACjD,GAAID,EAAM,CACN,OAAOA,C,CAGX,OAAOE,EAAAT,EAAaQ,MAAK,MAAAC,SAAA,EAAAA,EAAIT,EAAaC,IAC9C,C,SAEgBS,EACZC,EACAH,EAAe,OACfI,EAAmB,MAEnB,GAAID,EAAS,CACT,OAAOA,C,CAGX,MAAME,EAAM,WAAWL,IAEvB,IACI,OAAOM,EAAUC,IAAIF,EAAKD,E,CAC5B,MAAAH,GACE,OAAOK,EAAUC,IAAIF,EAAK,K,CAElC,CClCA,MAAMG,EAAa,wwC,MCsCNC,EAAO,M,8EAoBY,O,cAOC,I,CAEtBC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,OAAOC,KAAK,gBACnBF,EAAA,cAAYG,KAAMhB,EAAQiB,KAAKhB,KAAMgB,KAAKf,SAE9CW,EAAA,OAAKC,MAAM,QACPD,EAAA,MAAIC,MAAM,WACLV,EAAWa,KAAKZ,QAASY,KAAKf,KAAMe,KAAKX,WAE9CO,EAAA,c"}

package/dist/lime-elements/p-48652dbe.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","onChange","handleChange","required","background","class","slot","style","role","onClick","openPopover","id","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n    position: relative;\n    --popover-surface-width: 50rem;\n    --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        background: var(--color-picker-default-background);\n        background-size: 0.5rem;\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateX(\n            calc(\n                #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n            )\n        )\n        translateY(\n            calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n        );\n}\n","/* eslint-disable multiline-ternary */\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    class=\"chosen-color-input\"\n                />\n            </div>,\n        ];\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement,\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"6CAAA,MAAMA,EAAiB,04I,MCuBVC,EAAW,M,wDAuDZC,KAAAC,YAAc,MAoBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,WAEP,EAIhBrB,KAAAS,oBAAsB,KAC1B,MAAMa,EAAatB,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIkB,MAAM,iBACNC,KAAK,UACLC,MAAOH,EACPI,KAAK,SACLC,QAAS3B,KAAK4B,YACdC,GAAG,kBACL,EAIF7B,KAAAgB,6BACJc,IAEA9B,KAAK+B,eAAiBD,CAAO,EAGzB9B,KAAA4B,YAAeI,IACnBA,EAAMC,kBACNjC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBkB,IACtBA,EAAMC,kBACNjC,KAAKW,OAAS,KAAK,EAGfX,KAAAoB,aAAgBY,IACpBA,EAAMC,kBACNjC,KAAKkC,OAAOC,KAAKH,EAAMI,OAAO,E,4JArGjB,K,CAEVC,qB,MACH,GAAIrC,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnBqC,EAAAtC,KAAK+B,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,MAAO,CACHxC,KAAKE,gBACLG,EAAA,OAAKkB,MAAM,gBACNvB,KAAKQ,sBAENH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZE,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,SACflB,SAAUH,KAAKG,SACfoB,MAAM,wB"}
+{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","onChange","handleChange","required","background","class","slot","style","role","onClick","openPopover","id","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n    position: relative;\n    --popover-surface-width: 50rem;\n    --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        background: var(--color-picker-default-background);\n        background-size: 0.5rem;\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateX(\n            calc(\n                #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n            )\n        )\n        translateY(\n            calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n        );\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    class=\"chosen-color-input\"\n                />\n            </div>,\n        ];\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement,\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"6CAAA,MAAMA,EAAiB,04I,MCsBVC,EAAW,M,wDAuDZC,KAAAC,YAAc,MAoBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,WAEP,EAIhBrB,KAAAS,oBAAsB,KAC1B,MAAMa,EAAatB,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIkB,MAAM,iBACNC,KAAK,UACLC,MAAOH,EACPI,KAAK,SACLC,QAAS3B,KAAK4B,YACdC,GAAG,kBACL,EAIF7B,KAAAgB,6BACJc,IAEA9B,KAAK+B,eAAiBD,CAAO,EAGzB9B,KAAA4B,YAAeI,IACnBA,EAAMC,kBACNjC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBkB,IACtBA,EAAMC,kBACNjC,KAAKW,OAAS,KAAK,EAGfX,KAAAoB,aAAgBY,IACpBA,EAAMC,kBACNjC,KAAKkC,OAAOC,KAAKH,EAAMI,OAAO,E,4JArGjB,K,CAEVC,qB,MACH,GAAIrC,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnBqC,EAAAtC,KAAK+B,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,MAAO,CACHxC,KAAKE,gBACLG,EAAA,OAAKkB,MAAM,gBACNvB,KAAKQ,sBAENH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZE,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,SACflB,SAAUH,KAAKG,SACfoB,MAAM,wB"}

package/dist/lime-elements/p-4aa1d842.entry.js

@@ -0,0 +1,68 @@
+import{h as e,r as t,c as l,g as c}from"./p-443111b3.js";import{b as i}from"./p-cc9ebbef.js";import{a as d,d as o,S as n,h as r}from"./p-e03dfe70.js";import{i as a}from"./p-ce18730a.js";import{c as s}from"./p-3ccdc4a3.js";import{g as m,a as p}from"./p-2f777fdb.js";import{a as h}from"./p-083d1db4.js";import{_ as u,a as f,M as g,b as _}from"./p-2ff3f85e.js";import"./p-0b1af919.js";import"./p-dcc97cc2.js";
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */var b={ARIA_HIDDEN:"aria-hidden",ROLE:"role"};var x={HELPER_TEXT_VALIDATION_MSG:"mdc-select-helper-text--validation-msg",HELPER_TEXT_VALIDATION_MSG_PERSISTENT:"mdc-select-helper-text--validation-msg-persistent"};
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */var v=function(e){u(t,e);function t(l){return e.call(this,f(f({},t.defaultAdapter),l))||this}Object.defineProperty(t,"cssClasses",{get:function(){return x},enumerable:false,configurable:true});Object.defineProperty(t,"strings",{get:function(){return b},enumerable:false,configurable:true});Object.defineProperty(t,"defaultAdapter",{get:function(){return{addClass:function(){return undefined},removeClass:function(){return undefined},hasClass:function(){return false},setAttr:function(){return undefined},getAttr:function(){return null},removeAttr:function(){return undefined},setContent:function(){return undefined}}},enumerable:false,configurable:true});t.prototype.getId=function(){return this.adapter.getAttr("id")};t.prototype.isVisible=function(){return this.adapter.getAttr(b.ARIA_HIDDEN)!=="true"};t.prototype.setContent=function(e){this.adapter.setContent(e)};t.prototype.setValidation=function(e){if(e){this.adapter.addClass(x.HELPER_TEXT_VALIDATION_MSG)}else{this.adapter.removeClass(x.HELPER_TEXT_VALIDATION_MSG)}};t.prototype.setValidationMsgPersistent=function(e){if(e){this.adapter.addClass(x.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)}else{this.adapter.removeClass(x.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)}};t.prototype.setValidity=function(e){var t=this.adapter.hasClass(x.HELPER_TEXT_VALIDATION_MSG);if(!t){return}var l=this.adapter.hasClass(x.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);var c=!e||l;if(c){this.showToScreenReader();if(!e){this.adapter.setAttr(b.ROLE,"alert")}else{this.adapter.removeAttr(b.ROLE)}return}this.adapter.removeAttr(b.ROLE);this.hide()};t.prototype.showToScreenReader=function(){this.adapter.removeAttr(b.ARIA_HIDDEN)};t.prototype.hide=function(){this.adapter.setAttr(b.ARIA_HIDDEN,"true")};return t}(g);
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */var w=function(e){u(t,e);function t(){return e!==null&&e.apply(this,arguments)||this}t.attachTo=function(e){return new t(e)};Object.defineProperty(t.prototype,"foundationForSelect",{get:function(){return this.foundation},enumerable:false,configurable:true});t.prototype.getDefaultFoundation=function(){var e=this;var t={addClass:function(t){return e.root.classList.add(t)},removeClass:function(t){return e.root.classList.remove(t)},hasClass:function(t){return e.root.classList.contains(t)},getAttr:function(t){return e.root.getAttribute(t)},setAttr:function(t,l){return e.root.setAttribute(t,l)},removeAttr:function(t){return e.root.removeAttribute(t)},setContent:function(t){e.root.textContent=t}};return new v(t)};return t}(_);const y=t=>{const l=t.value;let c=!!t.value;let i=true;if(a(l)){c=l.length>0}else if(c){c=!!l.value;i=l.text===""}let d=!t.invalid;if(t.checkValid&&t.required&&!c){d=false}const o={"limel-select":true,"mdc-select":true,"mdc-select--outlined":true,"mdc-select--disabled":t.disabled,"limel-select--readonly":t.readonly,"limel-select--required":t.required,"limel-select--invalid":!d,"limel-select--empty":!c,"limel-select--with-helper-text":typeof t.helperText==="string"};return e("div",{class:o},e(k,Object.assign({},t,{hasValue:c,isValid:d,hasEmptyText:i})),e(Y,{text:t.helperText,isValid:!t.invalid}),e(T,Object.assign({},t)))};const k=t=>{const l={"mdc-select__anchor":true,"limel-select-trigger":true,"limel-select--focused":t.isOpen};const c={"mdc-floating-label":true,"mdc-floating-label--float-above":!t.hasEmptyText||t.isOpen||t.readonly||t.hasValue,"mdc-floating-label--active":t.isOpen};return e("button",{class:l,onClick:t.open,onKeyPress:t.onTriggerPress,"aria-haspopup":"listbox","aria-expanded":t.isOpen,"aria-controls":t.id,"aria-labelledby":"s-label s-selected-text","aria-required":t.required,disabled:t.disabled||t.readonly},e("span",{id:"s-label",class:c},t.label),e("span",{class:"mdc-select__selected-text-container limel-select__selected-option"},M(t.value),e("span",{id:"s-selected-text",class:"mdc-select__selected-text limel-select__selected-option__text"},q(t.value,t.readonly))),e(z,Object.assign({},t,{isValid:t.isValid})),e("span",{class:"mdc-select__dropdown-icon"},e("svg",{class:"mdc-select__dropdown-icon-graphic",viewBox:"7 10 10 5",focusable:"false"},e("polygon",{stroke:"none","fill-rule":"evenodd",points:"7 10 12 15 17 10"}))))};const z=t=>{if(t.isValid){return}return e("limel-icon",{name:"high_importance",size:"medium",class:"invalid-icon"})};const Y=t=>{if(typeof t.text!=="string"){return}return e("limel-helper-line",{helperText:t.text.trim(),invalid:!t.isValid})};const T=t=>{if(t.native){return e(C,Object.assign({},t))}return e(X,Object.assign({},t))};const X=t=>{const l=A(t.options,t.value,t.required);return e("limel-portal",{visible:t.isOpen,inheritParentWidth:true},e("limel-menu-surface",{id:t.id,open:t.isOpen,onDismiss:t.close,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex","min-width":"100%",width:"fit-content"}},e("limel-list",{items:l,type:t.multiple?"checkbox":"selectable",onChange:t.onMenuChange})))};const C=t=>{const l=t.options.filter((e=>!("separator"in e))).map(j(t.value));return e("select",{required:t.required,"aria-disabled":t.disabled,"aria-required":t.required,onChange:t.onNativeChange,onFocus:t.open,onBlur:t.close,class:"limel-select__native-control",disabled:t.disabled,multiple:t.multiple},l)};const j=t=>l=>{const{value:c,disabled:i,text:d}=l;return e("option",{key:c,value:c,selected:O(l,t),disabled:i},d)};function O(e,t){if(!t){return false}if(a(t)){return t.some((t=>e.value===t.value))}return e.value===t.value}function A(e,t,l=false){const c=E(l);return e.filter(c).map((e=>{if("separator"in e){return{text:e.text,separator:true}}const l=O(e,t);const{text:c,secondaryText:i,disabled:d}=e;const o=m(e.icon);const n=p(e.icon,e.iconColor);if(!o){return{text:c,secondaryText:i,selected:l,disabled:d,value:e}}return{text:c,secondaryText:i,selected:l,disabled:d,value:e,icon:{name:o,color:n}}}))}function E(e){return t=>{if(!e){return true}if(t.text){return true}if("separator"in t){return true}}}function q(e,t){if((!e||a(e)&&!e.length)&&t){return"–"}if(!e){return""}if(a(e)){return e.map((e=>e.text)).join(", ")}return e.text}function M(t){if(!t||!t.icon){return""}const l=m(t.icon);const c=p(t.icon,t.iconColor);const i={};if(c){i.color=c}return e("limel-icon",{class:"limel-select__selected-option__icon",name:l,size:"medium",style:i})}function G(e){e.forEach((e=>{if(e.iconColor){console.warn("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'}`.")}}))}const I='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1)}[dir=rtl] .mdc-floating-label,.mdc-floating-label[dir=rtl]{right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right;}.mdc-floating-label--float-above{cursor:auto}.mdc-floating-label--required::after{margin-left:1px;margin-right:0px;content:"*"}[dir=rtl] .mdc-floating-label--required,.mdc-floating-label--required[dir=rtl]{}[dir=rtl] .mdc-floating-label--required::after,.mdc-floating-label--required[dir=rtl]::after{margin-left:0;margin-right:1px}.mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-standard 250ms 1}@keyframes mdc-floating-label-shake-float-above-standard{0%{transform:translateX(calc(0 - 0%)) translateY(-106%) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-106%) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-106%) scale(0.75)}}@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-line-ripple::before,.mdc-line-ripple::after{position:absolute;bottom:0;left:0;width:100%;border-bottom-style:solid;content:""}.mdc-line-ripple::before{border-bottom-width:1px;z-index:1}.mdc-line-ripple::after{transform:scaleX(0);border-bottom-width:2px;opacity:0;z-index:2}.mdc-line-ripple::after{transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-line-ripple--active::after{transform:scaleX(1);opacity:1}.mdc-line-ripple--deactivating::after{opacity:0}.mdc-notched-outline{display:flex;position:absolute;top:0;right:0;left:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}[dir=rtl] .mdc-notched-outline,.mdc-notched-outline[dir=rtl]{text-align:right;}.mdc-notched-outline__leading,.mdc-notched-outline__notch,.mdc-notched-outline__trailing{box-sizing:border-box;height:100%;border-top:1px solid;border-bottom:1px solid;pointer-events:none}.mdc-notched-outline__leading{border-left:1px solid;border-right:none;width:12px}[dir=rtl] .mdc-notched-outline__leading,.mdc-notched-outline__leading[dir=rtl]{border-left:none;border-right:1px solid;}.mdc-notched-outline__trailing{border-left:none;border-right:1px solid;flex-grow:1}[dir=rtl] .mdc-notched-outline__trailing,.mdc-notched-outline__trailing[dir=rtl]{border-left:1px solid;border-right:none;}.mdc-notched-outline__notch{flex:0 0 auto;width:auto;max-width:calc(100% - 12px * 2)}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-notched-outline .mdc-floating-label--float-above{text-overflow:clip}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:133.3333333333%}.mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:0;padding-right:8px;border-top:none}[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch,.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl]{padding-left:8px;padding-right:0;}.mdc-notched-outline--no-label .mdc-notched-outline__notch{display:none}.mdc-select{display:inline-flex;position:relative}.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text{color:rgba(0, 0, 0, 0.87)}.mdc-select.mdc-select--disabled .mdc-select__selected-text{color:rgba(0, 0, 0, 0.38)}.mdc-select:not(.mdc-select--disabled) .mdc-floating-label{color:rgba(0, 0, 0, 0.6)}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:rgba(38, 166, 154, 0.87)}.mdc-select.mdc-select--disabled .mdc-floating-label{color:rgba(0, 0, 0, 0.38)}.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon{fill:rgba(0, 0, 0, 0.54)}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon{fill:#26a69a;fill:var(--mdc-theme-primary, #26a69a)}.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon{fill:rgba(0, 0, 0, 0.38)}.mdc-select:not(.mdc-select--disabled)+.mdc-select-helper-text{color:rgba(0, 0, 0, 0.6)}.mdc-select.mdc-select--disabled+.mdc-select-helper-text{color:rgba(0, 0, 0, 0.38)}.mdc-select:not(.mdc-select--disabled) .mdc-select__icon{color:rgba(0, 0, 0, 0.54)}.mdc-select.mdc-select--disabled .mdc-select__icon{color:rgba(0, 0, 0, 0.38)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-select.mdc-select--disabled .mdc-select__selected-text{color:GrayText}.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon{fill:red}.mdc-select.mdc-select--disabled .mdc-floating-label{color:GrayText}.mdc-select.mdc-select--disabled .mdc-line-ripple::before{border-bottom-color:GrayText}.mdc-select.mdc-select--disabled .mdc-notched-outline__leading,.mdc-select.mdc-select--disabled .mdc-notched-outline__notch,.mdc-select.mdc-select--disabled .mdc-notched-outline__trailing{border-color:GrayText}.mdc-select.mdc-select--disabled .mdc-select__icon{color:GrayText}.mdc-select.mdc-select--disabled+.mdc-select-helper-text{color:GrayText}}.mdc-select .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-select .mdc-select__anchor{padding-left:16px;padding-right:0}[dir=rtl] .mdc-select .mdc-select__anchor,.mdc-select .mdc-select__anchor[dir=rtl]{padding-left:0;padding-right:16px;}.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor{padding-left:0;padding-right:0}[dir=rtl] .mdc-select.mdc-select--with-leading-icon .mdc-select__anchor,.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor[dir=rtl]{padding-left:0;padding-right:0;}.mdc-select .mdc-select__icon{width:24px;height:24px;font-size:24px}.mdc-select .mdc-select__dropdown-icon{width:24px;height:24px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item,.mdc-select .mdc-select__menu .mdc-deprecated-list-item[dir=rtl]{padding-left:16px;padding-right:16px;}.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:12px}[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic,.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic[dir=rtl]{margin-left:12px;margin-right:0;}.mdc-select__dropdown-icon{margin-left:12px;margin-right:12px;display:inline-flex;position:relative;align-self:center;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active,.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{position:absolute;top:0;left:0}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-graphic{width:41.6666666667%;height:20.8333333333%}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{opacity:1;transition:opacity 75ms linear 75ms}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active{opacity:0;transition:opacity 75ms linear}[dir=rtl] .mdc-select__dropdown-icon,.mdc-select__dropdown-icon[dir=rtl]{margin-left:12px;margin-right:12px;}.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{opacity:0;transition:opacity 49.5ms linear}.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-active{opacity:1;transition:opacity 100.5ms linear 49.5ms}.mdc-select__anchor{width:200px;min-width:0;flex:1 1 auto;position:relative;box-sizing:border-box;overflow:hidden;outline:none;cursor:pointer}.mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-select__selected-text-container{display:flex;appearance:none;pointer-events:none;box-sizing:border-box;width:auto;min-width:0;flex-grow:1;height:28px;border:none;outline:none;padding:0;background-color:transparent;color:inherit}.mdc-select__selected-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.125rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:100%;text-align:left}[dir=rtl] .mdc-select__selected-text,.mdc-select__selected-text[dir=rtl]{text-align:right;}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-floating-label{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid+.mdc-select-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-select__dropdown-icon{fill:#b00020;fill:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon{fill:#b00020;fill:var(--mdc-theme-error, #b00020)}.mdc-select--disabled{cursor:default;pointer-events:none}.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item,.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item[dir=rtl]{padding-left:12px;padding-right:12px;}.mdc-select__menu .mdc-deprecated-list .mdc-select__icon,.mdc-select__menu .mdc-list .mdc-select__icon{margin-left:0;margin-right:0}[dir=rtl] .mdc-select__menu .mdc-deprecated-list .mdc-select__icon,[dir=rtl] .mdc-select__menu .mdc-list .mdc-select__icon,.mdc-select__menu .mdc-deprecated-list .mdc-select__icon[dir=rtl],.mdc-select__menu .mdc-list .mdc-select__icon[dir=rtl]{margin-left:0;margin-right:0;}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated,.mdc-select__menu .mdc-list .mdc-deprecated-list-item--selected,.mdc-select__menu .mdc-list .mdc-deprecated-list-item--activated{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic,.mdc-select__menu .mdc-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic,.mdc-select__menu .mdc-list .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-select__menu .mdc-list-item__start{display:inline-flex;align-items:center}.mdc-select__option{padding-left:16px;padding-right:16px}[dir=rtl] .mdc-select__option,.mdc-select__option[dir=rtl]{padding-left:16px;padding-right:16px;}.mdc-select__one-line-option.mdc-list-item--with-one-line{height:48px}.mdc-select__two-line-option.mdc-list-item--with-two-lines{height:64px}.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__start{margin-top:20px}.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-select__two-line-option.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-select__two-line-option.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before{display:inline-block;width:0;height:36px;content:"";vertical-align:0}.mdc-select__option-with-leading-content{padding-left:0;padding-right:12px}.mdc-select__option-with-leading-content.mdc-list-item{padding-left:0;padding-right:auto}[dir=rtl] .mdc-select__option-with-leading-content.mdc-list-item,.mdc-select__option-with-leading-content.mdc-list-item[dir=rtl]{padding-left:auto;padding-right:0;}.mdc-select__option-with-leading-content .mdc-list-item__start{margin-left:12px;margin-right:0}[dir=rtl] .mdc-select__option-with-leading-content .mdc-list-item__start,.mdc-select__option-with-leading-content .mdc-list-item__start[dir=rtl]{margin-left:0;margin-right:12px;}.mdc-select__option-with-leading-content .mdc-list-item__start{width:36px;height:24px}[dir=rtl] .mdc-select__option-with-leading-content,.mdc-select__option-with-leading-content[dir=rtl]{padding-left:12px;padding-right:0;}.mdc-select__option-with-meta.mdc-list-item{padding-left:auto;padding-right:0}[dir=rtl] .mdc-select__option-with-meta.mdc-list-item,.mdc-select__option-with-meta.mdc-list-item[dir=rtl]{padding-left:0;padding-right:auto;}.mdc-select__option-with-meta .mdc-list-item__end{margin-left:12px;margin-right:12px}[dir=rtl] .mdc-select__option-with-meta .mdc-list-item__end,.mdc-select__option-with-meta .mdc-list-item__end[dir=rtl]{margin-left:12px;margin-right:12px;}.mdc-select--filled .mdc-select__anchor{height:56px;display:flex;align-items:baseline}.mdc-select--filled .mdc-select__anchor::before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text::before{content:"​"}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text-container{height:100%;display:inline-flex;align-items:center}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor::before{display:none}.mdc-select--filled .mdc-select__anchor{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor{background-color:whitesmoke}.mdc-select--filled.mdc-select--disabled .mdc-select__anchor{background-color:#fafafa}.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.42)}.mdc-select--filled:not(.mdc-select--disabled):hover .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.87)}.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::after{border-bottom-color:#26a69a;border-bottom-color:var(--mdc-theme-primary, #26a69a)}.mdc-select--filled.mdc-select--disabled .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.06)}.mdc-select--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-select--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 64px / 0.75)}.mdc-select--filled .mdc-menu-surface--is-open-below{border-top-left-radius:0px;border-top-right-radius:0px}.mdc-select--filled.mdc-select--focused.mdc-line-ripple::after{transform:scale(1, 2);opacity:1}.mdc-select--filled .mdc-floating-label{left:16px;right:initial}[dir=rtl] .mdc-select--filled .mdc-floating-label,.mdc-select--filled .mdc-floating-label[dir=rtl]{left:initial;right:16px;}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{left:48px;right:initial}[dir=rtl] .mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label,.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl]{left:initial;right:48px;}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 96px / 0.75)}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled):hover .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple::after{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-select--outlined{border:none}.mdc-select--outlined .mdc-select__anchor{height:56px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1)}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{font-size:0.75rem}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-56px 250ms 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-56px{0%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px)}[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl]{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0;}@supports (top: max(0%)){.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2)}}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0}[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl]{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px);}@supports (top: max(0%)){.mdc-select--outlined .mdc-select__anchor{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}[dir=rtl] .mdc-select--outlined .mdc-select__anchor,.mdc-select--outlined .mdc-select__anchor[dir=rtl]{padding-left:0;}@supports (top: max(0%)){[dir=rtl] .mdc-select--outlined .mdc-select__anchor,.mdc-select--outlined .mdc-select__anchor[dir=rtl]{padding-right:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top: max(0%)){.mdc-select--outlined+.mdc-select-helper-text{margin-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}[dir=rtl] .mdc-select--outlined+.mdc-select-helper-text,.mdc-select--outlined+.mdc-select-helper-text[dir=rtl]{margin-left:0;}@supports (top: max(0%)){[dir=rtl] .mdc-select--outlined+.mdc-select-helper-text,.mdc-select--outlined+.mdc-select-helper-text[dir=rtl]{margin-right:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-select--outlined:not(.mdc-select--disabled) .mdc-select__anchor{background-color:transparent}.mdc-select--outlined.mdc-select--disabled .mdc-select__anchor{background-color:transparent}.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.38)}.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.87)}.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.06)}.mdc-select--outlined .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-select--outlined .mdc-select__anchor{display:flex;align-items:baseline;overflow:visible}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined 250ms 1}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1)}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{font-size:0.75rem}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text::before{content:"​"}.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text-container{height:100%;display:inline-flex;align-items:center}.mdc-select--outlined .mdc-select__anchor::before{display:none}.mdc-select--outlined .mdc-select__selected-text-container{display:flex;border:none;z-index:1;background-color:transparent}.mdc-select--outlined .mdc-select__icon{z-index:2}.mdc-select--outlined .mdc-floating-label{line-height:1.15rem;left:4px;right:initial}[dir=rtl] .mdc-select--outlined .mdc-floating-label,.mdc-select--outlined .mdc-floating-label[dir=rtl]{left:initial;right:4px;}.mdc-select--outlined.mdc-select--focused .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:36px;right:initial}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl]{left:initial;right:36px;}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-37.25px) translateX(32px) scale(1);}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{font-size:0.75rem}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(0.75)}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-34.75px) translateX(32px) scale(0.75);}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px 250ms 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px{0%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon,.mdc-select--outlined.mdc-select--with-leading-icon[dir=rtl]{}[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake,.mdc-select--outlined.mdc-select--with-leading-icon[dir=rtl] .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px 250ms 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px-rtl{0%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 96px)}.mdc-select--outlined .mdc-menu-surface{margin-bottom:8px}.mdc-select--outlined.mdc-select--no-label .mdc-menu-surface,.mdc-select--outlined .mdc-menu-surface--is-open-below{margin-bottom:0}.mdc-select__anchor{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-select__anchor .mdc-select__ripple::before,.mdc-select__anchor .mdc-select__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-select__anchor .mdc-select__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-select__anchor .mdc-select__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-select__anchor.mdc-ripple-upgraded--unbounded .mdc-select__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-select__anchor.mdc-ripple-upgraded--foreground-activation .mdc-select__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-select__anchor.mdc-ripple-upgraded--foreground-deactivation .mdc-select__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-select__anchor .mdc-select__ripple::before,.mdc-select__anchor .mdc-select__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-select__anchor .mdc-select__ripple::before,.mdc-select__anchor .mdc-select__ripple::after{background-color:rgba(0, 0, 0, 0.87);background-color:var(--mdc-ripple-color, rgba(0, 0, 0, 0.87))}.mdc-select__anchor:hover .mdc-select__ripple::before,.mdc-select__anchor.mdc-ripple-surface--hover .mdc-select__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-select__anchor.mdc-ripple-upgraded--background-focused .mdc-select__ripple::before,.mdc-select__anchor:not(.mdc-ripple-upgraded):focus .mdc-select__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-select__anchor .mdc-select__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-deprecated-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple::after{transition:opacity 150ms linear}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-list-item__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple::before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-list-item__ripple::after{transition:opacity 150ms linear}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-select-helper-text{margin:0;margin-left:16px;margin-right:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit);display:block;margin-top:0;line-height:normal}[dir=rtl] .mdc-select-helper-text,.mdc-select-helper-text[dir=rtl]{margin-left:16px;margin-right:16px;}.mdc-select-helper-text::before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-select-helper-text--validation-msg{opacity:0;transition:opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-select--invalid+.mdc-select-helper-text--validation-msg,.mdc-select-helper-text--validation-msg-persistent{opacity:1}.mdc-select--with-leading-icon .mdc-select__icon{display:inline-block;box-sizing:border-box;border:none;text-decoration:none;cursor:pointer;user-select:none;flex-shrink:0;align-self:center;background-color:transparent;fill:currentColor}.mdc-select--with-leading-icon .mdc-select__icon{margin-left:12px;margin-right:12px}[dir=rtl] .mdc-select--with-leading-icon .mdc-select__icon,.mdc-select--with-leading-icon .mdc-select__icon[dir=rtl]{margin-left:12px;margin-right:12px;}.mdc-select__icon:not([tabindex]),.mdc-select__icon[tabindex="-1"]{cursor:default;pointer-events:none}:host{display:block;position:relative}:host([hidden]){display:none}.mdc-select--outlined .mdc-floating-label{left:1rem}.mdc-select__anchor,.mdc-floating-label,.mdc-select__selected-text{font-family:inherit}.mdc-select__dropdown-icon-graphic{transition:transform 0.2s ease}.limel-select__selected-option{display:flex;align-items:center;box-sizing:border-box;outline:none;align-self:center;min-width:0;padding:0 0.25rem 0 1rem}.limel-select__selected-option__icon{margin-right:0.5rem;margin-left:-0.5rem;flex-shrink:0}.limel-select__selected-option__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mdc-select:not(.mdc-select--disabled) .limel-select__selected-option__text{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.875rem;font-weight:400;letter-spacing:0.009375em;color:rgba(var(--contrast-1200), 1)}.limel-select{flex-wrap:wrap;width:100%}.limel-select:not(.limel-select--readonly) .limel-select-trigger{background-color:rgba(var(--contrast-100), 0.8)}.limel-select .mdc-select__anchor{height:2.25rem;padding-left:0rem}.limel-select .limel-select-trigger{border:none;height:2.5rem;display:inline-flex;align-items:center;border-radius:0.3125rem}.limel-select .limel-select-trigger .mdc-floating-label{color:rgba(var(--contrast-1200), 1);width:calc(\n                100% - 1rem\n            )}.limel-select .limel-select-trigger .mdc-floating-label.mdc-floating-label--float-above{font-size:0.875rem;transform:translateY(-1.6875rem) scale(0.75)}.limel-select .limel-select-trigger,.limel-select .limel-select__selected-option{width:100%}.limel-select .mdc-select__dropdown-icon{margin-right:0.25rem;margin-left:0.25rem}.limel-select.mdc-select--disabled .limel-select-trigger{cursor:not-allowed;opacity:0.4;box-shadow:var(--button-shadow-normal)}.limel-select.mdc-select--disabled .mdc-select__dropdown-icon svg{fill:rgb(var(--contrast-800))}.limel-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon svg{fill:rgb(var(--contrast-1000))}.limel-select:not(.mdc-select--disabled) .limel-select-trigger{transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.limel-select:not(.mdc-select--disabled) .limel-select-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.limel-select:not(.mdc-select--disabled) .limel-select-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus{outline:none}.limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused{background-color:rgba(var(--contrast-100), 0.8)}.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-floating-label{color:var(--mdc-theme-primary)}.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon svg{fill:var(--mdc-theme-primary)}.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon-graphic{transform:rotate(-180deg)}.limel-select:not(.mdc-select--disabled) .limel-select-trigger[aria-expanded]:not([aria-expanded=false]),.limel-select:not(.mdc-select--disabled) .limel-select-trigger[aria-expanded=true]{box-shadow:var(--button-shadow-inset-pressed)}.limel-select.limel-select--required .mdc-floating-label::after{content:"*"}.limel-select.limel-select--invalid .limel-select__selected-option__text,.limel-select.limel-select--invalid .invalid-icon{color:var(--lime-error-text-color)}.limel-select.limel-select--invalid .mdc-floating-label:not(.mdc-floating-label--float-above){max-width:calc(\n                100% - 4rem\n            )}.invalid-icon{flex-shrink:0}select.limel-select__native-control{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border:0}.limel-select.mdc-select.limel-select--readonly .limel-select-trigger{cursor:default;opacity:1}.limel-select.mdc-select.limel-select--readonly .mdc-floating-label{color:rgba(var(--contrast-1200), 1)}.limel-select.mdc-select.limel-select--readonly .limel-select__selected-option__text{color:rgba(var(--contrast-1400), 1)}.limel-select.mdc-select.limel-select--readonly .mdc-select__dropdown-icon{display:none}:host(limel-select:focus),:host(limel-select:focus-visible),:host(limel-select:focus-within),:host(limel-select[invalid]:not([invalid=false])),:host(limel-select[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-select){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-select:focus) limel-helper-line,:host(limel-select:focus-visible) limel-helper-line,:host(limel-select:focus-within) limel-helper-line,:host(limel-select:hover) limel-helper-line{will-change:grid-template-rows}.limel-select--focused+limel-helper-line,.limel-select--invalid limel-helper-line{--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}';const D=class{constructor(e){t(this,e);this.change=l(this,"change",7);this.hasChanged=false;this.checkValid=false;this.disabled=false;this.readonly=false;this.invalid=undefined;this.required=false;this.label=undefined;this.helperText=undefined;this.value=undefined;this.options=[];this.multiple=false;this.menuOpen=false;this.handleMenuChange=this.handleMenuChange.bind(this);this.handleNativeChange=this.handleNativeChange.bind(this);this.handleMenuTriggerKeyPress=this.handleMenuTriggerKeyPress.bind(this);this.openMenu=this.openMenu.bind(this);this.closeMenu=this.closeMenu.bind(this);this.portalId=s()}connectedCallback(){this.initialize()}componentWillLoad(){this.isMobileDevice=i();if(this.host.hasAttribute("data-native")){this.isMobileDevice=true}}componentDidLoad(){this.initialize();G(this.getOptionsExcludingSeparators())}initialize(){let e;e=this.host.shadowRoot.querySelector(".mdc-floating-label");if(!e){return}this.mdcFloatingLabel=new h(e);e=this.host.shadowRoot.querySelector(".mdc-select-helper-text");if(e){this.mdcSelectHelperText=new w(e)}}disconnectedCallback(){if(this.mdcFloatingLabel){this.mdcFloatingLabel.destroy()}if(this.mdcSelectHelperText){this.mdcSelectHelperText.destroy()}}componentDidUpdate(){if(this.menuOpen){this.setMenuFocus()}}render(){return e(y,{id:this.portalId,disabled:this.disabled||this.readonly,readonly:this.readonly,required:this.required,invalid:this.invalid,label:this.label,helperText:this.helperText,value:this.value,options:this.options,onMenuChange:this.handleMenuChange,onNativeChange:this.handleNativeChange,onTriggerPress:this.handleMenuTriggerKeyPress,multiple:this.multiple,isOpen:this.menuOpen,open:this.openMenu,close:this.closeMenu,checkValid:this.checkValid,native:this.isMobileDevice})}watchOpen(e,t){if(this.checkValid){return}if(!e&&t){this.checkValid=true}}setMenuFocus(){if(this.isMobileDevice){return}setTimeout((()=>{var e;const t=this.host.shadowRoot.querySelector("limel-list");const l=(e=t===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector("[tabindex]");if(l){l.focus()}}))}setTriggerFocus(){const e=this.host.shadowRoot.querySelector(".limel-select-trigger");e.focus()}handleMenuChange(e){var t,l;e.stopPropagation();if(a(e.detail)){const c=`#${this.portalId} limel-menu-surface`;const i=(l=(t=document.querySelector(c))===null||t===void 0?void 0:t.shadowRoot)===null||l===void 0?void 0:l.querySelector(".mdc-menu-surface");const d=(i===null||i===void 0?void 0:i.scrollTop)||0;const o=e.detail;const n=o.map((e=>e.value));this.change.emit(n);requestAnimationFrame((()=>{setTimeout((()=>{i.scrollTop=d}))}));return}if(!e.detail.selected){return}const c=e.detail;const i=c.value;if(i.disabled){return}this.change.emit(i);this.menuOpen=false;this.setTriggerFocus()}openMenu(){if(this.emitFirstChangeEvent()){this.hasChanged=true;this.change.emit(this.getOptionsExcludingSeparators()[0])}this.menuOpen=true}emitFirstChangeEvent(){return!this.hasChanged&&this.isMobileDevice&&!this.value}closeMenu(){this.menuOpen=false;this.setTriggerFocus()}handleMenuTriggerKeyPress(e){const t=e.key===d||e.keyCode===o;const l=e.key===n||e.keyCode===r;if(!this.menuOpen&&(l||t)){e.stopPropagation();e.preventDefault();this.menuOpen=true}}handleNativeChange(e){e.stopPropagation();const t=this.host.shadowRoot.querySelector("select.limel-select__native-control");const l=Array.apply(null,t.options).filter((e=>!!e.selected)).map((e=>this.getOptionsExcludingSeparators().find((t=>t.value===e.value))));if(this.multiple){this.change.emit(l);return}this.change.emit(l[0]);this.menuOpen=false}getOptionsExcludingSeparators(){return this.options.filter((e=>!("separator"in e)))}get host(){return c(this)}static get watchers(){return{menuOpen:["watchOpen"]}}};D.style=I;export{D as limel_select};
+//# sourceMappingURL=p-4aa1d842.entry.js.map

package/dist/lime-elements/p-4aa1d842.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["strings","ARIA_HIDDEN","ROLE","cssClasses","HELPER_TEXT_VALIDATION_MSG","HELPER_TEXT_VALIDATION_MSG_PERSISTENT","MDCSelectHelperTextFoundation","_super","__extends","adapter","call","this","__assign","defaultAdapter","Object","defineProperty","get","enumerable","configurable","addClass","undefined","removeClass","hasClass","setAttr","getAttr","removeAttr","setContent","prototype","getId","isVisible","content","setValidation","isValidation","setValidationMsgPersistent","isPersistent","setValidity","selectIsValid","isValidationMsg","isPersistentValidationMsg","msgShouldDisplay","showToScreenReader","hide","MDCFoundation","MDCSelectHelperText","apply","arguments","attachTo","root","foundation","getDefaultFoundation","_this","className","classList","add","remove","contains","attr","getAttribute","value","setAttribute","removeAttribute","textContent","MDCComponent","SelectTemplate","props","hasValue","hasEmptyText","isMultiple","length","text","isValid","invalid","checkValid","required","disabled","readonly","helperText","h","class","SelectValue","assign","HelperText","SelectDropdown","anchorClassList","isOpen","labelClassList","onClick","open","onKeyPress","onTriggerPress","id","label","getSelectedIcon","getSelectedText","ShowIcon","viewBox","focusable","stroke","points","name","size","trim","native","NativeDropdown","MenuDropdown","items","createMenuItems","options","visible","inheritParentWidth","onDismiss","close","style","display","width","type","multiple","onChange","onMenuChange","filter","option","map","renderOption","onNativeChange","onFocus","onBlur","selectedOption","key","selected","isSelected","some","o","selectIsRequired","menuOptionFilter","getMenuOptionFilter","separator","secondaryText","getIconName","icon","color","getIconColor","iconColor","join","triggerIconColorWarning","forEach","console","warn","selectCss","Select","constructor","hostRef","hasChanged","handleMenuChange","bind","handleNativeChange","handleMenuTriggerKeyPress","openMenu","closeMenu","portalId","createRandomString","connectedCallback","initialize","componentWillLoad","isMobileDevice","host","hasAttribute","componentDidLoad","getOptionsExcludingSeparators","element","shadowRoot","querySelector","mdcFloatingLabel","MDCFloatingLabel","mdcSelectHelperText","disconnectedCallback","destroy","componentDidUpdate","menuOpen","setMenuFocus","render","watchOpen","newValue","oldValue","setTimeout","list","firstItem","_a","focus","setTriggerFocus","trigger","event","stopPropagation","detail","selector","menuSurface","_b","document","scrollPosition","scrollTop","listItems","item","change","emit","requestAnimationFrame","listItem","emitFirstChangeEvent","isEnter","ENTER","keyCode","ENTER_KEY_CODE","isSpace","SPACE","SPACE_KEY_CODE","preventDefault","Array","optionElement","find"],"sources":["./node_modules/@material/select/helper-text/constants.js","./node_modules/@material/select/helper-text/foundation.js","./node_modules/@material/select/helper-text/component.js","./src/components/select/select.template.tsx","./src/components/select/select.scss?tag=limel-select&encapsulation=shadow","./src/components/select/select.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nvar strings = {\n    ARIA_HIDDEN: 'aria-hidden',\n    ROLE: 'role',\n};\nvar cssClasses = {\n    HELPER_TEXT_VALIDATION_MSG: 'mdc-select-helper-text--validation-msg',\n    HELPER_TEXT_VALIDATION_MSG_PERSISTENT: 'mdc-select-helper-text--validation-msg-persistent',\n};\nexport { strings, cssClasses };\n//# sourceMappingURL=constants.js.map","/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __assign, __extends } from \"tslib\";\nimport { MDCFoundation } from '@material/base/foundation';\nimport { cssClasses, strings } from './constants';\nvar MDCSelectHelperTextFoundation = /** @class */ (function (_super) {\n    __extends(MDCSelectHelperTextFoundation, _super);\n    function MDCSelectHelperTextFoundation(adapter) {\n        return _super.call(this, __assign(__assign({}, MDCSelectHelperTextFoundation.defaultAdapter), adapter)) || this;\n    }\n    Object.defineProperty(MDCSelectHelperTextFoundation, \"cssClasses\", {\n        get: function () {\n            return cssClasses;\n        },\n        enumerable: false,\n        configurable: true\n    });\n    Object.defineProperty(MDCSelectHelperTextFoundation, \"strings\", {\n        get: function () {\n            return strings;\n        },\n        enumerable: false,\n        configurable: true\n    });\n    Object.defineProperty(MDCSelectHelperTextFoundation, \"defaultAdapter\", {\n        /**\n         * See {@link MDCSelectHelperTextAdapter} for typing information on parameters and return types.\n         */\n        get: function () {\n            // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n            return {\n                addClass: function () { return undefined; },\n                removeClass: function () { return undefined; },\n                hasClass: function () { return false; },\n                setAttr: function () { return undefined; },\n                getAttr: function () { return null; },\n                removeAttr: function () { return undefined; },\n                setContent: function () { return undefined; },\n            };\n            // tslint:enable:object-literal-sort-keys\n        },\n        enumerable: false,\n        configurable: true\n    });\n    /**\n     * @return The ID of the helper text, or null if none is set.\n     */\n    MDCSelectHelperTextFoundation.prototype.getId = function () {\n        return this.adapter.getAttr('id');\n    };\n    /**\n     * @return Whether the helper text is currently visible.\n     */\n    MDCSelectHelperTextFoundation.prototype.isVisible = function () {\n        return this.adapter.getAttr(strings.ARIA_HIDDEN) !== 'true';\n    };\n    /**\n     * Sets the content of the helper text field.\n     */\n    MDCSelectHelperTextFoundation.prototype.setContent = function (content) {\n        this.adapter.setContent(content);\n    };\n    /**\n     * Sets the helper text to act as a validation message.\n     * By default, validation messages are hidden when the select is valid and\n     * visible when the select is invalid.\n     *\n     * @param isValidation True to make the helper text act as an error validation\n     *     message.\n     */\n    MDCSelectHelperTextFoundation.prototype.setValidation = function (isValidation) {\n        if (isValidation) {\n            this.adapter.addClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n        }\n        else {\n            this.adapter.removeClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n        }\n    };\n    /**\n     * Sets the persistency of the validation helper text.\n     * This keeps the validation message visible even if the select is valid,\n     * though it will be displayed in the normal (grey) color.\n     */\n    MDCSelectHelperTextFoundation.prototype.setValidationMsgPersistent = function (isPersistent) {\n        if (isPersistent) {\n            this.adapter.addClass(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n        }\n        else {\n            this.adapter.removeClass(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n        }\n    };\n    /**\n     * When acting as a validation message, shows/hides the helper text and\n     * triggers alerts as necessary based on the select's validity.\n     */\n    MDCSelectHelperTextFoundation.prototype.setValidity = function (selectIsValid) {\n        var isValidationMsg = this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n        if (!isValidationMsg) {\n            // Non-validating helper-text is always displayed and does not participate\n            // in validation logic.\n            return;\n        }\n        var isPersistentValidationMsg = this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n        // Validating helper text is displayed if select is invalid, unless it is\n        // set as persistent, in which case it always displays.\n        var msgShouldDisplay = !selectIsValid || isPersistentValidationMsg;\n        if (msgShouldDisplay) {\n            this.showToScreenReader();\n            // In addition to displaying, also trigger an alert if the select\n            // has become invalid.\n            if (!selectIsValid) {\n                this.adapter.setAttr(strings.ROLE, 'alert');\n            }\n            else {\n                this.adapter.removeAttr(strings.ROLE);\n            }\n            return;\n        }\n        // Hide everything.\n        this.adapter.removeAttr(strings.ROLE);\n        this.hide();\n    };\n    /**\n     * Makes the helper text visible to screen readers.\n     */\n    MDCSelectHelperTextFoundation.prototype.showToScreenReader = function () {\n        this.adapter.removeAttr(strings.ARIA_HIDDEN);\n    };\n    /**\n     * Hides the help text from screen readers.\n     */\n    MDCSelectHelperTextFoundation.prototype.hide = function () {\n        this.adapter.setAttr(strings.ARIA_HIDDEN, 'true');\n    };\n    return MDCSelectHelperTextFoundation;\n}(MDCFoundation));\nexport { MDCSelectHelperTextFoundation };\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCSelectHelperTextFoundation;\n//# sourceMappingURL=foundation.js.map","/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __extends } from \"tslib\";\nimport { MDCComponent } from '@material/base/component';\nimport { MDCSelectHelperTextFoundation } from './foundation';\nvar MDCSelectHelperText = /** @class */ (function (_super) {\n    __extends(MDCSelectHelperText, _super);\n    function MDCSelectHelperText() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    MDCSelectHelperText.attachTo = function (root) {\n        return new MDCSelectHelperText(root);\n    };\n    Object.defineProperty(MDCSelectHelperText.prototype, \"foundationForSelect\", {\n        // Provided for access by MDCSelect component\n        get: function () {\n            return this.foundation;\n        },\n        enumerable: false,\n        configurable: true\n    });\n    MDCSelectHelperText.prototype.getDefaultFoundation = function () {\n        var _this = this;\n        // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\n        // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\n        // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n        var adapter = {\n            addClass: function (className) { return _this.root.classList.add(className); },\n            removeClass: function (className) { return _this.root.classList.remove(className); },\n            hasClass: function (className) { return _this.root.classList.contains(className); },\n            getAttr: function (attr) { return _this.root.getAttribute(attr); },\n            setAttr: function (attr, value) { return _this.root.setAttribute(attr, value); },\n            removeAttr: function (attr) { return _this.root.removeAttribute(attr); },\n            setContent: function (content) {\n                _this.root.textContent = content;\n            },\n        };\n        // tslint:enable:object-literal-sort-keys\n        return new MDCSelectHelperTextFoundation(adapter);\n    };\n    return MDCSelectHelperText;\n}(MDCComponent));\nexport { MDCSelectHelperText };\n//# sourceMappingURL=component.js.map","import { ListItem, ListSeparator } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { isMultiple } from '../../util/multiple';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\ninterface SelectTemplateProps {\n    disabled?: boolean;\n    readonly?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    options: Array<Option | ListSeparator>;\n    value: Option | Option[];\n    label?: string;\n    helperText?: string;\n    multiple?: boolean;\n    native: boolean;\n\n    onNativeChange: (event: Event) => void;\n\n    id: string;\n    onMenuChange: (event: CustomEvent<ListItem | ListItem[]>) => void;\n    onTriggerPress: (event: KeyboardEvent) => void;\n    isOpen: boolean;\n    open: () => void;\n    close: () => void;\n    checkValid: boolean;\n}\n\nexport const SelectTemplate: FunctionalComponent<SelectTemplateProps> = (\n    props,\n) => {\n    const value = props.value;\n    let hasValue = !!props.value;\n    let hasEmptyText = true;\n    if (isMultiple(value)) {\n        hasValue = value.length > 0;\n    } else if (hasValue) {\n        hasValue = !!value.value;\n        hasEmptyText = value.text === '';\n    }\n\n    let isValid = !props.invalid;\n    if (props.checkValid && props.required && !hasValue) {\n        isValid = false;\n    }\n\n    const classList = {\n        'limel-select': true,\n        'mdc-select': true,\n        'mdc-select--outlined': true,\n        'mdc-select--disabled': props.disabled,\n        'limel-select--readonly': props.readonly,\n        'limel-select--required': props.required,\n        'limel-select--invalid': !isValid,\n        'limel-select--empty': !hasValue,\n        'limel-select--with-helper-text': typeof props.helperText === 'string',\n    };\n\n    return (\n        <div class={classList}>\n            <SelectValue\n                {...props}\n                hasValue={hasValue}\n                isValid={isValid}\n                hasEmptyText={hasEmptyText}\n            />\n            <HelperText text={props.helperText} isValid={!props.invalid} />\n            <SelectDropdown {...props} />\n        </div>\n    );\n};\n\nconst SelectValue: FunctionalComponent<\n    SelectTemplateProps & {\n        hasValue: boolean;\n        isValid: boolean;\n        hasEmptyText: boolean;\n    }\n> = (props) => {\n    const anchorClassList = {\n        'mdc-select__anchor': true,\n        'limel-select-trigger': true,\n        'limel-select--focused': props.isOpen,\n    };\n    const labelClassList = {\n        'mdc-floating-label': true,\n        'mdc-floating-label--float-above':\n            !props.hasEmptyText ||\n            props.isOpen ||\n            props.readonly ||\n            props.hasValue,\n        'mdc-floating-label--active': props.isOpen,\n    };\n\n    return (\n        <button\n            class={anchorClassList}\n            onClick={props.open}\n            onKeyPress={props.onTriggerPress}\n            aria-haspopup=\"listbox\"\n            aria-expanded={props.isOpen}\n            aria-controls={props.id}\n            aria-labelledby=\"s-label s-selected-text\"\n            aria-required={props.required}\n            disabled={props.disabled || props.readonly}\n        >\n            <span id=\"s-label\" class={labelClassList}>\n                {props.label}\n            </span>\n            <span class=\"mdc-select__selected-text-container limel-select__selected-option\">\n                {getSelectedIcon(props.value)}\n                <span\n                    id=\"s-selected-text\"\n                    class=\"mdc-select__selected-text limel-select__selected-option__text\"\n                >\n                    {getSelectedText(props.value, props.readonly)}\n                </span>\n            </span>\n            <ShowIcon {...props} isValid={props.isValid} />\n            <span class=\"mdc-select__dropdown-icon\">\n                <svg\n                    class=\"mdc-select__dropdown-icon-graphic\"\n                    viewBox=\"7 10 10 5\"\n                    focusable=\"false\"\n                >\n                    <polygon\n                        stroke=\"none\"\n                        fill-rule=\"evenodd\"\n                        points=\"7 10 12 15 17 10\"\n                    ></polygon>\n                </svg>\n            </span>\n        </button>\n    );\n};\n\nconst ShowIcon: FunctionalComponent<\n    SelectTemplateProps & {\n        isValid: boolean;\n    }\n> = (props) => {\n    if (props.isValid) {\n        return;\n    }\n\n    return (\n        <limel-icon name=\"high_importance\" size=\"medium\" class=\"invalid-icon\" />\n    );\n};\n\nconst HelperText: FunctionalComponent<{ text: string; isValid: boolean }> = (\n    props,\n) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            invalid={!props.isValid}\n        />\n    );\n};\n\nconst SelectDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n    if (props.native) {\n        return <NativeDropdown {...props} />;\n    }\n\n    return <MenuDropdown {...props} />;\n};\n\nconst MenuDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n    const items = createMenuItems(props.options, props.value, props.required);\n\n    return (\n        <limel-portal visible={props.isOpen} inheritParentWidth={true}>\n            <limel-menu-surface\n                id={props.id}\n                open={props.isOpen}\n                onDismiss={props.close}\n                style={{\n                    '--mdc-menu-min-width': '100%',\n                    'max-height': 'inherit',\n                    display: 'flex',\n                    'min-width': '100%',\n                    width: 'fit-content',\n                }}\n            >\n                <limel-list\n                    items={items}\n                    type={props.multiple ? 'checkbox' : 'selectable'}\n                    onChange={props.onMenuChange}\n                />\n            </limel-menu-surface>\n        </limel-portal>\n    );\n};\n\nconst NativeDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n    const options = props.options\n        .filter((option): option is Option => !('separator' in option))\n        .map(renderOption(props.value));\n\n    return (\n        <select\n            required={props.required}\n            aria-disabled={props.disabled}\n            aria-required={props.required}\n            onChange={props.onNativeChange}\n            onFocus={props.open}\n            onBlur={props.close}\n            class=\"limel-select__native-control\"\n            disabled={props.disabled}\n            multiple={props.multiple}\n        >\n            {options}\n        </select>\n    );\n};\n\nconst renderOption = (selectedOption: Option | Option[]) => {\n    return (option: Option) => {\n        const { value, disabled, text } = option;\n\n        return (\n            <option\n                key={value}\n                value={value}\n                selected={isSelected(option, selectedOption)}\n                disabled={disabled}\n            >\n                {text}\n            </option>\n        );\n    };\n};\n\nfunction isSelected(option: Option, value: Option | Option[]): boolean {\n    if (!value) {\n        return false;\n    }\n\n    if (isMultiple(value)) {\n        return value.some((o) => option.value === o.value);\n    }\n\n    return option.value === value.value;\n}\n\nfunction createMenuItems(\n    options: Array<Option | ListSeparator>,\n    value: Option | Option[],\n    selectIsRequired = false,\n): Array<ListItem<Option> | ListSeparator> {\n    const menuOptionFilter = getMenuOptionFilter(selectIsRequired);\n\n    return options.filter(menuOptionFilter).map((option) => {\n        if ('separator' in option) {\n            return {\n                text: option.text,\n                separator: true,\n            };\n        }\n\n        const selected = isSelected(option, value);\n        const { text, secondaryText, disabled } = option;\n        const name = getIconName(option.icon);\n        const color = getIconColor(option.icon, option.iconColor);\n\n        if (!name) {\n            return {\n                text: text,\n                secondaryText: secondaryText,\n                selected: selected,\n                disabled: disabled,\n                value: option,\n            };\n        }\n\n        return {\n            text: text,\n            secondaryText: secondaryText,\n            selected: selected,\n            disabled: disabled,\n            value: option,\n            icon: {\n                name: name,\n                color: color,\n            },\n        };\n    });\n}\n\nfunction getMenuOptionFilter(selectIsRequired: boolean) {\n    return (option: Option | ListSeparator) => {\n        if (!selectIsRequired) {\n            // If the select component is NOT required, we keep all options.\n            return true;\n        }\n\n        if (option.text) {\n            // If the select component IS required, we keep only options\n            // that are not \"empty\". We only check the text property, because\n            // some systems use an \"empty option\" that will have a value for\n            // the `value` property, to signify \"no option selected\". Such\n            // an option should be treated as \"empty\".\n            return true;\n        }\n\n        if ('separator' in option) {\n            return true;\n        }\n    };\n}\n\nfunction getSelectedText(value: Option | Option[], readonly: boolean): string {\n    if ((!value || (isMultiple(value) && !value.length)) && readonly) {\n        return '–';\n    }\n\n    if (!value) {\n        return '';\n    }\n\n    if (isMultiple(value)) {\n        return value.map((option) => option.text).join(', ');\n    }\n\n    return value.text;\n}\n\nfunction getSelectedIcon(value: any) {\n    if (!value || !value.icon) {\n        return '';\n    }\n\n    const name = getIconName(value.icon);\n    const color = getIconColor(value.icon, value.iconColor);\n    const style: any = {};\n    if (color) {\n        style.color = color;\n    }\n\n    return (\n        <limel-icon\n            class=\"limel-select__selected-option__icon\"\n            name={name}\n            size=\"medium\"\n            style={style}\n        />\n    );\n}\n\nexport function triggerIconColorWarning(options: Option[]) {\n    options.forEach((option) => {\n        if (option.iconColor) {\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 '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '@material/select/styles';\n@use '@material/floating-label';\n@use '@material/floating-label/mdc-floating-label';\n\n:host {\n    display: block;\n    position: relative;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.mdc-select--outlined .mdc-floating-label {\n    left: functions.pxToRem(16);\n}\n\n.mdc-select__anchor,\n.mdc-floating-label,\n.mdc-select__selected-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-select__dropdown-icon-graphic {\n    transition: transform 0.2s ease;\n}\n\n.limel-select__selected-option {\n    display: flex;\n    align-items: center;\n\n    box-sizing: border-box;\n    outline: none;\n\n    align-self: center;\n    min-width: 0; // makes it truncate and prevents the select to grow wider than its container\n    padding: 0 0.25rem 0 1rem;\n}\n\n.limel-select__selected-option__icon {\n    margin-right: functions.pxToRem(8);\n    margin-left: functions.pxToRem(-8);\n    flex-shrink: 0;\n}\n\n.limel-select__selected-option__text {\n    .mdc-select:not(.mdc-select--disabled) & {\n        @include shared_input-select-picker.looks-like-input-label;\n    }\n    @include mixins.truncate-text;\n}\n\n.limel-select {\n    flex-wrap: wrap;\n    width: 100%;\n\n    &:not(.limel-select--readonly) {\n        .limel-select-trigger {\n            background-color: shared_input-select-picker.$background-color-focused;\n        }\n    }\n\n    .mdc-select__anchor {\n        height: functions.pxToRem(36);\n        padding-left: functions.pxToRem(0);\n    }\n    .limel-select-trigger {\n        border: none;\n        height: shared_input-select-picker.$height-of-mdc-text-field;\n        display: inline-flex;\n        align-items: center;\n\n        border-radius: functions.pxToRem(5);\n\n        .mdc-floating-label {\n            color: shared_input-select-picker.$label-color;\n            width: calc(\n                100% - #{functions.pxToRem(16)}\n            ); //This forces the label to truncate when container is too little.\n            &.mdc-floating-label--float-above {\n                font-size: shared_input-select-picker.$cropped-label-hack--font-size;\n                transform: translateY(functions.pxToRem(-27)) scale(0.75);\n            }\n        }\n    }\n\n    .limel-select-trigger,\n    .limel-select__selected-option {\n        width: 100%;\n    }\n\n    .mdc-select__dropdown-icon {\n        margin-right: 0.25rem;\n        margin-left: 0.25rem;\n    }\n\n    &.mdc-select--disabled {\n        .limel-select-trigger {\n            @include shared_input-select-picker.looks-disabled;\n            box-shadow: var(--button-shadow-normal);\n        }\n        .mdc-select__dropdown-icon {\n            svg {\n                fill: rgb(var(--contrast-800));\n            }\n        }\n    }\n\n    &:not(.mdc-select--disabled) {\n        .mdc-select__dropdown-icon {\n            svg {\n                fill: rgb(var(--contrast-1000));\n            }\n        }\n\n        .limel-select-trigger {\n            @include mixins.is-elevated-clickable;\n            @include mixins.visualize-keyboard-focus;\n\n            &.limel-select--focused {\n                background-color: shared_input-select-picker.$background-color-focused;\n\n                .mdc-floating-label {\n                    color: var(--mdc-theme-primary);\n                }\n\n                .mdc-select__dropdown-icon {\n                    svg {\n                        fill: var(--mdc-theme-primary);\n                    }\n                }\n\n                .mdc-select__dropdown-icon-graphic {\n                    transform: rotate(-180deg);\n                }\n            }\n\n            &[aria-expanded]:not([aria-expanded='false']),\n            &[aria-expanded='true'] {\n                box-shadow: var(--button-shadow-inset-pressed);\n            }\n        }\n    }\n\n    &.limel-select--required {\n        .mdc-floating-label::after {\n            content: '*';\n        }\n    }\n\n    &.limel-select--invalid {\n        .limel-select__selected-option__text,\n        .invalid-icon {\n            color: var(--lime-error-text-color);\n        }\n        .mdc-floating-label:not(.mdc-floating-label--float-above) {\n            max-width: calc(\n                100% - #{functions.pxToRem(64)}\n            ); // leaves space for the invalid-icon\n        }\n    }\n}\n\n.invalid-icon {\n    flex-shrink: 0;\n}\n\nselect.limel-select__native-control {\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    border: 0;\n}\n\n@import './partial-styles/_readonly';\n@import './partial-styles/_helper-text';\n","import { ListItem, ListSeparator } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { MDCFloatingLabel } from '@material/floating-label';\nimport { MDCSelectHelperText } from '@material/select/helper-text';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isMobileDevice } from '../../util/device';\nimport {\n    ENTER,\n    ENTER_KEY_CODE,\n    SPACE,\n    SPACE_KEY_CODE,\n} from '../../util/keycodes';\nimport { isMultiple } from '../../util/multiple';\nimport { createRandomString } from '../../util/random-string';\nimport { SelectTemplate, triggerIconColorWarning } from './select.template';\n\n/**\n * @exampleComponent limel-example-select\n * @exampleComponent limel-example-select-with-icons\n * @exampleComponent limel-example-select-with-separators\n * @exampleComponent limel-example-select-with-secondary-text\n * @exampleComponent limel-example-select-multiple\n * @exampleComponent limel-example-select-with-empty-option\n * @exampleComponent limel-example-select-preselected\n * @exampleComponent limel-example-select-change-options\n * @exampleComponent limel-example-select-dialog\n */\n@Component({\n    tag: 'limel-select',\n    shadow: true,\n    styleUrl: 'select.scss',\n})\nexport class Select {\n    /**\n     * Set to `true` to make the field disabled.\n     * and visually shows that the `select` component is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the component may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * This visualizes the component slightly differently.\n     * But shows no visual sign indicating that the component is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the select is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * True if the control requires a value.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * Text to display next to the select.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Currently selected value or values.\n     * If `multiple` is `true`, this must be an array. Otherwise it must be a\n     * single value.\n     */\n    @Prop()\n    public value: Option | Option[];\n\n    /**\n     * List of options.\n     */\n    @Prop()\n    public options: Array<Option | ListSeparator> = [];\n\n    /**\n     * Set to `true` to allow multiple values to be selected.\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Emitted when the value is changed.\n     */\n    @Event()\n    private change: EventEmitter<Option | Option[]>;\n\n    @Element()\n    private host: HTMLLimelSelectElement;\n\n    @State()\n    private menuOpen: boolean = false;\n\n    private hasChanged: boolean = false;\n    private checkValid: boolean = false;\n    private mdcSelectHelperText: MDCSelectHelperText;\n    private mdcFloatingLabel: MDCFloatingLabel;\n    private isMobileDevice: boolean;\n    private portalId: string;\n\n    constructor() {\n        this.handleMenuChange = this.handleMenuChange.bind(this);\n        this.handleNativeChange = this.handleNativeChange.bind(this);\n        this.handleMenuTriggerKeyPress =\n            this.handleMenuTriggerKeyPress.bind(this);\n        this.openMenu = this.openMenu.bind(this);\n        this.closeMenu = this.closeMenu.bind(this);\n\n        this.portalId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.isMobileDevice = isMobileDevice();\n\n        // It should not be possible to render the native select for consumers, but we still want to make it testable.\n        // We can set this attribute in tests to force rendering of the native select\n        if (this.host.hasAttribute('data-native')) {\n            this.isMobileDevice = true;\n        }\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n        triggerIconColorWarning(this.getOptionsExcludingSeparators());\n    }\n\n    private initialize() {\n        let element: HTMLElement;\n        element = this.host.shadowRoot.querySelector('.mdc-floating-label');\n        if (!element) {\n            return;\n        }\n\n        this.mdcFloatingLabel = new MDCFloatingLabel(element);\n\n        element = this.host.shadowRoot.querySelector('.mdc-select-helper-text');\n        if (element) {\n            this.mdcSelectHelperText = new MDCSelectHelperText(element);\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcFloatingLabel) {\n            this.mdcFloatingLabel.destroy();\n        }\n\n        if (this.mdcSelectHelperText) {\n            this.mdcSelectHelperText.destroy();\n        }\n    }\n\n    public componentDidUpdate() {\n        if (this.menuOpen) {\n            this.setMenuFocus();\n        }\n    }\n\n    public render() {\n        return (\n            <SelectTemplate\n                id={this.portalId}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                required={this.required}\n                invalid={this.invalid}\n                label={this.label}\n                helperText={this.helperText}\n                value={this.value}\n                options={this.options}\n                onMenuChange={this.handleMenuChange}\n                onNativeChange={this.handleNativeChange}\n                onTriggerPress={this.handleMenuTriggerKeyPress}\n                multiple={this.multiple}\n                isOpen={this.menuOpen}\n                open={this.openMenu}\n                close={this.closeMenu}\n                checkValid={this.checkValid}\n                native={this.isMobileDevice}\n            />\n        );\n    }\n\n    @Watch('menuOpen')\n    protected watchOpen(newValue: boolean, oldValue: boolean) {\n        if (this.checkValid) {\n            return;\n        }\n\n        // Menu was closed for the first time\n        if (!newValue && oldValue) {\n            this.checkValid = true;\n        }\n    }\n\n    private setMenuFocus() {\n        if (this.isMobileDevice) {\n            return;\n        }\n\n        setTimeout(() => {\n            const list = this.host.shadowRoot.querySelector('limel-list');\n            const firstItem: HTMLElement =\n                list?.shadowRoot?.querySelector('[tabindex]');\n\n            if (firstItem) {\n                firstItem.focus();\n            }\n        });\n    }\n\n    private setTriggerFocus() {\n        const trigger: HTMLElement = this.host.shadowRoot.querySelector(\n            '.limel-select-trigger',\n        );\n        trigger.focus();\n    }\n\n    private handleMenuChange(\n        event: CustomEvent<Array<ListItem<Option>> | ListItem<Option>>,\n    ) {\n        event.stopPropagation();\n\n        if (isMultiple(event.detail)) {\n            const selector = `#${this.portalId} limel-menu-surface`;\n            const menuSurface = document\n                .querySelector(selector)\n                ?.shadowRoot?.querySelector('.mdc-menu-surface');\n            const scrollPosition = menuSurface?.scrollTop || 0;\n\n            const listItems: ListItem[] = event.detail;\n            const options: Option[] = listItems.map((item) => item.value);\n            this.change.emit(options);\n\n            // Using a single requestAnimationFrame or setTimeout doesn't\n            // work. Using two nested `requestAnimationFrame` worked most of\n            // the time, but not always. Using `setTimeout` inside the\n            // `requestAnimationFrame` seems to work consistently. /Ads\n            requestAnimationFrame(() => {\n                setTimeout(() => {\n                    menuSurface.scrollTop = scrollPosition;\n                });\n            });\n\n            return;\n        }\n\n        if (!event.detail.selected) {\n            return;\n        }\n\n        const listItem: ListItem = event.detail;\n        const option: Option = listItem.value;\n        if (option.disabled) {\n            return;\n        }\n\n        this.change.emit(option);\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private openMenu() {\n        if (this.emitFirstChangeEvent()) {\n            this.hasChanged = true;\n            this.change.emit(this.getOptionsExcludingSeparators()[0]);\n        }\n\n        this.menuOpen = true;\n    }\n\n    private emitFirstChangeEvent() {\n        return !this.hasChanged && this.isMobileDevice && !this.value;\n    }\n\n    private closeMenu() {\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private handleMenuTriggerKeyPress(event: KeyboardEvent) {\n        const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n        const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;\n\n        if (!this.menuOpen && (isSpace || isEnter)) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.menuOpen = true;\n        }\n    }\n\n    private handleNativeChange(event: Event) {\n        event.stopPropagation();\n\n        const element: HTMLSelectElement = this.host.shadowRoot.querySelector(\n            'select.limel-select__native-control',\n        );\n        const options = Array.apply(null, element.options) // eslint-disable-line prefer-spread\n            .filter((optionElement: HTMLOptionElement) => {\n                return !!optionElement.selected;\n            })\n            .map((optionElement: HTMLOptionElement) => {\n                return this.getOptionsExcludingSeparators().find(\n                    (o) => o.value === optionElement.value,\n                );\n            });\n\n        if (this.multiple) {\n            this.change.emit(options);\n\n            return;\n        }\n\n        this.change.emit(options[0]);\n        this.menuOpen = false;\n    }\n\n    private getOptionsExcludingSeparators(): Option[] {\n        return this.options.filter(\n            (option): option is Option => !('separator' in option),\n        );\n    }\n}\n"],"mappings":"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"}