@limetech/lime-elements 38.1.1 → 38.1.2

package/dist/lime-elements/p-375eabba.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as o}from"./p-443111b3.js";import{c as r}from"./p-96460db3.js";import{m as n,r as a}from"./p-869d6d77.js";import{g as s,a as l}from"./p-2fd454dd.js";const c='@charset "UTF-8";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;pointer-events:none}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);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover{transform:translate3d(0, -0.04rem, 0);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{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}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}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.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))}hr{all:unset;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){hr{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 h=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.selected=false;this.tooltipId=r()}componentWillLoad(){n(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){a(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("hr",null)}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},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){const t=s(this.item.icon);const i=l(this.item.icon,this.item.iconColor);return e("limel-icon",{name:t,style:{"--action-bar-item-icon-color":`${i}`}})}}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})}}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};h.style=c;const d=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{h as limel_action_bar_item,d as limel_action_bar_overflow_menu};
+//# sourceMappingURL=p-375eabba.entry.js.map

package/dist/lime-elements/{p-29d07118.entry.js.map → p-375eabba.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","host","componentDidLoad","triggerIconColorWarning","disconnectedCallback","removeEnterClickable","render","isItem","separator","h","id","type","onClick","disabled","isDisabled","class","selected","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","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        pointer-events: none;\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    color: var(--limel-action-bar-item-text-color);\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    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(--mdc-theme-primary) !important;\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\nhr {\n    all: unset;\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 {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\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     * @public\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     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\n\n    @Element()\n    private readonly host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private readonly tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <hr />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private readonly 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            const name = getIconName(this.item.icon);\n            // eslint-disable-next-line sonarjs/deprecation\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\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    private triggerIconColorWarning() {\n        // eslint-disable-next-line sonarjs/deprecation\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\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    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\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":"mLAAA,MAAMA,EAAmB,0/F,MCyBZC,EAAe,MAmCxBC,YAAAC,G,yCAsCiBC,KAAAC,YAAeC,IAC5BA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCAxDH,K,cAMD,MAWvBN,KAAKO,UAAYC,G,CAGdC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,mBACHZ,KAAKa,yB,CAGFC,uBACHC,EAAqBf,KAAKW,K,CAGvBK,SACH,IAAKhB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKY,UAAW,CAChD,OAAOC,EAAA,U,CAGX,OACIA,EAAA,UACIC,GAAIpB,KAAKO,UACTc,KAAK,SACLC,QAAStB,KAAKC,YACdsB,SAAUvB,KAAKwB,aACfC,MAAO,CACH,cAAezB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKoB,WAGtD1B,KAAK2B,aACL3B,KAAK4B,cACL5B,KAAK6B,gB,CAUVZ,OAAOX,GACX,QAAS,cAAeA,E,CAGpBkB,aACJ,GAAIxB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKiB,SAAU,CAC9C,OAAO,I,CAGX,IAAKvB,KAAK8B,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAI3B,KAAKiB,OAAOjB,KAAKM,QAAUN,KAAKM,KAAKyB,KAAM,CAC3C,M,CAGJ,GAAI,SAAU/B,KAAKM,KAAM,CACrB,MAAM0B,EAAOC,EAAYjC,KAAKM,KAAKyB,MAEnC,MAAMG,EAAQC,EAAanC,KAAKM,KAAKyB,KAAM/B,KAAKM,KAAK8B,WAErD,OACIjB,EAAA,cACIa,KAAMA,EACNK,MAAO,CACH,+BAAgC,GAAGH,M,EAO/CN,cACJ,IAAK5B,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKgC,SAAU,CAC/C,M,CAGJ,OAAOnB,EAAA,QAAMM,MAAM,QAAQzB,KAAKM,KAAKiC,K,CAGjCV,gBACJ,IAAK7B,KAAKiB,OAAOjB,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAKiC,KAAM,CAChB,OACIpB,EAAA,iBACIqB,UAAWxC,KAAKO,UAChBkC,MAAOzC,KAAKM,KAAKiC,KACjBG,YAAa1C,KAAKM,KAAKqC,a,CAKnC,GAAI3C,KAAKM,KAAKqC,YAAa,CACvB,OACIxB,EAAA,iBACIqB,UAAWxC,KAAKO,UAChBkC,MAAOzC,KAAKM,KAAKqC,a,EAMzB9B,0BAEJ,GAAIb,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAK8B,UAAW,CAE/CQ,QAAQC,KACJ,uK,8CCnKHC,EAAqB,M,wDAoCtB9C,KAAA+C,qBAAuB,IACpB,IAAI/C,KAAKgD,oBAGZhD,KAAAiD,aAAgB/C,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMgD,OAAO,E,wCA3BI,Y,CAS/BlC,SACH,MAAO,CACHG,EAAA,cACIgC,cAAenD,KAAKmD,cACpBC,MAAOpD,KAAKoD,MACZC,SAAUrD,KAAKiD,cAEf9B,EAAA,UAAQmC,KAAK,WAAWtD,KAAK+C,yB,CAc7BC,wBACR,OAAOhD,KAAKoD,MAAMG,QAAQjD,GAASN,KAAKwD,WAAWlD,KAAOmD,M,CAGtDD,WAAWlD,GACf,QAAS,cAAeA,E"}
+{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","host","componentDidLoad","triggerIconColorWarning","disconnectedCallback","removeEnterClickable","render","isItem","separator","h","id","type","onClick","disabled","isDisabled","class","selected","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","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        pointer-events: none;\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    color: var(--limel-action-bar-item-text-color);\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    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(--mdc-theme-primary) !important;\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\nhr {\n    all: unset;\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 {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\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     * @public\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     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\n\n    @Element()\n    private readonly host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private readonly tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <hr />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private readonly 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            const name = getIconName(this.item.icon);\n            // eslint-disable-next-line sonarjs/deprecation\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\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    private triggerIconColorWarning() {\n        // eslint-disable-next-line sonarjs/deprecation\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\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    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\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":"mLAAA,MAAMA,EAAmB,i8F,MCyBZC,EAAe,MAmCxBC,YAAAC,G,yCAsCiBC,KAAAC,YAAeC,IAC5BA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCAxDH,K,cAMD,MAWvBN,KAAKO,UAAYC,G,CAGdC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,mBACHZ,KAAKa,yB,CAGFC,uBACHC,EAAqBf,KAAKW,K,CAGvBK,SACH,IAAKhB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKY,UAAW,CAChD,OAAOC,EAAA,U,CAGX,OACIA,EAAA,UACIC,GAAIpB,KAAKO,UACTc,KAAK,SACLC,QAAStB,KAAKC,YACdsB,SAAUvB,KAAKwB,aACfC,MAAO,CACH,cAAezB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKoB,WAGtD1B,KAAK2B,aACL3B,KAAK4B,cACL5B,KAAK6B,gB,CAUVZ,OAAOX,GACX,QAAS,cAAeA,E,CAGpBkB,aACJ,GAAIxB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKiB,SAAU,CAC9C,OAAO,I,CAGX,IAAKvB,KAAK8B,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAI3B,KAAKiB,OAAOjB,KAAKM,QAAUN,KAAKM,KAAKyB,KAAM,CAC3C,M,CAGJ,GAAI,SAAU/B,KAAKM,KAAM,CACrB,MAAM0B,EAAOC,EAAYjC,KAAKM,KAAKyB,MAEnC,MAAMG,EAAQC,EAAanC,KAAKM,KAAKyB,KAAM/B,KAAKM,KAAK8B,WAErD,OACIjB,EAAA,cACIa,KAAMA,EACNK,MAAO,CACH,+BAAgC,GAAGH,M,EAO/CN,cACJ,IAAK5B,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKgC,SAAU,CAC/C,M,CAGJ,OAAOnB,EAAA,QAAMM,MAAM,QAAQzB,KAAKM,KAAKiC,K,CAGjCV,gBACJ,IAAK7B,KAAKiB,OAAOjB,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAKiC,KAAM,CAChB,OACIpB,EAAA,iBACIqB,UAAWxC,KAAKO,UAChBkC,MAAOzC,KAAKM,KAAKiC,KACjBG,YAAa1C,KAAKM,KAAKqC,a,CAKnC,GAAI3C,KAAKM,KAAKqC,YAAa,CACvB,OACIxB,EAAA,iBACIqB,UAAWxC,KAAKO,UAChBkC,MAAOzC,KAAKM,KAAKqC,a,EAMzB9B,0BAEJ,GAAIb,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAK8B,UAAW,CAE/CQ,QAAQC,KACJ,uK,8CCnKHC,EAAqB,M,wDAoCtB9C,KAAA+C,qBAAuB,IACpB,IAAI/C,KAAKgD,oBAGZhD,KAAAiD,aAAgB/C,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMgD,OAAO,E,wCA3BI,Y,CAS/BlC,SACH,MAAO,CACHG,EAAA,cACIgC,cAAenD,KAAKmD,cACpBC,MAAOpD,KAAKoD,MACZC,SAAUrD,KAAKiD,cAEf9B,EAAA,UAAQmC,KAAK,WAAWtD,KAAK+C,yB,CAc7BC,wBACR,OAAOhD,KAAKoD,MAAMG,QAAQjD,GAASN,KAAKwD,WAAWlD,KAAOmD,M,CAGtDD,WAAWlD,GACf,QAAS,cAAeA,E"}