@eui/ecl 15.0.0-next.20 → 15.0.0-rc.2

package/fesm2020/eui-ecl.mjs

@@ -5806,8 +5806,8 @@ class EclFileUploadDirective extends ECLBaseDirective {
         const labelEl = this.createLabelDOMElement();
         const hostEl = this.getHostDOMElement();
         const fileListEl = this.createFileListDOMElement();
-        hostEl.insertAdjacentElement('beforebegin', labelEl);
         hostEl.insertAdjacentElement('afterend', fileListEl);
+        hostEl.insertAdjacentElement('afterend', labelEl);
         this.fileListEl = fileListEl;
     }
     getHostDOMElement() {
@@ -10059,6 +10059,8 @@ class EclPaginationItemClickEvent extends EclBaseEvent {
 class EclPaginationItemComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        this.routerLink = null;
+        this.queryParams = null;
         this.href = '';
         this.pageClick = new EventEmitter();
     }
@@ -10101,7 +10103,7 @@ class EclPaginationItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclPaginationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclPaginationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrent\"\n    eclLink\n    (click)=\"onPageClick($event)\"\n    variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate:{ pageNumber: label} }}\"\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\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.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: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclPaginationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", routerLink: "routerLink", queryParams: "queryParams", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *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    [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\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[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: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclPaginationItemComponent.prototype, "isCurrent", void 0);
@@ -10113,7 +10115,7 @@ __decorate([
 ], EclPaginationItemComponent.prototype, "isPrevious", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-pagination-item', template: "<a *ngIf=\"!isCurrent\"\n    eclLink\n    (click)=\"onPageClick($event)\"\n    variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate:{ pageNumber: label} }}\"\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\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n" }]
+            args: [{ selector: 'ecl-pagination-item', template: "<a *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    [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\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n" }]
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -10127,6 +10129,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 type: Input
             }], isPrevious: [{
                 type: Input
+            }], routerLink: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
             }], href: [{
                 type: Input
             }], pageClick: [{
@@ -10192,7 +10198,7 @@ class EclPaginationComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageWindowSize: "pageWindowSize" }, outputs: { page: "page" }, host: { properties: { "class.ecl-pagination": "this.cmpClass", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ul class=\"ecl-pagination__list\">\n    <ng-container *ngIf=\"isModeAuto()\">\n        <ecl-pagination-item \n            *ngIf=\"model.hasPreviousPage()\"\n            [isPrevious]=\"true\" \n            (click)=\"onPreviousPage()\">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item \n            *ngFor=\"let page of model.getPages()\" \n            [label]=\"page.toString()\"\n            [isCurrent]=\"model.getCurrentPage() === page\"\n            (click)=\"onPage(page)\">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item \n            *ngIf=\"model.hasNextPage()\"\n            [isNext]=\"true\" \n            (click)=\"onNextPage()\">\n        </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isModeAuto()\">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "isCurrent", "isNext", "isPrevious", "href"], outputs: ["pageClick"] }] });
+/** @nocollapse */ EclPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageWindowSize: "pageWindowSize" }, outputs: { page: "page" }, host: { properties: { "class.ecl-pagination": "this.cmpClass", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ul class=\"ecl-pagination__list\">\n    <ng-container *ngIf=\"isModeAuto()\">\n        <ecl-pagination-item \n            *ngIf=\"model.hasPreviousPage()\"\n            [isPrevious]=\"true\" \n            (click)=\"onPreviousPage()\">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item \n            *ngFor=\"let page of model.getPages()\" \n            [label]=\"page.toString()\"\n            [isCurrent]=\"model.getCurrentPage() === page\"\n            (click)=\"onPage(page)\">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item \n            *ngIf=\"model.hasNextPage()\"\n            [isNext]=\"true\" \n            (click)=\"onNextPage()\">\n        </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isModeAuto()\">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "isCurrent", "isNext", "isPrevious", "routerLink", "queryParams", "href"], outputs: ["pageClick"] }] });
 __decorate([
     coerceNumber
 ], EclPaginationComponent.prototype, "totalItems", void 0);
@@ -10231,12 +10237,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
 class EclPaginationComponentModule {
 }
 /** @nocollapse */ EclPaginationComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ EclPaginationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationComponentModule, declarations: [EclPaginationComponent, EclPaginationItemComponent], imports: [CommonModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule], exports: [EclPaginationComponent, EclPaginationItemComponent] });
-/** @nocollapse */ EclPaginationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationComponentModule, imports: [CommonModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule] });
+/** @nocollapse */ EclPaginationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationComponentModule, declarations: [EclPaginationComponent, EclPaginationItemComponent], imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule], exports: [EclPaginationComponent, EclPaginationItemComponent] });
+/** @nocollapse */ EclPaginationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationComponentModule, imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule],
+                    imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule],
                     exports: [EclPaginationComponent, EclPaginationItemComponent],
                     declarations: [EclPaginationComponent, EclPaginationItemComponent]
                 }]
@@ -12551,11 +12557,11 @@ class EclTableHeaderDirective extends ECLBaseDirective {
     initSortButtons() {
         setTimeout(() => {
             if (this.eclSortable) {
-                const sortSpan = document.createElement('span');
-                sortSpan.classList.add('ecl-table__arrow');
-                this.el.nativeElement.appendChild(sortSpan);
-                sortSpan.appendChild(this.createIconComponent('ecl-table__icon-up'));
-                sortSpan.appendChild(this.createIconComponent('ecl-table__icon-down'));
+                const sortEl = document.createElement('button');
+                sortEl.classList.add('ecl-table__arrow');
+                this.el.nativeElement.appendChild(sortEl);
+                sortEl.appendChild(this.createIconComponent('ecl-table__icon-up'));
+                sortEl.appendChild(this.createIconComponent('ecl-table__icon-down'));
             }
         });
     }