@clr/angular 12.2.0 → 12.4.0

package/fesm2015/clr-angular.js

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT, NgForOf, getLocaleDayNames, FormStyle, TranslationWidth, getLocaleMonthNames, getLocaleFirstDayOfWeek, getLocaleDateFormat, FormatWidth } from '@angular/common';
 import { ClarityIcons, angleIcon, exclamationCircleIcon, checkCircleIcon, ellipsisHorizontalIcon, windowCloseIcon, eventIcon, calendarIcon, eyeHideIcon, eyeIcon, ellipsisVerticalIcon, viewColumnsIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, infoCircleIcon, exclamationTriangleIcon, circleIcon, dotCircleIcon, errorStandardIcon, successStandardIcon } from '@cds/core/icon';
 import { map, tap, startWith, distinctUntilChanged, pairwise, filter, debounceTime, take, first, switchMap, takeUntil } from 'rxjs/operators';
-import { Subject, BehaviorSubject, fromEvent, isObservable, of, ReplaySubject, combineLatest, Observable } from 'rxjs';
+import { Subject, BehaviorSubject, Observable, fromEvent, isObservable, of, ReplaySubject, combineLatest } from 'rxjs';
 import { trigger, transition, style, animate, keyframes, state } from '@angular/animations';
 import { FormControl, FormGroup, FormGroupName, NgModelGroup, FormGroupDirective, NgForm, NgControl, FormsModule, SelectMultipleControlValueAccessor } from '@angular/forms';
 import { FocusTrapTrackerService, createId, isFocusable, isHTMLElement } from '@cds/core/internal';
@@ -1136,9 +1136,7 @@ class ClrStepper {
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     listenForFormResetChanges() {
-        return this.form.statusChanges
-            .pipe(filter(() => this.form.pristine)) // https://github.com/angular/angular/issues/10887
-            .subscribe(() => this.stepperService.resetPanels());
+        return fromControlReset(this.form.form).subscribe(() => this.stepperService.resetPanels());
     }
     listenForPanelsCompleted() {
         return this.stepperService.panelsCompleted.subscribe(panelsCompleted => {
@@ -1184,6 +1182,18 @@ ClrStepper.propDecorators = {
     initialPanel: [{ type: Input, args: ['clrInitialStep',] }],
     panels: [{ type: ContentChildren, args: [ClrStepperPanel, { descendants: true },] }]
 };
+function fromControlReset(control) {
+    return new Observable(observer => {
+        const unpatchedControlReset = control.reset;
+        control.reset = () => {
+            observer.next();
+            unpatchedControlReset.apply(control);
+        };
+        return () => {
+            control.reset = unpatchedControlReset;
+        };
+    });
+}
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -12999,6 +13009,10 @@ class Selection {
          * Subscriptions to the other providers changes.
          */
         this.subscriptions = [];
+        /**
+         * Shift key state, for use in range selection.
+         */
+        this.shiftPressed = false;
         this.valueCollector = new Subject();
         /**
          * The Observable that lets other classes subscribe to selection changes
@@ -13386,7 +13400,7 @@ WrappedRow.propDecorators = {
  */
 let nbRow = 0;
 class ClrDatagridRow {
-    constructor(selection, rowActionService, globalExpandable, expand, detailService, displayMode, vcr, renderer, el, commonStrings) {
+    constructor(selection, rowActionService, globalExpandable, expand, detailService, displayMode, vcr, renderer, el, commonStrings, items, document) {
         this.selection = selection;
         this.rowActionService = rowActionService;
         this.globalExpandable = globalExpandable;
@@ -13397,6 +13411,8 @@ class ClrDatagridRow {
         this.renderer = renderer;
         this.el = el;
         this.commonStrings = commonStrings;
+        this.items = items;
+        this.document = document;
         /* reference to the enum so that template can access */
         this.SELECTION_TYPE = SelectionType;
         this.expandAnimationTrigger = false;
@@ -13426,6 +13442,24 @@ class ClrDatagridRow {
             }
         }));
     }
+    /**
+     * The default behavior in Chrome and Firefox for shift-clicking on a label is to perform text-selection.
+     * This prevents our intended range-selection, because this text-selection overrides our shift-click event.
+     * We need to clear the stored selection range when shift-clicking. This will override the mostly unused shift-click
+     * selection browser functionality, which is inconsistently implemented in browsers anyway.
+     */
+    clearRanges(event) {
+        if (event.shiftKey) {
+            this.document.getSelection().removeAllRanges();
+            // Firefox is too persistent about its text-selection behaviour. So we need to add a preventDefault();
+            // We should not try to enforce this on the other browsers, though, because their toggle cycle does not get canceled by
+            // the preventDefault() and they toggle the checkbox second time, effectively retrurning it to not-selected.
+            if (window.navigator.userAgent.indexOf('Firefox') !== -1) {
+                event.preventDefault();
+                this.toggle(true);
+            }
+        }
+    }
     /**
      * Indicates if the row is selected
      */
@@ -13442,6 +13476,12 @@ class ClrDatagridRow {
             this._selected = value;
         }
         else {
+            if (value && this.selection.selectionType === SelectionType.Multi) {
+                this.rangeSelect();
+            }
+            else {
+                this.selection.rangeStart = null;
+            }
             this.selection.setSelected(this.item, value);
         }
     }
@@ -13523,6 +13563,29 @@ class ClrDatagridRow {
             this.expandAnimationTrigger = !this.expandAnimationTrigger;
         }));
     }
+    rangeSelect() {
+        const items = this.items.displayed;
+        if (!items) {
+            return;
+        }
+        const startIx = items.indexOf(this.selection.rangeStart);
+        if (this.selection.rangeStart &&
+            this.selection.current.includes(this.selection.rangeStart) &&
+            this.selection.shiftPressed &&
+            startIx !== -1) {
+            const endIx = items.indexOf(this.item);
+            // Using Set to remove duplicates
+            const newSelection = new Set(this.selection.current.concat(items.slice(Math.min(startIx, endIx), Math.max(startIx, endIx) + 1)));
+            this.selection.clearSelection();
+            this.selection.current.push(...newSelection);
+        }
+        else {
+            // page number has changed or
+            // no Shift was pressed or
+            // rangeStart not yet set
+            this.selection.rangeStart = this.item;
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
@@ -13537,7 +13600,7 @@ class ClrDatagridRow {
 ClrDatagridRow.decorators = [
     { type: Component, args: [{
                 selector: 'clr-dg-row',
-                template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<label class=\"datagrid-row-clickable\" *ngIf=\"selection.rowSelectionMode\">\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</label>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\n    [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n  >\n    <div class=\"datagrid-row-sticky\">\n      <!-- Sticky elements here -->\n      <ng-container #stickyCells>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <div class=\"clr-checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [attr.disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-label]=\"commonStrings.keys.select\"\n            />\n            <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n            <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\">\n              <span class=\"clr-sr-only\">{{commonStrings.keys.select}}</span>\n            </label>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        >\n          <!-- TODO: it would be better if in addition to the generic \"Select\" label, we could add aria-labelledby\n          to label the radio by the first cell in the row (typically an id or name).\n          It's pretty easy to label it with the whole row since we already have an id for it, but in most\n          cases the row is far too long to serve as a label, the screenreader reads every single cell content. -->\n          <input\n            type=\"radio\"\n            clrRadio\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [(ngModel)]=\"selection.currentSingle\"\n            [checked]=\"selection.currentSingle === item\"\n            [attr.disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-label]=\"commonStrings.keys.select\"\n          />\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\n              type=\"button\"\n              class=\"datagrid-expandable-caret-button\"\n              [attr.aria-expanded]=\"expand.expanded\"\n              [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n              [attr.aria-controls]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n          <button\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isOpen ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isOpen\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n              class=\"datagrid-detail-caret-icon\"\n              [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n            ></cds-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- placeholder for projecting other sticky cells as pinned-->\n    </div>\n    <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n      <div class=\"datagrid-scrolling-cells\">\n        <ng-content select=\"clr-dg-cell\"></ng-content>\n        <ng-container #scrollableCells></ng-container>\n      </div>\n      <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n",
+                template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<label class=\"datagrid-row-clickable\" *ngIf=\"selection.rowSelectionMode\" (mousedown)=\"clearRanges($event)\">\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</label>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\n    [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n  >\n    <div class=\"datagrid-row-sticky\">\n      <!-- Sticky elements here -->\n      <ng-container #stickyCells>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <div class=\"clr-checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [attr.disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-label]=\"commonStrings.keys.select\"\n            />\n            <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n            <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n              <span class=\"clr-sr-only\">{{commonStrings.keys.select}}</span>\n            </label>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        >\n          <!-- TODO: it would be better if in addition to the generic \"Select\" label, we could add aria-labelledby\n          to label the radio by the first cell in the row (typically an id or name).\n          It's pretty easy to label it with the whole row since we already have an id for it, but in most\n          cases the row is far too long to serve as a label, the screenreader reads every single cell content. -->\n          <input\n            type=\"radio\"\n            clrRadio\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [(ngModel)]=\"selection.currentSingle\"\n            [checked]=\"selection.currentSingle === item\"\n            [attr.disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-label]=\"commonStrings.keys.select\"\n          />\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\n              type=\"button\"\n              class=\"datagrid-expandable-caret-button\"\n              [attr.aria-expanded]=\"expand.expanded\"\n              [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n              [attr.aria-controls]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n          <button\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isOpen ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isOpen\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n              class=\"datagrid-detail-caret-icon\"\n              [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n            ></cds-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- placeholder for projecting other sticky cells as pinned-->\n    </div>\n    <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n      <div class=\"datagrid-scrolling-cells\">\n        <ng-content select=\"clr-dg-cell\"></ng-content>\n        <ng-container #scrollableCells></ng-container>\n      </div>\n      <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n",
                 host: {
                     '[class.datagrid-row]': 'true',
                     '[class.datagrid-selected]': 'selected',
@@ -13561,7 +13624,9 @@ ClrDatagridRow.ctorParameters = () => [
     { type: ViewContainerRef },
     { type: Renderer2 },
     { type: ElementRef },
-    { type: ClrCommonStringsService }
+    { type: ClrCommonStringsService },
+    { type: Items },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
 ];
 ClrDatagridRow.propDecorators = {
     expandAnimation: [{ type: ViewChild, args: [ClrExpandableAnimation,] }],
@@ -13932,7 +13997,7 @@ KeyNavigationGridController.ctorParameters = () => [
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagrid {
-    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings, columnsService, keyNavigation) {
+    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, document, el, page, commonStrings, columnsService, keyNavigation, zone) {
         this.organizer = organizer;
         this.items = items;
         this.expandableRows = expandableRows;
@@ -13942,11 +14007,13 @@ class ClrDatagrid {
         this.displayMode = displayMode;
         this.renderer = renderer;
         this.detailService = detailService;
+        this.document = document;
         this.el = el;
         this.page = page;
         this.commonStrings = commonStrings;
         this.columnsService = columnsService;
         this.keyNavigation = keyNavigation;
+        this.zone = zone;
         /* reference to the enum so that template can access */
         this.SELECTION_TYPE = SelectionType;
         /**
@@ -14131,6 +14198,19 @@ class ClrDatagrid {
                 });
             }
         }));
+        // We need to preserve shift state, so it can be used on selection change, regardless of the input event
+        // that triggered the change. This helps us to easily resolve the k/b only case together with the mouse selection case.
+        this.zone.runOutsideAngular(() => {
+            this._subscriptions.push(fromEvent(this.document.body, 'keydown').subscribe((event) => {
+                if (event.key === 'Shift') {
+                    this.selection.shiftPressed = true;
+                }
+            }), fromEvent(this.document.body, 'keyup').subscribe((event) => {
+                if (event.key === 'Shift') {
+                    this.selection.shiftPressed = false;
+                }
+            }));
+        });
     }
     ngOnDestroy() {
         this._subscriptions.forEach((sub) => sub.unsubscribe());
@@ -14178,11 +14258,13 @@ ClrDatagrid.ctorParameters = () => [
     { type: Renderer2 },
     { type: DetailService },
     { type: String, decorators: [{ type: Inject, args: [UNIQUE_ID,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
     { type: ElementRef },
     { type: Page },
     { type: ClrCommonStringsService },
     { type: ColumnsService },
-    { type: KeyNavigationGridController }
+    { type: KeyNavigationGridController },
+    { type: NgZone }
 ];
 ClrDatagrid.propDecorators = {
     loading: [{ type: Input, args: ['clrDgLoading',] }],
@@ -15138,6 +15220,7 @@ ClrDatagridItemsTrackBy.propDecorators = {
 class ClrDatagridPageSize {
     constructor(page) {
         this.page = page;
+        this.pageSizeOptionsId = uniqueIdFactory();
     }
     ngOnInit() {
         if (!this.pageSizeOptions || this.pageSizeOptions.length === 0) {
@@ -15151,7 +15234,7 @@ ClrDatagridPageSize.decorators = [
                 template: `
     <ng-content></ng-content>
     <div class="clr-select-wrapper">
-      <select [class.clr-page-size-select]="true" [(ngModel)]="page.size">
+      <select [id]="pageSizeOptionsId" [class.clr-page-size-select]="true" [(ngModel)]="page.size">
         <option *ngFor="let option of pageSizeOptions" [ngValue]="option">{{ option }}</option>
       </select>
     </div>
@@ -15162,7 +15245,8 @@ ClrDatagridPageSize.ctorParameters = () => [
     { type: Page }
 ];
 ClrDatagridPageSize.propDecorators = {
-    pageSizeOptions: [{ type: Input, args: ['clrPageSizeOptions',] }]
+    pageSizeOptions: [{ type: Input, args: ['clrPageSizeOptions',] }],
+    pageSizeOptionsId: [{ type: Input, args: ['clrPageSizeOptionsId',] }]
 };
 
 /*