@clr/angular 12.1.3 → 12.3.1

package/bundles/clr-angular.umd.js

@@ -354,7 +354,9 @@
         return ClrIconCustomTag;
     }());
     ClrIconCustomTag.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-icon' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-icon',
+                },] }
     ];
     var CdsIconCustomTag = /** @class */ (function () {
         function CdsIconCustomTag() {
@@ -362,7 +364,9 @@
         return CdsIconCustomTag;
     }());
     CdsIconCustomTag.decorators = [
-        { type: i0.Directive, args: [{ selector: 'cds-icon' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'cds-icon',
+                },] }
     ];
 
     /*
@@ -441,7 +445,9 @@
         return ClrLoading;
     }());
     ClrLoading.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrLoading]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrLoading]',
+                },] }
     ];
     ClrLoading.ctorParameters = function () { return [
         { type: LoadingListener, decorators: [{ type: i0.Optional }] }
@@ -1141,7 +1147,9 @@
         return AccordionWillyWonka;
     }(WillyWonka));
     AccordionWillyWonka.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-accordion' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-accordion',
+                },] }
     ];
 
     var AccordionOompaLoompa = /** @class */ (function (_super) {
@@ -1165,7 +1173,9 @@
         return AccordionOompaLoompa;
     }(OompaLoompa));
     AccordionOompaLoompa.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-accordion-panel' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-accordion-panel',
+                },] }
     ];
     AccordionOompaLoompa.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
@@ -1545,9 +1555,7 @@
         };
         ClrStepper.prototype.listenForFormResetChanges = function () {
             var _this = this;
-            return this.form.statusChanges
-                .pipe(operators.filter(function () { return _this.form.pristine; })) // https://github.com/angular/angular/issues/10887
-                .subscribe(function () { return _this.stepperService.resetPanels(); });
+            return fromControlReset(this.form.form).subscribe(function () { return _this.stepperService.resetPanels(); });
         };
         ClrStepper.prototype.listenForPanelsCompleted = function () {
             var _this = this;
@@ -1596,6 +1604,18 @@
         initialPanel: [{ type: i0.Input, args: ['clrInitialStep',] }],
         panels: [{ type: i0.ContentChildren, args: [ClrStepperPanel, { descendants: true },] }]
     };
+    function fromControlReset(control) {
+        return new rxjs.Observable(function (observer) {
+            var unpatchedControlReset = control.reset;
+            control.reset = function () {
+                observer.next();
+                unpatchedControlReset.apply(control);
+            };
+            return function () {
+                control.reset = unpatchedControlReset;
+            };
+        });
+    }
 
     var StepperWillyWonka = /** @class */ (function (_super) {
         __extends(StepperWillyWonka, _super);
@@ -1605,7 +1625,9 @@
         return StepperWillyWonka;
     }(WillyWonka));
     StepperWillyWonka.decorators = [
-        { type: i0.Directive, args: [{ selector: 'form[clrStepper]' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'form[clrStepper]',
+                },] }
     ];
 
     var StepperOompaLoompa = /** @class */ (function (_super) {
@@ -1629,7 +1651,9 @@
         return StepperOompaLoompa;
     }(OompaLoompa));
     StepperOompaLoompa.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-stepper-panel, [clrStepButton]' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-stepper-panel, [clrStepButton]',
+                },] }
     ];
     StepperOompaLoompa.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
@@ -2607,7 +2631,9 @@
         return ClrPopoverContent;
     }());
     ClrPopoverContent.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrPopoverContent]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrPopoverContent]',
+                },] }
     ];
     ClrPopoverContent.ctorParameters = function () { return [
         { type: HTMLDocument, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] },
@@ -3365,7 +3391,7 @@
     ClrControlError.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-control-error',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[class.clr-subtext]': 'true',
                         '[attr.id]': 'id',
@@ -3391,7 +3417,7 @@
     ClrControlHelper.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-control-helper',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[class.clr-subtext]': 'true',
                         '[attr.id]': 'id',
@@ -3611,7 +3637,9 @@
         return ClrLabel;
     }());
     ClrLabel.decorators = [
-        { type: i0.Directive, args: [{ selector: 'label' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'label',
+                },] }
     ];
     ClrLabel.ctorParameters = function () { return [
         { type: ControlIdService, decorators: [{ type: i0.Optional }] },
@@ -3689,7 +3717,7 @@
     ClrControlSuccess.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-control-success',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[class.clr-subtext]': 'true',
                         '[attr.id]': 'id',
@@ -4071,7 +4099,10 @@
         return ClrControl;
     }(WrappedFormControl));
     ClrControl.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrControl]', host: { '[class.clr-input]': 'true' } },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrControl]',
+                    host: { '[class.clr-input]': 'true' },
+                },] }
     ];
     ClrControl.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
@@ -4216,7 +4247,9 @@
         return ClrIfError;
     }(AbstractIfState));
     ClrIfError.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrIfError]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrIfError]',
+                },] }
     ];
     ClrIfError.ctorParameters = function () { return [
         { type: IfControlStateService, decorators: [{ type: i0.Optional }] },
@@ -4255,7 +4288,9 @@
         return ClrIfSuccess;
     }(AbstractIfState));
     ClrIfSuccess.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrIfSuccess]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrIfSuccess]',
+                },] }
     ];
     ClrIfSuccess.ctorParameters = function () { return [
         { type: IfControlStateService, decorators: [{ type: i0.Optional }] },
@@ -4410,7 +4445,9 @@
         return ClrCheckbox;
     }(WrappedFormControl));
     ClrCheckbox.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrCheckbox],[clrToggle]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrCheckbox],[clrToggle]',
+                },] }
     ];
     ClrCheckbox.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
@@ -4606,7 +4643,7 @@
     ClrSpinner.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-spinner',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[attr.aria-busy]': 'true',
                     }
@@ -4815,7 +4852,9 @@
         return ClrIfActive;
     }());
     ClrIfActive.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrIfActive]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrIfActive]',
+                },] }
     ];
     ClrIfActive.ctorParameters = function () { return [
         { type: IfActiveService },
@@ -4909,7 +4948,9 @@
         return ClrIfExpanded;
     }());
     ClrIfExpanded.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrIfExpanded]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrIfExpanded]',
+                },] }
     ];
     ClrIfExpanded.ctorParameters = function () { return [
         { type: i0.TemplateRef, decorators: [{ type: i0.Optional }] },
@@ -5001,7 +5042,9 @@
         return ClrIfOpen;
     }());
     ClrIfOpen.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrIfOpen]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrIfOpen]',
+                },] }
     ];
     ClrIfOpen.ctorParameters = function () { return [
         { type: ClrPopoverToggleService },
@@ -5743,7 +5786,9 @@
         return ClrOptionSelected;
     }());
     ClrOptionSelected.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrOptionSelected]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrOptionSelected]',
+                },] }
     ];
     ClrOptionSelected.ctorParameters = function () { return [
         { type: i0.TemplateRef }
@@ -6412,7 +6457,7 @@
     ClrCombobox.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-combobox',
-                    template: "<!--\n* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n* This software is released under MIT license.\n* The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          >\n          </ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n",
+                    template: "<!--\n* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n* This software is released under MIT license.\n* The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          ></ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n",
                     providers: [
                         ClrPopoverToggleService,
                         { provide: POPOVER_HOST_ANCHOR, useExisting: i0.ElementRef },
@@ -6538,7 +6583,7 @@
     ClrOption.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-option',
-                    template: "<ng-content></ng-content>\n    <span *ngIf=\"selected\" class=\"clr-sr-only\"> {{ commonStrings.keys.comboboxSelected }} </span> ",
+                    template: "\n    <ng-content></ng-content>\n    <span *ngIf=\"selected\" class=\"clr-sr-only\">{{ commonStrings.keys.comboboxSelected }}</span>\n  ",
                     providers: [UNIQUE_ID_PROVIDER],
                     host: {
                         '[class.clr-combobox-option]': 'true',
@@ -6850,7 +6895,10 @@
         return ClrInput;
     }(WrappedFormControl));
     ClrInput.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrInput]', host: { '[class.clr-input]': 'true' } },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrInput]',
+                    host: { '[class.clr-input]': 'true' },
+                },] }
     ];
     ClrInput.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
@@ -7286,7 +7334,9 @@
         return FocusTrapDirective;
     }());
     FocusTrapDirective.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrFocusTrap]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrFocusTrap]',
+                },] }
     ];
     FocusTrapDirective.ctorParameters = function () { return [
         { type: i0.ElementRef },
@@ -8308,7 +8358,10 @@
         return ClrCalendar;
     }());
     ClrCalendar.decorators = [
-        { type: i0.Component, args: [{ selector: 'clr-calendar', template: "<table class=\"calendar-table\">\n  <tr class=\"calendar-row weekdays\">\n    <th *ngFor=\"let day of localeDays\" class=\"calendar-cell weekday\" role=\"heading\" [attr.aria-label]=\"day.day\">\n      {{day.narrow}}\n    </th>\n  </tr>\n  <tr class=\"calendar-row\" *ngFor=\"let row of calendarViewModel.calendarView\">\n    <td *ngFor=\"let dayView of row\" class=\"calendar-cell\">\n      <clr-day [clrDayView]=\"dayView\"></clr-day>\n    </td>\n  </tr>\n</table>\n" },] }
+        { type: i0.Component, args: [{
+                    selector: 'clr-calendar',
+                    template: "<table class=\"calendar-table\">\n  <tr class=\"calendar-row weekdays\">\n    <th *ngFor=\"let day of localeDays\" class=\"calendar-cell weekday\" role=\"heading\" [attr.aria-label]=\"day.day\">\n      {{day.narrow}}\n    </th>\n  </tr>\n  <tr class=\"calendar-row\" *ngFor=\"let row of calendarViewModel.calendarView\">\n    <td *ngFor=\"let dayView of row\" class=\"calendar-cell\">\n      <clr-day [clrDayView]=\"dayView\"></clr-day>\n    </td>\n  </tr>\n</table>\n"
+                },] }
     ];
     ClrCalendar.ctorParameters = function () { return [
         { type: LocaleHelperService },
@@ -9538,7 +9591,7 @@
     ClrPasswordContainer.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-password-container',
-                    template: "\n    <ng-content select=\"label\"></ng-content>\n    <label *ngIf=\"!label && addGrid()\"></label>\n    <div class=\"clr-control-container\" [ngClass]=\"controlClass()\">\n      <div class=\"clr-input-wrapper\">\n        <div class=\"clr-input-group\" [class.clr-focus]=\"focus\">\n          <ng-content select=\"[clrPassword]\"></ng-content>\n          <button\n            *ngIf=\"clrToggle\"\n            (click)=\"toggle()\"\n            [disabled]=\"control?.disabled\"\n            class=\"clr-input-group-icon-action\"\n            type=\"button\"\n          >\n            <cds-icon status=\"info\" [attr.shape]=\"show ? 'eye-hide' : 'eye'\"></cds-icon>\n            <span class=\"clr-sr-only\">{{\n              show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow\n            }}</span>\n          </button>\n        </div>\n        <cds-icon\n          *ngIf=\"showInvalid\"\n          class=\"clr-validate-icon\"\n          status=\"danger\"\n          shape=\"exclamation-circle\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n        <cds-icon\n          *ngIf=\"showValid\"\n          class=\"clr-validate-icon\"\n          shape=\"check-circle\"\n          status=\"success\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n      </div>\n      <ng-content select=\"clr-control-helper\" *ngIf=\"showHelper\"></ng-content>\n      <ng-content select=\"clr-control-error\" *ngIf=\"showInvalid\"></ng-content>\n      <ng-content select=\"clr-control-success\" *ngIf=\"showValid\"></ng-content>\n    </div>\n  ",
+                    template: "\n    <ng-content select=\"label\"></ng-content>\n    <label *ngIf=\"!label && addGrid()\"></label>\n    <div class=\"clr-control-container\" [ngClass]=\"controlClass()\">\n      <div class=\"clr-input-wrapper\">\n        <div class=\"clr-input-group\" [class.clr-focus]=\"focus\">\n          <ng-content select=\"[clrPassword]\"></ng-content>\n          <button\n            *ngIf=\"clrToggle\"\n            (click)=\"toggle()\"\n            [disabled]=\"control?.disabled\"\n            class=\"clr-input-group-icon-action\"\n            type=\"button\"\n          >\n            <cds-icon status=\"info\" [attr.shape]=\"show ? 'eye-hide' : 'eye'\"></cds-icon>\n            <span class=\"clr-sr-only\">\n              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}\n            </span>\n          </button>\n        </div>\n        <cds-icon\n          *ngIf=\"showInvalid\"\n          class=\"clr-validate-icon\"\n          status=\"danger\"\n          shape=\"exclamation-circle\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n        <cds-icon\n          *ngIf=\"showValid\"\n          class=\"clr-validate-icon\"\n          shape=\"check-circle\"\n          status=\"success\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n      </div>\n      <ng-content select=\"clr-control-helper\" *ngIf=\"showHelper\"></ng-content>\n      <ng-content select=\"clr-control-error\" *ngIf=\"showInvalid\"></ng-content>\n      <ng-content select=\"clr-control-success\" *ngIf=\"showValid\"></ng-content>\n    </div>\n  ",
                     host: {
                         '[class.clr-form-control]': 'true',
                         '[class.clr-form-control-disabled]': 'control?.disabled',
@@ -9596,7 +9649,10 @@
         return ClrPassword;
     }(WrappedFormControl));
     ClrPassword.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrPassword]', host: { '[class.clr-input]': 'true' } },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrPassword]',
+                    host: { '[class.clr-input]': 'true' },
+                },] }
     ];
     ClrPassword.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
@@ -9674,7 +9730,9 @@
         return ClrRadio;
     }(WrappedFormControl));
     ClrRadio.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrRadio]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrRadio]',
+                },] }
     ];
     ClrRadio.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
@@ -9839,7 +9897,10 @@
         return ClrRange;
     }(WrappedFormControl));
     ClrRange.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrRange]', host: { '[class.clr-range]': 'true' } },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrRange]',
+                    host: { '[class.clr-range]': 'true' },
+                },] }
     ];
     ClrRange.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
@@ -9928,7 +9989,10 @@
         return ClrSelect;
     }(WrappedFormControl));
     ClrSelect.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrSelect]', host: { '[class.clr-select]': 'true' } },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrSelect]',
+                    host: { '[class.clr-select]': 'true' },
+                },] }
     ];
     ClrSelect.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
@@ -9989,7 +10053,10 @@
         return ClrTextarea;
     }(WrappedFormControl));
     ClrTextarea.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrTextarea]', host: { '[class.clr-textarea]': 'true' } },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrTextarea]',
+                    host: { '[class.clr-textarea]': 'true' },
+                },] }
     ];
     ClrTextarea.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
@@ -10127,7 +10194,7 @@
     ClrExpandableAnimation.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-expandable-animation',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     animations: [
                         animations.trigger('expandAnimation', [
                             animations.transition('true <=> false', [
@@ -10541,7 +10608,10 @@
         return ClrDragHandle;
     }());
     ClrDragHandle.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrDragHandle]', host: { '[class.drag-handle]': 'true' } },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrDragHandle]',
+                    host: { '[class.drag-handle]': 'true' },
+                },] }
     ];
     ClrDragHandle.ctorParameters = function () { return [
         { type: i0.ElementRef },
@@ -10761,7 +10831,9 @@
         return ClrIfDragged;
     }());
     ClrIfDragged.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrIfDragged]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrIfDragged]',
+                },] }
     ];
     ClrIfDragged.ctorParameters = function () { return [
         { type: i0.TemplateRef },
@@ -11322,7 +11394,9 @@
         return OutsideClick;
     }());
     OutsideClick.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrOutsideClick]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrOutsideClick]',
+                },] }
     ];
     OutsideClick.ctorParameters = function () { return [
         { type: i0.ElementRef },
@@ -12085,6 +12159,20 @@
                 sub.unsubscribe();
             });
         };
+        Object.defineProperty(DatagridNumericFilter.prototype, "maxPlaceholderValue", {
+            get: function () {
+                return this.maxPlaceholder || this.commonStrings.keys.maxValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DatagridNumericFilter.prototype, "minPlaceholderValue", {
+            get: function () {
+                return this.minPlaceholder || this.commonStrings.keys.minValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DatagridNumericFilter.prototype, "customNumericFilter", {
             /**
              * Customizable filter logic based on high and low values
@@ -12201,7 +12289,7 @@
         { type: i0.Component, args: [{
                     selector: 'clr-dg-numeric-filter',
                     providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }],
-                    template: "\n    <clr-dg-filter [clrDgFilter]=\"registered\" [(clrDgFilterOpen)]=\"open\">\n      <input\n        class=\"datagrid-numeric-filter-input\"\n        #input_low\n        type=\"number\"\n        name=\"low\"\n        [(ngModel)]=\"low\"\n        [placeholder]=\"commonStrings.keys.minValue\"\n        [attr.aria-label]=\"commonStrings.keys.minValue\"\n      />\n      <span class=\"datagrid-filter-input-spacer\"></span>\n      <input\n        class=\"datagrid-numeric-filter-input\"\n        #input_high\n        type=\"number\"\n        name=\"high\"\n        [(ngModel)]=\"high\"\n        [placeholder]=\"commonStrings.keys.maxValue\"\n        [attr.aria-label]=\"commonStrings.keys.maxValue\"\n      />\n    </clr-dg-filter>\n  "
+                    template: "\n    <clr-dg-filter [clrDgFilter]=\"registered\" [(clrDgFilterOpen)]=\"open\">\n      <input\n        class=\"datagrid-numeric-filter-input\"\n        #input_low\n        type=\"number\"\n        name=\"low\"\n        [(ngModel)]=\"low\"\n        [placeholder]=\"minPlaceholderValue\"\n        [attr.aria-label]=\"minPlaceholderValue\"\n      />\n      <span class=\"datagrid-filter-input-spacer\"></span>\n      <input\n        class=\"datagrid-numeric-filter-input\"\n        #input_high\n        type=\"number\"\n        name=\"high\"\n        [(ngModel)]=\"high\"\n        [placeholder]=\"maxPlaceholderValue\"\n        [attr.aria-label]=\"maxPlaceholderValue\"\n      />\n    </clr-dg-filter>\n  "
                 },] }
     ];
     DatagridNumericFilter.ctorParameters = function () { return [
@@ -12211,6 +12299,8 @@
         { type: ClrPopoverToggleService }
     ]; };
     DatagridNumericFilter.propDecorators = {
+        maxPlaceholder: [{ type: i0.Input, args: ['clrFilterMaxPlaceholder',] }],
+        minPlaceholder: [{ type: i0.Input, args: ['clrFilterMinPlaceholder',] }],
         customNumericFilter: [{ type: i0.Input, args: ['clrDgNumericFilter',] }],
         input: [{ type: i0.ViewChild, args: ['input_low',] }],
         filterContainer: [{ type: i0.ViewChild, args: [ClrDatagridFilter,] }],
@@ -12356,6 +12446,13 @@
             _this.filterValueChange = new i0.EventEmitter();
             return _this;
         }
+        Object.defineProperty(DatagridStringFilter.prototype, "placeholderValue", {
+            get: function () {
+                return this.placeholder || this.commonStrings.keys.filterItems;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DatagridStringFilter.prototype, "customStringFilter", {
             /**
              * Customizable filter logic based on a search text
@@ -12422,7 +12519,7 @@
         { type: i0.Component, args: [{
                     selector: 'clr-dg-string-filter',
                     providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }],
-                    template: "\n    <clr-dg-filter [clrDgFilter]=\"registered\" [(clrDgFilterOpen)]=\"open\">\n      <input\n        #input\n        type=\"text\"\n        name=\"search\"\n        [(ngModel)]=\"value\"\n        class=\"clr-input\"\n        [attr.aria-label]=\"commonStrings.keys.filterItems\"\n      />\n    </clr-dg-filter>\n  "
+                    template: "\n    <clr-dg-filter [clrDgFilter]=\"registered\" [(clrDgFilterOpen)]=\"open\">\n      <input\n        #input\n        type=\"text\"\n        name=\"search\"\n        [(ngModel)]=\"value\"\n        class=\"clr-input\"\n        [attr.aria-label]=\"placeholderValue\"\n        [placeholder]=\"placeholderValue\"\n      />\n    </clr-dg-filter>\n  "
                 },] }
     ];
     DatagridStringFilter.ctorParameters = function () { return [
@@ -12432,6 +12529,7 @@
         { type: ClrPopoverToggleService }
     ]; };
     DatagridStringFilter.propDecorators = {
+        placeholder: [{ type: i0.Input, args: ['clrFilterPlaceholder',] }],
         customStringFilter: [{ type: i0.Input, args: ['clrDgStringFilter',] }],
         input: [{ type: i0.ViewChild, args: ['input',] }],
         filterContainer: [{ type: i0.ViewChild, args: [ClrDatagridFilter,] }],
@@ -12478,7 +12576,9 @@
         return DatagridWillyWonka;
     }(WillyWonka));
     DatagridWillyWonka.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-datagrid' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-datagrid',
+                },] }
     ];
 
     var ActionableOompaLoompa = /** @class */ (function (_super) {
@@ -12502,7 +12602,9 @@
         return ActionableOompaLoompa;
     }(OompaLoompa));
     ActionableOompaLoompa.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-datagrid, clr-dg-row' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-datagrid, clr-dg-row',
+                },] }
     ];
     ActionableOompaLoompa.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
@@ -12640,7 +12742,9 @@
         return ExpandableOompaLoompa;
     }(OompaLoompa));
     ExpandableOompaLoompa.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-datagrid, clr-dg-row' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-datagrid, clr-dg-row',
+                },] }
     ];
     ExpandableOompaLoompa.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
@@ -13105,6 +13209,27 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ClrDatagridColumn.prototype, "filterStringPlaceholderValue", {
+            get: function () {
+                return this.filterStringPlaceholder || this.commonStrings.keys.filterItems;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ClrDatagridColumn.prototype, "filterNumberMaxPlaceholderValue", {
+            get: function () {
+                return this.filterNumberMaxPlaceholder || this.commonStrings.keys.maxValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ClrDatagridColumn.prototype, "filterNumberMinPlaceholderValue", {
+            get: function () {
+                return this.filterNumberMinPlaceholder || this.commonStrings.keys.minValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(ClrDatagridColumn.prototype, "updateFilterValue", {
             set: function (newValue) {
                 if (this.filter) {
@@ -13171,7 +13296,7 @@
     ClrDatagridColumn.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-dg-column',
-                    template: "\n    <div class=\"datagrid-column-flex\">\n      <button class=\"datagrid-column-title\" *ngIf=\"sortable\" (click)=\"sort()\" type=\"button\">\n        <ng-container *ngTemplateOutlet=\"columnTitle\"></ng-container>\n        <cds-icon\n          *ngIf=\"sortDirection\"\n          shape=\"arrow\"\n          [attr.direction]=\"sortDirection\"\n          aria-hidden=\"true\"\n          class=\"sort-icon\"\n        ></cds-icon>\n      </button>\n      <!-- I'm really not happy with that select since it's not very scalable -->\n      <ng-content select=\"clr-dg-filter, clr-dg-string-filter, clr-dg-numeric-filter\"></ng-content>\n\n      <clr-dg-string-filter\n        *ngIf=\"field && !customFilter && colType == 'string'\"\n        [clrDgStringFilter]=\"registered\"\n        [(clrFilterValue)]=\"filterValue\"\n      ></clr-dg-string-filter>\n\n      <clr-dg-numeric-filter\n        *ngIf=\"field && !customFilter && colType == 'number'\"\n        [clrDgNumericFilter]=\"registered\"\n        [(clrFilterValue)]=\"filterValue\"\n      ></clr-dg-numeric-filter>\n\n      <ng-template #columnTitle>\n        <ng-content></ng-content>\n      </ng-template>\n\n      <span class=\"datagrid-column-title\" *ngIf=\"!sortable\">\n        <ng-container *ngTemplateOutlet=\"columnTitle\"></ng-container>\n      </span>\n\n      <clr-dg-column-separator *ngIf=\"showSeparator\"></clr-dg-column-separator>\n    </div>\n  ",
+                    template: "\n    <div class=\"datagrid-column-flex\">\n      <button class=\"datagrid-column-title\" *ngIf=\"sortable\" (click)=\"sort()\" type=\"button\">\n        <ng-container *ngTemplateOutlet=\"columnTitle\"></ng-container>\n        <cds-icon\n          *ngIf=\"sortDirection\"\n          shape=\"arrow\"\n          [attr.direction]=\"sortDirection\"\n          aria-hidden=\"true\"\n          class=\"sort-icon\"\n        ></cds-icon>\n      </button>\n      <!-- I'm really not happy with that select since it's not very scalable -->\n      <ng-content select=\"clr-dg-filter, clr-dg-string-filter, clr-dg-numeric-filter\"></ng-content>\n\n      <clr-dg-string-filter\n        *ngIf=\"field && !customFilter && colType == 'string'\"\n        [clrFilterPlaceholder]=\"filterStringPlaceholderValue\"\n        [clrDgStringFilter]=\"registered\"\n        [(clrFilterValue)]=\"filterValue\"\n      ></clr-dg-string-filter>\n\n      <clr-dg-numeric-filter\n        *ngIf=\"field && !customFilter && colType == 'number'\"\n        [clrFilterMaxPlaceholder]=\"filterMaxPlaceholderValue\"\n        [clrFilterMinPlaceholder]=\"filterMinPlaceholderValue\"\n        [clrDgNumericFilter]=\"registered\"\n        [(clrFilterValue)]=\"filterValue\"\n      ></clr-dg-numeric-filter>\n\n      <ng-template #columnTitle>\n        <ng-content></ng-content>\n      </ng-template>\n\n      <span class=\"datagrid-column-title\" *ngIf=\"!sortable\">\n        <ng-container *ngTemplateOutlet=\"columnTitle\"></ng-container>\n      </span>\n\n      <clr-dg-column-separator *ngIf=\"showSeparator\"></clr-dg-column-separator>\n    </div>\n  ",
                     providers: [ClrPopoverPositionService, ClrPopoverEventsService, ClrPopoverToggleService],
                     host: {
                         '[class.datagrid-column]': 'true',
@@ -13198,6 +13323,9 @@
         sortOrder: [{ type: i0.Input, args: ['clrDgSortOrder',] }],
         sortOrderChange: [{ type: i0.Output, args: ['clrDgSortOrderChange',] }],
         projectedFilter: [{ type: i0.ContentChild, args: [CustomFilter,] }],
+        filterStringPlaceholder: [{ type: i0.Input, args: ['clrFilterStringPlaceholder',] }],
+        filterNumberMaxPlaceholder: [{ type: i0.Input, args: ['clrFilterNumberMaxPlaceholder',] }],
+        filterNumberMinPlaceholder: [{ type: i0.Input, args: ['clrFilterNumberMinPlaceholder',] }],
         updateFilterValue: [{ type: i0.Input, args: ['clrFilterValue',] }],
         filterValueChange: [{ type: i0.Output, args: ['clrFilterValueChange',] }]
     };
@@ -13757,7 +13885,7 @@
     ClrDatagridCell.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-dg-cell',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[class.datagrid-cell]': 'true',
                         '[class.datagrid-signpost-trigger]': 'signpost.length > 0',
@@ -13961,6 +14089,10 @@
              * Subscriptions to the other providers changes.
              */
             this.subscriptions = [];
+            /**
+             * Shift key state, for use in range selection.
+             */
+            this.shiftPressed = false;
             this.valueCollector = new rxjs.Subject();
             /**
              * The Observable that lets other classes subscribe to selection changes
@@ -14363,7 +14495,7 @@
 
     var nbRow = 0;
     var ClrDatagridRow = /** @class */ (function () {
-        function ClrDatagridRow(selection, rowActionService, globalExpandable, expand, detailService, displayMode, vcr, renderer, el, commonStrings) {
+        function ClrDatagridRow(selection, rowActionService, globalExpandable, expand, detailService, displayMode, vcr, renderer, el, commonStrings, items, document) {
             var _this = this;
             this.selection = selection;
             this.rowActionService = rowActionService;
@@ -14375,6 +14507,8 @@
             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;
@@ -14405,6 +14539,24 @@
                 }
             }));
         }
+        /**
+         * 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.
+         */
+        ClrDatagridRow.prototype.clearRanges = function (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);
+                }
+            }
+        };
         Object.defineProperty(ClrDatagridRow.prototype, "selected", {
             /**
              * Indicates if the row is selected
@@ -14422,6 +14574,12 @@
                     this._selected = value;
                 }
                 else {
+                    if (value && this.selection.selectionType === SelectionType.Multi) {
+                        this.rangeSelect();
+                    }
+                    else {
+                        this.selection.rangeStart = null;
+                    }
                     this.selection.setSelected(this.item, value);
                 }
             },
@@ -14525,6 +14683,30 @@
                 _this.expandAnimationTrigger = !_this.expandAnimationTrigger;
             }));
         };
+        ClrDatagridRow.prototype.rangeSelect = function () {
+            var _a;
+            var items = this.items.displayed;
+            if (!items) {
+                return;
+            }
+            var startIx = items.indexOf(this.selection.rangeStart);
+            if (this.selection.rangeStart &&
+                this.selection.current.includes(this.selection.rangeStart) &&
+                this.selection.shiftPressed &&
+                startIx !== -1) {
+                var endIx = items.indexOf(this.item);
+                // Using Set to remove duplicates
+                var newSelection = new Set(this.selection.current.concat(items.slice(Math.min(startIx, endIx), Math.max(startIx, endIx) + 1)));
+                this.selection.clearSelection();
+                (_a = this.selection.current).push.apply(_a, __spreadArray([], __read(newSelection)));
+            }
+            else {
+                // page number has changed or
+                // no Shift was pressed or
+                // rangeStart not yet set
+                this.selection.rangeStart = this.item;
+            }
+        };
         ClrDatagridRow.prototype.ngOnDestroy = function () {
             this.subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
         };
@@ -14544,7 +14726,7 @@
     ClrDatagridRow.decorators = [
         { type: i0.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',
@@ -14568,7 +14750,9 @@
         { type: i0.ViewContainerRef },
         { type: i0.Renderer2 },
         { type: i0.ElementRef },
-        { type: ClrCommonStringsService }
+        { type: ClrCommonStringsService },
+        { type: Items },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] }
     ]; };
     ClrDatagridRow.propDecorators = {
         expandAnimation: [{ type: i0.ViewChild, args: [ClrExpandableAnimation,] }],
@@ -14984,7 +15168,7 @@
      * The full license information can be found in LICENSE in the root directory of this project.
      */
     var ClrDatagrid = /** @class */ (function () {
-        function ClrDatagrid(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings, columnsService, keyNavigation) {
+        function ClrDatagrid(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;
@@ -14994,11 +15178,13 @@
             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;
             /**
@@ -15209,6 +15395,19 @@
                     });
                 }
             }));
+            // 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(function () {
+                _this._subscriptions.push(rxjs.fromEvent(_this.document.body, 'keydown').subscribe(function (event) {
+                    if (event.key === 'Shift') {
+                        _this.selection.shiftPressed = true;
+                    }
+                }), rxjs.fromEvent(_this.document.body, 'keyup').subscribe(function (event) {
+                    if (event.key === 'Shift') {
+                        _this.selection.shiftPressed = false;
+                    }
+                }));
+            });
         };
         ClrDatagrid.prototype.ngOnDestroy = function () {
             this._subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
@@ -15257,11 +15456,13 @@
         { type: i0.Renderer2 },
         { type: DetailService },
         { type: String, decorators: [{ type: i0.Inject, args: [UNIQUE_ID,] }] },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] },
         { type: i0.ElementRef },
         { type: Page },
         { type: ClrCommonStringsService },
         { type: ColumnsService },
-        { type: KeyNavigationGridController }
+        { type: KeyNavigationGridController },
+        { type: i0.NgZone }
     ]; };
     ClrDatagrid.propDecorators = {
         loading: [{ type: i0.Input, args: ['clrDgLoading',] }],
@@ -15301,7 +15502,7 @@
     ClrDatagridActionBar.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-dg-action-bar',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: { '[class.datagrid-action-bar]': 'true' }
                 },] }
     ];
@@ -15882,7 +16083,9 @@
         return DatagridDetailRegisterer;
     }());
     DatagridDetailRegisterer.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrIfExpanded]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrIfExpanded]',
+                },] }
     ];
     DatagridDetailRegisterer.ctorParameters = function () { return [
         { type: ExpandableRowsCount, decorators: [{ type: i0.Optional }] }
@@ -16032,7 +16235,9 @@
         return ClrDatagridHideableColumn;
     }());
     ClrDatagridHideableColumn.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrDgHideableColumn]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrDgHideableColumn]',
+                },] }
     ];
     ClrDatagridHideableColumn.ctorParameters = function () { return [
         { type: i0.TemplateRef },
@@ -16539,7 +16744,9 @@
         return DatagridCellRenderer;
     }());
     DatagridCellRenderer.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-dg-cell' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-dg-cell',
+                },] }
     ];
     DatagridCellRenderer.ctorParameters = function () { return [
         { type: i0.ElementRef },
@@ -16658,7 +16865,10 @@
         return DatagridHeaderRenderer;
     }());
     DatagridHeaderRenderer.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-dg-column', providers: [ColumnResizerService, COLUMN_STATE_PROVIDER] },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-dg-column',
+                    providers: [ColumnResizerService, COLUMN_STATE_PROVIDER],
+                },] }
     ];
     DatagridHeaderRenderer.ctorParameters = function () { return [
         { type: i0.ElementRef },
@@ -16770,7 +16980,9 @@
         return DatagridRowRenderer;
     }());
     DatagridRowRenderer.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-dg-row, clr-dg-row-detail' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-dg-row, clr-dg-row-detail',
+                },] }
     ];
     DatagridRowRenderer.ctorParameters = function () { return [
         { type: ColumnsService }
@@ -17058,7 +17270,9 @@
         return ClrStackViewCustomTags;
     }());
     ClrStackViewCustomTags.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-stack-content' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-stack-content',
+                },] }
     ];
     var ClrStackViewLabel = /** @class */ (function () {
         function ClrStackViewLabel(uniqueId) {
@@ -17801,7 +18015,9 @@
         return ClrRecursiveForOf;
     }());
     ClrRecursiveForOf.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrRecursiveFor][clrRecursiveForOf]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrRecursiveFor][clrRecursiveForOf]',
+                },] }
     ];
     ClrRecursiveForOf.ctorParameters = function () { return [
         { type: i0.TemplateRef },
@@ -18210,7 +18426,7 @@
     ClrTreeNode.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-tree-node',
-                    template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\"> selected </span>\n      <span *ngIf=\"!ariaSelected\"> unselected </span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n",
+                    template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\">selected</span>\n      <span *ngIf=\"!ariaSelected\">unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n",
                     providers: [
                         UNIQUE_ID_PROVIDER,
                         TREE_FEATURES_PROVIDER,
@@ -19340,7 +19556,7 @@
     ClrDropdownMenu.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-dropdown-menu',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[class.dropdown-menu]': 'true',
                         '[attr.role]': '"menu"',
@@ -19861,7 +20077,7 @@
     ClrAlerts.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-alerts',
-                    template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"> </clr-alerts-pager>\n<ng-content select=\"clr-alert\"></ng-content>\n",
+                    template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n<ng-content select=\"clr-alert\"></ng-content>\n",
                     providers: [MultiAlertService],
                     host: {
                         '[class.alerts]': 'true',
@@ -20158,7 +20374,10 @@
         return ClrMainContainer;
     }());
     ClrMainContainer.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-main-container', host: { '[class.main-container]': 'true' } },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-main-container',
+                    host: { '[class.main-container]': 'true' },
+                },] }
     ];
     ClrMainContainer.ctorParameters = function () { return [
         { type: i0.ElementRef },
@@ -20192,7 +20411,9 @@
         return MainContainerWillyWonka;
     }(WillyWonka));
     MainContainerWillyWonka.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-main-container' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-main-container',
+                },] }
     ];
 
     var NavDetectionOompaLoompa = /** @class */ (function (_super) {
@@ -20218,7 +20439,9 @@
         return NavDetectionOompaLoompa;
     }(OompaLoompa));
     NavDetectionOompaLoompa.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-header' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-header',
+                },] }
     ];
     NavDetectionOompaLoompa.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
@@ -20955,7 +21178,9 @@
         return ClrNavLevel;
     }(FocusTrap));
     ClrNavLevel.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clr-nav-level]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clr-nav-level]',
+                },] }
     ];
     ClrNavLevel.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] },
@@ -21048,7 +21273,9 @@
         return TabsWillyWonka;
     }(WillyWonka));
     TabsWillyWonka.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-tabs' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-tabs',
+                },] }
     ];
 
     var ActiveOompaLoompa = /** @class */ (function (_super) {
@@ -21073,7 +21300,9 @@
         return ActiveOompaLoompa;
     }(OompaLoompa));
     ActiveOompaLoompa.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrTabLink], clr-tab-content' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrTabLink], clr-tab-content',
+                },] }
     ];
     ActiveOompaLoompa.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
@@ -21373,7 +21602,7 @@
     ClrTab.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-tab',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     providers: [IF_ACTIVE_ID_PROVIDER, AriaService]
                 },] }
     ];
@@ -21400,7 +21629,7 @@
     ClrTabOverflowContent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-tab-overflow-content',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[class.dropdown-menu]': 'true',
                     }
@@ -21593,7 +21822,7 @@
     ClrTabs.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-tabs',
-                    template: "\n    <ul\n      class=\"nav\"\n      role=\"tablist\"\n      [attr.aria-owns]=\"tabIds\"\n      [clrKeyFocus]=\"tabLinkElements\"\n      clrDirection=\"both\"\n      (clrFocusChange)=\"toggleOverflowOnPosition($event)\"\n      (focusout)=\"resetKeyFocusCurrentToActive($event)\"\n    >\n      <!--tab links-->\n      <ng-container *ngFor=\"let link of tabLinkDirectives\">\n        <ng-container *ngIf=\"link.tabsId === tabsId && !link.inOverflow\">\n          <li role=\"presentation\" class=\"nav-item\">\n            <ng-container [ngTemplateOutlet]=\"link.templateRefContainer.template\"></ng-container>\n          </li>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"tabsService.overflowTabs.length > 0\">\n        <div class=\"tabs-overflow bottom-right\" role=\"presentation\" [class.open]=\"toggleService.open\">\n          <li role=\"application\" class=\"nav-item\">\n            <button\n              #tabOverflowTrigger\n              class=\"btn btn-link nav-link dropdown-toggle\"\n              type=\"button\"\n              aria-hidden=\"true\"\n              [attr.tabindex]=\"activeTabInOverflow && !toggleService.open ? 0 : -1\"\n              [class.active]=\"activeTabInOverflow\"\n              [class.open]=\"toggleService.open\"\n              (mousedown)=\"_mousedown = true\"\n              (focus)=\"openOverflowOnFocus()\"\n              (click)=\"toggleOverflowOnClick()\"\n              [attr.title]=\"commonStrings.keys.more\"\n            >\n              <cds-icon\n                shape=\"ellipsis-horizontal\"\n                status=\"toggleService.open ? 'info' : null\"\n                [attr.title]=\"commonStrings.keys.more\"\n              ></cds-icon>\n            </button>\n          </li>\n          <!--tab links in overflow menu-->\n          <clr-tab-overflow-content\n            *ngIf=\"toggleService.open\"\n            (document:keydown.esc)=\"closeOnEscapeKey()\"\n            (document:click)=\"closeOnOutsideClick($event, tabOverflowTrigger)\"\n            (focusout)=\"closeOnFocusOut($event)\"\n          >\n            <ng-container *ngFor=\"let link of tabLinkDirectives\">\n              <ng-container\n                *ngIf=\"link.tabsId === tabsId && link.inOverflow\"\n                [ngTemplateOutlet]=\"link.templateRefContainer.template\"\n              >\n              </ng-container>\n            </ng-container>\n          </clr-tab-overflow-content>\n        </div>\n      </ng-container>\n    </ul>\n    <ng-container #tabContentViewContainer></ng-container>\n  ",
+                    template: "\n    <ul\n      class=\"nav\"\n      role=\"tablist\"\n      [attr.aria-owns]=\"tabIds\"\n      [clrKeyFocus]=\"tabLinkElements\"\n      clrDirection=\"both\"\n      (clrFocusChange)=\"toggleOverflowOnPosition($event)\"\n      (focusout)=\"resetKeyFocusCurrentToActive($event)\"\n    >\n      <!--tab links-->\n      <ng-container *ngFor=\"let link of tabLinkDirectives\">\n        <ng-container *ngIf=\"link.tabsId === tabsId && !link.inOverflow\">\n          <li role=\"presentation\" class=\"nav-item\">\n            <ng-container [ngTemplateOutlet]=\"link.templateRefContainer.template\"></ng-container>\n          </li>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"tabsService.overflowTabs.length > 0\">\n        <div class=\"tabs-overflow bottom-right\" role=\"presentation\" [class.open]=\"toggleService.open\">\n          <li role=\"application\" class=\"nav-item\">\n            <button\n              #tabOverflowTrigger\n              class=\"btn btn-link nav-link dropdown-toggle\"\n              type=\"button\"\n              aria-hidden=\"true\"\n              [attr.tabindex]=\"activeTabInOverflow && !toggleService.open ? 0 : -1\"\n              [class.active]=\"activeTabInOverflow\"\n              [class.open]=\"toggleService.open\"\n              (mousedown)=\"_mousedown = true\"\n              (focus)=\"openOverflowOnFocus()\"\n              (click)=\"toggleOverflowOnClick()\"\n              [attr.title]=\"commonStrings.keys.more\"\n            >\n              <cds-icon\n                shape=\"ellipsis-horizontal\"\n                status=\"toggleService.open ? 'info' : null\"\n                [attr.title]=\"commonStrings.keys.more\"\n              ></cds-icon>\n            </button>\n          </li>\n          <!--tab links in overflow menu-->\n          <clr-tab-overflow-content\n            *ngIf=\"toggleService.open\"\n            (document:keydown.esc)=\"closeOnEscapeKey()\"\n            (document:click)=\"closeOnOutsideClick($event, tabOverflowTrigger)\"\n            (focusout)=\"closeOnFocusOut($event)\"\n          >\n            <ng-container *ngFor=\"let link of tabLinkDirectives\">\n              <ng-container\n                *ngIf=\"link.tabsId === tabsId && link.inOverflow\"\n                [ngTemplateOutlet]=\"link.templateRefContainer.template\"\n              ></ng-container>\n            </ng-container>\n          </clr-tab-overflow-content>\n        </div>\n      </ng-container>\n    </ul>\n    <ng-container #tabContentViewContainer></ng-container>\n  ",
                     providers: [IfActiveService, ClrPopoverToggleService, TabsService, TABS_ID_PROVIDER]
                 },] }
     ];
@@ -22017,7 +22246,7 @@
     ClrVerticalNavGroup.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-vertical-nav-group',
-                    template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"(this.expanded) ? 'down' : 'right'\"\n      [attr.title]=\"(this.expanded) ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    >\n    </cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n",
+                    template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"(this.expanded) ? 'down' : 'right'\"\n      [attr.title]=\"(this.expanded) ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    ></cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n",
                     providers: [IfExpandService, VerticalNavGroupService],
                     animations: [
                         animations.trigger('clrExpand', [
@@ -22056,7 +22285,7 @@
     ClrVerticalNavGroupChildren.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-vertical-nav-group-children',
-                    template: " <ng-content></ng-content> "
+                    template: "<ng-content></ng-content>"
                 },] }
     ];
 
@@ -22076,7 +22305,10 @@
         return ClrVerticalNavIcon;
     }());
     ClrVerticalNavIcon.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrVerticalNavIcon]', host: { class: 'nav-icon' } },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrVerticalNavIcon]',
+                    host: { class: 'nav-icon' },
+                },] }
     ];
     ClrVerticalNavIcon.ctorParameters = function () { return [
         { type: VerticalNavIconService }
@@ -22334,7 +22566,9 @@
         return ClrModalBody;
     }());
     ClrModalBody.decorators = [
-        { type: i0.Directive, args: [{ selector: '.modal-body' },] }
+        { type: i0.Directive, args: [{
+                    selector: '.modal-body',
+                },] }
     ];
     ClrModalBody.ctorParameters = function () { return [
         { type: i0.Renderer2 },
@@ -22568,7 +22802,7 @@
     ClrTooltip.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-tooltip',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[class.tooltip]': 'true',
                     },
@@ -22689,7 +22923,7 @@
     ClrTooltipContent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-tooltip-content',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: {
                         '[class.tooltip-content]': 'true',
                         '[style.opacity]': '1',
@@ -23105,7 +23339,7 @@
     ClrTimeline.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-timeline',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: { '[class.clr-timeline]': 'true' },
                     providers: [TimelineIconAttributeService]
                 },] }
@@ -23138,7 +23372,7 @@
     ClrTimelineStepTitle.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-timeline-step-title',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: { '[class.clr-timeline-step-title]': 'true', '[attr.aria-hidden]': 'true' }
                 },] }
     ];
@@ -23199,7 +23433,7 @@
     ClrTimelineStep.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-timeline-step',
-                    template: "\n    <ng-content select=\"clr-timeline-step-header\"></ng-content>\n    <span class=\"clr-sr-only\">{{ stepTitleText }}</span>\n    <ng-container *ngIf=\"!isProcessing; else processing\">\n      <cds-icon\n        [attr.status]=\"iconStatus\"\n        [attr.shape]=\"iconShape\"\n        [attr.aria-label]=\"iconAriaLabel\"\n        [attr.aria-current]=\"iconAriaCurrent\"\n      >\n      </cds-icon>\n    </ng-container>\n    <div class=\"clr-timeline-step-body\">\n      <ng-content select=\"clr-timeline-step-title\"></ng-content>\n      <ng-content select=\"clr-timeline-step-description\"></ng-content>\n    </div>\n\n    <ng-template #processing>\n      <clr-spinner clrMedium [attr.aria-label]=\"iconAriaLabel\"></clr-spinner>\n    </ng-template>\n  ",
+                    template: "\n    <ng-content select=\"clr-timeline-step-header\"></ng-content>\n    <span class=\"clr-sr-only\">{{ stepTitleText }}</span>\n    <ng-container *ngIf=\"!isProcessing; else processing\">\n      <cds-icon\n        [attr.status]=\"iconStatus\"\n        [attr.shape]=\"iconShape\"\n        [attr.aria-label]=\"iconAriaLabel\"\n        [attr.aria-current]=\"iconAriaCurrent\"\n      ></cds-icon>\n    </ng-container>\n    <div class=\"clr-timeline-step-body\">\n      <ng-content select=\"clr-timeline-step-title\"></ng-content>\n      <ng-content select=\"clr-timeline-step-description\"></ng-content>\n    </div>\n\n    <ng-template #processing>\n      <clr-spinner clrMedium [attr.aria-label]=\"iconAriaLabel\"></clr-spinner>\n    </ng-template>\n  ",
                     host: { '[class.clr-timeline-step]': 'true' }
                 },] }
     ];
@@ -23225,7 +23459,7 @@
     ClrTimelineStepDescription.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-timeline-step-description',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: { '[class.clr-timeline-step-description]': 'true' }
                 },] }
     ];
@@ -23243,7 +23477,7 @@
     ClrTimelineStepHeader.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-timeline-step-header',
-                    template: " <ng-content></ng-content> ",
+                    template: "<ng-content></ng-content>",
                     host: { '[class.clr-timeline-step-header]': 'true' }
                 },] }
     ];
@@ -24456,7 +24690,9 @@
         return ClrWizardPageButtons;
     }());
     ClrWizardPageButtons.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrPageButtons]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrPageButtons]',
+                },] }
     ];
     ClrWizardPageButtons.ctorParameters = function () { return [
         { type: i0.TemplateRef }
@@ -24474,7 +24710,9 @@
         return ClrWizardPageHeaderActions;
     }());
     ClrWizardPageHeaderActions.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrPageHeaderActions]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrPageHeaderActions]',
+                },] }
     ];
     ClrWizardPageHeaderActions.ctorParameters = function () { return [
         { type: i0.TemplateRef }
@@ -24492,7 +24730,9 @@
         return ClrWizardPageNavTitle;
     }());
     ClrWizardPageNavTitle.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrPageNavTitle]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrPageNavTitle]',
+                },] }
     ];
     ClrWizardPageNavTitle.ctorParameters = function () { return [
         { type: i0.TemplateRef }
@@ -24510,7 +24750,9 @@
         return ClrWizardPageTitle;
     }());
     ClrWizardPageTitle.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrPageTitle]' },] }
+        { type: i0.Directive, args: [{
+                    selector: '[clrPageTitle]',
+                },] }
     ];
     ClrWizardPageTitle.ctorParameters = function () { return [
         { type: i0.TemplateRef }
@@ -25903,7 +26145,9 @@
         return ClrWizardCustomTags;
     }());
     ClrWizardCustomTags.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-wizard-title, clr-wizard-pagetitle' },] }
+        { type: i0.Directive, args: [{
+                    selector: 'clr-wizard-title, clr-wizard-pagetitle',
+                },] }
     ];
 
     /*