@limetech/lime-elements 38.39.0 → 38.39.2

package/dist/cjs/limel-popover_2.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1ed03b2b.js');
 const randomString = require('./random-string-27fb6c74.js');
 const keycodes = require('./keycodes-8e70d9e0.js');
-const zipObject = require('./zipObject-fec9afa6.js');
+const focusTriggerElement = require('./focus-trigger-element-7137b490.js');
 require('./_assignValue-7a5440a6.js');
 require('./_baseAssignValue-e84dd769.js');
 require('./_defineProperty-8f56146d.js');
@@ -50,14 +50,27 @@ const Popover = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.close = index.createEvent(this, "close", 7);
+    this.shouldRestoreFocusOnClose = false;
     this.handleGlobalKeyPress = (event) => {
       if (event.key !== keycodes.ESCAPE) {
         return;
       }
       event.stopPropagation();
       event.preventDefault();
+      this.requestCloseAndRestoreFocus();
+    };
+    this.requestCloseAndRestoreFocus = () => {
+      this.shouldRestoreFocusOnClose = true;
       this.close.emit();
     };
+    this.setTriggerRef = (elm) => {
+      this.triggerSlot = elm;
+    };
+    this.focusTrigger = () => {
+      var _a, _b;
+      const trigger = (_b = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements()) === null || _b === void 0 ? void 0 : _b[0];
+      focusTriggerElement.focusTriggerElement(trigger);
+    };
     this.setTriggerAttributes = (element) => {
       const attributes = {
         'aria-haspopup': true,
@@ -81,14 +94,20 @@ const Popover = class {
   }
   watchOpen() {
     this.setupGlobalHandlers();
+    if (!this.open && this.shouldRestoreFocusOnClose) {
+      this.shouldRestoreFocusOnClose = false;
+      setTimeout(this.focusTrigger, 0);
+    }
   }
   componentWillLoad() {
     this.setupGlobalHandlers();
   }
   componentDidRender() {
-    const slotElement = this.host.shadowRoot.querySelector('slot');
+    if (!this.triggerSlot) {
+      return;
+    }
     // eslint-disable-next-line unicorn/no-array-for-each
-    slotElement.assignedElements().forEach(this.setTriggerAttributes);
+    this.triggerSlot.assignedElements().forEach(this.setTriggerAttributes);
   }
   setupGlobalHandlers() {
     if (this.open) {
@@ -105,7 +124,7 @@ const Popover = class {
   render() {
     const cssProperties = this.getCssProperties();
     const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-    return (index.h("div", { class: "trigger-anchor" }, index.h("slot", { name: "trigger" }), index.h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, index.h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
+    return (index.h("div", { class: "trigger-anchor" }, index.h("slot", { name: "trigger", ref: this.setTriggerRef }), index.h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, index.h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
   }
   globalClickListener(event) {
     const element = event.target;
@@ -113,7 +132,7 @@ const Popover = class {
     if (this.open && !clickedInside) {
       event.stopPropagation();
       event.preventDefault();
-      this.close.emit();
+      this.requestCloseAndRestoreFocus();
     }
   }
   getCssProperties() {
@@ -127,7 +146,7 @@ const Popover = class {
     const values = propertyNames.map((property) => {
       return style.getPropertyValue(property);
     });
-    return zipObject.zipObject(propertyNames, values);
+    return focusTriggerElement.zipObject(propertyNames, values);
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/limel-popover_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n    element: HTMLElement,\n    child: HTMLElement\n): boolean {\n    if (element.contains(child) || element.shadowRoot?.contains(child)) {\n        return true;\n    }\n\n    const parent = findParent(child);\n    if (!parent) {\n        return false;\n    }\n\n    return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n    const portal: any = element.closest('.limel-portal--container');\n    if (portal) {\n        return portal.portalSource;\n    }\n\n    const rootNode = element.getRootNode() as ShadowRoot;\n\n    return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.\n */\n\n.trigger-anchor {\n    display: inline-block;\n    position: relative;\n}\n","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","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n    isolation: isolate;\n\n    position: relative;\n    display: flex;\n\n    width: var(--popover-surface-width, auto);\n    max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n    max-width: calc(100vw - 2rem);\n    margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    border-radius: var(--popover-border-radius, functions.pxToRem(12));\n    box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));\n\n    backdrop-filter: blur(functions.pxToRem(5));\n    -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n    &:after {\n        // allows using `--popover-body-background-color` while\n        // getting the blurred backdrop effect\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        z-index: -1;\n\n        opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n        border-radius: var(--popover-border-radius, functions.pxToRem(12));\n        background-color: var(\n            --popover-body-background-color,\n            var(--lime-elevated-surface-background-color)\n        );\n    }\n\n    @include mixins.visualize-keyboard-focus;\n\n    &:focus,\n    &:focus-within {\n        &:after {\n            opacity: 1;\n        }\n    }\n\n    & > * {\n        // this fixes some unwanted layout issues\n        // which might be very hard for consumers to realize\n        // and fix by themselves. Without this code,\n        // if the consumer sets for example paddings in\n        // what they send to the popover, their element\n        // can grow larger than the popover surface\n        box-sizing: border-box;\n    }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n    tag: 'limel-popover-surface',\n    shadow: true,\n    styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n    /**\n     * Content to render\n     */\n    @Prop()\n    public contentCollection: HTMLCollection;\n\n    @Element()\n    private host: HTMLLimelPopoverSurfaceElement;\n\n    public componentDidLoad() {\n        this.appendElement();\n    }\n\n    public render() {\n        return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n    }\n\n    private appendElement() {\n        const portalContainer = this.host.shadowRoot.querySelector(\n            '.limel-popover-surface'\n        );\n\n        const childElementsCopy = [...this.contentCollection];\n        for (const child of childElementsCopy) {\n            if (child.slot === 'trigger') {\n                continue;\n            }\n\n            portalContainer.append(child);\n        }\n    }\n}\n"],"version":3}
+{"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","focusTriggerElement","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n    element: HTMLElement,\n    child: HTMLElement\n): boolean {\n    if (element.contains(child) || element.shadowRoot?.contains(child)) {\n        return true;\n    }\n\n    const parent = findParent(child);\n    if (!parent) {\n        return false;\n    }\n\n    return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n    const portal: any = element.closest('.limel-portal--container');\n    if (portal) {\n        return portal.portalSource;\n    }\n\n    const rootNode = element.getRootNode() as ShadowRoot;\n\n    return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.\n */\n\n.trigger-anchor {\n    display: inline-block;\n    position: relative;\n}\n","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","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n    isolation: isolate;\n\n    position: relative;\n    display: flex;\n\n    width: var(--popover-surface-width, auto);\n    max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n    max-width: calc(100vw - 2rem);\n    margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    border-radius: var(--popover-border-radius, functions.pxToRem(12));\n    box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));\n\n    backdrop-filter: blur(functions.pxToRem(5));\n    -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n    &:after {\n        // allows using `--popover-body-background-color` while\n        // getting the blurred backdrop effect\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        z-index: -1;\n\n        opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n        border-radius: var(--popover-border-radius, functions.pxToRem(12));\n        background-color: var(\n            --popover-body-background-color,\n            var(--lime-elevated-surface-background-color)\n        );\n    }\n\n    @include mixins.visualize-keyboard-focus;\n\n    &:focus,\n    &:focus-within {\n        &:after {\n            opacity: 1;\n        }\n    }\n\n    & > * {\n        // this fixes some unwanted layout issues\n        // which might be very hard for consumers to realize\n        // and fix by themselves. Without this code,\n        // if the consumer sets for example paddings in\n        // what they send to the popover, their element\n        // can grow larger than the popover surface\n        box-sizing: border-box;\n    }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n    tag: 'limel-popover-surface',\n    shadow: true,\n    styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n    /**\n     * Content to render\n     */\n    @Prop()\n    public contentCollection: HTMLCollection;\n\n    @Element()\n    private host: HTMLLimelPopoverSurfaceElement;\n\n    public componentDidLoad() {\n        this.appendElement();\n    }\n\n    public render() {\n        return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n    }\n\n    private appendElement() {\n        const portalContainer = this.host.shadowRoot.querySelector(\n            '.limel-popover-surface'\n        );\n\n        const childElementsCopy = [...this.contentCollection];\n        for (const child of childElementsCopy) {\n            if (child.slot === 'trigger') {\n                continue;\n            }\n\n            portalContainer.append(child);\n        }\n    }\n}\n"],"version":3}

package/dist/collection/components/form/templates/array-field.js

@@ -278,7 +278,13 @@ export class ArrayFieldTemplate extends React.Component {
     if (!this.container) {
       return [];
     }
-    const items = [...this.container.querySelectorAll('.array-item')];
+    // Only read the order of the direct children of this array field.
+    // Nested array fields may render `.array-item` elements inside items,
+    // and those must not affect the parent order.
+    const items = [...this.container.children].filter((element) => {
+      var _a, _b;
+      return Boolean((_b = (_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, 'array-item'));
+    });
     const order = [];
     for (const element of items) {
       const index = this.getReorderId(element);
@@ -289,13 +295,11 @@ export class ArrayFieldTemplate extends React.Component {
     return order;
   }
   getReorderId(element) {
+    var _a;
     if (!element) {
       return undefined;
     }
-    if (!(element instanceof HTMLElement)) {
-      return undefined;
-    }
-    const value = element.dataset.reorderId;
+    const value = (_a = element === null || element === void 0 ? void 0 : element.dataset) === null || _a === void 0 ? void 0 : _a.reorderId;
     if (value === undefined) {
       return undefined;
     }

package/dist/collection/components/form/templates/array-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"array-field.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { isObjectType } from '../schema';\nimport { CollapsibleItemTemplate } from './array-field-collapsible-item';\nimport { SimpleItemTemplate } from './array-field-simple-item';\nimport { renderDescription, renderTitle } from './common';\nimport { ArrayFieldItem, ArrayFieldTemplateProps } from './types';\nimport { FormSchema } from '../form.types';\nimport Sortable, { SortableEvent } from 'sortablejs';\n\ninterface ArrayItemControls {\n    allowItemRemoval: boolean;\n}\n\ninterface ArrayFieldTemplateState {\n    order: number[];\n}\n\nconst DRAG_HANDLE_SELECTOR = '[data-drag-handle]';\nconst DRAGGABLE_ITEM_SELECTOR = '.array-item[data-reorderable=\"true\"]';\nconst DEFAULT_CONTAINER_CLASS = 'has-an-item-which-is-being-dragged';\nconst DEFAULT_DROP_ELEVATION_CLASS = 'is-elevated';\nconst DROP_ELEVATION_DURATION = 1000;\nconst TOUCH_DRAG_DELAY_MS = 200; // Adds a short hold on touch (long-press) so scroll gestures do not reorder items.\n\nexport class ArrayFieldTemplate extends React.Component<\n    ArrayFieldTemplateProps,\n    ArrayFieldTemplateState\n> {\n    private container?: HTMLDivElement;\n    private sortable?: Sortable;\n    private dragSnapshot?: number[];\n    private draggedItemIndex?: number;\n    private dropElevationTimeout?: ReturnType<typeof setTimeout>;\n    private dropElevationTarget?: HTMLElement;\n    private itemByIndex: Map<number, ArrayFieldItem> = new Map();\n\n    public constructor(props: ArrayFieldTemplateProps) {\n        super(props);\n\n        this.state = {\n            order: this.extractIndices(props.items),\n        };\n    }\n\n    public componentWillUnmount() {\n        this.teardownDragController();\n    }\n\n    public componentDidMount() {\n        this.setupDragController();\n    }\n\n    public componentDidUpdate(previousProps: ArrayFieldTemplateProps) {\n        if (previousProps.items !== this.props.items) {\n            const nextOrder = this.extractIndices(this.props.items);\n\n            if (!this.arraysEqual(this.state.order, nextOrder)) {\n                this.setState(\n                    {\n                        order: nextOrder,\n                    },\n                    () => {\n                        this.setupDragController();\n                    }\n                );\n                return;\n            }\n        }\n\n        if (\n            previousProps.items !== this.props.items ||\n            previousProps.schema !== this.props.schema ||\n            previousProps.disabled !== this.props.disabled ||\n            previousProps.readonly !== this.props.readonly\n        ) {\n            this.setupDragController();\n        }\n    }\n\n    public render() {\n        const controls = this.getItemControls();\n        const { ordered: orderedItems, byIndex } = this.getOrderedItems();\n        this.itemByIndex = byIndex;\n\n        return React.createElement(\n            'div',\n            {},\n            renderTitle(this.props.title),\n            renderDescription(this.props.schema.description),\n            React.createElement(\n                'div',\n                {\n                    className: 'array-items',\n                    ref: this.setContainer,\n                },\n                orderedItems.map((item, index) =>\n                    this.renderItem(item, index, controls)\n                )\n            ),\n            this.renderAddButton()\n        );\n    }\n\n    private renderAddButton() {\n        if (!this.props.canAdd) {\n            return;\n        }\n\n        return React.createElement('limel-button', {\n            label: this.props.title || 'Add',\n            onClick: this.handleAddClick,\n            icon: 'plus_math',\n            class: 'button-add-new',\n        });\n    }\n\n    private getItemControls(): ArrayItemControls {\n        return {\n            allowItemRemoval: this.canRemoveItems(),\n        };\n    }\n\n    private readonly handleAddClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.props.onAddClick(event);\n    };\n\n    private renderItem(\n        item: ArrayFieldItem,\n        index: number,\n        controls: ArrayItemControls\n    ) {\n        const { schema, formData, formContext } = this.props;\n        const itemIndex = item.index ?? index;\n        const allowItemReorder = this.isItemReorderable(item);\n\n        if (isObjectType(schema.items as FormSchema)) {\n            return React.createElement(CollapsibleItemTemplate, {\n                key: item.key,\n                item: item,\n                data: Array.isArray(formData) ? formData[itemIndex] : undefined,\n                schema: schema,\n                formSchema: formContext.schema,\n                index: itemIndex,\n                allowItemRemoval: controls.allowItemRemoval,\n                allowItemReorder: allowItemReorder,\n            });\n        }\n\n        return React.createElement(SimpleItemTemplate, {\n            key: item.key,\n            item: item,\n            index: itemIndex,\n            dataIndex: itemIndex,\n            allowItemRemoval: controls.allowItemRemoval,\n            allowItemReorder: allowItemReorder,\n        });\n    }\n\n    private readonly setContainer = (element: HTMLDivElement | null) => {\n        if (this.container === element) {\n            return;\n        }\n\n        this.teardownDragController();\n        this.container = element ?? undefined;\n        this.setupDragController();\n    };\n\n    private getOrderedItems(): {\n        ordered: ArrayFieldItem[];\n        byIndex: Map<number, ArrayFieldItem>;\n    } {\n        const items = this.props.items ?? [];\n        const byIndex = new Map<number, ArrayFieldItem>();\n\n        let entryIndex = 0;\n        for (const entry of items) {\n            byIndex.set(entry.index ?? entryIndex, entry);\n            entryIndex += 1;\n        }\n\n        const ordered: ArrayFieldItem[] = [];\n        const used = new Set<number>();\n\n        for (const index of this.state.order) {\n            const entry = byIndex.get(index);\n            if (!entry) {\n                continue;\n            }\n\n            ordered.push(entry);\n            used.add(index);\n        }\n\n        for (const [index, entry] of byIndex.entries()) {\n            if (!used.has(index)) {\n                ordered.push(entry);\n            }\n        }\n\n        return {\n            ordered,\n            byIndex,\n        };\n    }\n\n    private readonly handleSortStart = (event: SortableEvent) => {\n        if (!this.canReorderItems()) {\n            return;\n        }\n\n        this.dragSnapshot = [...this.state.order];\n        this.draggedItemIndex = this.getReorderId(event.item);\n\n        if (this.container) {\n            this.container.classList.add(DEFAULT_CONTAINER_CLASS);\n        }\n\n        if (event.item instanceof HTMLElement) {\n            this.applyDropElevation(event.item);\n        }\n    };\n\n    private readonly handleSortEnd = (event: SortableEvent) => {\n        if (!this.canReorderItems()) {\n            return;\n        }\n\n        if (this.container) {\n            this.container.classList.remove(DEFAULT_CONTAINER_CLASS);\n        }\n\n        const snapshot = this.dragSnapshot;\n        const draggedItemIndex = this.draggedItemIndex;\n        this.dragSnapshot = undefined;\n        this.draggedItemIndex = undefined;\n\n        if (event.item instanceof HTMLElement) {\n            this.dropElevationTarget = event.item;\n        }\n\n        const finalOrder = this.readOrderFromDom();\n\n        if (!this.arraysEqual(this.state.order, finalOrder)) {\n            this.setState({ order: finalOrder });\n        }\n\n        if (\n            snapshot === undefined ||\n            draggedItemIndex === undefined ||\n            !(event.item instanceof HTMLElement)\n        ) {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        const fromPosition = snapshot.indexOf(draggedItemIndex);\n        const toPosition = finalOrder.indexOf(draggedItemIndex);\n\n        if (\n            fromPosition === -1 ||\n            toPosition === -1 ||\n            fromPosition === toPosition\n        ) {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        const targetItem = (this.props.items ?? []).find((entry) => {\n            return (entry.index ?? -1) === draggedItemIndex;\n        });\n\n        if (!targetItem || typeof targetItem.onReorderClick !== 'function') {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        requestAnimationFrame(() => {\n            const reorder = targetItem.onReorderClick(\n                draggedItemIndex,\n                toPosition\n            );\n\n            if (typeof reorder === 'function') {\n                reorder();\n            }\n        });\n\n        this.scheduleDropElevationRemoval();\n    };\n\n    private setupDragController() {\n        if (!this.container || !this.canReorderItems()) {\n            this.teardownDragController();\n            return;\n        }\n\n        const reorderableCount = this.getReorderableOrder().length;\n        if (reorderableCount < 2) {\n            this.teardownDragController();\n            return;\n        }\n\n        if (this.sortable) {\n            this.sortable.option('handle', DRAG_HANDLE_SELECTOR);\n            this.sortable.option('draggable', DRAGGABLE_ITEM_SELECTOR);\n            this.sortable.option('disabled', false);\n            this.sortable.option('delay', TOUCH_DRAG_DELAY_MS);\n            this.sortable.option('delayOnTouchOnly', true);\n            return;\n        }\n\n        this.sortable = Sortable.create(this.container, {\n            animation: 150,\n            handle: DRAG_HANDLE_SELECTOR,\n            draggable: DRAGGABLE_ITEM_SELECTOR,\n            delay: TOUCH_DRAG_DELAY_MS,\n            delayOnTouchOnly: true,\n            onStart: this.handleSortStart,\n            onEnd: this.handleSortEnd,\n        });\n    }\n\n    private teardownDragController() {\n        if (this.sortable) {\n            this.sortable.destroy();\n            this.sortable = undefined;\n        }\n\n        this.clearDropElevationTimer();\n\n        if (this.dropElevationTarget) {\n            this.dropElevationTarget.classList.remove(\n                DEFAULT_DROP_ELEVATION_CLASS\n            );\n            this.dropElevationTarget = undefined;\n        }\n\n        if (this.container) {\n            this.container.classList.remove(DEFAULT_CONTAINER_CLASS);\n        }\n\n        this.dragSnapshot = undefined;\n        this.draggedItemIndex = undefined;\n    }\n\n    private canReorderItems(): boolean {\n        if (this.props.disabled || this.props.readonly) {\n            return false;\n        }\n\n        const schema = this.props.schema as FormSchema;\n        const limeOptions = schema?.lime || {};\n\n        return limeOptions.allowItemReorder !== false;\n    }\n\n    private canRemoveItems(): boolean {\n        const schema = this.props.schema as FormSchema;\n        const limeOptions = schema?.lime || {};\n\n        return limeOptions.allowItemRemoval !== false;\n    }\n\n    private isItemReorderable(item: ArrayFieldItem): boolean {\n        return (\n            this.canReorderItems() &&\n            Boolean(item?.hasMoveDown || item?.hasMoveUp)\n        );\n    }\n\n    private isIndexReorderable(index: number): boolean {\n        const item = this.itemByIndex.get(index);\n\n        if (!item) {\n            return false;\n        }\n\n        return this.isItemReorderable(item);\n    }\n\n    private getReorderableOrder(order: number[] = this.state.order): number[] {\n        const result: number[] = [];\n\n        for (const index of order) {\n            if (this.isIndexReorderable(index)) {\n                result.push(index);\n            }\n        }\n\n        return result;\n    }\n\n    private readOrderFromDom(): number[] {\n        if (!this.container) {\n            return [];\n        }\n\n        const items = [...this.container.querySelectorAll('.array-item')];\n\n        const order: number[] = [];\n\n        for (const element of items) {\n            const index = this.getReorderId(element);\n            if (index !== undefined) {\n                order.push(index);\n            }\n        }\n\n        return order;\n    }\n\n    private getReorderId(element: Element | null): number | undefined {\n        if (!element) {\n            return undefined;\n        }\n\n        if (!(element instanceof HTMLElement)) {\n            return undefined;\n        }\n\n        const value = element.dataset.reorderId;\n        if (value === undefined) {\n            return undefined;\n        }\n\n        const parsed = Number.parseInt(value, 10);\n        return Number.isNaN(parsed) ? undefined : parsed;\n    }\n\n    private applyDropElevation(item: HTMLElement) {\n        if (this.dropElevationTarget && this.dropElevationTarget !== item) {\n            this.dropElevationTarget.classList.remove(\n                DEFAULT_DROP_ELEVATION_CLASS\n            );\n        }\n\n        this.clearDropElevationTimer();\n        item.classList.add(DEFAULT_DROP_ELEVATION_CLASS);\n        this.dropElevationTarget = item;\n    }\n\n    private scheduleDropElevationRemoval() {\n        if (!this.dropElevationTarget) {\n            return;\n        }\n\n        const target = this.dropElevationTarget;\n        this.clearDropElevationTimer();\n        this.dropElevationTimeout = globalThis.setTimeout(() => {\n            target.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);\n            if (this.dropElevationTarget === target) {\n                this.dropElevationTarget = undefined;\n            }\n            this.dropElevationTimeout = undefined;\n        }, DROP_ELEVATION_DURATION);\n    }\n\n    private clearDropElevationTimer() {\n        if (this.dropElevationTimeout !== undefined) {\n            clearTimeout(this.dropElevationTimeout);\n            this.dropElevationTimeout = undefined;\n        }\n    }\n\n    private arraysEqual(a: number[], b: number[]): boolean {\n        if (a.length !== b.length) {\n            return false;\n        }\n\n        let index = 0;\n        for (const value of a) {\n            if (value !== b[index]) {\n                return false;\n            }\n            index += 1;\n        }\n\n        return true;\n    }\n\n    private extractIndices(items: ArrayFieldItem[] = []): number[] {\n        return (items ?? []).map((item, index) => item.index ?? index);\n    }\n}\n"]}
+{"version":3,"file":"array-field.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { isObjectType } from '../schema';\nimport { CollapsibleItemTemplate } from './array-field-collapsible-item';\nimport { SimpleItemTemplate } from './array-field-simple-item';\nimport { renderDescription, renderTitle } from './common';\nimport { ArrayFieldItem, ArrayFieldTemplateProps } from './types';\nimport { FormSchema } from '../form.types';\nimport Sortable, { SortableEvent } from 'sortablejs';\n\ninterface ArrayItemControls {\n    allowItemRemoval: boolean;\n}\n\ninterface ArrayFieldTemplateState {\n    order: number[];\n}\n\nconst DRAG_HANDLE_SELECTOR = '[data-drag-handle]';\nconst DRAGGABLE_ITEM_SELECTOR = '.array-item[data-reorderable=\"true\"]';\nconst DEFAULT_CONTAINER_CLASS = 'has-an-item-which-is-being-dragged';\nconst DEFAULT_DROP_ELEVATION_CLASS = 'is-elevated';\nconst DROP_ELEVATION_DURATION = 1000;\nconst TOUCH_DRAG_DELAY_MS = 200; // Adds a short hold on touch (long-press) so scroll gestures do not reorder items.\n\nexport class ArrayFieldTemplate extends React.Component<\n    ArrayFieldTemplateProps,\n    ArrayFieldTemplateState\n> {\n    private container?: HTMLDivElement;\n    private sortable?: Sortable;\n    private dragSnapshot?: number[];\n    private draggedItemIndex?: number;\n    private dropElevationTimeout?: ReturnType<typeof setTimeout>;\n    private dropElevationTarget?: HTMLElement;\n    private itemByIndex: Map<number, ArrayFieldItem> = new Map();\n\n    public constructor(props: ArrayFieldTemplateProps) {\n        super(props);\n\n        this.state = {\n            order: this.extractIndices(props.items),\n        };\n    }\n\n    public componentWillUnmount() {\n        this.teardownDragController();\n    }\n\n    public componentDidMount() {\n        this.setupDragController();\n    }\n\n    public componentDidUpdate(previousProps: ArrayFieldTemplateProps) {\n        if (previousProps.items !== this.props.items) {\n            const nextOrder = this.extractIndices(this.props.items);\n\n            if (!this.arraysEqual(this.state.order, nextOrder)) {\n                this.setState(\n                    {\n                        order: nextOrder,\n                    },\n                    () => {\n                        this.setupDragController();\n                    }\n                );\n                return;\n            }\n        }\n\n        if (\n            previousProps.items !== this.props.items ||\n            previousProps.schema !== this.props.schema ||\n            previousProps.disabled !== this.props.disabled ||\n            previousProps.readonly !== this.props.readonly\n        ) {\n            this.setupDragController();\n        }\n    }\n\n    public render() {\n        const controls = this.getItemControls();\n        const { ordered: orderedItems, byIndex } = this.getOrderedItems();\n        this.itemByIndex = byIndex;\n\n        return React.createElement(\n            'div',\n            {},\n            renderTitle(this.props.title),\n            renderDescription(this.props.schema.description),\n            React.createElement(\n                'div',\n                {\n                    className: 'array-items',\n                    ref: this.setContainer,\n                },\n                orderedItems.map((item, index) =>\n                    this.renderItem(item, index, controls)\n                )\n            ),\n            this.renderAddButton()\n        );\n    }\n\n    private renderAddButton() {\n        if (!this.props.canAdd) {\n            return;\n        }\n\n        return React.createElement('limel-button', {\n            label: this.props.title || 'Add',\n            onClick: this.handleAddClick,\n            icon: 'plus_math',\n            class: 'button-add-new',\n        });\n    }\n\n    private getItemControls(): ArrayItemControls {\n        return {\n            allowItemRemoval: this.canRemoveItems(),\n        };\n    }\n\n    private readonly handleAddClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.props.onAddClick(event);\n    };\n\n    private renderItem(\n        item: ArrayFieldItem,\n        index: number,\n        controls: ArrayItemControls\n    ) {\n        const { schema, formData, formContext } = this.props;\n        const itemIndex = item.index ?? index;\n        const allowItemReorder = this.isItemReorderable(item);\n\n        if (isObjectType(schema.items as FormSchema)) {\n            return React.createElement(CollapsibleItemTemplate, {\n                key: item.key,\n                item: item,\n                data: Array.isArray(formData) ? formData[itemIndex] : undefined,\n                schema: schema,\n                formSchema: formContext.schema,\n                index: itemIndex,\n                allowItemRemoval: controls.allowItemRemoval,\n                allowItemReorder: allowItemReorder,\n            });\n        }\n\n        return React.createElement(SimpleItemTemplate, {\n            key: item.key,\n            item: item,\n            index: itemIndex,\n            dataIndex: itemIndex,\n            allowItemRemoval: controls.allowItemRemoval,\n            allowItemReorder: allowItemReorder,\n        });\n    }\n\n    private readonly setContainer = (element: HTMLDivElement | null) => {\n        if (this.container === element) {\n            return;\n        }\n\n        this.teardownDragController();\n        this.container = element ?? undefined;\n        this.setupDragController();\n    };\n\n    private getOrderedItems(): {\n        ordered: ArrayFieldItem[];\n        byIndex: Map<number, ArrayFieldItem>;\n    } {\n        const items = this.props.items ?? [];\n        const byIndex = new Map<number, ArrayFieldItem>();\n\n        let entryIndex = 0;\n        for (const entry of items) {\n            byIndex.set(entry.index ?? entryIndex, entry);\n            entryIndex += 1;\n        }\n\n        const ordered: ArrayFieldItem[] = [];\n        const used = new Set<number>();\n\n        for (const index of this.state.order) {\n            const entry = byIndex.get(index);\n            if (!entry) {\n                continue;\n            }\n\n            ordered.push(entry);\n            used.add(index);\n        }\n\n        for (const [index, entry] of byIndex.entries()) {\n            if (!used.has(index)) {\n                ordered.push(entry);\n            }\n        }\n\n        return {\n            ordered,\n            byIndex,\n        };\n    }\n\n    private readonly handleSortStart = (event: SortableEvent) => {\n        if (!this.canReorderItems()) {\n            return;\n        }\n\n        this.dragSnapshot = [...this.state.order];\n        this.draggedItemIndex = this.getReorderId(event.item);\n\n        if (this.container) {\n            this.container.classList.add(DEFAULT_CONTAINER_CLASS);\n        }\n\n        if (event.item instanceof HTMLElement) {\n            this.applyDropElevation(event.item);\n        }\n    };\n\n    private readonly handleSortEnd = (event: SortableEvent) => {\n        if (!this.canReorderItems()) {\n            return;\n        }\n\n        if (this.container) {\n            this.container.classList.remove(DEFAULT_CONTAINER_CLASS);\n        }\n\n        const snapshot = this.dragSnapshot;\n        const draggedItemIndex = this.draggedItemIndex;\n        this.dragSnapshot = undefined;\n        this.draggedItemIndex = undefined;\n\n        if (event.item instanceof HTMLElement) {\n            this.dropElevationTarget = event.item;\n        }\n\n        const finalOrder = this.readOrderFromDom();\n\n        if (!this.arraysEqual(this.state.order, finalOrder)) {\n            this.setState({ order: finalOrder });\n        }\n\n        if (\n            snapshot === undefined ||\n            draggedItemIndex === undefined ||\n            !(event.item instanceof HTMLElement)\n        ) {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        const fromPosition = snapshot.indexOf(draggedItemIndex);\n        const toPosition = finalOrder.indexOf(draggedItemIndex);\n\n        if (\n            fromPosition === -1 ||\n            toPosition === -1 ||\n            fromPosition === toPosition\n        ) {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        const targetItem = (this.props.items ?? []).find((entry) => {\n            return (entry.index ?? -1) === draggedItemIndex;\n        });\n\n        if (!targetItem || typeof targetItem.onReorderClick !== 'function') {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        requestAnimationFrame(() => {\n            const reorder = targetItem.onReorderClick(\n                draggedItemIndex,\n                toPosition\n            );\n\n            if (typeof reorder === 'function') {\n                reorder();\n            }\n        });\n\n        this.scheduleDropElevationRemoval();\n    };\n\n    private setupDragController() {\n        if (!this.container || !this.canReorderItems()) {\n            this.teardownDragController();\n            return;\n        }\n\n        const reorderableCount = this.getReorderableOrder().length;\n        if (reorderableCount < 2) {\n            this.teardownDragController();\n            return;\n        }\n\n        if (this.sortable) {\n            this.sortable.option('handle', DRAG_HANDLE_SELECTOR);\n            this.sortable.option('draggable', DRAGGABLE_ITEM_SELECTOR);\n            this.sortable.option('disabled', false);\n            this.sortable.option('delay', TOUCH_DRAG_DELAY_MS);\n            this.sortable.option('delayOnTouchOnly', true);\n            return;\n        }\n\n        this.sortable = Sortable.create(this.container, {\n            animation: 150,\n            handle: DRAG_HANDLE_SELECTOR,\n            draggable: DRAGGABLE_ITEM_SELECTOR,\n            delay: TOUCH_DRAG_DELAY_MS,\n            delayOnTouchOnly: true,\n            onStart: this.handleSortStart,\n            onEnd: this.handleSortEnd,\n        });\n    }\n\n    private teardownDragController() {\n        if (this.sortable) {\n            this.sortable.destroy();\n            this.sortable = undefined;\n        }\n\n        this.clearDropElevationTimer();\n\n        if (this.dropElevationTarget) {\n            this.dropElevationTarget.classList.remove(\n                DEFAULT_DROP_ELEVATION_CLASS\n            );\n            this.dropElevationTarget = undefined;\n        }\n\n        if (this.container) {\n            this.container.classList.remove(DEFAULT_CONTAINER_CLASS);\n        }\n\n        this.dragSnapshot = undefined;\n        this.draggedItemIndex = undefined;\n    }\n\n    private canReorderItems(): boolean {\n        if (this.props.disabled || this.props.readonly) {\n            return false;\n        }\n\n        const schema = this.props.schema as FormSchema;\n        const limeOptions = schema?.lime || {};\n\n        return limeOptions.allowItemReorder !== false;\n    }\n\n    private canRemoveItems(): boolean {\n        const schema = this.props.schema as FormSchema;\n        const limeOptions = schema?.lime || {};\n\n        return limeOptions.allowItemRemoval !== false;\n    }\n\n    private isItemReorderable(item: ArrayFieldItem): boolean {\n        return (\n            this.canReorderItems() &&\n            Boolean(item?.hasMoveDown || item?.hasMoveUp)\n        );\n    }\n\n    private isIndexReorderable(index: number): boolean {\n        const item = this.itemByIndex.get(index);\n\n        if (!item) {\n            return false;\n        }\n\n        return this.isItemReorderable(item);\n    }\n\n    private getReorderableOrder(order: number[] = this.state.order): number[] {\n        const result: number[] = [];\n\n        for (const index of order) {\n            if (this.isIndexReorderable(index)) {\n                result.push(index);\n            }\n        }\n\n        return result;\n    }\n\n    private readOrderFromDom(): number[] {\n        if (!this.container) {\n            return [];\n        }\n\n        // Only read the order of the direct children of this array field.\n        // Nested array fields may render `.array-item` elements inside items,\n        // and those must not affect the parent order.\n        const items = [...this.container.children].filter((element) => {\n            return Boolean(element?.classList?.contains?.('array-item'));\n        }) as HTMLElement[];\n\n        const order: number[] = [];\n\n        for (const element of items) {\n            const index = this.getReorderId(element);\n            if (index !== undefined) {\n                order.push(index);\n            }\n        }\n\n        return order;\n    }\n\n    private getReorderId(element: HTMLElement | null): number | undefined {\n        if (!element) {\n            return undefined;\n        }\n\n        const value = element?.dataset?.reorderId;\n        if (value === undefined) {\n            return undefined;\n        }\n\n        const parsed = Number.parseInt(value, 10);\n        return Number.isNaN(parsed) ? undefined : parsed;\n    }\n\n    private applyDropElevation(item: HTMLElement) {\n        if (this.dropElevationTarget && this.dropElevationTarget !== item) {\n            this.dropElevationTarget.classList.remove(\n                DEFAULT_DROP_ELEVATION_CLASS\n            );\n        }\n\n        this.clearDropElevationTimer();\n        item.classList.add(DEFAULT_DROP_ELEVATION_CLASS);\n        this.dropElevationTarget = item;\n    }\n\n    private scheduleDropElevationRemoval() {\n        if (!this.dropElevationTarget) {\n            return;\n        }\n\n        const target = this.dropElevationTarget;\n        this.clearDropElevationTimer();\n        this.dropElevationTimeout = globalThis.setTimeout(() => {\n            target.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);\n            if (this.dropElevationTarget === target) {\n                this.dropElevationTarget = undefined;\n            }\n            this.dropElevationTimeout = undefined;\n        }, DROP_ELEVATION_DURATION);\n    }\n\n    private clearDropElevationTimer() {\n        if (this.dropElevationTimeout !== undefined) {\n            clearTimeout(this.dropElevationTimeout);\n            this.dropElevationTimeout = undefined;\n        }\n    }\n\n    private arraysEqual(a: number[], b: number[]): boolean {\n        if (a.length !== b.length) {\n            return false;\n        }\n\n        let index = 0;\n        for (const value of a) {\n            if (value !== b[index]) {\n                return false;\n            }\n            index += 1;\n        }\n\n        return true;\n    }\n\n    private extractIndices(items: ArrayFieldItem[] = []): number[] {\n        return (items ?? []).map((item, index) => item.index ?? index);\n    }\n}\n"]}

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

@@ -2,6 +2,7 @@ import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { zipObject, isFunction } from 'lodash-es';
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, TAB, } from '../../util/keycodes';
+import { focusTriggerElement } from '../../util/focus-trigger-element';
 const DEFAULT_ROOT_BREADCRUMBS_ITEM = {
   text: '',
   icon: {
@@ -288,6 +289,7 @@ export class Menu {
       this.cancel.emit();
       this.open = false;
       this.currentSubMenu = null;
+      setTimeout(this.focusTrigger, 0);
     };
     this.onTriggerClick = (event) => {
       event.stopPropagation();
@@ -331,7 +333,7 @@ export class Menu {
       this.select.emit(menuItem);
       this.open = false;
       this.currentSubMenu = null;
-      this.setFocus();
+      setTimeout(this.focusTrigger, 0);
     };
     this.onSelect = (event) => {
       event.stopPropagation();
@@ -348,6 +350,9 @@ export class Menu {
     };
     this.setFocus = () => {
       setTimeout(() => {
+        if (!this.open) {
+          return;
+        }
         if (this.searchInput && this.searcher) {
           const observer = new IntersectionObserver(() => {
             observer.unobserve(this.searchInput);
@@ -367,6 +372,11 @@ export class Menu {
         }
       }, 0);
     };
+    this.focusTrigger = () => {
+      var _a, _b;
+      const trigger = (_b = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.assignedElements()) === null || _b === void 0 ? void 0 : _b[0];
+      focusTriggerElement(trigger);
+    };
     this.setSearchElement = (element) => {
       this.searchInput = element;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"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"]}