npm - @eui/components - Versions diffs - 17.0.0-rc.1 → 17.0.0-rc.2 - Mend

@eui/components 17.0.0-rc.1 → 17.0.0-rc.2

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.

Files changed (376) hide show

package/fesm2022/eui-components-eui-slide-toggle.mjs CHANGED Viewed

@@ -43,6 +43,8 @@ class EuiSlideToggleComponent extends BaseDirective {
         this.cd = cd;
         this.control = control;
         this.id = `eui-slide-toggle-${uniqueId()}`;
+        this.iconSvgFillColorOn = 'grey-100';
+        this.iconSvgFillColorOff = 'grey-100';
         this.checkboxControl = new FormControl();
         this.slideToggleChange = new EventEmitter();
         this._isChecked = false;
@@ -86,12 +88,12 @@ class EuiSlideToggleComponent extends BaseDirective {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSlideToggleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiSlideToggleComponent, selector: "eui-slide-toggle", inputs: { id: "id", iconSvgNameOn: "iconSvgNameOn", iconSvgNameOff: "iconSvgNameOff", isChecked: "isChecked", disabled: "disabled" }, outputs: { slideToggleChange: "slideToggleChange" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div\n    class=\"eui-slide-toggle__container\"\n    [tabindex]=\"this.disabled ? '-1' : '0'\"\n    [class.eui-slide-toggle__container--disabled]=\"disabled\"\n    (keydown.Enter)=\"toggle()\"\n    (click)=\"toggle()\">\n    <input\n        class=\"eui-u-display-hidden\"\n        [formControl]=\"checkboxControl\"\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [attr.checked]=\"isChecked\"\n        (focusout)=\"onFocusOut()\" />\n    <div\n        class=\"eui-slide-toggle__track\"\n        [class.eui-slide-toggle__track--off]=\"!isChecked\"\n        [class.eui-slide-toggle__track--on]=\"isChecked\"></div>\n    <div\n        class=\"eui-slide-toggle__handler\"\n        [@onOff]=\"isChecked ? 'on' : 'off'\"\n        [class.eui-slide-toggle__handler--off]=\"!isChecked\"\n        [class.eui-slide-toggle__handler--on]=\"isChecked\">\n\n        <ng-container *ngIf=\"iconSvgNameOn && iconSvgNameOff\">\n            <eui-icon-svg *ngIf=\"isChecked\" icon=\"{{iconSvgNameOn}}\" size=\"s\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"!isChecked\" icon=\"{{iconSvgNameOff}}\" size=\"s\"></eui-icon-svg>\n        </ng-container>\n    </div>\n</div>\n", styles: [".eui-slide-toggle{align-items:center;display:inline-flex;position:relative}.eui-slide-toggle:not(.eui-slide-toggle__container--disabled){cursor:pointer}.eui-slide-toggle .eui-slide-toggle__container--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}.eui-slide-toggle .eui-slide-toggle__container{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) 0;position:relative}.eui-slide-toggle .eui-slide-toggle__container:active:not([readonly]),.eui-slide-toggle .eui-slide-toggle__container:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:active:not([readonly]),.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track{background-color:var(--eui-base-color-grey-15);border-radius:2rem;height:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-xl) + var(--eui-base-spacing-2xs))}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-success-75)}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-white);border-radius:50%;box-shadow:var(--eui-base-shadow-3);position:absolute;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs))}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler .eui-icon-svg svg{fill:var(--eui-base-color-grey-100);color:var(--eui-base-color-grey-100)}.eui-slide-toggle--size-s{transform:scale(.75)}.eui-slide-toggle--size-m{transform:scale(1)}.eui-slide-toggle--size-l{transform:scale(1.25)}.eui-slide-toggle--size-xl{transform:scale(1.5)}.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-primary-50)}.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-primary-100)}.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-info-50)}.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-info-100)}.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-success-50)}.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-success-100)}.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-warning-50)}.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-warning-100)}.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-danger-50)}.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-danger-100)}.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-accent-50)}.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-accent-100)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }], animations: [onOff], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSlideToggleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiSlideToggleComponent, selector: "eui-slide-toggle", inputs: { id: "id", iconSvgNameOn: "iconSvgNameOn", iconSvgNameOff: "iconSvgNameOff", iconSvgFillColorOn: "iconSvgFillColorOn", iconSvgFillColorOff: "iconSvgFillColorOff", isChecked: "isChecked", disabled: "disabled" }, outputs: { slideToggleChange: "slideToggleChange" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div\n    class=\"eui-slide-toggle__container\"\n    [tabindex]=\"this.disabled ? '-1' : '0'\"\n    [class.eui-slide-toggle__container--disabled]=\"disabled\"\n    (keydown.Enter)=\"toggle()\"\n    (click)=\"toggle()\">\n    <input\n        class=\"eui-u-display-hidden\"\n        [formControl]=\"checkboxControl\"\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [attr.checked]=\"isChecked\"\n        (focusout)=\"onFocusOut()\" />\n    <div\n        class=\"eui-slide-toggle__track\"\n        [class.eui-slide-toggle__track--off]=\"!isChecked\"\n        [class.eui-slide-toggle__track--on]=\"isChecked\"></div>\n    <div\n        class=\"eui-slide-toggle__handler\"\n        [@onOff]=\"isChecked ? 'on' : 'off'\"\n        [class.eui-slide-toggle__handler--off]=\"!isChecked\"\n        [class.eui-slide-toggle__handler--on]=\"isChecked\">\n\n        <ng-container *ngIf=\"iconSvgNameOn && iconSvgNameOff\">\n            <eui-icon-svg *ngIf=\"isChecked\" icon=\"{{iconSvgNameOn}}\" fillColor=\"{{iconSvgFillColorOn}}\" size=\"s\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"!isChecked\" icon=\"{{iconSvgNameOff}}\" fillColor=\"{{iconSvgFillColorOff}}\" size=\"s\"></eui-icon-svg>\n        </ng-container>\n    </div>\n</div>\n", styles: [".eui-slide-toggle{align-items:center;display:inline-flex;position:relative}.eui-slide-toggle:not(.eui-slide-toggle__container--disabled){cursor:pointer}.eui-slide-toggle .eui-slide-toggle__container--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}.eui-slide-toggle .eui-slide-toggle__container{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) 0;position:relative}.eui-slide-toggle .eui-slide-toggle__container:active:not([readonly]),.eui-slide-toggle .eui-slide-toggle__container:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:active:not([readonly]),.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track{background-color:var(--eui-base-color-grey-15);border-radius:2rem;height:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-xl) + var(--eui-base-spacing-2xs))}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-success-75)}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-white);border-radius:50%;box-shadow:var(--eui-base-shadow-3);position:absolute;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs))}.eui-slide-toggle--size-s{transform:scale(.75)}.eui-slide-toggle--size-m{transform:scale(1)}.eui-slide-toggle--size-l{transform:scale(1.25)}.eui-slide-toggle--size-xl{transform:scale(1.5)}.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-primary-50)}.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-primary-100)}.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-info-50)}.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-info-100)}.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-success-50)}.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-success-100)}.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-warning-50)}.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-warning-100)}.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-danger-50)}.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-danger-100)}.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-accent-50)}.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-accent-100)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }], animations: [onOff], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSlideToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-slide-toggle', animations: [onOff], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"eui-slide-toggle__container\"\n    [tabindex]=\"this.disabled ? '-1' : '0'\"\n    [class.eui-slide-toggle__container--disabled]=\"disabled\"\n    (keydown.Enter)=\"toggle()\"\n    (click)=\"toggle()\">\n    <input\n        class=\"eui-u-display-hidden\"\n        [formControl]=\"checkboxControl\"\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [attr.checked]=\"isChecked\"\n        (focusout)=\"onFocusOut()\" />\n    <div\n        class=\"eui-slide-toggle__track\"\n        [class.eui-slide-toggle__track--off]=\"!isChecked\"\n        [class.eui-slide-toggle__track--on]=\"isChecked\"></div>\n    <div\n        class=\"eui-slide-toggle__handler\"\n        [@onOff]=\"isChecked ? 'on' : 'off'\"\n        [class.eui-slide-toggle__handler--off]=\"!isChecked\"\n        [class.eui-slide-toggle__handler--on]=\"isChecked\">\n\n        <ng-container *ngIf=\"iconSvgNameOn && iconSvgNameOff\">\n            <eui-icon-svg *ngIf=\"isChecked\" icon=\"{{iconSvgNameOn}}\" size=\"s\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"!isChecked\" icon=\"{{iconSvgNameOff}}\" size=\"s\"></eui-icon-svg>\n        </ng-container>\n    </div>\n</div>\n", styles: [".eui-slide-toggle{align-items:center;display:inline-flex;position:relative}.eui-slide-toggle:not(.eui-slide-toggle__container--disabled){cursor:pointer}.eui-slide-toggle .eui-slide-toggle__container--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}.eui-slide-toggle .eui-slide-toggle__container{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) 0;position:relative}.eui-slide-toggle .eui-slide-toggle__container:active:not([readonly]),.eui-slide-toggle .eui-slide-toggle__container:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:active:not([readonly]),.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track{background-color:var(--eui-base-color-grey-15);border-radius:2rem;height:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-xl) + var(--eui-base-spacing-2xs))}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-success-75)}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-white);border-radius:50%;box-shadow:var(--eui-base-shadow-3);position:absolute;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs))}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler .eui-icon-svg svg{fill:var(--eui-base-color-grey-100);color:var(--eui-base-color-grey-100)}.eui-slide-toggle--size-s{transform:scale(.75)}.eui-slide-toggle--size-m{transform:scale(1)}.eui-slide-toggle--size-l{transform:scale(1.25)}.eui-slide-toggle--size-xl{transform:scale(1.5)}.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-primary-50)}.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-primary-100)}.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-info-50)}.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-info-100)}.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-success-50)}.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-success-100)}.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-warning-50)}.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-warning-100)}.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-danger-50)}.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-danger-100)}.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-accent-50)}.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-accent-100)}\n"] }]
+            args: [{ selector: 'eui-slide-toggle', animations: [onOff], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"eui-slide-toggle__container\"\n    [tabindex]=\"this.disabled ? '-1' : '0'\"\n    [class.eui-slide-toggle__container--disabled]=\"disabled\"\n    (keydown.Enter)=\"toggle()\"\n    (click)=\"toggle()\">\n    <input\n        class=\"eui-u-display-hidden\"\n        [formControl]=\"checkboxControl\"\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [attr.checked]=\"isChecked\"\n        (focusout)=\"onFocusOut()\" />\n    <div\n        class=\"eui-slide-toggle__track\"\n        [class.eui-slide-toggle__track--off]=\"!isChecked\"\n        [class.eui-slide-toggle__track--on]=\"isChecked\"></div>\n    <div\n        class=\"eui-slide-toggle__handler\"\n        [@onOff]=\"isChecked ? 'on' : 'off'\"\n        [class.eui-slide-toggle__handler--off]=\"!isChecked\"\n        [class.eui-slide-toggle__handler--on]=\"isChecked\">\n\n        <ng-container *ngIf=\"iconSvgNameOn && iconSvgNameOff\">\n            <eui-icon-svg *ngIf=\"isChecked\" icon=\"{{iconSvgNameOn}}\" fillColor=\"{{iconSvgFillColorOn}}\" size=\"s\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"!isChecked\" icon=\"{{iconSvgNameOff}}\" fillColor=\"{{iconSvgFillColorOff}}\" size=\"s\"></eui-icon-svg>\n        </ng-container>\n    </div>\n</div>\n", styles: [".eui-slide-toggle{align-items:center;display:inline-flex;position:relative}.eui-slide-toggle:not(.eui-slide-toggle__container--disabled){cursor:pointer}.eui-slide-toggle .eui-slide-toggle__container--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-base-disabled-opacity)}.eui-slide-toggle .eui-slide-toggle__container{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) 0;position:relative}.eui-slide-toggle .eui-slide-toggle__container:active:not([readonly]),.eui-slide-toggle .eui-slide-toggle__container:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:active:not([readonly]),.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track{background-color:var(--eui-base-color-grey-15);border-radius:2rem;height:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-xl) + var(--eui-base-spacing-2xs))}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-success-75)}.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-white);border-radius:50%;box-shadow:var(--eui-base-shadow-3);position:absolute;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs))}.eui-slide-toggle--size-s{transform:scale(.75)}.eui-slide-toggle--size-m{transform:scale(1)}.eui-slide-toggle--size-l{transform:scale(1.25)}.eui-slide-toggle--size-xl{transform:scale(1.5)}.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-primary-50)}.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-primary-100)}.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-info-50)}.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-info-100)}.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-success-50)}.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-success-100)}.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-warning-50)}.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-warning-100)}.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-danger-50)}.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-danger-100)}.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-base-color-accent-50)}.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-base-color-accent-100)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -102,6 +104,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Input
             }], iconSvgNameOff: [{
                 type: Input
+            }], iconSvgFillColorOn: [{
+                type: Input
+            }], iconSvgFillColorOff: [{
+                type: Input
             }], slideToggleChange: [{
                 type: Output
             }], isChecked: [{
@@ -114,11 +120,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
             }] } });
 class EuiSlideToggleModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiSlideToggleModule, declarations: [EuiSlideToggleComponent], imports: [CommonModule, ReactiveFormsModule, EuiIconModule], exports: [EuiSlideToggleComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSlideToggleModule, imports: [CommonModule, ReactiveFormsModule, EuiIconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: EuiSlideToggleModule, declarations: [EuiSlideToggleComponent], imports: [CommonModule, ReactiveFormsModule, EuiIconModule], exports: [EuiSlideToggleComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSlideToggleModule, imports: [CommonModule, ReactiveFormsModule, EuiIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSlideToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSlideToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ReactiveFormsModule, EuiIconModule],

package/fesm2022/eui-components-eui-slide-toggle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-components-eui-slide-toggle.mjs","sources":["../../eui-slide-toggle/animations/on-off.ts","../../eui-slide-toggle/eui-slide-toggle.component.ts","../../eui-slide-toggle/eui-slide-toggle.component.html","../../eui-slide-toggle/eui-slide-toggle.module.ts","../../eui-slide-toggle/eui-components-eui-slide-toggle.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\n\nexport const onOff = trigger('onOff', [\n state(\n 'off',\n style({\n left: 0,\n }),\n ),\n state(\n 'on',\n style({\n left: '1rem',\n }),\n ),\n transition('off => on', [animate('0ms 100ms linear')]),\n transition('on => off', [animate('0ms 100ms linear')]),\n]);\n","import {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n Self,\n Optional,\n} from '@angular/core';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';\n\nimport { uniqueId } from '@eui/core';\nimport { BaseDirective } from '@eui/components/shared';\n\nimport { onOff } from './animations/on-off';\n\n@Component({\n templateUrl: './eui-slide-toggle.component.html',\n selector: 'eui-slide-toggle',\n styleUrls: ['./styles/index.scss'],\n animations: [onOff],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiSlideToggleComponent extends BaseDirective implements ControlValueAccessor {\n @Input() id = `eui-slide-toggle-${uniqueId()}`;\n @Input() iconSvgNameOn: string;\n @Input() iconSvgNameOff: string;\n\n public checkboxControl = new FormControl();\n @Output() slideToggleChange = new EventEmitter<boolean>();\n @Input()\n get isChecked(): boolean {\n return this._isChecked;\n }\n set isChecked(value: BooleanInput) {\n this._isChecked = coerceBooleanProperty(value);\n }\n private _isChecked = false;\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: BooleanInput) {\n this._disabled = coerceBooleanProperty(value);\n }\n private _disabled = false;\n\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('eui-slide-toggle')].join(' ').trim();\n }\n\n constructor(\n private cd: ChangeDetectorRef,\n @Self() @Optional() private control: NgControl,\n ) {\n super();\n if (this.control) {\n this.control.valueAccessor = this;\n }\n }\n\n public toggle(): void {\n if (!this.disabled) {\n this.isChecked = !this.isChecked;\n this.slideToggleChange.emit(this.isChecked);\n this.onChange(this.isChecked);\n this.onTouch();\n }\n }\n\n public writeValue(value: boolean): void {\n this.isChecked = value;\n this.cd.detectChanges();\n }\n\n public setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cd.detectChanges();\n }\n\n public onFocusOut(): void {\n this.onTouch();\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private onChange: any = () => {/* empty /};\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private onTouch: any = () => {/ empty /};\n}\n","<div\n class=\"eui-slide-toggle__container\"\n [tabindex]=\"this.disabled ? '-1' : '0'\"\n [class.eui-slide-toggle__container--disabled]=\"disabled\"\n (keydown.Enter)=\"toggle()\"\n (click)=\"toggle()\">\n <input\n class=\"eui-u-display-hidden\"\n [formControl]=\"checkboxControl\"\n [id]=\"id\"\n type=\"checkbox\"\n role=\"switch\"\n [attr.checked]=\"isChecked\"\n (focusout)=\"onFocusOut()\" />\n <div\n class=\"eui-slide-toggle__track\"\n [class.eui-slide-toggle__track--off]=\"!isChecked\"\n [class.eui-slide-toggle__track--on]=\"isChecked\"></div>\n <div\n class=\"eui-slide-toggle__handler\"\n [@onOff]=\"isChecked ? 'on' : 'off'\"\n [class.eui-slide-toggle__handler--off]=\"!isChecked\"\n [class.eui-slide-toggle__handler--on]=\"isChecked\">\n\n <ng-container ngIf=\"iconSvgNameOn && iconSvgNameOff\">\n <eui-icon-svg ngIf=\"isChecked\" icon=\"{{iconSvgNameOn}}\" size=\"s\"></eui-icon-svg>\n <eui-icon-svg ngIf=\"!isChecked\" icon=\"{{iconSvgNameOff}}\" size=\"s\"></eui-icon-svg>\n </ng-container>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { EuiSlideToggleComponent } from './eui-slide-toggle.component';\nimport { EuiIconModule } from '@eui/components/eui-icon';\n\n@NgModule({\n imports: [CommonModule, ReactiveFormsModule, EuiIconModule],\n declarations: [EuiSlideToggleComponent],\n exports: [EuiSlideToggleComponent],\n})\nexport class EuiSlideToggleModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"eui-components-eui-slide-toggle.mjs","sources":["../../eui-slide-toggle/animations/on-off.ts","../../eui-slide-toggle/eui-slide-toggle.component.ts","../../eui-slide-toggle/eui-slide-toggle.component.html","../../eui-slide-toggle/eui-slide-toggle.module.ts","../../eui-slide-toggle/eui-components-eui-slide-toggle.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\n\nexport const onOff = trigger('onOff', [\n state(\n 'off',\n style({\n left: 0,\n }),\n ),\n state(\n 'on',\n style({\n left: '1rem',\n }),\n ),\n transition('off => on', [animate('0ms 100ms linear')]),\n transition('on => off', [animate('0ms 100ms linear')]),\n]);\n","import {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n Self,\n Optional,\n} from '@angular/core';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';\n\nimport { uniqueId } from '@eui/core';\nimport { BaseDirective } from '@eui/components/shared';\n\nimport { onOff } from './animations/on-off';\n\n@Component({\n templateUrl: './eui-slide-toggle.component.html',\n selector: 'eui-slide-toggle',\n styleUrls: ['./styles/index.scss'],\n animations: [onOff],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiSlideToggleComponent extends BaseDirective implements ControlValueAccessor {\n @Input() id = `eui-slide-toggle-${uniqueId()}`;\n @Input() iconSvgNameOn: string;\n @Input() iconSvgNameOff: string;\n @Input() iconSvgFillColorOn = 'grey-100';\n @Input() iconSvgFillColorOff = 'grey-100';\n\n public checkboxControl = new FormControl();\n @Output() slideToggleChange = new EventEmitter<boolean>();\n @Input()\n get isChecked(): boolean {\n return this._isChecked;\n }\n set isChecked(value: BooleanInput) {\n this._isChecked = coerceBooleanProperty(value);\n }\n private _isChecked = false;\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: BooleanInput) {\n this._disabled = coerceBooleanProperty(value);\n }\n private _disabled = false;\n\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('eui-slide-toggle')].join(' ').trim();\n }\n\n constructor(\n private cd: ChangeDetectorRef,\n @Self() @Optional() private control: NgControl,\n ) {\n super();\n if (this.control) {\n this.control.valueAccessor = this;\n }\n }\n\n public toggle(): void {\n if (!this.disabled) {\n this.isChecked = !this.isChecked;\n this.slideToggleChange.emit(this.isChecked);\n this.onChange(this.isChecked);\n this.onTouch();\n }\n }\n\n public writeValue(value: boolean): void {\n this.isChecked = value;\n this.cd.detectChanges();\n }\n\n public setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cd.detectChanges();\n }\n\n public onFocusOut(): void {\n this.onTouch();\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private onChange: any = () => {/* empty /};\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private onTouch: any = () => {/ empty /};\n}\n","<div\n class=\"eui-slide-toggle__container\"\n [tabindex]=\"this.disabled ? '-1' : '0'\"\n [class.eui-slide-toggle__container--disabled]=\"disabled\"\n (keydown.Enter)=\"toggle()\"\n (click)=\"toggle()\">\n <input\n class=\"eui-u-display-hidden\"\n [formControl]=\"checkboxControl\"\n [id]=\"id\"\n type=\"checkbox\"\n role=\"switch\"\n [attr.checked]=\"isChecked\"\n (focusout)=\"onFocusOut()\" />\n <div\n class=\"eui-slide-toggle__track\"\n [class.eui-slide-toggle__track--off]=\"!isChecked\"\n [class.eui-slide-toggle__track--on]=\"isChecked\"></div>\n <div\n class=\"eui-slide-toggle__handler\"\n [@onOff]=\"isChecked ? 'on' : 'off'\"\n [class.eui-slide-toggle__handler--off]=\"!isChecked\"\n [class.eui-slide-toggle__handler--on]=\"isChecked\">\n\n <ng-container ngIf=\"iconSvgNameOn && iconSvgNameOff\">\n <eui-icon-svg ngIf=\"isChecked\" icon=\"{{iconSvgNameOn}}\" fillColor=\"{{iconSvgFillColorOn}}\" size=\"s\"></eui-icon-svg>\n <eui-icon-svg ngIf=\"!isChecked\" icon=\"{{iconSvgNameOff}}\" fillColor=\"{{iconSvgFillColorOff}}\" size=\"s\"></eui-icon-svg>\n </ng-container>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { EuiSlideToggleComponent } from './eui-slide-toggle.component';\nimport { EuiIconModule } from '@eui/components/eui-icon';\n\n@NgModule({\n imports: [CommonModule, ReactiveFormsModule, EuiIconModule],\n declarations: [EuiSlideToggleComponent],\n exports: [EuiSlideToggleComponent],\n})\nexport class EuiSlideToggleModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-components-eui-table.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding, Output, ContentChildren, ViewChild, Pipe, HostListener, Directive, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding, Output, ContentChildren, ViewChild, ElementRef, Pipe, HostListener, Directive, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, Subscription, combineLatest } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -92,10 +92,10 @@ class EuiTableSortService {
         const currentCol = params.find((col) => col.position === index + 1);
         return currentCol ? currentCol : null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSortService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSortService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSortService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSortService, decorators: [{
             type: Injectable
         }] });
@@ -204,10 +204,10 @@ class EuiTableSelectableRowService {
     getLastSelectedRow() {
         return this.lastSelectedRow;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSelectableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSelectableRowService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSelectableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSelectableRowService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSelectableRowService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSelectableRowService, decorators: [{
             type: Injectable
         }] });
@@ -768,10 +768,10 @@ class EuiTableComponent extends BaseDirective {
     getObjProp(obj, prop) {
         return prop ? prop.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), obj || self) : null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableComponent, deps: [{ token: EuiTableSortService }, { token: i0.ChangeDetectorRef }, { token: EuiTableSelectableRowService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiTableComponent, selector: "eui-table, table[euiTable]", inputs: { rows: "rows", propId: "propId", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", loading: "loading", asyncTable: "asyncTable", paginable: "paginable", euiTableResponsive: "euiTableResponsive", euiTableFixedLayout: "euiTableFixedLayout", euiTableDraggable: "euiTableDraggable", euiTableCards: "euiTableCards", euiTableBordered: "euiTableBordered", euiTableCompact: "euiTableCompact", hasStickyHeader: "hasStickyHeader", hasStickyColumns: "hasStickyColumns" }, outputs: { selectedRows: "selectedRows", sortChange: "sortChange", multiSortChange: "multiSortChange" }, host: { properties: { "class": "this.cssClasses", "class.eui-table__loading": "this.hasLoading" } }, providers: [EuiTableSortService, EuiTableSelectableRowService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead #theadRef *ngIf=\"headerTemplate\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n</thead>\n<tbody #tbodyRef *ngIf=\"bodyTemplate\">\n    <ng-container *ngFor=\"let row of rowsRendered; let i = index; trackBy: trackByFn\">\n        <ng-template\n            [ngTemplateOutlet]=\"bodyTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, index: i + page * pageSize }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"emptyMessageTemplate && rowsRendered.length === 0\">\n        <ng-template [ngTemplateOutlet]=\"emptyMessageTemplate\"></ng-template>\n    </ng-container>\n</tbody>\n<tfoot #tfootRef *ngIf=\"footerTemplate\">\n    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n</tfoot>\n", styles: [".eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-base-color-white);--eui-table-text-color: var(--eui-base-color-text);--eui-table-selected-row-background-color: var(--eui-base-color-primary-10);--eui-table-highlighted-background-color: var(--eui-base-color-accent-100);--eui-table-bordered-color: var(--eui-base-color-grey-15);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-base-shadow-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-base-spacing-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-base-spacing-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-base-spacing-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-base-spacing-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-100);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-base-color-grey-5);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-base-spacing-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{display:inherit;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-base-spacing-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-base-spacing-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-base-color-grey-15);height:calc(3 * var(--eui-base-spacing-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr td{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-base-color-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-base-color-grey-5)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-base-color-grey-5)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-base-color-grey-15);border-top:1px solid var(--eui-base-color-grey-15)}.eui-table tfoot tr td{padding:var(--eui-base-spacing-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-xs);white-space:nowrap;width:45%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-2xs);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-2xs);width:45%;overflow:hidden;text-overflow:ellipsis;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-base-spacing-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-base-spacing-xs);position:absolute;top:calc(var(--eui-base-spacing-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-base-color-accent-5)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableComponent, deps: [{ token: EuiTableSortService }, { token: i0.ChangeDetectorRef }, { token: EuiTableSelectableRowService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiTableComponent, selector: "eui-table, table[euiTable]", inputs: { rows: "rows", propId: "propId", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", loading: "loading", asyncTable: "asyncTable", paginable: "paginable", euiTableResponsive: "euiTableResponsive", euiTableFixedLayout: "euiTableFixedLayout", euiTableDraggable: "euiTableDraggable", euiTableCards: "euiTableCards", euiTableBordered: "euiTableBordered", euiTableCompact: "euiTableCompact", hasStickyHeader: "hasStickyHeader", hasStickyColumns: "hasStickyColumns" }, outputs: { selectedRows: "selectedRows", sortChange: "sortChange", multiSortChange: "multiSortChange" }, host: { properties: { "class": "this.cssClasses", "class.eui-table__loading": "this.hasLoading" } }, providers: [EuiTableSortService, EuiTableSelectableRowService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead #theadRef *ngIf=\"headerTemplate\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n</thead>\n<tbody #tbodyRef *ngIf=\"bodyTemplate\">\n    <ng-container *ngFor=\"let row of rowsRendered; let i = index; trackBy: trackByFn\">\n        <ng-template\n            [ngTemplateOutlet]=\"bodyTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, index: i + page * pageSize }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"emptyMessageTemplate && rowsRendered.length === 0\">\n        <ng-template [ngTemplateOutlet]=\"emptyMessageTemplate\"></ng-template>\n    </ng-container>\n</tbody>\n<tfoot #tfootRef *ngIf=\"footerTemplate\">\n    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n</tfoot>\n", styles: [".eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-base-color-white);--eui-table-text-color: var(--eui-base-color-text);--eui-table-selected-row-background-color: var(--eui-base-color-primary-10);--eui-table-highlighted-background-color: var(--eui-base-color-accent-100);--eui-table-bordered-color: var(--eui-base-color-grey-15);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-base-shadow-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-base-spacing-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-base-spacing-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-base-spacing-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-base-spacing-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-100);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-base-color-grey-5);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-base-spacing-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{display:inherit;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-base-spacing-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-base-spacing-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-base-color-grey-15);height:calc(3 * var(--eui-base-spacing-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr td{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-base-color-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-base-color-grey-5)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-base-color-grey-5)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-base-color-grey-15);border-top:1px solid var(--eui-base-color-grey-15)}.eui-table tfoot tr td{padding:var(--eui-base-spacing-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-xs);white-space:nowrap;width:45%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-2xs);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-2xs);width:45%;overflow:hidden;text-overflow:ellipsis;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-base-spacing-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-base-spacing-xs);position:absolute;top:calc(var(--eui-base-spacing-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-base-color-accent-5)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-table, table[euiTable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [EuiTableSortService, EuiTableSelectableRowService], template: "<thead #theadRef *ngIf=\"headerTemplate\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n</thead>\n<tbody #tbodyRef *ngIf=\"bodyTemplate\">\n    <ng-container *ngFor=\"let row of rowsRendered; let i = index; trackBy: trackByFn\">\n        <ng-template\n            [ngTemplateOutlet]=\"bodyTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, index: i + page * pageSize }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"emptyMessageTemplate && rowsRendered.length === 0\">\n        <ng-template [ngTemplateOutlet]=\"emptyMessageTemplate\"></ng-template>\n    </ng-container>\n</tbody>\n<tfoot #tfootRef *ngIf=\"footerTemplate\">\n    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n</tfoot>\n", styles: [".eui-table__scrollable-wrapper{overflow:auto}.eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-base-color-grey-5)}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table{--eui-table-compact-scale-factor: .95;--eui-table-background-color: var(--eui-base-color-white);--eui-table-text-color: var(--eui-base-color-text);--eui-table-selected-row-background-color: var(--eui-base-color-primary-10);--eui-table-highlighted-background-color: var(--eui-base-color-accent-100);--eui-table-bordered-color: var(--eui-base-color-grey-15);--eui-table-loading-position: 50%;background-color:var(--eui-table-background-color);border-collapse:collapse;border-spacing:0;color:var(--eui-table-text-color);display:table;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;width:auto}.eui-table thead>tr>th,.eui-table tbody>tr>td,.eui-table tfoot>tr>td{vertical-align:middle}.eui-table--bordered{box-shadow:var(--eui-base-shadow-1)}.eui-table--bordered td,.eui-table--bordered th{border:1px solid var(--eui-table-bordered-color)}.eui-table--compact thead th,.eui-table--compact thead tr{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:var(--eui-base-spacing-s)!important}.eui-table--compact tbody tr{height:calc(2 * var(--eui-base-spacing-m))!important}.eui-table--compact tbody tr td{font-size:calc(var(--eui-base-font-size) * var(--eui-table-compact-scale-factor))!important;padding:0 var(--eui-base-spacing-s)!important}.eui-table--responsive{width:100%}.eui-table--fixed-layout{table-layout:fixed}.eui-table--highlighted{background-color:var(--eui-table-highlighted-background-color);text-decoration:none}.eui-table .actionsColumn,.eui-table__actions-column{text-align:center;width:calc(15 * var(--eui-base-spacing-m))}.eui-table.eui-table__loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-100);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:var(--eui-table-loading-position);width:80px;z-index:1000001}.eui-table.eui-table__loading tbody{opacity:var(--eui-base-disabled-opacity)}.eui-table thead tr.eui-table__columns-filter th{background-color:var(--eui-base-color-grey-5);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-table thead tr th{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table thead tr th .eui-resizable .eui-resizable-icon__container{transform:translateY(calc(var(--eui-base-spacing-l) + 2px + 2px))}.eui-table thead tr th.eui-table__sortable-col .eui-table__sortable-col-content{display:inherit;position:relative;vertical-align:middle;white-space:nowrap}.eui-table thead tr th.eui-table__sortable-col--disabled{cursor:default}.eui-table thead tr th .eui-table__sortable-icon-button{margin-left:var(--eui-base-spacing-2xs)}.eui-table thead tr th.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table thead tr th.eui-table__cell-select .eui-table__cell-select--indeterminated{position:absolute;right:50%;top:var(--eui-base-spacing-s);transform:translate(50%)}.eui-table tbody tr{border-top:1px solid var(--eui-base-color-grey-15);height:calc(3 * var(--eui-base-spacing-m))}.eui-table tbody tr.eui-table__row--selected,.eui-table tbody tr.eui-table__row--selected td{background-color:var(--eui-table-selected-row-background-color)!important}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr:not(.eui-table-expandable-row):nth-child(odd) td{background-color:var(--eui-base-color-grey-2)}.eui-table tbody tr td{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);vertical-align:middle}.eui-table tbody tr td.eui-table__cell-select{color:var(--eui-base-color-grey-75);width:auto}.eui-table tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table tbody tr:nth-of-type(odd){background-color:var(--eui-base-color-white)}.eui-table tbody tr:nth-of-type(2n){background-color:var(--eui-base-color-grey-5)}.eui-table tbody tr:nth-of-type(2n) td{background-color:var(--eui-base-color-grey-5)}.eui-table tfoot tr{border-bottom:1px solid var(--eui-base-color-grey-15);border-top:1px solid var(--eui-base-color-grey-15)}.eui-table tfoot tr td{padding:var(--eui-base-spacing-s);vertical-align:middle}.eui-table__sticky-container{overflow:auto}.eui-table__sticky-container::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-table__sticky-container::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-table__sticky-container::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-table__sticky-container::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-table--sticky-header thead tr th{position:sticky;top:0;z-index:8}.eui-table--sticky-columns .eui-table__col--sticky{position:sticky}.eui-table--sticky-columns th.eui-table__col--sticky{z-index:9}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns th.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky{z-index:8}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-first{box-shadow:inset -5px 0 8px -8px #0003}.eui-table--sticky-columns td.eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:inset 5px 0 8px -8px #0003}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-xs);white-space:nowrap;width:45%;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}@media screen and (max-width: 767px){.eui-table:not(.eui-table-cards).eui-table--responsive{width:100%}.eui-table:not(.eui-table-cards).eui-table--responsive thead,.eui-table:not(.eui-table-cards).eui-table--responsive tbody,.eui-table:not(.eui-table-cards).eui-table--responsive tfoot,.eui-table:not(.eui-table-cards).eui-table--responsive th,.eui-table:not(.eui-table-cards).eui-table--responsive td,.eui-table:not(.eui-table-cards).eui-table--responsive tr{display:block}.eui-table:not(.eui-table-cards).eui-table--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-table:not(.eui-table-cards).eui-table--responsive tr{height:auto}.eui-table:not(.eui-table-cards).eui-table--responsive td{border:none;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-2xs);padding-left:50%;position:relative;text-align:left!important}.eui-table:not(.eui-table-cards).eui-table--responsive td:before{color:var(--eui-base-color-grey-80);content:attr(data-col-label);left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs);position:absolute;top:var(--eui-base-spacing-2xs);width:45%;overflow:hidden;text-overflow:ellipsis;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-table:not(.eui-table-cards) .actionsColumn{text-align:left;width:100%}}.eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-table__filter--responsive{width:100%}.eui-table__filter-input{padding-left:var(--eui-base-spacing-2xl)!important}.eui-table__filter-search-icon{left:var(--eui-base-spacing-xs);position:absolute;top:calc(var(--eui-base-spacing-xs) + 2px)}@media screen and (max-width: 767px){.eui-table__filter--responsive{display:block;width:100%}}.eui-table__draggable-preview--no-preview.cdk-drag-preview{display:none}.eui-table--draggable tr.eui-table__draggable-preview--no-placeholder{opacity:1}.eui-table--draggable tr:hover{background-color:var(--eui-base-color-accent-5)}.eui-table--draggable td .cdk-drop-list{flex-direction:column}.eui-table-cards{background-color:transparent;display:flex;flex-direction:column;overflow:hidden;width:100%}.eui-table-cards thead{width:100%}.eui-table-cards thead tr{align-items:center;height:auto}.eui-table-cards thead tr th{position:relative;vertical-align:middle;width:100%}.eui-table-cards thead tr th.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards thead tr th.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody{width:100%}.eui-table-cards tbody tr{align-items:center;border-top:0;display:flex;height:auto;width:100%}.eui-table-cards tbody tr.eui-table__row--selected .eui-card:first-child{--eui-card-header-background-color: var(--eui-table-selected-row-background-color)}.eui-table-cards tbody tr td{position:relative;vertical-align:middle;width:100%}.eui-table-cards tbody tr td.eui-table__cell-select{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);width:auto}.eui-table-cards tbody tr td.eui-table__cell-select .eui-table__cell-select-checkbox-container{display:flex}.eui-table-cards tbody tr:hover{background-color:transparent}.eui-table-cards tbody tr:not(.eui-table-expandable-row):nth-child(odd){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(2n):hover:not(.eui-table__row--selected){background-color:transparent}.eui-table-cards tbody tr:nth-of-type(odd):hover:not(.eui-table__row--selected){background-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: EuiTableSortService }, { type: i0.ChangeDetectorRef }, { type: EuiTableSelectableRowService }, { type: i0.ElementRef }], propDecorators: { rows: [{
@@ -893,6 +893,9 @@ class EuiTableSortableColComponent {
                 if (sortingParams.sort !== this.sortOn) {
                     this.order = null;
                 }
+                else {
+                    this.order = sortingParams.order;
+                }
             }
             else {
                 this.multisortParams = [...multisortParams];
@@ -998,10 +1001,10 @@ class EuiTableSortableColComponent {
     isElementUniqueName(arr, el) {
         return arr.filter((col) => col.name === el.name).length === 1;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSortableColComponent, deps: [{ token: EuiTableSortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiTableSortableColComponent, selector: "th[sortable]", inputs: { sortOn: "sortOn", sortOrder: "sortOrder", defaultMultiOrder: "defaultMultiOrder", defaultOrder: "defaultOrder", sortDisabled: "sortDisabled", isMultiSortable: "isMultiSortable" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: EuiDropdownComponent, descendants: true }], ngImport: i0, template: "<div class=\"eui-table__sortable-col-content\">\n    <ng-content></ng-content>\n    <button *ngIf=\"!sortDisabled\" euiSizeS euiButton euiIconButton euiBasicButton class=\"eui-table__sortable-icon-button\" (click)=\"click()\">\n        <eui-icon-svg\n            *ngIf=\"!order\"\n            icon=\"eui-swap-vertical\"\n            fillColor=\"grey-50\"\n            [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'asc'\"\n            icon=\"eui-arrow-up\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'desc'\"\n            icon=\"eui-arrow-down\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n    </button>\n    <ng-template *ngIf=\"isMultiSortable\" [ngTemplateOutlet]=\"sortDropdown\"></ng-template>\n</div>\n<ng-template #sortDropdown let-index>\n    <eui-dropdown [isClosedOnClickInside]=\"false\">\n        <button euiButton euiBasicButton euiRounded euiIconButton euiSizeS [euiDisabled]=\"sortDisabled\" (click)=\"onOpenDropdown()\">\n            <span euiBadge euiPrimary euiOutline>{{ currentMultiSortPosition }}</span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-u-pt-xs eui-u-pl-s\">\n                <small>{{ 'eui.euitable.CHOOSE-SORT-ORDER' | translate }}</small>\n            </div>\n            <form [formGroup]=\"form\" *ngIf=\"form\">\n                <ng-container formArrayName=\"columns\">\n                    <ng-container *ngFor=\"let columnForm of columns.controls; let i = index\">\n                        <div class=\"eui-u-flex eui-u-p-s\" [formGroup]=\"form.get('columns')['controls'][i]\">\n                            <span euiLabel class=\"eui-u-mr-s\">{{ i + 1 }}</span>\n                            <select euiSelect euiSizeS formControlName=\"name\" class=\"eui-u-mr-s\">\n                                <option value=\"\"></option>\n                                <option *ngFor=\"let column of multisortParams\" [value]=\"column.name\">\n                                    {{ column.name }}\n                                </option>\n                            </select>\n                            <button\n                                *ngIf=\"!getOrderByIndex(i)\"\n                                euiSizeS\n                                euiSecondary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'asc')\">\n                                <eui-icon-svg\n                                    icon=\"eui-swap-vertical\"\n                                    [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'asc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'desc')\">\n                                <eui-icon-svg icon=\"eui-arrow-up\" [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'desc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, null)\">\n                                <eui-icon-svg\n                                    icon=\"eui-arrow-down\"\n                                    [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </form>\n            <!-- Footer-->\n            <p class=\"eui-u-mt-none eui-u-mb-none eui-u-ml-s\" *ngIf=\"error\">\n                <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>\n            </p>\n            <div class=\"eui-u-flex eui-u-flex-justify-content-between eui-u-p-s\">\n                <button euiButton euiSizeS euiSecondary (click)=\"onCancelMultiSort()\">{{ 'eui.CANCEL' | translate }}</button>\n                <button euiButton euiSizeS euiPrimary (click)=\"onSubmitMultiSort()\">{{ 'eui.APPLY' | translate }}</button>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i5.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i7.EuiFeedbackMessageComponent, selector: "eui-feedback-message", inputs: ["styleClass"] }, { kind: "component", type: i8.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i8.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i8.EuiSelectControlValueAccessor, selector: "select:not([multiple])[formControlName][euiSelect],select:not([multiple])[formControl][euiSelect],select:not([multiple])[ngModel][euiSelect]", inputs: ["placeholder"] }, { kind: "directive", type: i8.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSortableColComponent, deps: [{ token: EuiTableSortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiTableSortableColComponent, selector: "th[sortable]", inputs: { sortOn: "sortOn", sortOrder: "sortOrder", defaultMultiOrder: "defaultMultiOrder", defaultOrder: "defaultOrder", sortDisabled: "sortDisabled", isMultiSortable: "isMultiSortable" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: EuiDropdownComponent, descendants: true }], ngImport: i0, template: "<div class=\"eui-table__sortable-col-content\">\n    <ng-content></ng-content>\n    <button *ngIf=\"!sortDisabled\" euiSizeS euiButton euiIconButton euiBasicButton class=\"eui-table__sortable-icon-button\" (click)=\"click()\">\n        <eui-icon-svg\n            *ngIf=\"!order\"\n            icon=\"eui-swap-vertical\"\n            fillColor=\"grey-50\"\n            [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'asc'\"\n            icon=\"eui-arrow-up\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'desc'\"\n            icon=\"eui-arrow-down\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n    </button>\n    <ng-template *ngIf=\"isMultiSortable\" [ngTemplateOutlet]=\"sortDropdown\"></ng-template>\n</div>\n<ng-template #sortDropdown let-index>\n    <eui-dropdown [isClosedOnClickInside]=\"false\">\n        <button euiButton euiBasicButton euiRounded euiIconButton euiSizeS [euiDisabled]=\"sortDisabled\" (click)=\"onOpenDropdown()\">\n            <span euiBadge euiPrimary euiOutline>{{ currentMultiSortPosition }}</span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-u-pt-xs eui-u-pl-s\">\n                <small>{{ 'eui.euitable.CHOOSE-SORT-ORDER' | translate }}</small>\n            </div>\n            <form [formGroup]=\"form\" *ngIf=\"form\">\n                <ng-container formArrayName=\"columns\">\n                    <ng-container *ngFor=\"let columnForm of columns.controls; let i = index\">\n                        <div class=\"eui-u-flex eui-u-p-s\" [formGroup]=\"form.get('columns')['controls'][i]\">\n                            <span euiLabel class=\"eui-u-mr-s\">{{ i + 1 }}</span>\n                            <select euiSelect euiSizeS formControlName=\"name\" class=\"eui-u-mr-s\">\n                                <option value=\"\"></option>\n                                <option *ngFor=\"let column of multisortParams\" [value]=\"column.name\">\n                                    {{ column.name }}\n                                </option>\n                            </select>\n                            <button\n                                *ngIf=\"!getOrderByIndex(i)\"\n                                euiSizeS\n                                euiSecondary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'asc')\">\n                                <eui-icon-svg\n                                    icon=\"eui-swap-vertical\"\n                                    [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'asc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'desc')\">\n                                <eui-icon-svg icon=\"eui-arrow-up\" [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'desc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, null)\">\n                                <eui-icon-svg\n                                    icon=\"eui-arrow-down\"\n                                    [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </form>\n            <!-- Footer-->\n            <p class=\"eui-u-mt-none eui-u-mb-none eui-u-ml-s\" *ngIf=\"error\">\n                <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>\n            </p>\n            <div class=\"eui-u-flex eui-u-flex-justify-content-between eui-u-p-s\">\n                <button euiButton euiSizeS euiSecondary (click)=\"onCancelMultiSort()\">{{ 'eui.CANCEL' | translate }}</button>\n                <button euiButton euiSizeS euiPrimary (click)=\"onSubmitMultiSort()\">{{ 'eui.APPLY' | translate }}</button>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i5.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i7.EuiFeedbackMessageComponent, selector: "eui-feedback-message", inputs: ["styleClass"] }, { kind: "component", type: i8.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i8.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i8.EuiSelectControlValueAccessor, selector: "select:not([multiple])[formControlName][euiSelect],select:not([multiple])[formControl][euiSelect],select:not([multiple])[ngModel][euiSelect]", inputs: ["placeholder"] }, { kind: "directive", type: i8.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSortableColComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSortableColComponent, decorators: [{
             type: Component,
             args: [{ selector: 'th[sortable]', template: "<div class=\"eui-table__sortable-col-content\">\n    <ng-content></ng-content>\n    <button *ngIf=\"!sortDisabled\" euiSizeS euiButton euiIconButton euiBasicButton class=\"eui-table__sortable-icon-button\" (click)=\"click()\">\n        <eui-icon-svg\n            *ngIf=\"!order\"\n            icon=\"eui-swap-vertical\"\n            fillColor=\"grey-50\"\n            [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'asc'\"\n            icon=\"eui-arrow-up\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n        <eui-icon-svg\n            *ngIf=\"order === 'desc'\"\n            icon=\"eui-arrow-down\"\n            fillColor=\"primary-100\"\n            [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n    </button>\n    <ng-template *ngIf=\"isMultiSortable\" [ngTemplateOutlet]=\"sortDropdown\"></ng-template>\n</div>\n<ng-template #sortDropdown let-index>\n    <eui-dropdown [isClosedOnClickInside]=\"false\">\n        <button euiButton euiBasicButton euiRounded euiIconButton euiSizeS [euiDisabled]=\"sortDisabled\" (click)=\"onOpenDropdown()\">\n            <span euiBadge euiPrimary euiOutline>{{ currentMultiSortPosition }}</span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-u-pt-xs eui-u-pl-s\">\n                <small>{{ 'eui.euitable.CHOOSE-SORT-ORDER' | translate }}</small>\n            </div>\n            <form [formGroup]=\"form\" *ngIf=\"form\">\n                <ng-container formArrayName=\"columns\">\n                    <ng-container *ngFor=\"let columnForm of columns.controls; let i = index\">\n                        <div class=\"eui-u-flex eui-u-p-s\" [formGroup]=\"form.get('columns')['controls'][i]\">\n                            <span euiLabel class=\"eui-u-mr-s\">{{ i + 1 }}</span>\n                            <select euiSelect euiSizeS formControlName=\"name\" class=\"eui-u-mr-s\">\n                                <option value=\"\"></option>\n                                <option *ngFor=\"let column of multisortParams\" [value]=\"column.name\">\n                                    {{ column.name }}\n                                </option>\n                            </select>\n                            <button\n                                *ngIf=\"!getOrderByIndex(i)\"\n                                euiSizeS\n                                euiSecondary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'asc')\">\n                                <eui-icon-svg\n                                    icon=\"eui-swap-vertical\"\n                                    [aria-label]=\"'eui.euitable.NO-SORTING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'asc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, 'desc')\">\n                                <eui-icon-svg icon=\"eui-arrow-up\" [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                            <button\n                                *ngIf=\"getOrderByIndex(i) === 'desc'\"\n                                euiSizeS\n                                euiPrimary\n                                euiButton\n                                euiIconButton\n                                euiBasicButton\n                                (click)=\"onClickMultisortOrder(i + 1, null)\">\n                                <eui-icon-svg\n                                    icon=\"eui-arrow-down\"\n                                    [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\"></eui-icon-svg>\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </form>\n            <!-- Footer-->\n            <p class=\"eui-u-mt-none eui-u-mb-none eui-u-ml-s\" *ngIf=\"error\">\n                <eui-feedback-message euiDanger>{{ 'eui.euitable.WRONG-SORT-PARAMS' | translate }}</eui-feedback-message>\n            </p>\n            <div class=\"eui-u-flex eui-u-flex-justify-content-between eui-u-p-s\">\n                <button euiButton euiSizeS euiSecondary (click)=\"onCancelMultiSort()\">{{ 'eui.CANCEL' | translate }}</button>\n                <button euiButton euiSizeS euiPrimary (click)=\"onSubmitMultiSort()\">{{ 'eui.APPLY' | translate }}</button>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: EuiTableSortService }, { type: i0.ChangeDetectorRef }], propDecorators: { dropdown: [{
@@ -1066,10 +1069,10 @@ class EuiTableFilterComponent extends BaseDirective {
         this.form.reset();
         this.filterInput.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiTableFilterComponent, selector: "eui-table-filter", inputs: { placeholder: "placeholder", autoSearch: "autoSearch" }, outputs: { filterChange: "filterChange" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"eui-table__filter\">\n    <form [formGroup]=\"form\">\n        <input\n            #filterInput\n            euiClearable\n            euiInputText\n            class=\"eui-table__filter-input\"\n            formControlName=\"filter\"\n            [attr.aria-label]=\"placeholder ? placeholder : 'Filter Input Field'\"\n            placeholder=\"{{ placeholder }}\" />\n        <eui-icon-svg class=\"eui-table__filter-search-icon\" icon=\"eui-search\" set=\"eui\" size=\"m\" fillColor=\"grey-35\"></eui-icon-svg>\n    </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiTableFilterComponent, selector: "eui-table-filter", inputs: { placeholder: "placeholder", autoSearch: "autoSearch" }, outputs: { filterChange: "filterChange" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"eui-table__filter\">\n    <form [formGroup]=\"form\">\n        <input\n            #filterInput\n            euiClearable\n            euiInputText\n            class=\"eui-table__filter-input\"\n            formControlName=\"filter\"\n            [attr.aria-label]=\"placeholder ? placeholder : 'Filter Input Field'\"\n            placeholder=\"{{ placeholder }}\" />\n        <eui-icon-svg class=\"eui-table__filter-search-icon\" icon=\"eui-search\" set=\"eui\" size=\"m\" fillColor=\"grey-35\"></eui-icon-svg>\n    </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-table-filter', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-table__filter\">\n    <form [formGroup]=\"form\">\n        <input\n            #filterInput\n            euiClearable\n            euiInputText\n            class=\"eui-table__filter-input\"\n            formControlName=\"filter\"\n            [attr.aria-label]=\"placeholder ? placeholder : 'Filter Input Field'\"\n            placeholder=\"{{ placeholder }}\" />\n        <eui-icon-svg class=\"eui-table__filter-search-icon\" icon=\"eui-search\" set=\"eui\" size=\"m\" fillColor=\"grey-35\"></eui-icon-svg>\n    </form>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
@@ -1078,7 +1081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Output
             }], filterInput: [{
                 type: ViewChild,
-                args: ['filterInput']
+                args: ['filterInput', { read: ElementRef }]
             }], autoSearch: [{
                 type: Input
             }], cssClasses: [{
@@ -1096,10 +1099,10 @@ class EuiTableHighlightFilterPipe {
             return value;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableHighlightFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiTableHighlightFilterPipe, name: "euiTableHighlightFilter" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableHighlightFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: EuiTableHighlightFilterPipe, name: "euiTableHighlightFilter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableHighlightFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableHighlightFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'euiTableHighlightFilter',
@@ -1186,10 +1189,10 @@ class EuiTableSelectableRowComponent {
         e.preventDefault();
         e.stopPropagation();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSelectableRowComponent, deps: [{ token: EuiTableSelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiTableSelectableRowComponent, selector: "tr[isSelectable]", inputs: { isSelectable: "isSelectable", isChecked: "isChecked", isKeyboardSelectable: "isKeyboardSelectable" }, host: { listeners: { "click": "onClickRow($event)" }, properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "<td *ngIf=\"isSelectable\" class=\"eui-table__cell-select\">\n    <div class=\"eui-table__cell-select-checkbox-container\">\n        <input\n            *ngIf=\"isChecked\"\n            aria-label=\"default checkbox checked\"\n            euiInputCheckBox\n            checked=\"true\"\n            (click)=\"toggleCheckedState($event)\" />\n        <input\n            *ngIf=\"!isChecked\"\n            aria-label=\"default checkbox unchecked\"\n            euiInputCheckBox\n            checked=\"false\"\n            (click)=\"toggleCheckedState($event)\" />\n    </div>\n</td>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSelectableRowComponent, deps: [{ token: EuiTableSelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiTableSelectableRowComponent, selector: "tr[isSelectable]", inputs: { isSelectable: "isSelectable", isChecked: "isChecked", isKeyboardSelectable: "isKeyboardSelectable" }, host: { listeners: { "click": "onClickRow($event)" }, properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "<td *ngIf=\"isSelectable\" class=\"eui-table__cell-select\">\n    <div class=\"eui-table__cell-select-checkbox-container\">\n        <input\n            *ngIf=\"isChecked\"\n            aria-label=\"default checkbox checked\"\n            euiInputCheckBox\n            checked=\"true\"\n            (click)=\"toggleCheckedState($event)\" />\n        <input\n            *ngIf=\"!isChecked\"\n            aria-label=\"default checkbox unchecked\"\n            euiInputCheckBox\n            checked=\"false\"\n            (click)=\"toggleCheckedState($event)\" />\n    </div>\n</td>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSelectableRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSelectableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tr[isSelectable]', template: "<td *ngIf=\"isSelectable\" class=\"eui-table__cell-select\">\n    <div class=\"eui-table__cell-select-checkbox-container\">\n        <input\n            *ngIf=\"isChecked\"\n            aria-label=\"default checkbox checked\"\n            euiInputCheckBox\n            checked=\"true\"\n            (click)=\"toggleCheckedState($event)\" />\n        <input\n            *ngIf=\"!isChecked\"\n            aria-label=\"default checkbox unchecked\"\n            euiInputCheckBox\n            checked=\"false\"\n            (click)=\"toggleCheckedState($event)\" />\n    </div>\n</td>\n<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: EuiTableSelectableRowService }], propDecorators: { isSelectable: [{
@@ -1253,10 +1256,10 @@ class EuiTableSelectableHeaderComponent {
             this.euiTableSelectableRowService.unselectAllRows();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSelectableHeaderComponent, deps: [{ token: EuiTableSelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiTableSelectableHeaderComponent, selector: "tr[isSelectableHeader]", inputs: { isSelectableHeader: "isSelectableHeader", isChecked: "isChecked" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i0, template: "<th *ngIf=\"isSelectableHeader\" class=\"eui-table__cell-select\">\n    <div class=\"eui-table__cell-select-checkbox-container\">\n        <input\n            *ngIf=\"!isChecked && !isCheckedIndeterminate\"\n            aria-label=\"Unchecked\"\n            euiInputCheckBox\n            checked=\"false\"\n            (click)=\"toggleCheckedState(true)\" />\n        <input\n            *ngIf=\"isCheckedIndeterminate\"\n            aria-label=\"Indeterminate\"\n            euiInputCheckBox\n            indeterminate\n            (click)=\"toggleCheckedState(false)\" />\n        <input\n            *ngIf=\"isChecked && !isCheckedIndeterminate\"\n            aria-label=\"Checked\"\n            euiInputCheckBox\n            checked=\"true\"\n            (click)=\"toggleCheckedState(false)\" />\n    </div>\n</th>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSelectableHeaderComponent, deps: [{ token: EuiTableSelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiTableSelectableHeaderComponent, selector: "tr[isSelectableHeader]", inputs: { isSelectableHeader: "isSelectableHeader", isChecked: "isChecked" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i0, template: "<th *ngIf=\"isSelectableHeader\" class=\"eui-table__cell-select\">\n    <div class=\"eui-table__cell-select-checkbox-container\">\n        <input\n            *ngIf=\"!isChecked && !isCheckedIndeterminate\"\n            aria-label=\"Unchecked\"\n            euiInputCheckBox\n            checked=\"false\"\n            (click)=\"toggleCheckedState(true)\" />\n        <input\n            *ngIf=\"isCheckedIndeterminate\"\n            aria-label=\"Indeterminate\"\n            euiInputCheckBox\n            indeterminate\n            (click)=\"toggleCheckedState(false)\" />\n        <input\n            *ngIf=\"isChecked && !isCheckedIndeterminate\"\n            aria-label=\"Checked\"\n            euiInputCheckBox\n            checked=\"true\"\n            (click)=\"toggleCheckedState(false)\" />\n    </div>\n</th>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableSelectableHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableSelectableHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tr[isSelectableHeader]', template: "<th *ngIf=\"isSelectableHeader\" class=\"eui-table__cell-select\">\n    <div class=\"eui-table__cell-select-checkbox-container\">\n        <input\n            *ngIf=\"!isChecked && !isCheckedIndeterminate\"\n            aria-label=\"Unchecked\"\n            euiInputCheckBox\n            checked=\"false\"\n            (click)=\"toggleCheckedState(true)\" />\n        <input\n            *ngIf=\"isCheckedIndeterminate\"\n            aria-label=\"Indeterminate\"\n            euiInputCheckBox\n            indeterminate\n            (click)=\"toggleCheckedState(false)\" />\n        <input\n            *ngIf=\"isChecked && !isCheckedIndeterminate\"\n            aria-label=\"Checked\"\n            euiInputCheckBox\n            checked=\"true\"\n            (click)=\"toggleCheckedState(false)\" />\n    </div>\n</th>\n<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: EuiTableSelectableRowService }], propDecorators: { checkbox: [{
@@ -1272,10 +1275,10 @@ class EuiTableExpandableRowComponent {
     constructor() {
         this.string = 'eui-table-expandable-row';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableExpandableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiTableExpandableRowComponent, selector: "tr[euiTableExpandableRow]", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableExpandableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiTableExpandableRowComponent, selector: "tr[euiTableExpandableRow]", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableExpandableRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableExpandableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tr[euiTableExpandableRow]', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { string: [{
@@ -1287,10 +1290,10 @@ class EuiTableStickyColumnDirective {
     get stickyClass() {
         return true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableStickyColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: EuiTableStickyColumnDirective, selector: "[isStickyColumn]", host: { properties: { "class.eui-table__col--sticky": "this.stickyClass" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableStickyColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: EuiTableStickyColumnDirective, selector: "[isStickyColumn]", host: { properties: { "class.eui-table__col--sticky": "this.stickyClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableStickyColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableStickyColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1302,8 +1305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
             }] } });
 class EuiTableModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiTableModule, declarations: [EuiTableComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: EuiTableModule, declarations: [EuiTableComponent,
             EuiTableSortableColComponent,
             EuiTableFilterComponent,
             EuiTableSelectableRowComponent,
@@ -1331,7 +1334,7 @@ class EuiTableModule {
             EuiTableHighlightFilterPipe,
             EuiTemplateDirectiveModule,
             EuiTableStickyColumnDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableModule, imports: [CommonModule,
             TranslateModule,
             FormsModule,
             EuiIconModule,
@@ -1345,7 +1348,7 @@ class EuiTableModule {
             EuiFeedbackMessageModule,
             EuiSelectModule, EuiTemplateDirectiveModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [