@clr/angular 12.1.3 → 12.2.0

package/fesm2015/clr-angular.js

@@ -19,12 +19,16 @@ import '@cds/core/icon/register';
 class ClrIconCustomTag {
 }
 ClrIconCustomTag.decorators = [
-    { type: Directive, args: [{ selector: 'clr-icon' },] }
+    { type: Directive, args: [{
+                selector: 'clr-icon',
+            },] }
 ];
 class CdsIconCustomTag {
 }
 CdsIconCustomTag.decorators = [
-    { type: Directive, args: [{ selector: 'cds-icon' },] }
+    { type: Directive, args: [{
+                selector: 'cds-icon',
+            },] }
 ];
 
 /*
@@ -92,7 +96,9 @@ class ClrLoading {
     }
 }
 ClrLoading.decorators = [
-    { type: Directive, args: [{ selector: '[clrLoading]' },] }
+    { type: Directive, args: [{
+                selector: '[clrLoading]',
+            },] }
 ];
 ClrLoading.ctorParameters = () => [
     { type: LoadingListener, decorators: [{ type: Optional }] }
@@ -736,7 +742,9 @@ OompaLoompa.ctorParameters = () => [
 class AccordionWillyWonka extends WillyWonka {
 }
 AccordionWillyWonka.decorators = [
-    { type: Directive, args: [{ selector: 'clr-accordion' },] }
+    { type: Directive, args: [{
+                selector: 'clr-accordion',
+            },] }
 ];
 
 /*
@@ -757,7 +765,9 @@ class AccordionOompaLoompa extends OompaLoompa {
     }
 }
 AccordionOompaLoompa.decorators = [
-    { type: Directive, args: [{ selector: 'clr-accordion-panel' },] }
+    { type: Directive, args: [{
+                selector: 'clr-accordion-panel',
+            },] }
 ];
 AccordionOompaLoompa.ctorParameters = () => [
     { type: ChangeDetectorRef },
@@ -1183,7 +1193,9 @@ ClrStepper.propDecorators = {
 class StepperWillyWonka extends WillyWonka {
 }
 StepperWillyWonka.decorators = [
-    { type: Directive, args: [{ selector: 'form[clrStepper]' },] }
+    { type: Directive, args: [{
+                selector: 'form[clrStepper]',
+            },] }
 ];
 
 /*
@@ -1204,7 +1216,9 @@ class StepperOompaLoompa extends OompaLoompa {
     }
 }
 StepperOompaLoompa.decorators = [
-    { type: Directive, args: [{ selector: 'clr-stepper-panel, [clrStepButton]' },] }
+    { type: Directive, args: [{
+                selector: 'clr-stepper-panel, [clrStepButton]',
+            },] }
 ];
 StepperOompaLoompa.ctorParameters = () => [
     { type: ChangeDetectorRef },
@@ -2118,7 +2132,9 @@ class ClrPopoverContent {
     }
 }
 ClrPopoverContent.decorators = [
-    { type: Directive, args: [{ selector: '[clrPopoverContent]' },] }
+    { type: Directive, args: [{
+                selector: '[clrPopoverContent]',
+            },] }
 ];
 ClrPopoverContent.ctorParameters = () => [
     { type: HTMLDocument, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
@@ -2823,7 +2839,7 @@ class ClrControlError extends ClrAbstractControl {
 ClrControlError.decorators = [
     { type: Component, args: [{
                 selector: 'clr-control-error',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: {
                     '[class.clr-subtext]': 'true',
                     '[attr.id]': 'id',
@@ -2851,7 +2867,7 @@ class ClrControlHelper extends ClrAbstractControl {
 ClrControlHelper.decorators = [
     { type: Component, args: [{
                 selector: 'clr-control-helper',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: {
                     '[class.clr-subtext]': 'true',
                     '[attr.id]': 'id',
@@ -3041,7 +3057,9 @@ class ClrLabel {
     }
 }
 ClrLabel.decorators = [
-    { type: Directive, args: [{ selector: 'label' },] }
+    { type: Directive, args: [{
+                selector: 'label',
+            },] }
 ];
 ClrLabel.ctorParameters = () => [
     { type: ControlIdService, decorators: [{ type: Optional }] },
@@ -3117,7 +3135,7 @@ class ClrControlSuccess extends ClrAbstractControl {
 ClrControlSuccess.decorators = [
     { type: Component, args: [{
                 selector: 'clr-control-success',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: {
                     '[class.clr-subtext]': 'true',
                     '[attr.id]': 'id',
@@ -3499,7 +3517,10 @@ class ClrControl extends WrappedFormControl {
     }
 }
 ClrControl.decorators = [
-    { type: Directive, args: [{ selector: '[clrControl]', host: { '[class.clr-input]': 'true' } },] }
+    { type: Directive, args: [{
+                selector: '[clrControl]',
+                host: { '[class.clr-input]': 'true' },
+            },] }
 ];
 ClrControl.ctorParameters = () => [
     { type: ViewContainerRef },
@@ -3639,7 +3660,9 @@ class ClrIfError extends AbstractIfState {
     }
 }
 ClrIfError.decorators = [
-    { type: Directive, args: [{ selector: '[clrIfError]' },] }
+    { type: Directive, args: [{
+                selector: '[clrIfError]',
+            },] }
 ];
 ClrIfError.ctorParameters = () => [
     { type: IfControlStateService, decorators: [{ type: Optional }] },
@@ -3680,7 +3703,9 @@ class ClrIfSuccess extends AbstractIfState {
     }
 }
 ClrIfSuccess.decorators = [
-    { type: Directive, args: [{ selector: '[clrIfSuccess]' },] }
+    { type: Directive, args: [{
+                selector: '[clrIfSuccess]',
+            },] }
 ];
 ClrIfSuccess.ctorParameters = () => [
     { type: IfControlStateService, decorators: [{ type: Optional }] },
@@ -3837,7 +3862,9 @@ class ClrCheckbox extends WrappedFormControl {
     }
 }
 ClrCheckbox.decorators = [
-    { type: Directive, args: [{ selector: '[clrCheckbox],[clrToggle]' },] }
+    { type: Directive, args: [{
+                selector: '[clrCheckbox],[clrToggle]',
+            },] }
 ];
 ClrCheckbox.ctorParameters = () => [
     { type: ViewContainerRef },
@@ -4016,7 +4043,7 @@ class ClrSpinner {
 ClrSpinner.decorators = [
     { type: Component, args: [{
                 selector: 'clr-spinner',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: {
                     '[attr.aria-busy]': 'true',
                 }
@@ -4207,7 +4234,9 @@ class ClrIfActive {
     }
 }
 ClrIfActive.decorators = [
-    { type: Directive, args: [{ selector: '[clrIfActive]' },] }
+    { type: Directive, args: [{
+                selector: '[clrIfActive]',
+            },] }
 ];
 ClrIfActive.ctorParameters = () => [
     { type: IfActiveService },
@@ -4295,7 +4324,9 @@ class ClrIfExpanded {
     }
 }
 ClrIfExpanded.decorators = [
-    { type: Directive, args: [{ selector: '[clrIfExpanded]' },] }
+    { type: Directive, args: [{
+                selector: '[clrIfExpanded]',
+            },] }
 ];
 ClrIfExpanded.ctorParameters = () => [
     { type: TemplateRef, decorators: [{ type: Optional }] },
@@ -4381,7 +4412,9 @@ class ClrIfOpen {
     }
 }
 ClrIfOpen.decorators = [
-    { type: Directive, args: [{ selector: '[clrIfOpen]' },] }
+    { type: Directive, args: [{
+                selector: '[clrIfOpen]',
+            },] }
 ];
 ClrIfOpen.ctorParameters = () => [
     { type: ClrPopoverToggleService },
@@ -5088,7 +5121,9 @@ class ClrOptionSelected {
     }
 }
 ClrOptionSelected.decorators = [
-    { type: Directive, args: [{ selector: '[clrOptionSelected]' },] }
+    { type: Directive, args: [{
+                selector: '[clrOptionSelected]',
+            },] }
 ];
 ClrOptionSelected.ctorParameters = () => [
     { type: TemplateRef }
@@ -5679,7 +5714,7 @@ class ClrCombobox extends WrappedFormControl {
 ClrCombobox.decorators = [
     { type: 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: ElementRef },
@@ -5788,8 +5823,10 @@ class ClrOption {
 ClrOption.decorators = [
     { type: Component, args: [{
                 selector: 'clr-option',
-                template: `<ng-content></ng-content>
-    <span *ngIf="selected" class="clr-sr-only"> {{ commonStrings.keys.comboboxSelected }} </span> `,
+                template: `
+    <ng-content></ng-content>
+    <span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
+  `,
                 providers: [UNIQUE_ID_PROVIDER],
                 host: {
                     '[class.clr-combobox-option]': 'true',
@@ -6116,7 +6153,10 @@ class ClrInput extends WrappedFormControl {
     }
 }
 ClrInput.decorators = [
-    { type: Directive, args: [{ selector: '[clrInput]', host: { '[class.clr-input]': 'true' } },] }
+    { type: Directive, args: [{
+                selector: '[clrInput]',
+                host: { '[class.clr-input]': 'true' },
+            },] }
 ];
 ClrInput.ctorParameters = () => [
     { type: ViewContainerRef },
@@ -6544,7 +6584,9 @@ class FocusTrapDirective {
     }
 }
 FocusTrapDirective.decorators = [
-    { type: Directive, args: [{ selector: '[clrFocusTrap]' },] }
+    { type: Directive, args: [{
+                selector: '[clrFocusTrap]',
+            },] }
 ];
 FocusTrapDirective.ctorParameters = () => [
     { type: ElementRef },
@@ -7478,7 +7520,10 @@ class ClrCalendar {
     }
 }
 ClrCalendar.decorators = [
-    { type: 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: 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 = () => [
     { type: LocaleHelperService },
@@ -8694,9 +8739,9 @@ ClrPasswordContainer.decorators = [
             type="button"
           >
             <cds-icon status="info" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
-            <span class="clr-sr-only">{{
-              show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow
-            }}</span>
+            <span class="clr-sr-only">
+              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
+            </span>
           </button>
         </div>
         <cds-icon
@@ -8778,7 +8823,10 @@ class ClrPassword extends WrappedFormControl {
     }
 }
 ClrPassword.decorators = [
-    { type: Directive, args: [{ selector: '[clrPassword]', host: { '[class.clr-input]': 'true' } },] }
+    { type: Directive, args: [{
+                selector: '[clrPassword]',
+                host: { '[class.clr-input]': 'true' },
+            },] }
 ];
 ClrPassword.ctorParameters = () => [
     { type: ViewContainerRef },
@@ -8861,7 +8909,9 @@ class ClrRadio extends WrappedFormControl {
     }
 }
 ClrRadio.decorators = [
-    { type: Directive, args: [{ selector: '[clrRadio]' },] }
+    { type: Directive, args: [{
+                selector: '[clrRadio]',
+            },] }
 ];
 ClrRadio.ctorParameters = () => [
     { type: ViewContainerRef },
@@ -9075,7 +9125,10 @@ class ClrRange extends WrappedFormControl {
     }
 }
 ClrRange.decorators = [
-    { type: Directive, args: [{ selector: '[clrRange]', host: { '[class.clr-range]': 'true' } },] }
+    { type: Directive, args: [{
+                selector: '[clrRange]',
+                host: { '[class.clr-range]': 'true' },
+            },] }
 ];
 ClrRange.ctorParameters = () => [
     { type: ViewContainerRef },
@@ -9191,7 +9244,10 @@ class ClrSelect extends WrappedFormControl {
     }
 }
 ClrSelect.decorators = [
-    { type: Directive, args: [{ selector: '[clrSelect]', host: { '[class.clr-select]': 'true' } },] }
+    { type: Directive, args: [{
+                selector: '[clrSelect]',
+                host: { '[class.clr-select]': 'true' },
+            },] }
 ];
 ClrSelect.ctorParameters = () => [
     { type: ViewContainerRef },
@@ -9278,7 +9334,10 @@ class ClrTextarea extends WrappedFormControl {
     }
 }
 ClrTextarea.decorators = [
-    { type: Directive, args: [{ selector: '[clrTextarea]', host: { '[class.clr-textarea]': 'true' } },] }
+    { type: Directive, args: [{
+                selector: '[clrTextarea]',
+                host: { '[class.clr-textarea]': 'true' },
+            },] }
 ];
 ClrTextarea.ctorParameters = () => [
     { type: ViewContainerRef },
@@ -9404,7 +9463,7 @@ class ClrExpandableAnimation {
 ClrExpandableAnimation.decorators = [
     { type: Component, args: [{
                 selector: 'clr-expandable-animation',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 animations: [
                     trigger('expandAnimation', [
                         transition('true <=> false', [
@@ -9773,7 +9832,10 @@ class ClrDragHandle {
     }
 }
 ClrDragHandle.decorators = [
-    { type: Directive, args: [{ selector: '[clrDragHandle]', host: { '[class.drag-handle]': 'true' } },] }
+    { type: Directive, args: [{
+                selector: '[clrDragHandle]',
+                host: { '[class.drag-handle]': 'true' },
+            },] }
 ];
 ClrDragHandle.ctorParameters = () => [
     { type: ElementRef },
@@ -9974,7 +10036,9 @@ class ClrIfDragged {
     }
 }
 ClrIfDragged.decorators = [
-    { type: Directive, args: [{ selector: '[clrIfDragged]' },] }
+    { type: Directive, args: [{
+                selector: '[clrIfDragged]',
+            },] }
 ];
 ClrIfDragged.ctorParameters = () => [
     { type: TemplateRef },
@@ -10490,7 +10554,9 @@ class OutsideClick {
     }
 }
 OutsideClick.decorators = [
-    { type: Directive, args: [{ selector: '[clrOutsideClick]' },] }
+    { type: Directive, args: [{
+                selector: '[clrOutsideClick]',
+            },] }
 ];
 OutsideClick.ctorParameters = () => [
     { type: ElementRef },
@@ -11162,6 +11228,12 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
             sub.unsubscribe();
         });
     }
+    get maxPlaceholderValue() {
+        return this.maxPlaceholder || this.commonStrings.keys.maxValue;
+    }
+    get minPlaceholderValue() {
+        return this.minPlaceholder || this.commonStrings.keys.minValue;
+    }
     /**
      * Customizable filter logic based on high and low values
      */
@@ -11268,8 +11340,8 @@ DatagridNumericFilter.decorators = [
         type="number"
         name="low"
         [(ngModel)]="low"
-        [placeholder]="commonStrings.keys.minValue"
-        [attr.aria-label]="commonStrings.keys.minValue"
+        [placeholder]="minPlaceholderValue"
+        [attr.aria-label]="minPlaceholderValue"
       />
       <span class="datagrid-filter-input-spacer"></span>
       <input
@@ -11278,8 +11350,8 @@ DatagridNumericFilter.decorators = [
         type="number"
         name="high"
         [(ngModel)]="high"
-        [placeholder]="commonStrings.keys.maxValue"
-        [attr.aria-label]="commonStrings.keys.maxValue"
+        [placeholder]="maxPlaceholderValue"
+        [attr.aria-label]="maxPlaceholderValue"
       />
     </clr-dg-filter>
   `
@@ -11292,6 +11364,8 @@ DatagridNumericFilter.ctorParameters = () => [
     { type: ClrPopoverToggleService }
 ];
 DatagridNumericFilter.propDecorators = {
+    maxPlaceholder: [{ type: Input, args: ['clrFilterMaxPlaceholder',] }],
+    minPlaceholder: [{ type: Input, args: ['clrFilterMinPlaceholder',] }],
     customNumericFilter: [{ type: Input, args: ['clrDgNumericFilter',] }],
     input: [{ type: ViewChild, args: ['input_low',] }],
     filterContainer: [{ type: ViewChild, args: [ClrDatagridFilter,] }],
@@ -11421,6 +11495,9 @@ class DatagridStringFilter extends DatagridFilterRegistrar {
         this.open = false;
         this.filterValueChange = new EventEmitter();
     }
+    get placeholderValue() {
+        return this.placeholder || this.commonStrings.keys.filterItems;
+    }
     /**
      * Customizable filter logic based on a search text
      */
@@ -11485,7 +11562,8 @@ DatagridStringFilter.decorators = [
         name="search"
         [(ngModel)]="value"
         class="clr-input"
-        [attr.aria-label]="commonStrings.keys.filterItems"
+        [attr.aria-label]="placeholderValue"
+        [placeholder]="placeholderValue"
       />
     </clr-dg-filter>
   `
@@ -11498,6 +11576,7 @@ DatagridStringFilter.ctorParameters = () => [
     { type: ClrPopoverToggleService }
 ];
 DatagridStringFilter.propDecorators = {
+    placeholder: [{ type: Input, args: ['clrFilterPlaceholder',] }],
     customStringFilter: [{ type: Input, args: ['clrDgStringFilter',] }],
     input: [{ type: ViewChild, args: ['input',] }],
     filterContainer: [{ type: ViewChild, args: [ClrDatagridFilter,] }],
@@ -11539,7 +11618,9 @@ RowActionService.decorators = [
 class DatagridWillyWonka extends WillyWonka {
 }
 DatagridWillyWonka.decorators = [
-    { type: Directive, args: [{ selector: 'clr-datagrid' },] }
+    { type: Directive, args: [{
+                selector: 'clr-datagrid',
+            },] }
 ];
 
 /*
@@ -11560,7 +11641,9 @@ class ActionableOompaLoompa extends OompaLoompa {
     }
 }
 ActionableOompaLoompa.decorators = [
-    { type: Directive, args: [{ selector: 'clr-datagrid, clr-dg-row' },] }
+    { type: Directive, args: [{
+                selector: 'clr-datagrid, clr-dg-row',
+            },] }
 ];
 ActionableOompaLoompa.ctorParameters = () => [
     { type: ChangeDetectorRef },
@@ -11673,7 +11756,9 @@ class ExpandableOompaLoompa extends OompaLoompa {
     }
 }
 ExpandableOompaLoompa.decorators = [
-    { type: Directive, args: [{ selector: 'clr-datagrid, clr-dg-row' },] }
+    { type: Directive, args: [{
+                selector: 'clr-datagrid, clr-dg-row',
+            },] }
 ];
 ExpandableOompaLoompa.ctorParameters = () => [
     { type: ChangeDetectorRef },
@@ -12092,6 +12177,15 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
             this.customFilter = true;
         }
     }
+    get filterStringPlaceholderValue() {
+        return this.filterStringPlaceholder || this.commonStrings.keys.filterItems;
+    }
+    get filterNumberMaxPlaceholderValue() {
+        return this.filterNumberMaxPlaceholder || this.commonStrings.keys.maxValue;
+    }
+    get filterNumberMinPlaceholderValue() {
+        return this.filterNumberMinPlaceholder || this.commonStrings.keys.minValue;
+    }
     set updateFilterValue(newValue) {
         if (this.filter) {
             if (this.filter instanceof DatagridStringFilterImpl) {
@@ -12162,12 +12256,15 @@ ClrDatagridColumn.decorators = [
 
       <clr-dg-string-filter
         *ngIf="field && !customFilter && colType == 'string'"
+        [clrFilterPlaceholder]="filterStringPlaceholderValue"
         [clrDgStringFilter]="registered"
         [(clrFilterValue)]="filterValue"
       ></clr-dg-string-filter>
 
       <clr-dg-numeric-filter
         *ngIf="field && !customFilter && colType == 'number'"
+        [clrFilterMaxPlaceholder]="filterMaxPlaceholderValue"
+        [clrFilterMinPlaceholder]="filterMinPlaceholderValue"
         [clrDgNumericFilter]="registered"
         [(clrFilterValue)]="filterValue"
       ></clr-dg-numeric-filter>
@@ -12209,6 +12306,9 @@ ClrDatagridColumn.propDecorators = {
     sortOrder: [{ type: Input, args: ['clrDgSortOrder',] }],
     sortOrderChange: [{ type: Output, args: ['clrDgSortOrderChange',] }],
     projectedFilter: [{ type: ContentChild, args: [CustomFilter,] }],
+    filterStringPlaceholder: [{ type: Input, args: ['clrFilterStringPlaceholder',] }],
+    filterNumberMaxPlaceholder: [{ type: Input, args: ['clrFilterNumberMaxPlaceholder',] }],
+    filterNumberMinPlaceholder: [{ type: Input, args: ['clrFilterNumberMinPlaceholder',] }],
     updateFilterValue: [{ type: Input, args: ['clrFilterValue',] }],
     filterValueChange: [{ type: Output, args: ['clrFilterValueChange',] }]
 };
@@ -12717,7 +12817,7 @@ class ClrDatagridCell {
 ClrDatagridCell.decorators = [
     { type: 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',
@@ -14119,7 +14219,7 @@ class ClrDatagridActionBar {
 ClrDatagridActionBar.decorators = [
     { type: Component, args: [{
                 selector: 'clr-dg-action-bar',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: { '[class.datagrid-action-bar]': 'true' }
             },] }
 ];
@@ -14773,7 +14873,9 @@ class DatagridDetailRegisterer {
     }
 }
 DatagridDetailRegisterer.decorators = [
-    { type: Directive, args: [{ selector: '[clrIfExpanded]' },] }
+    { type: Directive, args: [{
+                selector: '[clrIfExpanded]',
+            },] }
 ];
 DatagridDetailRegisterer.ctorParameters = () => [
     { type: ExpandableRowsCount, decorators: [{ type: Optional }] }
@@ -14925,7 +15027,9 @@ class ClrDatagridHideableColumn {
     }
 }
 ClrDatagridHideableColumn.decorators = [
-    { type: Directive, args: [{ selector: '[clrDgHideableColumn]' },] }
+    { type: Directive, args: [{
+                selector: '[clrDgHideableColumn]',
+            },] }
 ];
 ClrDatagridHideableColumn.ctorParameters = () => [
     { type: TemplateRef },
@@ -15473,7 +15577,9 @@ class DatagridCellRenderer {
     }
 }
 DatagridCellRenderer.decorators = [
-    { type: Directive, args: [{ selector: 'clr-dg-cell' },] }
+    { type: Directive, args: [{
+                selector: 'clr-dg-cell',
+            },] }
 ];
 DatagridCellRenderer.ctorParameters = () => [
     { type: ElementRef },
@@ -15589,7 +15695,10 @@ class DatagridHeaderRenderer {
     }
 }
 DatagridHeaderRenderer.decorators = [
-    { type: Directive, args: [{ selector: 'clr-dg-column', providers: [ColumnResizerService, COLUMN_STATE_PROVIDER] },] }
+    { type: Directive, args: [{
+                selector: 'clr-dg-column',
+                providers: [ColumnResizerService, COLUMN_STATE_PROVIDER],
+            },] }
 ];
 DatagridHeaderRenderer.ctorParameters = () => [
     { type: ElementRef },
@@ -15695,7 +15804,9 @@ class DatagridRowRenderer {
     }
 }
 DatagridRowRenderer.decorators = [
-    { type: Directive, args: [{ selector: 'clr-dg-row, clr-dg-row-detail' },] }
+    { type: Directive, args: [{
+                selector: 'clr-dg-row, clr-dg-row-detail',
+            },] }
 ];
 DatagridRowRenderer.ctorParameters = () => [
     { type: ColumnsService }
@@ -15973,7 +16084,9 @@ ClrDatagridModule.ctorParameters = () => [];
 class ClrStackViewCustomTags {
 }
 ClrStackViewCustomTags.decorators = [
-    { type: Directive, args: [{ selector: 'clr-stack-content' },] }
+    { type: Directive, args: [{
+                selector: 'clr-stack-content',
+            },] }
 ];
 class ClrStackViewLabel {
     constructor(uniqueId) {
@@ -16734,7 +16847,9 @@ class ClrRecursiveForOf {
     }
 }
 ClrRecursiveForOf.decorators = [
-    { type: Directive, args: [{ selector: '[clrRecursiveFor][clrRecursiveForOf]' },] }
+    { type: Directive, args: [{
+                selector: '[clrRecursiveFor][clrRecursiveForOf]',
+            },] }
 ];
 ClrRecursiveForOf.ctorParameters = () => [
     { type: TemplateRef },
@@ -17117,7 +17232,7 @@ class ClrTreeNode {
 ClrTreeNode.decorators = [
     { type: 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,
@@ -18176,7 +18291,7 @@ class ClrDropdownMenu extends AbstractPopover {
 ClrDropdownMenu.decorators = [
     { type: Component, args: [{
                 selector: 'clr-dropdown-menu',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: {
                     '[class.dropdown-menu]': 'true',
                     '[attr.role]': '"menu"',
@@ -18616,7 +18731,7 @@ class ClrAlerts {
 ClrAlerts.decorators = [
     { type: 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',
@@ -18876,7 +18991,10 @@ class ClrMainContainer {
     }
 }
 ClrMainContainer.decorators = [
-    { type: Directive, args: [{ selector: 'clr-main-container', host: { '[class.main-container]': 'true' } },] }
+    { type: Directive, args: [{
+                selector: 'clr-main-container',
+                host: { '[class.main-container]': 'true' },
+            },] }
 ];
 ClrMainContainer.ctorParameters = () => [
     { type: ElementRef },
@@ -18907,7 +19025,9 @@ ClrMainContainerModule.decorators = [
 class MainContainerWillyWonka extends WillyWonka {
 }
 MainContainerWillyWonka.decorators = [
-    { type: Directive, args: [{ selector: 'clr-main-container' },] }
+    { type: Directive, args: [{
+                selector: 'clr-main-container',
+            },] }
 ];
 
 /*
@@ -18930,7 +19050,9 @@ class NavDetectionOompaLoompa extends OompaLoompa {
     }
 }
 NavDetectionOompaLoompa.decorators = [
-    { type: Directive, args: [{ selector: 'clr-header' },] }
+    { type: Directive, args: [{
+                selector: 'clr-header',
+            },] }
 ];
 NavDetectionOompaLoompa.ctorParameters = () => [
     { type: ChangeDetectorRef },
@@ -19680,7 +19802,9 @@ class ClrNavLevel extends FocusTrap {
     }
 }
 ClrNavLevel.decorators = [
-    { type: Directive, args: [{ selector: '[clr-nav-level]' },] }
+    { type: Directive, args: [{
+                selector: '[clr-nav-level]',
+            },] }
 ];
 ClrNavLevel.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
@@ -19768,7 +19892,9 @@ ClrTemplateRefModule.decorators = [
 class TabsWillyWonka extends WillyWonka {
 }
 TabsWillyWonka.decorators = [
-    { type: Directive, args: [{ selector: 'clr-tabs' },] }
+    { type: Directive, args: [{
+                selector: 'clr-tabs',
+            },] }
 ];
 
 /*
@@ -19790,7 +19916,9 @@ class ActiveOompaLoompa extends OompaLoompa {
     }
 }
 ActiveOompaLoompa.decorators = [
-    { type: Directive, args: [{ selector: '[clrTabLink], clr-tab-content' },] }
+    { type: Directive, args: [{
+                selector: '[clrTabLink], clr-tab-content',
+            },] }
 ];
 ActiveOompaLoompa.ctorParameters = () => [
     { type: ChangeDetectorRef },
@@ -20044,7 +20172,7 @@ class ClrTab {
 ClrTab.decorators = [
     { type: Component, args: [{
                 selector: 'clr-tab',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 providers: [IF_ACTIVE_ID_PROVIDER, AriaService]
             },] }
 ];
@@ -20068,7 +20196,7 @@ class ClrTabOverflowContent {
 ClrTabOverflowContent.decorators = [
     { type: Component, args: [{
                 selector: 'clr-tab-overflow-content',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: {
                     '[class.dropdown-menu]': 'true',
                 }
@@ -20271,8 +20399,7 @@ ClrTabs.decorators = [
               <ng-container
                 *ngIf="link.tabsId === tabsId && link.inOverflow"
                 [ngTemplateOutlet]="link.templateRefContainer.template"
-              >
-              </ng-container>
+              ></ng-container>
             </ng-container>
           </clr-tab-overflow-content>
         </div>
@@ -20638,7 +20765,7 @@ class ClrVerticalNavGroup {
 ClrVerticalNavGroup.decorators = [
     { type: 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: [
                     trigger('clrExpand', [
@@ -20674,7 +20801,7 @@ class ClrVerticalNavGroupChildren {
 ClrVerticalNavGroupChildren.decorators = [
     { type: Component, args: [{
                 selector: 'clr-vertical-nav-group-children',
-                template: ` <ng-content></ng-content> `
+                template: `<ng-content></ng-content>`
             },] }
 ];
 
@@ -20693,7 +20820,10 @@ class ClrVerticalNavIcon {
     }
 }
 ClrVerticalNavIcon.decorators = [
-    { type: Directive, args: [{ selector: '[clrVerticalNavIcon]', host: { class: 'nav-icon' } },] }
+    { type: Directive, args: [{
+                selector: '[clrVerticalNavIcon]',
+                host: { class: 'nav-icon' },
+            },] }
 ];
 ClrVerticalNavIcon.ctorParameters = () => [
     { type: VerticalNavIconService }
@@ -20954,7 +21084,9 @@ class ClrModalBody {
     }
 }
 ClrModalBody.decorators = [
-    { type: Directive, args: [{ selector: '.modal-body' },] }
+    { type: Directive, args: [{
+                selector: '.modal-body',
+            },] }
 ];
 ClrModalBody.ctorParameters = () => [
     { type: Renderer2 },
@@ -21194,7 +21326,7 @@ class ClrTooltip {
 ClrTooltip.decorators = [
     { type: Component, args: [{
                 selector: 'clr-tooltip',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: {
                     '[class.tooltip]': 'true',
                 },
@@ -21305,7 +21437,7 @@ class ClrTooltipContent extends AbstractPopover {
 ClrTooltipContent.decorators = [
     { type: Component, args: [{
                 selector: 'clr-tooltip-content',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: {
                     '[class.tooltip-content]': 'true',
                     '[style.opacity]': '1',
@@ -21634,7 +21766,7 @@ class ClrTimeline {
 ClrTimeline.decorators = [
     { type: Component, args: [{
                 selector: 'clr-timeline',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: { '[class.clr-timeline]': 'true' },
                 providers: [TimelineIconAttributeService]
             },] }
@@ -21664,7 +21796,7 @@ class ClrTimelineStepTitle {
 ClrTimelineStepTitle.decorators = [
     { type: 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' }
             },] }
 ];
@@ -21713,8 +21845,7 @@ ClrTimelineStep.decorators = [
         [attr.shape]="iconShape"
         [attr.aria-label]="iconAriaLabel"
         [attr.aria-current]="iconAriaCurrent"
-      >
-      </cds-icon>
+      ></cds-icon>
     </ng-container>
     <div class="clr-timeline-step-body">
       <ng-content select="clr-timeline-step-title"></ng-content>
@@ -21747,7 +21878,7 @@ class ClrTimelineStepDescription {
 ClrTimelineStepDescription.decorators = [
     { type: Component, args: [{
                 selector: 'clr-timeline-step-description',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: { '[class.clr-timeline-step-description]': 'true' }
             },] }
 ];
@@ -21762,7 +21893,7 @@ class ClrTimelineStepHeader {
 ClrTimelineStepHeader.decorators = [
     { type: Component, args: [{
                 selector: 'clr-timeline-step-header',
-                template: ` <ng-content></ng-content> `,
+                template: `<ng-content></ng-content>`,
                 host: { '[class.clr-timeline-step-header]': 'true' }
             },] }
 ];
@@ -22878,7 +23009,9 @@ class ClrWizardPageButtons {
     }
 }
 ClrWizardPageButtons.decorators = [
-    { type: Directive, args: [{ selector: '[clrPageButtons]' },] }
+    { type: Directive, args: [{
+                selector: '[clrPageButtons]',
+            },] }
 ];
 ClrWizardPageButtons.ctorParameters = () => [
     { type: TemplateRef }
@@ -22895,7 +23028,9 @@ class ClrWizardPageHeaderActions {
     }
 }
 ClrWizardPageHeaderActions.decorators = [
-    { type: Directive, args: [{ selector: '[clrPageHeaderActions]' },] }
+    { type: Directive, args: [{
+                selector: '[clrPageHeaderActions]',
+            },] }
 ];
 ClrWizardPageHeaderActions.ctorParameters = () => [
     { type: TemplateRef }
@@ -22912,7 +23047,9 @@ class ClrWizardPageNavTitle {
     }
 }
 ClrWizardPageNavTitle.decorators = [
-    { type: Directive, args: [{ selector: '[clrPageNavTitle]' },] }
+    { type: Directive, args: [{
+                selector: '[clrPageNavTitle]',
+            },] }
 ];
 ClrWizardPageNavTitle.ctorParameters = () => [
     { type: TemplateRef }
@@ -22929,7 +23066,9 @@ class ClrWizardPageTitle {
     }
 }
 ClrWizardPageTitle.decorators = [
-    { type: Directive, args: [{ selector: '[clrPageTitle]' },] }
+    { type: Directive, args: [{
+                selector: '[clrPageTitle]',
+            },] }
 ];
 ClrWizardPageTitle.ctorParameters = () => [
     { type: TemplateRef }
@@ -24169,7 +24308,9 @@ ClrWizardButton.propDecorators = {
 class ClrWizardCustomTags {
 }
 ClrWizardCustomTags.decorators = [
-    { type: Directive, args: [{ selector: 'clr-wizard-title, clr-wizard-pagetitle' },] }
+    { type: Directive, args: [{
+                selector: 'clr-wizard-title, clr-wizard-pagetitle',
+            },] }
 ];
 
 /*