@eui/components 18.0.0-rc.4 → 18.0.0-rc.5

package/fesm2022/eui-components-eui-table-v2.mjs

@@ -15,7 +15,7 @@ import { style, animate } from '@angular/animations';
 import * as i2 from '@eui/components/eui-input-checkbox';
 import { EuiInputCheckboxModule } from '@eui/components/eui-input-checkbox';
 import * as i1$1 from '@angular/forms';
-import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@eui/components/eui-icon';
 import { EuiIconModule } from '@eui/components/eui-icon';
 import * as i3$1 from '@eui/components/eui-input-text';
@@ -783,8 +783,19 @@ class EuiTableV2SelectableHeaderComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    toggleCheckedState(value) {
-        this.isChecked = value;
+    get ariaLabel() {
+        if (!this.isChecked && !this.isCheckedIndeterminate) {
+            return 'Unchecked';
+        }
+        if (this.isCheckedIndeterminate) {
+            return 'Indeterminate';
+        }
+        if (this.isChecked && !this.isCheckedIndeterminate) {
+            return 'Checked';
+        }
+    }
+    toggleCheckedState(e) {
+        this.isChecked = e.target.checked;
         if (this.isChecked) {
             this.euiDataTableSelectableRowService.selectAllRows();
         }
@@ -793,15 +804,12 @@ class EuiTableV2SelectableHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiTableV2SelectableHeaderComponent, deps: [{ token: EuiTableV2SelectableRowService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: EuiTableV2SelectableHeaderComponent, selector: "tr[isHeaderSelectable]", inputs: { isHeaderSelectable: ["isHeaderSelectable", "isHeaderSelectable", booleanAttribute] }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i0, template: "@if (isHeaderSelectable) {\n    <th class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            @if (!isChecked && !isCheckedIndeterminate) {\n                <input aria-label=\"Unchecked\" euiInputCheckBox checked=\"false\" (click)=\"toggleCheckedState(true)\" />\n            }\n            @if (isCheckedIndeterminate) {\n                <input aria-label=\"Indeterminate\" euiInputCheckBox indeterminate (click)=\"toggleCheckedState(false)\" />\n            }\n            @if (isChecked && !isCheckedIndeterminate) {\n                <input aria-label=\"Checked\" euiInputCheckBox checked=\"true\" (click)=\"toggleCheckedState(false)\" />\n            }\n        </div>\n    </th>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: i2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: EuiTableV2SelectableHeaderComponent, selector: "tr[isHeaderSelectable]", inputs: { isHeaderSelectable: ["isHeaderSelectable", "isHeaderSelectable", booleanAttribute] }, ngImport: i0, template: "@if (isHeaderSelectable) {\n    <th class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            <input [attr.aria-label]=\"ariaLabel\" euiInputCheckBox [checked]=\"isChecked ? 'checked' : null\" [indeterminate]=\"isCheckedIndeterminate\" (click)=\"toggleCheckedState($event)\" />\n        </div>\n    </th>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: i2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiTableV2SelectableHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tr[isHeaderSelectable]', template: "@if (isHeaderSelectable) {\n    <th class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            @if (!isChecked && !isCheckedIndeterminate) {\n                <input aria-label=\"Unchecked\" euiInputCheckBox checked=\"false\" (click)=\"toggleCheckedState(true)\" />\n            }\n            @if (isCheckedIndeterminate) {\n                <input aria-label=\"Indeterminate\" euiInputCheckBox indeterminate (click)=\"toggleCheckedState(false)\" />\n            }\n            @if (isChecked && !isCheckedIndeterminate) {\n                <input aria-label=\"Checked\" euiInputCheckBox checked=\"true\" (click)=\"toggleCheckedState(false)\" />\n            }\n        </div>\n    </th>\n}\n<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: EuiTableV2SelectableRowService }], propDecorators: { checkbox: [{
-                type: ViewChild,
-                args: ['checkbox']
-            }], isHeaderSelectable: [{
+            args: [{ selector: 'tr[isHeaderSelectable]', template: "@if (isHeaderSelectable) {\n    <th class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            <input [attr.aria-label]=\"ariaLabel\" euiInputCheckBox [checked]=\"isChecked ? 'checked' : null\" [indeterminate]=\"isCheckedIndeterminate\" (click)=\"toggleCheckedState($event)\" />\n        </div>\n    </th>\n}\n<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: EuiTableV2SelectableRowService }], propDecorators: { isHeaderSelectable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
@@ -871,23 +879,20 @@ class EuiTableV2SelectableRowComponent {
         this.destroy$.unsubscribe();
     }
     toggleCheckedState(e) {
-        if (!this.isChecked) {
-            this.isChecked = true;
+        this.isChecked = e.target.checked;
+        if (this.isChecked) {
             this.euiDataTableSelectableRowService.selectRow(this.isDataSelectable);
         }
         else {
-            this.isChecked = false;
             this.euiDataTableSelectableRowService.unselectRow(this.isDataSelectable);
         }
-        e.preventDefault();
-        e.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiTableV2SelectableRowComponent, deps: [{ token: EuiTableV2SelectableRowService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: EuiTableV2SelectableRowComponent, selector: "tr[isDataSelectable]", inputs: { isDataSelectable: "isDataSelectable", isChecked: ["isChecked", "isChecked", booleanAttribute], isKeyboardSelectable: ["isKeyboardSelectable", "isKeyboardSelectable", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "@if (isDataSelectable) {\n    <td class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            @if (isChecked) {\n                <input aria-label=\"default checkbox checked\" euiInputCheckBox checked=\"true\" (click)=\"toggleCheckedState($event)\" />\n            }\n            @if (!isChecked) {\n                <input aria-label=\"default checkbox unchecked\" euiInputCheckBox checked=\"false\" (click)=\"toggleCheckedState($event)\" />\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: i2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: EuiTableV2SelectableRowComponent, selector: "tr[isDataSelectable]", inputs: { isDataSelectable: "isDataSelectable", isChecked: ["isChecked", "isChecked", booleanAttribute], isKeyboardSelectable: ["isKeyboardSelectable", "isKeyboardSelectable", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "@if (isDataSelectable) {\n    <td class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            <input\n                euiInputCheckBox\n                [attr.aria-label]=\"isChecked ? 'default checkbox checked' : 'default checkbox unchecked'\"\n                [(ngModel)]=\"isChecked\"\n                (change)=\"toggleCheckedState($event)\" />\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: i2.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiTableV2SelectableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tr[isDataSelectable]', template: "@if (isDataSelectable) {\n    <td class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            @if (isChecked) {\n                <input aria-label=\"default checkbox checked\" euiInputCheckBox checked=\"true\" (click)=\"toggleCheckedState($event)\" />\n            }\n            @if (!isChecked) {\n                <input aria-label=\"default checkbox unchecked\" euiInputCheckBox checked=\"false\" (click)=\"toggleCheckedState($event)\" />\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n" }]
+            args: [{ selector: 'tr[isDataSelectable]', template: "@if (isDataSelectable) {\n    <td class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            <input\n                euiInputCheckBox\n                [attr.aria-label]=\"isChecked ? 'default checkbox checked' : 'default checkbox unchecked'\"\n                [(ngModel)]=\"isChecked\"\n                (change)=\"toggleCheckedState($event)\" />\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: EuiTableV2SelectableRowService }, { type: i0.ElementRef }], propDecorators: { isDataSelectable: [{
                 type: Input
             }], isChecked: [{
@@ -1078,6 +1083,7 @@ class EuiTableV2Module {
             ScrollingModule,
             EuiSkeletonModule,
             EuiInputCheckboxModule,
+            FormsModule,
             ReactiveFormsModule,
             EuiIconModule,
             EuiInputTextModule,
@@ -1097,6 +1103,7 @@ class EuiTableV2Module {
             ScrollingModule,
             EuiSkeletonModule,
             EuiInputCheckboxModule,
+            FormsModule,
             ReactiveFormsModule,
             EuiIconModule,
             EuiInputTextModule,
@@ -1113,6 +1120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         ScrollingModule,
                         EuiSkeletonModule,
                         EuiInputCheckboxModule,
+                        FormsModule,
                         ReactiveFormsModule,
                         EuiIconModule,
                         EuiInputTextModule,