@eui/ecl 19.3.0-snapshot-1749133123859 → 19.3.0-snapshot-1749210006896
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.
- package/components/ecl-menu/ecl-menu/ecl-menu.component.d.ts +1 -1
- package/components/ecl-menu/ecl-menu/ecl-menu.component.d.ts.map +1 -1
- package/docs/components/EclMenuComponent.html +0 -69
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/fesm2022/eui-ecl-components-ecl-menu.mjs +15 -15
- package/fesm2022/eui-ecl-components-ecl-menu.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -771,6 +771,7 @@ class EclMenuComponent extends ECLBaseDirective {
|
|
|
771
771
|
this.parentHeaderBottomSpaceY = value;
|
|
772
772
|
});
|
|
773
773
|
clearTimeout(this.resizeTimer);
|
|
774
|
+
this.observeElementSizeChanges();
|
|
774
775
|
this.resizeTimer = setTimeout(() => {
|
|
775
776
|
this.checkMenuItemsWidth();
|
|
776
777
|
this.checkMenuOverflow();
|
|
@@ -785,16 +786,6 @@ class EclMenuComponent extends ECLBaseDirective {
|
|
|
785
786
|
this.onCloseHamburgerMenu();
|
|
786
787
|
}
|
|
787
788
|
}
|
|
788
|
-
onResize() {
|
|
789
|
-
clearTimeout(this.resizeTimer);
|
|
790
|
-
this.resizeTimer = setTimeout(() => {
|
|
791
|
-
this.renderer.removeClass(this.el.nativeElement, 'ecl-menu--transition');
|
|
792
|
-
this.totalItemsWidth = 0;
|
|
793
|
-
this.checkMenuItemsWidth();
|
|
794
|
-
this.checkMenuOverflow();
|
|
795
|
-
this.renderer.addClass(this.el.nativeElement, 'ecl-menu--transition');
|
|
796
|
-
}, this.TIMEOUT_INTERVAL);
|
|
797
|
-
}
|
|
798
789
|
ngOnInit() {
|
|
799
790
|
if (isPlatformBrowser(this.platformId)) {
|
|
800
791
|
this.handleRtlChangeState();
|
|
@@ -867,6 +858,18 @@ class EclMenuComponent extends ECLBaseDirective {
|
|
|
867
858
|
this.innerStyleTop = null;
|
|
868
859
|
}
|
|
869
860
|
}
|
|
861
|
+
observeElementSizeChanges() {
|
|
862
|
+
new ResizeObserver(() => {
|
|
863
|
+
clearTimeout(this.resizeTimer);
|
|
864
|
+
this.resizeTimer = setTimeout(() => {
|
|
865
|
+
this.renderer.removeClass(this.el.nativeElement, 'ecl-menu--transition');
|
|
866
|
+
this.totalItemsWidth = 0;
|
|
867
|
+
this.checkMenuItemsWidth();
|
|
868
|
+
this.checkMenuOverflow();
|
|
869
|
+
this.renderer.addClass(this.el.nativeElement, 'ecl-menu--transition');
|
|
870
|
+
}, this.TIMEOUT_INTERVAL);
|
|
871
|
+
}).observe(this.innerSection.nativeElement);
|
|
872
|
+
}
|
|
870
873
|
checkIsTabletDevice() {
|
|
871
874
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
872
875
|
this.isTablet = this.eclUserDeviceService.isTabletDevice(userAgent);
|
|
@@ -909,7 +912,7 @@ class EclMenuComponent extends ECLBaseDirective {
|
|
|
909
912
|
});
|
|
910
913
|
}
|
|
911
914
|
checkMenuOverflow() {
|
|
912
|
-
this.hasOverflow = this.totalItemsWidth > this.innerSection.nativeElement.offsetWidth;
|
|
915
|
+
this.hasOverflow = this.totalItemsWidth > this.innerSection.nativeElement.offsetWidth + 16;
|
|
913
916
|
if (!this.hasOverflow || this.isMobileBreakpoint) {
|
|
914
917
|
this.resetOverflowValues();
|
|
915
918
|
return;
|
|
@@ -1316,7 +1319,7 @@ class EclMenuComponent extends ECLBaseDirective {
|
|
|
1316
1319
|
});
|
|
1317
1320
|
}
|
|
1318
1321
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i1$1.BreakpointObserver }, { token: i0.Renderer2 }, { token: i2$1.EclRtlService }, { token: i2$1.EclUserDeviceService }, { token: i3$1.EclHeaderMenuComunicationService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1319
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: EclMenuComponent, isStandalone: false, selector: "ecl-menu", inputs: { maxLines: ["maxLines", "maxLines", numberAttribute] }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu" }, host: { listeners: { "keydown": "keyEvent($event)"
|
|
1322
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: EclMenuComponent, isStandalone: false, 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\" (click)=\"onOverlayClick()\" [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: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
|
|
1320
1323
|
}
|
|
1321
1324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EclMenuComponent, decorators: [{
|
|
1322
1325
|
type: Component,
|
|
@@ -1367,9 +1370,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
1367
1370
|
}], keyEvent: [{
|
|
1368
1371
|
type: HostListener,
|
|
1369
1372
|
args: ['keydown', ['$event']]
|
|
1370
|
-
}], onResize: [{
|
|
1371
|
-
type: HostListener,
|
|
1372
|
-
args: ['window:resize']
|
|
1373
1373
|
}] } });
|
|
1374
1374
|
|
|
1375
1375
|
const COMPONENTS = [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent];
|