@eui/ecl 21.0.0-alpha.20 → 21.0.0-alpha.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -823,6 +823,9 @@ class EclMenuComponent extends ECLBaseDirective {
823
823
  this.isRtl ? 'ecl-menu--rtl' : '',
824
824
  ].join(' ');
825
825
  }
826
+ get expandedAttr() {
827
+ return this.isHamburgerMenuOpened ? '' : null;
828
+ }
826
829
  constructor() {
827
830
  super();
828
831
  /**
@@ -1448,7 +1451,7 @@ class EclMenuComponent extends ECLBaseDirective {
1448
1451
  });
1449
1452
  }
1450
1453
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1451
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EclMenuComponent, isStandalone: true, selector: "ecl-menu", inputs: { maxLines: ["maxLines", "maxLines", numberAttribute] }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isTablet", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "openCloseButton", first: true, predicate: ["openCloseButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n <button #openCloseButton eclButton isIconOnly variant=\"tertiary\" type=\"button\" class=\"ecl-menu__open\"\n (click)=\"onMenuOpenCloseClick($event)\" [attr.aria-expanded]=\"isHamburgerMenuOpened\">\n <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n @if (isHamburgerMenuOpened) {\n <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n } @else {\n <span eclButtonLabel>{{ 'ecl.menu.MENU' | translate }}</span>\n }\n </button>\n\n <section\n class=\"ecl-menu__inner\"\n #innerSection\n [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n [class.ecl-menu__inner--has-overflow]=\"hasOverflow\"\n aria-label=\"Menu\" [style.top.px]=\"innerStyleTop\">\n <header class=\"ecl-menu__inner-header\">\n <button\n eclButton\n variant=\"ghost\"\n class=\"ecl-menu__close\"\n containerStyleClass=\"ecl-menu__close-container\"\n (click)=\"onMenuCloseClick($event)\">\n <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n </button>\n\n <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n </button>\n </header>\n <button\n eclButton\n #btnPrevious\n tabindex=\"-1\"\n variant=\"ghost\"\n isIconOnly\n class=\"ecl-menu__item ecl-menu__items-previous\"\n [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n [style.display]=\"isShowPrevBtn ? 'flex' : 'none'\"\n (click)=\"onPrevBtnClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n </button>\n <button\n eclButton\n #btnNext\n variant=\"ghost\"\n tabindex=\"-1\"\n isIconOnly\n class=\"ecl-menu__item ecl-menu__items-next\"\n [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n [style.display]=\"isShowNextBtn ? 'flex' : 'none'\"\n (click)=\"onNextBtnClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n </button>\n <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n <ng-content></ng-content>\n </ul>\n </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
1454
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EclMenuComponent, isStandalone: true, selector: "ecl-menu", inputs: { maxLines: ["maxLines", "maxLines", numberAttribute] }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class": "this.cssClasses", "attr.data-expanded": "this.expandedAttr", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isTablet", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "openCloseButton", first: true, predicate: ["openCloseButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n <button #openCloseButton eclButton isIconOnly variant=\"tertiary\" type=\"button\" class=\"ecl-menu__open\"\n (click)=\"onMenuOpenCloseClick($event)\" [attr.aria-expanded]=\"isHamburgerMenuOpened\">\n <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n @if (isHamburgerMenuOpened) {\n <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n } @else {\n <span eclButtonLabel>{{ 'ecl.menu.MENU' | translate }}</span>\n }\n </button>\n\n <section\n class=\"ecl-menu__inner\"\n #innerSection\n [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n [class.ecl-menu__inner--has-overflow]=\"hasOverflow\"\n aria-label=\"Menu\" [style.top.px]=\"innerStyleTop\">\n <header class=\"ecl-menu__inner-header\">\n <button\n eclButton\n variant=\"ghost\"\n class=\"ecl-menu__close\"\n containerStyleClass=\"ecl-menu__close-container\"\n (click)=\"onMenuCloseClick($event)\">\n <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n </button>\n\n <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n </button>\n </header>\n <button\n eclButton\n #btnPrevious\n tabindex=\"-1\"\n variant=\"ghost\"\n isIconOnly\n class=\"ecl-menu__item ecl-menu__items-previous\"\n [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n [style.display]=\"isShowPrevBtn ? 'flex' : 'none'\"\n (click)=\"onPrevBtnClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n </button>\n <button\n eclButton\n #btnNext\n variant=\"ghost\"\n tabindex=\"-1\"\n isIconOnly\n class=\"ecl-menu__item ecl-menu__items-next\"\n [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n [style.display]=\"isShowNextBtn ? 'flex' : 'none'\"\n (click)=\"onNextBtnClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n </button>\n <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n <ng-content></ng-content>\n </ul>\n </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
1452
1455
  }
1453
1456
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuComponent, decorators: [{
1454
1457
  type: Component,
@@ -1481,9 +1484,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3",
1481
1484
  }], cssClasses: [{
1482
1485
  type: HostBinding,
1483
1486
  args: ['class']
1484
- }], isHamburgerMenuOpened: [{
1487
+ }], expandedAttr: [{
1485
1488
  type: HostBinding,
1486
- args: ['attr.aria-expanded']
1489
+ args: ['attr.data-expanded']
1487
1490
  }], role: [{
1488
1491
  type: HostBinding,
1489
1492
  args: ['attr.role']