Feat/limel menu cascading items

src/components/menu-list/menu-list-renderer.tsx

@@ -1,6 +1,7 @@
 import { ListSeparator, MenuItem } from '../../interface';
 import { h } from '@stencil/core';
 import { MenuListRendererConfig } from './menu-list-renderer-config';
+import { isFunction } from 'lodash-es';
 
 export class MenuListRenderer {
     private defaultConfig: MenuListRendererConfig = {
@@ -139,6 +140,7 @@ export class MenuListRenderer {
             >
                 {item.icon ? this.renderIcon(this.config, item) : null}
                 {this.renderText(item)}
+                {this.renderSubMenuIcon(item)}
                 {this.renderNotification(item)}
                 {this.twoLines && this.avatarList ? this.renderDivider() : null}
             </li>
@@ -172,6 +174,14 @@ export class MenuListRenderer {
         );
     };
 
+    private renderSubMenuIcon = (item: MenuItem) => {
+        if (!this.hasSubItems(item)) {
+            return;
+        }
+
+        return <limel-icon class="sub-menu-icon" name="-lime-caret-right" />;
+    };
+
     private rendertext = (item: ListSeparator) => {
         if ('text' in item) {
             return <h2 class="limel-list-divider-title">{item.text}</h2>;
@@ -242,4 +252,11 @@ export class MenuListRenderer {
 
         return <hr class={classes} />;
     };
+
+    private hasSubItems = (item: MenuItem): boolean => {
+        return (
+            (Array.isArray(item.items) && item.items.length > 0) ||
+            isFunction(item.items)
+        );
+    };
 }

src/components/menu-list/menu-list.scss

@@ -39,3 +39,9 @@
 limel-badge {
     transform: translateX(0.75rem);
 }
+
+.sub-menu-icon {
+    width: 1rem;
+    transform: translateX(0.75rem);
+    flex-shrink: 0;
+}

src/components/menu/examples/menu-composite.tsx

@@ -1,3 +1,4 @@
+import { Components } from '@limetech/lime-elements';
 import { Component, h, Prop, State } from '@stencil/core';
 
 /**
@@ -40,7 +41,7 @@ export class MenuCompositeExample {
         open: false,
         openDirection: 'right',
         gridLayout: false,
-    };
+    } as Components.LimelMenu;
 
     private eventPrinter: HTMLLimelExampleEventPrinterElement;
 
@@ -54,17 +55,22 @@ export class MenuCompositeExample {
             },
         };
 
-        delete this.schema.properties.label;
+        delete this.schema.properties.selectedMenuItem;
+        delete this.schema.properties.searcher;
+        delete this.schema.properties.loadSubItems;
+        delete this.schema.properties.surfaceWidth;
     }
 
     public render() {
         console.log('Composite example schema:', this.schema);
 
         return [
             <limel-menu
-                items={this.props.items as any}
+                loading={this.props.loading}
+                items={this.props.items}
                 disabled={this.props.disabled}
-                openDirection={this.props.openDirection as any}
+                openDirection={this.props.openDirection}
+                surfaceWidth={this.props.surfaceWidth}
                 badgeIcons={this.props.badgeIcons}
                 open={this.props.open}
                 gridLayout={this.props.gridLayout}

src/components/menu/examples/menu-custom-navigation.scss

@@ -0,0 +1,7 @@
+:host(limel-example-menu-custom-navigation) {
+    display: flex;
+}
+
+limel-button {
+    padding-right: 2rem;
+}

src/components/menu/examples/menu-custom-navigation.tsx

@@ -0,0 +1,157 @@
+import {
+    MenuItem,
+    ListSeparator,
+    LimelMenuCustomEvent,
+} from '@limetech/lime-elements';
+import { Component, State, h, Host } from '@stencil/core';
+
+const ALL_ITEMS: Array<MenuItem | ListSeparator> = [
+    {
+        text: 'Format',
+        items: [
+            {
+                text: 'Bold',
+                icon: 'bold',
+            },
+            {
+                text: 'Italic',
+                icon: 'italic',
+            },
+            {
+                text: 'Lists',
+                icon: 'bulleted_list',
+                items: [
+                    {
+                        text: 'Numbered list',
+                        icon: 'numbered_list',
+                    },
+                    {
+                        text: 'Bullet list',
+                        icon: 'bulleted_list',
+                    },
+                    {
+                        text: 'Checklist',
+                        icon: 'todo_list',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        text: 'Edit',
+        items: [
+            {
+                text: 'Copy',
+                icon: 'copy',
+            },
+            {
+                text: 'Cut',
+                icon: 'cut',
+            },
+            {
+                text: 'Paste',
+                icon: 'paste',
+            },
+        ],
+    },
+];
+
+/**
+ * Customized navigation
+ *
+ * It is possible to open a menu at a certain point in the menu-hierarchy.
+ * This is done by using the parentItem property of the MenuItem class.
+ */
+@Component({
+    tag: 'limel-example-menu-custom-navigation',
+    shadow: true,
+    styleUrl: 'menu-custom-navigation.scss',
+})
+export class MenuSubItemsExample {
+    @State()
+    private items: Array<MenuItem | ListSeparator> = ALL_ITEMS;
+
+    @State()
+    private lastSelectedItem: string;
+
+    @State()
+    private selectedMenuItem: MenuItem;
+
+    @State()
+    private openMenu: boolean = false;
+
+    public render() {
+        return (
+            <Host>
+                {this.renderMenu()}
+                <limel-example-value
+                    label="Last selected item"
+                    value={this.lastSelectedItem}
+                />
+            </Host>
+        );
+    }
+
+    private renderMenu() {
+        return [
+            <limel-menu
+                items={this.items}
+                open={this.openMenu}
+                selectedMenuItem={this.selectedMenuItem}
+                onSelect={this.handleSelect}
+                onNavigateMenu={async (
+                    event: LimelMenuCustomEvent<MenuItem>
+                ) => {
+                    if (!event.detail) {
+                        this.items = ALL_ITEMS;
+                    }
+                }}
+                onCancel={() => {
+                    this.items = ALL_ITEMS;
+                    this.openMenu = false;
+                }}
+            >
+                <limel-button label="Menu" slot="trigger" />
+                <limel-button
+                    label="Shortcut to Lists"
+                    slot="trigger"
+                    primary={true}
+                    onClick={this.buttonClick}
+                />
+            </limel-menu>,
+        ];
+    }
+
+    private buttonClick = () => {
+        const selectedItem: MenuItem = {
+            text: 'Lists',
+            parentItem: ALL_ITEMS[0] as MenuItem,
+        };
+        const selectedItems: MenuItem[] = [
+            {
+                text: 'Numbered list',
+                icon: 'numbered_list',
+                parentItem: selectedItem,
+            },
+            {
+                text: 'Bullet list',
+                icon: 'bulleted_list',
+                parentItem: selectedItem,
+            },
+            {
+                text: 'Checklist',
+                icon: 'todo_list',
+                parentItem: selectedItem,
+            },
+        ];
+        this.selectedMenuItem = selectedItem;
+        this.items = selectedItems;
+        this.openMenu = true;
+    };
+
+    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {
+        this.selectedMenuItem = null;
+        this.lastSelectedItem = event.detail.text;
+        this.openMenu = false;
+    };
+}

src/components/menu/examples/menu-searchable.tsx

@@ -0,0 +1,104 @@
+import {
+    MenuItem,
+    ListSeparator,
+    LimelMenuCustomEvent,
+} from '@limetech/lime-elements';
+import { Component, State, h } from '@stencil/core';
+import { SearchMenuItems } from './subitems-search';
+
+/**
+ * Searchable items
+ * @link subitems-search.ts
+ */
+@Component({
+    tag: 'limel-example-menu-searchable',
+    shadow: true,
+})
+export class MenuSubItemsExample {
+    private items: Array<MenuItem | ListSeparator> = [
+        {
+            text: 'Format',
+            items: [
+                {
+                    text: 'Bold',
+                    icon: 'bold',
+                },
+                {
+                    text: 'Italic',
+                    icon: 'italic',
+                },
+                {
+                    text: 'Bullets and numbering',
+                    icon: 'bulleted_list',
+                    items: [
+                        {
+                            text: 'Numbered list',
+                            icon: 'numbered_list',
+                        },
+                        {
+                            text: 'Bullet list',
+                            icon: 'bulleted_list',
+                        },
+                        {
+                            text: 'Checklist',
+                            icon: 'todo_list',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            text: 'Edit',
+            items: [
+                {
+                    text: 'Copy',
+                    icon: 'copy',
+                },
+                {
+                    text: 'Cut',
+                    icon: 'cut',
+                },
+                { separator: true },
+                {
+                    text: 'Paste',
+                    icon: 'paste',
+                },
+            ],
+        },
+        {
+            text: 'Long sub list',
+            items: Array.from(Array(50), (_value, index) => {
+                return {
+                    text: `Item ${index + 1}`,
+                };
+            }),
+        },
+    ];
+
+    @State()
+    private lastSelectedItem: MenuItem;
+
+    public render() {
+        return [
+            <limel-menu
+                items={this.items}
+                searcher={this.handleSearch}
+                onSelect={this.handleSelect}
+            >
+                <limel-button label="Menu" slot="trigger" />
+            </limel-menu>,
+            <limel-example-value
+                label="Last selected item"
+                value={this.lastSelectedItem?.text ?? ''}
+            />,
+        ];
+    }
+
+    private handleSearch = async (queryString: string) => {
+        return SearchMenuItems(queryString, this.items);
+    };
+
+    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {
+        this.lastSelectedItem = event.detail;
+    };
+}