@limetech/lime-elements 38.39.1 → 38.39.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/{zipObject-fec9afa6.js → focus-trigger-element-7137b490.js} +35 -1
- package/dist/cjs/focus-trigger-element-7137b490.js.map +1 -0
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js +12 -3
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-popover_2.cjs.entry.js +25 -6
- package/dist/cjs/limel-popover_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-table.cjs.entry.js +14 -2
- package/dist/cjs/limel-table.cjs.entry.js.map +1 -1
- package/dist/collection/components/menu/menu.js +11 -1
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/collection/components/popover/popover.js +24 -4
- package/dist/collection/components/popover/popover.js.map +1 -1
- package/dist/collection/components/table/table.js +14 -2
- package/dist/collection/components/table/table.js.map +1 -1
- package/dist/collection/util/focus-trigger-element.js +33 -0
- package/dist/collection/util/focus-trigger-element.js.map +1 -0
- package/dist/esm/{zipObject-3ab93f37.js → focus-trigger-element-9701fced.js} +35 -2
- package/dist/esm/focus-trigger-element-9701fced.js.map +1 -0
- package/dist/esm/limel-breadcrumbs_7.entry.js +11 -2
- package/dist/esm/limel-breadcrumbs_7.entry.js.map +1 -1
- package/dist/esm/limel-popover_2.entry.js +24 -5
- package/dist/esm/limel-popover_2.entry.js.map +1 -1
- package/dist/esm/limel-table.entry.js +14 -2
- package/dist/esm/limel-table.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-6ef23925.entry.js +2 -0
- package/dist/lime-elements/p-6ef23925.entry.js.map +1 -0
- package/dist/lime-elements/{p-2bd3f381.entry.js → p-75926c24.entry.js} +2 -2
- package/dist/lime-elements/p-75926c24.entry.js.map +1 -0
- package/dist/lime-elements/p-e904b8b1.entry.js +266 -0
- package/dist/lime-elements/p-e904b8b1.entry.js.map +1 -0
- package/dist/lime-elements/p-fbabe9c1.js +2 -0
- package/dist/lime-elements/p-fbabe9c1.js.map +1 -0
- package/dist/types/components/menu/menu.d.ts +1 -0
- package/dist/types/components/popover/popover.d.ts +5 -0
- package/dist/types/util/focus-trigger-element.d.ts +10 -0
- package/package.json +1 -1
- package/dist/cjs/zipObject-fec9afa6.js.map +0 -1
- package/dist/esm/zipObject-3ab93f37.js.map +0 -1
- package/dist/lime-elements/p-147b0a68.entry.js +0 -2
- package/dist/lime-elements/p-147b0a68.entry.js.map +0 -1
- package/dist/lime-elements/p-19a9b96b.entry.js +0 -266
- package/dist/lime-elements/p-19a9b96b.entry.js.map +0 -1
- package/dist/lime-elements/p-2bd3f381.entry.js.map +0 -1
- package/dist/lime-elements/p-8576ce25.js +0 -2
- package/dist/lime-elements/p-8576ce25.js.map +0 -1
|
@@ -2,6 +2,7 @@ import { h, } from '@stencil/core';
|
|
|
2
2
|
import { createRandomString } from '../../util/random-string';
|
|
3
3
|
import { zipObject, isFunction } from 'lodash-es';
|
|
4
4
|
import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, TAB, } from '../../util/keycodes';
|
|
5
|
+
import { focusTriggerElement } from '../../util/focus-trigger-element';
|
|
5
6
|
const DEFAULT_ROOT_BREADCRUMBS_ITEM = {
|
|
6
7
|
text: '',
|
|
7
8
|
icon: {
|
|
@@ -288,6 +289,7 @@ export class Menu {
|
|
|
288
289
|
this.cancel.emit();
|
|
289
290
|
this.open = false;
|
|
290
291
|
this.currentSubMenu = null;
|
|
292
|
+
setTimeout(this.focusTrigger, 0);
|
|
291
293
|
};
|
|
292
294
|
this.onTriggerClick = (event) => {
|
|
293
295
|
event.stopPropagation();
|
|
@@ -331,7 +333,7 @@ export class Menu {
|
|
|
331
333
|
this.select.emit(menuItem);
|
|
332
334
|
this.open = false;
|
|
333
335
|
this.currentSubMenu = null;
|
|
334
|
-
this.
|
|
336
|
+
setTimeout(this.focusTrigger, 0);
|
|
335
337
|
};
|
|
336
338
|
this.onSelect = (event) => {
|
|
337
339
|
event.stopPropagation();
|
|
@@ -348,6 +350,9 @@ export class Menu {
|
|
|
348
350
|
};
|
|
349
351
|
this.setFocus = () => {
|
|
350
352
|
setTimeout(() => {
|
|
353
|
+
if (!this.open) {
|
|
354
|
+
return;
|
|
355
|
+
}
|
|
351
356
|
if (this.searchInput && this.searcher) {
|
|
352
357
|
const observer = new IntersectionObserver(() => {
|
|
353
358
|
observer.unobserve(this.searchInput);
|
|
@@ -367,6 +372,11 @@ export class Menu {
|
|
|
367
372
|
}
|
|
368
373
|
}, 0);
|
|
369
374
|
};
|
|
375
|
+
this.focusTrigger = () => {
|
|
376
|
+
var _a, _b;
|
|
377
|
+
const trigger = (_b = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.assignedElements()) === null || _b === void 0 ? void 0 : _b[0];
|
|
378
|
+
focusTriggerElement(trigger);
|
|
379
|
+
};
|
|
370
380
|
this.setSearchElement = (element) => {
|
|
371
381
|
this.searchInput = element;
|
|
372
382
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\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 {\n LimelBreadcrumbsCustomEvent,\n LimelInputFieldCustomEvent,\n} from '../../components';\n\nimport { BreadcrumbsItem } from '../breadcrumbs/breadcrumbs.types';\nimport { ListSeparator } from '../list-item/list-item.types';\nimport {\n OpenDirection,\n MenuItem,\n MenuLoader,\n SurfaceWidth,\n MenuSearcher,\n} from './menu.types';\n\nimport {\n ARROW_DOWN,\n ARROW_LEFT,\n ARROW_RIGHT,\n ARROW_UP,\n TAB,\n} from '../../util/keycodes';\n\ninterface MenuCrumbItem extends BreadcrumbsItem {\n menuItem?: MenuItem;\n}\n\nconst DEFAULT_ROOT_BREADCRUMBS_ITEM: BreadcrumbsItem = {\n text: '',\n icon: {\n name: 'home',\n },\n type: 'icon-only',\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-searchable\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 *\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 *\n * @internal\n */\n @Prop({ mutable: true })\n public currentSubMenu: MenuItem;\n\n /**\n * A root breadcrumb item to show above the menu items.\n * Clicking it navigates back from a sub-menu to the root menu.\n */\n @Prop()\n public rootItem: BreadcrumbsItem = DEFAULT_ROOT_BREADCRUMBS_ITEM;\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 * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `MenuItem`:s.\n *\n * See the docs for the type `MenuSearcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: MenuSearcher;\n\n /**\n * Placeholder text for the search input field.\n */\n @Prop()\n public searchPlaceholder?: string;\n\n /**\n * Message to display when search returns 0 results.\n */\n @Prop()\n public emptyResultMessage?: string;\n\n /**\n * Is emitted when a menu item with a sub-menu is selected.\n */\n @Event()\n public navigateMenu: EventEmitter<MenuItem | null>;\n\n @Element()\n private host: HTMLLimelMenuElement;\n\n @State()\n private loadingSubItems: boolean;\n\n @State()\n private searchValue: string;\n\n @State()\n private searchResults: Array<MenuItem | ListSeparator> | null;\n\n private list: HTMLLimelMenuListElement;\n private searchInput: HTMLLimelInputFieldElement;\n private portalId: string;\n private breadcrumbs: HTMLLimelBreadcrumbsElement;\n private triggerElement: HTMLSlotElement;\n private selectedMenuItem?: MenuItem;\n\n constructor() {\n this.portalId = createRandomString();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n // eslint-disable-next-line unicorn/no-array-for-each\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 '--menu-surface-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.renderSearchField()}\n {this.renderBreadcrumb()}\n {this.renderLoader()}\n {this.renderEmptyMessage()}\n {this.renderMenuList()}\n </limel-menu-surface>\n </limel-portal>\n </div>\n );\n }\n\n @Watch('items')\n protected itemsWatcher() {\n this.clearSearch();\n this.setFocus();\n }\n\n @Watch('open')\n protected openWatcher(newValue: boolean) {\n const opened = newValue;\n if (opened) {\n this.setFocus();\n } else {\n this.clearSearch();\n }\n }\n\n private getBreadcrumbsItems() {\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 (\n breadCrumbItems.length > 0 ||\n this.rootItem !== DEFAULT_ROOT_BREADCRUMBS_ITEM\n ) {\n breadCrumbItems.push(this.rootItem);\n }\n\n return breadCrumbItems.reverse();\n }\n\n private readonly 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 readonly renderBreadcrumb = () => {\n const breadcrumbsItems = this.getBreadcrumbsItems();\n if (breadcrumbsItems.length === 0) {\n return;\n }\n\n return (\n <limel-breadcrumbs\n ref={this.setBreadcrumbsElement}\n style={{\n 'border-bottom': 'solid 1px rgb(var(--contrast-500))',\n 'flex-shrink': '0',\n }}\n onSelect={this.handleBreadcrumbsSelect}\n onKeyDown={this.handleBreadcrumbsKeyDown}\n items={breadcrumbsItems}\n />\n );\n };\n\n private handleBreadcrumbsSelect = (\n event: LimelBreadcrumbsCustomEvent<MenuCrumbItem>\n ) => {\n if (!event.detail.menuItem) {\n this.currentSubMenu = null;\n this.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(event.detail.menuItem);\n };\n\n private readonly renderSearchField = () => {\n if (!this.searcher) {\n return;\n }\n\n return (\n <limel-input-field\n tabindex=\"0\"\n ref={this.setSearchElement}\n placeholder={this.searchPlaceholder}\n type=\"search\"\n leadingIcon=\"search\"\n style={{\n padding: '0.25rem',\n 'box-sizing': 'border-box',\n }}\n value={this.searchValue}\n onChange={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n />\n );\n };\n\n private readonly renderEmptyMessage = () => {\n if (\n this.loading ||\n this.loadingSubItems ||\n !this.emptyResultMessage ||\n !Array.isArray(this.searchResults) ||\n this.searchResults?.length\n ) {\n return null;\n }\n\n return (\n <p\n style={{\n padding: '0 1rem',\n 'text-align': 'center',\n }}\n >\n {this.emptyResultMessage}\n </p>\n );\n };\n\n private readonly renderMenuList = () => {\n let items = this.visibleItems;\n\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 badgeIcons={this.badgeIcons}\n onSelect={this.onSelect}\n ref={this.setListElement}\n onKeyDown={this.handleMenuKeyDown}\n />\n );\n };\n\n private readonly handleTextInput = async (\n event: LimelInputFieldCustomEvent<string>\n ) => {\n event.stopPropagation();\n\n const query = event.detail;\n this.searchValue = query;\n if (query === '') {\n this.searchResults = null;\n this.loadingSubItems = false;\n\n return;\n }\n\n this.loadingSubItems = true;\n\n const result = await this.searcher(query);\n\n if (this.searchValue !== query) {\n return;\n }\n\n this.searchResults = result;\n this.loadingSubItems = false;\n };\n\n // Key handler for the input search field\n // Will change focus to breadcrumbs (if present) or the first/last item\n // in the dropdown list to enable selection with the keyboard\n private readonly handleInputKeyDown = (event: KeyboardEvent) => {\n const isForwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n if (this.focusBreadcrumbs()) {\n return;\n }\n\n this.focusFirstListItem();\n\n return;\n }\n\n if (isUp) {\n // Focus the last list item (wrapping behavior)\n this.focusLastListItem();\n }\n };\n\n // Key handler for the menu list (capture phase)\n // Handles Up arrow on first item and Down arrow on last item\n // Must run in capture phase to intercept before MDC Menu wraps focus\n // Only intercepts when there's a search input or breadcrumbs to navigate to\n private readonly handleListKeyDownCapture = (event: KeyboardEvent) => {\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isUp && !isDown) {\n return;\n }\n\n // Up on first item: go to breadcrumbs or search input (if they exist)\n if (isUp && this.isFirstListItemFocused()) {\n // Try to focus breadcrumbs first\n if (this.focusBreadcrumbs()) {\n event.stopPropagation();\n event.preventDefault();\n\n return;\n }\n\n // Then try search input\n if (this.searchInput) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput.focus();\n }\n\n // If neither exists, let MDC Menu handle wrap-around\n return;\n }\n\n // Down on last item: go to search input (if it exists)\n if (isDown && this.isLastListItemFocused() && this.searchInput) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput.focus();\n }\n\n // If no search input, let MDC Menu handle wrap-around\n };\n\n // Key handler for the menu list (bubble phase)\n // Will change focus to the search field if using shift+tab\n // And can go forward/back with right/left arrow keys\n private readonly handleMenuKeyDown = (event: KeyboardEvent) => {\n const isBackwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n event.shiftKey;\n\n const isLeft = event.key === ARROW_LEFT;\n const isRight = event.key === ARROW_RIGHT;\n\n if (!isBackwardTab && !isLeft && !isRight) {\n return;\n }\n\n if (isBackwardTab) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput?.focus();\n\n return;\n }\n\n if (!this.gridLayout && (isLeft || isRight)) {\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 // Key handler for breadcrumbs\n // Up arrow: focus search input\n // Down arrow: focus first list item\n private readonly handleBreadcrumbsKeyDown = (event: KeyboardEvent) => {\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isUp && !isDown) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n if (isUp) {\n this.searchInput?.focus();\n\n return;\n }\n\n if (isDown) {\n this.focusFirstListItem();\n }\n };\n\n private readonly clearSearch = () => {\n this.searchValue = '';\n this.searchResults = null;\n this.loadingSubItems = false;\n };\n\n private readonly getCurrentItem = (): MenuItem => {\n let menuElement =\n (this.list?.shadowRoot?.activeElement as HTMLElement | null) ??\n null;\n\n if (menuElement && menuElement.getAttribute('role') !== 'menuitem') {\n menuElement = menuElement.closest<HTMLElement>('[role=\"menuitem\"]');\n }\n\n if (!menuElement) {\n menuElement = this.list?.shadowRoot?.querySelector<HTMLElement>(\n '[role=\"menuitem\"][tabindex=\"0\"]'\n );\n }\n\n const dataIndex = Number.parseInt(\n menuElement?.dataset.index ?? '0',\n 10\n );\n\n const item = this.visibleItems[dataIndex];\n\n return (item ?? this.visibleItems[0]) as MenuItem;\n };\n\n private readonly goForward = (currentItem: MenuItem) => {\n this.handleSelect(currentItem, false);\n };\n\n private readonly 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.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(parent);\n };\n\n private readonly setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n disabled: this.disabled,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (value) {\n element.setAttribute(key, String(value));\n } else {\n element.removeAttribute(key);\n }\n }\n };\n\n private readonly onClose = () => {\n this.cancel.emit();\n this.open = false;\n this.currentSubMenu = null;\n };\n\n private readonly onTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) {\n return;\n }\n\n this.open = !this.open;\n };\n\n private readonly handleSelect = async (\n menuItem: MenuItem,\n selectOnEmptyChildren: boolean = true\n ) => {\n if (Array.isArray(menuItem?.items) && menuItem.items.length > 0) {\n this.selectedMenuItem = menuItem;\n this.clearSearch();\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.selectedMenuItem = menuItem;\n this.loadingSubItems = true;\n const subItems = await menuLoader(menuItem);\n\n if (this.selectedMenuItem !== menuItem) {\n return;\n }\n\n menuItem.items = subItems;\n this.loadingSubItems = false;\n\n if (subItems?.length) {\n this.currentSubMenu = menuItem;\n this.clearSearch();\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n }\n }\n\n if (!selectOnEmptyChildren) {\n return;\n }\n\n this.selectedMenuItem = menuItem;\n this.loadingSubItems = false;\n\n this.select.emit(menuItem);\n this.open = false;\n this.currentSubMenu = null;\n this.setFocus();\n };\n\n private readonly 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 readonly setListElement = (element: HTMLLimelMenuListElement) => {\n if (this.list) {\n this.list.removeEventListener(\n 'keydown',\n this.handleListKeyDownCapture,\n true\n );\n }\n\n this.list = element;\n\n if (this.list) {\n this.list.addEventListener(\n 'keydown',\n this.handleListKeyDownCapture,\n true\n );\n }\n };\n\n private readonly setFocus = () => {\n setTimeout(() => {\n if (this.searchInput && this.searcher) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.searchInput);\n if (this.searchInput === window.document.activeElement) {\n return;\n }\n\n this.searchInput.focus();\n });\n observer.observe(this.searchInput);\n } else if (this.list) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.list);\n this.focusMenuItem();\n });\n observer.observe(this.list);\n }\n }, 0);\n };\n\n private readonly setSearchElement = (\n element: HTMLLimelInputFieldElement\n ) => {\n this.searchInput = element;\n };\n\n private readonly setBreadcrumbsElement = (\n element: HTMLLimelBreadcrumbsElement\n ) => {\n this.breadcrumbs = element;\n };\n\n /**\n * Focuses the first focusable element inside breadcrumbs.\n * Returns true if breadcrumbs exist and were focused,\n * false otherwise.\n */\n private readonly focusBreadcrumbs = (): boolean => {\n if (!this.breadcrumbs) {\n return false;\n }\n\n const focusableElement =\n this.breadcrumbs.shadowRoot?.querySelector<HTMLElement>(\n 'button, a'\n );\n if (focusableElement) {\n focusableElement.focus();\n\n return true;\n }\n\n return false;\n };\n\n private readonly focusFirstListItem = () => {\n const listItems = this.getListItems();\n const firstItem = listItems?.[0];\n firstItem?.focus();\n };\n\n private readonly focusLastListItem = () => {\n const listItems = this.getListItems();\n const lastItem = listItems?.at(-1);\n lastItem?.focus();\n };\n\n private readonly isFirstListItemFocused = (): boolean => {\n const listItems = this.getListItems();\n if (!listItems) {\n return false;\n }\n\n const firstItem = listItems[0];\n const activeElement = this.list.shadowRoot?.activeElement;\n\n return firstItem === activeElement;\n };\n\n private readonly isLastListItemFocused = (): boolean => {\n const listItems = this.getListItems();\n if (!listItems) {\n return false;\n }\n\n const lastItem = listItems.at(-1);\n const activeElement = this.list.shadowRoot?.activeElement;\n\n return lastItem === activeElement;\n };\n\n private readonly getListItems = (): HTMLElement[] | null => {\n if (!this.list) {\n return null;\n }\n\n const items = this.list.shadowRoot?.querySelectorAll<HTMLElement>(\n '.mdc-deprecated-list-item'\n );\n\n if (!items?.length) {\n return null;\n }\n\n return [...items];\n };\n\n private readonly 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[] = [\n ...this.list.shadowRoot.querySelectorAll('[role=\"menuitem\"]'),\n ] as HTMLElement[];\n menuElements[selectedIndex]?.focus();\n };\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n\n private readonly renderNotificationBadge = () => {\n if (this.items.some(this.hasNotificationBadge)) {\n return <limel-badge />;\n }\n };\n\n private readonly hasNotificationBadge = (item: MenuItem | ListSeparator) =>\n this.isMenuItem(item) && item.badge !== undefined;\n\n private readonly 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.searchResults) && this.searchValue) {\n return this.searchResults;\n } else 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"]}
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAgBlD,OAAO,EACH,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,EACR,GAAG,GACN,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAMvE,MAAM,6BAA6B,GAAoB;EACnD,IAAI,EAAE,EAAE;EACR,IAAI,EAAE;IACF,IAAI,EAAE,MAAM;GACf;EACD,IAAI,EAAE,WAAW;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AAMH,MAAM,OAAO,IAAI;EAwIb;IA8FiB,iBAAY,GAAG,GAAG,EAAE;MACjC,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACxC,OAAO;OACV;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;MAE9C,OAAO,CACH,WACI,KAAK,EAAE;UACH,KAAK,EAAE,aAAa,CAAC,sBAAsB,CAAC;UAC5C,OAAO,EAAE,MAAM;UACf,aAAa,EAAE,QAAQ;UACvB,iBAAiB,EAAE,QAAQ;UAC3B,OAAO,EAAE,UAAU;SACtB;QAED,qBAAe,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,GAAI,CAC/C,CACT,CAAC;IACN,CAAC,CAAC;IAEe,qBAAgB,GAAG,GAAG,EAAE;MACrC,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;MACpD,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;QAC/B,OAAO;OACV;MAED,OAAO,CACH,yBACI,GAAG,EAAE,IAAI,CAAC,qBAAqB,EAC/B,KAAK,EAAE;UACH,eAAe,EAAE,oCAAoC;UACrD,aAAa,EAAE,GAAG;SACrB,EACD,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EACtC,SAAS,EAAE,IAAI,CAAC,wBAAwB,EACxC,KAAK,EAAE,gBAAgB,GACzB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,4BAAuB,GAAG,CAC9B,KAAiD,EACnD,EAAE;MACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE;QACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,OAAO;OACV;MAED,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEe,sBAAiB,GAAG,GAAG,EAAE;MACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAChB,OAAO;OACV;MAED,OAAO,CACH,yBACI,QAAQ,EAAC,GAAG,EACZ,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE;UACH,OAAO,EAAE,SAAS;UAClB,YAAY,EAAE,YAAY;SAC7B,EACD,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,eAAe,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,GACpC,CACL,CAAC;IACN,CAAC,CAAC;IAEe,uBAAkB,GAAG,GAAG,EAAE;;MACvC,IACI,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,eAAe;QACpB,CAAC,IAAI,CAAC,kBAAkB;QACxB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;SAClC,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,CAAA,EAC5B;QACE,OAAO,IAAI,CAAC;OACf;MAED,OAAO,CACH,SACI,KAAK,EAAE;UACH,OAAO,EAAE,QAAQ;UACjB,YAAY,EAAE,QAAQ;SACzB,IAEA,IAAI,CAAC,kBAAkB,CACxB,CACP,CAAC;IACN,CAAC,CAAC;IAEe,mBAAc,GAAG,GAAG,EAAE;MACnC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;MAE9B,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,OAAO,EAAE;QACtC,KAAK,GAAG,EAAE,CAAC;OACd;MAED,OAAO,CACH,uBACI,KAAK,EAAE;UACH,YAAY,EAAE,MAAM;UACpB,WAAW,EAAE,GAAG;SACnB,EACD,KAAK,EAAE;UACH,uCAAuC,EAAE,IAAI,CAAC,UAAU;SAC3D,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,cAAc,EACxB,SAAS,EAAE,IAAI,CAAC,iBAAiB,GACnC,CACL,CAAC;IACN,CAAC,CAAC;IAEe,oBAAe,GAAG,KAAK,EACpC,KAAyC,EAC3C,EAAE;MACA,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;MAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,IAAI,KAAK,KAAK,EAAE,EAAE;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAE7B,OAAO;OACV;MAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;MAE5B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;MAE1C,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;QAC5B,OAAO;OACV;MAED,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;MAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC,CAAC;IAEF,yCAAyC;IACzC,uEAAuE;IACvE,6DAA6D;IAC5C,uBAAkB,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC3D,MAAM,YAAY,GACd,KAAK,CAAC,GAAG,KAAK,GAAG;QACjB,CAAC,KAAK,CAAC,MAAM;QACb,CAAC,KAAK,CAAC,OAAO;QACd,CAAC,KAAK,CAAC,QAAQ,CAAC;MACpB,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC;MACpC,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC;MAExC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;QACnC,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MAEvB,IAAI,YAAY,IAAI,MAAM,EAAE;QACxB,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;UACzB,OAAO;SACV;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,OAAO;OACV;MAED,IAAI,IAAI,EAAE;QACN,+CAA+C;QAC/C,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC5B;IACL,CAAC,CAAC;IAEF,gDAAgD;IAChD,6DAA6D;IAC7D,qEAAqE;IACrE,4EAA4E;IAC3D,6BAAwB,GAAG,CAAC,KAAoB,EAAE,EAAE;MACjE,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC;MACpC,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC;MAExC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;QAClB,OAAO;OACV;MAED,sEAAsE;MACtE,IAAI,IAAI,IAAI,IAAI,CAAC,sBAAsB,EAAE,EAAE;QACvC,iCAAiC;QACjC,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;UACzB,KAAK,CAAC,eAAe,EAAE,CAAC;UACxB,KAAK,CAAC,cAAc,EAAE,CAAC;UAEvB,OAAO;SACV;QAED,wBAAwB;QACxB,IAAI,IAAI,CAAC,WAAW,EAAE;UAClB,KAAK,CAAC,eAAe,EAAE,CAAC;UACxB,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;SAC5B;QAED,qDAAqD;QACrD,OAAO;OACV;MAED,uDAAuD;MACvD,IAAI,MAAM,IAAI,IAAI,CAAC,qBAAqB,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE;QAC5D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;OAC5B;MAED,sDAAsD;IAC1D,CAAC,CAAC;IAEF,+CAA+C;IAC/C,2DAA2D;IAC3D,qDAAqD;IACpC,sBAAiB,GAAG,CAAC,KAAoB,EAAE,EAAE;;MAC1D,MAAM,aAAa,GACf,KAAK,CAAC,GAAG,KAAK,GAAG;QACjB,CAAC,KAAK,CAAC,MAAM;QACb,CAAC,KAAK,CAAC,OAAO;QACd,KAAK,CAAC,QAAQ,CAAC;MAEnB,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC;MACxC,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;MAE1C,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO;OACV;MAED,IAAI,aAAa,EAAE;QACf,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;QAE1B,OAAO;OACV;MAED,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,EAAE;QACzC,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,OAAO,EAAE;UACT,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;SAC/B;aAAM,IAAI,MAAM,EAAE;UACf,IAAI,CAAC,MAAM,EAAE,CAAC;SACjB;OACJ;IACL,CAAC,CAAC;IAEF,8BAA8B;IAC9B,+BAA+B;IAC/B,oCAAoC;IACnB,6BAAwB,GAAG,CAAC,KAAoB,EAAE,EAAE;;MACjE,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC;MACpC,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC;MAExC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;QAClB,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MAEvB,IAAI,IAAI,EAAE;QACN,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;QAE1B,OAAO;OACV;MAED,IAAI,MAAM,EAAE;QACR,IAAI,CAAC,kBAAkB,EAAE,CAAC;OAC7B;IACL,CAAC,CAAC;IAEe,gBAAW,GAAG,GAAG,EAAE;MAChC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;MACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC,CAAC;IAEe,mBAAc,GAAG,GAAa,EAAE;;MAC7C,IAAI,WAAW,GACX,MAAC,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAoC,mCAC5D,IAAI,CAAC;MAET,IAAI,WAAW,IAAI,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,EAAE;QAChE,WAAW,GAAG,WAAW,CAAC,OAAO,CAAc,mBAAmB,CAAC,CAAC;OACvE;MAED,IAAI,CAAC,WAAW,EAAE;QACd,WAAW,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAa,CAC9C,iCAAiC,CACpC,CAAC;OACL;MAED,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAC7B,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,KAAK,mCAAI,GAAG,EACjC,EAAE,CACL,CAAC;MAEF,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;MAE1C,OAAO,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAa,CAAC;IACtD,CAAC,CAAC;IAEe,cAAS,GAAG,CAAC,WAAqB,EAAE,EAAE;MACnD,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEe,WAAM,GAAG,GAAG,EAAE;MAC3B,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACtB,kCAAkC;QAClC,OAAO;OACV;MAED,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;MAC9C,IAAI,CAAC,MAAM,EAAE;QACT,qDAAqD;QACrD,8BAA8B;QAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,OAAO;OACV;MAED,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEe,yBAAoB,GAAG,CAAC,OAAoB,EAAE,EAAE;MAC7D,MAAM,UAAU,GAAG;QACf,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,IAAI,CAAC,IAAI;QAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;QAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,QAAQ;OACjB,CAAC;MAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QACnD,IAAI,KAAK,EAAE;UACP,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;aAAM;UACH,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAChC;OACJ;IACL,CAAC,CAAC;IAEe,YAAO,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;MACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAC3B,UAAU,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEe,mBAAc,GAAG,CAAC,KAAiB,EAAE,EAAE;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO;OACV;MAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B,CAAC,CAAC;IAEe,iBAAY,GAAG,KAAK,EACjC,QAAkB,EAClB,wBAAiC,IAAI,EACvC,EAAE;MACA,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QAC7D,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEjC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,OAAO;OACV;WAAM,IAAI,UAAU,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,EAAE;QACpC,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAmB,CAAC;QAChD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,MAAM,QAAQ,GAAG,MAAM,UAAU,CAAC,QAAQ,CAAC,CAAC;QAE5C,IAAI,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE;UACpC,OAAO;SACV;QAED,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAE7B,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,EAAE;UAClB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;UAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;UACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;UAEjC,IAAI,CAAC,QAAQ,EAAE,CAAC;UAEhB,OAAO;SACV;OACJ;MAED,IAAI,CAAC,qBAAqB,EAAE;QACxB,OAAO;OACV;MAED,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;MACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;MAE7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAC3B,UAAU,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEe,aAAQ,GAAG,CAAC,KAA4B,EAAE,EAAE;MACzD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC,CAAC;IAqBe,mBAAc,GAAG,CAAC,OAAiC,EAAE,EAAE;MACpE,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,IAAI,CAAC,IAAI,CAAC,mBAAmB,CACzB,SAAS,EACT,IAAI,CAAC,wBAAwB,EAC7B,IAAI,CACP,CAAC;OACL;MAED,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;MAEpB,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACtB,SAAS,EACT,IAAI,CAAC,wBAAwB,EAC7B,IAAI,CACP,CAAC;OACL;IACL,CAAC,CAAC;IAEe,aAAQ,GAAG,GAAG,EAAE;MAC7B,UAAU,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;UACZ,OAAO;SACV;QAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE;UACnC,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,GAAG,EAAE;YAC3C,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrC,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE;cACpD,OAAO;aACV;YAED,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;UAC7B,CAAC,CAAC,CAAC;UACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACtC;aAAM,IAAI,IAAI,CAAC,IAAI,EAAE;UAClB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,GAAG,EAAE;YAC3C,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;UACzB,CAAC,CAAC,CAAC;UACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/B;MACL,CAAC,EAAE,CAAC,CAAC,CAAC;IACV,CAAC,CAAC;IAEe,iBAAY,GAAG,GAAG,EAAE;;MACjC,MAAM,OAAO,GAAG,MAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,gBAAgB,EAAE,0CAAG,CAAC,CAE5C,CAAC;MAEhB,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC,CAAC;IAEe,qBAAgB,GAAG,CAChC,OAAmC,EACrC,EAAE;MACA,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;IAC/B,CAAC,CAAC;IAEe,0BAAqB,GAAG,CACrC,OAAoC,EACtC,EAAE;MACA,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;IAC/B,CAAC,CAAC;IAEF;;;;OAIG;IACc,qBAAgB,GAAG,GAAY,EAAE;;MAC9C,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACnB,OAAO,KAAK,CAAC;OAChB;MAED,MAAM,gBAAgB,GAClB,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CACtC,WAAW,CACd,CAAC;MACN,IAAI,gBAAgB,EAAE;QAClB,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAEzB,OAAO,IAAI,CAAC;OACf;MAED,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC;IAEe,uBAAkB,GAAG,GAAG,EAAE;MACvC,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;MACtC,MAAM,SAAS,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,CAAC,CAAC,CAAC;MACjC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,CAAC;IACvB,CAAC,CAAC;IAEe,sBAAiB,GAAG,GAAG,EAAE;MACtC,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;MACtC,MAAM,QAAQ,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;MACnC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,EAAE,CAAC;IACtB,CAAC,CAAC;IAEe,2BAAsB,GAAG,GAAY,EAAE;;MACpD,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;MACtC,IAAI,CAAC,SAAS,EAAE;QACZ,OAAO,KAAK,CAAC;OAChB;MAED,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;MAC/B,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC;MAE1D,OAAO,SAAS,KAAK,aAAa,CAAC;IACvC,CAAC,CAAC;IAEe,0BAAqB,GAAG,GAAY,EAAE;;MACnD,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;MACtC,IAAI,CAAC,SAAS,EAAE;QACZ,OAAO,KAAK,CAAC;OAChB;MAED,MAAM,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;MAClC,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC;MAE1D,OAAO,QAAQ,KAAK,aAAa,CAAC;IACtC,CAAC,CAAC;IAEe,iBAAY,GAAG,GAAyB,EAAE;;MACvD,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACZ,OAAO,IAAI,CAAC;OACf;MAED,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAChD,2BAA2B,CAC9B,CAAC;MAEF,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE;QAChB,OAAO,IAAI,CAAC;OACf;MAED,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEe,kBAAa,GAAG,GAAG,EAAE;;MAClC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACZ,OAAO;OACV;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAA4B,CAAC;MACxE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EAAE,CAAC;MAEtB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MAC5D,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC1B,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC5C,CAAC,CACJ,CAAC;MACF,MAAM,YAAY,GAAkB;QAChC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,mBAAmB,CAAC;OAC/C,CAAC;MACnB,MAAA,YAAY,CAAC,aAAa,CAAC,0CAAE,KAAK,EAAE,CAAC;IACzC,CAAC,CAAC;IAMe,4BAAuB,GAAG,GAAG,EAAE;MAC5C,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,EAAE;QAC5C,OAAO,sBAAe,CAAC;OAC1B;IACL,CAAC,CAAC;IAEe,yBAAoB,GAAG,CAAC,IAA8B,EAAE,EAAE,CACvE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC;IAErC,kBAAa,GAAG,CAAC,GAAqB,EAAE,EAAE;MACvD,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC9B,CAAC,CAAC;iBA71B8C,EAAE;oBAMhC,KAAK;yBAMe,cAAc;wBAMhB,oBAAoB;gBAM1C,KAAK;sBAMC,KAAK;sBAML,KAAK;mBAaR,KAAK;;oBAoBa,6BAA6B;;;;;;;IA+D5D,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;GACxC;EAEM,kBAAkB;IACrB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,qDAAqD;IACrD,WAAW,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;EACtE,CAAC;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAE9C,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC/D,oBAAoB,CACvB,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAC7C,aAAa,CAAC,sBAAsB,CAAC,CACxC,CAAC;IAEF,OAAO,CACH,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;MAC9D,YAAM,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,EAAC,SAAS,GAAG;MAC/C,IAAI,CAAC,uBAAuB,EAAE;MAC/B,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAC,UAAU,EACnB,cAAc,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;QAE7C,0BACI,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,KAAK,kCACE,aAAa,KAChB,sBAAsB,EAAE,gBAAgB,EACxC,8BAA8B,EAAE,MAAM,EACtC,qCAAqC,EAAE,QAAQ,KAEnD,KAAK,EAAE;YACH,iBAAiB,EAAE,IAAI,CAAC,UAAU;WACrC;UAEA,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,gBAAgB,EAAE;UACvB,IAAI,CAAC,YAAY,EAAE;UACnB,IAAI,CAAC,kBAAkB,EAAE;UACzB,IAAI,CAAC,cAAc,EAAE,CACL,CACV,CACb,CACT,CAAC;EACN,CAAC;EAGS,YAAY;IAClB,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;EACpB,CAAC;EAGS,WAAW,CAAC,QAAiB;IACnC,MAAM,MAAM,GAAG,QAAQ,CAAC;IACxB,IAAI,MAAM,EAAE;MACR,IAAI,CAAC,QAAQ,EAAE,CAAC;KACnB;SAAM;MACH,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;EACL,CAAC;EAEO,mBAAmB;IACvB,MAAM,eAAe,GAAoB,EAAE,CAAC;IAC5C,IAAI,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACtC,OAAO,WAAW,EAAE;MAChB,eAAe,CAAC,IAAI,CAAC;QACjB,IAAI,EAAE,WAAW,CAAC,IAAI;QACtB,IAAI,EAAE,WAAW,CAAC,IAAI;QACtB,QAAQ,EAAE,WAAW;OACxB,CAAC,CAAC;MACH,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC;KACxC;IAED,IACI,eAAe,CAAC,MAAM,GAAG,CAAC;MAC1B,IAAI,CAAC,QAAQ,KAAK,6BAA6B,EACjD;MACE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,OAAO,eAAe,CAAC,OAAO,EAAE,CAAC;EACrC,CAAC;EA4bO,gBAAgB;IACpB,MAAM,aAAa,GAAG;MAClB,sBAAsB;MACtB,4BAA4B;MAC5B,4BAA4B;MAC5B,iBAAiB;MACjB,uCAAuC;MACvC,iCAAiC;KAC3B,CAAC;IACX,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;MAC1C,OAAO,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAIH,OAAO,SAAS,CAAC,aAAa,EAAE,MAAM,CAA6B,CAAC;EACxE,CAAC;EAkKO,UAAU,CAAC,IAA8B;IAC7C,OAAO,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC;EAClC,CAAC;EAeO,mBAAmB,CAAC,WAAmB;;IAC3C,IAAI,WAAW,EAAE;MACb,OAAO,WAAW,CAAC;KACtB;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,sBAAsB,EAAE;MAC9C,MAAM,gBAAgB,GAAG,MAAA,IAAI,CAAC,cAAc,0CAAE,gBAAgB,EAAE,CAAC;MAEjE,IACI,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,MAAM,CAAA;QACzB,CAAC,CAAA,MAAA,gBAAgB,CAAC,CAAC,CAAC,0CAAE,WAAW,CAAA,EACnC;QACE,OAAO,EAAE,CAAC;OACb;MAED,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC;KACjD;SAAM,IAAI,IAAI,CAAC,YAAY,KAAK,mBAAmB,EAAE;MAClD,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,WAAW,CAAA,EAAE;QACzB,OAAO,EAAE,CAAC;OACb;MAED,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,WAAW,IAAI,CAAC;KACxC;IAED,OAAO,EAAE,CAAC;EACd,CAAC;EAED,IAAY,YAAY;;IACpB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;MACvD,OAAO,IAAI,CAAC,aAAa,CAAC;KAC7B;SAAM,IAAI,KAAK,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,CAAC,EAAE;MAClD,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCACxC,IAAI,KACP,UAAU,EAAE,IAAI,CAAC,cAAc,IACjC,CAAC,CAAC;KACP;IAED,OAAO,IAAI,CAAC,KAAK,CAAC;EACtB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\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 {\n LimelBreadcrumbsCustomEvent,\n LimelInputFieldCustomEvent,\n} from '../../components';\n\nimport { BreadcrumbsItem } from '../breadcrumbs/breadcrumbs.types';\nimport { ListSeparator } from '../list-item/list-item.types';\nimport {\n OpenDirection,\n MenuItem,\n MenuLoader,\n SurfaceWidth,\n MenuSearcher,\n} from './menu.types';\n\nimport {\n ARROW_DOWN,\n ARROW_LEFT,\n ARROW_RIGHT,\n ARROW_UP,\n TAB,\n} from '../../util/keycodes';\nimport { focusTriggerElement } from '../../util/focus-trigger-element';\n\ninterface MenuCrumbItem extends BreadcrumbsItem {\n menuItem?: MenuItem;\n}\n\nconst DEFAULT_ROOT_BREADCRUMBS_ITEM: BreadcrumbsItem = {\n text: '',\n icon: {\n name: 'home',\n },\n type: 'icon-only',\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-searchable\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 *\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 *\n * @internal\n */\n @Prop({ mutable: true })\n public currentSubMenu: MenuItem;\n\n /**\n * A root breadcrumb item to show above the menu items.\n * Clicking it navigates back from a sub-menu to the root menu.\n */\n @Prop()\n public rootItem: BreadcrumbsItem = DEFAULT_ROOT_BREADCRUMBS_ITEM;\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 * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `MenuItem`:s.\n *\n * See the docs for the type `MenuSearcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: MenuSearcher;\n\n /**\n * Placeholder text for the search input field.\n */\n @Prop()\n public searchPlaceholder?: string;\n\n /**\n * Message to display when search returns 0 results.\n */\n @Prop()\n public emptyResultMessage?: string;\n\n /**\n * Is emitted when a menu item with a sub-menu is selected.\n */\n @Event()\n public navigateMenu: EventEmitter<MenuItem | null>;\n\n @Element()\n private host: HTMLLimelMenuElement;\n\n @State()\n private loadingSubItems: boolean;\n\n @State()\n private searchValue: string;\n\n @State()\n private searchResults: Array<MenuItem | ListSeparator> | null;\n\n private list: HTMLLimelMenuListElement;\n private searchInput: HTMLLimelInputFieldElement;\n private portalId: string;\n private breadcrumbs: HTMLLimelBreadcrumbsElement;\n private triggerElement: HTMLSlotElement;\n private selectedMenuItem?: MenuItem;\n\n constructor() {\n this.portalId = createRandomString();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n // eslint-disable-next-line unicorn/no-array-for-each\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 '--menu-surface-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.renderSearchField()}\n {this.renderBreadcrumb()}\n {this.renderLoader()}\n {this.renderEmptyMessage()}\n {this.renderMenuList()}\n </limel-menu-surface>\n </limel-portal>\n </div>\n );\n }\n\n @Watch('items')\n protected itemsWatcher() {\n this.clearSearch();\n this.setFocus();\n }\n\n @Watch('open')\n protected openWatcher(newValue: boolean) {\n const opened = newValue;\n if (opened) {\n this.setFocus();\n } else {\n this.clearSearch();\n }\n }\n\n private getBreadcrumbsItems() {\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 (\n breadCrumbItems.length > 0 ||\n this.rootItem !== DEFAULT_ROOT_BREADCRUMBS_ITEM\n ) {\n breadCrumbItems.push(this.rootItem);\n }\n\n return breadCrumbItems.reverse();\n }\n\n private readonly 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 readonly renderBreadcrumb = () => {\n const breadcrumbsItems = this.getBreadcrumbsItems();\n if (breadcrumbsItems.length === 0) {\n return;\n }\n\n return (\n <limel-breadcrumbs\n ref={this.setBreadcrumbsElement}\n style={{\n 'border-bottom': 'solid 1px rgb(var(--contrast-500))',\n 'flex-shrink': '0',\n }}\n onSelect={this.handleBreadcrumbsSelect}\n onKeyDown={this.handleBreadcrumbsKeyDown}\n items={breadcrumbsItems}\n />\n );\n };\n\n private handleBreadcrumbsSelect = (\n event: LimelBreadcrumbsCustomEvent<MenuCrumbItem>\n ) => {\n if (!event.detail.menuItem) {\n this.currentSubMenu = null;\n this.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(event.detail.menuItem);\n };\n\n private readonly renderSearchField = () => {\n if (!this.searcher) {\n return;\n }\n\n return (\n <limel-input-field\n tabindex=\"0\"\n ref={this.setSearchElement}\n placeholder={this.searchPlaceholder}\n type=\"search\"\n leadingIcon=\"search\"\n style={{\n padding: '0.25rem',\n 'box-sizing': 'border-box',\n }}\n value={this.searchValue}\n onChange={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n />\n );\n };\n\n private readonly renderEmptyMessage = () => {\n if (\n this.loading ||\n this.loadingSubItems ||\n !this.emptyResultMessage ||\n !Array.isArray(this.searchResults) ||\n this.searchResults?.length\n ) {\n return null;\n }\n\n return (\n <p\n style={{\n padding: '0 1rem',\n 'text-align': 'center',\n }}\n >\n {this.emptyResultMessage}\n </p>\n );\n };\n\n private readonly renderMenuList = () => {\n let items = this.visibleItems;\n\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 badgeIcons={this.badgeIcons}\n onSelect={this.onSelect}\n ref={this.setListElement}\n onKeyDown={this.handleMenuKeyDown}\n />\n );\n };\n\n private readonly handleTextInput = async (\n event: LimelInputFieldCustomEvent<string>\n ) => {\n event.stopPropagation();\n\n const query = event.detail;\n this.searchValue = query;\n if (query === '') {\n this.searchResults = null;\n this.loadingSubItems = false;\n\n return;\n }\n\n this.loadingSubItems = true;\n\n const result = await this.searcher(query);\n\n if (this.searchValue !== query) {\n return;\n }\n\n this.searchResults = result;\n this.loadingSubItems = false;\n };\n\n // Key handler for the input search field\n // Will change focus to breadcrumbs (if present) or the first/last item\n // in the dropdown list to enable selection with the keyboard\n private readonly handleInputKeyDown = (event: KeyboardEvent) => {\n const isForwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n if (this.focusBreadcrumbs()) {\n return;\n }\n\n this.focusFirstListItem();\n\n return;\n }\n\n if (isUp) {\n // Focus the last list item (wrapping behavior)\n this.focusLastListItem();\n }\n };\n\n // Key handler for the menu list (capture phase)\n // Handles Up arrow on first item and Down arrow on last item\n // Must run in capture phase to intercept before MDC Menu wraps focus\n // Only intercepts when there's a search input or breadcrumbs to navigate to\n private readonly handleListKeyDownCapture = (event: KeyboardEvent) => {\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isUp && !isDown) {\n return;\n }\n\n // Up on first item: go to breadcrumbs or search input (if they exist)\n if (isUp && this.isFirstListItemFocused()) {\n // Try to focus breadcrumbs first\n if (this.focusBreadcrumbs()) {\n event.stopPropagation();\n event.preventDefault();\n\n return;\n }\n\n // Then try search input\n if (this.searchInput) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput.focus();\n }\n\n // If neither exists, let MDC Menu handle wrap-around\n return;\n }\n\n // Down on last item: go to search input (if it exists)\n if (isDown && this.isLastListItemFocused() && this.searchInput) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput.focus();\n }\n\n // If no search input, let MDC Menu handle wrap-around\n };\n\n // Key handler for the menu list (bubble phase)\n // Will change focus to the search field if using shift+tab\n // And can go forward/back with right/left arrow keys\n private readonly handleMenuKeyDown = (event: KeyboardEvent) => {\n const isBackwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n event.shiftKey;\n\n const isLeft = event.key === ARROW_LEFT;\n const isRight = event.key === ARROW_RIGHT;\n\n if (!isBackwardTab && !isLeft && !isRight) {\n return;\n }\n\n if (isBackwardTab) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput?.focus();\n\n return;\n }\n\n if (!this.gridLayout && (isLeft || isRight)) {\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 // Key handler for breadcrumbs\n // Up arrow: focus search input\n // Down arrow: focus first list item\n private readonly handleBreadcrumbsKeyDown = (event: KeyboardEvent) => {\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isUp && !isDown) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n if (isUp) {\n this.searchInput?.focus();\n\n return;\n }\n\n if (isDown) {\n this.focusFirstListItem();\n }\n };\n\n private readonly clearSearch = () => {\n this.searchValue = '';\n this.searchResults = null;\n this.loadingSubItems = false;\n };\n\n private readonly getCurrentItem = (): MenuItem => {\n let menuElement =\n (this.list?.shadowRoot?.activeElement as HTMLElement | null) ??\n null;\n\n if (menuElement && menuElement.getAttribute('role') !== 'menuitem') {\n menuElement = menuElement.closest<HTMLElement>('[role=\"menuitem\"]');\n }\n\n if (!menuElement) {\n menuElement = this.list?.shadowRoot?.querySelector<HTMLElement>(\n '[role=\"menuitem\"][tabindex=\"0\"]'\n );\n }\n\n const dataIndex = Number.parseInt(\n menuElement?.dataset.index ?? '0',\n 10\n );\n\n const item = this.visibleItems[dataIndex];\n\n return (item ?? this.visibleItems[0]) as MenuItem;\n };\n\n private readonly goForward = (currentItem: MenuItem) => {\n this.handleSelect(currentItem, false);\n };\n\n private readonly 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.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(parent);\n };\n\n private readonly setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n disabled: this.disabled,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (value) {\n element.setAttribute(key, String(value));\n } else {\n element.removeAttribute(key);\n }\n }\n };\n\n private readonly onClose = () => {\n this.cancel.emit();\n this.open = false;\n this.currentSubMenu = null;\n setTimeout(this.focusTrigger, 0);\n };\n\n private readonly onTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) {\n return;\n }\n\n this.open = !this.open;\n };\n\n private readonly handleSelect = async (\n menuItem: MenuItem,\n selectOnEmptyChildren: boolean = true\n ) => {\n if (Array.isArray(menuItem?.items) && menuItem.items.length > 0) {\n this.selectedMenuItem = menuItem;\n this.clearSearch();\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.selectedMenuItem = menuItem;\n this.loadingSubItems = true;\n const subItems = await menuLoader(menuItem);\n\n if (this.selectedMenuItem !== menuItem) {\n return;\n }\n\n menuItem.items = subItems;\n this.loadingSubItems = false;\n\n if (subItems?.length) {\n this.currentSubMenu = menuItem;\n this.clearSearch();\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n }\n }\n\n if (!selectOnEmptyChildren) {\n return;\n }\n\n this.selectedMenuItem = menuItem;\n this.loadingSubItems = false;\n\n this.select.emit(menuItem);\n this.open = false;\n this.currentSubMenu = null;\n setTimeout(this.focusTrigger, 0);\n };\n\n private readonly 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 readonly setListElement = (element: HTMLLimelMenuListElement) => {\n if (this.list) {\n this.list.removeEventListener(\n 'keydown',\n this.handleListKeyDownCapture,\n true\n );\n }\n\n this.list = element;\n\n if (this.list) {\n this.list.addEventListener(\n 'keydown',\n this.handleListKeyDownCapture,\n true\n );\n }\n };\n\n private readonly setFocus = () => {\n setTimeout(() => {\n if (!this.open) {\n return;\n }\n\n if (this.searchInput && this.searcher) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.searchInput);\n if (this.searchInput === window.document.activeElement) {\n return;\n }\n\n this.searchInput.focus();\n });\n observer.observe(this.searchInput);\n } else if (this.list) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.list);\n this.focusMenuItem();\n });\n observer.observe(this.list);\n }\n }, 0);\n };\n\n private readonly focusTrigger = () => {\n const trigger = this.triggerElement?.assignedElements()?.[0] as\n | HTMLElement\n | undefined;\n\n focusTriggerElement(trigger);\n };\n\n private readonly setSearchElement = (\n element: HTMLLimelInputFieldElement\n ) => {\n this.searchInput = element;\n };\n\n private readonly setBreadcrumbsElement = (\n element: HTMLLimelBreadcrumbsElement\n ) => {\n this.breadcrumbs = element;\n };\n\n /**\n * Focuses the first focusable element inside breadcrumbs.\n * Returns true if breadcrumbs exist and were focused,\n * false otherwise.\n */\n private readonly focusBreadcrumbs = (): boolean => {\n if (!this.breadcrumbs) {\n return false;\n }\n\n const focusableElement =\n this.breadcrumbs.shadowRoot?.querySelector<HTMLElement>(\n 'button, a'\n );\n if (focusableElement) {\n focusableElement.focus();\n\n return true;\n }\n\n return false;\n };\n\n private readonly focusFirstListItem = () => {\n const listItems = this.getListItems();\n const firstItem = listItems?.[0];\n firstItem?.focus();\n };\n\n private readonly focusLastListItem = () => {\n const listItems = this.getListItems();\n const lastItem = listItems?.at(-1);\n lastItem?.focus();\n };\n\n private readonly isFirstListItemFocused = (): boolean => {\n const listItems = this.getListItems();\n if (!listItems) {\n return false;\n }\n\n const firstItem = listItems[0];\n const activeElement = this.list.shadowRoot?.activeElement;\n\n return firstItem === activeElement;\n };\n\n private readonly isLastListItemFocused = (): boolean => {\n const listItems = this.getListItems();\n if (!listItems) {\n return false;\n }\n\n const lastItem = listItems.at(-1);\n const activeElement = this.list.shadowRoot?.activeElement;\n\n return lastItem === activeElement;\n };\n\n private readonly getListItems = (): HTMLElement[] | null => {\n if (!this.list) {\n return null;\n }\n\n const items = this.list.shadowRoot?.querySelectorAll<HTMLElement>(\n '.mdc-deprecated-list-item'\n );\n\n if (!items?.length) {\n return null;\n }\n\n return [...items];\n };\n\n private readonly 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[] = [\n ...this.list.shadowRoot.querySelectorAll('[role=\"menuitem\"]'),\n ] as HTMLElement[];\n menuElements[selectedIndex]?.focus();\n };\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n\n private readonly renderNotificationBadge = () => {\n if (this.items.some(this.hasNotificationBadge)) {\n return <limel-badge />;\n }\n };\n\n private readonly hasNotificationBadge = (item: MenuItem | ListSeparator) =>\n this.isMenuItem(item) && item.badge !== undefined;\n\n private readonly 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.searchResults) && this.searchValue) {\n return this.searchResults;\n } else 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"]}
|
|
@@ -3,6 +3,7 @@ import { createRandomString } from '../../util/random-string';
|
|
|
3
3
|
import { zipObject } from 'lodash-es';
|
|
4
4
|
import { portalContains } from '../portal/contains';
|
|
5
5
|
import { ESCAPE } from '../../util/keycodes';
|
|
6
|
+
import { focusTriggerElement } from '../../util/focus-trigger-element';
|
|
6
7
|
/**
|
|
7
8
|
* A popover is an impermanent layer that is displayed on top of other content
|
|
8
9
|
* when user taps an element that triggers the popover. This element can be
|
|
@@ -50,14 +51,27 @@ import { ESCAPE } from '../../util/keycodes';
|
|
|
50
51
|
*/
|
|
51
52
|
export class Popover {
|
|
52
53
|
constructor() {
|
|
54
|
+
this.shouldRestoreFocusOnClose = false;
|
|
53
55
|
this.handleGlobalKeyPress = (event) => {
|
|
54
56
|
if (event.key !== ESCAPE) {
|
|
55
57
|
return;
|
|
56
58
|
}
|
|
57
59
|
event.stopPropagation();
|
|
58
60
|
event.preventDefault();
|
|
61
|
+
this.requestCloseAndRestoreFocus();
|
|
62
|
+
};
|
|
63
|
+
this.requestCloseAndRestoreFocus = () => {
|
|
64
|
+
this.shouldRestoreFocusOnClose = true;
|
|
59
65
|
this.close.emit();
|
|
60
66
|
};
|
|
67
|
+
this.setTriggerRef = (elm) => {
|
|
68
|
+
this.triggerSlot = elm;
|
|
69
|
+
};
|
|
70
|
+
this.focusTrigger = () => {
|
|
71
|
+
var _a, _b;
|
|
72
|
+
const trigger = (_b = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements()) === null || _b === void 0 ? void 0 : _b[0];
|
|
73
|
+
focusTriggerElement(trigger);
|
|
74
|
+
};
|
|
61
75
|
this.setTriggerAttributes = (element) => {
|
|
62
76
|
const attributes = {
|
|
63
77
|
'aria-haspopup': true,
|
|
@@ -81,14 +95,20 @@ export class Popover {
|
|
|
81
95
|
}
|
|
82
96
|
watchOpen() {
|
|
83
97
|
this.setupGlobalHandlers();
|
|
98
|
+
if (!this.open && this.shouldRestoreFocusOnClose) {
|
|
99
|
+
this.shouldRestoreFocusOnClose = false;
|
|
100
|
+
setTimeout(this.focusTrigger, 0);
|
|
101
|
+
}
|
|
84
102
|
}
|
|
85
103
|
componentWillLoad() {
|
|
86
104
|
this.setupGlobalHandlers();
|
|
87
105
|
}
|
|
88
106
|
componentDidRender() {
|
|
89
|
-
|
|
107
|
+
if (!this.triggerSlot) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
90
110
|
// eslint-disable-next-line unicorn/no-array-for-each
|
|
91
|
-
|
|
111
|
+
this.triggerSlot.assignedElements().forEach(this.setTriggerAttributes);
|
|
92
112
|
}
|
|
93
113
|
setupGlobalHandlers() {
|
|
94
114
|
if (this.open) {
|
|
@@ -105,7 +125,7 @@ export class Popover {
|
|
|
105
125
|
render() {
|
|
106
126
|
const cssProperties = this.getCssProperties();
|
|
107
127
|
const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
|
|
108
|
-
return (h("div", { class: "trigger-anchor" }, h("slot", { name: "trigger" }), h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
|
|
128
|
+
return (h("div", { class: "trigger-anchor" }, h("slot", { name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
|
|
109
129
|
}
|
|
110
130
|
globalClickListener(event) {
|
|
111
131
|
const element = event.target;
|
|
@@ -113,7 +133,7 @@ export class Popover {
|
|
|
113
133
|
if (this.open && !clickedInside) {
|
|
114
134
|
event.stopPropagation();
|
|
115
135
|
event.preventDefault();
|
|
116
|
-
this.
|
|
136
|
+
this.requestCloseAndRestoreFocus();
|
|
117
137
|
}
|
|
118
138
|
}
|
|
119
139
|
getCssProperties() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n * @exampleComponent limel-example-popover-styling\n */\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /**\n * True if the content within the popover should be visible\n */\n @Prop()\n public open = false;\n\n /**\n * Decides the popover's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n // eslint-disable-next-line unicorn/no-array-for-each\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n '--popover-box-shadow',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (value) {\n element.setAttribute(key, String(value));\n } else {\n element.removeAttribute(key);\n }\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\nimport { focusTriggerElement } from '../../util/focus-trigger-element';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n * @exampleComponent limel-example-popover-styling\n */\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /**\n * True if the content within the popover should be visible\n */\n @Prop()\n public open = false;\n\n /**\n * Decides the popover's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n private triggerSlot: HTMLSlotElement;\n private shouldRestoreFocusOnClose = false;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n\n if (!this.open && this.shouldRestoreFocusOnClose) {\n this.shouldRestoreFocusOnClose = false;\n setTimeout(this.focusTrigger, 0);\n }\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n if (!this.triggerSlot) {\n return;\n }\n\n // eslint-disable-next-line unicorn/no-array-for-each\n this.triggerSlot.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" ref={this.setTriggerRef} />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.requestCloseAndRestoreFocus();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n '--popover-box-shadow',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.requestCloseAndRestoreFocus();\n };\n\n private readonly requestCloseAndRestoreFocus = () => {\n this.shouldRestoreFocusOnClose = true;\n this.close.emit();\n };\n\n private readonly setTriggerRef = (elm?: HTMLSlotElement) => {\n this.triggerSlot = elm;\n };\n\n private readonly focusTrigger = () => {\n const trigger = this.triggerSlot?.assignedElements()?.[0] as\n | HTMLElement\n | undefined;\n\n focusTriggerElement(trigger);\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (value) {\n element.setAttribute(key, String(value));\n } else {\n element.removeAttribute(key);\n }\n }\n };\n}\n"]}
|
|
@@ -457,10 +457,22 @@ export class Table {
|
|
|
457
457
|
return this.mode === 'remote';
|
|
458
458
|
}
|
|
459
459
|
handleDataSorting(sorters) {
|
|
460
|
+
var _a, _b;
|
|
461
|
+
const columnSorters = sorters.map(createColumnSorter(this.columns));
|
|
460
462
|
if (this.isRemoteMode()) {
|
|
463
|
+
const tabulatorPage = (_b = (_a = this.tabulator) === null || _a === void 0 ? void 0 : _a.getPage) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
464
|
+
const currentPage = typeof tabulatorPage === 'number' ? tabulatorPage : this.page;
|
|
465
|
+
const load = {
|
|
466
|
+
page: currentPage !== null && currentPage !== void 0 ? currentPage : FIRST_PAGE,
|
|
467
|
+
sorters: columnSorters,
|
|
468
|
+
};
|
|
469
|
+
if (!isEqual(this.currentLoad, load)) {
|
|
470
|
+
this.currentSorting = columnSorters;
|
|
471
|
+
this.currentLoad = load;
|
|
472
|
+
this.load.emit(load);
|
|
473
|
+
}
|
|
461
474
|
return;
|
|
462
475
|
}
|
|
463
|
-
const columnSorters = sorters.map(createColumnSorter(this.columns));
|
|
464
476
|
if (columnSorters.length === 0) {
|
|
465
477
|
return;
|
|
466
478
|
}
|
|
@@ -475,7 +487,7 @@ export class Table {
|
|
|
475
487
|
handleRenderComplete() {
|
|
476
488
|
if (this.tabulator && this.shouldSort) {
|
|
477
489
|
this.shouldSort = false;
|
|
478
|
-
this.tabulator.setSort(this.
|
|
490
|
+
this.tabulator.setSort(this.getInitialSorting());
|
|
479
491
|
}
|
|
480
492
|
}
|
|
481
493
|
onClickRow(event, row) {
|