@eui/ecl 17.0.0-rc.6 → 17.0.0-rc.8
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/docs/components/EclBreadcrumbSegmentComponent.html +69 -0
- package/docs/components/EclCarouselComponent.html +1 -1
- package/docs/components/EclMenuMegaItemComponent.html +69 -0
- package/docs/components/EclMultiselectComponent.html +24 -0
- package/docs/components/EclMultiselectDropdownComponent.html +1 -1
- package/docs/components/EclMultiselectInputComponent.html +24 -0
- package/docs/components/EclPaginationItemComponent.html +86 -0
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/lib/components/ecl-breadcrumb/ecl-breadcrumb-segment.component.mjs +6 -2
- package/esm2022/lib/components/ecl-carousel/ecl-carousel.component.mjs +3 -3
- package/esm2022/lib/components/ecl-content-item/ecl-content-item-image.directive.mjs +2 -2
- package/esm2022/lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega-item.component.mjs +6 -2
- package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.mjs +3 -3
- package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.mjs +6 -3
- package/esm2022/lib/components/ecl-multiselect/ecl-multiselect.component.mjs +7 -3
- package/esm2022/lib/components/ecl-pagination/ecl-pagination-item.component.mjs +6 -2
- package/fesm2022/eui-ecl.mjs +31 -12
- package/fesm2022/eui-ecl.mjs.map +1 -1
- package/lib/components/ecl-breadcrumb/ecl-breadcrumb-segment.component.d.ts +1 -0
- package/lib/components/ecl-breadcrumb/ecl-breadcrumb-segment.component.d.ts.map +1 -1
- package/lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega-item.component.d.ts +1 -0
- package/lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega-item.component.d.ts.map +1 -1
- package/lib/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.d.ts +2 -1
- package/lib/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.d.ts.map +1 -1
- package/lib/components/ecl-multiselect/ecl-multiselect.component.d.ts +2 -1
- package/lib/components/ecl-multiselect/ecl-multiselect.component.d.ts.map +1 -1
- package/lib/components/ecl-pagination/ecl-pagination-item.component.d.ts +1 -0
- package/lib/components/ecl-pagination/ecl-pagination-item.component.d.ts.map +1 -1
- package/package.json +1 -1
package/fesm2022/eui-ecl.mjs
CHANGED
|
@@ -2656,6 +2656,7 @@ class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
|
|
|
2656
2656
|
super();
|
|
2657
2657
|
this.el = el;
|
|
2658
2658
|
this.tabIndex = '-1';
|
|
2659
|
+
this.role = 'listitem';
|
|
2659
2660
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2660
2661
|
this.routerLink = null;
|
|
2661
2662
|
this.queryParams = null;
|
|
@@ -2676,7 +2677,7 @@ class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
|
|
|
2676
2677
|
}
|
|
2677
2678
|
}
|
|
2678
2679
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclBreadcrumbSegmentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2679
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: "isCurrentPage", isNegative: "isNegative", isHidden: "isHidden" }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.ecl-u-d-none": "this.isHidden", "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a\n *ngIf=\"!isCurrentPage && href\"\n eclLink\n variant=\"standalone\"\n [isNoVisited]=\"true\"\n [isNegative]=\"isNegative\"\n [href]=\"href\"\n (click)=\"onSegmentClick($event)\"\n class=\"ecl-breadcrumb__link\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n *ngIf=\"!isCurrentPage && !href\"\n eclLink\n [routerLink]=\"routerLink\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n variant=\"standalone\"\n [isNoVisited]=\"true\"\n [isNegative]=\"isNegative\"\n [href]=\"href\"\n tabindex\n (click)=\"onSegmentClick($event)\"\n class=\"ecl-breadcrumb__link\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" role=\"presentation\" icon=\"corner-arrow\" size=\"2xs\" class=\"ecl-breadcrumb__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ 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"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2680
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: "isCurrentPage", isNegative: "isNegative", isHidden: "isHidden" }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a\n *ngIf=\"!isCurrentPage && href\"\n eclLink\n variant=\"standalone\"\n [isNoVisited]=\"true\"\n [isNegative]=\"isNegative\"\n [href]=\"href\"\n (click)=\"onSegmentClick($event)\"\n class=\"ecl-breadcrumb__link\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n *ngIf=\"!isCurrentPage && !href\"\n eclLink\n [routerLink]=\"routerLink\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n variant=\"standalone\"\n [isNoVisited]=\"true\"\n [isNegative]=\"isNegative\"\n [href]=\"href\"\n tabindex\n (click)=\"onSegmentClick($event)\"\n class=\"ecl-breadcrumb__link\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" role=\"presentation\" icon=\"corner-arrow\" size=\"2xs\" class=\"ecl-breadcrumb__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ 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"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2680
2681
|
}
|
|
2681
2682
|
__decorate([
|
|
2682
2683
|
coerceBoolean
|
|
@@ -2690,6 +2691,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
2690
2691
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tabIndex: [{
|
|
2691
2692
|
type: HostBinding,
|
|
2692
2693
|
args: ['attr.tabindex']
|
|
2694
|
+
}], role: [{
|
|
2695
|
+
type: HostBinding,
|
|
2696
|
+
args: ['attr.role']
|
|
2693
2697
|
}], routerLink: [{
|
|
2694
2698
|
type: Input
|
|
2695
2699
|
}], queryParams: [{
|
|
@@ -3463,7 +3467,7 @@ class EclCarouselComponent extends ECLBaseDirective {
|
|
|
3463
3467
|
}).observe(this.carouselContainerElement);
|
|
3464
3468
|
}
|
|
3465
3469
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclCarouselComponent, deps: [{ token: i1$4.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3466
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclCarouselComponent, selector: "ecl-carousel", inputs: { isAutoplay: "isAutoplay", playInterval: "playInterval" }, outputs: { slide: "slide" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "navigationButtons", predicate: ["currButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n <div #slidesContainer\n (keyup)=\"onFirstCarouselElementPress($event)\"\n class=\"ecl-carousel__slides\"\n [style.width.px]=\"getCarouselSlidesWidth()\"\n [style.left.px]=\"getCarouselSlidesOffset()\"\n [style.transition-duration.s]=\"transitionDuration\"\n (mouseover)=\"onSlideHover()\"\n (mouseout)=\"onSlideHoverout()\">\n <ecl-carousel-item #firstHiddenItem *ngIf=\"hasControls()\" [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n <ng-content></ng-content>\n <ecl-carousel-item #lastHiddenItem *ngIf=\"hasControls()\" [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n </div>\n\n <button *ngIf=\"hasControls() &&
|
|
3470
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclCarouselComponent, selector: "ecl-carousel", inputs: { isAutoplay: "isAutoplay", playInterval: "playInterval" }, outputs: { slide: "slide" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "navigationButtons", predicate: ["currButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n <div #slidesContainer\n (keyup)=\"onFirstCarouselElementPress($event)\"\n class=\"ecl-carousel__slides\"\n [style.width.px]=\"getCarouselSlidesWidth()\"\n [style.left.px]=\"getCarouselSlidesOffset()\"\n [style.transition-duration.s]=\"transitionDuration\"\n (mouseover)=\"onSlideHover()\"\n (mouseout)=\"onSlideHoverout()\">\n <ecl-carousel-item #firstHiddenItem *ngIf=\"hasControls()\" [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n <ng-content></ng-content>\n <ecl-carousel-item #lastHiddenItem *ngIf=\"hasControls()\" [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n </div>\n\n <button *ngIf=\"hasControls() && isLargeDesktopBreakpoint\" class=\"ecl-carousel__prev\" (click)=\"onPreviousSlideClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\" isInverted class=\"ecl-carousel__icon-default\"> </ecl-icon>\n <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n </button>\n\n <button *ngIf=\"hasControls() && isLargeDesktopBreakpoint\" class=\"ecl-carousel__next\" (click)=\"onNextSlideClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\" isInverted class=\"ecl-carousel__icon-default\"> </ecl-icon>\n <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n </button>\n</div>\n\n<div *ngIf=\"hasControls()\" class=\"ecl-carousel__controls\">\n <div class=\"ecl-container\">\n <div class=\"ecl-carousel__autoplay\">\n <button\n #playButton\n class=\"ecl-carousel__play\"\n [style.display]=\"isPlaying ? 'none' : ''\"\n (keydown)=\"onPlayKeyboardPress($event)\"\n (click)=\"onPlayClick()\">\n <ecl-icon icon=\"play\" size=\"l\" class=\"ecl-carousel__icon-default\" isInverted> </ecl-icon>\n <ecl-icon icon=\"play-filled\" size=\"l\" class=\"ecl-carousel__icon-active\" isInverted> </ecl-icon>\n <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.AUTOPLAY' | translate }}</div>\n </button>\n <button\n #pauseButton\n class=\"ecl-carousel__pause\"\n [style.display]=\"isPlaying ? '' : 'none'\"\n (keydown)=\"onPlayKeyboardPress($event)\"\n (click)=\"onPauseClick()\">\n <ecl-icon icon=\"pause\" size=\"l\" class=\"ecl-carousel__icon-default\" isInverted> </ecl-icon>\n <ecl-icon icon=\"pause-filled\" size=\"l\" class=\"ecl-carousel__icon-active\" isInverted> </ecl-icon>\n <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PAUSE' | translate }}</div>\n </button>\n </div>\n\n <div class=\"ecl-carousel__navigation\">\n <button\n *ngFor=\"let slide of slides; let i = index\"\n #currButton\n [attr.aria-current]=\"i === getCurrentSlideIndex()\"\n class=\"ecl-carousel__navigation-item\"\n (click)=\"onSlideControlClick(slide)\"\n (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.GO-TO-SLIDE' | translate }} {{ i + 1 }}</span>\n </button>\n </div>\n\n <button *ngIf=\"!isLargeDesktopBreakpoint\" #prevButton class=\"ecl-carousel__prev\" (click)=\"onPreviousSlideClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\" isInverted class=\"ecl-carousel__icon-default\"> </ecl-icon>\n <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n </button>\n\n <div class=\"ecl-carousel__pagination\">\n <span class=\"ecl-carousel__current\">{{ getCurrentSlideIndex() + 1 }}</span>\n {{ 'ecl.common.OF' | translate }}\n <span class=\"ecl-carousel__max\">{{ slides.length }}</span>\n </div>\n\n <button *ngIf=\"!isLargeDesktopBreakpoint\" class=\"ecl-carousel__next\" (click)=\"onNextSlideClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\" isInverted class=\"ecl-carousel__icon-default\"> </ecl-icon>\n <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
3467
3471
|
}
|
|
3468
3472
|
__decorate([
|
|
3469
3473
|
coerceBoolean
|
|
@@ -3479,7 +3483,7 @@ __decorate([
|
|
|
3479
3483
|
], EclCarouselComponent.prototype, "slidesContainer", void 0);
|
|
3480
3484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclCarouselComponent, decorators: [{
|
|
3481
3485
|
type: Component,
|
|
3482
|
-
args: [{ selector: 'ecl-carousel', template: "<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n <div #slidesContainer\n (keyup)=\"onFirstCarouselElementPress($event)\"\n class=\"ecl-carousel__slides\"\n [style.width.px]=\"getCarouselSlidesWidth()\"\n [style.left.px]=\"getCarouselSlidesOffset()\"\n [style.transition-duration.s]=\"transitionDuration\"\n (mouseover)=\"onSlideHover()\"\n (mouseout)=\"onSlideHoverout()\">\n <ecl-carousel-item #firstHiddenItem *ngIf=\"hasControls()\" [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n <ng-content></ng-content>\n <ecl-carousel-item #lastHiddenItem *ngIf=\"hasControls()\" [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n </div>\n\n <button *ngIf=\"hasControls() &&
|
|
3486
|
+
args: [{ selector: 'ecl-carousel', template: "<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n <div #slidesContainer\n (keyup)=\"onFirstCarouselElementPress($event)\"\n class=\"ecl-carousel__slides\"\n [style.width.px]=\"getCarouselSlidesWidth()\"\n [style.left.px]=\"getCarouselSlidesOffset()\"\n [style.transition-duration.s]=\"transitionDuration\"\n (mouseover)=\"onSlideHover()\"\n (mouseout)=\"onSlideHoverout()\">\n <ecl-carousel-item #firstHiddenItem *ngIf=\"hasControls()\" [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n <ng-content></ng-content>\n <ecl-carousel-item #lastHiddenItem *ngIf=\"hasControls()\" [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n </div>\n\n <button *ngIf=\"hasControls() && isLargeDesktopBreakpoint\" class=\"ecl-carousel__prev\" (click)=\"onPreviousSlideClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\" isInverted class=\"ecl-carousel__icon-default\"> </ecl-icon>\n <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n </button>\n\n <button *ngIf=\"hasControls() && isLargeDesktopBreakpoint\" class=\"ecl-carousel__next\" (click)=\"onNextSlideClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\" isInverted class=\"ecl-carousel__icon-default\"> </ecl-icon>\n <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n </button>\n</div>\n\n<div *ngIf=\"hasControls()\" class=\"ecl-carousel__controls\">\n <div class=\"ecl-container\">\n <div class=\"ecl-carousel__autoplay\">\n <button\n #playButton\n class=\"ecl-carousel__play\"\n [style.display]=\"isPlaying ? 'none' : ''\"\n (keydown)=\"onPlayKeyboardPress($event)\"\n (click)=\"onPlayClick()\">\n <ecl-icon icon=\"play\" size=\"l\" class=\"ecl-carousel__icon-default\" isInverted> </ecl-icon>\n <ecl-icon icon=\"play-filled\" size=\"l\" class=\"ecl-carousel__icon-active\" isInverted> </ecl-icon>\n <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.AUTOPLAY' | translate }}</div>\n </button>\n <button\n #pauseButton\n class=\"ecl-carousel__pause\"\n [style.display]=\"isPlaying ? '' : 'none'\"\n (keydown)=\"onPlayKeyboardPress($event)\"\n (click)=\"onPauseClick()\">\n <ecl-icon icon=\"pause\" size=\"l\" class=\"ecl-carousel__icon-default\" isInverted> </ecl-icon>\n <ecl-icon icon=\"pause-filled\" size=\"l\" class=\"ecl-carousel__icon-active\" isInverted> </ecl-icon>\n <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PAUSE' | translate }}</div>\n </button>\n </div>\n\n <div class=\"ecl-carousel__navigation\">\n <button\n *ngFor=\"let slide of slides; let i = index\"\n #currButton\n [attr.aria-current]=\"i === getCurrentSlideIndex()\"\n class=\"ecl-carousel__navigation-item\"\n (click)=\"onSlideControlClick(slide)\"\n (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.GO-TO-SLIDE' | translate }} {{ i + 1 }}</span>\n </button>\n </div>\n\n <button *ngIf=\"!isLargeDesktopBreakpoint\" #prevButton class=\"ecl-carousel__prev\" (click)=\"onPreviousSlideClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\" isInverted class=\"ecl-carousel__icon-default\"> </ecl-icon>\n <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n </button>\n\n <div class=\"ecl-carousel__pagination\">\n <span class=\"ecl-carousel__current\">{{ getCurrentSlideIndex() + 1 }}</span>\n {{ 'ecl.common.OF' | translate }}\n <span class=\"ecl-carousel__max\">{{ slides.length }}</span>\n </div>\n\n <button *ngIf=\"!isLargeDesktopBreakpoint\" class=\"ecl-carousel__next\" (click)=\"onNextSlideClick()\">\n <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\" isInverted class=\"ecl-carousel__icon-default\"> </ecl-icon>\n <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"] }]
|
|
3483
3487
|
}], ctorParameters: () => [{ type: i1$4.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { isAutoplay: [{
|
|
3484
3488
|
type: Input
|
|
3485
3489
|
}], playInterval: [{
|
|
@@ -4333,7 +4337,7 @@ class EclContentItemPictureDirective extends ECLBaseDirective {
|
|
|
4333
4337
|
}
|
|
4334
4338
|
get cssClasses() {
|
|
4335
4339
|
return [
|
|
4336
|
-
super.getCssClasses('ecl-content-item__picture'),
|
|
4340
|
+
super.getCssClasses('ecl-content-item__picture ecl-picture'),
|
|
4337
4341
|
`ecl-content-item__picture--${this.size}`,
|
|
4338
4342
|
`ecl-content-item__picture--${this.position}`,
|
|
4339
4343
|
]
|
|
@@ -6856,6 +6860,7 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
|
|
|
6856
6860
|
this.href = '';
|
|
6857
6861
|
this.target = '';
|
|
6858
6862
|
this.cmpClass = true;
|
|
6863
|
+
this.role = 'listitem';
|
|
6859
6864
|
this.menuItemSelect = new EventEmitter();
|
|
6860
6865
|
this.menuItemKeydown = new EventEmitter();
|
|
6861
6866
|
this.hasChildren = false;
|
|
@@ -6890,7 +6895,7 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
|
|
|
6890
6895
|
this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
|
|
6891
6896
|
}
|
|
6892
6897
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclMenuMegaItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6893
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "class.ecl-menu__subitem--current": "this.isCurrent" } }, queries: [{ propertyName: "iconComponents", predicate: i0.forwardRef(() => EclIconComponent) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<a #megaMenuLink\n *ngIf=\"href\"\n [href]=\"href\"\n [target]=\"target\"\n class=\"ecl-menu__sublink\"\n [class.ecl-menu__sublink--current]=\"isCurrent\"\n (click)=\"onItemClick($event)\"\n (keydown)=\"onKeydown($event)\">\n {{ label }}\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<a #megaMenuLink\n *ngIf=\"!href\"\n tabindex=\"0\"\n [routerLink]=\"routerLink\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n class=\"ecl-menu__sublink\"\n [class.ecl-menu__sublink--current]=\"isCurrent\"\n (click)=\"onItemClick($event)\"\n (keydown)=\"onKeydown($event)\">\n {{ label }}\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:list-item}\n"], dependencies: [{ 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"] }] }); }
|
|
6898
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "attr.role": "this.role", "class.ecl-menu__subitem--current": "this.isCurrent" } }, queries: [{ propertyName: "iconComponents", predicate: i0.forwardRef(() => EclIconComponent) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<a #megaMenuLink\n *ngIf=\"href\"\n [href]=\"href\"\n [target]=\"target\"\n class=\"ecl-menu__sublink\"\n [class.ecl-menu__sublink--current]=\"isCurrent\"\n (click)=\"onItemClick($event)\"\n (keydown)=\"onKeydown($event)\">\n {{ label }}\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<a #megaMenuLink\n *ngIf=\"!href\"\n tabindex=\"0\"\n [routerLink]=\"routerLink\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n class=\"ecl-menu__sublink\"\n [class.ecl-menu__sublink--current]=\"isCurrent\"\n (click)=\"onItemClick($event)\"\n (keydown)=\"onKeydown($event)\">\n {{ label }}\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:list-item}\n"], dependencies: [{ 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"] }] }); }
|
|
6894
6899
|
}
|
|
6895
6900
|
__decorate([
|
|
6896
6901
|
coerceBoolean
|
|
@@ -6915,6 +6920,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
6915
6920
|
}], cmpClass: [{
|
|
6916
6921
|
type: HostBinding,
|
|
6917
6922
|
args: ['class.ecl-menu__subitem']
|
|
6923
|
+
}], role: [{
|
|
6924
|
+
type: HostBinding,
|
|
6925
|
+
args: ['attr.role']
|
|
6918
6926
|
}], isCurrent: [{
|
|
6919
6927
|
type: Input
|
|
6920
6928
|
}, {
|
|
@@ -8551,12 +8559,13 @@ class EclMultiselectMainInputClickEvent {
|
|
|
8551
8559
|
}
|
|
8552
8560
|
class EclMultiselectInputComponent extends ECLBaseDirective {
|
|
8553
8561
|
get cssClasses() {
|
|
8554
|
-
return [super.getCssClasses('ecl-select__container'),
|
|
8562
|
+
return [super.getCssClasses('ecl-select__container'), `ecl-select__container--${this.eclSize}`].join(' ').trim();
|
|
8555
8563
|
}
|
|
8556
8564
|
constructor() {
|
|
8557
8565
|
super();
|
|
8558
8566
|
this.mainInputClick = new EventEmitter();
|
|
8559
8567
|
this.mainInputKeydown = new EventEmitter();
|
|
8568
|
+
this.eclSize = 'm';
|
|
8560
8569
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8561
8570
|
this.isDisabled = false;
|
|
8562
8571
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -8591,7 +8600,7 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
|
|
|
8591
8600
|
this.inputMultiselect.nativeElement.focus();
|
|
8592
8601
|
}
|
|
8593
8602
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclMultiselectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8594
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { isDisabled: "isDisabled", isInvalid: "isInvalid", inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\n <span>{{ selectedItemsCount }}</span>\n</div>\n<input\n class=\"ecl-select ecl-select__multiple-toggle\"\n #inputMultiselect\n type=\"text\"\n [attr.placeholder]=\"inputPlaceholder\"\n readonly=\"true\"\n [value]=\"selectedItems\"\n [attr.disabled]=\"isDisabled ? true : undefined\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"onClick($event)\" />\n<div class=\"ecl-select__icon\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" class=\"ecl-select__icon-shape\" transform=\"rotate-180\"></ecl-icon>\n</div>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] }); }
|
|
8603
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", isDisabled: "isDisabled", isInvalid: "isInvalid", inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\n <span>{{ selectedItemsCount }}</span>\n</div>\n<input\n class=\"ecl-select ecl-select__multiple-toggle\"\n #inputMultiselect\n type=\"text\"\n [attr.placeholder]=\"inputPlaceholder\"\n readonly=\"true\"\n [value]=\"selectedItems\"\n [attr.disabled]=\"isDisabled ? true : undefined\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"onClick($event)\" />\n<div class=\"ecl-select__icon\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" class=\"ecl-select__icon-shape\" transform=\"rotate-180\"></ecl-icon>\n</div>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] }); }
|
|
8595
8604
|
}
|
|
8596
8605
|
__decorate([
|
|
8597
8606
|
coerceBoolean
|
|
@@ -8609,6 +8618,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8609
8618
|
type: Output
|
|
8610
8619
|
}], mainInputKeydown: [{
|
|
8611
8620
|
type: Output
|
|
8621
|
+
}], eclSize: [{
|
|
8622
|
+
type: Input
|
|
8612
8623
|
}], isDisabled: [{
|
|
8613
8624
|
type: Input
|
|
8614
8625
|
}, {
|
|
@@ -9029,7 +9040,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
|
|
|
9029
9040
|
useExisting: forwardRef((() => EclMultiselectDropdownComponent)),
|
|
9030
9041
|
multi: true,
|
|
9031
9042
|
},
|
|
9032
|
-
], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAll", first: true, predicate: ["selectAll"], descendants: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n eclMultiselectInput\n #eclMultiselectInput\n [inputPlaceholder]=\"mainInputPlaceholder\"\n [selectedItems]=\"selectedItems\"\n (mainInputClick)=\"onClickMainInput($event)\"\n (mainInputKeydown)=\"onKeydownMainInput($event)\"\n [isDisabled]=\"disabled\"\n [isInvalid]=\"isInvalid\"></div>\n<div\n [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--
|
|
9043
|
+
], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAll", first: true, predicate: ["selectAll"], descendants: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n eclMultiselectInput\n #eclMultiselectInput\n [inputPlaceholder]=\"mainInputPlaceholder\"\n [selectedItems]=\"selectedItems\"\n (mainInputClick)=\"onClickMainInput($event)\"\n (mainInputKeydown)=\"onKeydownMainInput($event)\"\n [isDisabled]=\"disabled\"\n [isInvalid]=\"isInvalid\"\n [eclSize]=\"eclSize\"></div>\n<div\n [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize}}\">\n <input\n class=\"ecl-text-input\"\n type=\"search\"\n #searchInput\n [placeholder]=\"searchFieldPlaceholder\"\n (input)=\"onSearch($event.target)\"\n (keydown.enter)=\"onEnterSearch($event)\"\n (keydown.arrowup)=\"onArrowUpSearch($event)\"\n (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n <div eclCheckbox #selectAll class=\"ecl-select__multiple-all\">\n <input\n eclCheckboxInput\n #selectAllCheckbox\n [id]=\"selectAllId\"\n type=\"checkbox\"\n (click)=\"onSelectAll()\"\n (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" />\n <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }}) </label>\n </div>\n <div class=\"ecl-select__multiple-options\">\n <ng-container *ngFor=\"let item of multiOptionDirectives\">\n <div eclMultiselectOptgroup *ngIf=\"item.isOptGroup()\" [label]=\"item.label\">\n <div\n eclMultiselectOption\n *ngFor=\"let elem of item.eclOptionItems\"\n [value]=\"elem.value\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabled\"\n [isChecked]=\"elem.selected\"\n [class]=\"elem.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </div>\n <div\n eclMultiselectOption\n *ngIf=\"!item.isOptGroup()\"\n [value]=\"item.value\"\n [label]=\"item.label\"\n [disabled]=\"item.disabled\"\n [isChecked]=\"item.selected\"\n [class]=\"item.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </ng-container>\n <div *ngIf=\"isShowNoResultsFound\" class=\"ecl-select__multiple-no-results\">\n <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n </div>\n </div>\n <div *ngIf=\"isShowToolbar\" class=\"ecl-select-multiple-toolbar\">\n <button\n eclButton\n variant=\"ghost\"\n #clearAllBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowright)=\"onArrowRightClear($event)\"\n (click)=\"onClickClearAll($event)\">\n {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n </button>\n <button\n eclButton\n variant=\"primary\"\n #closeBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowleft)=\"onArrowLeftClose($event)\"\n (keydown.tab)=\"onTabClose($event)\"\n (click)=\"onClickClose($event)\">\n {{ 'ecl.common.CLOSE' | translate }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "div[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
9033
9044
|
}
|
|
9034
9045
|
__decorate([
|
|
9035
9046
|
coerceBoolean
|
|
@@ -9045,7 +9056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
9045
9056
|
useExisting: forwardRef((() => EclMultiselectDropdownComponent)),
|
|
9046
9057
|
multi: true,
|
|
9047
9058
|
},
|
|
9048
|
-
], template: "<div\n eclMultiselectInput\n #eclMultiselectInput\n [inputPlaceholder]=\"mainInputPlaceholder\"\n [selectedItems]=\"selectedItems\"\n (mainInputClick)=\"onClickMainInput($event)\"\n (mainInputKeydown)=\"onKeydownMainInput($event)\"\n [isDisabled]=\"disabled\"\n [isInvalid]=\"isInvalid\"></div>\n<div\n [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--
|
|
9059
|
+
], template: "<div\n eclMultiselectInput\n #eclMultiselectInput\n [inputPlaceholder]=\"mainInputPlaceholder\"\n [selectedItems]=\"selectedItems\"\n (mainInputClick)=\"onClickMainInput($event)\"\n (mainInputKeydown)=\"onKeydownMainInput($event)\"\n [isDisabled]=\"disabled\"\n [isInvalid]=\"isInvalid\"\n [eclSize]=\"eclSize\"></div>\n<div\n [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize}}\">\n <input\n class=\"ecl-text-input\"\n type=\"search\"\n #searchInput\n [placeholder]=\"searchFieldPlaceholder\"\n (input)=\"onSearch($event.target)\"\n (keydown.enter)=\"onEnterSearch($event)\"\n (keydown.arrowup)=\"onArrowUpSearch($event)\"\n (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n <div eclCheckbox #selectAll class=\"ecl-select__multiple-all\">\n <input\n eclCheckboxInput\n #selectAllCheckbox\n [id]=\"selectAllId\"\n type=\"checkbox\"\n (click)=\"onSelectAll()\"\n (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" />\n <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }}) </label>\n </div>\n <div class=\"ecl-select__multiple-options\">\n <ng-container *ngFor=\"let item of multiOptionDirectives\">\n <div eclMultiselectOptgroup *ngIf=\"item.isOptGroup()\" [label]=\"item.label\">\n <div\n eclMultiselectOption\n *ngFor=\"let elem of item.eclOptionItems\"\n [value]=\"elem.value\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabled\"\n [isChecked]=\"elem.selected\"\n [class]=\"elem.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </div>\n <div\n eclMultiselectOption\n *ngIf=\"!item.isOptGroup()\"\n [value]=\"item.value\"\n [label]=\"item.label\"\n [disabled]=\"item.disabled\"\n [isChecked]=\"item.selected\"\n [class]=\"item.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </ng-container>\n <div *ngIf=\"isShowNoResultsFound\" class=\"ecl-select__multiple-no-results\">\n <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n </div>\n </div>\n <div *ngIf=\"isShowToolbar\" class=\"ecl-select-multiple-toolbar\">\n <button\n eclButton\n variant=\"ghost\"\n #clearAllBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowright)=\"onArrowRightClear($event)\"\n (click)=\"onClickClearAll($event)\">\n {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n </button>\n <button\n eclButton\n variant=\"primary\"\n #closeBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowleft)=\"onArrowLeftClose($event)\"\n (keydown.tab)=\"onTabClose($event)\"\n (click)=\"onClickClose($event)\">\n {{ 'ecl.common.CLOSE' | translate }}\n </button>\n </div>\n</div>\n" }]
|
|
9049
9060
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }], propDecorators: { searchInput: [{
|
|
9050
9061
|
type: ViewChild,
|
|
9051
9062
|
args: ['searchInput']
|
|
@@ -9187,6 +9198,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
|
|
|
9187
9198
|
this.viewContainerRef = viewContainerRef;
|
|
9188
9199
|
this.differs = differs;
|
|
9189
9200
|
this.eclChange = new EventEmitter();
|
|
9201
|
+
this.eclSize = 'm';
|
|
9190
9202
|
this._disabled = false;
|
|
9191
9203
|
this._isInvalid = false;
|
|
9192
9204
|
this._eclPlaceholder = 'Select item';
|
|
@@ -9226,7 +9238,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
|
|
|
9226
9238
|
createHostWrapperContainer() {
|
|
9227
9239
|
const wrapperContainer = document.createElement('div');
|
|
9228
9240
|
wrapperContainer.classList.add('ecl-select__container');
|
|
9229
|
-
wrapperContainer.classList.add(
|
|
9241
|
+
wrapperContainer.classList.add(`ecl-select__container--${this.eclSize}`);
|
|
9230
9242
|
return wrapperContainer;
|
|
9231
9243
|
}
|
|
9232
9244
|
getHostElement() {
|
|
@@ -9243,6 +9255,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
|
|
|
9243
9255
|
this.eclChange.emit(evt);
|
|
9244
9256
|
});
|
|
9245
9257
|
this.multiselectComponent.mainInputPlaceholder = this.eclPlaceholder;
|
|
9258
|
+
this.multiselectComponent.eclSize = this.eclSize;
|
|
9246
9259
|
if (ngControl) {
|
|
9247
9260
|
ngControl.valueAccessor = this.multiselectComponent;
|
|
9248
9261
|
}
|
|
@@ -9256,7 +9269,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
|
|
|
9256
9269
|
});
|
|
9257
9270
|
}
|
|
9258
9271
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9259
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { isInvalid: "isInvalid", disabled: "disabled", eclPlaceholder: "eclPlaceholder" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
|
|
9272
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { isInvalid: "isInvalid", disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
|
|
9260
9273
|
{
|
|
9261
9274
|
provide: NG_VALUE_ACCESSOR,
|
|
9262
9275
|
useExisting: forwardRef((() => EclMultiselectComponent)),
|
|
@@ -9293,6 +9306,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
9293
9306
|
type: Output
|
|
9294
9307
|
}], eclPlaceholder: [{
|
|
9295
9308
|
type: Input
|
|
9309
|
+
}], eclSize: [{
|
|
9310
|
+
type: Input
|
|
9296
9311
|
}] } });
|
|
9297
9312
|
|
|
9298
9313
|
const COMPONENTS$b = [EclMultiselectComponent, EclMultiselectOptionDirective];
|
|
@@ -10086,6 +10101,7 @@ class EclPaginationItemClickEvent extends EclBaseEvent {
|
|
|
10086
10101
|
class EclPaginationItemComponent extends ECLBaseDirective {
|
|
10087
10102
|
constructor() {
|
|
10088
10103
|
super(...arguments);
|
|
10104
|
+
this.role = 'listitem';
|
|
10089
10105
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
10090
10106
|
this.routerLink = null;
|
|
10091
10107
|
this.queryParams = null;
|
|
@@ -10133,7 +10149,7 @@ class EclPaginationItemComponent extends ECLBaseDirective {
|
|
|
10133
10149
|
return key;
|
|
10134
10150
|
}
|
|
10135
10151
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EclPaginationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
10136
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a\n *ngIf=\"!isCurrent\"\n eclLink\n (click)=\"onPageClick($event)\"\n variant=\"standalone\"\n attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\"\n [routerLink]=\"routerLink\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [href]=\"href\"\n class=\"ecl-pagination__link\">\n <ng-container *ngIf=\"isPrevious\">\n <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n </ng-container>\n <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n <ng-container *ngIf=\"isNext\">\n <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n </ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrent\">\n <span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n {{ label }}\n </span>\n <span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n </span>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10152
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<a\n *ngIf=\"!isCurrent\"\n eclLink\n (click)=\"onPageClick($event)\"\n variant=\"standalone\"\n attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\"\n [routerLink]=\"routerLink\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [href]=\"href\"\n class=\"ecl-pagination__link\">\n <ng-container *ngIf=\"isPrevious\">\n <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n </ng-container>\n <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n <ng-container *ngIf=\"isNext\">\n <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n </ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrent\">\n <span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n {{ label }}\n </span>\n <span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n </span>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10137
10153
|
}
|
|
10138
10154
|
__decorate([
|
|
10139
10155
|
coerceBoolean
|
|
@@ -10150,6 +10166,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
10150
10166
|
}], propDecorators: { cssClasses: [{
|
|
10151
10167
|
type: HostBinding,
|
|
10152
10168
|
args: ['class']
|
|
10169
|
+
}], role: [{
|
|
10170
|
+
type: HostBinding,
|
|
10171
|
+
args: ['attr.role']
|
|
10153
10172
|
}], label: [{
|
|
10154
10173
|
type: Input
|
|
10155
10174
|
}], ariaLabel: [{
|