@limetech/lime-elements 37.1.0-next.2 → 37.1.0-next.21

package/dist/lime-elements/p-7d159ddf.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dockButtonCss","DockButton","constructor","hostRef","this","renderNotification","item","badge","undefined","h","label","openPopover","event","stopPropagation","isOpen","menuOpen","emit","setCustomComponentElement","element","customComponentElement","onPopoverClose","close","handleClick","itemSelected","focusCustomComponentElement","_b","_a","shadowRoot","delegatesFocus","_c","focus","tooltipId","createRandomString","render","dockMenu","componentName","renderPopover","renderButton","openWatcher","observer","IntersectionObserver","observe","CustomComponent","openDirection","useMobileLayout","open","onClose","Object","assign","ref","props","slot","tabindex","id","type","class","button","selected","onClick","renderIcon","renderLabel","renderTooltip","icon","name","expanded","elementId","helperLabel"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n    all: unset;\n    isolation: isolate;\n    position: relative;\n\n    @include mixins.is-flat-inset-clickable(\n        $color: var(--limel-dock-item-text-color),\n        $background-color: var(--dock-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    height: var(--dock-item-height);\n\n    border-radius: functions.pxToRem(6);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.5rem;\n    min-width: var(--dock-item-height);\n\n    &:hover {\n        z-index: 1;\n    }\n\n    &.selected {\n        color: var(--limel-dock-item-text-color--selected);\n        background-color: var(\n            --dock-item-background-color--selected,\n            rgb(var(--contrast-200))\n        );\n\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow: var(--button-shadow-inset),\n                var(--shadow-depth-8-focused);\n        }\n\n        .icon {\n            color: var(--limel-dock-item-text--selected);\n        }\n    }\n}\n\nlimel-popover {\n    // makes buttons that are wrapped in a popover become fullwidth\n    display: grid;\n    grid-template-columns: 100%;\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding-left: 0.5rem;\n    padding-right: 0.75rem;\n}\n\n.icon {\n    flex-shrink: 0;\n    width: calc(var(--dock-item-height) - 1rem);\n    height: calc(var(--dock-item-height) - 1rem);\n    color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.125rem;\n    right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n    position: relative;\n\n    &:before {\n        text-align: center;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        background: {\n            color: var(--dock-background-color, rgb(var(--contrast-100)));\n            position: center;\n            repeat: no-repeat;\n            size: contain;\n            image: var(--limel-custom-home-icon);\n        }\n        // Since `content` defaults to `undefined`\n        // no pseudo element will be rendered, unless\n        // the consumer defines something.\n        content: var(--limel-custom-home-icon-enabler);\n\n        .button.selected & {\n            background-color: var(\n                --dock-item-background-color--selected,\n                rgb(var(--contrast-200))\n            );\n        }\n    }\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-dock-button',\n    shadow: false,\n    styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n    /**\n     * Item that is placed in the dock.\n     */\n    @Prop()\n    public item!: DockItem;\n\n    /**\n     * When the dock is expanded or collapsed, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * When dock is using mobile layout, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public useMobileLayout? = false;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Indicated whether the popover that renders a component is open.\n     */\n    @State()\n    private isOpen = false;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    private tooltipId: string;\n    private customComponentElement: HTMLElement;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public render() {\n        if (this.item?.dockMenu?.componentName) {\n            return this.renderPopover();\n        }\n\n        return this.renderButton(this.handleClick);\n    }\n\n    @Watch('isOpen')\n    protected openWatcher() {\n        if (!this.isOpen) {\n            return;\n        }\n\n        const observer = new IntersectionObserver(\n            this.focusCustomComponentElement\n        );\n        observer.observe(this.customComponentElement);\n    }\n\n    private renderPopover() {\n        const CustomComponent = this.item?.dockMenu.componentName;\n\n        return (\n            <limel-popover\n                openDirection={this.useMobileLayout ? 'top' : 'right'}\n                open={this.isOpen || this.item.dockMenu.menuOpen}\n                onClose={this.onPopoverClose}\n            >\n                {this.renderButton(this.openPopover, 'trigger')}\n                <CustomComponent\n                    ref={this.setCustomComponentElement}\n                    {...(this.item.dockMenu.props || {})}\n                    onClose={this.onPopoverClose}\n                />\n            </limel-popover>\n        );\n    }\n\n    private renderButton(\n        handleClick: (event: MouseEvent) => void,\n        slot?: string\n    ) {\n        return (\n            <button\n                slot={slot}\n                tabindex=\"0\"\n                id={this.tooltipId}\n                type=\"button\"\n                class={{\n                    button: true,\n                    selected: this.item?.selected,\n                }}\n                onClick={handleClick}\n                aria-live=\"polite\"\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n                {this.renderNotification()}\n            </button>\n        );\n    }\n\n    private renderNotification = () => {\n        if (this.item.badge !== undefined) {\n            return <limel-badge label={this.item.badge} />;\n        }\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n        this.menuOpen.emit(this.item);\n    };\n\n    private setCustomComponentElement = (element: HTMLElement) => {\n        this.customComponentElement = element;\n    };\n\n    private onPopoverClose = () => {\n        this.isOpen = false;\n        this.close.emit();\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.itemSelected.emit(this.item);\n    };\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        return <limel-icon name={this.item.icon} class=\"icon\" />;\n    }\n\n    private renderLabel() {\n        if (this.expanded) {\n            return <span class=\"text\">{this.item.label}</span>;\n        }\n    }\n\n    private renderTooltip() {\n        if (!this.expanded && this.item.label) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.label}\n                    helperLabel={this.item.helperLabel}\n                />\n            );\n        }\n\n        if (this.expanded && this.item.helperLabel) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.helperLabel}\n                />\n            );\n        }\n    }\n\n    private focusCustomComponentElement = () => {\n        if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n            this.customComponentElement?.focus();\n        }\n    };\n}\n"],"mappings":"sFAAA,MAAMA,EAAgB,oiE,MCoBTC,EAAU,MAgDnBC,YAAAC,G,qHAoEQC,KAAAC,mBAAqB,KACzB,GAAID,KAAKE,KAAKC,QAAUC,UAAW,CAC/B,OAAOC,EAAA,eAAaC,MAAON,KAAKE,KAAKC,O,GAIrCH,KAAAO,YAAeC,IACnBA,EAAMC,kBACNT,KAAKU,OAAS,KACdV,KAAKW,SAASC,KAAKZ,KAAKE,KAAK,EAGzBF,KAAAa,0BAA6BC,IACjCd,KAAKe,uBAAyBD,CAAO,EAGjCd,KAAAgB,eAAiB,KACrBhB,KAAKU,OAAS,MACdV,KAAKiB,MAAML,MAAM,EAGbZ,KAAAkB,YAAeV,IACnBA,EAAMC,kBACNT,KAAKmB,aAAaP,KAAKZ,KAAKE,KAAK,EAsC7BF,KAAAoB,4BAA8B,K,UAClC,IAAIC,GAAAC,EAAAtB,KAAKe,0BAAsB,MAAAO,SAAA,SAAAA,EAAEC,cAAU,MAAAF,SAAA,SAAAA,EAAEG,eAAgB,EACzDC,EAAAzB,KAAKe,0BAAsB,MAAAU,SAAA,SAAAA,EAAEC,O,qCAvKlB,M,qBAOO,M,YAkBT,MAYb1B,KAAK2B,UAAYC,G,CAGdC,S,QACH,IAAIR,GAAAC,EAAAtB,KAAKE,QAAI,MAAAoB,SAAA,SAAAA,EAAEQ,YAAQ,MAAAT,SAAA,SAAAA,EAAEU,cAAe,CACpC,OAAO/B,KAAKgC,e,CAGhB,OAAOhC,KAAKiC,aAAajC,KAAKkB,Y,CAIxBgB,cACN,IAAKlC,KAAKU,OAAQ,CACd,M,CAGJ,MAAMyB,EAAW,IAAIC,qBACjBpC,KAAKoB,6BAETe,EAASE,QAAQrC,KAAKe,uB,CAGlBiB,gB,MACJ,MAAMM,GAAkBhB,EAAAtB,KAAKE,QAAI,MAAAoB,SAAA,SAAAA,EAAEQ,SAASC,cAE5C,OACI1B,EAAA,iBACIkC,cAAevC,KAAKwC,gBAAkB,MAAQ,QAC9CC,KAAMzC,KAAKU,QAAUV,KAAKE,KAAK4B,SAASnB,SACxC+B,QAAS1C,KAAKgB,gBAEbhB,KAAKiC,aAAajC,KAAKO,YAAa,WACrCF,EAACiC,EAAeK,OAAAC,OAAA,CACZC,IAAK7C,KAAKa,2BACLb,KAAKE,KAAK4B,SAASgB,OAAS,GAAE,CACnCJ,QAAS1C,KAAKgB,kB,CAMtBiB,aACJf,EACA6B,G,MAEA,OACI1C,EAAA,UACI0C,KAAMA,EACNC,SAAS,IACTC,GAAIjD,KAAK2B,UACTuB,KAAK,SACLC,MAAO,CACHC,OAAQ,KACRC,UAAU/B,EAAAtB,KAAKE,QAAI,MAAAoB,SAAA,SAAAA,EAAE+B,UAEzBC,QAASpC,EAAW,YACV,UAETlB,KAAKuD,aACLvD,KAAKwD,cACLxD,KAAKyD,gBACLzD,KAAKC,qB,CA+BVsD,aACJ,IAAKvD,KAAKE,KAAKwD,KAAM,CACjB,M,CAGJ,OAAOrD,EAAA,cAAYsD,KAAM3D,KAAKE,KAAKwD,KAAMP,MAAM,Q,CAG3CK,cACJ,GAAIxD,KAAK4D,SAAU,CACf,OAAOvD,EAAA,QAAM8C,MAAM,QAAQnD,KAAKE,KAAKI,M,EAIrCmD,gBACJ,IAAKzD,KAAK4D,UAAY5D,KAAKE,KAAKI,MAAO,CACnC,OACID,EAAA,iBACIwD,UAAW7D,KAAK2B,UAChBrB,MAAON,KAAKE,KAAKI,MACjBwD,YAAa9D,KAAKE,KAAK4D,a,CAKnC,GAAI9D,KAAK4D,UAAY5D,KAAKE,KAAK4D,YAAa,CACxC,OACIzD,EAAA,iBACIwD,UAAW7D,KAAK2B,UAChBrB,MAAON,KAAKE,KAAK4D,a"}

package/dist/lime-elements/p-8be4072e.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e}from"./p-3075aa67.js";import{c as o}from"./p-3ccdc4a3.js";const r="limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}limel-tooltip{position:absolute;bottom:0;left:0;right:0}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";const a=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.tooltipId=o()}render(){if(!this.isItem(this.item)&&this.item.separator){return e("div",{role:"separator"})}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled()},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){return e("limel-icon",{name:this.item.icon,style:{"--action-bar-item-icon-color":`${this.item.iconColor}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}};a.style=r;const s=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{a as limel_action_bar_item,s as limel_action_bar_overflow_menu};
-//# sourceMappingURL=p-8be4072e.entry.js.map

package/dist/lime-elements/p-8be4072e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","render","isItem","separator","h","role","id","type","onClick","disabled","isDisabled","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","style","iconColor","iconOnly","class","text","elementId","label","helperLabel","commandText","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","handleSelect","detail","openDirection","items","onSelect","slot","filter","isMenuItem","length"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\nlimel-tooltip {\n    // CSS hack due to the tooltip's placement bug\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n}\n\ndiv[role='separator'] {\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            return (\n                <limel-icon\n                    name={this.item.icon}\n                    style={{\n                        '--action-bar-item-icon-color': `${this.item.iconColor}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n    MenuItem,\n    LimelMenuCustomEvent,\n    ListSeparator,\n    ActionBarItem,\n    OpenDirection,\n} from '@limetech/lime-elements';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAmB,8qE,MCaZC,EAAe,MAyBxBC,YAAAC,G,yCAuBQC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCAhCH,KAQxBN,KAAKO,UAAYC,G,CAGdC,SACH,IAAKT,KAAKU,OAAOV,KAAKM,OAASN,KAAKM,KAAKK,UAAW,CAChD,OAAOC,EAAA,OAAKC,KAAK,a,CAGrB,OACID,EAAA,UACIE,GAAId,KAAKO,UACTQ,KAAK,SACLC,QAAShB,KAAKC,YACdgB,SAAUjB,KAAKkB,cAEdlB,KAAKmB,aACLnB,KAAKoB,cACLpB,KAAKqB,gB,CAUVX,OAAOJ,GACX,QAAS,cAAeA,E,CAGpBY,aACJ,GAAIlB,KAAKU,OAAOV,KAAKM,OAASN,KAAKM,KAAKW,SAAU,CAC9C,OAAO,I,CAGX,IAAKjB,KAAKsB,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAInB,KAAKU,OAAOV,KAAKM,QAAUN,KAAKM,KAAKiB,KAAM,CAC3C,M,CAGJ,GAAI,SAAUvB,KAAKM,KAAM,CACrB,OACIM,EAAA,cACIY,KAAMxB,KAAKM,KAAKiB,KAChBE,MAAO,CACH,+BAAgC,GAAGzB,KAAKM,KAAKoB,c,EAOzDN,cACJ,IAAKpB,KAAKU,OAAOV,KAAKM,OAASN,KAAKM,KAAKqB,SAAU,CAC/C,M,CAGJ,OAAOf,EAAA,QAAMgB,MAAM,QAAQ5B,KAAKM,KAAKuB,K,CAGjCR,gBACJ,IAAKrB,KAAKU,OAAOV,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAKuB,KAAM,CAChB,OACIjB,EAAA,iBACIkB,UAAW9B,KAAKO,UAChBwB,MAAO/B,KAAKM,KAAKuB,KACjBG,YAAahC,KAAKM,KAAK2B,a,CAKnC,GAAIjC,KAAKM,KAAK2B,YAAa,CACvB,OACIrB,EAAA,iBACIkB,UAAW9B,KAAKO,UAChBwB,MAAO/B,KAAKM,KAAK2B,a,oBC5GxBC,EAAqB,M,wDAgCtBlC,KAAAmC,qBAAuB,IACpB,IAAInC,KAAKoC,oBAGZpC,KAAAqC,aAAgBnC,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMoC,OAAO,E,wCAvBI,Y,CAK/B7B,SACH,MAAO,CACHG,EAAA,cACI2B,cAAevC,KAAKuC,cACpBC,MAAOxC,KAAKwC,MACZC,SAAUzC,KAAKqC,cAEfzB,EAAA,UAAQ8B,KAAK,WAAW1C,KAAKmC,yB,CAc7BC,wBACR,OAAOpC,KAAKwC,MAAMG,QAAQrC,GAASN,KAAK4C,WAAWtC,KAAOuC,M,CAGtDD,WAAWtC,GACf,QAAS,cAAeA,E"}

package/dist/lime-elements/p-908640f6.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,g as i}from"./p-3075aa67.js";const n='.mdc-icon-button{font-size:24px;width:48px;height:48px;padding:12px}.mdc-icon-button.mdc-icon-button--reduced-size{width:40px;height:40px;padding:8px}.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch{margin-top:4px;margin-bottom:4px;margin-right:4px;margin-left:4px}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))}.mdc-icon-button svg,.mdc-icon-button img{width:24px;height:24px}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;user-select:none;overflow:visible}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--touch{margin-top:0px;margin-bottom:0px}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}@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-icon-button{--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-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-icon-button .mdc-icon-button__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-icon-button .mdc-icon-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__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-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-icon-button:hover .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button .mdc-icon-button__ripple{pointer-events:none;z-index:1}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.mdc-icon-button{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(--icon-background-color, transparent);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:2.25rem;width:2.25rem;padding:0.125rem;border-radius:50%}.mdc-icon-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.mdc-icon-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible){box-shadow:var(--button-shadow-normal)}.mdc-icon-button:disabled{color:var(--mdc-theme-text-disabled-on-background)}.mdc-icon-button:focus-visible{box-shadow:var(--shadow-depth-8-focused);border-radius:50%}limel-icon{width:1.25rem;height:1.25rem}';const e=class{constructor(o){t(this,o);this.icon=undefined;this.elevated=false;this.label=undefined;this.disabled=false}connectedCallback(){this.initialize()}componentDidLoad(){this.initialize()}initialize(){const t=this.host.shadowRoot.querySelector(".mdc-icon-button");if(!t){return}}render(){const t={};if(this.host.hasAttribute("tabindex")){t.tabindex=this.host.getAttribute("tabindex")}return o("button",Object.assign({class:"mdc-icon-button",disabled:this.disabled,"aria-label":this.label,title:this.label},t),o("limel-icon",{name:this.icon,badge:true}))}get host(){return i(this)}};e.style=n;export{e as limel_icon_button};
-//# sourceMappingURL=p-908640f6.entry.js.map

package/dist/lime-elements/p-908640f6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IconButton","connectedCallback","this","initialize","componentDidLoad","element","host","shadowRoot","querySelector","render","buttonAttributes","hasAttribute","tabindex","getAttribute","h","Object","assign","class","disabled","label","title","name","icon","badge"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '@material/icon-button/styles';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n$height-of-limel-button: functions.pxToRem(36);\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\n.mdc-icon-button {\n    @include mixins.is-flat-clickable(\n        $background-color: var(--icon-background-color, transparent)\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: $height-of-limel-button;\n    width: $height-of-limel-button;\n    padding: functions.pxToRem(2);\n    border-radius: 50%;\n\n    :host([elevated]) & {\n        &:not(:hover):not(:active):not(:focus-visible) {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n\n    &:disabled {\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n\n    &:focus-visible {\n        // only when non-pointer input is being used,\n        // e.g. tabbed into using keyboard\n        box-shadow: var(--shadow-depth-8-focused);\n        border-radius: 50%;\n    }\n}\n\nlimel-icon {\n    width: functions.pxToRem(20);\n    height: functions.pxToRem(20);\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                class=\"mdc-icon-button\"\n                disabled={this.disabled}\n                aria-label={this.label}\n                title={this.label}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n            </button>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,s/L,MCcTC,EAAU,M,2DAYD,M,mCAYA,K,CAKXC,oBACHC,KAAKC,Y,CAGFC,mBACHF,KAAKC,Y,CAGDA,aACJ,MAAME,EAAUH,KAAKI,KAAKC,WAAWC,cAAc,oBACnD,IAAKH,EAAS,CACV,M,EAIDI,SACH,MAAMC,EAA0C,GAChD,GAAIR,KAAKI,KAAKK,aAAa,YAAa,CACpCD,EAAiBE,SAAWV,KAAKI,KAAKO,aAAa,W,CAGvD,OACIC,EAAA,SAAAC,OAAAC,OAAA,CACIC,MAAM,kBACNC,SAAUhB,KAAKgB,SAAQ,aACXhB,KAAKiB,MACjBC,MAAOlB,KAAKiB,OACRT,GAEJI,EAAA,cAAYO,KAAMnB,KAAKoB,KAAMC,MAAO,O"}

package/dist/lime-elements/p-9c1db0e7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["circularProgressCss","PERCENT","CircularProgress","this","renderPrefix","prefix","h","class","render","classList","displayPercentageColors","currentPercentage","value","maxValue","Math","round","role","style","abbreviate","suffix","extendStatics","d","b","Object","setPrototypeOf","__proto__","Array","p","prototype","hasOwnProperty","call","__extends","TypeError","String","__","constructor","create","__assign","assign","t","s","i","n","arguments","length","apply","__values","o","Symbol","iterator","m","next","done","cssClasses","CLOSED_CLASS","CLOSED_ANIMATION_OFF_CLASS","INDETERMINATE_CLASS","REVERSED_CLASS","ANIMATION_READY_CLASS","strings","ARIA_HIDDEN","ARIA_VALUEMAX","ARIA_VALUEMIN","ARIA_VALUENOW","BUFFER_BAR_SELECTOR","FLEX_BASIS","PRIMARY_BAR_SELECTOR","animationDimensionPercentages","PRIMARY_HALF","PRIMARY_FULL","SECONDARY_QUARTER","SECONDARY_HALF","SECONDARY_FULL","MDCLinearProgressFoundation","_super","adapter","_this","defaultAdapter","observer","defineProperty","get","enumerable","configurable","addClass","undefined","attachResizeObserver","forceLayout","getWidth","hasClass","setBufferBarStyle","setPrimaryBarStyle","setStyle","removeAttribute","removeClass","setAttribute","init","determinate","progress","buffer","entries","e_1","_a","entries_1","entries_1_1","entry","contentRect","calculateAndSetDimensions","width","e_1_1","error","return","setDeterminate","isDeterminate","toString","setPrimaryBarProgress","setBufferBarProgress","setProgress","getProgress","setBuffer","getBuffer","open","close","isClosed","handleTransitionEnd","destroy","disconnect","restartAnimation","progressValue","transformProp","window","getCorrectPropertyName","primaryHalf","percents","primaryFull","secondaryQuarter","secondaryHalf","secondaryFull","MDCFoundation","MDCLinearProgress","attachTo","root","set","foundation","initialSyncWithDOM","addEventListener","getDefaultFoundation","className","add","getBoundingClientRect","styleProperty","bufferBar","querySelector","setProperty","primaryBar","contains","attributeName","remove","name","callback","RO","ResizeObserver","ro","observe","offsetWidth","MDCComponent","linearProgressCss","LinearProgress","connectedCallback","initialize","componentDidLoad","element","host","shadowRoot","mdcLinearProgress","disconnectedCallback","indeterminate","watchValue","newValue"],"sources":["./src/components/circular-progress/circular-progress.scss?tag=limel-circular-progress&encapsulation=shadow","./src/components/circular-progress/circular-progress.tsx","./node_modules/@material/linear-progress/node_modules/tslib/tslib.es6.js","./node_modules/@material/linear-progress/constants.js","./node_modules/@material/linear-progress/foundation.js","./node_modules/@material/linear-progress/component.js","./src/components/linear-progress/linear-progress.scss?tag=limel-linear-progress&encapsulation=shadow","./src/components/linear-progress/linear-progress.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n@use '../../style/internal/lime-theme';\n\n/**\n * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.\n * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.\n * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.\n * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.\n * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.\n * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.\n */\n\n:host {\n    display: block;\n    box-sizing: border-box;\n    isolation: isolate;\n}\n\n:host([size='x-small']) {\n    --circular-progress-size: 1.5rem;\n    font-weight: bold;\n}\n\n:host([size='small']) {\n    --circular-progress-size: 2rem;\n    font-weight: bold;\n}\n\n:host([size='medium']) {\n    --circular-progress-size: 3rem;\n}\n\n:host([size='large']) {\n    --circular-progress-size: 4rem;\n}\n\n:host([size='x-large']) {\n    --circular-progress-size: 5rem;\n}\n\n.lime-circular-progress {\n    --size: var(--circular-progress-size, 3rem);\n    --fill-color: var(--circular-progress-fill-color, var(--mdc-theme-primary));\n    --track-color: var(\n        --circular-progress-track-color,\n        rgb(var(--contrast-400))\n    );\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: var(--size);\n    height: var(--size);\n    border-radius: 50%;\n\n    line-height: normal;\n\n    box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.7);\n    background: conic-gradient(\n        var(--fill-color) 0% var(--percentage),\n        var(--track-color) var(--percentage) 100%\n    );\n\n    &:before {\n        $size-of-middle-circle: calc(\n            var(--size) * 0.75 + 0.25rem\n        ); // this calculation ensures that the middle circle is responsive and always perfectly centered\n\n        content: '';\n        position: absolute;\n        width: $size-of-middle-circle;\n        height: $size-of-middle-circle;\n        border-radius: 50%;\n        background-color: var(\n            --circular-progress-background-color,\n            rgb(var(--contrast-100))\n        );\n        box-shadow: var(--button-shadow-pressed);\n    }\n}\n\n.prefix {\n    font-size: clamp(0.5rem, calc(var(--size) * 0.16), 2.25rem);\n    @include mixins.truncate-text();\n    text-align: center;\n    color: var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));\n\n    width: 45%;\n    top: 20%;\n    position: absolute;\n}\n\n.value {\n    display: flex;\n    font-size: clamp(0.5rem, calc(var(--size) * 0.25), 4rem);\n    color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));\n    z-index: 1;\n    cursor: default;\n}\n\n.suffix {\n    font-size: clamp(0.5rem, calc(var(--size) * 0.18), 2.5rem);\n    color: var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));\n    padding-top: 4%;\n}\n\n@import './partial-styles/_percentage-colors';\n","import { Component, h, Prop } from '@stencil/core';\nimport { CircularProgressSize } from './circular-progress.types';\nimport { abbreviate } from '../badge/format';\n\nconst PERCENT = 100;\n\n/**\n * The circular progress component can be used to visualize the curent state of\n * a progress in a scale; for example percentage of completion of a task.\n *\n * Its compact UI makes the component suitable when there is not enough screen\n * space available to visualise such information.\n *\n * This component allows you to define your scale, from `0` to a desired\n * `maxValue`; and also lets you chose a proper `suffix` for your scale.\n *\n * :::note\n * The component will round up the value when it is displayed, and only shows\n * one decimal digit.\n * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.\n * Of course such numbers, if bigger than `maxValue` will be visualized as a\n * full progress.\n * :::\n * @exampleComponent limel-example-circular-progress\n * @exampleComponent limel-example-circular-progress-sizes\n * @exampleComponent limel-example-circular-progress-props\n * @exampleComponent limel-example-circular-progress-css-variables\n * @exampleComponent limel-example-circular-progress-percentage-colors\n */\n@Component({\n    tag: 'limel-circular-progress',\n    shadow: true,\n    styleUrl: 'circular-progress.scss',\n})\nexport class CircularProgress {\n    /**\n     * The value of the progress bar.\n     */\n    @Prop()\n    public value: number = 0;\n\n    /**\n     * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.\n     */\n    @Prop()\n    public maxValue: number = PERCENT;\n\n    /**\n     * The prefix which is displayed before the `value`, must be a few characters characters long.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string = null;\n\n    /**\n     * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`\n     */\n    @Prop()\n    public suffix: string = '%';\n\n    /**\n     * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.\n     */\n    @Prop()\n    public displayPercentageColors: boolean = false;\n\n    /**\n     * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.\n     */\n    @Prop({ reflect: true })\n    public size: CircularProgressSize;\n\n    public render() {\n        const classList = {\n            'lime-circular-progress': true,\n            'displays-percentage-colors': this.displayPercentageColors,\n        };\n\n        const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';\n        const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers\n\n        return (\n            <div\n                role=\"progressbar\"\n                class={classList}\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax={this.maxValue}\n                aria-valuenow={this.value}\n                style={{ '--percentage': currentPercentage }}\n            >\n                {this.renderPrefix()}\n                <span class=\"value\">\n                    {abbreviate(value)}\n                    <span class=\"suffix\">{this.suffix}</span>\n                </span>\n            </div>\n        );\n    }\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n}\n","/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (_) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","/**\n * @license\n * Copyright 2017 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 */\nexport var cssClasses = {\n    CLOSED_CLASS: 'mdc-linear-progress--closed',\n    CLOSED_ANIMATION_OFF_CLASS: 'mdc-linear-progress--closed-animation-off',\n    INDETERMINATE_CLASS: 'mdc-linear-progress--indeterminate',\n    REVERSED_CLASS: 'mdc-linear-progress--reversed',\n    ANIMATION_READY_CLASS: 'mdc-linear-progress--animation-ready',\n};\nexport var strings = {\n    ARIA_HIDDEN: 'aria-hidden',\n    ARIA_VALUEMAX: 'aria-valuemax',\n    ARIA_VALUEMIN: 'aria-valuemin',\n    ARIA_VALUENOW: 'aria-valuenow',\n    BUFFER_BAR_SELECTOR: '.mdc-linear-progress__buffer-bar',\n    FLEX_BASIS: 'flex-basis',\n    PRIMARY_BAR_SELECTOR: '.mdc-linear-progress__primary-bar',\n};\n// these are percentages pulled from keyframes.scss\nexport var animationDimensionPercentages = {\n    PRIMARY_HALF: .8367142,\n    PRIMARY_FULL: 2.00611057,\n    SECONDARY_QUARTER: .37651913,\n    SECONDARY_HALF: .84386165,\n    SECONDARY_FULL: 1.60277782,\n};\n//# sourceMappingURL=constants.js.map","/**\n * @license\n * Copyright 2017 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, __values } from \"tslib\";\nimport { getCorrectPropertyName } from '@material/animation/util';\nimport { MDCFoundation } from '@material/base/foundation';\nimport { animationDimensionPercentages as percents, cssClasses, strings } from './constants';\nvar MDCLinearProgressFoundation = /** @class */ (function (_super) {\n    __extends(MDCLinearProgressFoundation, _super);\n    function MDCLinearProgressFoundation(adapter) {\n        var _this = _super.call(this, __assign(__assign({}, MDCLinearProgressFoundation.defaultAdapter), adapter)) || this;\n        _this.observer = null;\n        return _this;\n    }\n    Object.defineProperty(MDCLinearProgressFoundation, \"cssClasses\", {\n        get: function () {\n            return cssClasses;\n        },\n        enumerable: false,\n        configurable: true\n    });\n    Object.defineProperty(MDCLinearProgressFoundation, \"strings\", {\n        get: function () {\n            return strings;\n        },\n        enumerable: false,\n        configurable: true\n    });\n    Object.defineProperty(MDCLinearProgressFoundation, \"defaultAdapter\", {\n        get: function () {\n            return {\n                addClass: function () { return undefined; },\n                attachResizeObserver: function () { return null; },\n                forceLayout: function () { return undefined; },\n                getWidth: function () { return 0; },\n                hasClass: function () { return false; },\n                setBufferBarStyle: function () { return null; },\n                setPrimaryBarStyle: function () { return null; },\n                setStyle: function () { return undefined; },\n                removeAttribute: function () { return undefined; },\n                removeClass: function () { return undefined; },\n                setAttribute: function () { return undefined; },\n            };\n        },\n        enumerable: false,\n        configurable: true\n    });\n    MDCLinearProgressFoundation.prototype.init = function () {\n        var _this = this;\n        this.determinate = !this.adapter.hasClass(cssClasses.INDETERMINATE_CLASS);\n        this.adapter.addClass(cssClasses.ANIMATION_READY_CLASS);\n        this.progress = 0;\n        this.buffer = 1;\n        this.observer = this.adapter.attachResizeObserver(function (entries) {\n            var e_1, _a;\n            if (_this.determinate) {\n                return;\n            }\n            try {\n                for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {\n                    var entry = entries_1_1.value;\n                    if (entry.contentRect) {\n                        _this.calculateAndSetDimensions(entry.contentRect.width);\n                    }\n                }\n            }\n            catch (e_1_1) { e_1 = { error: e_1_1 }; }\n            finally {\n                try {\n                    if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);\n                }\n                finally { if (e_1) throw e_1.error; }\n            }\n        });\n        if (!this.determinate && this.observer) {\n            this.calculateAndSetDimensions(this.adapter.getWidth());\n        }\n    };\n    MDCLinearProgressFoundation.prototype.setDeterminate = function (isDeterminate) {\n        this.determinate = isDeterminate;\n        if (this.determinate) {\n            this.adapter.removeClass(cssClasses.INDETERMINATE_CLASS);\n            this.adapter.setAttribute(strings.ARIA_VALUENOW, this.progress.toString());\n            this.adapter.setAttribute(strings.ARIA_VALUEMAX, '1');\n            this.adapter.setAttribute(strings.ARIA_VALUEMIN, '0');\n            this.setPrimaryBarProgress(this.progress);\n            this.setBufferBarProgress(this.buffer);\n            return;\n        }\n        if (this.observer) {\n            this.calculateAndSetDimensions(this.adapter.getWidth());\n        }\n        this.adapter.addClass(cssClasses.INDETERMINATE_CLASS);\n        this.adapter.removeAttribute(strings.ARIA_VALUENOW);\n        this.adapter.removeAttribute(strings.ARIA_VALUEMAX);\n        this.adapter.removeAttribute(strings.ARIA_VALUEMIN);\n        this.setPrimaryBarProgress(1);\n        this.setBufferBarProgress(1);\n    };\n    MDCLinearProgressFoundation.prototype.isDeterminate = function () {\n        return this.determinate;\n    };\n    MDCLinearProgressFoundation.prototype.setProgress = function (value) {\n        this.progress = value;\n        if (this.determinate) {\n            this.setPrimaryBarProgress(value);\n            this.adapter.setAttribute(strings.ARIA_VALUENOW, value.toString());\n        }\n    };\n    MDCLinearProgressFoundation.prototype.getProgress = function () {\n        return this.progress;\n    };\n    MDCLinearProgressFoundation.prototype.setBuffer = function (value) {\n        this.buffer = value;\n        if (this.determinate) {\n            this.setBufferBarProgress(value);\n        }\n    };\n    MDCLinearProgressFoundation.prototype.getBuffer = function () {\n        return this.buffer;\n    };\n    MDCLinearProgressFoundation.prototype.open = function () {\n        this.adapter.removeClass(cssClasses.CLOSED_CLASS);\n        this.adapter.removeClass(cssClasses.CLOSED_ANIMATION_OFF_CLASS);\n        this.adapter.removeAttribute(strings.ARIA_HIDDEN);\n    };\n    MDCLinearProgressFoundation.prototype.close = function () {\n        this.adapter.addClass(cssClasses.CLOSED_CLASS);\n        this.adapter.setAttribute(strings.ARIA_HIDDEN, 'true');\n    };\n    MDCLinearProgressFoundation.prototype.isClosed = function () {\n        return this.adapter.hasClass(cssClasses.CLOSED_CLASS);\n    };\n    /**\n     * Handles the transitionend event emitted after `close()` is called and the\n     * opacity fades out. This is so that animations are removed only after the\n     * progress indicator is completely hidden.\n     */\n    MDCLinearProgressFoundation.prototype.handleTransitionEnd = function () {\n        if (this.adapter.hasClass(cssClasses.CLOSED_CLASS)) {\n            this.adapter.addClass(cssClasses.CLOSED_ANIMATION_OFF_CLASS);\n        }\n    };\n    MDCLinearProgressFoundation.prototype.destroy = function () {\n        _super.prototype.destroy.call(this);\n        if (this.observer) {\n            this.observer.disconnect();\n        }\n    };\n    MDCLinearProgressFoundation.prototype.restartAnimation = function () {\n        this.adapter.removeClass(cssClasses.ANIMATION_READY_CLASS);\n        this.adapter.forceLayout();\n        this.adapter.addClass(cssClasses.ANIMATION_READY_CLASS);\n    };\n    MDCLinearProgressFoundation.prototype.setPrimaryBarProgress = function (progressValue) {\n        var value = \"scaleX(\" + progressValue + \")\";\n        // Accessing `window` without a `typeof` check will throw on Node\n        // environments.\n        var transformProp = typeof window !== 'undefined' ?\n            getCorrectPropertyName(window, 'transform') :\n            'transform';\n        this.adapter.setPrimaryBarStyle(transformProp, value);\n    };\n    MDCLinearProgressFoundation.prototype.setBufferBarProgress = function (progressValue) {\n        var value = progressValue * 100 + \"%\";\n        this.adapter.setBufferBarStyle(strings.FLEX_BASIS, value);\n    };\n    MDCLinearProgressFoundation.prototype.calculateAndSetDimensions = function (width) {\n        var primaryHalf = width * percents.PRIMARY_HALF;\n        var primaryFull = width * percents.PRIMARY_FULL;\n        var secondaryQuarter = width * percents.SECONDARY_QUARTER;\n        var secondaryHalf = width * percents.SECONDARY_HALF;\n        var secondaryFull = width * percents.SECONDARY_FULL;\n        this.adapter.setStyle('--mdc-linear-progress-primary-half', primaryHalf + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-primary-half-neg', -primaryHalf + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-primary-full', primaryFull + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-primary-full-neg', -primaryFull + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-secondary-quarter', secondaryQuarter + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-secondary-quarter-neg', -secondaryQuarter + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-secondary-half', secondaryHalf + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-secondary-half-neg', -secondaryHalf + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-secondary-full', secondaryFull + \"px\");\n        this.adapter.setStyle('--mdc-linear-progress-secondary-full-neg', -secondaryFull + \"px\");\n        // need to restart animation for custom props to apply to keyframes\n        this.restartAnimation();\n    };\n    return MDCLinearProgressFoundation;\n}(MDCFoundation));\nexport { MDCLinearProgressFoundation };\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCLinearProgressFoundation;\n//# sourceMappingURL=foundation.js.map","/**\n * @license\n * Copyright 2017 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 { MDCLinearProgressFoundation } from './foundation';\nvar MDCLinearProgress = /** @class */ (function (_super) {\n    __extends(MDCLinearProgress, _super);\n    function MDCLinearProgress() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    MDCLinearProgress.attachTo = function (root) {\n        return new MDCLinearProgress(root);\n    };\n    Object.defineProperty(MDCLinearProgress.prototype, \"determinate\", {\n        set: function (value) {\n            this.foundation.setDeterminate(value);\n        },\n        enumerable: false,\n        configurable: true\n    });\n    Object.defineProperty(MDCLinearProgress.prototype, \"progress\", {\n        set: function (value) {\n            this.foundation.setProgress(value);\n        },\n        enumerable: false,\n        configurable: true\n    });\n    Object.defineProperty(MDCLinearProgress.prototype, \"buffer\", {\n        set: function (value) {\n            this.foundation.setBuffer(value);\n        },\n        enumerable: false,\n        configurable: true\n    });\n    MDCLinearProgress.prototype.open = function () {\n        this.foundation.open();\n    };\n    MDCLinearProgress.prototype.close = function () {\n        this.foundation.close();\n    };\n    MDCLinearProgress.prototype.initialSyncWithDOM = function () {\n        var _this = this;\n        this.root.addEventListener('transitionend', function () {\n            _this.foundation.handleTransitionEnd();\n        });\n    };\n    MDCLinearProgress.prototype.getDefaultFoundation = function () {\n        var _this = this;\n        // DO NOT INLINE this variable. For backward compatibility, foundations take\n        // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n        // methods, we need a separate, strongly typed adapter variable.\n        var adapter = {\n            addClass: function (className) {\n                _this.root.classList.add(className);\n            },\n            forceLayout: function () {\n                _this.root.getBoundingClientRect();\n            },\n            setBufferBarStyle: function (styleProperty, value) {\n                var bufferBar = _this.root.querySelector(MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR);\n                if (bufferBar) {\n                    bufferBar.style.setProperty(styleProperty, value);\n                }\n            },\n            setPrimaryBarStyle: function (styleProperty, value) {\n                var primaryBar = _this.root.querySelector(MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR);\n                if (primaryBar) {\n                    primaryBar.style.setProperty(styleProperty, value);\n                }\n            },\n            hasClass: function (className) { return _this.root.classList.contains(className); },\n            removeAttribute: function (attributeName) {\n                _this.root.removeAttribute(attributeName);\n            },\n            removeClass: function (className) {\n                _this.root.classList.remove(className);\n            },\n            setAttribute: function (attributeName, value) {\n                _this.root.setAttribute(attributeName, value);\n            },\n            setStyle: function (name, value) {\n                _this.root.style.setProperty(name, value);\n            },\n            attachResizeObserver: function (callback) {\n                var RO = window.ResizeObserver;\n                if (RO) {\n                    var ro = new RO(callback);\n                    ro.observe(_this.root);\n                    return ro;\n                }\n                return null;\n            },\n            getWidth: function () { return _this.root.offsetWidth; },\n        };\n        return new MDCLinearProgressFoundation(adapter);\n    };\n    return MDCLinearProgress;\n}(MDCComponent));\nexport { MDCLinearProgress };\n//# sourceMappingURL=component.js.map","@use '../../style/internal/lime-theme';\n@use '@material/linear-progress';\n\n/**\n * @prop --background-color: Color to use for progress-bar track.\n */\n\n@include linear-progress.core-styles;\n\n.mdc-linear-progress {\n    text-align: left;\n}\n\n@include linear-progress.buffer-color(\n    var(--background-color, rgba(var(--contrast-800), 0.5))\n);\n","import { MDCLinearProgress } from '@material/linear-progress';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-linear-progress\n * @exampleComponent limel-example-linear-progress-color\n * @exampleComponent limel-example-linear-progress-indeterminate\n */\n@Component({\n    tag: 'limel-linear-progress',\n    shadow: true,\n    styleUrl: 'linear-progress.scss',\n})\nexport class LinearProgress {\n    /**\n     * The value of the progress bar. Should be between `0` and `1`.\n     */\n    @Prop()\n    public value: number = 0;\n\n    /**\n     * Puts the progress bar in an indeterminate state\n     */\n    @Prop()\n    public indeterminate: boolean = false;\n\n    @Element()\n    private host: HTMLLimelLinearProgressElement;\n\n    private mdcLinearProgress: MDCLinearProgress;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-linear-progress'\n        );\n        if (!element) {\n            return;\n        }\n\n        this.mdcLinearProgress = new MDCLinearProgress(element);\n        this.mdcLinearProgress.progress = this.value;\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcLinearProgress) {\n            this.mdcLinearProgress.destroy();\n        }\n    }\n\n    public render() {\n        const classList = {\n            'mdc-linear-progress': true,\n            'mdc-linear-progress--indeterminate': this.indeterminate,\n        };\n\n        return (\n            <div\n                role=\"progressbar\"\n                class={classList}\n                aria-label=\"Progress Bar\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"1\"\n                aria-valuenow={this.value}\n            >\n                <div class=\"mdc-linear-progress__buffer\">\n                    <div class=\"mdc-linear-progress__buffer-bar\"></div>\n                </div>\n                <div class=\"mdc-linear-progress__bar mdc-linear-progress__primary-bar\">\n                    <span class=\"mdc-linear-progress__bar-inner\" />\n                </div>\n                <div class=\"mdc-linear-progress__bar mdc-linear-progress__secondary-bar\">\n                    <span class=\"mdc-linear-progress__bar-inner\" />\n                </div>\n            </div>\n        );\n    }\n\n    @Watch('value')\n    protected watchValue(newValue) {\n        if (!this.mdcLinearProgress) {\n            return;\n        }\n\n        this.mdcLinearProgress.progress = newValue;\n    }\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-9ceb4364.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as o}from"./p-3075aa67.js";const t='.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--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>")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}.picker-trigger{border-radius:0.5rem;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)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}';const i=class{constructor(t){e(this,t);this.change=r(this,"change",7);this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel){return o("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})}};this.renderPickerPalette=()=>{if(this.readonly){return this.renderPickerTrigger()}return o("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),o("limel-color-picker-palette",{value:this.value,label:this.label,helperText:this.helperText,onChange:this.handleChange,required:this.required}))};this.renderPickerTrigger=()=>{const e=this.value?{"--background":this.value}:{};return o("div",{class:"picker-trigger",slot:"trigger",style:e,role:"button",tabindex:"0",onClick:this.openPopover,id:"tooltip-button"})};this.openPopover=e=>{e.stopPropagation();this.isOpen=true};this.onPopoverClose=e=>{e.stopPropagation();this.isOpen=false};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.tooltipLabel=undefined;this.required=undefined;this.readonly=undefined;this.isOpen=false}render(){return[this.renderTooltip(),o("div",{class:"color-picker"},this.renderPickerPalette(),o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly,class:"chosen-color-input"}))]}};i.style=t;export{i as limel_color_picker};
-//# sourceMappingURL=p-9ceb4364.entry.js.map

package/dist/lime-elements/p-9ceb4364.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colorPickerCss","ColorPicker","this","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","value","helperText","onChange","handleChange","required","background","class","slot","style","role","tabindex","onClick","openPopover","id","event","stopPropagation","change","emit","detail","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@import './partial-styles/lime-admin-hack';\n\n:host {\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.5rem;\n    grid-template-columns: auto 1fr;\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: 3.5rem;\n    height: 3.5rem;\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.picker-trigger {\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\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: translateY(1rem);\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 * @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 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                    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            <div\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                tabindex=\"0\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\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":"kDAAA,MAAMA,EAAiB,siG,MCsBVC,EAAW,M,wDAgEZC,KAAAC,cAAgB,KACpB,IAAKD,KAAKE,UAAYF,KAAKG,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAOL,KAAKG,aACZG,UAAU,kB,GAMlBN,KAAAO,oBAAsB,KAC1B,GAAIP,KAAKE,SAAU,CACf,OAAOF,KAAKQ,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMT,KAAKU,OACXC,cAAc,eACdC,QAASZ,KAAKa,gBAEbb,KAAKQ,sBACNJ,EAAA,8BACIU,MAAOd,KAAKc,MACZT,MAAOL,KAAKK,MACZU,WAAYf,KAAKe,WACjBC,SAAUhB,KAAKiB,aACfC,SAAUlB,KAAKkB,WAEP,EAIhBlB,KAAAQ,oBAAsB,KAC1B,MAAMW,EAAanB,KAAKc,MAAQ,CAAE,eAAgBd,KAAKc,OAAU,GAEjE,OACIV,EAAA,OACIgB,MAAM,iBACNC,KAAK,UACLC,MAAOH,EACPI,KAAK,SACLC,SAAS,IACTC,QAASzB,KAAK0B,YACdC,GAAG,kBACL,EAIF3B,KAAA0B,YAAeE,IACnBA,EAAMC,kBACN7B,KAAKU,OAAS,IAAI,EAGdV,KAAAa,eAAkBe,IACtBA,EAAMC,kBACN7B,KAAKU,OAAS,KAAK,EAGfV,KAAAiB,aAAgBW,IACpBA,EAAMC,kBACN7B,KAAK8B,OAAOC,KAAKH,EAAMI,OAAO,E,4JAlFjB,K,CAEVC,SACH,MAAO,CACHjC,KAAKC,gBACLG,EAAA,OAAKgB,MAAM,gBACNpB,KAAKO,sBAENH,EAAA,qBACIC,MAAOL,KAAKK,MACZU,WAAYf,KAAKe,WACjBD,MAAOd,KAAKc,MACZE,SAAUhB,KAAKiB,aACfC,SAAUlB,KAAKkB,SACfhB,SAAUF,KAAKE,SACfkB,MAAM,wB"}