@porscheinformatik/clr-addons 11.2.0 → 12.1.0

package/fesm2015/{clr-addons.js → clr-addons.mjs}

@@ -1,13 +1,17 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, Renderer2, ElementRef, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, Injector, forwardRef, NgZone, ContentChild, ChangeDetectorRef, HostListener, InjectionToken, Inject, Optional, ApplicationRef, ComponentFactoryResolver } from '@angular/core';
-import { Location, CommonModule, DOCUMENT } from '@angular/common';
+import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, ViewChild, TemplateRef, ContentChildren, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, ContentChild, HostListener, InjectionToken, Inject, Optional } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i3$1 from '@angular/forms';
 import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ClarityModule, ClrFormsModule, ɵbc, ɵbi, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule } from '@clr/angular';
-import { Subject, timer, asyncScheduler, interval, BehaviorSubject, ReplaySubject, of } from 'rxjs';
+import * as i1 from '@clr/angular';
+import { ClarityModule, ClrFormsModule, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule } from '@clr/angular';
+import { Subject, BehaviorSubject, timer, asyncScheduler, interval, of, ReplaySubject, takeUntil as takeUntil$1 } from 'rxjs';
 import { takeUntil, observeOn, take } from 'rxjs/operators';
+import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { trigger, transition, style, animate, state } from '@angular/animations';
-import { ClarityIcons, organizationIcon, treeViewIcon, angleIcon } from '@cds/core/icon';
+import { ClarityIcons, treeViewIcon, angleIcon, organizationIcon } from '@cds/core/icon';
 import '@cds/core/icon/register.js';
 
 /*
@@ -23,15 +27,12 @@ class ClrBackButton {
         this.location.back();
     }
 }
-ClrBackButton.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-back-button',
-                template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n  <clr-icon shape=\"arrow\" dir=\"left\" size=\"36\"></clr-icon>\n</button>\n"
-            },] }
-];
-ClrBackButton.ctorParameters = () => [
-    { type: Location }
-];
+ClrBackButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBackButton, deps: [{ token: i2.Location }], target: i0.ɵɵFactoryTarget.Component });
+ClrBackButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrBackButton, selector: "clr-back-button", ngImport: i0, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n  <clr-icon shape=\"arrow\" dir=\"left\" size=\"36\"></clr-icon>\n</button>\n", directives: [{ type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBackButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-back-button', template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n  <clr-icon shape=\"arrow\" dir=\"left\" size=\"36\"></clr-icon>\n</button>\n" }]
+        }], ctorParameters: function () { return [{ type: i2.Location }]; } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -40,13 +41,17 @@ ClrBackButton.ctorParameters = () => [
  */
 class ClrBackButtonModule {
 }
-ClrBackButtonModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [ClrBackButton],
-                exports: [ClrBackButton],
-            },] }
-];
+ClrBackButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBackButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrBackButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBackButtonModule, declarations: [ClrBackButton], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrBackButton] });
+ClrBackButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBackButtonModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBackButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [ClrBackButton],
+                    exports: [ClrBackButton],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -61,15 +66,17 @@ class ClrBreadcrumbService {
         this.breadcrumbChange.next(breadcrumbElements);
     }
 }
-ClrBreadcrumbService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ClrBreadcrumbService_Factory() { return new ClrBreadcrumbService(); }, token: ClrBreadcrumbService, providedIn: "root" });
-ClrBreadcrumbService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
+ClrBreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ClrBreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumbService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -90,15 +97,12 @@ class ClrBreadcrumb {
         this.destroyed.complete();
     }
 }
-ClrBreadcrumb.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-breadcrumb',
-                template: "<nav aria-label=\"breadcrumb\" *ngIf=\"breadcrumbElements.length\">\n  <ol class=\"breadcrumb\">\n    <ng-container *ngFor=\"let breadcrumbItem of breadcrumbElements\">\n      <li *ngIf=\"breadcrumbItem.url\" class=\"breadcrumb-item\">\n        <a [routerLink]=\"breadcrumbItem.url\">{{breadcrumbItem.label}}</a>\n      </li>\n      <li *ngIf=\"!breadcrumbItem.url\" class=\"breadcrumb-item active\">{{breadcrumbItem.label}}</li>\n    </ng-container>\n  </ol>\n</nav>\n"
-            },] }
-];
-ClrBreadcrumb.ctorParameters = () => [
-    { type: ClrBreadcrumbService }
-];
+ClrBreadcrumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumb, deps: [{ token: ClrBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
+ClrBreadcrumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrBreadcrumb, selector: "clr-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\" *ngIf=\"breadcrumbElements.length\">\n  <ol class=\"breadcrumb\">\n    <ng-container *ngFor=\"let breadcrumbItem of breadcrumbElements\">\n      <li *ngIf=\"breadcrumbItem.url\" class=\"breadcrumb-item\">\n        <a [routerLink]=\"breadcrumbItem.url\">{{breadcrumbItem.label}}</a>\n      </li>\n      <li *ngIf=\"!breadcrumbItem.url\" class=\"breadcrumb-item active\">{{breadcrumbItem.label}}</li>\n    </ng-container>\n  </ol>\n</nav>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-breadcrumb', template: "<nav aria-label=\"breadcrumb\" *ngIf=\"breadcrumbElements.length\">\n  <ol class=\"breadcrumb\">\n    <ng-container *ngFor=\"let breadcrumbItem of breadcrumbElements\">\n      <li *ngIf=\"breadcrumbItem.url\" class=\"breadcrumb-item\">\n        <a [routerLink]=\"breadcrumbItem.url\">{{breadcrumbItem.label}}</a>\n      </li>\n      <li *ngIf=\"!breadcrumbItem.url\" class=\"breadcrumb-item active\">{{breadcrumbItem.label}}</li>\n    </ng-container>\n  </ol>\n</nav>\n" }]
+        }], ctorParameters: function () { return [{ type: ClrBreadcrumbService }]; } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -107,14 +111,18 @@ ClrBreadcrumb.ctorParameters = () => [
  */
 class ClrBreadcrumbModule {
 }
-ClrBreadcrumbModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, RouterModule],
-                declarations: [ClrBreadcrumb],
-                exports: [ClrBreadcrumb],
-                providers: [ClrBreadcrumbService],
-            },] }
-];
+ClrBreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrBreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumbModule, declarations: [ClrBreadcrumb], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrBreadcrumb] });
+ClrBreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumbModule, providers: [ClrBreadcrumbService], imports: [[CommonModule, ClarityModule, RouterModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBreadcrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, RouterModule],
+                    declarations: [ClrBreadcrumb],
+                    exports: [ClrBreadcrumb],
+                    providers: [ClrBreadcrumbService],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -138,36 +146,58 @@ class ClrCollapseExpandSection {
         this.isCollapsed = !this.isCollapsed;
     }
 }
-ClrCollapseExpandSection.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-collapse-expand-section',
-                template: "<div class=\"ces\">\n  <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n    <h2 *ngIf=\"!disableHeaderStyles; else title\">\n      <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n    </h2>\n    <ng-template #title>\n      <ng-content select=\"[clr-ces-title]\"></ng-content>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <clr-icon shape=\"caret up\" size=\"28\" class=\"ces-caret-icon\" [@rotateIcon]=\"isCollapsed\"></clr-icon>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"ces-subtitle\">\n    <h4 *ngIf=\"!disableHeaderStyles; else subtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitle\"></ng-container>\n    </h4>\n    <ng-template #subtitle>\n      <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n    </ng-template>\n  </div>\n  <div [@collapseExpandAnimation] *ngIf=\"!isCollapsed\">\n    <ng-content select=\"[clr-ces-content]\"></ng-content>\n  </div>\n</div>\n",
-                animations: [
-                    trigger('collapseExpandAnimation', [
-                        transition(':enter', [
-                            style({ opacity: 0, height: 0, overflow: 'hidden' }),
-                            animate('300ms', style({ opacity: 1, height: '*' })),
+ClrCollapseExpandSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrCollapseExpandSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrCollapseExpandSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrCollapseExpandSection, selector: "clr-collapse-expand-section", inputs: { isCollapsed: ["clrIsCollapsed", "isCollapsed"], disableHeaderStyles: ["clrDisableHeaderStyles", "disableHeaderStyles"] }, outputs: { collapsed: "clrCollapsed", expanded: "clrExpanded" }, ngImport: i0, template: "<div class=\"ces\">\n  <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n    <h2 *ngIf=\"!disableHeaderStyles; else title\">\n      <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n    </h2>\n    <ng-template #title>\n      <ng-content select=\"[clr-ces-title]\"></ng-content>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <clr-icon shape=\"caret up\" size=\"28\" class=\"ces-caret-icon\" [@rotateIcon]=\"isCollapsed\"></clr-icon>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"ces-subtitle\">\n    <h4 *ngIf=\"!disableHeaderStyles; else subtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitle\"></ng-container>\n    </h4>\n    <ng-template #subtitle>\n      <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n    </ng-template>\n  </div>\n  <div [@collapseExpandAnimation] *ngIf=\"!isCollapsed\">\n    <ng-content select=\"[clr-ces-content]\"></ng-content>\n  </div>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }], animations: [
+        trigger('collapseExpandAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 1, height: '*' })),
+            ]),
+            transition(':leave', [
+                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 0, height: 0 })),
+            ]),
+        ]),
+        trigger('rotateIcon', [
+            state('true', style({ transform: 'rotate(0)' })),
+            state('false', style({ transform: 'rotate(180deg)' })),
+            transition('true => false', animate('300ms ease-out')),
+            transition('false => true', animate('300ms ease-in')),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrCollapseExpandSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-collapse-expand-section', animations: [
+                        trigger('collapseExpandAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 1, height: '*' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 0, height: 0 })),
+                            ]),
                         ]),
-                        transition(':leave', [
-                            style({ opacity: 1, height: '*', overflow: 'hidden' }),
-                            animate('300ms', style({ opacity: 0, height: 0 })),
+                        trigger('rotateIcon', [
+                            state('true', style({ transform: 'rotate(0)' })),
+                            state('false', style({ transform: 'rotate(180deg)' })),
+                            transition('true => false', animate('300ms ease-out')),
+                            transition('false => true', animate('300ms ease-in')),
                         ]),
-                    ]),
-                    trigger('rotateIcon', [
-                        state('true', style({ transform: 'rotate(0)' })),
-                        state('false', style({ transform: 'rotate(180deg)' })),
-                        transition('true => false', animate('300ms ease-out')),
-                        transition('false => true', animate('300ms ease-in')),
-                    ]),
-                ]
-            },] }
-];
-ClrCollapseExpandSection.propDecorators = {
-    isCollapsed: [{ type: Input, args: ['clrIsCollapsed',] }],
-    disableHeaderStyles: [{ type: Input, args: ['clrDisableHeaderStyles',] }],
-    collapsed: [{ type: Output, args: ['clrCollapsed',] }],
-    expanded: [{ type: Output, args: ['clrExpanded',] }]
-};
+                    ], template: "<div class=\"ces\">\n  <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n    <h2 *ngIf=\"!disableHeaderStyles; else title\">\n      <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n    </h2>\n    <ng-template #title>\n      <ng-content select=\"[clr-ces-title]\"></ng-content>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <clr-icon shape=\"caret up\" size=\"28\" class=\"ces-caret-icon\" [@rotateIcon]=\"isCollapsed\"></clr-icon>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"ces-subtitle\">\n    <h4 *ngIf=\"!disableHeaderStyles; else subtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitle\"></ng-container>\n    </h4>\n    <ng-template #subtitle>\n      <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n    </ng-template>\n  </div>\n  <div [@collapseExpandAnimation] *ngIf=\"!isCollapsed\">\n    <ng-content select=\"[clr-ces-content]\"></ng-content>\n  </div>\n</div>\n" }]
+        }], propDecorators: { isCollapsed: [{
+                type: Input,
+                args: ['clrIsCollapsed']
+            }], disableHeaderStyles: [{
+                type: Input,
+                args: ['clrDisableHeaderStyles']
+            }], collapsed: [{
+                type: Output,
+                args: ['clrCollapsed']
+            }], expanded: [{
+                type: Output,
+                args: ['clrExpanded']
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -176,13 +206,17 @@ ClrCollapseExpandSection.propDecorators = {
  */
 class ClrCollapseExpandSectionModule {
 }
-ClrCollapseExpandSectionModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [ClrCollapseExpandSection],
-                exports: [ClrCollapseExpandSection],
-            },] }
-];
+ClrCollapseExpandSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrCollapseExpandSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrCollapseExpandSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrCollapseExpandSectionModule, declarations: [ClrCollapseExpandSection], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrCollapseExpandSection] });
+ClrCollapseExpandSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrCollapseExpandSectionModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrCollapseExpandSectionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [ClrCollapseExpandSection],
+                    exports: [ClrCollapseExpandSection],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
@@ -225,29 +259,38 @@ class ClrContentPanel {
         window.dispatchEvent(new Event('resize'));
     }
 }
-ClrContentPanel.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-content-panel',
-                template: "<ng-container *ngIf=\"_open\">\n  <div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n    <h3 class=\"content-panel-title\">\n      <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n        <clr-icon class=\"content-panel-close-icon\" shape=\"close\" size=\"36\"></clr-icon>\n      </button>\n      <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n    </h3>\n    <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n  </div>\n  <div [@fade] class=\"content-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n</ng-container>\n",
-                animations: [
-                    trigger('slideIn', [
-                        transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
-                        transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
-                    ]),
-                    trigger('fade', [
-                        transition(':enter', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
-                        transition(':leave', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
-                    ]),
-                ],
-                host: {
-                    '[class.content-panel]': 'true',
-                }
-            },] }
-];
-ClrContentPanel.propDecorators = {
-    opened: [{ type: Output, args: ['clrOpened',] }],
-    closed: [{ type: Output, args: ['clrClosed',] }]
-};
+ClrContentPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrContentPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrContentPanel, selector: "clr-content-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.content-panel": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"_open\">\n  <div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n    <h3 class=\"content-panel-title\">\n      <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n        <clr-icon class=\"content-panel-close-icon\" shape=\"close\" size=\"36\"></clr-icon>\n      </button>\n      <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n    </h3>\n    <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n  </div>\n  <div [@fade] class=\"content-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n</ng-container>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }], animations: [
+        trigger('slideIn', [
+            transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
+            transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
+        ]),
+        trigger('fade', [
+            transition(':enter', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
+            transition(':leave', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-content-panel', animations: [
+                        trigger('slideIn', [
+                            transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
+                            transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
+                        ]),
+                        trigger('fade', [
+                            transition(':enter', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
+                            transition(':leave', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
+                        ]),
+                    ], host: {
+                        '[class.content-panel]': 'true',
+                    }, template: "<ng-container *ngIf=\"_open\">\n  <div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n    <h3 class=\"content-panel-title\">\n      <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n        <clr-icon class=\"content-panel-close-icon\" shape=\"close\" size=\"36\"></clr-icon>\n      </button>\n      <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n    </h3>\n    <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n  </div>\n  <div [@fade] class=\"content-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n</ng-container>\n" }]
+        }], propDecorators: { opened: [{
+                type: Output,
+                args: ['clrOpened']
+            }], closed: [{
+                type: Output,
+                args: ['clrClosed']
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -256,22 +299,31 @@ ClrContentPanel.propDecorators = {
  */
 class ClrContentPanelContainer {
 }
-ClrContentPanelContainer.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-content-panel-container',
-                template: `
+ClrContentPanelContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrContentPanelContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrContentPanelContainer, selector: "clr-content-panel-container", host: { properties: { "class.content-container": "true", "class.content-panel-container": "true" } }, ngImport: i0, template: `
+    <div class="content-panel-outer-wrapper">
+      <ng-content select="clr-content-panel-container-content"></ng-content>
+      <ng-content select="clr-content-panel-container-footer"></ng-content>
+    </div>
+    <ng-content select="clr-content-panel"></ng-content>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-content-panel-container',
+                    template: `
     <div class="content-panel-outer-wrapper">
       <ng-content select="clr-content-panel-container-content"></ng-content>
       <ng-content select="clr-content-panel-container-footer"></ng-content>
     </div>
     <ng-content select="clr-content-panel"></ng-content>
   `,
-                host: {
-                    '[class.content-container]': 'true',
-                    '[class.content-panel-container]': 'true',
-                }
-            },] }
-];
+                    host: {
+                        '[class.content-container]': 'true',
+                        '[class.content-panel-container]': 'true',
+                    },
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -280,15 +332,18 @@ ClrContentPanelContainer.decorators = [
  */
 class ClrContentPanelContainerContent {
 }
-ClrContentPanelContainerContent.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-content-panel-container-content',
-                template: ` <ng-content></ng-content> `,
-                host: {
-                    '[class.content-area]': 'true',
-                }
-            },] }
-];
+ClrContentPanelContainerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrContentPanelContainerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrContentPanelContainerContent, selector: "clr-content-panel-container-content", host: { properties: { "class.content-area": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelContainerContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-content-panel-container-content',
+                    template: ` <ng-content></ng-content> `,
+                    host: {
+                        '[class.content-area]': 'true',
+                    },
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -297,15 +352,18 @@ ClrContentPanelContainerContent.decorators = [
  */
 class ClrContentPanelContainerFooter {
 }
-ClrContentPanelContainerFooter.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-content-panel-container-footer',
-                template: ` <ng-content></ng-content> `,
-                host: {
-                    '[class.content-area-footer]': 'true',
-                }
-            },] }
-];
+ClrContentPanelContainerFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrContentPanelContainerFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrContentPanelContainerFooter, selector: "clr-content-panel-container-footer", host: { properties: { "class.content-area-footer": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelContainerFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-content-panel-container-footer',
+                    template: ` <ng-content></ng-content> `,
+                    host: {
+                        '[class.content-area-footer]': 'true',
+                    },
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -314,18 +372,25 @@ ClrContentPanelContainerFooter.decorators = [
  */
 class ClrContentPanelModule {
 }
-ClrContentPanelModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [
-                    ClrContentPanel,
-                    ClrContentPanelContainer,
-                    ClrContentPanelContainerContent,
-                    ClrContentPanelContainerFooter,
-                ],
-                exports: [ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter],
-            },] }
-];
+ClrContentPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrContentPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelModule, declarations: [ClrContentPanel,
+        ClrContentPanelContainer,
+        ClrContentPanelContainerContent,
+        ClrContentPanelContainerFooter], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter] });
+ClrContentPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrContentPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [
+                        ClrContentPanel,
+                        ClrContentPanelContainer,
+                        ClrContentPanelContainerContent,
+                        ClrContentPanelContainerFooter,
+                    ],
+                    exports: [ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter],
+                }]
+        }] });
 
 /**
  * Class to provide validators for the Clr Data List.
@@ -379,15 +444,17 @@ class ClrDataListPredefinedValidatorDirective {
         return ClrDataListValidators.predefined(this.clrDataListPredefined)(control);
     }
 }
-ClrDataListPredefinedValidatorDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrDataListPredefined]',
-                providers: [{ provide: NG_VALIDATORS, useExisting: ClrDataListPredefinedValidatorDirective, multi: true }],
-            },] }
-];
-ClrDataListPredefinedValidatorDirective.propDecorators = {
-    clrDataListPredefined: [{ type: Input }]
-};
+ClrDataListPredefinedValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrDataListPredefinedValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrDataListPredefinedValidatorDirective, selector: "[clrDataListPredefined]", inputs: { clrDataListPredefined: "clrDataListPredefined" }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrDataListPredefinedValidatorDirective, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrDataListPredefined]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: ClrDataListPredefinedValidatorDirective, multi: true }],
+                }]
+        }], propDecorators: { clrDataListPredefined: [{
+                type: Input
+            }] } });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -396,12 +463,16 @@ ClrDataListPredefinedValidatorDirective.propDecorators = {
  */
 class ClrDataListValidatorModule {
 }
-ClrDataListValidatorModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ClrDataListPredefinedValidatorDirective],
-                exports: [ClrDataListPredefinedValidatorDirective],
-            },] }
-];
+ClrDataListValidatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDataListValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDataListValidatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDataListValidatorModule, declarations: [ClrDataListPredefinedValidatorDirective], exports: [ClrDataListPredefinedValidatorDirective] });
+ClrDataListValidatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDataListValidatorModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDataListValidatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClrDataListPredefinedValidatorDirective],
+                    exports: [ClrDataListPredefinedValidatorDirective],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -422,10 +493,21 @@ class ClrDateTimeContainer {
         this.renderer.appendChild(inputWrapper, timeInputElement);
     }
 }
-ClrDateTimeContainer.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-date-time-container',
-                template: `
+ClrDateTimeContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDateTimeContainer, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrDateTimeContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrDateTimeContainer, selector: "clr-date-time-container", host: { properties: { "class.date-time-container": "true" } }, viewQueries: [{ propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-content select="clr-date-container"></ng-content>
+
+    <ng-template #timeInput>
+      <div class="clr-input-wrapper">
+        <ng-content select="[clrTime]"></ng-content>
+      </div>
+    </ng-template>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDateTimeContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-date-time-container',
+                    template: `
     <ng-content select="clr-date-container"></ng-content>
 
     <ng-template #timeInput>
@@ -434,18 +516,14 @@ ClrDateTimeContainer.decorators = [
       </div>
     </ng-template>
   `,
-                host: {
-                    '[class.date-time-container]': 'true',
-                }
-            },] }
-];
-ClrDateTimeContainer.ctorParameters = () => [
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-ClrDateTimeContainer.propDecorators = {
-    timeInput: [{ type: ViewChild, args: ['timeInput', { static: true },] }]
-};
+                    host: {
+                        '[class.date-time-container]': 'true',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { timeInput: [{
+                type: ViewChild,
+                args: ['timeInput', { static: true }]
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -454,14 +532,17 @@ ClrDateTimeContainer.propDecorators = {
  */
 class ClrTimeInput {
 }
-ClrTimeInput.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrTime]',
-                host: {
-                    '[class.clr-input]': 'true',
-                },
-            },] }
-];
+ClrTimeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrTimeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrTimeInput, selector: "[clrTime]", host: { properties: { "class.clr-input": "true" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTimeInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrTime]',
+                    host: {
+                        '[class.clr-input]': 'true',
+                    },
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -470,13 +551,17 @@ ClrTimeInput.decorators = [
  */
 class ClrDateTimeModule {
 }
-ClrDateTimeModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
-                declarations: [ClrDateTimeContainer, ClrTimeInput],
-                exports: [ClrDateTimeContainer, ClrTimeInput],
-            },] }
-];
+ClrDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDateTimeModule, declarations: [ClrDateTimeContainer, ClrTimeInput], imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule], exports: [ClrDateTimeContainer, ClrTimeInput] });
+ClrDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDateTimeModule, imports: [[CommonModule, ClarityModule, ClrFormsModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDateTimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
+                    declarations: [ClrDateTimeContainer, ClrTimeInput],
+                    exports: [ClrDateTimeContainer, ClrTimeInput],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -515,18 +600,21 @@ class ClrDotPager {
         return Array(this._pages);
     }
 }
-ClrDotPager.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-dot-pager',
-                template: "<clr-radio-container *ngIf=\"pages > 0\" clrInline>\n  <clr-radio-wrapper *ngFor=\"let a of pageArray(); let page = index\">\n    <input clrRadio type=\"radio\" [value]=\"page+1\" [(ngModel)]=\"currentPage\" name=\"{{uniqueName}}\" />\n    <label>&nbsp;</label>\n  </clr-radio-wrapper>\n</clr-radio-container>\n",
-                host: { '[class.dot-pager]': 'true' }
-            },] }
-];
-ClrDotPager.propDecorators = {
-    currentPageChange: [{ type: Output, args: ['clrCurrentPageChange',] }],
-    pages: [{ type: Input, args: ['clrPages',] }],
-    currentPage: [{ type: Input, args: ['clrCurrentPage',] }]
-};
+ClrDotPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDotPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrDotPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrDotPager, selector: "clr-dot-pager", inputs: { pages: ["clrPages", "pages"], currentPage: ["clrCurrentPage", "currentPage"] }, outputs: { currentPageChange: "clrCurrentPageChange" }, host: { properties: { "class.dot-pager": "true" } }, ngImport: i0, template: "<clr-radio-container *ngIf=\"pages > 0\" clrInline>\n  <clr-radio-wrapper *ngFor=\"let a of pageArray(); let page = index\">\n    <input clrRadio type=\"radio\" [value]=\"page+1\" [(ngModel)]=\"currentPage\" name=\"{{uniqueName}}\" />\n    <label>&nbsp;</label>\n  </clr-radio-wrapper>\n</clr-radio-container>\n", components: [{ type: i1.ClrRadioContainer, selector: "clr-radio-container", inputs: ["clrInline"] }, { type: i1.ClrRadioWrapper, selector: "clr-radio-wrapper" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.ClrRadio, selector: "[clrRadio]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.ClrLabel, selector: "label", inputs: ["for"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDotPager, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-dot-pager', host: { '[class.dot-pager]': 'true' }, template: "<clr-radio-container *ngIf=\"pages > 0\" clrInline>\n  <clr-radio-wrapper *ngFor=\"let a of pageArray(); let page = index\">\n    <input clrRadio type=\"radio\" [value]=\"page+1\" [(ngModel)]=\"currentPage\" name=\"{{uniqueName}}\" />\n    <label>&nbsp;</label>\n  </clr-radio-wrapper>\n</clr-radio-container>\n" }]
+        }], propDecorators: { currentPageChange: [{
+                type: Output,
+                args: ['clrCurrentPageChange']
+            }], pages: [{
+                type: Input,
+                args: ['clrPages']
+            }], currentPage: [{
+                type: Input,
+                args: ['clrCurrentPage']
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -535,13 +623,17 @@ ClrDotPager.propDecorators = {
  */
 class ClrDotPagerModule {
 }
-ClrDotPagerModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [ClrDotPager],
-                exports: [ClrDotPager],
-            },] }
-];
+ClrDotPagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDotPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDotPagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDotPagerModule, declarations: [ClrDotPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrDotPager] });
+ClrDotPagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDotPagerModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrDotPagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [ClrDotPager],
+                    exports: [ClrDotPager],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -681,20 +773,23 @@ class ClrFlowBar {
         return this._steps.slice(index + 1, this._steps.length).find(step => step.enabled);
     }
 }
-ClrFlowBar.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-flow-bar',
-                template: "<div class=\"flow-bar-wrapper\">\n  <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n    <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n      <button\n        class=\"btn btn-link flow-bar-btn\"\n        [disabled]=\"!step.enabled\"\n        [class.active]=\"step === _activeStep\"\n        (click)=\"changeActiveStep(step)\"\n      >\n        {{index + 1}}. {{(step.title | async)}}\n      </button>\n      <clr-icon shape=\"caret right\" *ngIf=\"!last\"></clr-icon>\n    </div>\n  </ng-container>\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n  <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n    {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n    <clr-icon shape=\"caret down\"></clr-icon>\n  </button>\n  <clr-dropdown-menu>\n    <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n      <button clrDropdownItem type=\"button\" class=\"btn\" [disabled]=\"!step.enabled\" (click)=\"changeActiveStep(step)\">\n        {{index + 1}}. {{step.title | async}}\n      </button>\n    </ng-container>\n  </clr-dropdown-menu>\n</clr-dropdown>\n",
-                host: {
-                    '[class.flow-bar]': 'true',
-                }
-            },] }
-];
-ClrFlowBar.propDecorators = {
-    _steps: [{ type: Input, args: ['clrSteps',] }],
-    _activeStep: [{ type: Input, args: ['clrActiveStep',] }],
-    _activeStepChange: [{ type: Output, args: ['clrActiveStepChange',] }]
-};
+ClrFlowBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrFlowBar, selector: "clr-flow-bar", inputs: { _steps: ["clrSteps", "_steps"], _activeStep: ["clrActiveStep", "_activeStep"] }, outputs: { _activeStepChange: "clrActiveStepChange" }, host: { properties: { "class.flow-bar": "true" } }, ngImport: i0, template: "<div class=\"flow-bar-wrapper\">\n  <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n    <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n      <button\n        class=\"btn btn-link flow-bar-btn\"\n        [disabled]=\"!step.enabled\"\n        [class.active]=\"step === _activeStep\"\n        (click)=\"changeActiveStep(step)\"\n      >\n        {{index + 1}}. {{(step.title | async)}}\n      </button>\n      <clr-icon shape=\"caret right\" *ngIf=\"!last\"></clr-icon>\n    </div>\n  </ng-container>\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n  <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n    {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n    <clr-icon shape=\"caret down\"></clr-icon>\n  </button>\n  <clr-dropdown-menu>\n    <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n      <button clrDropdownItem type=\"button\" class=\"btn\" [disabled]=\"!step.enabled\" (click)=\"changeActiveStep(step)\">\n        {{index + 1}}. {{step.title | async}}\n      </button>\n    </ng-container>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFlowBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-flow-bar', host: {
+                        '[class.flow-bar]': 'true',
+                    }, template: "<div class=\"flow-bar-wrapper\">\n  <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n    <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n      <button\n        class=\"btn btn-link flow-bar-btn\"\n        [disabled]=\"!step.enabled\"\n        [class.active]=\"step === _activeStep\"\n        (click)=\"changeActiveStep(step)\"\n      >\n        {{index + 1}}. {{(step.title | async)}}\n      </button>\n      <clr-icon shape=\"caret right\" *ngIf=\"!last\"></clr-icon>\n    </div>\n  </ng-container>\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n  <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n    {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n    <clr-icon shape=\"caret down\"></clr-icon>\n  </button>\n  <clr-dropdown-menu>\n    <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n      <button clrDropdownItem type=\"button\" class=\"btn\" [disabled]=\"!step.enabled\" (click)=\"changeActiveStep(step)\">\n        {{index + 1}}. {{step.title | async}}\n      </button>\n    </ng-container>\n  </clr-dropdown-menu>\n</clr-dropdown>\n" }]
+        }], propDecorators: { _steps: [{
+                type: Input,
+                args: ['clrSteps']
+            }], _activeStep: [{
+                type: Input,
+                args: ['clrActiveStep']
+            }], _activeStepChange: [{
+                type: Output,
+                args: ['clrActiveStepChange']
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -703,13 +798,17 @@ ClrFlowBar.propDecorators = {
  */
 class ClrFlowBarModule {
 }
-ClrFlowBarModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [ClrFlowBar],
-                exports: [ClrFlowBar],
-            },] }
-];
+ClrFlowBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFlowBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrFlowBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrFlowBar] });
+ClrFlowBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFlowBarModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFlowBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [ClrFlowBar],
+                    exports: [ClrFlowBar],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018 Porsche Informatik. All Rights Reserved.
@@ -761,26 +860,44 @@ class ClrGenericQuickList {
         clearTimeout(this.timeout);
     }
 }
-ClrGenericQuickList.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-generic-quick-list',
-                host: { '[class.generic-quick-list]': 'true', '[class.clr-form-control]': 'true' },
-                template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <ng-content select=\".header-container\"></ng-content>\n\n  <ng-container *ngFor=\"let item of allItems\">\n    <div class=\"controls-wrapper\">\n      <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n        <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n      </div>\n      <button\n        *ngIf=\"!(readonly || readonly === '')\"\n        type=\"button\"\n        class=\"btn btn-icon btn-link btn-trash\"\n        [disabled]=\"required && allItems.length === 1\"\n        (click)=\"removeItem(item)\"\n      >\n        <clr-icon shape=\"trash\"></clr-icon>\n      </button>\n    </div>\n  </ng-container>\n\n  <button\n    *ngIf=\"!(readonly || readonly === '')\"\n    type=\"button\"\n    class=\"btn btn-link btn-sm btn-add\"\n    (click)=\"addItem()\"\n    [disabled]=\"!addPossible\"\n  >\n    {{addLabel}}\n  </button>\n</div>\n"
-            },] }
-];
-ClrGenericQuickList.propDecorators = {
-    allItems: [{ type: Input, args: ['clrAllItems',] }],
-    addLabel: [{ type: Input, args: ['clrAddLabel',] }],
-    addPossible: [{ type: Input, args: ['clrAddPossible',] }],
-    blankItem: [{ type: Input, args: ['clrBlankItem',] }],
-    controlClasses: [{ type: Input, args: ['clrControlClasses',] }],
-    required: [{ type: Input, args: ['clrMandatory',] }],
-    readonly: [{ type: Input }],
-    added: [{ type: Output, args: ['clrAdded',] }],
-    removed: [{ type: Output, args: ['clrRemoved',] }],
-    itemTemplate: [{ type: ContentChildren, args: [TemplateRef,] }],
-    itemRows: [{ type: ViewChildren, args: ['row',] }]
-};
+ClrGenericQuickList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrGenericQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrGenericQuickList, selector: "clr-generic-quick-list", inputs: { allItems: ["clrAllItems", "allItems"], addLabel: ["clrAddLabel", "addLabel"], addPossible: ["clrAddPossible", "addPossible"], blankItem: ["clrBlankItem", "blankItem"], controlClasses: ["clrControlClasses", "controlClasses"], required: ["clrMandatory", "required"], readonly: "readonly" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true" } }, queries: [{ propertyName: "itemTemplate", predicate: TemplateRef }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <ng-content select=\".header-container\"></ng-content>\n\n  <ng-container *ngFor=\"let item of allItems\">\n    <div class=\"controls-wrapper\">\n      <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n        <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n      </div>\n      <button\n        *ngIf=\"!(readonly || readonly === '')\"\n        type=\"button\"\n        class=\"btn btn-icon btn-link btn-trash\"\n        [disabled]=\"required && allItems.length === 1\"\n        (click)=\"removeItem(item)\"\n      >\n        <clr-icon shape=\"trash\"></clr-icon>\n      </button>\n    </div>\n  </ng-container>\n\n  <button\n    *ngIf=\"!(readonly || readonly === '')\"\n    type=\"button\"\n    class=\"btn btn-link btn-sm btn-add\"\n    (click)=\"addItem()\"\n    [disabled]=\"!addPossible\"\n  >\n    {{addLabel}}\n  </button>\n</div>\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrGenericQuickList, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-generic-quick-list', host: { '[class.generic-quick-list]': 'true', '[class.clr-form-control]': 'true' }, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <ng-content select=\".header-container\"></ng-content>\n\n  <ng-container *ngFor=\"let item of allItems\">\n    <div class=\"controls-wrapper\">\n      <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n        <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n      </div>\n      <button\n        *ngIf=\"!(readonly || readonly === '')\"\n        type=\"button\"\n        class=\"btn btn-icon btn-link btn-trash\"\n        [disabled]=\"required && allItems.length === 1\"\n        (click)=\"removeItem(item)\"\n      >\n        <clr-icon shape=\"trash\"></clr-icon>\n      </button>\n    </div>\n  </ng-container>\n\n  <button\n    *ngIf=\"!(readonly || readonly === '')\"\n    type=\"button\"\n    class=\"btn btn-link btn-sm btn-add\"\n    (click)=\"addItem()\"\n    [disabled]=\"!addPossible\"\n  >\n    {{addLabel}}\n  </button>\n</div>\n" }]
+        }], propDecorators: { allItems: [{
+                type: Input,
+                args: ['clrAllItems']
+            }], addLabel: [{
+                type: Input,
+                args: ['clrAddLabel']
+            }], addPossible: [{
+                type: Input,
+                args: ['clrAddPossible']
+            }], blankItem: [{
+                type: Input,
+                args: ['clrBlankItem']
+            }], controlClasses: [{
+                type: Input,
+                args: ['clrControlClasses']
+            }], required: [{
+                type: Input,
+                args: ['clrMandatory']
+            }], readonly: [{
+                type: Input
+            }], added: [{
+                type: Output,
+                args: ['clrAdded']
+            }], removed: [{
+                type: Output,
+                args: ['clrRemoved']
+            }], itemTemplate: [{
+                type: ContentChildren,
+                args: [TemplateRef]
+            }], itemRows: [{
+                type: ViewChildren,
+                args: ['row']
+            }] } });
 
 /*
  * Copyright (c) 2018 Porsche Informatik. All Rights Reserved.
@@ -789,13 +906,17 @@ ClrGenericQuickList.propDecorators = {
  */
 class ClrGenericQuickListModule {
 }
-ClrGenericQuickListModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule],
-                declarations: [ClrGenericQuickList],
-                exports: [ClrGenericQuickList],
-            },] }
-];
+ClrGenericQuickListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrGenericQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrGenericQuickListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrGenericQuickListModule, declarations: [ClrGenericQuickList], imports: [CommonModule, ClarityModule], exports: [ClrGenericQuickList] });
+ClrGenericQuickListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrGenericQuickListModule, imports: [[CommonModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrGenericQuickListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule],
+                    declarations: [ClrGenericQuickList],
+                    exports: [ClrGenericQuickList],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -828,21 +949,24 @@ class ClrLetterAvatar {
         }
     }
 }
-ClrLetterAvatar.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-letter-avatar',
-                template: "<div class=\"avatar-circle\">\n  <div #avatar class=\"avatar-initials\">{{getInitials()}}</div>\n</div>\n"
-            },] }
-];
-ClrLetterAvatar.ctorParameters = () => [
-    { type: Renderer2 }
-];
-ClrLetterAvatar.propDecorators = {
-    avatar: [{ type: HostBinding, args: ['class.clr-avatar',] }],
-    name: [{ type: Input, args: ['clrName',] }],
-    size: [{ type: Input, args: ['clrSize',] }],
-    avatarElement: [{ type: ViewChild, args: ['avatar', { static: true },] }]
-};
+ClrLetterAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLetterAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ClrLetterAvatar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrLetterAvatar, selector: "clr-letter-avatar", inputs: { name: ["clrName", "name"], size: ["clrSize", "size"] }, host: { properties: { "class.clr-avatar": "this.avatar" } }, viewQueries: [{ propertyName: "avatarElement", first: true, predicate: ["avatar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"avatar-circle\">\n  <div #avatar class=\"avatar-initials\">{{getInitials()}}</div>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLetterAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-letter-avatar', template: "<div class=\"avatar-circle\">\n  <div #avatar class=\"avatar-initials\">{{getInitials()}}</div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { avatar: [{
+                type: HostBinding,
+                args: ['class.clr-avatar']
+            }], name: [{
+                type: Input,
+                args: ['clrName']
+            }], size: [{
+                type: Input,
+                args: ['clrSize']
+            }], avatarElement: [{
+                type: ViewChild,
+                args: ['avatar', { static: true }]
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -851,13 +975,17 @@ ClrLetterAvatar.propDecorators = {
  */
 class ClrLetterAvatarModule {
 }
-ClrLetterAvatarModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule],
-                declarations: [ClrLetterAvatar],
-                exports: [ClrLetterAvatar],
-            },] }
-];
+ClrLetterAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLetterAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrLetterAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLetterAvatarModule, declarations: [ClrLetterAvatar], imports: [CommonModule, ClarityModule], exports: [ClrLetterAvatar] });
+ClrLetterAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLetterAvatarModule, imports: [[CommonModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLetterAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule],
+                    declarations: [ClrLetterAvatar],
+                    exports: [ClrLetterAvatar],
+                }]
+        }] });
 
 class ClrMainNavGroupItem {
     constructor(el, renderer) {
@@ -875,15 +1003,14 @@ class ClrMainNavGroupItem {
         this.el.nativeElement.blur();
     }
 }
-ClrMainNavGroupItem.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrMainNavGroupItem]',
-            },] }
-];
-ClrMainNavGroupItem.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
+ClrMainNavGroupItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMainNavGroupItem, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ClrMainNavGroupItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrMainNavGroupItem, selector: "[clrMainNavGroupItem]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMainNavGroupItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrMainNavGroupItem]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
 /*
  * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
@@ -1021,20 +1148,18 @@ class ClrMainNavGroup {
         setTimeout(() => this.items.toArray()[this.currentFocusedId].focus());
     }
 }
-ClrMainNavGroup.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-main-nav-group',
-                template: "<section\n  class=\"nav-link collapsible\"\n  (click)=\"onClick($event)\"\n  (keydown.enter)=\"onClick($event)\"\n  (keydown.space)=\"onClick($event)\"\n  [class.active]=\"isActive()\"\n  tabindex=\"0\"\n>\n  <input id=\"{{prefix}}{{id}}\" type=\"checkbox\" [checked]=\"isChecked()\" />\n  <label class=\"nav-text nav-trigger\" for=\"{{prefix}}{{id}}\">{{title}}<clr-icon shape=\"caret down\"></clr-icon></label>\n  <div class=\"nav-list dropdown-menu\">\n    <ng-content></ng-content>\n  </div>\n</section>\n",
-                host: { '[class.main-nav-group]': 'true' }
-            },] }
-];
-ClrMainNavGroup.ctorParameters = () => [
-    { type: Injector }
-];
-ClrMainNavGroup.propDecorators = {
-    title: [{ type: Input, args: ['clrTitle',] }],
-    items: [{ type: ContentChildren, args: [ClrMainNavGroupItem,] }]
-};
+ClrMainNavGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMainNavGroup, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ClrMainNavGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrMainNavGroup, selector: "clr-main-nav-group", inputs: { title: ["clrTitle", "title"] }, host: { properties: { "class.main-nav-group": "true" } }, queries: [{ propertyName: "items", predicate: ClrMainNavGroupItem }], ngImport: i0, template: "<section\n  class=\"nav-link collapsible\"\n  (click)=\"onClick($event)\"\n  (keydown.enter)=\"onClick($event)\"\n  (keydown.space)=\"onClick($event)\"\n  [class.active]=\"isActive()\"\n  tabindex=\"0\"\n>\n  <input id=\"{{prefix}}{{id}}\" type=\"checkbox\" [checked]=\"isChecked()\" />\n  <label class=\"nav-text nav-trigger\" for=\"{{prefix}}{{id}}\">{{title}}<clr-icon shape=\"caret down\"></clr-icon></label>\n  <div class=\"nav-list dropdown-menu\">\n    <ng-content></ng-content>\n  </div>\n</section>\n", directives: [{ type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMainNavGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-main-nav-group', host: { '[class.main-nav-group]': 'true' }, template: "<section\n  class=\"nav-link collapsible\"\n  (click)=\"onClick($event)\"\n  (keydown.enter)=\"onClick($event)\"\n  (keydown.space)=\"onClick($event)\"\n  [class.active]=\"isActive()\"\n  tabindex=\"0\"\n>\n  <input id=\"{{prefix}}{{id}}\" type=\"checkbox\" [checked]=\"isChecked()\" />\n  <label class=\"nav-text nav-trigger\" for=\"{{prefix}}{{id}}\">{{title}}<clr-icon shape=\"caret down\"></clr-icon></label>\n  <div class=\"nav-list dropdown-menu\">\n    <ng-content></ng-content>\n  </div>\n</section>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { title: [{
+                type: Input,
+                args: ['clrTitle']
+            }], items: [{
+                type: ContentChildren,
+                args: [ClrMainNavGroupItem]
+            }] } });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -1043,13 +1168,17 @@ ClrMainNavGroup.propDecorators = {
  */
 class ClrMainNavGroupModule {
 }
-ClrMainNavGroupModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, RouterModule, ClarityModule],
-                declarations: [ClrMainNavGroup, ClrMainNavGroupItem],
-                exports: [ClrMainNavGroup, ClrMainNavGroupItem],
-            },] }
-];
+ClrMainNavGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMainNavGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrMainNavGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMainNavGroupModule, declarations: [ClrMainNavGroup, ClrMainNavGroupItem], imports: [CommonModule, RouterModule, ClarityModule], exports: [ClrMainNavGroup, ClrMainNavGroupItem] });
+ClrMainNavGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMainNavGroupModule, imports: [[CommonModule, RouterModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMainNavGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, RouterModule, ClarityModule],
+                    declarations: [ClrMainNavGroup, ClrMainNavGroupItem],
+                    exports: [ClrMainNavGroup, ClrMainNavGroupItem],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -1119,15 +1248,18 @@ class ClrRequiredOneMultilang {
         return this._active ? ClrMultilingualInputValidators.requiredOne()(control) : null;
     }
 }
-ClrRequiredOneMultilang.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrRequiredOneMultilang]',
-                providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredOneMultilang, multi: true }],
-            },] }
-];
-ClrRequiredOneMultilang.propDecorators = {
-    active: [{ type: Input, args: ['clrRequiredOneMultilang',] }]
-};
+ClrRequiredOneMultilang.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrRequiredOneMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrRequiredOneMultilang.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrRequiredOneMultilang, selector: "[clrRequiredOneMultilang]", inputs: { active: ["clrRequiredOneMultilang", "active"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredOneMultilang, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrRequiredOneMultilang, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrRequiredOneMultilang]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredOneMultilang, multi: true }],
+                }]
+        }], propDecorators: { active: [{
+                type: Input,
+                args: ['clrRequiredOneMultilang']
+            }] } });
 class ClrRequiredAllMultilang {
     set active(active) {
         this._active = active != null && active !== false && `${active}` !== 'false';
@@ -1136,35 +1268,76 @@ class ClrRequiredAllMultilang {
         return this._active ? ClrMultilingualInputValidators.requiredAll()(control) : null;
     }
 }
-ClrRequiredAllMultilang.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrRequiredAllMultilang]',
-                providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredAllMultilang, multi: true }],
-            },] }
-];
-ClrRequiredAllMultilang.propDecorators = {
-    active: [{ type: Input, args: ['clrRequiredAllMultilang',] }]
-};
+ClrRequiredAllMultilang.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrRequiredAllMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrRequiredAllMultilang.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrRequiredAllMultilang, selector: "[clrRequiredAllMultilang]", inputs: { active: ["clrRequiredAllMultilang", "active"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredAllMultilang, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrRequiredAllMultilang, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrRequiredAllMultilang]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredAllMultilang, multi: true }],
+                }]
+        }], propDecorators: { active: [{
+                type: Input,
+                args: ['clrRequiredAllMultilang']
+            }] } });
 
 /*
  * Copyright (c) 2018 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+let counter = 0;
+class ControlIdService {
+    constructor() {
+        this._id = 'clra-form-control-' + ++counter;
+        this._idChange = new BehaviorSubject(this._id);
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value;
+        this._idChange.next(value);
+    }
+    get idChange() {
+        return this._idChange.asObservable();
+    }
+}
+ControlIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ControlIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ControlIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ControlIdService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ControlIdService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Copyright (c) 2018 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+let instanceCount = 0;
+let origMarkAsTouched;
+const markedAsTouch = new Subject();
 class ClrAbstractFormComponent {
     constructor(injector) {
         this.injector = injector;
         this.formControl = true;
-        this.showError = false;
         this.disabled = false;
         this.invalid = false;
         this.destroyed = new Subject();
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onChange = (_) => { };
-        this.onTouch = this.defaultOnTouch;
+        this.onChange = (_) => {
+            /* empty default */
+        };
+        this.onTouch = () => {
+            /* empty default */
+        };
+        instanceCount++;
+        this.patchMarkAsTouched();
+    }
+    get showError() {
+        return this.invalid && this.control.touched;
     }
     ngOnInit() {
-        const controlIdService = this.injector.get(ɵbc, null);
+        const controlIdService = this.injector.get(ControlIdService, null);
         if (controlIdService) {
             this.inputId = controlIdService.id;
         }
@@ -1176,28 +1349,18 @@ class ClrAbstractFormComponent {
             this.control = ngControl.control;
             this.control.statusChanges.pipe(takeUntil(this.destroyed)).subscribe(status => {
                 this.invalid = status === 'INVALID';
-                this.showError = this.invalid && this.control.touched;
-            });
-        }
-        const markControlService = this.injector.get(ɵbi, null);
-        if (markControlService) {
-            markControlService.touchedChange.subscribe(() => {
-                this.control.markAsTouched();
-                this.control.updateValueAndValidity();
             });
         }
+        markedAsTouch.pipe(takeUntil(this.destroyed)).subscribe(() => {
+            this.control.markAsTouched();
+            this.control.updateValueAndValidity();
+        });
     }
     registerOnChange(fn) {
         this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouch = () => {
-            fn();
-            this.defaultOnTouch();
-        };
-    }
-    defaultOnTouch() {
-        this.showError = this.invalid && this.control.touched;
+        this.onTouch = fn;
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
@@ -1205,18 +1368,39 @@ class ClrAbstractFormComponent {
     ngOnDestroy() {
         this.destroyed.next();
         this.destroyed.complete();
+        instanceCount--;
+        this.unpatchMarkAsTouched();
+    }
+    /**
+     * Patch markAsTouched method of ClrForm to get recognized when touched programmatically.
+     * No other way found to accomplish the same thing.
+     */
+    patchMarkAsTouched() {
+        if (instanceCount === 1) {
+            origMarkAsTouched = ClrForm.prototype.markAsTouched;
+            ClrForm.prototype.markAsTouched = function () {
+                markedAsTouch.next();
+                origMarkAsTouched.call(this);
+            };
+        }
+    }
+    unpatchMarkAsTouched() {
+        if (instanceCount === 0 && origMarkAsTouched) {
+            ClrForm.prototype.markAsTouched = origMarkAsTouched;
+        }
     }
 }
-ClrAbstractFormComponent.decorators = [
-    { type: Directive }
-];
-ClrAbstractFormComponent.ctorParameters = () => [
-    { type: Injector }
-];
-ClrAbstractFormComponent.propDecorators = {
-    formControl: [{ type: HostBinding, args: ['class.clr-form-control',] }],
-    showError: [{ type: HostBinding, args: ['class.clr-error',] }]
-};
+ClrAbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAbstractFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+ClrAbstractFormComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrAbstractFormComponent, host: { properties: { "class.clr-form-control": "this.formControl", "class.clr-error": "this.showError" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAbstractFormComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { formControl: [{
+                type: HostBinding,
+                args: ['class.clr-form-control']
+            }], showError: [{
+                type: HostBinding,
+                args: ['class.clr-error']
+            }] } });
 
 /*
  * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
@@ -1250,87 +1434,38 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
         });
     }
 }
-ClrMultilingualAbstract.decorators = [
-    { type: Directive }
-];
-ClrMultilingualAbstract.ctorParameters = () => [
-    { type: Injector }
-];
-ClrMultilingualAbstract.propDecorators = {
-    multi: [{ type: HostBinding, args: ['class.clr-multilingual',] }],
-    controlClasses: [{ type: Input, args: ['clrControlClasses',] }],
-    selectedLang: [{ type: Input, args: ['clrSelectedLang',] }],
-    readonly: [{ type: Input }],
-    maxlength: [{ type: Input }],
-    showSingleLanguageSelector: [{ type: Input, args: ['clrShowSingleLanguageSelector',] }],
-    inputElement: [{ type: ViewChild, args: ['input',] }]
-};
-
-/*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClrMultilingualInput extends ClrMultilingualAbstract {
-    constructor(injector) {
-        super(injector);
-    }
-}
-ClrMultilingualInput.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-multilingual-input',
-                template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"texts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-input-wrapper\">\n      <input\n        class=\"clr-input\"\n        type=\"text\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!texts && !!selectedLang ? texts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        autocomplete=\"off\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      />\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => ClrMultilingualInput),
-                        multi: true,
-                    },
-                    ɵbc,
-                ]
-            },] }
-];
-ClrMultilingualInput.ctorParameters = () => [
-    { type: Injector }
-];
-
-/*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClrMultilingualTextarea extends ClrMultilingualAbstract {
-    constructor(injector) {
-        super(injector);
-    }
-}
-ClrMultilingualTextarea.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-multilingual-textarea',
-                template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"texts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-textarea-wrapper\">\n      <textarea\n        class=\"clr-textarea\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!texts && !!selectedLang ? texts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      ></textarea>\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => ClrMultilingualTextarea),
-                        multi: true,
-                    },
-                    ɵbc,
-                ]
-            },] }
-];
-ClrMultilingualTextarea.ctorParameters = () => [
-    { type: Injector }
-];
+ClrMultilingualAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualAbstract, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+ClrMultilingualAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrMultilingualAbstract, inputs: { controlClasses: ["clrControlClasses", "controlClasses"], selectedLang: ["clrSelectedLang", "selectedLang"], readonly: "readonly", maxlength: "maxlength", showSingleLanguageSelector: ["clrShowSingleLanguageSelector", "showSingleLanguageSelector"] }, host: { properties: { "class.clr-multilingual": "this.multi" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { multi: [{
+                type: HostBinding,
+                args: ['class.clr-multilingual']
+            }], controlClasses: [{
+                type: Input,
+                args: ['clrControlClasses']
+            }], selectedLang: [{
+                type: Input,
+                args: ['clrSelectedLang']
+            }], readonly: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], showSingleLanguageSelector: [{
+                type: Input,
+                args: ['clrShowSingleLanguageSelector']
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
 
 class ClrMultilingualSelector {
     constructor() {
         this.selectedLangChange = new EventEmitter();
     }
 }
-ClrMultilingualSelector.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-multilingual-selector',
-                template: `
+ClrMultilingualSelector.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrMultilingualSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: { disabled: "disabled", texts: "texts", selectedLang: "selectedLang" }, outputs: { selectedLangChange: "selectedLangChange" }, ngImport: i0, template: `
     <div>
       <clr-dropdown [clrCloseMenuOnItemClick]="true">
         <button
@@ -1357,15 +1492,111 @@ ClrMultilingualSelector.decorators = [
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
-  `
-            },] }
-];
-ClrMultilingualSelector.propDecorators = {
-    disabled: [{ type: Input }],
-    texts: [{ type: Input }],
-    selectedLang: [{ type: Input }],
-    selectedLangChange: [{ type: Output }]
-};
+  `, isInline: true, components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "keyvalue": i2.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-multilingual-selector',
+                    template: `
+    <div>
+      <clr-dropdown [clrCloseMenuOnItemClick]="true">
+        <button
+          type="button"
+          class="btn btn-outline btn-sm clr-multilingual-button"
+          clrDropdownTrigger
+          [disabled]="disabled"
+        >
+          {{ selectedLang }}
+          <clr-icon shape="caret down"></clr-icon>
+        </button>
+        <clr-dropdown-menu *clrIfOpen>
+          <ng-container *ngFor="let text of texts | keyvalue">
+            <div
+              *ngIf="text.key !== selectedLang"
+              class="clr-multilingual-dd-entry"
+              clrDropdownItem
+              (click)="selectedLangChange.emit(text.key)"
+            >
+              <span class="label">{{ text.key }}</span
+              >{{ text.value }}
+            </div>
+          </ng-container>
+        </clr-dropdown-menu>
+      </clr-dropdown>
+    </div>
+  `,
+                }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], texts: [{
+                type: Input
+            }], selectedLang: [{
+                type: Input
+            }], selectedLangChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrMultilingualInput extends ClrMultilingualAbstract {
+    constructor(injector) {
+        super(injector);
+    }
+}
+ClrMultilingualInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualInput, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ClrMultilingualInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrMultilingualInput, selector: "clr-multilingual-input", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ClrMultilingualInput),
+            multi: true,
+        },
+        ControlIdService,
+    ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"texts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-input-wrapper\">\n      <input\n        class=\"clr-input\"\n        type=\"text\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!texts && !!selectedLang ? texts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        autocomplete=\"off\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      />\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n", components: [{ type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-multilingual-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ClrMultilingualInput),
+                            multi: true,
+                        },
+                        ControlIdService,
+                    ], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"texts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-input-wrapper\">\n      <input\n        class=\"clr-input\"\n        type=\"text\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!texts && !!selectedLang ? texts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        autocomplete=\"off\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      />\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+/*
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrMultilingualTextarea extends ClrMultilingualAbstract {
+    constructor(injector) {
+        super(injector);
+    }
+}
+ClrMultilingualTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualTextarea, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrMultilingualTextarea, selector: "clr-multilingual-textarea", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ClrMultilingualTextarea),
+            multi: true,
+        },
+        ControlIdService,
+    ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"texts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-textarea-wrapper\">\n      <textarea\n        class=\"clr-textarea\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!texts && !!selectedLang ? texts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      ></textarea>\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n", components: [{ type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-multilingual-textarea', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ClrMultilingualTextarea),
+                            multi: true,
+                        },
+                        ControlIdService,
+                    ], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <clr-multilingual-selector\n    *ngIf=\"showLanguageSelector()\"\n    [disabled]=\"disabled\"\n    [texts]=\"texts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-textarea-wrapper\">\n      <textarea\n        class=\"clr-textarea\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!texts && !!selectedLang ? texts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      ></textarea>\n      <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n    </div>\n    <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n    <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 /*
  * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
@@ -1374,25 +1605,37 @@ ClrMultilingualSelector.propDecorators = {
  */
 class ClrMultilingualModule {
 }
-ClrMultilingualModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [
-                    ClrMultilingualInput,
-                    ClrMultilingualTextarea,
-                    ClrRequiredOneMultilang,
-                    ClrRequiredAllMultilang,
-                    ClrMultilingualSelector,
-                ],
-                exports: [
-                    ClrMultilingualInput,
-                    ClrMultilingualTextarea,
-                    ClrRequiredOneMultilang,
-                    ClrRequiredAllMultilang,
-                    ClrMultilingualSelector,
-                ],
-            },] }
-];
+ClrMultilingualModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrMultilingualModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualModule, declarations: [ClrMultilingualInput,
+        ClrMultilingualTextarea,
+        ClrRequiredOneMultilang,
+        ClrRequiredAllMultilang,
+        ClrMultilingualSelector], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrMultilingualInput,
+        ClrMultilingualTextarea,
+        ClrRequiredOneMultilang,
+        ClrRequiredAllMultilang,
+        ClrMultilingualSelector] });
+ClrMultilingualModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMultilingualModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [
+                        ClrMultilingualInput,
+                        ClrMultilingualTextarea,
+                        ClrRequiredOneMultilang,
+                        ClrRequiredAllMultilang,
+                        ClrMultilingualSelector,
+                    ],
+                    exports: [
+                        ClrMultilingualInput,
+                        ClrMultilingualTextarea,
+                        ClrRequiredOneMultilang,
+                        ClrRequiredAllMultilang,
+                        ClrMultilingualSelector,
+                    ],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -1513,61 +1756,81 @@ class ClrNotification {
         zonedTimer(300, this.ngZone).subscribe(() => (this.state = { value: 'currentPosition', params: { absolute: this._translate } }));
     }
 }
-ClrNotification.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-notification',
-                template: "<div class=\"notification__wrapper\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n  <div class=\"progress top\" [ngClass]=\"notificationType\" *ngIf=\"progressbar && timeout > 0\">\n    <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\"></progress>\n  </div>\n  <clr-alert\n    [clrAlertType]=\"notificationType\"\n    [clrAlertAppLevel]=\"true\"\n    [clrAlertClosable]=\"dismissable\"\n    (clrAlertClosedChange)=\"close()\"\n  >\n    <div class=\"alert-item\">\n      <span class=\"alert-text\">\n        <ng-content select=\"[clr-notification-message]\"></ng-content>\n      </span>\n    </div>\n  </clr-alert>\n</div>\n",
-                animations: [
-                    trigger('slideDown', [
-                        transition(':enter', [
-                            style({ transform: 'translateY(-200%)' }),
-                            animate('0.5s', style({ transform: 'translateY(0%)' })),
+ClrNotification.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotification, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ClrNotification.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrNotification, selector: "clr-notification", inputs: { timeout: "timeout", notificationType: "notificationType", dismissable: "dismissable", progressbar: "progressbar" }, outputs: { closed: "closed" }, host: { properties: { "class.notification": "true" } }, viewQueries: [{ propertyName: "clrAlert", first: true, predicate: ClrAlert, descendants: true, static: true }], ngImport: i0, template: "<div class=\"notification__wrapper\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n  <div class=\"progress top\" [ngClass]=\"notificationType\" *ngIf=\"progressbar && timeout > 0\">\n    <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\"></progress>\n  </div>\n  <clr-alert\n    [clrAlertType]=\"notificationType\"\n    [clrAlertAppLevel]=\"true\"\n    [clrAlertClosable]=\"dismissable\"\n    (clrAlertClosedChange)=\"close()\"\n  >\n    <div class=\"alert-item\">\n      <span class=\"alert-text\">\n        <ng-content select=\"[clr-notification-message]\"></ng-content>\n      </span>\n    </div>\n  </clr-alert>\n</div>\n", components: [{ type: i1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertClosed", "clrAlertType", "clrAlertIcon"], outputs: ["clrAlertClosedChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.ClrAlertText, selector: ".alert-text" }], animations: [
+        trigger('slideDown', [
+            transition(':enter', [
+                style({ transform: 'translateY(-200%)' }),
+                animate('0.5s', style({ transform: 'translateY(0%)' })),
+            ]),
+        ]),
+        trigger('move', [
+            state('currentPosition', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
+            state('moveUp', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
+            state('moveDown', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
+            transition('* => moveDown', animate('0.3s')),
+            transition('* => moveUp', animate('0.3s')),
+        ]),
+        trigger('fade', [
+            state('fadeOut', style({ transform: 'translateY({{absolute}}px)', opacity: 0 }), { params: { absolute: '0' } }),
+            transition('* => fadeOut', animate('0.3s')),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotification, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-notification', animations: [
+                        trigger('slideDown', [
+                            transition(':enter', [
+                                style({ transform: 'translateY(-200%)' }),
+                                animate('0.5s', style({ transform: 'translateY(0%)' })),
+                            ]),
                         ]),
-                    ]),
-                    trigger('move', [
-                        state('currentPosition', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
-                        state('moveUp', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
-                        state('moveDown', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
-                        transition('* => moveDown', animate('0.3s')),
-                        transition('* => moveUp', animate('0.3s')),
-                    ]),
-                    trigger('fade', [
-                        state('fadeOut', style({ transform: 'translateY({{absolute}}px)', opacity: 0 }), { params: { absolute: '0' } }),
-                        transition('* => fadeOut', animate('0.3s')),
-                    ]),
-                ],
-                host: {
-                    '[class.notification]': 'true',
-                }
-            },] }
-];
-ClrNotification.ctorParameters = () => [
-    { type: ElementRef },
-    { type: NgZone }
-];
-ClrNotification.propDecorators = {
-    clrAlert: [{ type: ViewChild, args: [ClrAlert, { static: true },] }],
-    timeout: [{ type: Input }],
-    notificationType: [{ type: Input }],
-    dismissable: [{ type: Input }],
-    progressbar: [{ type: Input }],
-    closed: [{ type: Output }]
-};
+                        trigger('move', [
+                            state('currentPosition', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
+                            state('moveUp', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
+                            state('moveDown', style({ transform: 'translateY({{absolute}}px)' }), { params: { absolute: '0' } }),
+                            transition('* => moveDown', animate('0.3s')),
+                            transition('* => moveUp', animate('0.3s')),
+                        ]),
+                        trigger('fade', [
+                            state('fadeOut', style({ transform: 'translateY({{absolute}}px)', opacity: 0 }), { params: { absolute: '0' } }),
+                            transition('* => fadeOut', animate('0.3s')),
+                        ]),
+                    ], host: {
+                        '[class.notification]': 'true',
+                    }, template: "<div class=\"notification__wrapper\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n  <div class=\"progress top\" [ngClass]=\"notificationType\" *ngIf=\"progressbar && timeout > 0\">\n    <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\"></progress>\n  </div>\n  <clr-alert\n    [clrAlertType]=\"notificationType\"\n    [clrAlertAppLevel]=\"true\"\n    [clrAlertClosable]=\"dismissable\"\n    (clrAlertClosedChange)=\"close()\"\n  >\n    <div class=\"alert-item\">\n      <span class=\"alert-text\">\n        <ng-content select=\"[clr-notification-message]\"></ng-content>\n      </span>\n    </div>\n  </clr-alert>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { clrAlert: [{
+                type: ViewChild,
+                args: [ClrAlert, { static: true }]
+            }], timeout: [{
+                type: Input
+            }], notificationType: [{
+                type: Input
+            }], dismissable: [{
+                type: Input
+            }], progressbar: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrNotificationModule {
 }
-ClrNotificationModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [ClrNotification],
-                entryComponents: [ClrNotification],
-            },] }
-];
+ClrNotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrNotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotificationModule, declarations: [ClrNotification], imports: [CommonModule, ClarityModule, FormsModule] });
+ClrNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotificationModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [ClrNotification],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
@@ -1880,40 +2143,63 @@ class ClrNumericField {
         return Math[method](+(value * Math.pow(10, this.decimalPlaces)).toPrecision(16)) / Math.pow(10, this.decimalPlaces);
     }
 }
-ClrNumericField.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrNumeric]',
-                host: {
-                    '[class.text-right]': 'textAlign === "right"',
-                    '(change)': 'onChange(getValueForFormControl())',
-                    '(input)': 'onChange(getValueForFormControl())',
-                    '(blur)': 'onTouched()',
-                },
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => ClrNumericField),
-                        multi: true,
+ClrNumericField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNumericField, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClrNumericField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrNumericField, selector: "[clrNumeric]", inputs: { textAlign: ["clrTextAlign", "textAlign"], decimalPlaces: ["clrDecimalPlaces", "decimalPlaces"], roundValue: ["clrRoundDisplayValue", "roundValue"], autofillDecimals: ["clrAutofillDecimals", "autofillDecimals"], decimalSeparator: ["clrDecimalSep", "decimalSeparator"], groupingSeparator: ["clrGroupingSep", "groupingSeparator"], unitPosition: ["clrUnitPosition", "unitPosition"], numericValue: ["clrNumericValue", "numericValue"], unit: ["clrUnit", "unit"] }, outputs: { numericValueChanged: "clrNumericValueChange" }, host: { listeners: { "change": "onChange(getValueForFormControl())", "input": "onChange(getValueForFormControl())", "blur": "onTouched()" }, properties: { "class.text-right": "textAlign === \"right\"" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ClrNumericField),
+            multi: true,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNumericField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrNumeric]',
+                    host: {
+                        '[class.text-right]': 'textAlign === "right"',
+                        '(change)': 'onChange(getValueForFormControl())',
+                        '(input)': 'onChange(getValueForFormControl())',
+                        '(blur)': 'onTouched()',
                     },
-                ],
-            },] }
-];
-ClrNumericField.ctorParameters = () => [
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-ClrNumericField.propDecorators = {
-    textAlign: [{ type: Input, args: ['clrTextAlign',] }],
-    decimalPlaces: [{ type: Input, args: ['clrDecimalPlaces',] }],
-    roundValue: [{ type: Input, args: ['clrRoundDisplayValue',] }],
-    autofillDecimals: [{ type: Input, args: ['clrAutofillDecimals',] }],
-    decimalSeparator: [{ type: Input, args: ['clrDecimalSep',] }],
-    groupingSeparator: [{ type: Input, args: ['clrGroupingSep',] }],
-    unitPosition: [{ type: Input, args: ['clrUnitPosition',] }],
-    numericValueChanged: [{ type: Output, args: ['clrNumericValueChange',] }],
-    numericValue: [{ type: Input, args: ['clrNumericValue',] }],
-    unit: [{ type: Input, args: ['clrUnit',] }]
-};
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ClrNumericField),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { textAlign: [{
+                type: Input,
+                args: ['clrTextAlign']
+            }], decimalPlaces: [{
+                type: Input,
+                args: ['clrDecimalPlaces']
+            }], roundValue: [{
+                type: Input,
+                args: ['clrRoundDisplayValue']
+            }], autofillDecimals: [{
+                type: Input,
+                args: ['clrAutofillDecimals']
+            }], decimalSeparator: [{
+                type: Input,
+                args: ['clrDecimalSep']
+            }], groupingSeparator: [{
+                type: Input,
+                args: ['clrGroupingSep']
+            }], unitPosition: [{
+                type: Input,
+                args: ['clrUnitPosition']
+            }], numericValueChanged: [{
+                type: Output,
+                args: ['clrNumericValueChange']
+            }], numericValue: [{
+                type: Input,
+                args: ['clrNumericValue']
+            }], unit: [{
+                type: Input,
+                args: ['clrUnit']
+            }] } });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -2006,17 +2292,24 @@ class ClrMaxNumeric {
         return ClrNumericFieldValidators.max(this._max, this._groupingSep, this._decimalSep)(control);
     }
 }
-ClrMaxNumeric.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrMaxNumeric]',
-                providers: [{ provide: NG_VALIDATORS, useExisting: ClrMaxNumeric, multi: true }],
-            },] }
-];
-ClrMaxNumeric.propDecorators = {
-    _max: [{ type: Input, args: ['clrMaxNumeric',] }],
-    _groupingSep: [{ type: Input, args: ['clrGroupingSep',] }],
-    _decimalSep: [{ type: Input, args: ['clrDecimalSep',] }]
-};
+ClrMaxNumeric.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMaxNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrMaxNumeric.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrMaxNumeric, selector: "[clrMaxNumeric]", inputs: { _max: ["clrMaxNumeric", "_max"], _groupingSep: ["clrGroupingSep", "_groupingSep"], _decimalSep: ["clrDecimalSep", "_decimalSep"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrMaxNumeric, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMaxNumeric, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrMaxNumeric]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: ClrMaxNumeric, multi: true }],
+                }]
+        }], propDecorators: { _max: [{
+                type: Input,
+                args: ['clrMaxNumeric']
+            }], _groupingSep: [{
+                type: Input,
+                args: ['clrGroupingSep']
+            }], _decimalSep: [{
+                type: Input,
+                args: ['clrDecimalSep']
+            }] } });
 class ClrMinNumeric {
     constructor() {
         this._groupingSep = '.';
@@ -2026,17 +2319,24 @@ class ClrMinNumeric {
         return ClrNumericFieldValidators.min(this._min, this._groupingSep, this._decimalSep)(control);
     }
 }
-ClrMinNumeric.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrMinNumeric]',
-                providers: [{ provide: NG_VALIDATORS, useExisting: ClrMinNumeric, multi: true }],
-            },] }
-];
-ClrMinNumeric.propDecorators = {
-    _min: [{ type: Input, args: ['clrMinNumeric',] }],
-    _groupingSep: [{ type: Input, args: ['clrGroupingSep',] }],
-    _decimalSep: [{ type: Input, args: ['clrDecimalSep',] }]
-};
+ClrMinNumeric.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMinNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrMinNumeric.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrMinNumeric, selector: "[clrMinNumeric]", inputs: { _min: ["clrMinNumeric", "_min"], _groupingSep: ["clrGroupingSep", "_groupingSep"], _decimalSep: ["clrDecimalSep", "_decimalSep"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrMinNumeric, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrMinNumeric, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrMinNumeric]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: ClrMinNumeric, multi: true }],
+                }]
+        }], propDecorators: { _min: [{
+                type: Input,
+                args: ['clrMinNumeric']
+            }], _groupingSep: [{
+                type: Input,
+                args: ['clrGroupingSep']
+            }], _decimalSep: [{
+                type: Input,
+                args: ['clrDecimalSep']
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2045,46 +2345,17 @@ ClrMinNumeric.propDecorators = {
  */
 class ClrNumericFieldModule {
 }
-ClrNumericFieldModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
-                declarations: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric],
-                exports: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric],
-            },] }
-];
-
-/*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClrPagedSearchResultList {
-    constructor() {
-        /**
-         * The position of the pager
-         */
-        this.clrPagerPosition = 'bottom';
-        /**
-         * Triggered whenever a page change occurs.
-         */
-        this.pageChange = new EventEmitter();
-    }
-}
-ClrPagedSearchResultList.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-paged-search-result-list',
-                template: "<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-top\"\n    *ngIf=\"clrPagerPosition === 'top' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n<ng-container *ngFor=\"let item of items\" [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  <div *ngIf=\"!itemTemplate\">Item template input is undefined!</div>\n</ng-container>\n<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-bottom\"\n    *ngIf=\"clrPagerPosition === 'bottom' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n"
-            },] }
-];
-ClrPagedSearchResultList.propDecorators = {
-    pageSize: [{ type: Input, args: ['clrPageSize',] }],
-    currentPage: [{ type: Input, args: ['clrPage',] }],
-    totalItems: [{ type: Input, args: ['clrTotalItems',] }],
-    items: [{ type: Input, args: ['clrItems',] }],
-    itemTemplate: [{ type: ContentChild, args: [TemplateRef, { static: true },] }],
-    clrPagerPosition: [{ type: Input, args: ['clrPagerPosition',] }],
-    pageChange: [{ type: Output, args: ['clrPageChange',] }]
-};
+ClrNumericFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNumericFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrNumericFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNumericFieldModule, declarations: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric], imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule], exports: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric] });
+ClrNumericFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNumericFieldModule, imports: [[CommonModule, ClarityModule, ClrFormsModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNumericFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
+                    declarations: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric],
+                    exports: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2195,20 +2466,72 @@ class ClrPager {
         return middlePages;
     }
 }
-ClrPager.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-pager',
-                template: "<div class=\"btn-group\" *ngIf=\"last > 1\">\n  <button class=\"btn pagination-previous\" (click)=\"previous()\" [disabled]=\"page == 1\">\n    <clr-icon shape=\"angle left\"></clr-icon>\n  </button>\n  <button *ngIf=\"page > 2\" class=\"btn\" (click)=\"page = 1\">1</button>\n  <button *ngIf=\"page > 3\" class=\"btn\" disabled>...</button>\n\n  <ng-container *ngFor=\"let pageNum of middlePages\">\n    <button *ngIf=\"pageNum !== page; else activePage\" class=\"btn\" (click)=\"page = pageNum\">{{pageNum}}</button>\n    <ng-template #activePage>\n      <button class=\"btn btn-primary\" type=\"button\">{{pageNum}}</button>\n    </ng-template>\n  </ng-container>\n\n  <button *ngIf=\"page < last - 2\" class=\"btn\" disabled>...</button>\n  <button *ngIf=\"page < last - 1\" class=\"btn\" (click)=\"page = last\">{{last}}</button>\n  <button class=\"btn pagination-next\" (click)=\"next()\" [disabled]=\"page == last\">\n    <clr-icon shape=\"angle right\"></clr-icon>\n  </button>\n</div>\n",
-                host: { '[class.pager]': 'true' }
-            },] }
-];
-ClrPager.propDecorators = {
-    pageChange: [{ type: Output, args: ['clrPageChange',] }],
-    pageSize: [{ type: Input, args: ['clrPageSize',] }],
-    totalItems: [{ type: Input, args: ['clrTotalItems',] }],
-    last: [{ type: Input, args: ['clrLast',] }],
-    page: [{ type: Input, args: ['clrPage',] }]
-};
+ClrPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrPager, selector: "clr-pager", inputs: { pageSize: ["clrPageSize", "pageSize"], totalItems: ["clrTotalItems", "totalItems"], last: ["clrLast", "last"], page: ["clrPage", "page"] }, outputs: { pageChange: "clrPageChange" }, host: { properties: { "class.pager": "true" } }, ngImport: i0, template: "<div class=\"btn-group\" *ngIf=\"last > 1\">\n  <button class=\"btn pagination-previous\" (click)=\"previous()\" [disabled]=\"page == 1\">\n    <clr-icon shape=\"angle left\"></clr-icon>\n  </button>\n  <button *ngIf=\"page > 2\" class=\"btn\" (click)=\"page = 1\">1</button>\n  <button *ngIf=\"page > 3\" class=\"btn\" disabled>...</button>\n\n  <ng-container *ngFor=\"let pageNum of middlePages\">\n    <button *ngIf=\"pageNum !== page; else activePage\" class=\"btn\" (click)=\"page = pageNum\">{{pageNum}}</button>\n    <ng-template #activePage>\n      <button class=\"btn btn-primary\" type=\"button\">{{pageNum}}</button>\n    </ng-template>\n  </ng-container>\n\n  <button *ngIf=\"page < last - 2\" class=\"btn\" disabled>...</button>\n  <button *ngIf=\"page < last - 1\" class=\"btn\" (click)=\"page = last\">{{last}}</button>\n  <button class=\"btn pagination-next\" (click)=\"next()\" [disabled]=\"page == last\">\n    <clr-icon shape=\"angle right\"></clr-icon>\n  </button>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPager, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-pager', host: { '[class.pager]': 'true' }, template: "<div class=\"btn-group\" *ngIf=\"last > 1\">\n  <button class=\"btn pagination-previous\" (click)=\"previous()\" [disabled]=\"page == 1\">\n    <clr-icon shape=\"angle left\"></clr-icon>\n  </button>\n  <button *ngIf=\"page > 2\" class=\"btn\" (click)=\"page = 1\">1</button>\n  <button *ngIf=\"page > 3\" class=\"btn\" disabled>...</button>\n\n  <ng-container *ngFor=\"let pageNum of middlePages\">\n    <button *ngIf=\"pageNum !== page; else activePage\" class=\"btn\" (click)=\"page = pageNum\">{{pageNum}}</button>\n    <ng-template #activePage>\n      <button class=\"btn btn-primary\" type=\"button\">{{pageNum}}</button>\n    </ng-template>\n  </ng-container>\n\n  <button *ngIf=\"page < last - 2\" class=\"btn\" disabled>...</button>\n  <button *ngIf=\"page < last - 1\" class=\"btn\" (click)=\"page = last\">{{last}}</button>\n  <button class=\"btn pagination-next\" (click)=\"next()\" [disabled]=\"page == last\">\n    <clr-icon shape=\"angle right\"></clr-icon>\n  </button>\n</div>\n" }]
+        }], propDecorators: { pageChange: [{
+                type: Output,
+                args: ['clrPageChange']
+            }], pageSize: [{
+                type: Input,
+                args: ['clrPageSize']
+            }], totalItems: [{
+                type: Input,
+                args: ['clrTotalItems']
+            }], last: [{
+                type: Input,
+                args: ['clrLast']
+            }], page: [{
+                type: Input,
+                args: ['clrPage']
+            }] } });
+
+/*
+ * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrPagedSearchResultList {
+    constructor() {
+        /**
+         * The position of the pager
+         */
+        this.clrPagerPosition = 'bottom';
+        /**
+         * Triggered whenever a page change occurs.
+         */
+        this.pageChange = new EventEmitter();
+    }
+}
+ClrPagedSearchResultList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrPagedSearchResultList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrPagedSearchResultList, selector: "clr-paged-search-result-list", inputs: { pageSize: ["clrPageSize", "pageSize"], currentPage: ["clrPage", "currentPage"], totalItems: ["clrTotalItems", "totalItems"], items: ["clrItems", "items"], clrPagerPosition: "clrPagerPosition" }, outputs: { pageChange: "clrPageChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-top\"\n    *ngIf=\"clrPagerPosition === 'top' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n<ng-container *ngFor=\"let item of items\" [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  <div *ngIf=\"!itemTemplate\">Item template input is undefined!</div>\n</ng-container>\n<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-bottom\"\n    *ngIf=\"clrPagerPosition === 'bottom' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n", components: [{ type: ClrPager, selector: "clr-pager", inputs: ["clrPageSize", "clrTotalItems", "clrLast", "clrPage"], outputs: ["clrPageChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagedSearchResultList, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-paged-search-result-list', template: "<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-top\"\n    *ngIf=\"clrPagerPosition === 'top' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n<ng-container *ngFor=\"let item of items\" [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  <div *ngIf=\"!itemTemplate\">Item template input is undefined!</div>\n</ng-container>\n<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-bottom\"\n    *ngIf=\"clrPagerPosition === 'bottom' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n" }]
+        }], propDecorators: { pageSize: [{
+                type: Input,
+                args: ['clrPageSize']
+            }], currentPage: [{
+                type: Input,
+                args: ['clrPage']
+            }], totalItems: [{
+                type: Input,
+                args: ['clrTotalItems']
+            }], items: [{
+                type: Input,
+                args: ['clrItems']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: true }]
+            }], clrPagerPosition: [{
+                type: Input,
+                args: ['clrPagerPosition']
+            }], pageChange: [{
+                type: Output,
+                args: ['clrPageChange']
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2217,13 +2540,17 @@ ClrPager.propDecorators = {
  */
 class ClrPagerModule {
 }
-ClrPagerModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [ClrPager],
-                exports: [ClrPager],
-            },] }
-];
+ClrPagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrPagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagerModule, declarations: [ClrPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrPager] });
+ClrPagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagerModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [ClrPager],
+                    exports: [ClrPager],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2232,13 +2559,17 @@ ClrPagerModule.decorators = [
  */
 class ClrPagedSearchResultListModule {
 }
-ClrPagedSearchResultListModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule],
-                declarations: [ClrPagedSearchResultList],
-                exports: [ClrPagedSearchResultList],
-            },] }
-];
+ClrPagedSearchResultListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagedSearchResultListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrPagedSearchResultListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagedSearchResultListModule, declarations: [ClrPagedSearchResultList], imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule], exports: [ClrPagedSearchResultList] });
+ClrPagedSearchResultListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagedSearchResultListModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrPagerModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrPagedSearchResultListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule],
+                    declarations: [ClrPagedSearchResultList],
+                    exports: [ClrPagedSearchResultList],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2286,27 +2617,34 @@ class ClrProgressSpinnerComponent {
     }
 }
 ClrProgressSpinnerComponent.MINIMUM_VISIBLE_DURATION = 200;
-ClrProgressSpinnerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-progress-spinner',
-                template: `
+ClrProgressSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrProgressSpinnerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrProgressSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrProgressSpinnerComponent, selector: "clr-progress-spinner", inputs: { size: ["clrSize", "size"], showSpinner: ["clrShowSpinner", "showSpinner"] }, host: { properties: { "class.progress-spinner-overlay": "_showSpinner" } }, ngImport: i0, template: `
+    <ng-container *ngIf="_showSpinner">
+      <span [class]="'spinner-' + size + ' spinner'"></span>
+      <span>&nbsp;<ng-content></ng-content></span>
+    </ng-container>
+  `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-progress-spinner',
+                    template: `
     <ng-container *ngIf="_showSpinner">
       <span [class]="'spinner-' + size + ' spinner'"></span>
       <span>&nbsp;<ng-content></ng-content></span>
     </ng-container>
   `,
-                host: {
-                    '[class.progress-spinner-overlay]': '_showSpinner',
-                }
-            },] }
-];
-ClrProgressSpinnerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-ClrProgressSpinnerComponent.propDecorators = {
-    size: [{ type: Input, args: ['clrSize',] }],
-    showSpinner: [{ type: Input, args: ['clrShowSpinner',] }]
-};
+                    host: {
+                        '[class.progress-spinner-overlay]': '_showSpinner',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
+                type: Input,
+                args: ['clrSize']
+            }], showSpinner: [{
+                type: Input,
+                args: ['clrShowSpinner']
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2315,13 +2653,17 @@ ClrProgressSpinnerComponent.propDecorators = {
  */
 class ClrProgressSpinnerModule {
 }
-ClrProgressSpinnerModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                declarations: [ClrProgressSpinnerComponent],
-                exports: [ClrProgressSpinnerComponent],
-            },] }
-];
+ClrProgressSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrProgressSpinnerModule, declarations: [ClrProgressSpinnerComponent], imports: [CommonModule], exports: [ClrProgressSpinnerComponent] });
+ClrProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrProgressSpinnerModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrProgressSpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [ClrProgressSpinnerComponent],
+                    exports: [ClrProgressSpinnerComponent],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2362,25 +2704,33 @@ class ClrAddOption {
         !!this.select && this.select.nativeElement.focus();
     }
 }
-ClrAddOption.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-add-option',
-                template: "<div *ngIf=\"!(readonly || readonly === ''); else readonlyView\" class=\"clr-select-wrapper quick-list-input\">\n  <select #select clr-select class=\"quick-list-select\" name=\"options\" [(ngModel)]=\"selectedValue\" [disabled]=\"disabled\">\n    <option *ngIf=\"blankOption.id === selectedValue\" [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\">\n      {{blankOption.label}}\n    </option>\n    <option *ngFor=\"let val of getValues()\" [selected]=\"val.id === selectedValue\" [ngValue]=\"val.id\">\n      {{val.label}}\n    </option>\n  </select>\n</div>\n\n<ng-template #readonlyView>\n  <span>{{value.label}}</span>\n</ng-template>\n\n<button\n  *ngIf=\"!(readonly || readonly === '')\"\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-trash\"\n  [disabled]=\"trashDisabled() || disabled\"\n  (click)=\"remove.emit()\"\n>\n  <clr-icon shape=\"trash\"></clr-icon>\n</button>\n",
-                host: { '[class.quick-list-option]': 'true' }
-            },] }
-];
-ClrAddOption.propDecorators = {
-    blankOption: [{ type: Input }],
-    value: [{ type: Input }],
-    mandatory: [{ type: Input }],
-    allValues: [{ type: Input }],
-    excludedValues: [{ type: Input }],
-    readonly: [{ type: Input }],
-    disabled: [{ type: Input }],
-    valueChanged: [{ type: Output }],
-    remove: [{ type: Output }],
-    select: [{ type: ViewChild, args: ['select', { static: false },] }]
-};
+ClrAddOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAddOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrAddOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrAddOption, selector: "clr-add-option", inputs: { blankOption: "blankOption", value: "value", mandatory: "mandatory", allValues: "allValues", excludedValues: "excludedValues", readonly: "readonly", disabled: "disabled" }, outputs: { valueChanged: "valueChanged", remove: "remove" }, host: { properties: { "class.quick-list-option": "true" } }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!(readonly || readonly === ''); else readonlyView\" class=\"clr-select-wrapper quick-list-input\">\n  <select #select clr-select class=\"quick-list-select\" name=\"options\" [(ngModel)]=\"selectedValue\" [disabled]=\"disabled\">\n    <option *ngIf=\"blankOption.id === selectedValue\" [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\">\n      {{blankOption.label}}\n    </option>\n    <option *ngFor=\"let val of getValues()\" [selected]=\"val.id === selectedValue\" [ngValue]=\"val.id\">\n      {{val.label}}\n    </option>\n  </select>\n</div>\n\n<ng-template #readonlyView>\n  <span>{{value.label}}</span>\n</ng-template>\n\n<button\n  *ngIf=\"!(readonly || readonly === '')\"\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-trash\"\n  [disabled]=\"trashDisabled() || disabled\"\n  (click)=\"remove.emit()\"\n>\n  <clr-icon shape=\"trash\"></clr-icon>\n</button>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAddOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-add-option', host: { '[class.quick-list-option]': 'true' }, template: "<div *ngIf=\"!(readonly || readonly === ''); else readonlyView\" class=\"clr-select-wrapper quick-list-input\">\n  <select #select clr-select class=\"quick-list-select\" name=\"options\" [(ngModel)]=\"selectedValue\" [disabled]=\"disabled\">\n    <option *ngIf=\"blankOption.id === selectedValue\" [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\">\n      {{blankOption.label}}\n    </option>\n    <option *ngFor=\"let val of getValues()\" [selected]=\"val.id === selectedValue\" [ngValue]=\"val.id\">\n      {{val.label}}\n    </option>\n  </select>\n</div>\n\n<ng-template #readonlyView>\n  <span>{{value.label}}</span>\n</ng-template>\n\n<button\n  *ngIf=\"!(readonly || readonly === '')\"\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-trash\"\n  [disabled]=\"trashDisabled() || disabled\"\n  (click)=\"remove.emit()\"\n>\n  <clr-icon shape=\"trash\"></clr-icon>\n</button>\n" }]
+        }], propDecorators: { blankOption: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], mandatory: [{
+                type: Input
+            }], allValues: [{
+                type: Input
+            }], excludedValues: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], select: [{
+                type: ViewChild,
+                args: ['select', { static: false }]
+            }] } });
 
 /*
  * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
@@ -2448,50 +2798,75 @@ class ClrQuickList extends ClrAbstractFormComponent {
         return this.hasBlankOption() || this.values.length === this.allValues.length;
     }
 }
-ClrQuickList.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-quick-list',
-                host: { '[class.quick-list]': 'true' },
-                template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <ng-container *ngFor=\"let value of values; index as i\">\n    <clr-add-option\n      [allValues]=\"allValues\"\n      [excludedValues]=\"values\"\n      (remove)=\"onRemoveValue(i)\"\n      [value]=\"value\"\n      (valueChanged)=\"onValueChanged($event, i)\"\n      [blankOption]=\"blankOption\"\n      [mandatory]=\"mandatory\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n    >\n    </clr-add-option>\n  </ng-container>\n  <button\n    *ngIf=\"!(readonly || readonly === '')\"\n    type=\"button\"\n    class=\"btn btn-link btn-sm quick-list-add\"\n    (click)=\"addBlankOption()\"\n    [disabled]=\"addNotPossible() || disabled\"\n  >\n    {{addLabel}}\n  </button>\n</div>\n",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => ClrQuickList),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-ClrQuickList.propDecorators = {
-    blankOption: [{ type: Input, args: ['clrBlankOption',] }],
-    allValues: [{ type: Input, args: ['clrAllValues',] }],
-    mandatory: [{ type: Input, args: ['clrMandatory',] }],
-    values: [{ type: Input, args: ['clrValues',] }],
-    addLabel: [{ type: Input, args: ['clrAddLabel',] }],
-    controlClasses: [{ type: Input, args: ['clrControlClasses',] }],
-    readonly: [{ type: Input }],
-    valuesChanged: [{ type: Output, args: ['clrValuesChanged',] }],
-    emptyOptionAdded: [{ type: Output, args: ['clrEmptyOptionAdded',] }],
-    options: [{ type: ViewChildren, args: [ClrAddOption,] }]
-};
+ClrQuickList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrQuickList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ClrQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrQuickList, selector: "clr-quick-list", inputs: { blankOption: ["clrBlankOption", "blankOption"], allValues: ["clrAllValues", "allValues"], mandatory: ["clrMandatory", "mandatory"], values: ["clrValues", "values"], addLabel: ["clrAddLabel", "addLabel"], controlClasses: ["clrControlClasses", "controlClasses"], readonly: "readonly" }, outputs: { valuesChanged: "clrValuesChanged", emptyOptionAdded: "clrEmptyOptionAdded" }, host: { properties: { "class.quick-list": "true" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ClrQuickList),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "options", predicate: ClrAddOption, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <ng-container *ngFor=\"let value of values; index as i\">\n    <clr-add-option\n      [allValues]=\"allValues\"\n      [excludedValues]=\"values\"\n      (remove)=\"onRemoveValue(i)\"\n      [value]=\"value\"\n      (valueChanged)=\"onValueChanged($event, i)\"\n      [blankOption]=\"blankOption\"\n      [mandatory]=\"mandatory\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n    >\n    </clr-add-option>\n  </ng-container>\n  <button\n    *ngIf=\"!(readonly || readonly === '')\"\n    type=\"button\"\n    class=\"btn btn-link btn-sm quick-list-add\"\n    (click)=\"addBlankOption()\"\n    [disabled]=\"addNotPossible() || disabled\"\n  >\n    {{addLabel}}\n  </button>\n</div>\n", components: [{ type: ClrAddOption, selector: "clr-add-option", inputs: ["blankOption", "value", "mandatory", "allValues", "excludedValues", "readonly", "disabled"], outputs: ["valueChanged", "remove"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrQuickList, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-quick-list', host: { '[class.quick-list]': 'true' }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ClrQuickList),
+                            multi: true,
+                        },
+                    ], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <ng-container *ngFor=\"let value of values; index as i\">\n    <clr-add-option\n      [allValues]=\"allValues\"\n      [excludedValues]=\"values\"\n      (remove)=\"onRemoveValue(i)\"\n      [value]=\"value\"\n      (valueChanged)=\"onValueChanged($event, i)\"\n      [blankOption]=\"blankOption\"\n      [mandatory]=\"mandatory\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n    >\n    </clr-add-option>\n  </ng-container>\n  <button\n    *ngIf=\"!(readonly || readonly === '')\"\n    type=\"button\"\n    class=\"btn btn-link btn-sm quick-list-add\"\n    (click)=\"addBlankOption()\"\n    [disabled]=\"addNotPossible() || disabled\"\n  >\n    {{addLabel}}\n  </button>\n</div>\n" }]
+        }], propDecorators: { blankOption: [{
+                type: Input,
+                args: ['clrBlankOption']
+            }], allValues: [{
+                type: Input,
+                args: ['clrAllValues']
+            }], mandatory: [{
+                type: Input,
+                args: ['clrMandatory']
+            }], values: [{
+                type: Input,
+                args: ['clrValues']
+            }], addLabel: [{
+                type: Input,
+                args: ['clrAddLabel']
+            }], controlClasses: [{
+                type: Input,
+                args: ['clrControlClasses']
+            }], readonly: [{
+                type: Input
+            }], valuesChanged: [{
+                type: Output,
+                args: ['clrValuesChanged']
+            }], emptyOptionAdded: [{
+                type: Output,
+                args: ['clrEmptyOptionAdded']
+            }], options: [{
+                type: ViewChildren,
+                args: [ClrAddOption]
+            }] } });
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrQuickListModule {
 }
-ClrQuickListModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule],
-                declarations: [ClrQuickList, ClrAddOption],
-                exports: [ClrQuickList, ClrAddOption],
-            },] }
-];
+ClrQuickListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrQuickListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrQuickListModule, declarations: [ClrQuickList, ClrAddOption], imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule], exports: [ClrQuickList] });
+ClrQuickListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrQuickListModule, imports: [[CommonModule, FormsModule, ClarityModule, ClrFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrQuickListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule],
+                    declarations: [ClrQuickList, ClrAddOption],
+                    exports: [ClrQuickList],
+                }]
+        }] });
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -2574,17 +2949,15 @@ class ClrSearchField {
         }
     }
 }
-ClrSearchField.decorators = [
-    { type: Directive, args: [{
-                selector: '[clrSearch]',
-                host: { '[class.search-input]': 'true' },
-            },] }
-];
-ClrSearchField.ctorParameters = () => [
-    { type: Renderer2 },
-    { type: ElementRef },
-    { type: NgControl }
-];
+ClrSearchField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrSearchField, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i3$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+ClrSearchField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrSearchField, selector: "[clrSearch]", host: { properties: { "class.search-input": "true" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrSearchField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrSearch]',
+                    host: { '[class.search-input]': 'true' },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i3$1.NgControl }]; } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2593,16 +2966,20 @@ ClrSearchField.ctorParameters = () => [
  */
 class ClrSearchFieldModule {
 }
-ClrSearchFieldModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule],
-                declarations: [ClrSearchField],
-                exports: [ClrSearchField],
-            },] }
-];
+ClrSearchFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrSearchFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrSearchFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrSearchFieldModule, declarations: [ClrSearchField], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrSearchField] });
+ClrSearchFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrSearchFieldModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrSearchFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [ClrSearchField],
+                    exports: [ClrSearchField],
+                }]
+        }] });
 
 /*
- * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -2640,11 +3017,28 @@ class ClrTreetableActionOverflow {
         this.destroyed$.complete();
     }
 }
-ClrTreetableActionOverflow.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-tt-action-overflow',
-                providers: [ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService],
-                template: `
+ClrTreetableActionOverflow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableActionOverflow, deps: [{ token: i1.ClrPopoverToggleService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetableActionOverflow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrTreetableActionOverflow, selector: "clr-tt-action-overflow", inputs: { empty: "empty" }, host: { attributes: { "role": "cell" }, properties: { "class.treetable-row-actions": "true", "class.treetable-cell": "true" } }, providers: [ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService], ngImport: i0, template: `
+    <ng-container *ngIf="!empty">
+      <button class="treetable-action-trigger" clrPopoverAnchor clrPopoverOpenCloseButton>
+        <clr-icon shape="ellipsis-vertical"></clr-icon>
+      </button>
+      <div
+        class="datagrid-action-overflow"
+        clrFocusTrap
+        (click)="closeOverflowContent($event)"
+        *clrPopoverContent="false; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
+      >
+        <ng-content></ng-content>
+      </div>
+    </ng-container>
+  `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: i1.ÇlrClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { type: i1.ÇlrFocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-tt-action-overflow',
+                    providers: [ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService],
+                    template: `
     <ng-container *ngIf="!empty">
       <button class="treetable-action-trigger" clrPopoverAnchor clrPopoverOpenCloseButton>
         <clr-icon shape="ellipsis-vertical"></clr-icon>
@@ -2659,20 +3053,15 @@ ClrTreetableActionOverflow.decorators = [
       </div>
     </ng-container>
   `,
-                host: {
-                    '[class.treetable-row-actions]': 'true',
-                    '[class.treetable-cell]': 'true',
-                    role: 'cell',
-                }
-            },] }
-];
-ClrTreetableActionOverflow.ctorParameters = () => [
-    { type: ClrPopoverToggleService },
-    { type: NgZone }
-];
-ClrTreetableActionOverflow.propDecorators = {
-    empty: [{ type: Input }]
-};
+                    host: {
+                        '[class.treetable-row-actions]': 'true',
+                        '[class.treetable-cell]': 'true',
+                        role: 'cell',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ClrPopoverToggleService }, { type: i0.NgZone }]; }, propDecorators: { empty: [{
+                type: Input
+            }] } });
 
 /*
  * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
@@ -2719,37 +3108,52 @@ class ClrTreetableRow {
         return this.expandable;
     }
 }
-ClrTreetableRow.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-tt-row',
-                template: "<!--\n  ~ Copyright (c) 2018-2021 Porsche Informatik. 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  [ngClass]=\"{'clr-row-clickable': clickable && expandable}\"\n  class=\"clr-tt-node-content treetable-row\"\n  (click)=\"onRowClick($event)\"\n>\n  <ng-content select=\"clr-tt-action-overflow\"></ng-content>\n  <clr-tt-action-overflow *ngIf=\"showActionOverflow && showEmptyActionOverflow\" [empty]=\"true\"></clr-tt-action-overflow>\n  <div class=\"treetable-scrolling-cells\">\n    <div class=\"treetable-expandable-caret\" *ngIf=\"isExpandable()\">\n      <button type=\"button\" class=\"treetable-expandable-caret-button\" (click)=\"onCaretClick()\">\n        <clr-icon\n          shape=\"caret\"\n          [attr.dir]=\"expanded ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></clr-icon>\n      </button>\n    </div>\n\n    <ng-content select=\"clr-tt-cell\"></ng-content>\n  </div>\n</div>\n<div [@collapseExpandAnimation]=\"expanded\">\n  <ng-content select=\"clr-tt-row\"></ng-content>\n</div>\n",
-                host: { '[class.treetable-row-wrapper]': 'true' },
-                animations: [
-                    trigger('collapseExpandAnimation', [
-                        state('false', style({ display: 'none' })),
-                        state('true', style({ display: 'block' })),
-                        transition('false => true', [
-                            style({ opacity: 0, height: 0, overflow: 'hidden', display: 'block' }),
-                            animate('300ms', style({ opacity: 1, height: '*' })),
+ClrTreetableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableRow, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetableRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrTreetableRow, selector: "clr-tt-row", inputs: { expanded: ["clrExpanded", "expanded"], clickable: ["clrClickable", "clickable"], clrExpandable: "clrExpandable" }, outputs: { hasActionOverflow: "hasActionOverflow" }, host: { properties: { "class.treetable-row-wrapper": "true" } }, queries: [{ propertyName: "actionOverflow", first: true, predicate: ClrTreetableActionOverflow, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2018-2021 Porsche Informatik. 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  [ngClass]=\"{'clr-row-clickable': clickable && expandable}\"\n  class=\"clr-tt-node-content treetable-row\"\n  (click)=\"onRowClick($event)\"\n>\n  <ng-content select=\"clr-tt-action-overflow\"></ng-content>\n  <clr-tt-action-overflow *ngIf=\"showActionOverflow && showEmptyActionOverflow\" [empty]=\"true\"></clr-tt-action-overflow>\n  <div class=\"treetable-scrolling-cells\">\n    <div class=\"treetable-expandable-caret\" *ngIf=\"isExpandable()\">\n      <button type=\"button\" class=\"treetable-expandable-caret-button\" (click)=\"onCaretClick()\">\n        <clr-icon\n          shape=\"caret\"\n          [attr.dir]=\"expanded ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></clr-icon>\n      </button>\n    </div>\n\n    <ng-content select=\"clr-tt-cell\"></ng-content>\n  </div>\n</div>\n<div [@collapseExpandAnimation]=\"expanded\">\n  <ng-content select=\"clr-tt-row\"></ng-content>\n</div>\n", components: [{ type: ClrTreetableActionOverflow, selector: "clr-tt-action-overflow", inputs: ["empty"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }], animations: [
+        trigger('collapseExpandAnimation', [
+            state('false', style({ display: 'none' })),
+            state('true', style({ display: 'block' })),
+            transition('false => true', [
+                style({ opacity: 0, height: 0, overflow: 'hidden', display: 'block' }),
+                animate('300ms', style({ opacity: 1, height: '*' })),
+            ]),
+            transition('true => false', [
+                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 0, height: 0 })),
+            ]),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-tt-row', host: { '[class.treetable-row-wrapper]': 'true' }, animations: [
+                        trigger('collapseExpandAnimation', [
+                            state('false', style({ display: 'none' })),
+                            state('true', style({ display: 'block' })),
+                            transition('false => true', [
+                                style({ opacity: 0, height: 0, overflow: 'hidden', display: 'block' }),
+                                animate('300ms', style({ opacity: 1, height: '*' })),
+                            ]),
+                            transition('true => false', [
+                                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 0, height: 0 })),
+                            ]),
                         ]),
-                        transition('true => false', [
-                            style({ opacity: 1, height: '*', overflow: 'hidden' }),
-                            animate('300ms', style({ opacity: 0, height: 0 })),
-                        ]),
-                    ]),
-                ]
-            },] }
-];
-ClrTreetableRow.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-ClrTreetableRow.propDecorators = {
-    expanded: [{ type: Input, args: ['clrExpanded',] }],
-    clickable: [{ type: Input, args: ['clrClickable',] }],
-    clrExpandable: [{ type: Input, args: ['clrExpandable',] }],
-    hasActionOverflow: [{ type: Output }],
-    actionOverflow: [{ type: ContentChild, args: [ClrTreetableActionOverflow,] }]
-};
+                    ], template: "<!--\n  ~ Copyright (c) 2018-2021 Porsche Informatik. 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  [ngClass]=\"{'clr-row-clickable': clickable && expandable}\"\n  class=\"clr-tt-node-content treetable-row\"\n  (click)=\"onRowClick($event)\"\n>\n  <ng-content select=\"clr-tt-action-overflow\"></ng-content>\n  <clr-tt-action-overflow *ngIf=\"showActionOverflow && showEmptyActionOverflow\" [empty]=\"true\"></clr-tt-action-overflow>\n  <div class=\"treetable-scrolling-cells\">\n    <div class=\"treetable-expandable-caret\" *ngIf=\"isExpandable()\">\n      <button type=\"button\" class=\"treetable-expandable-caret-button\" (click)=\"onCaretClick()\">\n        <clr-icon\n          shape=\"caret\"\n          [attr.dir]=\"expanded ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></clr-icon>\n      </button>\n    </div>\n\n    <ng-content select=\"clr-tt-cell\"></ng-content>\n  </div>\n</div>\n<div [@collapseExpandAnimation]=\"expanded\">\n  <ng-content select=\"clr-tt-row\"></ng-content>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { expanded: [{
+                type: Input,
+                args: ['clrExpanded']
+            }], clickable: [{
+                type: Input,
+                args: ['clrClickable']
+            }], clrExpandable: [{
+                type: Input,
+                args: ['clrExpandable']
+            }], hasActionOverflow: [{
+                type: Output
+            }], actionOverflow: [{
+                type: ContentChild,
+                args: [ClrTreetableActionOverflow]
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2758,19 +3162,22 @@ ClrTreetableRow.propDecorators = {
  */
 class ClrTreetableColumn {
 }
-ClrTreetableColumn.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-tt-column',
-                template: '<ng-content></ng-content>',
-                host: {
-                    '[class.treetable-column]': 'true',
-                    role: 'columnheader',
-                }
-            },] }
-];
+ClrTreetableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrTreetableColumn, selector: "clr-tt-column", host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableColumn, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-tt-column',
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        '[class.treetable-column]': 'true',
+                        role: 'columnheader',
+                    },
+                }]
+        }] });
 
 /*
- * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -2817,19 +3224,23 @@ class ClrTreetable {
         this.destroyed$.complete();
     }
 }
-ClrTreetable.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-treetable',
-                template: "<!--\n  ~ Copyright (c) 2018-2021 Porsche Informatik. 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=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"hideHeader\">\n      <div *ngIf=\"hasActionOverflow\" class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\"></ng-content>\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      <ng-content select=\"clr-tt-row\"></ng-content>\n      <ng-content select=\"clr-tt-placeholder\"></ng-content>\n    </div>\n  </div>\n</div>\n",
-                host: { '[class.empty]': 'empty', '[class.treetable-host]': 'true' }
-            },] }
-];
-ClrTreetable.propDecorators = {
-    clrClickableRows: [{ type: Input }],
-    hideHeader: [{ type: Input, args: ['clrHideHeader',] }],
-    ttColumns: [{ type: ContentChildren, args: [ClrTreetableColumn, { descendants: true },] }],
-    ttRows: [{ type: ContentChildren, args: [ClrTreetableRow, { descendants: true },] }]
-};
+ClrTreetable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrTreetable, selector: "clr-treetable", inputs: { clrClickableRows: "clrClickableRows", hideHeader: ["clrHideHeader", "hideHeader"] }, host: { properties: { "class.empty": "empty", "class.treetable-host": "true" } }, queries: [{ propertyName: "ttColumns", predicate: ClrTreetableColumn, descendants: true }, { propertyName: "ttRows", predicate: ClrTreetableRow, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2018-2021 Porsche Informatik. 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=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"hideHeader\">\n      <div *ngIf=\"hasActionOverflow\" class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\"></ng-content>\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      <ng-content select=\"clr-tt-row\"></ng-content>\n      <ng-content select=\"clr-tt-placeholder\"></ng-content>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetable, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-treetable', host: { '[class.empty]': 'empty', '[class.treetable-host]': 'true' }, template: "<!--\n  ~ Copyright (c) 2018-2021 Porsche Informatik. 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=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"hideHeader\">\n      <div *ngIf=\"hasActionOverflow\" class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\"></ng-content>\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      <ng-content select=\"clr-tt-row\"></ng-content>\n      <ng-content select=\"clr-tt-placeholder\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { clrClickableRows: [{
+                type: Input
+            }], hideHeader: [{
+                type: Input,
+                args: ['clrHideHeader']
+            }], ttColumns: [{
+                type: ContentChildren,
+                args: [ClrTreetableColumn, { descendants: true }]
+            }], ttRows: [{
+                type: ContentChildren,
+                args: [ClrTreetableRow, { descendants: true }]
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2838,16 +3249,19 @@ ClrTreetable.propDecorators = {
  */
 class ClrTreetableCell {
 }
-ClrTreetableCell.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-tt-cell',
-                template: '<ng-content></ng-content>',
-                host: {
-                    '[class.treetable-cell]': 'true',
-                    role: 'cell',
-                }
-            },] }
-];
+ClrTreetableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrTreetableCell, selector: "clr-tt-cell", host: { attributes: { "role": "cell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableCell, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-tt-cell',
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        '[class.treetable-cell]': 'true',
+                        role: 'cell',
+                    },
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2856,18 +3270,26 @@ ClrTreetableCell.decorators = [
  */
 class ClrTreetablePlaceholder {
 }
-ClrTreetablePlaceholder.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-tt-placeholder',
-                template: `
+ClrTreetablePlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetablePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetablePlaceholder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrTreetablePlaceholder, selector: "clr-tt-placeholder", host: { properties: { "class.treetable-placeholder-container": "true" } }, ngImport: i0, template: `
+    <div class="treetable-placeholder treetable-empty">
+      <div class="treetable-placeholder-image"></div>
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetablePlaceholder, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-tt-placeholder',
+                    template: `
     <div class="treetable-placeholder treetable-empty">
       <div class="treetable-placeholder-image"></div>
       <ng-content></ng-content>
     </div>
   `,
-                host: { '[class.treetable-placeholder-container]': 'true' }
-            },] }
-];
+                    host: { '[class.treetable-placeholder-container]': 'true' },
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2901,13 +3323,12 @@ class TreetableHeaderRenderer {
         this.renderer.addClass(this.el.nativeElement, 'clr-col');
     }
 }
-TreetableHeaderRenderer.decorators = [
-    { type: Directive, args: [{ selector: 'clr-tt-column' },] }
-];
-TreetableHeaderRenderer.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
+TreetableHeaderRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TreetableHeaderRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TreetableHeaderRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: TreetableHeaderRenderer, selector: "clr-tt-column", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TreetableHeaderRenderer, decorators: [{
+            type: Directive,
+            args: [{ selector: 'clr-tt-column' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2928,13 +3349,12 @@ class TreetableCellRenderer {
         this.renderer.setStyle(this.el.nativeElement, 'max-width', maxWidth + 'px');
     }
 }
-TreetableCellRenderer.decorators = [
-    { type: Directive, args: [{ selector: 'clr-tt-cell' },] }
-];
-TreetableCellRenderer.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
+TreetableCellRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TreetableCellRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TreetableCellRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: TreetableCellRenderer, selector: "clr-tt-cell", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TreetableCellRenderer, decorators: [{
+            type: Directive,
+            args: [{ selector: 'clr-tt-cell' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -2943,12 +3363,15 @@ TreetableCellRenderer.ctorParameters = () => [
  */
 class TreetableRowRenderer {
 }
-TreetableRowRenderer.decorators = [
-    { type: Directive, args: [{ selector: 'clr-tt-row' },] }
-];
-TreetableRowRenderer.propDecorators = {
-    cells: [{ type: ContentChildren, args: [TreetableCellRenderer,] }]
-};
+TreetableRowRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TreetableRowRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TreetableRowRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: TreetableRowRenderer, selector: "clr-tt-row", queries: [{ propertyName: "cells", predicate: TreetableCellRenderer }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TreetableRowRenderer, decorators: [{
+            type: Directive,
+            args: [{ selector: 'clr-tt-row' }]
+        }], propDecorators: { cells: [{
+                type: ContentChildren,
+                args: [TreetableCellRenderer]
+            }] } });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -3027,20 +3450,29 @@ class TreetableMainRenderer {
         });
     }
 }
-TreetableMainRenderer.decorators = [
-    { type: Directive, args: [{
-                selector: 'clr-treetable',
-            },] }
-];
-TreetableMainRenderer.propDecorators = {
-    headers: [{ type: ContentChildren, args: [TreetableHeaderRenderer,] }],
-    rows: [{ type: ContentChildren, args: [TreetableRowRenderer, { descendants: true },] }],
-    columns: [{ type: ContentChildren, args: [ClrTreetableColumn,] }],
-    onResize: [{ type: HostListener, args: ['window:resize',] }]
-};
+TreetableMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TreetableMainRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TreetableMainRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: TreetableMainRenderer, selector: "clr-treetable", host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "headers", predicate: TreetableHeaderRenderer }, { propertyName: "rows", predicate: TreetableRowRenderer, descendants: true }, { propertyName: "columns", predicate: ClrTreetableColumn }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TreetableMainRenderer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'clr-treetable',
+                }]
+        }], propDecorators: { headers: [{
+                type: ContentChildren,
+                args: [TreetableHeaderRenderer]
+            }], rows: [{
+                type: ContentChildren,
+                args: [TreetableRowRenderer, { descendants: true }]
+            }], columns: [{
+                type: ContentChildren,
+                args: [ClrTreetableColumn]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
 
 /*
- * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -3058,16 +3490,38 @@ const CLR_TREETABLE_DIRECTIVES = [
 ];
 class ClrTreetableModule {
 }
-ClrTreetableModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule],
-                declarations: [CLR_TREETABLE_DIRECTIVES],
-                exports: [CLR_TREETABLE_DIRECTIVES],
-            },] }
-];
+ClrTreetableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrTreetableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableModule, declarations: [ClrTreetable,
+        ClrTreetableRow,
+        ClrTreetableCell,
+        ClrTreetableColumn,
+        ClrTreetablePlaceholder,
+        ClrTreetableActionOverflow,
+        TreetableMainRenderer,
+        TreetableHeaderRenderer,
+        TreetableRowRenderer,
+        TreetableCellRenderer], imports: [CommonModule, ClarityModule], exports: [ClrTreetable,
+        ClrTreetableRow,
+        ClrTreetableCell,
+        ClrTreetableColumn,
+        ClrTreetablePlaceholder,
+        ClrTreetableActionOverflow,
+        TreetableMainRenderer,
+        TreetableHeaderRenderer,
+        TreetableRowRenderer,
+        TreetableCellRenderer] });
+ClrTreetableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableModule, imports: [[CommonModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrTreetableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule],
+                    declarations: [CLR_TREETABLE_DIRECTIVES],
+                    exports: [CLR_TREETABLE_DIRECTIVES],
+                }]
+        }] });
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -3077,11 +3531,23 @@ class ClrViewEditSection {
         this._preventSave = false;
         this._cancelText = 'Cancel';
         this._editable = true;
-        this._editMode = false;
         this._editIcon = 'pencil';
+        this._isCollapsible = false;
+        this._isCollapsed = false;
+        this._isCollapsedChange = new EventEmitter();
         this._editModeChanged = new EventEmitter(false);
         this._submitted = new EventEmitter(false);
         this._cancelled = new EventEmitter(false);
+        this._editMode = false;
+    }
+    set editMode(value) {
+        this._editMode = value;
+        if (value) {
+            this.toggleCollapsed(false);
+        }
+    }
+    get editMode() {
+        return this._editMode;
     }
     onSubmit() {
         this._submitted.emit();
@@ -3095,32 +3561,110 @@ class ClrViewEditSection {
     }
     onEdit() {
         this.setEditMode(true);
+        this.toggleCollapsed(false);
     }
     setEditMode(mode) {
-        this._editMode = mode;
-        this._editModeChanged.emit(this._editMode);
+        this.editMode = mode;
+        this._editModeChanged.emit(this.editMode);
+    }
+    toggleCollapsed(collapsed) {
+        this._isCollapsed = collapsed;
+        this._isCollapsedChange.emit(this._isCollapsed);
+    }
+    onCollapseExpand() {
+        if (this._isCollapsed) {
+            this.toggleCollapsed(false);
+        }
+        else {
+            this.toggleCollapsed(true);
+        }
     }
 }
-ClrViewEditSection.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-view-edit-section',
-                template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !_editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!_editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"_editMode\"></ng-template>\n      <ng-container *ngIf=\"_editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n"
-            },] }
-];
-ClrViewEditSection.propDecorators = {
-    _title: [{ type: Input, args: ['clrTitle',] }],
-    _saveText: [{ type: Input, args: ['clrSaveText',] }],
-    _preventSave: [{ type: Input, args: ['clrPreventModeChangeOnSave',] }],
-    _cancelText: [{ type: Input, args: ['clrCancelText',] }],
-    _editable: [{ type: Input, args: ['clrEditable',] }],
-    _editMode: [{ type: Input, args: ['clrEditMode',] }],
-    _editIcon: [{ type: Input, args: ['clrEditIcon',] }],
-    viewRef: [{ type: Input, args: ['clrViewRef',] }],
-    editRef: [{ type: Input, args: ['clrEditRef',] }],
-    _editModeChanged: [{ type: Output, args: ['clrEditModeChange',] }],
-    _submitted: [{ type: Output, args: ['clrSectionSubmitted',] }],
-    _cancelled: [{ type: Output, args: ['clrSectionEditCancelled',] }]
-};
+ClrViewEditSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrViewEditSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrViewEditSection, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editIcon: ["clrEditIcon", "_editIcon"], _isCollapsible: ["clrIsCollapsible", "_isCollapsible"], _isCollapsed: ["clrIsCollapsed", "_isCollapsed"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"], editMode: ["clrEditMode", "editMode"] }, outputs: { _isCollapsedChange: "clrIsCollapsedChange", _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <button\n        type=\"button\"\n        (click)=\"onCollapseExpand()\"\n        class=\"btn btn-icon btn-link ces-caret-btn\"\n        *ngIf=\"_isCollapsible && !editMode\"\n      >\n        <clr-icon shape=\"caret up\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></clr-icon>\n      </button>\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\" [@collapseExpandAnimation] *ngIf=\"!(_isCollapsed && _isCollapsible)\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"editMode\"></ng-template>\n      <ng-container *ngIf=\"editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }], animations: [
+        trigger('collapseExpandAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 1, height: '*' })),
+            ]),
+            transition(':leave', [
+                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 0, height: 0 })),
+            ]),
+        ]),
+        trigger('rotateIcon', [
+            state('true', style({ transform: 'rotate(0)' })),
+            state('false', style({ transform: 'rotate(180deg)' })),
+            transition('true => false', animate('300ms ease-out')),
+            transition('false => true', animate('300ms ease-in')),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-view-edit-section', animations: [
+                        trigger('collapseExpandAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 1, height: '*' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 0, height: 0 })),
+                            ]),
+                        ]),
+                        trigger('rotateIcon', [
+                            state('true', style({ transform: 'rotate(0)' })),
+                            state('false', style({ transform: 'rotate(180deg)' })),
+                            transition('true => false', animate('300ms ease-out')),
+                            transition('false => true', animate('300ms ease-in')),
+                        ]),
+                    ], template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <button\n        type=\"button\"\n        (click)=\"onCollapseExpand()\"\n        class=\"btn btn-icon btn-link ces-caret-btn\"\n        *ngIf=\"_isCollapsible && !editMode\"\n      >\n        <clr-icon shape=\"caret up\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></clr-icon>\n      </button>\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\" [@collapseExpandAnimation] *ngIf=\"!(_isCollapsed && _isCollapsible)\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"editMode\"></ng-template>\n      <ng-container *ngIf=\"editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { _title: [{
+                type: Input,
+                args: ['clrTitle']
+            }], _saveText: [{
+                type: Input,
+                args: ['clrSaveText']
+            }], _preventSave: [{
+                type: Input,
+                args: ['clrPreventModeChangeOnSave']
+            }], _cancelText: [{
+                type: Input,
+                args: ['clrCancelText']
+            }], _editable: [{
+                type: Input,
+                args: ['clrEditable']
+            }], _editIcon: [{
+                type: Input,
+                args: ['clrEditIcon']
+            }], _isCollapsible: [{
+                type: Input,
+                args: ['clrIsCollapsible']
+            }], _isCollapsed: [{
+                type: Input,
+                args: ['clrIsCollapsed']
+            }], viewRef: [{
+                type: Input,
+                args: ['clrViewRef']
+            }], editRef: [{
+                type: Input,
+                args: ['clrEditRef']
+            }], _isCollapsedChange: [{
+                type: Output,
+                args: ['clrIsCollapsedChange']
+            }], _editModeChanged: [{
+                type: Output,
+                args: ['clrEditModeChange']
+            }], _submitted: [{
+                type: Output,
+                args: ['clrSectionSubmitted']
+            }], _cancelled: [{
+                type: Output,
+                args: ['clrSectionEditCancelled']
+            }], editMode: [{
+                type: Input,
+                args: ['clrEditMode']
+            }] } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -3129,13 +3673,17 @@ ClrViewEditSection.propDecorators = {
  */
 class ClrViewEditSectionModule {
 }
-ClrViewEditSectionModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule],
-                declarations: [ClrViewEditSection],
-                exports: [ClrViewEditSection],
-            },] }
-];
+ClrViewEditSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrViewEditSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSectionModule, declarations: [ClrViewEditSection], imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule], exports: [ClrViewEditSection] });
+ClrViewEditSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSectionModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSectionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule],
+                    declarations: [ClrViewEditSection],
+                    exports: [ClrViewEditSection],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
@@ -3334,10 +3882,11 @@ class ClrHistoryService {
         return domain.join('.');
     }
 }
-ClrHistoryService.decorators = [
-    { type: Injectable }
-];
-ClrHistoryService.ctorParameters = () => [];
+ClrHistoryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ClrHistoryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -3372,25 +3921,36 @@ class ClrHistory {
         this.historyService.setHistoryPinned(this.username, !this.pinActivated);
     }
 }
-ClrHistory.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-history',
-                template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n    <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n    <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{history.title}}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n"
-            },] }
-];
-ClrHistory.ctorParameters = () => [
-    { type: ClrHistoryService }
-];
-ClrHistory.propDecorators = {
-    username: [{ type: Input, args: ['clrUsername',] }],
-    context: [{ type: Input, args: ['clrContext',] }],
-    pinActive: [{ type: Input, args: ['clrPinActive',] }],
-    dropdownHeader: [{ type: Input, args: ['clrDropdownHeader',] }],
-    dropdownPin: [{ type: Input, args: ['clrDropdownPin',] }],
-    dropdownUnpin: [{ type: Input, args: ['clrDropdownUnpin',] }],
-    domain: [{ type: Input, args: ['clrDomain',] }],
-    position: [{ type: Input, args: ['clrPosition',] }]
-};
+ClrHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
+ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrHistory, selector: "clr-history", inputs: { username: ["clrUsername", "username"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, ngImport: i0, template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n    <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n    <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{history.title}}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistory, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-history', template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n    <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n    <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{history.title}}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n" }]
+        }], ctorParameters: function () { return [{ type: ClrHistoryService }]; }, propDecorators: { username: [{
+                type: Input,
+                args: ['clrUsername']
+            }], context: [{
+                type: Input,
+                args: ['clrContext']
+            }], pinActive: [{
+                type: Input,
+                args: ['clrPinActive']
+            }], dropdownHeader: [{
+                type: Input,
+                args: ['clrDropdownHeader']
+            }], dropdownPin: [{
+                type: Input,
+                args: ['clrDropdownPin']
+            }], dropdownUnpin: [{
+                type: Input,
+                args: ['clrDropdownUnpin']
+            }], domain: [{
+                type: Input,
+                args: ['clrDomain']
+            }], position: [{
+                type: Input,
+                args: ['clrPosition']
+            }] } });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -3420,20 +3980,21 @@ class ClrHistoryPinned {
         this.settingsSubscription.unsubscribe();
     }
 }
-ClrHistoryPinned.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-history-pinned',
-                template: "<nav aria-label=\"history\" class=\"history-container\" *ngIf=\"historyElements.length && active\">\n  <ol class=\"history\">\n    <ng-container *ngFor=\"let historyItem of historyElements\">\n      <li *ngIf=\"historyItem.url\" class=\"history-item\">\n        <a [href]=\"historyItem.url\">{{historyItem.title}}</a>\n      </li>\n    </ng-container>\n  </ol>\n</nav>\n"
-            },] }
-];
-ClrHistoryPinned.ctorParameters = () => [
-    { type: ClrHistoryService }
-];
-ClrHistoryPinned.propDecorators = {
-    username: [{ type: Input, args: ['clrUsername',] }],
-    context: [{ type: Input, args: ['clrContext',] }],
-    domain: [{ type: Input, args: ['clrDomain',] }]
-};
+ClrHistoryPinned.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryPinned, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
+ClrHistoryPinned.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrHistoryPinned, selector: "clr-history-pinned", inputs: { username: ["clrUsername", "username"], context: ["clrContext", "context"], domain: ["clrDomain", "domain"] }, ngImport: i0, template: "<nav aria-label=\"history\" class=\"history-container\" *ngIf=\"historyElements.length && active\">\n  <ol class=\"history\">\n    <ng-container *ngFor=\"let historyItem of historyElements\">\n      <li *ngIf=\"historyItem.url\" class=\"history-item\">\n        <a [href]=\"historyItem.url\">{{historyItem.title}}</a>\n      </li>\n    </ng-container>\n  </ol>\n</nav>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryPinned, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-history-pinned', template: "<nav aria-label=\"history\" class=\"history-container\" *ngIf=\"historyElements.length && active\">\n  <ol class=\"history\">\n    <ng-container *ngFor=\"let historyItem of historyElements\">\n      <li *ngIf=\"historyItem.url\" class=\"history-item\">\n        <a [href]=\"historyItem.url\">{{historyItem.title}}</a>\n      </li>\n    </ng-container>\n  </ol>\n</nav>\n" }]
+        }], ctorParameters: function () { return [{ type: ClrHistoryService }]; }, propDecorators: { username: [{
+                type: Input,
+                args: ['clrUsername']
+            }], context: [{
+                type: Input,
+                args: ['clrContext']
+            }], domain: [{
+                type: Input,
+                args: ['clrDomain']
+            }] } });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -3442,13 +4003,17 @@ ClrHistoryPinned.propDecorators = {
  */
 class ClrHistoryModule {
 }
-ClrHistoryModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule, RouterModule],
-                declarations: [ClrHistory, ClrHistoryPinned],
-                exports: [ClrHistory, ClrHistoryPinned],
-            },] }
-];
+ClrHistoryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrHistory, ClrHistoryPinned] });
+ClrHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryModule, imports: [[CommonModule, ClarityModule, RouterModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrHistoryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, RouterModule],
+                    declarations: [ClrHistory, ClrHistoryPinned],
+                    exports: [ClrHistory, ClrHistoryPinned],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -3457,14 +4022,17 @@ ClrHistoryModule.decorators = [
  */
 class ClrAutocompleteOff {
 }
-ClrAutocompleteOff.decorators = [
-    { type: Directive, args: [{
-                selector: 'input:not([autocomplete])',
-                host: {
-                    '[attr.autocomplete]': '"off"',
-                },
-            },] }
-];
+ClrAutocompleteOff.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAutocompleteOff, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrAutocompleteOff.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrAutocompleteOff, selector: "input:not([autocomplete])", host: { properties: { "attr.autocomplete": "\"off\"" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAutocompleteOff, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input:not([autocomplete])',
+                    host: {
+                        '[attr.autocomplete]': '"off"',
+                    },
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
@@ -3473,12 +4041,16 @@ ClrAutocompleteOff.decorators = [
  */
 class ClrAutocompleteOffModule {
 }
-ClrAutocompleteOffModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ClrAutocompleteOff],
-                exports: [ClrAutocompleteOff],
-            },] }
-];
+ClrAutocompleteOffModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAutocompleteOffModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrAutocompleteOffModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAutocompleteOffModule, declarations: [ClrAutocompleteOff], exports: [ClrAutocompleteOff] });
+ClrAutocompleteOffModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAutocompleteOffModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAutocompleteOffModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClrAutocompleteOff],
+                    exports: [ClrAutocompleteOff],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
@@ -3521,17 +4093,21 @@ class ClrBrandAvatar {
     }
 }
 ClrBrandAvatar.DEFAULT_ICON_SHAPE = 'new-car-private';
-ClrBrandAvatar.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-brand-avatar',
-                template: "<div class=\"brand-avatar-rectangle\">\n  <div #avatar class=\"brand-avatar-icon-container\">\n    <clr-icon [attr.size]=\"23\" [attr.shape]=\"getShape()\"></clr-icon>\n  </div>\n</div>\n"
-            },] }
-];
-ClrBrandAvatar.propDecorators = {
-    avatar: [{ type: HostBinding, args: ['class.clr-brand-avatar',] }],
-    brand: [{ type: Input, args: ['clrBrand',] }],
-    avatarElement: [{ type: ViewChild, args: ['avatar', { static: true },] }]
-};
+ClrBrandAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBrandAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrBrandAvatar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrBrandAvatar, selector: "clr-brand-avatar", inputs: { brand: ["clrBrand", "brand"] }, host: { properties: { "class.clr-brand-avatar": "this.avatar" } }, viewQueries: [{ propertyName: "avatarElement", first: true, predicate: ["avatar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"brand-avatar-rectangle\">\n  <div #avatar class=\"brand-avatar-icon-container\">\n    <clr-icon [attr.size]=\"23\" [attr.shape]=\"getShape()\"></clr-icon>\n  </div>\n</div>\n", directives: [{ type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBrandAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-brand-avatar', template: "<div class=\"brand-avatar-rectangle\">\n  <div #avatar class=\"brand-avatar-icon-container\">\n    <clr-icon [attr.size]=\"23\" [attr.shape]=\"getShape()\"></clr-icon>\n  </div>\n</div>\n" }]
+        }], propDecorators: { avatar: [{
+                type: HostBinding,
+                args: ['class.clr-brand-avatar']
+            }], brand: [{
+                type: Input,
+                args: ['clrBrand']
+            }], avatarElement: [{
+                type: ViewChild,
+                args: ['avatar', { static: true }]
+            }] } });
 
 /*
  * Copyright (c) 2021 Porsche Informatik. All Rights Reserved.
@@ -3540,13 +4116,17 @@ ClrBrandAvatar.propDecorators = {
  */
 class ClrBrandAvatarModule {
 }
-ClrBrandAvatarModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClarityModule],
-                declarations: [ClrBrandAvatar],
-                exports: [ClrBrandAvatar],
-            },] }
-];
+ClrBrandAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBrandAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrBrandAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBrandAvatarModule, declarations: [ClrBrandAvatar], imports: [CommonModule, ClarityModule], exports: [ClrBrandAvatar] });
+ClrBrandAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBrandAvatarModule, imports: [[CommonModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrBrandAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule],
+                    declarations: [ClrBrandAvatar],
+                    exports: [ClrBrandAvatar],
+                }]
+        }] });
 
 /**
  * The abstract base class for all identifier types
@@ -3611,39 +4191,6 @@ class LocationBarNode {
     }
 }
 
-ClarityIcons.addIcons(organizationIcon);
-class LocationBarComponent {
-    constructor() {
-        this.root$ = new ReplaySubject();
-        this.iconShape = 'organization';
-        this.iconTitle = '';
-        this.selectionChanged = new EventEmitter();
-    }
-    set roots(roots) {
-        const internalRoot = new LocationBarNode(null, null, false);
-        internalRoot.setChildren(roots);
-        if (roots.length === 1) {
-            internalRoot.setSelectedChild(roots[0]);
-        }
-        this.root$.next(internalRoot);
-    }
-    onSelectionChanged(selection) {
-        this.selectionChanged.emit(selection);
-    }
-}
-LocationBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-location-bar',
-                template: "<cds-icon *ngIf=\"iconShape\" [attr.shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n<clr-location-bar-node (selectionChanged)=\"onSelectionChanged($event)\" [parentNode]=\"root$ | async\">\n</clr-location-bar-node>\n"
-            },] }
-];
-LocationBarComponent.propDecorators = {
-    iconShape: [{ type: Input, args: ['clrIconShape',] }],
-    iconTitle: [{ type: Input, args: ['clrIconTitle',] }],
-    roots: [{ type: Input, args: ['clrRoots',] }],
-    selectionChanged: [{ type: Output, args: ['clrSelectionChanged',] }]
-};
-
 const CONTENT_PROVIDER = new InjectionToken('CONTENT_PROVIDER');
 /**
  * Interface denoting the contract between the location bar component and
@@ -3724,75 +4271,222 @@ class LocationBarNodeComponent {
         this.selectionChanged.emit([selectedNode.id]);
     }
 }
-LocationBarNodeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'clr-location-bar-node',
-                template: "<ng-container *ngIf=\"parentNode\">\n  <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n  <ng-container\n    *ngIf=\"\n      (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n      else singleSelected\n    \"\n  >\n    <clr-dropdown>\n      <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n        <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n          <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n            node.label\n          }}</span>\n          <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n        </ng-container>\n        <ng-template #unselected>\n          <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;...\n        </ng-template>\n      </button>\n      <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n        <button\n          *ngFor=\"let item of selectableChilds\"\n          type=\"button\"\n          clrDropdownItem\n          class=\"text-truncate\"\n          [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n          (click)=\"selectNode(item)\"\n          title=\"{{ item.label }}\"\n        >\n          {{ item.label }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-container>\n\n  <ng-template #singleSelected>\n    <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n      <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n        <button\n          class=\"btn btn-link btn-sm\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      </ng-container>\n      <ng-template #unselectable>\n        <span\n          class=\"unselectable-node\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <clr-location-bar-node\n    *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n    [parentNode]=\"parentNode.getSelectedChild()\"\n    (selectionChanged)=\"onSelectionChanged($event)\"\n  >\n    <span>/</span>\n  </clr-location-bar-node>\n</ng-container>\n",
-                host: { '[class.location-bar-node]': 'true' }
-            },] }
-];
-LocationBarNodeComponent.ctorParameters = () => [
-    { type: LocationBarContentProvider, decorators: [{ type: Inject, args: [CONTENT_PROVIDER,] }, { type: Optional }] }
-];
-LocationBarNodeComponent.propDecorators = {
-    selectionChanged: [{ type: Output }],
-    parentNode: [{ type: Input }]
-};
+LocationBarNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode" }, outputs: { selectionChanged: "selectionChanged" }, host: { properties: { "class.location-bar-node": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"parentNode\">\n  <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n  <ng-container\n    *ngIf=\"\n      (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n      else singleSelected\n    \"\n  >\n    <clr-dropdown>\n      <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n        <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n          <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n            node.label\n          }}</span>\n          <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n        </ng-container>\n        <ng-template #unselected>\n          <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;...\n        </ng-template>\n      </button>\n      <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n        <button\n          *ngFor=\"let item of selectableChilds\"\n          type=\"button\"\n          clrDropdownItem\n          class=\"text-truncate\"\n          [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n          (click)=\"selectNode(item)\"\n          title=\"{{ item.label }}\"\n        >\n          {{ item.label }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-container>\n\n  <ng-template #singleSelected>\n    <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n      <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n        <button\n          class=\"btn btn-link btn-sm\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      </ng-container>\n      <ng-template #unselectable>\n        <span\n          class=\"unselectable-node\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <clr-location-bar-node\n    *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n    [parentNode]=\"parentNode.getSelectedChild()\"\n    (selectionChanged)=\"onSelectionChanged($event)\"\n  >\n    <span>/</span>\n  </clr-location-bar-node>\n</ng-container>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode"], outputs: ["selectionChanged"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.CdsIconCustomTag, selector: "cds-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-location-bar-node', host: { '[class.location-bar-node]': 'true' }, template: "<ng-container *ngIf=\"parentNode\">\n  <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n  <ng-container\n    *ngIf=\"\n      (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n      else singleSelected\n    \"\n  >\n    <clr-dropdown>\n      <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n        <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n          <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n            node.label\n          }}</span>\n          <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n        </ng-container>\n        <ng-template #unselected>\n          <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;...\n        </ng-template>\n      </button>\n      <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n        <button\n          *ngFor=\"let item of selectableChilds\"\n          type=\"button\"\n          clrDropdownItem\n          class=\"text-truncate\"\n          [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n          (click)=\"selectNode(item)\"\n          title=\"{{ item.label }}\"\n        >\n          {{ item.label }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-container>\n\n  <ng-template #singleSelected>\n    <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n      <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n        <button\n          class=\"btn btn-link btn-sm\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      </ng-container>\n      <ng-template #unselectable>\n        <span\n          class=\"unselectable-node\"\n          [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <clr-location-bar-node\n    *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n    [parentNode]=\"parentNode.getSelectedChild()\"\n    (selectionChanged)=\"onSelectionChanged($event)\"\n  >\n    <span>/</span>\n  </clr-location-bar-node>\n</ng-container>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: LocationBarContentProvider, decorators: [{
+                        type: Inject,
+                        args: [CONTENT_PROVIDER]
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { selectionChanged: [{
+                type: Output
+            }], parentNode: [{
+                type: Input
+            }] } });
+
+ClarityIcons.addIcons(organizationIcon);
+class LocationBarComponent {
+    constructor() {
+        this.root$ = new ReplaySubject();
+        this.iconShape = 'organization';
+        this.iconTitle = '';
+        this.selectionChanged = new EventEmitter();
+    }
+    set roots(roots) {
+        const internalRoot = new LocationBarNode(null, null, false);
+        internalRoot.setChildren(roots);
+        if (roots.length === 1) {
+            internalRoot.setSelectedChild(roots[0]);
+        }
+        this.root$.next(internalRoot);
+    }
+    onSelectionChanged(selection) {
+        this.selectionChanged.emit(selection);
+    }
+}
+LocationBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LocationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LocationBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LocationBarComponent, selector: "clr-location-bar", inputs: { iconShape: ["clrIconShape", "iconShape"], iconTitle: ["clrIconTitle", "iconTitle"], roots: ["clrRoots", "roots"] }, outputs: { selectionChanged: "clrSelectionChanged" }, ngImport: i0, template: "<cds-icon *ngIf=\"iconShape\" [attr.shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n<clr-location-bar-node (selectionChanged)=\"onSelectionChanged($event)\" [parentNode]=\"root$ | async\">\n</clr-location-bar-node>\n", components: [{ type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode"], outputs: ["selectionChanged"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LocationBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-location-bar', template: "<cds-icon *ngIf=\"iconShape\" [attr.shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n<clr-location-bar-node (selectionChanged)=\"onSelectionChanged($event)\" [parentNode]=\"root$ | async\">\n</clr-location-bar-node>\n" }]
+        }], propDecorators: { iconShape: [{
+                type: Input,
+                args: ['clrIconShape']
+            }], iconTitle: [{
+                type: Input,
+                args: ['clrIconTitle']
+            }], roots: [{
+                type: Input,
+                args: ['clrRoots']
+            }], selectionChanged: [{
+                type: Output,
+                args: ['clrSelectionChanged']
+            }] } });
 
 class ClrLocationBarModule {
 }
-ClrLocationBarModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [LocationBarComponent, LocationBarNodeComponent],
-                imports: [CommonModule, ClrIconModule, ClrDropdownModule],
-                exports: [LocationBarComponent],
-            },] }
-];
+ClrLocationBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLocationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrLocationBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent], imports: [CommonModule, ClrIconModule, ClrDropdownModule], exports: [LocationBarComponent] });
+ClrLocationBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLocationBarModule, imports: [[CommonModule, ClrIconModule, ClrDropdownModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrLocationBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LocationBarComponent, LocationBarNodeComponent],
+                    imports: [CommonModule, ClrIconModule, ClrDropdownModule],
+                    exports: [LocationBarComponent],
+                }]
+        }] });
+
+class ClrAddonsLabel {
+    constructor(controlIdService, renderer, el) {
+        this.controlIdService = controlIdService;
+        this.renderer = renderer;
+        this.el = el;
+        this.destroyed$ = new Subject();
+    }
+    ngOnInit() {
+        // Only add the clr-control-label if it is inside a control container
+        if (this.controlIdService) {
+            this.renderer.addClass(this.el.nativeElement, 'clr-control-label');
+        }
+        if (this.controlIdService && !this.el.nativeElement.getAttribute('for')) {
+            this.controlIdService.idChange.pipe(takeUntil$1(this.destroyed$)).subscribe(id => 
+            // setTimeout needed, otherwise the ClrLabel directive of clarity will remove this via HostBinding again
+            setTimeout(() => this.renderer.setAttribute(this.el.nativeElement, 'for', id)));
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+}
+ClrAddonsLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAddonsLabel, deps: [{ token: ControlIdService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClrAddonsLabel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: ClrAddonsLabel, selector: "label", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAddonsLabel, decorators: [{
+            type: Directive,
+            args: [{ selector: 'label' }]
+        }], ctorParameters: function () {
+        return [{ type: ControlIdService, decorators: [{
+                        type: Optional
+                    }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }];
+    } });
 
 /*
  * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-class ClrAddonsModule {
+class ClrFormModule {
 }
-ClrAddonsModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [
-                    ClrViewEditSectionModule,
-                    ClrPagerModule,
-                    ClrDotPagerModule,
-                    ClrPagedSearchResultListModule,
-                    ClrCollapseExpandSectionModule,
-                    ClrBreadcrumbModule,
-                    ClrMainNavGroupModule,
-                    ClrContentPanelModule,
-                    ClrNotificationModule,
-                    ClrFlowBarModule,
-                    ClrBackButtonModule,
-                    ClrNumericFieldModule,
-                    ClrSearchFieldModule,
-                    ClrTreetableModule,
-                    ClrProgressSpinnerModule,
-                    ClrDateTimeModule,
-                    ClrQuickListModule,
-                    ClrLetterAvatarModule,
-                    ClrMultilingualModule,
-                    ClrGenericQuickListModule,
-                    ClrDataListValidatorModule,
-                    ClrHistoryModule,
-                    ClrAutocompleteOffModule,
-                    ClrBrandAvatarModule,
-                    ClrLocationBarModule,
-                ],
-            },] }
-];
+ClrFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFormModule, declarations: [ClrAddonsLabel], exports: [ClrAddonsLabel] });
+ClrFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFormModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClrAddonsLabel],
+                    exports: [ClrAddonsLabel],
+                }]
+        }] });
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+class ClrAddonsModule {
+}
+ClrAddonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrAddonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAddonsModule, exports: [ClrViewEditSectionModule,
+        ClrPagerModule,
+        ClrDotPagerModule,
+        ClrPagedSearchResultListModule,
+        ClrCollapseExpandSectionModule,
+        ClrBreadcrumbModule,
+        ClrMainNavGroupModule,
+        ClrContentPanelModule,
+        ClrNotificationModule,
+        ClrFlowBarModule,
+        ClrBackButtonModule,
+        ClrNumericFieldModule,
+        ClrSearchFieldModule,
+        ClrTreetableModule,
+        ClrProgressSpinnerModule,
+        ClrDateTimeModule,
+        ClrQuickListModule,
+        ClrLetterAvatarModule,
+        ClrMultilingualModule,
+        ClrGenericQuickListModule,
+        ClrDataListValidatorModule,
+        ClrHistoryModule,
+        ClrAutocompleteOffModule,
+        ClrBrandAvatarModule,
+        ClrLocationBarModule,
+        ClrFormModule] });
+ClrAddonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
+        ClrPagerModule,
+        ClrDotPagerModule,
+        ClrPagedSearchResultListModule,
+        ClrCollapseExpandSectionModule,
+        ClrBreadcrumbModule,
+        ClrMainNavGroupModule,
+        ClrContentPanelModule,
+        ClrNotificationModule,
+        ClrFlowBarModule,
+        ClrBackButtonModule,
+        ClrNumericFieldModule,
+        ClrSearchFieldModule,
+        ClrTreetableModule,
+        ClrProgressSpinnerModule,
+        ClrDateTimeModule,
+        ClrQuickListModule,
+        ClrLetterAvatarModule,
+        ClrMultilingualModule,
+        ClrGenericQuickListModule,
+        ClrDataListValidatorModule,
+        ClrHistoryModule,
+        ClrAutocompleteOffModule,
+        ClrBrandAvatarModule,
+        ClrLocationBarModule,
+        ClrFormModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrAddonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        ClrViewEditSectionModule,
+                        ClrPagerModule,
+                        ClrDotPagerModule,
+                        ClrPagedSearchResultListModule,
+                        ClrCollapseExpandSectionModule,
+                        ClrBreadcrumbModule,
+                        ClrMainNavGroupModule,
+                        ClrContentPanelModule,
+                        ClrNotificationModule,
+                        ClrFlowBarModule,
+                        ClrBackButtonModule,
+                        ClrNumericFieldModule,
+                        ClrSearchFieldModule,
+                        ClrTreetableModule,
+                        ClrProgressSpinnerModule,
+                        ClrDateTimeModule,
+                        ClrQuickListModule,
+                        ClrLetterAvatarModule,
+                        ClrMultilingualModule,
+                        ClrGenericQuickListModule,
+                        ClrDataListValidatorModule,
+                        ClrHistoryModule,
+                        ClrAutocompleteOffModule,
+                        ClrBrandAvatarModule,
+                        ClrLocationBarModule,
+                        ClrFormModule,
+                    ],
+                }]
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -3819,13 +4513,13 @@ ClrAddonsModule.decorators = [
  */
 
 /*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -3979,15 +4673,16 @@ class ClrNotificationService {
         }
     }
 }
-ClrNotificationService.decorators = [
-    { type: Injectable }
-];
-ClrNotificationService.ctorParameters = () => [
-    { type: Injector },
-    { type: ApplicationRef },
-    { type: ComponentFactoryResolver },
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
+ClrNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotificationService, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+ClrNotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotificationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrNotificationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    } });
 
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -4026,7 +4721,7 @@ ClrNotificationService.ctorParameters = () => [
  */
 
 /*
- * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -4328,12 +5023,6 @@ const ClrAddonsIconShapes = {
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-/*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
 /*
  * Copyright (c) 2020 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -4356,5 +5045,5 @@ const ClrAddonsIconShapes = {
  * Generated bundle index. Do not edit.
  */
 
-export { ACShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BrochureShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, CLR_BLANK_OPTION, CONTENT_PROVIDER, CaliforniaServiceShape, CaliforniaSpecialistShape, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDateTimeContainer, ClrDateTimeModule, ClrDotPager, ClrDotPagerModule, ClrFlowBar, ClrFlowBarModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DWABrandShape, DieselShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HybridShape, LoadingVolumeShape, LocateShape, LocationBarContentProvider, LocationBarNode, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintShopShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RoadsideAssistanceShape, RouteShape, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StockLocatorCommercialShape, StockLocatorPrivateShape, TaxiDealerShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VirtualRealityShape, WheelToWheelShape, WindscreenWashShape, clrIconSVG, escapeHtml, escapeRegex, TreetableMainRenderer as ɵa, TreetableHeaderRenderer as ɵb, TreetableRowRenderer as ɵc, TreetableCellRenderer as ɵd, ClrAbstractFormComponent as ɵe, ClrAddOption as ɵf, ClrMultilingualAbstract as ɵg, ClrAutocompleteOffModule as ɵh, ClrAutocompleteOff as ɵi, LocationBarComponent as ɵj, LocationBarNodeComponent as ɵk };
-//# sourceMappingURL=clr-addons.js.map
+export { ACShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BrochureShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, CLR_BLANK_OPTION, CONTENT_PROVIDER, CaliforniaServiceShape, CaliforniaSpecialistShape, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDateTimeContainer, ClrDateTimeModule, ClrDotPager, ClrDotPagerModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DWABrandShape, DieselShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HybridShape, LoadingVolumeShape, LocateShape, LocationBarComponent, LocationBarContentProvider, LocationBarNode, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintShopShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RoadsideAssistanceShape, RouteShape, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StockLocatorCommercialShape, StockLocatorPrivateShape, TaxiDealerShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, TreetableCellRenderer, TreetableHeaderRenderer, TreetableMainRenderer, TreetableRowRenderer, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VirtualRealityShape, WheelToWheelShape, WindscreenWashShape, clrIconSVG, escapeHtml, escapeRegex };
+//# sourceMappingURL=clr-addons.mjs.map