@limetech/lime-elements 38.1.1 → 38.1.3

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [38.1.3](https://github.com/Lundalogik/lime-elements/compare/v38.1.2...v38.1.3) (2025-02-21)
+
+
+### Bug Fixes
+
+
+* **date-picker:** fix memory leak when component is destroyed before menu is closed ([fb4b92b](https://github.com/Lundalogik/lime-elements/commit/fb4b92b13f41a40164a9383ae6733e6caca08eb5))
+
+## [38.1.2](https://github.com/Lundalogik/lime-elements/compare/v38.1.1...v38.1.2) (2025-02-19)
+
+
+### Reverts
+
+
+* Revert "chore(mixins): enable passing extra transitionable props to some mixins" ([1008415](https://github.com/Lundalogik/lime-elements/commit/1008415b5cc90226ebac0fecf43b8161a2654b0a))
+
 ## [38.1.1](https://github.com/Lundalogik/lime-elements/compare/v38.1.0...v38.1.1) (2025-02-18)
 
 

package/dist/cjs/limel-action-bar-item_2.cjs.entry.js

@@ -7,7 +7,7 @@ const randomString = require('./random-string-e8ad4419.js');
 const makeEnterClickable = require('./make-enter-clickable-c116ac4f.js');
 const getIconProps = require('./get-icon-props-f9451df3.js');
 
-const actionBarItemCss = "@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), var(--limel-additional-clickable-transition-properties);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 actionBarItemCss = "@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 ActionBarButton = class {
   constructor(hostRef) {

package/dist/cjs/limel-action-bar-item_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.cjs.js","mappings":"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","names":["createRandomString","makeEnterClickable","removeEnterClickable","h","getIconName","getIconColor"],"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"],"version":3}
+{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,k8FAAk8F;;MCyB98F,eAAe;EAmCxB;;;IAsCiB,gBAAW,GAAG,CAAC,KAAiB;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B,CAAC;;qBAzD0B,IAAI;oBAML,KAAK;IAW5B,IAAI,CAAC,SAAS,GAAGA,+BAAkB,EAAE,CAAC;GACzC;EAEM,iBAAiB;IACpBC,qCAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,gBAAgB;IACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAClC;EAEM,oBAAoB;IACvBC,uCAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,MAAM;IACT,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MAChD,OAAOC,mBAAM,CAAC;KACjB;IAED,QACIA,oBACI,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,EAC3B,KAAK,EAAE;QACH,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;OAC9D,IAEA,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,CAChB,EACX;GACL;EAOO,MAAM,CAAC,IAAmC;IAC9C,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;GACjC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC9C,OAAO,IAAI,CAAC;KACf;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO,IAAI,CAAC;KACf;GACJ;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAC3C,OAAO;KACV;IAED,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE;MACrB,MAAM,IAAI,GAAGC,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;MAEzC,MAAM,KAAK,GAAGC,yBAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MAEhE,QACIF,wBACI,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;UACH,8BAA8B,EAAE,GAAG,KAAK,EAAE;SAC7C,GACH,EACJ;KACL;GACJ;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC/C,OAAO;KACV;IAED,OAAOA,kBAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,CAAC;GACrD;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;MACzB,OAAO;KACV;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAChB,QACIA,2BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACrB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GACpC,EACJ;KACL;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACvB,QACIA,2BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GAC9B,EACJ;KACL;GACJ;EAEO,uBAAuB;;IAE3B,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;;MAE/C,OAAO,CAAC,IAAI,CACR,sKAAsK,CACzK,CAAC;KACL;GACJ;;;;;MCtKQ,qBAAqB;;;;IAoCtB,yBAAoB,GAAG;MAC3B,OAAO,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACvC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAqC;MACzD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;yBA5BoC,YAAY;;EAS3C,MAAM;IACT,OAAO;MACHA,wBACI,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,IAE3BA,oBAAQ,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,oBAAoB,EAAE,CAAU,CACpD;KAChB,CAAC;GACL;EAWD,IAAY,iBAAiB;IACzB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;GACpE;EAEO,UAAU,CAAC,IAA8B;IAC7C,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;GACjC;;;;;;","names":["createRandomString","makeEnterClickable","removeEnterClickable","h","getIconName","getIconColor"],"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"],"version":3}