@eui/ecl 22.0.0-alpha.2 → 22.0.0-alpha.21

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

@@ -400,8 +400,20 @@ class EclMenuItemComponent extends ECLBaseDirective {
     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 ? true : null;
+        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();
@@ -773,7 +785,7 @@ 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: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, 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: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, isCurrent: { classPropertyName: "isCurrent", publicName: "isCurrent", isSignal: false, 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: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, 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: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, isCurrent: { classPropertyName: "isCurrent", publicName: "isCurrent", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
@@ -793,7 +805,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             }], 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: Input
             }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], isCurrent: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], 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 }] }], menuItemSelect: [{
                 type: Output
             }], menuItemCaret: [{