@eui/ecl 17.0.0-rc.2 → 17.0.0-rc.4

package/fesm2022/eui-ecl.mjs

@@ -45,7 +45,7 @@ import '@angular/common/locales/global/sv';
 import Pikaday from 'pikaday';
 import * as i1$5 from '@angular/platform-browser';
 import Hammer from 'hammerjs';
-import { ENTER, TAB, LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
+import { ENTER } from '@angular/cdk/keycodes';
 
 class EclBaseEvent {
     get defaultPrevented() {
@@ -6999,6 +6999,11 @@ class EclMenuMegaComponent extends ECLBaseDirective {
                 this.onPrevMenuItemFocus(item);
                 break;
             }
+            case KeyCode.ESCAPE: {
+                evt.preventDefault();
+                this.menuMegaItemParentFocus.next(new EclMenuItemSelectEvent(item));
+                break;
+            }
             default: {
                 break;
             }
@@ -7074,7 +7079,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }] } });
 
 class EclMenuItemComponent extends ECLBaseDirective {
-    // isVisible = true;
     get cssClasses() {
         return [
             super.getCssClasses('ecl-menu__item'),
@@ -7097,11 +7101,12 @@ class EclMenuItemComponent extends ECLBaseDirective {
     get children() {
         return this.hasChildren ? this.submenu.eclMenuMegaItems.toArray() : [];
     }
-    constructor(el, renderer, arf) {
+    constructor(el, renderer, arf, cdkBreakpointObserver) {
         super();
         this.el = el;
         this.renderer = renderer;
         this.arf = arf;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.routerLink = null;
         this.queryParams = null;
@@ -7109,11 +7114,11 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.href = '';
         this.target = '';
         this.isCurrent = false;
-        this.isHovered = false;
-        this.isVisible = true;
         this.isFull = false;
-        // isHovered = false;
+        this.isHovered = false;
         this.isMobileBreakpoint = false;
+        this.isVisible = true;
+        this.role = 'listitem';
         this.menuItemSelect = new EventEmitter();
         this.menuItemCaret = new EventEmitter();
         this.menuItemHover = new EventEmitter();
@@ -7165,19 +7170,19 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.isExpanded = false;
     }
     onFocusFromNext() {
-        // TODO v17 fix
-        // if (this.menuButton) {
-        //     this.onButtonFocus();
-        // } else {
-        //     this.onLinkFocus();
-        // }
+        if (this.menuButton) {
+            this.onButtonFocus();
+        }
+        else {
+            this.onLinkFocus();
+        }
     }
     onFocusFromPrev() {
         this.onLinkFocus();
     }
     onButtonKeydown(evt) {
-        switch (evt.keyCode) {
-            case DOWN_ARROW: {
+        switch (evt.key) {
+            case KeyCode.ARROW_DOWN: {
                 evt.preventDefault();
                 if (this.isHovered) {
                     this.selectFirstMegaMenuItem();
@@ -7187,26 +7192,31 @@ class EclMenuItemComponent extends ECLBaseDirective {
                 }
                 break;
             }
-            case UP_ARROW: {
+            case KeyCode.ARROW_UP: {
                 evt.preventDefault();
                 this.onLinkFocus();
                 break;
             }
-            case RIGHT_ARROW: {
+            case KeyCode.ARROW_RIGHT: {
                 evt.preventDefault();
                 this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
                 break;
             }
-            case LEFT_ARROW: {
+            case KeyCode.ARROW_LEFT: {
                 evt.preventDefault();
                 this.onLinkFocus();
                 break;
             }
-            case TAB: {
+            case KeyCode.TAB: {
                 this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
                 break;
             }
-            case ENTER: {
+            case KeyCode.ENTER: {
+                evt.preventDefault();
+                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+                break;
+            }
+            case KeyCode.ESCAPE: {
                 evt.preventDefault();
                 this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
                 break;
@@ -7217,32 +7227,37 @@ class EclMenuItemComponent extends ECLBaseDirective {
         }
     }
     onLinkKeydown(evt) {
-        switch (evt.keyCode) {
-            case DOWN_ARROW: {
+        switch (evt.key) {
+            case KeyCode.ARROW_DOWN: {
                 evt.preventDefault();
                 this.onLinkNextFocus(evt);
                 break;
             }
-            case UP_ARROW: {
+            case KeyCode.ARROW_UP: {
                 evt.preventDefault();
                 this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
                 break;
             }
-            case RIGHT_ARROW: {
+            case KeyCode.ARROW_RIGHT: {
                 evt.preventDefault();
                 this.onLinkNextFocus(evt);
                 break;
             }
-            case LEFT_ARROW: {
+            case KeyCode.ARROW_LEFT: {
                 evt.preventDefault();
                 this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
                 break;
             }
-            case ENTER: {
+            case KeyCode.ENTER: {
                 evt.preventDefault();
                 this.onItemClick(evt);
                 break;
             }
+            case KeyCode.ESCAPE: {
+                evt.preventDefault();
+                this.onLinkEscape(evt);
+                break;
+            }
             default: {
                 break;
             }
@@ -7265,6 +7280,15 @@ class EclMenuItemComponent extends ECLBaseDirective {
         }
         this.renderer.removeStyle(currentItem, 'alignItems');
     }
+    onLinkEscape(evt) {
+        if (this.menuButton) {
+            this.menuButton.el.nativeElement.focus();
+            evt.stopPropagation();
+        }
+        else {
+            this.menuLink.nativeElement.blur();
+        }
+    }
     selectFirstMegaMenuItem() {
         this.submenu.selectFirstSubItem();
     }
@@ -7272,16 +7296,15 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.menuLink.nativeElement.focus();
     }
     onLinkNextFocus(evt) {
-        // TODO v17 fix
-        // if (this.menuButton) {
-        //     this.onButtonFocus();
-        // } else {
-        //     this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));
-        // }
+        if (this.menuButton) {
+            this.onButtonFocus();
+        }
+        else {
+            this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+        }
     }
     onButtonFocus() {
-        // TODO v17 fix
-        // this.menuButton.el.nativeElement.focus();
+        this.menuButton.el.nativeElement.focus();
     }
     getMenuItemLinkMaxHeight(linkStyle, maxLines) {
         return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);
@@ -7330,21 +7353,20 @@ class EclMenuItemComponent extends ECLBaseDirective {
         return this.submenu && !!this.submenu.eclMenuMegaItems.find((it) => it.isCurrent);
     }
     observeBreakpointChanges() {
-        // TODO v17 fix
-        // this.cdkBreakpointObserver
-        //     .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])
-        //     .pipe(takeUntil(this.destroy$))
-        //     .subscribe((result) => {
-        //         this.isMobileBreakpoint = result.matches;
-        //     });
+        this.cdkBreakpointObserver
+            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.matches;
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<a\n    #menuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    #menuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button\n    eclButton\n    *ngIf=\"hasChildren && isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<button\n    eclButton\n    *ngIf=\"hasChildren && !isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\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: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }, { token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "attr.role": "this.role", "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a\n    #menuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    #menuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button\n    eclButton\n    *ngIf=\"hasChildren && isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<button\n    eclButton\n    *ngIf=\"hasChildren && !isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\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: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-item', encapsulation: ViewEncapsulation.None, template: "<a\n    #menuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    #menuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button\n    eclButton\n    *ngIf=\"hasChildren && isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<button\n    eclButton\n    *ngIf=\"hasChildren && !isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ApplicationRef }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ApplicationRef }, { type: i1$4.BreakpointObserver }], propDecorators: { id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -7360,6 +7382,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                 type: Input
             }], isCurrent: [{
                 type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -7369,6 +7394,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }], menuLink: [{
                 type: ViewChild,
                 args: ['menuLink']
+            }], menuButton: [{
+                type: ViewChild,
+                args: [EclButtonComponent]
             }], menuItemSelect: [{
                 type: Output
             }], menuItemCaret: [{
@@ -7698,11 +7726,21 @@ class EclMenuComponent extends ECLBaseDirective {
                 this.onRootMenuItemEnter(item);
                 break;
             }
+            case KeyCode.ESCAPE: {
+                this.onRootMenuItemEscape(item, evt.domEvent);
+                break;
+            }
             default: {
                 break;
             }
         }
     }
+    onRootMenuItemEscape(item, evt) {
+        if (item.isHovered) {
+            this.closeRootMenu();
+        }
+        evt.stopPropagation();
+    }
     onPrevMenuItemFocus(item) {
         const index = this.findIndexInArray(item);
         if (index !== 0) {