@limetech/lime-elements 37.55.4 → 37.55.6

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,g as r}from"./p-443111b3.js";import{c as i}from"./p-3ccdc4a3.js";import{E as s}from"./p-e03dfe70.js";import{i as a}from"./p-5e7b7b03.js";import{z as c}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";const p=".trigger-anchor{display:inline-block;position:relative}";const n=class{constructor(t){e(this,t);this.close=o(this,"close",7);this.handleGlobalKeyPress=e=>{if(e.key!==s){return}e.stopPropagation();e.preventDefault();this.close.emit()};this.setTriggerAttributes=e=>{const o={"aria-haspopup":true,"aria-expanded":this.open,"aria-controls":this.portalId,role:"button"};for(const[t,r]of Object.entries(o)){if(!r){e.removeAttribute(t)}else{e.setAttribute(t,String(r))}}};this.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}componentDidRender(){const e=this.host.shadowRoot.querySelector("slot");e.assignedElements().forEach(this.setTriggerAttributes)}setupGlobalHandlers(){if(this.open){document.addEventListener("click",this.globalClickListener,{capture:true});document.addEventListener("keyup",this.handleGlobalKeyPress)}else{document.removeEventListener("click",this.globalClickListener);document.removeEventListener("keyup",this.handleGlobalKeyPress)}}render(){const e=this.getCssProperties();return t("div",{class:"trigger-anchor"},t("slot",{name:"trigger"}),t("limel-portal",{visible:this.open,openDirection:this.openDirection},t("limel-popover-surface",{id:this.portalId,contentCollection:this.host.children,style:e})))}globalClickListener(e){const o=e.composedPath()[0];const t=a(o,this.host);if(this.open&&!t){e.stopPropagation();e.preventDefault();this.close.emit()}}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius"];const o=getComputedStyle(this.host);const t=e.map((e=>o.getPropertyValue(e)));return c(e,t)}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};n.style=p;const l='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.75;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';const h=class{constructor(o){e(this,o);this.contentCollection=undefined}componentDidLoad(){this.appendElement()}render(){return t("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((o=>{if(o.slot==="trigger"){return}e.appendChild(o)}))}get host(){return r(this)}};h.style=l;export{n as limel_popover,h as limel_popover_surface};
+//# sourceMappingURL=p-e364c2b1.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["popoverCss","Popover","constructor","hostRef","this","handleGlobalKeyPress","event","key","ESCAPE","stopPropagation","preventDefault","close","emit","setTriggerAttributes","element","attributes","open","portalId","role","value","Object","entries","removeAttribute","setAttribute","String","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","componentDidRender","slotElement","host","shadowRoot","querySelector","assignedElements","forEach","document","addEventListener","capture","removeEventListener","render","cssProperties","getCssProperties","h","class","name","visible","openDirection","id","contentCollection","children","style","composedPath","clickedInside","isDescendant","propertyNames","getComputedStyle","values","map","property","getPropertyValue","zipObject","popoverSurfaceCss","PopoverSurface","componentDidLoad","appendElement","tabindex","portalContainer","Array","from","child","slot","appendChild"],"sources":["./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n */\n\n.trigger-anchor {\n    display: inline-block;\n    position: relative;\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\nimport { isDescendant } from '../../util/dom';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n */\n@Component({\n    tag: 'limel-popover',\n    shadow: true,\n    styleUrl: 'popover.scss',\n})\nexport class Popover {\n    /**\n     * True if the content within the popover should be visible\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Decides the popover's location in relation to its trigger\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Emits an event when the component is closing\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelPopoverElement;\n\n    private portalId: string;\n\n    constructor() {\n        this.portalId = createRandomString();\n        this.globalClickListener = this.globalClickListener.bind(this);\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentWillLoad() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentDidRender() {\n        const slotElement = this.host.shadowRoot.querySelector('slot');\n        slotElement.assignedElements().forEach(this.setTriggerAttributes);\n    }\n\n    private setupGlobalHandlers() {\n        if (this.open) {\n            document.addEventListener('click', this.globalClickListener, {\n                capture: true,\n            });\n            document.addEventListener('keyup', this.handleGlobalKeyPress);\n        } else {\n            document.removeEventListener('click', this.globalClickListener);\n            document.removeEventListener('keyup', this.handleGlobalKeyPress);\n        }\n    }\n\n    public render() {\n        const cssProperties = this.getCssProperties();\n\n        return (\n            <div class=\"trigger-anchor\">\n                <slot name=\"trigger\" />\n                <limel-portal\n                    visible={this.open}\n                    openDirection={this.openDirection}\n                >\n                    <limel-popover-surface\n                        id={this.portalId}\n                        contentCollection={this.host.children}\n                        style={cssProperties}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private globalClickListener(event: MouseEvent) {\n        const element: HTMLElement = event.composedPath()[0] as HTMLElement;\n        const clickedInside = isDescendant(element, this.host);\n        if (this.open && !clickedInside) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.close.emit();\n        }\n    }\n\n    private getCssProperties() {\n        const propertyNames = [\n            '--popover-surface-width',\n            '--popover-body-background-color',\n            '--popover-border-radius',\n        ];\n        const style = getComputedStyle(this.host);\n        const values = propertyNames.map((property) => {\n            return style.getPropertyValue(property);\n        });\n\n        return zipObject(propertyNames, values);\n    }\n\n    private handleGlobalKeyPress = (event: KeyboardEvent) => {\n        if (event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.close.emit();\n    };\n\n    private setTriggerAttributes = (element: HTMLElement) => {\n        const attributes = {\n            'aria-haspopup': true,\n            'aria-expanded': this.open,\n            'aria-controls': this.portalId,\n            role: 'button',\n        };\n\n        for (const [key, value] of Object.entries(attributes)) {\n            if (!value) {\n                element.removeAttribute(key);\n            } else {\n                element.setAttribute(key, String(value));\n            }\n        }\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n    isolation: isolate;\n\n    position: relative;\n    display: flex;\n\n    width: var(--popover-surface-width, auto);\n    max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n    max-width: calc(100vw - 2rem);\n    margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    border-radius: var(--popover-border-radius, functions.pxToRem(12));\n    box-shadow: var(--shadow-depth-16);\n\n    backdrop-filter: blur(functions.pxToRem(5));\n    -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n    &:after {\n        // allows using `--popover-body-background-color` while\n        // getting the blurred backdrop effect\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        z-index: -1;\n\n        opacity: 0.75;\n\n        border-radius: var(--popover-border-radius, functions.pxToRem(12));\n        background-color: var(\n            --popover-body-background-color,\n            var(--lime-elevated-surface-background-color)\n        );\n    }\n\n    @include mixins.visualize-keyboard-focus;\n\n    &:focus,\n    &:focus-within {\n        &:after {\n            opacity: 1;\n        }\n    }\n\n    & > * {\n        // this fixes some unwanted layout issues\n        // which might be very hard for consumers to realize\n        // and fix by themselves. Without this code,\n        // if the consumer sets for example paddings in\n        // what they send to the popover, their element\n        // can grow larger than the popover surface\n        box-sizing: border-box;\n    }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n    tag: 'limel-popover-surface',\n    shadow: true,\n    styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n    /**\n     * Content to render\n     */\n    @Prop()\n    public contentCollection: HTMLCollection;\n\n    @Element()\n    private host: HTMLLimelPopoverSurfaceElement;\n\n    public componentDidLoad() {\n        this.appendElement();\n    }\n\n    public render() {\n        return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n    }\n\n    private appendElement() {\n        const portalContainer = this.host.shadowRoot.querySelector(\n            '.limel-popover-surface',\n        );\n\n        Array.from(this.contentCollection).forEach((child) => {\n            if (child.slot === 'trigger') {\n                return;\n            }\n\n            portalContainer.appendChild(child);\n        });\n    }\n}\n"],"mappings":"iUAAA,MAAMA,EAAa,0D,MCsENC,EAAO,MAwBhBC,YAAAC,G,uCA2EQC,KAAAC,qBAAwBC,IAC5B,GAAIA,EAAMC,MAAQC,EAAQ,CACtB,M,CAGJF,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,MAAM,EAGbR,KAAAS,qBAAwBC,IAC5B,MAAMC,EAAa,CACf,gBAAiB,KACjB,gBAAiBX,KAAKY,KACtB,gBAAiBZ,KAAKa,SACtBC,KAAM,UAGV,IAAK,MAAOX,EAAKY,KAAUC,OAAOC,QAAQN,GAAa,CACnD,IAAKI,EAAO,CACRL,EAAQQ,gBAAgBf,E,KACrB,CACHO,EAAQS,aAAahB,EAAKiB,OAAOL,G,cApH/B,M,6BAoBVf,KAAKa,SAAWQ,IAChBrB,KAAKsB,oBAAsBtB,KAAKsB,oBAAoBC,KAAKvB,K,CAInDwB,YACNxB,KAAKyB,qB,CAGFC,oBACH1B,KAAKyB,qB,CAGFE,qBACH,MAAMC,EAAc5B,KAAK6B,KAAKC,WAAWC,cAAc,QACvDH,EAAYI,mBAAmBC,QAAQjC,KAAKS,qB,CAGxCgB,sBACJ,GAAIzB,KAAKY,KAAM,CACXsB,SAASC,iBAAiB,QAASnC,KAAKsB,oBAAqB,CACzDc,QAAS,OAEbF,SAASC,iBAAiB,QAASnC,KAAKC,qB,KACrC,CACHiC,SAASG,oBAAoB,QAASrC,KAAKsB,qBAC3CY,SAASG,oBAAoB,QAASrC,KAAKC,qB,EAI5CqC,SACH,MAAMC,EAAgBvC,KAAKwC,mBAE3B,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,QAAME,KAAK,YACXF,EAAA,gBACIG,QAAS5C,KAAKY,KACdiC,cAAe7C,KAAK6C,eAEpBJ,EAAA,yBACIK,GAAI9C,KAAKa,SACTkC,kBAAmB/C,KAAK6B,KAAKmB,SAC7BC,MAAOV,K,CAOnBjB,oBAAoBpB,GACxB,MAAMQ,EAAuBR,EAAMgD,eAAe,GAClD,MAAMC,EAAgBC,EAAa1C,EAASV,KAAK6B,MACjD,GAAI7B,KAAKY,OAASuC,EAAe,CAC7BjD,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,M,EAIXgC,mBACJ,MAAMa,EAAgB,CAClB,0BACA,kCACA,2BAEJ,MAAMJ,EAAQK,iBAAiBtD,KAAK6B,MACpC,MAAM0B,EAASF,EAAcG,KAAKC,GACvBR,EAAMS,iBAAiBD,KAGlC,OAAOE,EAAUN,EAAeE,E,wFCtKxC,MAAMK,EAAoB,s+B,MCYbC,EAAc,M,0DAUhBC,mBACH9D,KAAK+D,e,CAGFzB,SACH,OAAOG,EAAA,OAAKC,MAAM,wBAAwBsB,SAAS,K,CAG/CD,gBACJ,MAAME,EAAkBjE,KAAK6B,KAAKC,WAAWC,cACzC,0BAGJmC,MAAMC,KAAKnE,KAAK+C,mBAAmBd,SAASmC,IACxC,GAAIA,EAAMC,OAAS,UAAW,CAC1B,M,CAGJJ,EAAgBK,YAAYF,EAAM,G"}

package/dist/lime-elements/{p-b8bfe44d.entry.js → p-e728ae13.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s,g as e}from"./p-443111b3.js";import{i as n}from"./p-5e7b7b03.js";import{T as h,E as r,a as o,b as l,c as a,d as c,A as d,e as u,f,g as p}from"./p-e03dfe70.js";import{c as m}from"./p-3ccdc4a3.js";import{g as y,c as b}from"./p-2f777fdb.js";import{d as g}from"./p-18c97232.js";import"./p-c93050d6.js";import"./p-365098fe.js";import"./p-d529bb7d.js";import"./p-858c6b82.js";const v=":host{position:relative;display:block}:host([hidden]){display:none}";const w=300;const j="limel-chip-set";const C=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.interact=i(this,"interact",7);this.action=i(this,"action",7);this.chipSetEditMode=false;this.getValueId=t=>{const i=t.value;if(!!i&&typeof i==="object"){return i.id}return i};this.createChips=t=>{if(!t){return[]}if(this.multiple){const i=t;return i.map(this.createChip)}const i=t;return[this.createChip(i)]};this.createChip=t=>{const i=y(t.icon);const s=b(t.icon,t.iconColor);const e=this.getValueId(t);return{id:`${e}`,text:t.text,removable:true,icon:i?{name:i,color:s}:undefined,value:t,menuItems:t.actions}};this.search=async t=>{const i=setTimeout((()=>{this.loading=true}));const s=await this.searcher(this.textValue);clearTimeout(i);this.handleSearchResult(t,s)};this.disabled=false;this.readonly=false;this.label=undefined;this.searchLabel=undefined;this.helperText=undefined;this.leadingIcon=undefined;this.emptyResultMessage=undefined;this.required=false;this.invalid=false;this.value=undefined;this.searcher=undefined;this.multiple=false;this.delimiter=null;this.actions=[];this.actionPosition="bottom";this.actionScrollBehavior="sticky";this.badgeIcons=false;this.items=undefined;this.textValue="";this.loading=false;this.chips=[];this.handleTextInput=this.handleTextInput.bind(this);this.handleInputKeyDown=this.handleInputKeyDown.bind(this);this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this);this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this);this.handleChange=this.handleChange.bind(this);this.handleInteract=this.handleInteract.bind(this);this.handleListChange=this.handleListChange.bind(this);this.handleActionListChange=this.handleActionListChange.bind(this);this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this);this.handleCloseMenu=this.handleCloseMenu.bind(this);this.onListKeyDown=this.onListKeyDown.bind(this);this.portalId=m();this.debouncedSearch=g(this.search,w)}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.chipSet=this.host.shadowRoot.querySelector(j)}async componentWillUpdate(){this.chipSetEditMode=false;if(this.chipSet){this.chipSetEditMode=await this.chipSet.getEditMode()}}render(){const t={};if(!this.multiple){t.maxItems=1}return[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:false,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}renderDelimiter(){if(this.multiple){return this.delimiter}return null}renderDropdown(){const t=this.getDropdownContent();const i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();if(this.actionPosition==="top"){i.push(s)}if(t){i.push(t)}if(this.actionPosition==="bottom"){i.push(s)}}return this.renderPortal(i)}getActionContent(){var t,i;const e=(i=(t=this.actions)===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;if(e===0){return null}return[s("limel-list",{class:{"static-actions-list":true,"is-on-top":this.actionPosition==="top","is-at-bottom":this.actionPosition==="bottom","has-position-sticky":this.actionScrollBehavior==="sticky"},badgeIcons:true,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){if(this.isFull()){return false}return!!this.chipSetEditMode}getDropdownContent(){if(!this.shouldShowDropDownContent()){return}if(this.loading){return this.renderSpinner()}if(!this.items||!this.items.length){return this.renderEmptyMessage()}return this.renderListResult()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:false}))}renderEmptyMessage(){if(!this.emptyResultMessage){return}const t={color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"};return s("p",{style:t},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[h,r,o].includes(t.key);const s=[l,a,c].includes(t.keyCode);if(i||s){this.chipSet.setFocus()}}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:true,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement;const i=document.querySelector(`#${this.portalId}`);if(n(t,this.host)||n(t,i)){return}this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i;this.debouncedSearch(i);if(i===""){this.debouncedSearch.flush()}}handleListChange(t){var i;t.stopPropagation();if(!this.value||this.value!==t.detail){let i=t.detail;if(this.multiple){i=[...this.value,t.detail]}this.change.emit(i);this.items=[]}if(this.multiple){(i=this.chipSet)===null||i===void 0?void 0:i.setFocus(true)}}handleActionListChange(t){t.stopPropagation();if(!t.detail){return}this.action.emit(t.detail.value);this.items=[]}handleInputFieldFocus(){const t=this.textValue;this.debouncedSearch(t)}handleChange(t){t.stopPropagation();let i=null;if(this.multiple){const s=t.detail;i=s.map((t=>this.value.find((i=>{const s=this.getValueId(i);return`${s}`===t.id}))))}this.change.emit(i)}handleInteract(t){t.stopPropagation();this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=(t.key===h||t.keyCode===l)&&!t.altKey&&!t.metaKey&&!t.shiftKey;const s=t.key===d||t.keyCode===u;const e=t.key===f||t.keyCode===p;if(!i&&!s&&!e){return}const n=document.querySelector(` #${this.portalId} limel-list`);if(!n){return}t.preventDefault();if(i||e){const t=n.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child");t.focus();return}if(s){const t=n.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child");t.focus()}}handleDropdownKeyDown(t){const i=t.key===r||t.keyCode===a;if(i){t.preventDefault();this.textValue="";this.chipSet.setFocus(true)}}handleSearchResult(t,i){if(t===this.textValue){this.items=i;if(this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=false}}handleCloseMenu(){if(this.items.length>0){return}this.clearInputField()}clearInputField(){this.chipSet.emptyInput();this.textValue="";this.handleSearchResult("",[]);this.debouncedSearch.cancel()}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"]}}};C.style=v;export{C as limel_picker};
-//# sourceMappingURL=p-b8bfe44d.entry.js.map
+import{r as t,c as i,h as s,g as e}from"./p-443111b3.js";import{i as h}from"./p-5e7b7b03.js";import{T as n,E as r,a as o,b as l,c as a,d as c,A as d,e as u,f,g as p}from"./p-e03dfe70.js";import{c as m}from"./p-3ccdc4a3.js";import{g as b,c as y}from"./p-2f777fdb.js";import{d as g}from"./p-18c97232.js";import"./p-c93050d6.js";import"./p-365098fe.js";import"./p-d529bb7d.js";import"./p-858c6b82.js";const v=":host{position:relative;display:block}:host([hidden]){display:none}";const w=300;const j="limel-chip-set";const C=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.interact=i(this,"interact",7);this.action=i(this,"action",7);this.chipSetEditMode=false;this.getValueId=t=>{const i=t.value;if(!!i&&typeof i==="object"){return i.id}return i};this.createChips=t=>{if(!t){return[]}if(this.multiple){const i=t;return i.map(this.createChip)}const i=t;return[this.createChip(i)]};this.createChip=t=>{const i=b(t.icon);const s=y(t.icon,t.iconColor);const e=this.getValueId(t);return{id:`${e}`,text:t.text,removable:true,icon:i?{name:i,color:s}:undefined,value:t,menuItems:t.actions}};this.search=async t=>{const i=setTimeout((()=>{this.loading=true}));const s=await this.searcher(this.textValue);clearTimeout(i);this.handleSearchResult(t,s)};this.disabled=false;this.readonly=false;this.label=undefined;this.searchLabel=undefined;this.helperText=undefined;this.leadingIcon=undefined;this.emptyResultMessage=undefined;this.required=false;this.invalid=false;this.value=undefined;this.searcher=undefined;this.multiple=false;this.delimiter=null;this.actions=[];this.actionPosition="bottom";this.actionScrollBehavior="sticky";this.badgeIcons=false;this.items=undefined;this.textValue="";this.loading=false;this.chips=[];this.handleTextInput=this.handleTextInput.bind(this);this.handleInputKeyDown=this.handleInputKeyDown.bind(this);this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this);this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this);this.handleChange=this.handleChange.bind(this);this.handleInteract=this.handleInteract.bind(this);this.handleListChange=this.handleListChange.bind(this);this.handleActionListChange=this.handleActionListChange.bind(this);this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this);this.handleCloseMenu=this.handleCloseMenu.bind(this);this.onListKeyDown=this.onListKeyDown.bind(this);this.portalId=m();this.debouncedSearch=g(this.search,w)}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.chipSet=this.host.shadowRoot.querySelector(j)}async componentWillUpdate(){this.chipSetEditMode=false;if(this.chipSet){this.chipSetEditMode=await this.chipSet.getEditMode()}}render(){const t={};if(!this.multiple){t.maxItems=1}return[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:false,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}renderDelimiter(){if(this.multiple){return this.delimiter}return null}renderDropdown(){const t=this.getDropdownContent();const i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();if(this.actionPosition==="top"){i.push(s)}if(t){i.push(t)}if(this.actionPosition==="bottom"){i.push(s)}}return this.renderPortal(i)}getActionContent(){var t,i;const e=(i=(t=this.actions)===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;if(e===0){return null}return[s("limel-list",{class:{"static-actions-list":true,"is-on-top":this.actionPosition==="top","is-at-bottom":this.actionPosition==="bottom","has-position-sticky":this.actionScrollBehavior==="sticky"},badgeIcons:true,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){if(this.isFull()){return false}return!!this.chipSetEditMode}getDropdownContent(){if(!this.shouldShowDropDownContent()){return}if(this.loading){return this.renderSpinner()}if(!this.items||!this.items.length){return this.renderEmptyMessage()}return this.renderListResult()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:false}))}renderEmptyMessage(){if(!this.emptyResultMessage){return}const t={color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"};return s("p",{style:t},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[n,r,o].includes(t.key);const s=[l,a,c].includes(t.keyCode);if(i||s){this.chipSet.setFocus()}}renderPortal(t=[]){return s("limel-portal",{visible:t.length>0,inheritParentWidth:true},s("limel-menu-surface",{id:this.portalId,open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement;const i=document.querySelector(`#${this.portalId}`);if(h(t,this.host)||h(t,i)){return}this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i;this.debouncedSearch(i);if(i===""){this.debouncedSearch.flush()}}handleListChange(t){var i;t.stopPropagation();if(!this.value||this.value!==t.detail){let i=t.detail;if(this.multiple){i=[...this.value,t.detail]}this.change.emit(i);this.items=[]}if(this.multiple){(i=this.chipSet)===null||i===void 0?void 0:i.setFocus(true)}}handleActionListChange(t){t.stopPropagation();if(!t.detail){return}this.action.emit(t.detail.value);this.items=[]}handleInputFieldFocus(){const t=this.textValue;this.debouncedSearch(t)}handleChange(t){t.stopPropagation();let i=null;if(this.multiple){const s=t.detail;i=s.map((t=>this.value.find((i=>{const s=this.getValueId(i);return`${s}`===t.id}))))}this.change.emit(i)}handleInteract(t){t.stopPropagation();this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=(t.key===n||t.keyCode===l)&&!t.altKey&&!t.metaKey&&!t.shiftKey;const s=t.key===d||t.keyCode===u;const e=t.key===f||t.keyCode===p;if(!i&&!s&&!e){return}const h=document.querySelector(` #${this.portalId} limel-list`);if(!h){return}t.preventDefault();if(i||e){const t=h.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child");t.focus();return}if(s){const t=h.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child");t.focus()}}handleDropdownKeyDown(t){const i=t.key===r||t.keyCode===a;if(i){t.preventDefault();this.textValue="";this.chipSet.setFocus(true)}}handleSearchResult(t,i){if(t===this.textValue){this.items=i;if(this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=false}}handleCloseMenu(){if(this.items.length>0){return}this.clearInputField()}clearInputField(){this.chipSet.emptyInput();this.textValue="";this.handleSearchResult("",[]);this.debouncedSearch.cancel()}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"]}}};C.style=v;export{C as limel_picker};
+//# sourceMappingURL=p-e728ae13.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pickerCss","SEARCH_DEBOUNCE","CHIP_SET_TAG_NAME","Picker","constructor","hostRef","this","chipSetEditMode","getValueId","item","value","id","createChips","multiple","listItems","map","createChip","listItem","name","getIconName","icon","color","getIconFillColor","iconColor","valueId","text","removable","undefined","menuItems","actions","search","async","query","timeoutId","setTimeout","loading","result","searcher","textValue","clearTimeout","handleSearchResult","handleTextInput","bind","handleInputKeyDown","handleDropdownKeyDown","handleInputFieldFocus","handleChange","handleInteract","handleListChange","handleActionListChange","handleStopEditAndBlur","handleCloseMenu","onListKeyDown","portalId","createRandomString","debouncedSearch","debounce","componentWillLoad","chips","componentDidLoad","chipSet","host","shadowRoot","querySelector","getEditMode","render","props","maxItems","h","Object","assign","type","inputType","label","helperText","leadingIcon","disabled","invalid","delimiter","renderDelimiter","readonly","required","searchLabel","onInput","onKeyDown","onChange","onInteract","onStartEdit","onStopEdit","emptyInputOnBlur","clearAllButton","renderDropdown","onChangeValue","dropDownContent","getDropdownContent","content","shouldShowDropDownContent","actionContent","getActionContent","actionPosition","push","renderPortal","actionCount","_b","_a","length","class","actionScrollBehavior","badgeIcons","items","removeUnusedPropertiesOnAction","action","isFull","renderSpinner","renderEmptyMessage","renderListResult","style","width","display","padding","limeBranded","emptyResultMessage","margin","event","keyFound","TAB","ESCAPE","ENTER","includes","key","keyCodeFound","TAB_KEY_CODE","ESCAPE_KEY_CODE","ENTER_KEY_CODE","keyCode","setFocus","visible","inheritParentWidth","open","allowClicksElement","onDismiss","element","activeElement","document","portalElement","isDescendant","clearInputField","stopPropagation","detail","flush","newValue","change","emit","chip","find","interact","isForwardTab","altKey","metaKey","shiftKey","isUp","ARROW_UP","ARROW_UP_KEY_CODE","isDown","ARROW_DOWN","ARROW_DOWN_KEY_CODE","list","preventDefault","listElement","focus","isEscape","values","filter","emptyInput","cancel"],"sources":["./src/components/picker/picker.scss?tag=limel-picker&encapsulation=shadow","./src/components/picker/picker.tsx"],"sourcesContent":[":host {\n    position: relative;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n","import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n    ARROW_DOWN,\n    ARROW_DOWN_KEY_CODE,\n    ARROW_UP,\n    ARROW_UP_KEY_CODE,\n    ENTER,\n    ENTER_KEY_CODE,\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    LimelChipSetCustomEvent,\n    LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\nimport { PickerValue } from './value.types';\nimport { DebouncedFunc, debounce } from 'lodash-es';\n\nconst SEARCH_DEBOUNCE = 300;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\n\n/**\n * @exampleComponent limel-example-picker-single\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-value-as-object-with-actions\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n    tag: 'limel-picker',\n    shadow: true,\n    styleUrl: 'picker.scss',\n})\nexport class Picker {\n    /**\n     * True if the picker should be disabled\n     */\n    @Prop()\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing items,\n     * but allow interaction with existing items.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Text to display for the input field of the picker\n     */\n    @Prop()\n    public label: string;\n\n    /**\n     * Search label to display in the input field when searching\n     */\n    @Prop()\n    public searchLabel: 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     * Leading icon to show to the far left in the text field\n     */\n    @Prop()\n    public leadingIcon: string;\n\n    /**\n     * A message to display when the search returned an empty result\n     */\n    @Prop()\n    public emptyResultMessage: string;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop()\n    public required: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Currently selected value or values. Where the value can be an object.\n     */\n    @Prop()\n    public value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;\n\n    /**\n     * A search function that takes a search-string as an argument,\n     * and returns a promise that will eventually be resolved with\n     * an array of `ListItem`:s.\n     *\n     * See the docs for the type `Searcher` for type information on\n     * the searcher function itself.\n     */\n    @Prop()\n    public searcher: Searcher;\n\n    /**\n     * True if multiple values are allowed\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Sets delimiters between chips. Works only when `multiple` is `true`.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Static actions that can be clicked by the user.\n     */\n    @Prop()\n    public actions: Array<ListItem<Action>> = [];\n\n    /**\n     * Position of the custom static actions in the picker's results dropdown.\n     * Can be set to `'top'` or `'bottom'`.\n     */\n    @Prop()\n    public actionPosition: ActionPosition = 'bottom';\n\n    /**\n     * Scroll behavior of the custom static actions, when user scrolls\n     * in the picker's results dropdown. Can be set to `'scroll'` which means\n     * the action items will scroll together with the list, or `'sticky'` which\n     * retains their position at the top or bottom of the drop down while\n     * scrolling.\n     */\n    @Prop()\n    public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n    /**\n     * Whether badge icons should be used in the result list or not\n     */\n    @Prop({ reflect: true })\n    public badgeIcons: boolean = false;\n\n    /**\n     * Fired when a new value has been selected from the picker\n     */\n    @Event()\n    private change: EventEmitter<\n        ListItem<PickerValue> | Array<ListItem<PickerValue>>\n    >;\n\n    /**\n     * Fired when clicking on a selected value\n     */\n    @Event()\n    private interact: EventEmitter<ListItem<PickerValue>>;\n\n    /**\n     * Emitted when the user selects an action.\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @State()\n    private items: Array<ListItem<number | string>>;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private loading: boolean = false;\n\n    @State()\n    private chips: Chip[] = [];\n\n    @Element()\n    private host: HTMLLimelPickerElement;\n\n    // Should NOT be decorated with State(), since this\n    // should not trigger a re-render by itself.\n    private chipSetEditMode = false;\n\n    private debouncedSearch: DebouncedFunc<(query: string) => Promise<void>>;\n    private chipSet: HTMLLimelChipSetElement;\n    private portalId: string;\n\n    constructor() {\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n        this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n        this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n        this.handleInteract = this.handleInteract.bind(this);\n        this.handleListChange = this.handleListChange.bind(this);\n        this.handleActionListChange = this.handleActionListChange.bind(this);\n        this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n        this.handleCloseMenu = this.handleCloseMenu.bind(this);\n        this.onListKeyDown = this.onListKeyDown.bind(this);\n\n        this.portalId = createRandomString();\n        this.debouncedSearch = debounce(this.search, SEARCH_DEBOUNCE);\n    }\n\n    public componentWillLoad() {\n        this.chips = this.createChips(this.value);\n    }\n\n    public componentDidLoad() {\n        this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n    }\n\n    public async componentWillUpdate() {\n        this.chipSetEditMode = false;\n        if (this.chipSet) {\n            this.chipSetEditMode = await this.chipSet.getEditMode();\n        }\n    }\n\n    public render() {\n        const props: {\n            maxItems?: number;\n        } = {};\n\n        if (!this.multiple) {\n            props.maxItems = 1;\n        }\n\n        return [\n            <limel-chip-set\n                type=\"input\"\n                inputType=\"search\"\n                label={this.label}\n                helperText={this.helperText}\n                leadingIcon={this.leadingIcon}\n                value={this.chips}\n                disabled={this.disabled}\n                invalid={this.invalid}\n                delimiter={this.renderDelimiter()}\n                readonly={this.readonly}\n                required={this.required}\n                searchLabel={this.searchLabel}\n                onInput={this.handleTextInput}\n                onKeyDown={this.handleInputKeyDown}\n                onChange={this.handleChange}\n                onInteract={this.handleInteract}\n                onStartEdit={this.handleInputFieldFocus}\n                onStopEdit={this.handleStopEditAndBlur}\n                emptyInputOnBlur={false}\n                clearAllButton={this.multiple && !this.chipSetEditMode}\n                {...props}\n            />,\n            this.renderDropdown(),\n        ];\n    }\n\n    @Watch('value')\n    protected onChangeValue() {\n        this.chips = this.createChips(this.value);\n    }\n\n    private renderDelimiter() {\n        if (this.multiple) {\n            return this.delimiter;\n        }\n\n        return null;\n    }\n\n    private getValueId = (item: ListItem) => {\n        const value = item.value;\n        if (!!value && typeof value === 'object') {\n            return value.id;\n        }\n\n        return value;\n    };\n\n    private createChips = (value: ListItem | ListItem[]): Chip[] => {\n        if (!value) {\n            return [];\n        }\n\n        if (this.multiple) {\n            const listItems: ListItem[] = value as ListItem[];\n\n            return listItems.map(this.createChip);\n        }\n\n        const listItem: ListItem = value as ListItem;\n\n        return [this.createChip(listItem)];\n    };\n\n    private createChip = (listItem: ListItem): Chip => {\n        const name = getIconName(listItem.icon);\n        const color = getIconFillColor(listItem.icon, listItem.iconColor);\n        const valueId = this.getValueId(listItem);\n\n        return {\n            id: `${valueId}`,\n            text: listItem.text,\n            removable: true,\n            icon: name ? { name: name, color: color } : undefined,\n            value: listItem,\n            menuItems: listItem.actions,\n        };\n    };\n\n    /**\n     * Renders the dropdown with the items to pick from, or a spinner if the picker\n     * is waiting for items to be received\n     *\n     * @returns picker dropdown\n     */\n    private renderDropdown() {\n        const dropDownContent = this.getDropdownContent();\n\n        const content = [];\n\n        if (this.shouldShowDropDownContent()) {\n            const actionContent = this.getActionContent();\n            if (this.actionPosition === 'top') {\n                content.push(actionContent);\n            }\n\n            if (dropDownContent) {\n                content.push(dropDownContent);\n            }\n\n            if (this.actionPosition === 'bottom') {\n                content.push(actionContent);\n            }\n        }\n\n        return this.renderPortal(content);\n    }\n\n    private getActionContent() {\n        const actionCount = this.actions?.length ?? 0;\n        if (actionCount === 0) {\n            return null;\n        }\n\n        return [\n            <limel-list\n                class={{\n                    'static-actions-list': true,\n                    'is-on-top': this.actionPosition === 'top',\n                    'is-at-bottom': this.actionPosition === 'bottom',\n                    'has-position-sticky':\n                        this.actionScrollBehavior === 'sticky',\n                }}\n                badgeIcons={true}\n                type={'selectable'}\n                onChange={this.handleActionListChange}\n                items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n            />,\n        ];\n    }\n\n    private removeUnusedPropertiesOnAction(\n        action: ListItem<Action>,\n    ): ListItem<Action> {\n        return {\n            ...action,\n            actions: [],\n        };\n    }\n\n    private shouldShowDropDownContent() {\n        if (this.isFull()) {\n            return false;\n        }\n\n        return !!this.chipSetEditMode;\n    }\n\n    private getDropdownContent() {\n        if (!this.shouldShowDropDownContent()) {\n            return;\n        }\n\n        if (this.loading) {\n            return this.renderSpinner();\n        }\n\n        if (!this.items || !this.items.length) {\n            return this.renderEmptyMessage();\n        }\n\n        return this.renderListResult();\n    }\n\n    /**\n     * Returns true if the picker is \"full\"\n     * The picker is considered to be full if it has a value and only one is allowed\n     *\n     * @returns true if the picker is full\n     */\n    private isFull(): boolean {\n        return !this.multiple && !!this.value;\n    }\n\n    private renderSpinner() {\n        return (\n            <div\n                style={{\n                    width: '100%',\n                    display: 'flex',\n                    'align-items': 'center',\n                    'justify-content': 'center',\n                    padding: '1rem 0',\n                }}\n            >\n                <limel-spinner limeBranded={false} />\n            </div>\n        );\n    }\n\n    private renderEmptyMessage() {\n        if (!this.emptyResultMessage) {\n            return;\n        }\n\n        const style = {\n            color: 'rgb(var(--contrast-1100))',\n            'text-align': 'center',\n            margin: '0.5rem 1rem',\n        };\n\n        return <p style={style}>{this.emptyResultMessage}</p>;\n    }\n\n    private renderListResult() {\n        return (\n            <limel-list\n                badgeIcons={this.badgeIcons}\n                onChange={this.handleListChange}\n                onKeyDown={this.onListKeyDown}\n                type=\"selectable\"\n                items={this.items}\n            />\n        );\n    }\n\n    private onListKeyDown(event: KeyboardEvent) {\n        const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n        const keyCodeFound = [\n            TAB_KEY_CODE,\n            ESCAPE_KEY_CODE,\n            ENTER_KEY_CODE,\n        ].includes(event.keyCode);\n        if (keyFound || keyCodeFound) {\n            this.chipSet.setFocus();\n        }\n    }\n\n    private renderPortal(content: any[] = []) {\n        return (\n            <limel-portal\n                visible={content.length > 0}\n                inheritParentWidth={true}\n            >\n                <limel-menu-surface\n                    id={this.portalId}\n                    open={content.length > 0}\n                    allowClicksElement={this.host}\n                    style={{\n                        '--mdc-menu-min-width': '100%',\n                        'max-height': 'inherit',\n                        display: 'flex',\n                    }}\n                    onDismiss={this.handleCloseMenu}\n                >\n                    {content}\n                </limel-menu-surface>\n            </limel-portal>\n        );\n    }\n\n    /**\n     * Check if a descendant still has focus. If not, reset text value and search result.\n     */\n    private handleStopEditAndBlur() {\n        // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n        // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n        const element =\n            this.host.shadowRoot.activeElement || document.activeElement;\n        const portalElement = document.querySelector(`#${this.portalId}`);\n        if (\n            isDescendant(element as HTMLElement, this.host) ||\n            isDescendant(element as HTMLElement, portalElement as HTMLElement)\n        ) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    /**\n     * Input handler for the input field\n     *\n     * @param event - event\n     */\n    private async handleTextInput(event) {\n        event.stopPropagation();\n\n        const query = event.detail;\n        this.textValue = query;\n\n        this.debouncedSearch(query);\n        // If the search-query is an empty string, bypass debouncing.\n        if (query === '') {\n            this.debouncedSearch.flush();\n        }\n    }\n\n    private search = async (query: string) => {\n        const timeoutId = setTimeout(() => {\n            this.loading = true;\n        });\n        const result = (await this.searcher(this.textValue)) as Array<\n            ListItem<PickerValue>\n        >;\n        clearTimeout(timeoutId);\n        this.handleSearchResult(query, result);\n    };\n\n    /**\n     * Change handler for the list\n     *\n     * @param event - event\n     */\n    private handleListChange(\n        event: LimelListCustomEvent<ListItem<PickerValue>>,\n    ) {\n        event.stopPropagation();\n        if (!this.value || this.value !== event.detail) {\n            let newValue: ListItem<PickerValue> | Array<ListItem<PickerValue>> =\n                event.detail;\n            if (this.multiple) {\n                newValue = [\n                    ...(this.value as Array<ListItem<PickerValue>>),\n                    event.detail,\n                ];\n            }\n\n            this.change.emit(newValue);\n            this.items = [];\n        }\n\n        if (this.multiple) {\n            this.chipSet?.setFocus(true);\n        }\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param event - event\n     */\n    private handleActionListChange(\n        event: LimelListCustomEvent<ListItem<Action>>,\n    ) {\n        event.stopPropagation();\n        if (!event.detail) {\n            return;\n        }\n\n        this.action.emit(event.detail.value);\n        this.items = [];\n    }\n\n    /**\n     * Focus handler for the chip set\n     * Prevent focus if the picker has a value and does not support multiple values\n     */\n    private handleInputFieldFocus() {\n        const query = this.textValue;\n        this.debouncedSearch(query);\n    }\n\n    private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n        event.stopPropagation();\n\n        let newValue = null;\n        if (this.multiple) {\n            const chips = event.detail as Chip[];\n            newValue = chips.map((chip) => {\n                return (this.value as ListItem[]).find((item) => {\n                    const valueId = this.getValueId(item);\n\n                    return `${valueId}` === chip.id;\n                });\n            });\n        }\n\n        this.change.emit(newValue);\n    }\n\n    private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n        event.stopPropagation();\n        this.interact.emit(event.detail ? event.detail.value : event.detail);\n    }\n\n    /**\n     * Key handler for the input field\n     * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n     *\n     * @param event - event\n     */\n    private handleInputKeyDown(event: KeyboardEvent) {\n        const isForwardTab =\n            (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n            !event.altKey &&\n            !event.metaKey &&\n            !event.shiftKey;\n        const isUp =\n            event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n        const isDown =\n            event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n        if (!isForwardTab && !isUp && !isDown) {\n            return;\n        }\n\n        const list = document.querySelector(` #${this.portalId} limel-list`);\n        if (!list) {\n            return;\n        }\n\n        event.preventDefault();\n\n        if (isForwardTab || isDown) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:first-child',\n            );\n            listElement.focus();\n\n            return;\n        }\n\n        if (isUp) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:last-child',\n            );\n            listElement.focus();\n        }\n    }\n\n    /**\n     * Key handler for the dropdown\n     *\n     * @param event - event\n     */\n    private handleDropdownKeyDown(event: KeyboardEvent) {\n        const isEscape =\n            event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n        if (isEscape) {\n            event.preventDefault();\n            this.textValue = '';\n            this.chipSet.setFocus(true);\n        }\n    }\n\n    private handleSearchResult(query: string, result: ListItem[]) {\n        if (query === this.textValue) {\n            this.items = result;\n            if (this.multiple) {\n                const values = this.value as ListItem[];\n                this.items = result.filter((item) => {\n                    return !values.includes(item);\n                });\n            }\n\n            this.loading = false;\n        }\n    }\n\n    private handleCloseMenu() {\n        if (this.items.length > 0) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    private clearInputField() {\n        this.chipSet.emptyInput();\n        this.textValue = '';\n        this.handleSearchResult('', []);\n        this.debouncedSearch.cancel();\n    }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as i,g as e}from"./p-443111b3.js";import{t as r}from"./p-1b6c1122.js";import{c as a}from"./p-3ccdc4a3.js";class o{constructor(){this.snackbarElements=[]}add(s){const t=this.getPopover(s);t===null||t===void 0?void 0:t.showPopover();this.snackbarElements=[s,...this.snackbarElements];this.emitOffsets()}remove(s){const t=this.getPopover(s);t===null||t===void 0?void 0:t.hidePopover();this.snackbarElements=this.snackbarElements.filter((t=>t!==s));this.emitOffsets()}emitOffsets(){let s=0;this.snackbarElements.forEach((t=>{t.dispatchEvent(new CustomEvent("changeOffset",{detail:s}));s+=this.getPopover(t).getBoundingClientRect().height}))}getPopover(s){return s.shadowRoot.querySelector("[popover]")}}const n="*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--mdc-theme-primary);--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside:popover-open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}";const c=new o;const l=300;const d=class{constructor(i){s(this,i);this.action=t(this,"action",7);this.hide=t(this,"hide",7);this.close=()=>{if(!this.open){return false}this.closing=true;if(this.timeoutId){clearTimeout(this.timeoutId);this.timeoutId=undefined}setTimeout((()=>{this.open=false;c.remove(this.host);this.hide.emit();this.offset=0}),l)};this.handleClickAction=()=>{this.action.emit()};this.message=undefined;this.timeout=5e3;this.actionText=undefined;this.dismissible=true;this.multiline=undefined;this.language="en";this.offset=0;this.open=false;this.closing=true;this.snackbarId=a()}onChangeIndex(s){s.stopPropagation();this.offset=s.detail}async show(){if(this.open){return}this.open=true;this.closing=false;c.add(this.host);if(this.timeout){this.timeoutId=window.setTimeout(this.close,Math.max(this.timeout-l,0))}}render(){return i("aside",{popover:"manual",style:{"--snackbar-timeout":`${this.timeout}ms`,"--snackbar-distance-to-top-edge":`${this.offset}px`},class:{open:this.open,"is-closing":this.closing},id:this.snackbarId,role:this.open?"status":undefined,"aria-relevant":this.open?"additions":undefined},i("div",{class:"surface","aria-atomic":"false"},i("div",{class:"label"},this.message),this.renderActions(this.actionText),this.renderDismissButton(this.dismissible)))}renderActions(s){if(!s){return}return i("div",{class:"actions","aria-atomic":"true"},this.renderActionButton(s))}renderActionButton(s){if(!s){return}return i("limel-button",{label:s,onClick:this.handleClickAction})}renderDismissButton(s){if(!s){return}const t=r.get("snackbar.dismiss",this.language);return i("div",{class:"dismiss"},this.renderTimeoutVisualization(),i("limel-icon-button",{class:"dismiss-button",icon:"multiply",label:t,onClick:this.close,"aria-controls":this.snackbarId}))}renderTimeoutVisualization(){return i("svg",{width:"36",height:"36",viewBox:"0 0 36 36"},i("circle",{r:"18",cx:"18",cy:"18",fill:"var(--track-color)"}),i("path",{class:"track",d:"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0",stroke:"var(--fill-color)"}))}get host(){return e(this)}};d.style=n;export{d as limel_snackbar};
+//# sourceMappingURL=p-e7fc1c16.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["SnackbarContainer","constructor","this","snackbarElements","add","snackbar","popover","getPopover","showPopover","emitOffsets","remove","hidePopover","filter","item","offset","forEach","dispatchEvent","CustomEvent","detail","getBoundingClientRect","height","shadowRoot","querySelector","snackbarCss","container","hideAnimationDuration","Snackbar","hostRef","close","open","closing","timeoutId","clearTimeout","undefined","setTimeout","host","hide","emit","handleClickAction","action","snackbarId","createRandomString","onChangeIndex","event","stopPropagation","async","timeout","window","Math","max","render","h","style","class","id","role","message","renderActions","actionText","renderDismissButton","dismissible","renderActionButton","label","onClick","translate","get","language","renderTimeoutVisualization","icon","width","viewBox","r","cx","cy","fill","d","stroke"],"sources":["./src/components/snackbar/container.ts","./src/components/snackbar/snackbar.scss?tag=limel-snackbar&encapsulation=shadow","./src/components/snackbar/snackbar.tsx"],"sourcesContent":["/**\n * Container to keep track of all snackbar elements that gets added to the page.\n * When an element gets added or removed, the container will emit a\n * `changeOffset` event on all elements in the container, letting them know\n * the new offset to where they should position themselves.\n */\nexport class SnackbarContainer {\n    private snackbarElements: HTMLLimelSnackbarElement[] = [];\n\n    /**\n     * Add a new element to the container\n     *\n     * @param snackbar - element to add\n     */\n    public add(snackbar: HTMLLimelSnackbarElement) {\n        const popover = this.getPopover(snackbar);\n\n        // Stencil does not seem to recognise the existance of showPopover\n        // @ts-ignore\n        popover?.showPopover();\n\n        this.snackbarElements = [snackbar, ...this.snackbarElements];\n        this.emitOffsets();\n    }\n\n    /**\n     * Remove an element from the container\n     *\n     * @param snackbar - element to remove\n     */\n    public remove(snackbar: HTMLLimelSnackbarElement): void {\n        const popover = this.getPopover(snackbar);\n\n        // Stencil does not seem to recognise the existance of hidePopover\n        // @ts-ignore\n        popover?.hidePopover();\n\n        this.snackbarElements = this.snackbarElements.filter(\n            (item) => item !== snackbar,\n        );\n        this.emitOffsets();\n    }\n\n    private emitOffsets() {\n        let offset = 0;\n        this.snackbarElements.forEach((snackbar) => {\n            snackbar.dispatchEvent(\n                new CustomEvent('changeOffset', {\n                    detail: offset,\n                }),\n            );\n            offset += this.getPopover(snackbar).getBoundingClientRect().height;\n        });\n    }\n\n    private getPopover(snackbar: HTMLLimelSnackbarElement) {\n        return snackbar.shadowRoot.querySelector('[popover]');\n    }\n}\n","* {\n    box-sizing: border-box;\n}\n\naside {\n    background: none;\n    border: none;\n    inset: unset;\n    overflow: visible;\n    padding: 0.5rem 0.5rem 0 0.5rem;\n    right: 0;\n\n    width: var(--limel-snackbar-width, 21rem);\n    top: calc(\n        var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0)\n    );\n\n    transition:\n        opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease,\n        top var(--limel-snackbar-top-transition-speed, 0.46s)\n            cubic-bezier(1, 0.09, 0, 0.89),\n        transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n\n    &.is-closing {\n        transform: translate3d(2rem, 0, 0);\n        opacity: 0;\n        --limel-snackbar-top-transition-speed: 0.2s;\n        --limel-snackbar-opacity-transition-speed: 0.2s;\n    }\n}\n\n.surface {\n    overflow: hidden;\n\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n\n    min-height: 3.25rem;\n    border-radius: 0.75rem;\n\n    background-color: rgb(var(--contrast-1400));\n    box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);\n}\n\n.label {\n    color: rgb(var(--contrast-100));\n\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.8125rem;\n    font-weight: 400;\n    padding: 0 0.25rem;\n\n    width: 100%;\n    flex-grow: 1;\n}\n\n.actions {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    box-sizing: border-box;\n    gap: 0.5rem;\n}\n\n.dismiss,\n.actions {\n    --lime-elevated-surface-background-color: rgb(\n        var(--contrast-1300)\n    ); // background color of the buttons\n}\n\n.dismiss {\n    --mdc-theme-on-surface: rgb(var(--contrast-100)); // color of the X icon\n    --icon-background-color: var(--lime-elevated-surface-background-color);\n    --fill-color: var(--mdc-theme-primary);\n    --track-color: rgb(var(--contrast-800), 0.2);\n    transition:\n        opacity 0.1s ease,\n        transform 0.1s ease;\n    position: absolute;\n    top: -0.375rem;\n    left: -0.375rem;\n    transform: scale(0.7);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    svg {\n        position: absolute;\n        transform: rotate(90deg);\n        fill: transparent;\n        stroke-dasharray: 100;\n        stroke-linecap: round;\n\n        aside:popover-open & {\n            animation: timeout var(--snackbar-timeout) linear forwards;\n        }\n    }\n\n    .is-closing {\n        transform: scale(0.5);\n        opacity: 0;\n    }\n}\n\n.dismiss-button {\n    transform: scale(0.8);\n    margin: 0;\n    padding: 0;\n}\n\n@keyframes timeout {\n    0% {\n        stroke-width: 4;\n        stroke-dashoffset: 0;\n        opacity: 1;\n    }\n    100% {\n        stroke-width: 1;\n        stroke-dashoffset: -100;\n        opacity: 0.7;\n    }\n}\n","import { Languages } from '../date-picker/date.types';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from 'src/util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n */\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * The text message to display.\n     */\n    @Prop()\n    public message: string;\n\n    /**\n     * The amount of time in milliseconds to show the snackbar.\n     */\n    @Prop()\n    // eslint-disable-next-line no-magic-numbers\n    public timeout?: number = 5000;\n\n    /**\n     * The text to display for the action button.\n     */\n    @Prop()\n    public actionText: string;\n\n    /**\n     * When `true` displays a dismiss button on the snackbar,\n     * allowing users to close it.\n     */\n    @Prop()\n    public dismissible: boolean = true;\n\n    /**\n     * Whether to show the snackbar with space for multiple lines of text\n     * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n     */\n    @Prop()\n    public multiline: boolean;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    @Element()\n    private host: HTMLLimelSnackbarElement;\n\n    /**\n     * Emitted when the action button is pressed\n     */\n    @Event()\n    private action: EventEmitter<void>;\n\n    /**\n     * Emitted when the snackbar hides itself\n     */\n    @Event()\n    private hide: EventEmitter<void>;\n\n    @State()\n    private offset: number = 0;\n\n    @State()\n    private open: boolean = false;\n\n    @State()\n    private closing: boolean = true;\n\n    private snackbarId: string;\n    private timeoutId?: number;\n\n    public constructor() {\n        this.snackbarId = createRandomString();\n    }\n\n    @Listen('changeOffset')\n    protected onChangeIndex(event: CustomEvent<number>) {\n        event.stopPropagation();\n        this.offset = event.detail;\n    }\n\n    /**\n     * Show the snackbar\n     */\n    @Method()\n    public async show() {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        this.closing = false;\n        container.add(this.host);\n\n        if (this.timeout) {\n            this.timeoutId = window.setTimeout(\n                this.close,\n                Math.max(this.timeout - hideAnimationDuration, 0),\n            );\n        }\n    }\n\n    private close = () => {\n        if (!this.open) {\n            return false;\n        }\n\n        this.closing = true;\n\n        if (this.timeoutId) {\n            clearTimeout(this.timeoutId);\n            this.timeoutId = undefined;\n        }\n\n        setTimeout(() => {\n            this.open = false;\n            container.remove(this.host);\n            this.hide.emit();\n            this.offset = 0;\n        }, hideAnimationDuration);\n    };\n\n    public render() {\n        return (\n            <aside\n                popover=\"manual\"\n                style={{\n                    '--snackbar-timeout': `${this.timeout}ms`,\n                    '--snackbar-distance-to-top-edge': `${this.offset}px`,\n                }}\n                class={{\n                    open: this.open,\n                    'is-closing': this.closing,\n                }}\n                id={this.snackbarId}\n                role={this.open ? 'status' : undefined}\n                aria-relevant={this.open ? 'additions' : undefined}\n            >\n                <div class=\"surface\" aria-atomic=\"false\">\n                    <div class=\"label\">{this.message}</div>\n                    {this.renderActions(this.actionText)}\n                    {this.renderDismissButton(this.dismissible)}\n                </div>\n            </aside>\n        );\n    }\n\n    private handleClickAction = () => {\n        this.action.emit();\n    };\n\n    private renderActions(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\" aria-atomic=\"true\">\n                {this.renderActionButton(actionText)}\n            </div>\n        );\n    }\n\n    private renderActionButton(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <limel-button label={actionText} onClick={this.handleClickAction} />\n        );\n    }\n\n    private renderDismissButton(dismissible: boolean) {\n        if (!dismissible) {\n            return;\n        }\n\n        const label = translate.get('snackbar.dismiss', this.language);\n\n        return (\n            <div class=\"dismiss\">\n                {this.renderTimeoutVisualization()}\n                <limel-icon-button\n                    class=\"dismiss-button\"\n                    icon=\"multiply\"\n                    label={label}\n                    onClick={this.close}\n                    aria-controls={this.snackbarId}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        return (\n            <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n                <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n                <path\n                    class=\"track\"\n                    d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n                    stroke=\"var(--fill-color)\"\n                />\n            </svg>\n        );\n    }\n}\n"],"mappings":"uIAMaA,EAAbC,cACYC,KAAAC,iBAA+C,E,CAOhDC,IAAIC,GACP,MAAMC,EAAUJ,KAAKK,WAAWF,GAIhCC,IAAO,MAAPA,SAAO,SAAPA,EAASE,cAETN,KAAKC,iBAAmB,CAACE,KAAaH,KAAKC,kBAC3CD,KAAKO,a,CAQFC,OAAOL,GACV,MAAMC,EAAUJ,KAAKK,WAAWF,GAIhCC,IAAO,MAAPA,SAAO,SAAPA,EAASK,cAETT,KAAKC,iBAAmBD,KAAKC,iBAAiBS,QACzCC,GAASA,IAASR,IAEvBH,KAAKO,a,CAGDA,cACJ,IAAIK,EAAS,EACbZ,KAAKC,iBAAiBY,SAASV,IAC3BA,EAASW,cACL,IAAIC,YAAY,eAAgB,CAC5BC,OAAQJ,KAGhBA,GAAUZ,KAAKK,WAAWF,GAAUc,wBAAwBC,MAAM,G,CAIlEb,WAAWF,GACf,OAAOA,EAASgB,WAAWC,cAAc,Y,ECxDjD,MAAMC,EAAc,whECgBpB,MAAMC,EAAY,IAAIxB,EACtB,MAAMyB,EAAwB,I,MAkCjBC,EAAQ,MAmEjBzB,YAAA0B,G,oEA+BQzB,KAAA0B,MAAQ,KACZ,IAAK1B,KAAK2B,KAAM,CACZ,OAAO,K,CAGX3B,KAAK4B,QAAU,KAEf,GAAI5B,KAAK6B,UAAW,CAChBC,aAAa9B,KAAK6B,WAClB7B,KAAK6B,UAAYE,S,CAGrBC,YAAW,KACPhC,KAAK2B,KAAO,MACZL,EAAUd,OAAOR,KAAKiC,MACtBjC,KAAKkC,KAAKC,OACVnC,KAAKY,OAAS,CAAC,GAChBW,EAAsB,EA4BrBvB,KAAAoC,kBAAoB,KACxBpC,KAAKqC,OAAOF,MAAM,E,oCApII,I,2CAaI,K,uCAaD,K,YAkBJ,E,UAGD,M,aAGG,KAMvBnC,KAAKsC,WAAaC,G,CAIZC,cAAcC,GACpBA,EAAMC,kBACN1C,KAAKY,OAAS6B,EAAMzB,M,CAOjB2B,aACH,GAAI3C,KAAK2B,KAAM,CACX,M,CAGJ3B,KAAK2B,KAAO,KACZ3B,KAAK4B,QAAU,MACfN,EAAUpB,IAAIF,KAAKiC,MAEnB,GAAIjC,KAAK4C,QAAS,CACd5C,KAAK6B,UAAYgB,OAAOb,WACpBhC,KAAK0B,MACLoB,KAAKC,IAAI/C,KAAK4C,QAAUrB,EAAuB,G,EAyBpDyB,SACH,OACIC,EAAA,SACI7C,QAAQ,SACR8C,MAAO,CACH,qBAAsB,GAAGlD,KAAK4C,YAC9B,kCAAmC,GAAG5C,KAAKY,YAE/CuC,MAAO,CACHxB,KAAM3B,KAAK2B,KACX,aAAc3B,KAAK4B,SAEvBwB,GAAIpD,KAAKsC,WACTe,KAAMrD,KAAK2B,KAAO,SAAWI,UAAS,gBACvB/B,KAAK2B,KAAO,YAAcI,WAEzCkB,EAAA,OAAKE,MAAM,UAAS,cAAa,SAC7BF,EAAA,OAAKE,MAAM,SAASnD,KAAKsD,SACxBtD,KAAKuD,cAAcvD,KAAKwD,YACxBxD,KAAKyD,oBAAoBzD,KAAK0D,c,CAUvCH,cAAcC,GAClB,IAAKA,EAAY,CACb,M,CAGJ,OACIP,EAAA,OAAKE,MAAM,UAAS,cAAa,QAC5BnD,KAAK2D,mBAAmBH,G,CAK7BG,mBAAmBH,GACvB,IAAKA,EAAY,CACb,M,CAGJ,OACIP,EAAA,gBAAcW,MAAOJ,EAAYK,QAAS7D,KAAKoC,mB,CAI/CqB,oBAAoBC,GACxB,IAAKA,EAAa,CACd,M,CAGJ,MAAME,EAAQE,EAAUC,IAAI,mBAAoB/D,KAAKgE,UAErD,OACIf,EAAA,OAAKE,MAAM,WACNnD,KAAKiE,6BACNhB,EAAA,qBACIE,MAAM,iBACNe,KAAK,WACLN,MAAOA,EACPC,QAAS7D,KAAK0B,MAAK,gBACJ1B,KAAKsC,a,CAM5B2B,6BACJ,OACIhB,EAAA,OAAKkB,MAAM,KAAKjD,OAAO,KAAKkD,QAAQ,aAChCnB,EAAA,UAAQoB,EAAE,KAAKC,GAAG,KAAKC,GAAG,KAAKC,KAAK,uBACpCvB,EAAA,QACIE,MAAM,QACNsB,EAAE,yDACFC,OAAO,sB"}