@eui/ecl 22.0.0-alpha.45 → 22.0.0-alpha.47

package/fesm2022/eui-ecl-components-ecl-menu.mjs

@@ -96,10 +96,12 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "linkExtraAttributes" }] : /* istanbul ignore next */ []));
         this.menuItemSelect = output();
         this.menuItemKeydown = output();
-        this.hasChildren = false;
+        this.hasChildren = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
         this.isExpanded = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
-        this.children = [];
+        this.children = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
         /**
          * The actual link of the menu item.
          */
@@ -411,7 +413,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
         /**
          * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.
          */
-        this.isFull = computed(() => this.hasChildren && this.submenu().eclMenuMegaItems().length >= 13 /* ColTrigger.COL3_TRIGGER */, /* @ts-ignore */
+        this.isFull = computed(() => this.hasChildren() && this.submenu().eclMenuMegaItems().length >= 13 /* ColTrigger.COL3_TRIGGER */, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFull" }] : /* istanbul ignore next */ []));
         /**
          * The default role of the item is 'listitem' and should not be changed.
@@ -440,38 +442,32 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.destroy$ = new Subject();
         this.renderer = inject(Renderer2);
         this.appShell = inject(EuiAppShellService);
+        this.hasEclChildrenDataAttribute = computed(() => this.hasChildren() || undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasEclChildrenDataAttribute" }] : /* istanbul ignore next */ []));
+        this.isDataExpanded = computed(() => this.hasChildren() ? this.isHovered() : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDataExpanded" }] : /* istanbul ignore next */ []));
+        /**
+         * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is
+         * marked current merely because one of its children is the active item (in that case the child link
+         * carries 'aria-current="page"'). Derived from live state so it stays correct whether 'isCurrent' is set
+         * at render time or updated on selection.
+         */
+        this.ariaCurrent = computed(() => this.isCurrent() && !this.hasCurrentChild() ? 'page' : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaCurrent" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether any child (sub-item) is the current item.
+         */
+        this.hasCurrentChild = computed(() => this.children().some((child) => child.isCurrent()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasCurrentChild" }] : /* istanbul ignore next */ []));
+        this.hasChildren = computed(() => !!this.submenu(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+        this.children = computed(() => this.hasChildren() ? this.submenu().eclMenuMegaItems() : [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
             this.observeBreakpointChanges();
             this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());
         });
     }
-    get hasEclChildrenDataAttribute() {
-        return this.hasChildren || undefined;
-    }
-    get isDataExpanded() {
-        return this.hasChildren ? this.isHovered() : null;
-    }
-    /**
-     * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is
-     * marked current merely because one of its children is the active item (in that case the child link
-     * carries 'aria-current="page"'). Derived from live state so it stays correct whether 'isCurrent' is set
-     * at render time or updated on selection.
-     */
-    get ariaCurrent() {
-        return this.isCurrent() && !this.hasCurrentChild ? 'page' : null;
-    }
-    /**
-     * Whether any child (sub-item) is the current item.
-     */
-    get hasCurrentChild() {
-        return this.children.some((child) => child.isCurrent());
-    }
-    get hasChildren() {
-        return !!this.submenu();
-    }
-    get children() {
-        return this.hasChildren ? this.submenu().eclMenuMegaItems() : [];
-    }
     ngAfterContentInit() {
         // Subscibe to submenu component events.
         const submenu = this.submenu();
@@ -518,10 +514,17 @@ class EclMenuItemComponent extends ECLBaseDirective {
         }
     }
     /**
-     * When clicking the caret button, to expand item's children. Used in mobile view.
+     * When clicking the caret button, to expand/collapse item's children.
+     * Used on both desktop (click-to-open/close affordance) and mobile view.
+     *
+     * The caret is a toggle control, not a navigation control: prevent its default
+     * action and stop propagation so that, when the item also has an href/routerLink,
+     * clicking the caret toggles the submenu instead of navigating the link.
      * @param evt
      */
     onItemCaretClick(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
         this.menuItemCaret.emit(new EclMenuItemCaretEvent(this, evt));
     }
     /**
@@ -586,7 +589,10 @@ class EclMenuItemComponent extends ECLBaseDirective {
                 this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt));
                 break;
             }
-            case KeyCode.ENTER: {
+            case KeyCode.ENTER:
+            case KeyCode.SPACE: {
+                // Space must behave like Enter: activate the caret/submenu toggle.
+                // preventDefault stops the page from scrolling on Space.
                 evt.preventDefault();
                 this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt));
                 break;
@@ -725,7 +731,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.renderer.removeStyle(currentLink, 'white-space');
     }
     getClassDependingChildrenCnt() {
-        if (this.hasChildren) {
+        if (this.hasChildren()) {
             if (this.submenu().eclMenuMegaItems().length < 5 /* ColTrigger.COL1_TRIGGER */) {
                 return 'ecl-menu__item--col1';
             }
@@ -763,19 +769,19 @@ class EclMenuItemComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclMenuItemComponent, isStandalone: true, selector: "ecl-menu-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, isCurrentInput: { classPropertyName: "isCurrentInput", publicName: "isCurrent", isSignal: true, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown", menuMegaLastItemTab: "menuMegaLastItemTab" }, host: { attributes: { "role": "listitem" }, listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "class": "cssClasses()", "class.ecl-menu__item--has-children": "hasEclChildrenDataAttribute", "attr.aria-haspopup": "hasEclChildrenDataAttribute", "attr.data-expanded": "isDataExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true, isSignal: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (href()) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href()\"\n        [target]=\"target()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink()\"\n        [queryParams]=\"queryParams()\"\n        [queryParamsHandling]=\"queryParamsHandling()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren) {\n    @if (isMobileBreakpoint()) {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            [attr.data-expanded]=\"isDataExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclMenuItemComponent, isStandalone: true, selector: "ecl-menu-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, isCurrentInput: { classPropertyName: "isCurrentInput", publicName: "isCurrent", isSignal: true, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown", menuMegaLastItemTab: "menuMegaLastItemTab" }, host: { attributes: { "role": "listitem" }, listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "class": "cssClasses()", "class.ecl-menu__item--has-children": "hasEclChildrenDataAttribute()", "attr.aria-haspopup": "hasEclChildrenDataAttribute()", "attr.data-expanded": "isDataExpanded()" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true, isSignal: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (href()) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href()\"\n        [target]=\"target()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent()\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink()\"\n        [queryParams]=\"queryParams()\"\n        [queryParamsHandling]=\"queryParamsHandling()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent()\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren()) {\n    @if (isMobileBreakpoint()) {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            [attr.aria-expanded]=\"isDataExpanded()\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-item', imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], encapsulation: ViewEncapsulation.None, host: {
                         role: 'listitem',
                         '[class]': 'cssClasses()',
-                        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',
-                        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',
-                        '[attr.data-expanded]': 'isDataExpanded',
+                        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute()',
+                        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute()',
+                        '[attr.data-expanded]': 'isDataExpanded()',
                         '(mouseenter)': 'onItemMouseEnter($event)',
                         '(mouseleave)': 'onItemMouseLeave($event)',
-                    }, template: "@if (href()) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href()\"\n        [target]=\"target()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink()\"\n        [queryParams]=\"queryParams()\"\n        [queryParamsHandling]=\"queryParamsHandling()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren) {\n    @if (isMobileBreakpoint()) {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            [attr.data-expanded]=\"isDataExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
+                    }, template: "@if (href()) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href()\"\n        [target]=\"target()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent()\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink()\"\n        [queryParams]=\"queryParams()\"\n        [queryParamsHandling]=\"queryParamsHandling()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent()\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren()) {\n    @if (isMobileBreakpoint()) {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            [attr.aria-expanded]=\"isDataExpanded()\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], toggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAriaLabel", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], isCurrentInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCurrent", required: false }] }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], menuItemSelect: [{ type: i0.Output, args: ["menuItemSelect"] }], menuItemCaret: [{ type: i0.Output, args: ["menuItemCaret"] }], menuItemHover: [{ type: i0.Output, args: ["menuItemHover"] }], menuItemHoverOut: [{ type: i0.Output, args: ["menuItemHoverOut"] }], menuMegaItemSelect: [{ type: i0.Output, args: ["menuMegaItemSelect"] }], menuItemFocus: [{ type: i0.Output, args: ["menuItemFocus"] }], menuItemKeydown: [{ type: i0.Output, args: ["menuItemKeydown"] }], menuMegaLastItemTab: [{ type: i0.Output, args: ["menuMegaLastItemTab"] }], submenu: [{ type: i0.ContentChild, args: [forwardRef(() => EclMenuMegaComponent), { isSignal: true }] }], menuLink: [{ type: i0.ViewChild, args: ['menuLink', { isSignal: true }] }], menuButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclButtonComponent), { isSignal: true }] }] } });
 
 /**
@@ -1213,22 +1219,21 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     onRootMenuItemKeydown(item, evt) {
         switch (evt.domEvent.key) {
+            // At the first-level row, arrows navigate through the items (ECL parity):
+            // ArrowRight/ArrowDown move forward, ArrowLeft/ArrowUp move backward.
+            // Opening a submenu via ArrowDown is handled on the caret button itself
+            // (onButtonKeydown), not here.
+            case KeyCode.ARROW_RIGHT:
             case KeyCode.ARROW_DOWN: {
-                this.onRootMenuItemEnter(item);
-                break;
-            }
-            case KeyCode.ARROW_RIGHT: {
                 this.onNextMenuItemFocus(item);
                 break;
             }
-            case KeyCode.ARROW_UP: {
-                this.onPrevMenuItemFocus(item);
-                break;
-            }
+            case KeyCode.ARROW_UP:
             case KeyCode.ARROW_LEFT: {
                 this.onPrevMenuItemFocus(item);
                 break;
             }
+            case KeyCode.SPACE:
             case KeyCode.ENTER: {
                 this.onRootMenuItemEnter(item);
                 break;
@@ -1287,7 +1292,7 @@ class EclMenuComponent extends ECLBaseDirective {
         this.deselectAllSubmenusItems();
         this.selectMenuItem(requestedRootMenuItem);
         this.onCloseHamburgerMenu();
-        if (this.hasOverflow) {
+        if (this.hasOverflow()) {
             this.managePrevNextButtonsClassOnItemSelected();
         }
         this.sendMenuItemSelectEvent(evt);
@@ -1367,7 +1372,20 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     onRootMenuItemCaret(evt) {
         const requestedRootMenuItem = evt.menuItem;
-        // Suppress hover events briefly after touch/caret interaction (prevents double-trigger on hybrid devices)
+        // Desktop: the caret click is a click-to-open/close affordance (ECL parity with
+        // handleClickOnCaret). Toggle the submenu the same way Enter/Space does on desktop,
+        // without touching the mobile accordion state or suppressing hover.
+        if (!this.isMobileBreakpoint() && !this.isTablet()) {
+            if (!requestedRootMenuItem.isHovered()) {
+                this.openSubmenu(requestedRootMenuItem);
+            }
+            else {
+                this.closeRootMenu();
+            }
+            return;
+        }
+        // Mobile/tablet: suppress hover events briefly after touch/caret interaction
+        // (prevents double-trigger on hybrid devices), then toggle the accordion.
         this.ignoreHover = true;
         this.closeRootMenuButOneItem(requestedRootMenuItem);
         this.toggleExpandedForMenuItem(requestedRootMenuItem);
@@ -1391,7 +1409,7 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     deselectAllSubmenusItems() {
         this.eclRootMenuItems().forEach((rootItem) => {
-            this.deselectMenuItems(rootItem.children);
+            this.deselectMenuItems(rootItem.children());
         });
     }
     deselectMenuItems(items) {