@clr/angular 12.1.3 → 12.2.0

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 },
@@ -1605,7 +1615,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 +1641,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 +2621,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 +3381,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 +3407,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 +3627,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 +3707,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 +4089,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 +4237,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 +4278,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 +4435,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 +4633,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 +4842,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 +4938,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 +5032,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 +5776,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 +6447,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 +6573,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 +6885,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 +7324,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 +8348,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 +9581,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 +9639,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 +9720,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 +9887,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 +9979,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 +10043,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 +10184,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 +10598,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 +10821,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 +11384,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 +12149,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 +12279,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 +12289,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 +12436,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 +12509,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 +12519,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 +12566,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 +12592,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 +12732,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 +13199,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 +13286,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 +13313,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 +13875,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',
@@ -15301,7 +15419,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 +16000,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 +16152,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 +16661,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 +16782,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 +16897,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 +17187,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 +17932,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 +18343,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 +19473,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 +19994,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 +20291,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 +20328,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 +20356,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 +21095,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 +21190,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 +21217,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 +21519,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 +21546,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 +21739,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 +22163,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 +22202,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 +22222,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 +22483,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 +22719,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 +22840,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 +23256,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 +23289,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 +23350,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 +23376,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 +23394,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 +24607,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 +24627,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 +24647,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 +24667,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 +26062,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',
+                },] }
     ];
 
     /*