@limetech/lime-elements 37.1.0-next.64 → 37.1.0-next.66

package/dist/collection/components/list/list.css

@@ -888,13 +888,13 @@
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
-:host(limel-checkbox[invalid]) {
+:host(limel-checkbox[invalid]:not([invalid=false])),
+:host(limel-checkbox[invalid=true]) {
   --limel-h-l-grid-template-rows-transition-speed: 0.46s;
   --limel-h-l-grid-template-rows: 1fr;
 }
 
-:host(limel-checkbox),
-:host(limel-checkbox[invalid=false]) {
+:host(limel-checkbox) {
   --limel-h-l-grid-template-rows-transition-speed: 0.3s;
   --limel-h-l-grid-template-rows: 0fr;
 }
@@ -5338,13 +5338,13 @@ a.mdc-list-item {
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
-:host(limel-checkbox[invalid]) {
+:host(limel-checkbox[invalid]:not([invalid=false])),
+:host(limel-checkbox[invalid=true]) {
   --limel-h-l-grid-template-rows-transition-speed: 0.46s;
   --limel-h-l-grid-template-rows: 1fr;
 }
 
-:host(limel-checkbox),
-:host(limel-checkbox[invalid=false]) {
+:host(limel-checkbox) {
   --limel-h-l-grid-template-rows-transition-speed: 0.3s;
   --limel-h-l-grid-template-rows: 0fr;
 }

package/dist/collection/components/menu/menu.js

@@ -1,7 +1,7 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
-import { zipObject } from 'lodash-es';
+import { zipObject, isFunction } from 'lodash-es';
 import { ARROW_LEFT, ARROW_LEFT_KEY_CODE, ARROW_RIGHT, ARROW_RIGHT_KEY_CODE, } from '../../util/keycodes';
 /**
  * @slot trigger - Element to use as a trigger for the menu.
@@ -17,10 +17,25 @@ import { ARROW_LEFT, ARROW_LEFT_KEY_CODE, ARROW_RIGHT, ARROW_RIGHT_KEY_CODE, } f
  * @exampleComponent limel-example-menu-secondary-text
  * @exampleComponent limel-example-menu-notification
  * @exampleComponent limel-example-menu-sub-menus
+ * @exampleComponent limel-example-menu-sub-menu-lazy-loading
+ * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
  * @exampleComponent limel-example-menu-composite
  */
 export class Menu {
   constructor() {
+    this.renderLoader = () => {
+      if (!this.loadingSubItems && !this.loading) {
+        return;
+      }
+      const cssProperties = this.getCssProperties();
+      return (h("div", { style: {
+          width: cssProperties['--menu-surface-width'],
+          display: 'flex',
+          'align-items': 'center',
+          'justify-content': 'center',
+          padding: '0.5rem 0',
+        } }, h("limel-spinner", { size: "mini", limeBranded: false })));
+    };
     this.renderBreadcrumb = () => {
       var _a;
       if (!((_a = this.menuBreadCrumb) === null || _a === void 0 ? void 0 : _a.length)) {
@@ -35,12 +50,16 @@ export class Menu {
       if (!event.detail.menuItem) {
         this.currentSubMenu = null;
         this.navigateMenu.emit(null);
+        this.setFocus();
         return;
       }
       this.handleSelect(event.detail.menuItem);
     };
     this.renderMenuList = () => {
-      const items = this.visibleItems;
+      let items = this.visibleItems;
+      if (this.loadingSubItems || this.loading) {
+        items = [];
+      }
       return (h("limel-menu-list", { style: {
           'overflow-y': 'auto',
           'flex-grow': '1',
@@ -93,6 +112,7 @@ export class Menu {
         // No need to load a sub-menu.
         this.currentSubMenu = null;
         this.navigateMenu.emit(null);
+        this.setFocus();
         return;
       }
       this.handleSelect(parent);
@@ -125,18 +145,33 @@ export class Menu {
       }
       this.open = !this.open;
     };
-    this.handleSelect = (menuItem, selectOnEmptyChildren = true) => {
+    this.handleSelect = async (menuItem, selectOnEmptyChildren = true) => {
       if (Array.isArray(menuItem === null || menuItem === void 0 ? void 0 : menuItem.items) && menuItem.items.length > 0) {
         this.currentSubMenu = menuItem;
         this.navigateMenu.emit(menuItem);
+        this.setFocus();
         return;
       }
+      else if (isFunction(menuItem === null || menuItem === void 0 ? void 0 : menuItem.items)) {
+        const menuLoader = menuItem.items;
+        this.loadingSubItems = true;
+        const subItems = await menuLoader(menuItem);
+        menuItem.items = subItems;
+        this.loadingSubItems = false;
+        if (subItems === null || subItems === void 0 ? void 0 : subItems.length) {
+          this.currentSubMenu = menuItem;
+          this.navigateMenu.emit(menuItem);
+          this.setFocus();
+          return;
+        }
+      }
       if (!selectOnEmptyChildren) {
         return;
       }
       this.select.emit(menuItem);
       this.open = false;
       this.currentSubMenu = null;
+      this.setFocus();
     };
     this.onSelect = (event) => {
       event.stopPropagation();
@@ -161,8 +196,8 @@ export class Menu {
       }
       const activeElement = this.list.shadowRoot.activeElement;
       activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
-      const MenuItems = this.visibleItems.filter(this.isMenuItem);
-      const selectedIndex = Math.max(MenuItems.findIndex((item) => item.selected), 0);
+      const menuItems = this.visibleItems.filter(this.isMenuItem);
+      const selectedIndex = Math.max(menuItems.findIndex((item) => item.selected), 0);
       const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
       (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
@@ -182,7 +217,9 @@ export class Menu {
     this.open = false;
     this.badgeIcons = false;
     this.gridLayout = false;
+    this.loading = false;
     this.currentSubMenu = undefined;
+    this.loadingSubItems = undefined;
     this.menuBreadCrumb = [];
     this.portalId = createRandomString();
   }
@@ -196,7 +233,7 @@ export class Menu {
     const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
     return (h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--mdc-menu-min-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
         'has-grid-layout': this.gridLayout,
-      } }, this.renderBreadcrumb(), this.renderMenuList()))));
+      } }, this.renderBreadcrumb(), this.renderLoader(), this.renderMenuList()))));
   }
   itemsWatcher() {
     this.setFocus();
@@ -434,6 +471,27 @@ export class Menu {
         "reflect": true,
         "defaultValue": "false"
       },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ":::warning Internal Use Only\nThis property is for internal use only. We need it for now, but want to\nfind a better implementation of the functionality it currently enables.\nIf and when we do so, this property will be removed without prior\nnotice. If you use it, your code _will_ break in the future.\n:::"
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "currentSubMenu": {
         "type": "unknown",
         "mutable": true,
@@ -461,6 +519,7 @@ export class Menu {
   }
   static get states() {
     return {
+      "loadingSubItems": {},
       "menuBreadCrumb": {}
     };
   }

package/dist/collection/components/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable sonarjs/no-duplicate-string */\nimport {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Element,\n    Watch,\n    State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { LimelBreadcrumbsCustomEvent } from '@limetech/lime-elements';\n\nimport { BreadcrumbsItem } from '../breadcrumbs/breadcrumbs.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport { OpenDirection, MenuItem, SurfaceWidth } from './menu.types';\n\nimport {\n    ARROW_LEFT,\n    ARROW_LEFT_KEY_CODE,\n    ARROW_RIGHT,\n    ARROW_RIGHT_KEY_CODE,\n} from '../../util/keycodes';\n\ninterface MenuCrumbItem extends BreadcrumbsItem {\n    menuItem: MenuItem;\n}\n\n/**\n * @slot trigger - Element to use as a trigger for the menu.\n * @exampleComponent limel-example-menu-basic\n * @exampleComponent limel-example-menu-disabled\n * @exampleComponent limel-example-menu-open-direction\n * @exampleComponent limel-example-menu-surface-width\n * @exampleComponent limel-example-menu-separators\n * @exampleComponent limel-example-menu-icons\n * @exampleComponent limel-example-menu-badge-icons\n * @exampleComponent limel-example-menu-grid\n * @exampleComponent limel-example-menu-hotkeys\n * @exampleComponent limel-example-menu-secondary-text\n * @exampleComponent limel-example-menu-notification\n * @exampleComponent limel-example-menu-sub-menus\n * @exampleComponent limel-example-menu-composite\n */\n@Component({\n    tag: 'limel-menu',\n    shadow: true,\n    styleUrl: 'menu.scss',\n})\nexport class Menu {\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Sets the disabled state of the menu.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Decides the menu's location in relation to its trigger\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-start';\n\n    /**\n     * Decides the width of menu's dropdown\n     */\n    @Prop({ reflect: true })\n    public surfaceWidth: SurfaceWidth = 'inherit-from-items';\n\n    /**\n     * Sets the open state of the menu.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public open = false;\n\n    /**\n     * Defines whether the menu should show badges.\n     */\n    @Prop({ reflect: true })\n    public badgeIcons = false;\n\n    /**\n     * Renders list items in a grid layout, rather than a vertical list\n     */\n    @Prop({ reflect: true })\n    public gridLayout = false;\n\n    /**\n     * :::warning Internal Use Only\n     * This property is for internal use only. We need it for now, but want to\n     * find a better implementation of the functionality it currently enables.\n     * If and when we do so, this property will be removed without prior\n     * notice. If you use it, your code _will_ break in the future.\n     * :::\n     * @internal\n     */\n    @Prop({ mutable: true })\n    public currentSubMenu: MenuItem;\n\n    /**\n     * Is emitted when the menu is cancelled.\n     */\n    @Event()\n    public cancel: EventEmitter<void>;\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    /**\n     * Is emitted when a menu item with a sub-menu is selected.\n     */\n    @Event()\n    public navigateMenu: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelMenuElement;\n\n    @State()\n    private menuBreadCrumb: MenuCrumbItem[] = [];\n\n    private list: HTMLLimelMenuListElement;\n    private portalId: string;\n    private triggerElement: HTMLSlotElement;\n\n    constructor() {\n        this.portalId = createRandomString();\n    }\n\n    public componentDidRender() {\n        const slotElement = this.host.shadowRoot.querySelector('slot');\n        slotElement.assignedElements().forEach(this.setTriggerAttributes);\n    }\n\n    public render() {\n        const cssProperties = this.getCssProperties();\n\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index'\n        );\n\n        const menuSurfaceWidth = this.getMenuSurfaceWidth(\n            cssProperties['--menu-surface-width']\n        );\n\n        return (\n            <div class=\"mdc-menu-surface--anchor\" onClick={this.onTriggerClick}>\n                <slot ref={this.setTriggerRef} name=\"trigger\" />\n                {this.renderNotificationBadge()}\n                <limel-portal\n                    visible={this.open}\n                    containerId={this.portalId}\n                    openDirection={this.openDirection}\n                    position=\"absolute\"\n                    containerStyle={{ 'z-index': dropdownZIndex }}\n                >\n                    <limel-menu-surface\n                        open={this.open}\n                        onDismiss={this.onClose}\n                        style={{\n                            ...cssProperties,\n                            '--mdc-menu-min-width': menuSurfaceWidth,\n                            '--limel-menu-surface-display': 'flex',\n                            '--limel-menu-surface-flex-direction': 'column',\n                        }}\n                        class={{\n                            'has-grid-layout': this.gridLayout,\n                        }}\n                    >\n                        {this.renderBreadcrumb()}\n                        {this.renderMenuList()}\n                    </limel-menu-surface>\n                </limel-portal>\n            </div>\n        );\n    }\n\n    @Watch('items')\n    protected itemsWatcher() {\n        this.setFocus();\n    }\n\n    @Watch('open')\n    protected openWatcher(newValue: boolean) {\n        if (newValue) {\n            this.setFocus();\n        }\n    }\n\n    @Watch('currentSubMenu')\n    protected currentSubMenuWatcher() {\n        const breadCrumbItems: MenuCrumbItem[] = [];\n        let currentItem = this.currentSubMenu;\n        while (currentItem) {\n            breadCrumbItems.push({\n                text: currentItem.text,\n                icon: currentItem.icon,\n                menuItem: currentItem,\n            });\n            currentItem = currentItem.parentItem;\n        }\n\n        if (breadCrumbItems.length) {\n            breadCrumbItems.push({\n                text: '',\n                icon: {\n                    name: 'home',\n                },\n                type: 'icon-only',\n            } as MenuCrumbItem);\n        }\n\n        this.menuBreadCrumb = breadCrumbItems.reverse();\n    }\n\n    private renderBreadcrumb = () => {\n        if (!this.menuBreadCrumb?.length) {\n            return;\n        }\n\n        return (\n            <limel-breadcrumbs\n                style={{\n                    'border-bottom': 'solid 1px rgb(var(--contrast-500))',\n                    'flex-shrink': '0',\n                }}\n                onSelect={this.handleBreadcrumbsSelect}\n                items={this.menuBreadCrumb}\n            />\n        );\n    };\n\n    private handleBreadcrumbsSelect = (\n        event: LimelBreadcrumbsCustomEvent<MenuCrumbItem>\n    ) => {\n        if (!event.detail.menuItem) {\n            this.currentSubMenu = null;\n            this.navigateMenu.emit(null);\n\n            return;\n        }\n\n        this.handleSelect(event.detail.menuItem);\n    };\n\n    private renderMenuList = () => {\n        const items = this.visibleItems;\n\n        return (\n            <limel-menu-list\n                style={{\n                    'overflow-y': 'auto',\n                    'flex-grow': '1',\n                }}\n                class={{\n                    'has-grid-layout has-interactive-items': this.gridLayout,\n                }}\n                items={items}\n                type=\"menu\"\n                badgeIcons={this.badgeIcons}\n                onSelect={this.onSelect}\n                ref={this.setListElement}\n                onKeyDown={this.handleMenuKeyDown}\n            />\n        );\n    };\n\n    /**\n     * Key handler for the menu list\n     * Can go forward/back with righ/left arrow keys\n     * @param {KeyboardEvent} event event\n     * @returns {void}\n     */\n    private handleMenuKeyDown = (event: KeyboardEvent) => {\n        const isLeft =\n            event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;\n\n        const isRight =\n            event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;\n\n        if (!isLeft && !isRight) {\n            return;\n        }\n\n        if (!this.gridLayout) {\n            const currentItem = this.getCurrentItem();\n\n            event.stopPropagation();\n            event.preventDefault();\n            if (isRight) {\n                this.goForward(currentItem);\n            } else if (isLeft) {\n                this.goBack();\n            }\n        }\n    };\n\n    private getCurrentItem = (): MenuItem => {\n        const activeItem = this.list?.shadowRoot?.querySelector(\n            '[role=\"menuitem\"][tabindex=\"0\"]'\n        );\n        const attrIndex = activeItem?.attributes?.getNamedItem('data-index');\n        const dataIndex = parseInt(attrIndex?.value || '0', 10);\n\n        return this.visibleItems[dataIndex] as MenuItem;\n    };\n\n    private goForward = (currentItem: MenuItem) => {\n        this.handleSelect(currentItem, false);\n    };\n\n    private goBack = () => {\n        if (!this.currentSubMenu) {\n            // Already in the root of the menu\n            return;\n        }\n\n        const parent = this.currentSubMenu.parentItem;\n        if (!parent) {\n            // If only one step down, go to the root of the menu.\n            // No need to load a sub-menu.\n            this.currentSubMenu = null;\n            this.navigateMenu.emit(null);\n\n            return;\n        }\n\n        this.handleSelect(parent);\n    };\n\n    private setTriggerAttributes = (element: HTMLElement) => {\n        const attributes = {\n            'aria-haspopup': true,\n            'aria-expanded': this.open,\n            disabled: this.disabled,\n            role: 'button',\n        };\n\n        for (const [key, value] of Object.entries(attributes)) {\n            if (!value) {\n                element.removeAttribute(key);\n            } else {\n                element.setAttribute(key, String(value));\n            }\n        }\n    };\n\n    private onClose = () => {\n        this.cancel.emit();\n        this.open = false;\n        this.currentSubMenu = null;\n    };\n\n    private onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) {\n            return;\n        }\n\n        this.open = !this.open;\n    };\n\n    private handleSelect = (\n        menuItem: MenuItem,\n        selectOnEmptyChildren: boolean = true\n    ) => {\n        if (Array.isArray(menuItem?.items) && menuItem.items.length > 0) {\n            this.currentSubMenu = menuItem;\n            this.navigateMenu.emit(menuItem);\n\n            return;\n        }\n\n        if (!selectOnEmptyChildren) {\n            return;\n        }\n\n        this.select.emit(menuItem);\n        this.open = false;\n        this.currentSubMenu = null;\n    };\n\n    private onSelect = (event: CustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.handleSelect(event.detail);\n    };\n\n    private getCssProperties() {\n        const propertyNames = [\n            '--menu-surface-width',\n            '--list-grid-item-max-width',\n            '--list-grid-item-min-width',\n            '--list-grid-gap',\n            '--notification-badge-background-color',\n            '--notification-badge-text-color',\n        ] as const;\n        const style = getComputedStyle(this.host);\n        const values = propertyNames.map((property) => {\n            return style.getPropertyValue(property);\n        });\n\n        type PropName = (typeof propertyNames)[number];\n\n        return zipObject(propertyNames, values) as Record<PropName, string>;\n    }\n\n    private setListElement = (element: HTMLLimelMenuListElement) => {\n        this.list = element;\n    };\n\n    private setFocus = () => {\n        setTimeout(() => {\n            const observer = new IntersectionObserver(() => {\n                observer.unobserve(this.list);\n                this.focusMenuItem();\n            });\n            observer.observe(this.list);\n        }, 0);\n    };\n\n    private focusMenuItem = () => {\n        if (!this.list) {\n            return;\n        }\n\n        const activeElement = this.list.shadowRoot.activeElement as HTMLElement;\n        activeElement?.blur();\n\n        const MenuItems = this.visibleItems.filter(this.isMenuItem);\n        const selectedIndex = Math.max(\n            MenuItems.findIndex((item) => item.selected),\n            0\n        );\n        const menuElements: HTMLElement[] = Array.from(\n            this.list.shadowRoot.querySelectorAll('[role=\"menuitem\"]')\n        );\n        menuElements[selectedIndex]?.focus();\n    };\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n\n    private renderNotificationBadge = () => {\n        if (this.items.some(this.hasNotificationBadge)) {\n            return <limel-badge />;\n        }\n    };\n\n    private hasNotificationBadge = (item: MenuItem | ListSeparator) =>\n        this.isMenuItem(item) && item.badge !== undefined;\n\n    private setTriggerRef = (elm?: HTMLSlotElement) => {\n        this.triggerElement = elm;\n    };\n\n    private getMenuSurfaceWidth(customWidth: string): string {\n        if (customWidth) {\n            return customWidth;\n        }\n\n        if (this.surfaceWidth === 'inherit-from-trigger') {\n            const assignedTriggers = this.triggerElement?.assignedElements();\n\n            if (\n                !assignedTriggers?.length ||\n                !assignedTriggers[0]?.clientWidth\n            ) {\n                return '';\n            }\n\n            return `${assignedTriggers[0].clientWidth}px`;\n        } else if (this.surfaceWidth === 'inherit-from-menu') {\n            if (!this.host?.clientWidth) {\n                return '';\n            }\n\n            return `${this.host?.clientWidth}px`;\n        }\n\n        return '';\n    }\n\n    private get visibleItems(): Array<MenuItem | ListSeparator> {\n        if (Array.isArray(this.currentSubMenu?.items)) {\n            return this.currentSubMenu.items.map((item) => ({\n                ...item,\n                parentItem: this.currentSubMenu,\n            }));\n        }\n\n        return this.items;\n    }\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable sonarjs/no-duplicate-string */\nimport {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Element,\n    Watch,\n    State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject, isFunction } from 'lodash-es';\nimport { LimelBreadcrumbsCustomEvent } from '@limetech/lime-elements';\n\nimport { BreadcrumbsItem } from '../breadcrumbs/breadcrumbs.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport {\n    OpenDirection,\n    MenuItem,\n    MenuLoader,\n    SurfaceWidth,\n} from './menu.types';\n\nimport {\n    ARROW_LEFT,\n    ARROW_LEFT_KEY_CODE,\n    ARROW_RIGHT,\n    ARROW_RIGHT_KEY_CODE,\n} from '../../util/keycodes';\n\ninterface MenuCrumbItem extends BreadcrumbsItem {\n    menuItem: MenuItem;\n}\n\n/**\n * @slot trigger - Element to use as a trigger for the menu.\n * @exampleComponent limel-example-menu-basic\n * @exampleComponent limel-example-menu-disabled\n * @exampleComponent limel-example-menu-open-direction\n * @exampleComponent limel-example-menu-surface-width\n * @exampleComponent limel-example-menu-separators\n * @exampleComponent limel-example-menu-icons\n * @exampleComponent limel-example-menu-badge-icons\n * @exampleComponent limel-example-menu-grid\n * @exampleComponent limel-example-menu-hotkeys\n * @exampleComponent limel-example-menu-secondary-text\n * @exampleComponent limel-example-menu-notification\n * @exampleComponent limel-example-menu-sub-menus\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite\n * @exampleComponent limel-example-menu-composite\n */\n@Component({\n    tag: 'limel-menu',\n    shadow: true,\n    styleUrl: 'menu.scss',\n})\nexport class Menu {\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Sets the disabled state of the menu.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Decides the menu's location in relation to its trigger\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-start';\n\n    /**\n     * Decides the width of menu's dropdown\n     */\n    @Prop({ reflect: true })\n    public surfaceWidth: SurfaceWidth = 'inherit-from-items';\n\n    /**\n     * Sets the open state of the menu.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public open = false;\n\n    /**\n     * Defines whether the menu should show badges.\n     */\n    @Prop({ reflect: true })\n    public badgeIcons = false;\n\n    /**\n     * Renders list items in a grid layout, rather than a vertical list\n     */\n    @Prop({ reflect: true })\n    public gridLayout = false;\n\n    /**\n     * :::warning Internal Use Only\n     * This property is for internal use only. We need it for now, but want to\n     * find a better implementation of the functionality it currently enables.\n     * If and when we do so, this property will be removed without prior\n     * notice. If you use it, your code _will_ break in the future.\n     * :::\n     * @internal\n     */\n    @Prop({ reflect: true })\n    public loading = false;\n\n    /**\n     * :::warning Internal Use Only\n     * This property is for internal use only. We need it for now, but want to\n     * find a better implementation of the functionality it currently enables.\n     * If and when we do so, this property will be removed without prior\n     * notice. If you use it, your code _will_ break in the future.\n     * :::\n     * @internal\n     */\n    @Prop({ mutable: true })\n    public currentSubMenu: MenuItem;\n\n    /**\n     * Is emitted when the menu is cancelled.\n     */\n    @Event()\n    public cancel: EventEmitter<void>;\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    /**\n     * Is emitted when a menu item with a sub-menu is selected.\n     */\n    @Event()\n    public navigateMenu: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelMenuElement;\n\n    @State()\n    private loadingSubItems: boolean;\n\n    @State()\n    private menuBreadCrumb: MenuCrumbItem[] = [];\n\n    private list: HTMLLimelMenuListElement;\n    private portalId: string;\n    private triggerElement: HTMLSlotElement;\n\n    constructor() {\n        this.portalId = createRandomString();\n    }\n\n    public componentDidRender() {\n        const slotElement = this.host.shadowRoot.querySelector('slot');\n        slotElement.assignedElements().forEach(this.setTriggerAttributes);\n    }\n\n    public render() {\n        const cssProperties = this.getCssProperties();\n\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index'\n        );\n\n        const menuSurfaceWidth = this.getMenuSurfaceWidth(\n            cssProperties['--menu-surface-width']\n        );\n\n        return (\n            <div class=\"mdc-menu-surface--anchor\" onClick={this.onTriggerClick}>\n                <slot ref={this.setTriggerRef} name=\"trigger\" />\n                {this.renderNotificationBadge()}\n                <limel-portal\n                    visible={this.open}\n                    containerId={this.portalId}\n                    openDirection={this.openDirection}\n                    position=\"absolute\"\n                    containerStyle={{ 'z-index': dropdownZIndex }}\n                >\n                    <limel-menu-surface\n                        open={this.open}\n                        onDismiss={this.onClose}\n                        style={{\n                            ...cssProperties,\n                            '--mdc-menu-min-width': menuSurfaceWidth,\n                            '--limel-menu-surface-display': 'flex',\n                            '--limel-menu-surface-flex-direction': 'column',\n                        }}\n                        class={{\n                            'has-grid-layout': this.gridLayout,\n                        }}\n                    >\n                        {this.renderBreadcrumb()}\n                        {this.renderLoader()}\n                        {this.renderMenuList()}\n                    </limel-menu-surface>\n                </limel-portal>\n            </div>\n        );\n    }\n\n    @Watch('items')\n    protected itemsWatcher() {\n        this.setFocus();\n    }\n\n    @Watch('open')\n    protected openWatcher(newValue: boolean) {\n        if (newValue) {\n            this.setFocus();\n        }\n    }\n\n    @Watch('currentSubMenu')\n    protected currentSubMenuWatcher() {\n        const breadCrumbItems: MenuCrumbItem[] = [];\n        let currentItem = this.currentSubMenu;\n        while (currentItem) {\n            breadCrumbItems.push({\n                text: currentItem.text,\n                icon: currentItem.icon,\n                menuItem: currentItem,\n            });\n            currentItem = currentItem.parentItem;\n        }\n\n        if (breadCrumbItems.length) {\n            breadCrumbItems.push({\n                text: '',\n                icon: {\n                    name: 'home',\n                },\n                type: 'icon-only',\n            } as MenuCrumbItem);\n        }\n\n        this.menuBreadCrumb = breadCrumbItems.reverse();\n    }\n\n    private renderLoader = () => {\n        if (!this.loadingSubItems && !this.loading) {\n            return;\n        }\n\n        const cssProperties = this.getCssProperties();\n\n        return (\n            <div\n                style={{\n                    width: cssProperties['--menu-surface-width'],\n                    display: 'flex',\n                    'align-items': 'center',\n                    'justify-content': 'center',\n                    padding: '0.5rem 0',\n                }}\n            >\n                <limel-spinner size=\"mini\" limeBranded={false} />\n            </div>\n        );\n    };\n\n    private renderBreadcrumb = () => {\n        if (!this.menuBreadCrumb?.length) {\n            return;\n        }\n\n        return (\n            <limel-breadcrumbs\n                style={{\n                    'border-bottom': 'solid 1px rgb(var(--contrast-500))',\n                    'flex-shrink': '0',\n                }}\n                onSelect={this.handleBreadcrumbsSelect}\n                items={this.menuBreadCrumb}\n            />\n        );\n    };\n\n    private handleBreadcrumbsSelect = (\n        event: LimelBreadcrumbsCustomEvent<MenuCrumbItem>\n    ) => {\n        if (!event.detail.menuItem) {\n            this.currentSubMenu = null;\n            this.navigateMenu.emit(null);\n\n            this.setFocus();\n\n            return;\n        }\n\n        this.handleSelect(event.detail.menuItem);\n    };\n\n    private renderMenuList = () => {\n        let items = this.visibleItems;\n        if (this.loadingSubItems || this.loading) {\n            items = [];\n        }\n\n        return (\n            <limel-menu-list\n                style={{\n                    'overflow-y': 'auto',\n                    'flex-grow': '1',\n                }}\n                class={{\n                    'has-grid-layout has-interactive-items': this.gridLayout,\n                }}\n                items={items}\n                type=\"menu\"\n                badgeIcons={this.badgeIcons}\n                onSelect={this.onSelect}\n                ref={this.setListElement}\n                onKeyDown={this.handleMenuKeyDown}\n            />\n        );\n    };\n\n    /**\n     * Key handler for the menu list\n     * Can go forward/back with righ/left arrow keys\n     * @param {KeyboardEvent} event event\n     * @returns {void}\n     */\n    private handleMenuKeyDown = (event: KeyboardEvent) => {\n        const isLeft =\n            event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;\n\n        const isRight =\n            event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;\n\n        if (!isLeft && !isRight) {\n            return;\n        }\n\n        if (!this.gridLayout) {\n            const currentItem = this.getCurrentItem();\n\n            event.stopPropagation();\n            event.preventDefault();\n            if (isRight) {\n                this.goForward(currentItem);\n            } else if (isLeft) {\n                this.goBack();\n            }\n        }\n    };\n\n    private getCurrentItem = (): MenuItem => {\n        const activeItem = this.list?.shadowRoot?.querySelector(\n            '[role=\"menuitem\"][tabindex=\"0\"]'\n        );\n        const attrIndex = activeItem?.attributes?.getNamedItem('data-index');\n        const dataIndex = parseInt(attrIndex?.value || '0', 10);\n\n        return this.visibleItems[dataIndex] as MenuItem;\n    };\n\n    private goForward = (currentItem: MenuItem) => {\n        this.handleSelect(currentItem, false);\n    };\n\n    private goBack = () => {\n        if (!this.currentSubMenu) {\n            // Already in the root of the menu\n            return;\n        }\n\n        const parent = this.currentSubMenu.parentItem;\n        if (!parent) {\n            // If only one step down, go to the root of the menu.\n            // No need to load a sub-menu.\n            this.currentSubMenu = null;\n            this.navigateMenu.emit(null);\n\n            this.setFocus();\n\n            return;\n        }\n\n        this.handleSelect(parent);\n    };\n\n    private setTriggerAttributes = (element: HTMLElement) => {\n        const attributes = {\n            'aria-haspopup': true,\n            'aria-expanded': this.open,\n            disabled: this.disabled,\n            role: 'button',\n        };\n\n        for (const [key, value] of Object.entries(attributes)) {\n            if (!value) {\n                element.removeAttribute(key);\n            } else {\n                element.setAttribute(key, String(value));\n            }\n        }\n    };\n\n    private onClose = () => {\n        this.cancel.emit();\n        this.open = false;\n        this.currentSubMenu = null;\n    };\n\n    private onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) {\n            return;\n        }\n\n        this.open = !this.open;\n    };\n\n    private handleSelect = async (\n        menuItem: MenuItem,\n        selectOnEmptyChildren: boolean = true\n    ) => {\n        if (Array.isArray(menuItem?.items) && menuItem.items.length > 0) {\n            this.currentSubMenu = menuItem;\n            this.navigateMenu.emit(menuItem);\n\n            this.setFocus();\n\n            return;\n        } else if (isFunction(menuItem?.items)) {\n            const menuLoader = menuItem.items as MenuLoader;\n            this.loadingSubItems = true;\n            const subItems = await menuLoader(menuItem);\n            menuItem.items = subItems;\n            this.loadingSubItems = false;\n\n            if (subItems?.length) {\n                this.currentSubMenu = menuItem;\n                this.navigateMenu.emit(menuItem);\n\n                this.setFocus();\n\n                return;\n            }\n        }\n\n        if (!selectOnEmptyChildren) {\n            return;\n        }\n\n        this.select.emit(menuItem);\n        this.open = false;\n        this.currentSubMenu = null;\n        this.setFocus();\n    };\n\n    private onSelect = (event: CustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.handleSelect(event.detail);\n    };\n\n    private getCssProperties() {\n        const propertyNames = [\n            '--menu-surface-width',\n            '--list-grid-item-max-width',\n            '--list-grid-item-min-width',\n            '--list-grid-gap',\n            '--notification-badge-background-color',\n            '--notification-badge-text-color',\n        ] as const;\n        const style = getComputedStyle(this.host);\n        const values = propertyNames.map((property) => {\n            return style.getPropertyValue(property);\n        });\n\n        type PropName = (typeof propertyNames)[number];\n\n        return zipObject(propertyNames, values) as Record<PropName, string>;\n    }\n\n    private setListElement = (element: HTMLLimelMenuListElement) => {\n        this.list = element;\n    };\n\n    private setFocus = () => {\n        setTimeout(() => {\n            const observer = new IntersectionObserver(() => {\n                observer.unobserve(this.list);\n                this.focusMenuItem();\n            });\n            observer.observe(this.list);\n        }, 0);\n    };\n\n    private focusMenuItem = () => {\n        if (!this.list) {\n            return;\n        }\n\n        const activeElement = this.list.shadowRoot.activeElement as HTMLElement;\n        activeElement?.blur();\n\n        const menuItems = this.visibleItems.filter(this.isMenuItem);\n        const selectedIndex = Math.max(\n            menuItems.findIndex((item) => item.selected),\n            0\n        );\n        const menuElements: HTMLElement[] = Array.from(\n            this.list.shadowRoot.querySelectorAll('[role=\"menuitem\"]')\n        );\n        menuElements[selectedIndex]?.focus();\n    };\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n\n    private renderNotificationBadge = () => {\n        if (this.items.some(this.hasNotificationBadge)) {\n            return <limel-badge />;\n        }\n    };\n\n    private hasNotificationBadge = (item: MenuItem | ListSeparator) =>\n        this.isMenuItem(item) && item.badge !== undefined;\n\n    private setTriggerRef = (elm?: HTMLSlotElement) => {\n        this.triggerElement = elm;\n    };\n\n    private getMenuSurfaceWidth(customWidth: string): string {\n        if (customWidth) {\n            return customWidth;\n        }\n\n        if (this.surfaceWidth === 'inherit-from-trigger') {\n            const assignedTriggers = this.triggerElement?.assignedElements();\n\n            if (\n                !assignedTriggers?.length ||\n                !assignedTriggers[0]?.clientWidth\n            ) {\n                return '';\n            }\n\n            return `${assignedTriggers[0].clientWidth}px`;\n        } else if (this.surfaceWidth === 'inherit-from-menu') {\n            if (!this.host?.clientWidth) {\n                return '';\n            }\n\n            return `${this.host?.clientWidth}px`;\n        }\n\n        return '';\n    }\n\n    private get visibleItems(): Array<MenuItem | ListSeparator> {\n        if (Array.isArray(this.currentSubMenu?.items)) {\n            return this.currentSubMenu.items.map((item) => ({\n                ...item,\n                parentItem: this.currentSubMenu,\n            }));\n        }\n\n        return this.items;\n    }\n}\n"]}

package/dist/collection/components/menu/menu.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.types.js","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon, ListSeparator } from '../../interface';\n\nexport type OpenDirection =\n    | 'left-start'\n    | 'left'\n    | 'left-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom'\n    | 'bottom-end';\n\n/**\n * Any element in the UI can be configured to open a menu.\n * By default width of menu's dropdown is based on the items in the dropdown.\n * However, size of the dropdown menu that opens can be controlled\n * based on design requirements.\n * - `inherit-from-items`: This is the default layout in which the widest item\n * in the menu list sets the width of the dropdown menu.\n * - `inherit-from-trigger`: Width of the dropdown menu will as wide as the\n * width of the element that triggers the menu.\n * - `inherit-from-menu`: Width of the dropdown menu will be as wide as the\n * width of the `limel-menu` element itself. Useful when a menu surface needs\n * to be opened programmatically, without a visible UI element.\n */\nexport type SurfaceWidth =\n    | 'inherit-from-items'\n    | 'inherit-from-trigger'\n    | 'inherit-from-menu';\n\nexport interface MenuItem<T = any> {\n    /**\n     * The additional supporting text is used for shortcut commands and displayed in the menu item.\n     */\n    commandText?: string;\n\n    /**\n     * Text to display in the menu item.\n     */\n    text: string;\n\n    /**\n     * Additional supporting text to display in the menu item.\n     */\n    secondaryText?: string;\n\n    /**\n     * True if the menu item should be disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n\n    /**\n     * True if the menu item should be selected.\n     */\n    selected?: boolean;\n\n    /**\n     * If specified, will display a notification badge on the buttons in the dock.\n     */\n    badge?: number | string;\n\n    /**\n     * Value of the menu item.\n     */\n    value?: T;\n\n    /**\n     * A way of defining a sub-menu for an item.\n     * Set it to an array of `MenuItem`s\n     */\n    items?: Array<MenuItem<T> | ListSeparator> | MenuLoader;\n\n    /**\n     * :::warning Internal Use Only\n     * This property is for internal use only. We need it for now, but want to\n     * find a better implementation of the functionality it currently enables.\n     * If and when we do so, this property will be removed without prior\n     * notice. If you use it, your code _will_ break in the future.\n     * :::\n     * @internal\n     */\n    parentItem?: MenuItem;\n}\n\n/**\n * A loader function that takes a `MenuItem` as an argument, and returns\n * a promise that will eventually be resolved with an array of `MenuItem`:s,\n * that is the sub-menu of the given item.\n * @param {MenuItem} item The parent item to load the sub-menu for.\n * @returns {Promise<MenuItem[]>} The sub-menu's items of the given item\n * @internal\n */\nexport type MenuLoader = (\n    item: MenuItem\n) => Promise<Array<MenuItem | ListSeparator>>;\n"]}
+{"version":3,"file":"menu.types.js","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon, ListSeparator } from '../../interface';\n\nexport type OpenDirection =\n    | 'left-start'\n    | 'left'\n    | 'left-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom'\n    | 'bottom-end';\n\n/**\n * Any element in the UI can be configured to open a menu.\n * By default width of menu's dropdown is based on the items in the dropdown.\n * However, size of the dropdown menu that opens can be controlled\n * based on design requirements.\n * - `inherit-from-items`: This is the default layout in which the widest item\n * in the menu list sets the width of the dropdown menu.\n * - `inherit-from-trigger`: Width of the dropdown menu will as wide as the\n * width of the element that triggers the menu.\n * - `inherit-from-menu`: Width of the dropdown menu will be as wide as the\n * width of the `limel-menu` element itself. Useful when a menu surface needs\n * to be opened programmatically, without a visible UI element.\n */\nexport type SurfaceWidth =\n    | 'inherit-from-items'\n    | 'inherit-from-trigger'\n    | 'inherit-from-menu';\n\nexport interface MenuItem<T = any> {\n    /**\n     * The additional supporting text is used for shortcut commands and displayed in the menu item.\n     */\n    commandText?: string;\n\n    /**\n     * Text to display in the menu item.\n     */\n    text: string;\n\n    /**\n     * Additional supporting text to display in the menu item.\n     */\n    secondaryText?: string;\n\n    /**\n     * True if the menu item should be disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Name of the icon to use.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Background color of the icon. Overrides `--icon-background-color`.\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n\n    /**\n     * True if the menu item should be selected.\n     */\n    selected?: boolean;\n\n    /**\n     * If specified, will display a notification badge on the buttons in the dock.\n     */\n    badge?: number | string;\n\n    /**\n     * Value of the menu item.\n     */\n    value?: T;\n\n    /**\n     * A way of defining a sub-menu for an item.\n     *\n     * Either set it to an array of `MenuItem`:s or use lazy loading by setting\n     * it to a function of type `MenuLoader`.\n     * If `myMenuItem.items` is undefined or null, `myMenuItem` will be\n     * considered an item without a sub-menu.\n     */\n    items?: Array<MenuItem<T> | ListSeparator> | MenuLoader;\n\n    /**\n     * :::warning Internal Use Only\n     * This property is for internal use only. We need it for now, but want to\n     * find a better implementation of the functionality it currently enables.\n     * If and when we do so, this property will be removed without prior\n     * notice. If you use it, your code _will_ break in the future.\n     * :::\n     * @internal\n     */\n    parentItem?: MenuItem;\n}\n\n/**\n * A loader function that takes a `MenuItem` as an argument, and returns\n * a promise that will eventually be resolved with an array of `MenuItem`:s,\n * that is the sub-menu of the given item.\n * @param {MenuItem} item The parent item to load the sub-menu for.\n * @returns {Promise<MenuItem[]>} The sub-menu's items of the given item.\n */\nexport type MenuLoader = (\n    item: MenuItem\n) => Promise<Array<MenuItem | ListSeparator>>;\n"]}

package/dist/collection/components/menu-list/menu-list-renderer.js

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { getIconColor, getIconName } from '../icon/get-icon-props';
+import { isFunction } from 'lodash-es';
 export class MenuListRenderer {
   constructor() {
     this.defaultConfig = {
@@ -126,7 +127,8 @@ export class MenuListRenderer {
       return h("hr", { class: classes });
     };
     this.hasSubItems = (item) => {
-      return Array.isArray(item.items) && item.items.length > 0;
+      return ((Array.isArray(item.items) && item.items.length > 0) ||
+        isFunction(item.items));
     };
   }
   render(items, config = {}) {

package/dist/collection/components/menu-list/menu-list-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list-renderer.js","sourceRoot":"","sources":["../../../src/components/menu-list/menu-list-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListSeparator, MenuItem } from '../../interface';\nimport { h } from '@stencil/core';\nimport { MenuListRendererConfig } from './menu-list-renderer-config';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nexport class MenuListRenderer {\n    private defaultConfig: MenuListRendererConfig = {\n        isOpen: true,\n        badgeIcons: false,\n    };\n\n    private config: MenuListRendererConfig;\n\n    private hasIcons: boolean;\n    private twoLines: boolean;\n    private avatarList: boolean;\n    private commandKey: boolean;\n\n    private applyTabIndexToItemAtIndex: number;\n\n    public render(\n        items: Array<MenuItem | ListSeparator>,\n        config: MenuListRendererConfig = {}\n    ) {\n        items = items || [];\n        this.config = { ...this.defaultConfig, ...config };\n\n        this.twoLines = items.some((item) => {\n            return 'secondaryText' in item && !!item.secondaryText;\n        });\n\n        this.commandKey = items.some((item) => {\n            return 'commandText' in item && !!item.commandText;\n        });\n\n        this.hasIcons = items.some((item) => {\n            return 'icon' in item && !!item.icon;\n        });\n\n        this.avatarList = this.config.badgeIcons && this.hasIcons;\n\n        this.applyTabIndexToItemAtIndex =\n            this.getIndexForWhichToApplyTabIndex(items);\n\n        const classNames = {\n            'mdc-deprecated-list': true,\n            'mdc-deprecated-list--two-line': this.twoLines,\n            selectable: true,\n            'mdc-deprecated-list--avatar-list': this.avatarList,\n            'list--compact':\n                this.twoLines &&\n                this.commandKey &&\n                ['small', 'x-small'].includes(this.config.iconSize),\n        };\n\n        return (\n            <ul\n                class={classNames}\n                aria-hidden={true}\n                role=\"menu\"\n                aria-orientation=\"vertical\"\n                style={{ '--maxLinesSecondaryText': '2' }}\n            >\n                {items.map(this.renderMenuItem)}\n            </ul>\n        );\n    }\n\n    /**\n     * Determine which MenuItem should have the `tab-index` attribute set,\n     * and return the index at which that MenuItem is located in `items`.\n     * Returns `undefined` if no item should have the attribute set.\n     * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n     * @param {Array<MenuItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s\n     * @returns {number} the index as per the description\n     */\n    private getIndexForWhichToApplyTabIndex = (\n        items: Array<MenuItem | ListSeparator>\n    ) => {\n        let result;\n        for (let i = 0, max = items.length; i < max; i += 1) {\n            if ('separator' in items[i]) {\n                // Ignore ListSeparator\n            } else {\n                const item = items[i] as MenuItem<any>;\n                if (item.selected) {\n                    result = i;\n                    break;\n                }\n\n                if (result === undefined && !item.disabled) {\n                    result = i;\n                    // Do NOT break, as any later item with\n                    // `selected=true` should get the tab-index instead!\n                }\n            }\n        }\n\n        return result;\n    };\n\n    /**\n     * Render a single list item\n     * @param {MenuItem | ListSeparator} item the item to render\n     * @param {number} index the index the item had in the `items` array\n     * @returns {HTMLElement} the list item\n     */\n    private renderMenuItem = (\n        item: MenuItem | ListSeparator,\n        index: number\n    ) => {\n        if ('separator' in item) {\n            return (\n                <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n                    {this.rendertext(item)}\n                    <div class=\"limel-list-divider-line\" />\n                </li>\n            );\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item--selected': item.selected,\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                role=\"menuitem\"\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                aria-selected={item.selected ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {item.icon ? this.renderIcon(this.config, item) : null}\n                {this.renderText(item)}\n                {this.renderSubMenuIcon(item)}\n                {this.renderNotification(item)}\n                {this.twoLines && this.avatarList ? this.renderDivider() : null}\n            </li>\n        );\n    };\n\n    /**\n     * Render the text of the list item\n     * @param {MenuItem} item the list item\n     * @returns {HTMLElement | string} the text for the list item\n     */\n    private renderText = (item: MenuItem) => {\n        if (this.isSimpleItem(item)) {\n            return (\n                <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n            );\n        }\n\n        return (\n            <div class=\"mdc-deprecated-list-item__text\">\n                <div class=\"mdc-deprecated-list-item__primary-command-text\">\n                    <div class=\"mdc-deprecated-list-item__primary-text\">\n                        {item.text}\n                    </div>\n                    {this.renderCommandText(item)}\n                </div>\n                <div class=\"mdc-deprecated-list-item__secondary-text\">\n                    {item.secondaryText}\n                </div>\n            </div>\n        );\n    };\n\n    private renderSubMenuIcon = (item: MenuItem) => {\n        if (!this.hasSubItems(item)) {\n            return;\n        }\n\n        return <limel-icon class=\"sub-menu-icon\" name=\"-lime-caret-right\" />;\n    };\n\n    private rendertext = (item: ListSeparator) => {\n        if ('text' in item) {\n            return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n        }\n    };\n\n    private renderCommandText = (item: MenuItem) => {\n        if (!('commandText' in item)) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-deprecated-list-item__command-text\">\n                {item.commandText}\n            </div>\n        );\n    };\n\n    private isSimpleItem = (item: MenuItem): boolean => {\n        if ('commandText' in item) {\n            return false;\n        }\n\n        return !('secondaryText' in item);\n    };\n\n    /**\n     * Render an icon for a list item\n     * @param {MenuListRendererConfig} config the config object, passed on from the `renderMenuItem` function\n     * @param {MenuItem} item the list item\n     * @returns {HTMLElement} the icon element\n     */\n    private renderIcon = (config: MenuListRendererConfig, item: MenuItem) => {\n        const style: any = {};\n        const name = getIconName(item.icon);\n        const color = getIconColor(item.icon, item.iconColor);\n\n        if (color) {\n            if (config.badgeIcons) {\n                style['--icon-background-color'] = color;\n            } else {\n                style.color = color;\n            }\n        }\n\n        return (\n            <limel-icon\n                badge={config.badgeIcons}\n                class=\"mdc-deprecated-list-item__graphic\"\n                name={name}\n                style={style}\n                size={config.iconSize}\n            />\n        );\n    };\n\n    private renderNotification = (item: MenuItem) => {\n        if (item.badge !== undefined) {\n            return <limel-badge label={item.badge} />;\n        }\n    };\n\n    private renderDivider = () => {\n        const classes = {\n            'mdc-deprecated-list-divider': true,\n            'mdc-deprecated-list-divider--inset': true,\n        };\n        if (this.config.iconSize) {\n            classes[this.config.iconSize] = true;\n        }\n\n        return <hr class={classes} />;\n    };\n\n    private hasSubItems = (item: MenuItem): boolean => {\n        return Array.isArray(item.items) && item.items.length > 0;\n    };\n}\n"]}
+{"version":3,"file":"menu-list-renderer.js","sourceRoot":"","sources":["../../../src/components/menu-list/menu-list-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListSeparator, MenuItem } from '../../interface';\nimport { h } from '@stencil/core';\nimport { MenuListRendererConfig } from './menu-list-renderer-config';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\nimport { isFunction } from 'lodash-es';\n\nexport class MenuListRenderer {\n    private defaultConfig: MenuListRendererConfig = {\n        isOpen: true,\n        badgeIcons: false,\n    };\n\n    private config: MenuListRendererConfig;\n\n    private hasIcons: boolean;\n    private twoLines: boolean;\n    private avatarList: boolean;\n    private commandKey: boolean;\n\n    private applyTabIndexToItemAtIndex: number;\n\n    public render(\n        items: Array<MenuItem | ListSeparator>,\n        config: MenuListRendererConfig = {}\n    ) {\n        items = items || [];\n        this.config = { ...this.defaultConfig, ...config };\n\n        this.twoLines = items.some((item) => {\n            return 'secondaryText' in item && !!item.secondaryText;\n        });\n\n        this.commandKey = items.some((item) => {\n            return 'commandText' in item && !!item.commandText;\n        });\n\n        this.hasIcons = items.some((item) => {\n            return 'icon' in item && !!item.icon;\n        });\n\n        this.avatarList = this.config.badgeIcons && this.hasIcons;\n\n        this.applyTabIndexToItemAtIndex =\n            this.getIndexForWhichToApplyTabIndex(items);\n\n        const classNames = {\n            'mdc-deprecated-list': true,\n            'mdc-deprecated-list--two-line': this.twoLines,\n            selectable: true,\n            'mdc-deprecated-list--avatar-list': this.avatarList,\n            'list--compact':\n                this.twoLines &&\n                this.commandKey &&\n                ['small', 'x-small'].includes(this.config.iconSize),\n        };\n\n        return (\n            <ul\n                class={classNames}\n                aria-hidden={true}\n                role=\"menu\"\n                aria-orientation=\"vertical\"\n                style={{ '--maxLinesSecondaryText': '2' }}\n            >\n                {items.map(this.renderMenuItem)}\n            </ul>\n        );\n    }\n\n    /**\n     * Determine which MenuItem should have the `tab-index` attribute set,\n     * and return the index at which that MenuItem is located in `items`.\n     * Returns `undefined` if no item should have the attribute set.\n     * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n     * @param {Array<MenuItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s\n     * @returns {number} the index as per the description\n     */\n    private getIndexForWhichToApplyTabIndex = (\n        items: Array<MenuItem | ListSeparator>\n    ) => {\n        let result;\n        for (let i = 0, max = items.length; i < max; i += 1) {\n            if ('separator' in items[i]) {\n                // Ignore ListSeparator\n            } else {\n                const item = items[i] as MenuItem<any>;\n                if (item.selected) {\n                    result = i;\n                    break;\n                }\n\n                if (result === undefined && !item.disabled) {\n                    result = i;\n                    // Do NOT break, as any later item with\n                    // `selected=true` should get the tab-index instead!\n                }\n            }\n        }\n\n        return result;\n    };\n\n    /**\n     * Render a single list item\n     * @param {MenuItem | ListSeparator} item the item to render\n     * @param {number} index the index the item had in the `items` array\n     * @returns {HTMLElement} the list item\n     */\n    private renderMenuItem = (\n        item: MenuItem | ListSeparator,\n        index: number\n    ) => {\n        if ('separator' in item) {\n            return (\n                <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n                    {this.rendertext(item)}\n                    <div class=\"limel-list-divider-line\" />\n                </li>\n            );\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item--selected': item.selected,\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                role=\"menuitem\"\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                aria-selected={item.selected ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {item.icon ? this.renderIcon(this.config, item) : null}\n                {this.renderText(item)}\n                {this.renderSubMenuIcon(item)}\n                {this.renderNotification(item)}\n                {this.twoLines && this.avatarList ? this.renderDivider() : null}\n            </li>\n        );\n    };\n\n    /**\n     * Render the text of the list item\n     * @param {MenuItem} item the list item\n     * @returns {HTMLElement | string} the text for the list item\n     */\n    private renderText = (item: MenuItem) => {\n        if (this.isSimpleItem(item)) {\n            return (\n                <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n            );\n        }\n\n        return (\n            <div class=\"mdc-deprecated-list-item__text\">\n                <div class=\"mdc-deprecated-list-item__primary-command-text\">\n                    <div class=\"mdc-deprecated-list-item__primary-text\">\n                        {item.text}\n                    </div>\n                    {this.renderCommandText(item)}\n                </div>\n                <div class=\"mdc-deprecated-list-item__secondary-text\">\n                    {item.secondaryText}\n                </div>\n            </div>\n        );\n    };\n\n    private renderSubMenuIcon = (item: MenuItem) => {\n        if (!this.hasSubItems(item)) {\n            return;\n        }\n\n        return <limel-icon class=\"sub-menu-icon\" name=\"-lime-caret-right\" />;\n    };\n\n    private rendertext = (item: ListSeparator) => {\n        if ('text' in item) {\n            return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n        }\n    };\n\n    private renderCommandText = (item: MenuItem) => {\n        if (!('commandText' in item)) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-deprecated-list-item__command-text\">\n                {item.commandText}\n            </div>\n        );\n    };\n\n    private isSimpleItem = (item: MenuItem): boolean => {\n        if ('commandText' in item) {\n            return false;\n        }\n\n        return !('secondaryText' in item);\n    };\n\n    /**\n     * Render an icon for a list item\n     * @param {MenuListRendererConfig} config the config object, passed on from the `renderMenuItem` function\n     * @param {MenuItem} item the list item\n     * @returns {HTMLElement} the icon element\n     */\n    private renderIcon = (config: MenuListRendererConfig, item: MenuItem) => {\n        const style: any = {};\n        const name = getIconName(item.icon);\n        const color = getIconColor(item.icon, item.iconColor);\n\n        if (color) {\n            if (config.badgeIcons) {\n                style['--icon-background-color'] = color;\n            } else {\n                style.color = color;\n            }\n        }\n\n        return (\n            <limel-icon\n                badge={config.badgeIcons}\n                class=\"mdc-deprecated-list-item__graphic\"\n                name={name}\n                style={style}\n                size={config.iconSize}\n            />\n        );\n    };\n\n    private renderNotification = (item: MenuItem) => {\n        if (item.badge !== undefined) {\n            return <limel-badge label={item.badge} />;\n        }\n    };\n\n    private renderDivider = () => {\n        const classes = {\n            'mdc-deprecated-list-divider': true,\n            'mdc-deprecated-list-divider--inset': true,\n        };\n        if (this.config.iconSize) {\n            classes[this.config.iconSize] = true;\n        }\n\n        return <hr class={classes} />;\n    };\n\n    private hasSubItems = (item: MenuItem): boolean => {\n        return (\n            (Array.isArray(item.items) && item.items.length > 0) ||\n            isFunction(item.items)\n        );\n    };\n}\n"]}

package/dist/collection/components/menu-list/menu-list.css

@@ -958,13 +958,13 @@
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
-:host(limel-checkbox[invalid]) {
+:host(limel-checkbox[invalid]:not([invalid=false])),
+:host(limel-checkbox[invalid=true]) {
   --limel-h-l-grid-template-rows-transition-speed: 0.46s;
   --limel-h-l-grid-template-rows: 1fr;
 }
 
-:host(limel-checkbox),
-:host(limel-checkbox[invalid=false]) {
+:host(limel-checkbox) {
   --limel-h-l-grid-template-rows-transition-speed: 0.3s;
   --limel-h-l-grid-template-rows: 0fr;
 }
@@ -5412,13 +5412,13 @@ a.mdc-list-item {
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
-:host(limel-checkbox[invalid]) {
+:host(limel-checkbox[invalid]:not([invalid=false])),
+:host(limel-checkbox[invalid=true]) {
   --limel-h-l-grid-template-rows-transition-speed: 0.46s;
   --limel-h-l-grid-template-rows: 1fr;
 }
 
-:host(limel-checkbox),
-:host(limel-checkbox[invalid=false]) {
+:host(limel-checkbox) {
   --limel-h-l-grid-template-rows-transition-speed: 0.3s;
   --limel-h-l-grid-template-rows: 0fr;
 }

package/dist/collection/components/select/select.css

@@ -1815,13 +1815,13 @@ select.limel-select__native-control {
 :host(limel-select:focus),
 :host(limel-select:focus-visible),
 :host(limel-select:focus-within),
-:host(limel-select[invalid]) {
+:host(limel-select[invalid]:not([invalid=false])),
+:host(limel-select[invalid=true]) {
   --limel-h-l-grid-template-rows-transition-speed: 0.46s;
   --limel-h-l-grid-template-rows: 1fr;
 }
 
-:host(limel-select),
-:host(limel-select[invalid=false]) {
+:host(limel-select) {
   --limel-h-l-grid-template-rows-transition-speed: 0.3s;
   --limel-h-l-grid-template-rows: 0fr;
 }

package/dist/collection/components/slider/slider.css

@@ -951,13 +951,13 @@
 :host(limel-slider:focus),
 :host(limel-slider:focus-visible),
 :host(limel-slider:focus-within),
-:host(limel-slider[invalid]) {
+:host(limel-slider[invalid]:not([invalid=false])),
+:host(limel-slider[invalid=true]) {
   --limel-h-l-grid-template-rows-transition-speed: 0.46s;
   --limel-h-l-grid-template-rows: 1fr;
 }
 
-:host(limel-slider),
-:host(limel-slider[invalid=false]) {
+:host(limel-slider) {
   --limel-h-l-grid-template-rows-transition-speed: 0.3s;
   --limel-h-l-grid-template-rows: 0fr;
 }

package/dist/collection/components/switch/switch.css

@@ -901,13 +901,13 @@ label.disabled {
 :host(limel-switch:focus),
 :host(limel-switch:focus-visible),
 :host(limel-switch:focus-within),
-:host(limel-switch[invalid]) {
+:host(limel-switch[invalid]:not([invalid=false])),
+:host(limel-switch[invalid=true]) {
   --limel-h-l-grid-template-rows-transition-speed: 0.46s;
   --limel-h-l-grid-template-rows: 1fr;
 }
 
-:host(limel-switch),
-:host(limel-switch[invalid=false]) {
+:host(limel-switch) {
   --limel-h-l-grid-template-rows-transition-speed: 0.3s;
   --limel-h-l-grid-template-rows: 0fr;
 }

package/dist/collection/style/mixins.scss

@@ -255,13 +255,13 @@
     :host(#{$component-tag}:focus),
     :host(#{$component-tag}:focus-visible),
     :host(#{$component-tag}:focus-within),
-    :host(#{$component-tag}[invalid]) {
+    :host(#{$component-tag}[invalid]:not([invalid='false'])),
+    :host(#{$component-tag}[invalid='true']) {
         --limel-h-l-grid-template-rows-transition-speed: 0.46s;
         --limel-h-l-grid-template-rows: 1fr;
     }
 
-    :host(#{$component-tag}),
-    :host(#{$component-tag}[invalid='false']) {
+    :host(#{$component-tag}) {
         --limel-h-l-grid-template-rows-transition-speed: 0.3s;
         --limel-h-l-grid-template-rows: 0fr;
     }

package/dist/esm/lime-elements.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-split-button",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-file-viewer",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[8],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-markdown",[[1,"limel-markdown",{"value":[1]}]]],["limel-list",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-portal_3",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["limel-popover_2",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["limel-action-bar-item_2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-menu-surface",[[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-breadcrumbs_3",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"currentSubMenu":[1040],"menuBreadCrumb":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]]], options);
+  return bootstrapLazy([["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-split-button",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-file-viewer",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[8],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-markdown",[[1,"limel-markdown",{"value":[1]}]]],["limel-list",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-portal_3",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["limel-popover_2",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["limel-action-bar-item_2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-menu-surface",[[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-breadcrumbs_3",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"loadingSubItems":[32],"menuBreadCrumb":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]]], options);
 });
 
 //# sourceMappingURL=lime-elements.js.map