@porscheinformatik/clr-addons 12.2.2 → 12.3.1

package/fesm2020/clr-addons.mjs

@@ -27,9 +27,9 @@ class ClrBackButton {
         this.location.back();
     }
 }
-ClrBackButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBackButton, deps: [{ token: i2.Location }], target: i0.ɵɵFactoryTarget.Component });
-ClrBackButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrBackButton, decorators: [{
+ClrBackButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBackButton, deps: [{ token: i2.Location }], target: i0.ɵɵFactoryTarget.Component });
+ClrBackButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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 }]; } });
@@ -41,10 +41,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrBackButtonModule {
 }
-ClrBackButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBackButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrBackButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBackButtonModule, declarations: [ClrBackButton], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrBackButton] });
-ClrBackButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBackButtonModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBackButtonModule, decorators: [{
+ClrBackButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBackButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrBackButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBackButtonModule, declarations: [ClrBackButton], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrBackButton] });
+ClrBackButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBackButtonModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBackButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -66,9 +66,9 @@ class ClrBreadcrumbService {
         this.breadcrumbChange.next(breadcrumbElements);
     }
 }
-ClrBreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ClrBreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBreadcrumbService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBreadcrumbService, decorators: [{
+ClrBreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ClrBreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBreadcrumbService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -97,9 +97,9 @@ class ClrBreadcrumb {
         this.destroyed.complete();
     }
 }
-ClrBreadcrumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBreadcrumb, deps: [{ token: ClrBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
-ClrBreadcrumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrBreadcrumb, decorators: [{
+ClrBreadcrumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBreadcrumb, deps: [{ token: ClrBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
+ClrBreadcrumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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 }]; } });
@@ -111,10 +111,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrBreadcrumbModule {
 }
-ClrBreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrBreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBreadcrumbModule, declarations: [ClrBreadcrumb], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrBreadcrumb] });
-ClrBreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBreadcrumbModule, providers: [ClrBreadcrumbService], imports: [[CommonModule, ClarityModule, RouterModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBreadcrumbModule, decorators: [{
+ClrBreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrBreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBreadcrumbModule, declarations: [ClrBreadcrumb], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrBreadcrumb] });
+ClrBreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBreadcrumbModule, providers: [ClrBreadcrumbService], imports: [[CommonModule, ClarityModule, RouterModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, RouterModule],
@@ -146,8 +146,8 @@ class ClrCollapseExpandSection {
         this.isCollapsed = !this.isCollapsed;
     }
 }
-ClrCollapseExpandSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrCollapseExpandSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrCollapseExpandSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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: [
+ClrCollapseExpandSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrCollapseExpandSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrCollapseExpandSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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' }),
@@ -165,7 +165,7 @@ ClrCollapseExpandSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             transition('false => true', animate('300ms ease-in')),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrCollapseExpandSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrCollapseExpandSection, decorators: [{
             type: Component,
             args: [{ selector: 'clr-collapse-expand-section', animations: [
                         trigger('collapseExpandAnimation', [
@@ -206,10 +206,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrCollapseExpandSectionModule {
 }
-ClrCollapseExpandSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrCollapseExpandSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrCollapseExpandSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrCollapseExpandSectionModule, declarations: [ClrCollapseExpandSection], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrCollapseExpandSection] });
-ClrCollapseExpandSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrCollapseExpandSectionModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrCollapseExpandSectionModule, decorators: [{
+ClrCollapseExpandSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrCollapseExpandSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrCollapseExpandSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrCollapseExpandSectionModule, declarations: [ClrCollapseExpandSection], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrCollapseExpandSection] });
+ClrCollapseExpandSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrCollapseExpandSectionModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrCollapseExpandSectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -259,8 +259,8 @@ class ClrContentPanel {
         window.dispatchEvent(new Event('resize'));
     }
 }
-ClrContentPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrContentPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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: [
+ClrContentPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrContentPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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 }))]),
@@ -270,7 +270,7 @@ ClrContentPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             transition(':leave', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrContentPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanel, decorators: [{
             type: Component,
             args: [{ selector: 'clr-content-panel', animations: [
                         trigger('slideIn', [
@@ -299,15 +299,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrContentPanelContainer {
 }
-ClrContentPanelContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrContentPanelContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: ClrContentPanelContainer, selector: "clr-content-panel-container", host: { properties: { "class.content-container": "true", "class.content-panel-container": "true" } }, ngImport: i0, template: `
+ClrContentPanelContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrContentPanelContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.5", ngImport: i0, type: ClrContentPanelContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanelContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-content-panel-container',
@@ -332,9 +332,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrContentPanelContainerContent {
 }
-ClrContentPanelContainerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrContentPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrContentPanelContainerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrContentPanelContainerContent, decorators: [{
+ClrContentPanelContainerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrContentPanelContainerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrContentPanelContainerContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-content-panel-container-content',
@@ -352,9 +352,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrContentPanelContainerFooter {
 }
-ClrContentPanelContainerFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrContentPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrContentPanelContainerFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrContentPanelContainerFooter, decorators: [{
+ClrContentPanelContainerFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrContentPanelContainerFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrContentPanelContainerFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-content-panel-container-footer',
@@ -372,13 +372,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrContentPanelModule {
 }
-ClrContentPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrContentPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrContentPanelModule, declarations: [ClrContentPanel,
+ClrContentPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrContentPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", 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.3.5", ngImport: i0, type: ClrContentPanelModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrContentPanelModule, decorators: [{
+ClrContentPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanelModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrContentPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -444,9 +444,9 @@ class ClrDataListPredefinedValidatorDirective {
         return ClrDataListValidators.predefined(this.clrDataListPredefined)(control);
     }
 }
-ClrDataListPredefinedValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClrDataListPredefinedValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, decorators: [{
+ClrDataListPredefinedValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrDataListPredefinedValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDataListPredefined]',
@@ -463,10 +463,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrDataListValidatorModule {
 }
-ClrDataListValidatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDataListValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrDataListValidatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDataListValidatorModule, declarations: [ClrDataListPredefinedValidatorDirective], exports: [ClrDataListPredefinedValidatorDirective] });
-ClrDataListValidatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDataListValidatorModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDataListValidatorModule, decorators: [{
+ClrDataListValidatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDataListValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDataListValidatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDataListValidatorModule, declarations: [ClrDataListPredefinedValidatorDirective], exports: [ClrDataListPredefinedValidatorDirective] });
+ClrDataListValidatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDataListValidatorModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDataListValidatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrDataListPredefinedValidatorDirective],
@@ -493,8 +493,8 @@ class ClrDateTimeContainer {
         this.renderer.appendChild(inputWrapper, timeInputElement);
     }
 }
-ClrDateTimeContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", 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: `
+ClrDateTimeContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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>
@@ -503,7 +503,7 @@ ClrDateTimeContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       </div>
     </ng-template>
   `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDateTimeContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDateTimeContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-date-time-container',
@@ -532,9 +532,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrTimeInput {
 }
-ClrTimeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClrTimeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: ClrTimeInput, selector: "[clrTime]", host: { properties: { "class.clr-input": "true" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTimeInput, decorators: [{
+ClrTimeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrTimeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrTimeInput, selector: "[clrTime]", host: { properties: { "class.clr-input": "true" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTimeInput, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrTime]',
@@ -551,10 +551,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrDateTimeModule {
 }
-ClrDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrDateTimeModule, imports: [[CommonModule, ClarityModule, ClrFormsModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDateTimeModule, decorators: [{
+ClrDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrDateTimeModule, imports: [[CommonModule, ClarityModule, ClrFormsModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
@@ -600,9 +600,9 @@ class ClrDotPager {
         return Array(this._pages);
     }
 }
-ClrDotPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDotPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrDotPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrDotPager, decorators: [{
+ClrDotPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDotPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrDotPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -623,10 +623,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrDotPagerModule {
 }
-ClrDotPagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDotPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrDotPagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDotPagerModule, declarations: [ClrDotPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrDotPager] });
-ClrDotPagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDotPagerModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrDotPagerModule, decorators: [{
+ClrDotPagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDotPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDotPagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDotPagerModule, declarations: [ClrDotPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrDotPager] });
+ClrDotPagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDotPagerModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDotPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -635,6 +635,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                 }]
         }] });
 
+/*
+ * 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 ClrDropdownOverflowDirective {
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.defaultItemMinHeightRem = 1.5;
+        this.marginBottomRem = 0.1;
+    }
+    ngAfterViewInit() {
+        this.calculateDropdownMenu();
+    }
+    calculateDropdownMenu() {
+        // the vertical position of our element in the current window
+        const y = this.elRef.nativeElement.getBoundingClientRect().y;
+        const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
+        // see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
+        for (const item of this.elRef.nativeElement.getElementsByClassName('dropdown-item')) {
+            item.style.minHeight = itemMinHeightPx + 'px';
+        }
+        this.elRef.nativeElement.style.maxHeight =
+            this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, window.innerHeight - y - this.convertRemToPixels(this.marginBottomRem)) + 'px';
+        this.elRef.nativeElement.style.overflowY = 'auto';
+    }
+    getMenuMaxHeight(menuMaxHeightProvided, menuMaxHeightPx) {
+        if (menuMaxHeightProvided) {
+            const maxHeightPx = this.convertToPixels(menuMaxHeightProvided);
+            return maxHeightPx > menuMaxHeightPx ? menuMaxHeightPx : maxHeightPx;
+        }
+        return menuMaxHeightPx;
+    }
+    getItemMinHeight(itemMinHeightProvided) {
+        if (itemMinHeightProvided) {
+            return this.convertToPixels(itemMinHeightProvided);
+        }
+        return this.convertRemToPixels(this.defaultItemMinHeightRem);
+    }
+    convertToPixels(value) {
+        if (typeof value === 'string') {
+            if (value.endsWith('px')) {
+                return parseFloat(value.replace('px', ''));
+            }
+            else if (value.endsWith('rem')) {
+                return this.convertRemToPixels(parseFloat(value.replace('rem', '')));
+            }
+            else if (value.endsWith('vh')) {
+                return this.convertVhToPixels(parseFloat(value.replace('vh', '')));
+            }
+            return parseFloat(value);
+        }
+        return value;
+    }
+    convertRemToPixels(rem) {
+        return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    }
+    convertVhToPixels(vh) {
+        const pxPerVhUnit = window.innerHeight / 100;
+        return vh * pxPerVhUnit;
+    }
+}
+ClrDropdownOverflowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'clr-dropdown-menu' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clrDropdownMenuMaxHeight: [{
+                type: Input
+            }], clrDropdownMenuItemMinHeight: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -773,9 +846,9 @@ class ClrFlowBar {
         return this._steps.slice(index + 1, this._steps.length).find(step => step.enabled);
     }
 }
-ClrFlowBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrFlowBar, decorators: [{
+ClrFlowBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBar, decorators: [{
             type: Component,
             args: [{ selector: 'clr-flow-bar', host: {
                         '[class.flow-bar]': 'true',
@@ -792,19 +865,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
             }] } });
 
 /*
- * 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 ClrDropdownOverflowModule {
+}
+ClrDropdownOverflowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrDropdownOverflowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, declarations: [ClrDropdownOverflowDirective], exports: [ClrDropdownOverflowDirective] });
+ClrDropdownOverflowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClrDropdownOverflowDirective],
+                    exports: [ClrDropdownOverflowDirective],
+                }]
+        }] });
+
+/*
+ * 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.
+ */
+
+/*
+ * 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 ClrFlowBarModule {
 }
-ClrFlowBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFlowBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrFlowBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrFlowBar] });
-ClrFlowBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFlowBarModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFlowBarModule, decorators: [{
+ClrFlowBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrFlowBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule], exports: [ClrFlowBar] });
+ClrFlowBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule, FormsModule],
+                    imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
                     declarations: [ClrFlowBar],
                     exports: [ClrFlowBar],
                 }]
@@ -860,9 +957,9 @@ class ClrGenericQuickList {
         clearTimeout(this.timeout);
     }
 }
-ClrGenericQuickList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrGenericQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrGenericQuickList, decorators: [{
+ClrGenericQuickList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrGenericQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -906,10 +1003,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrGenericQuickListModule {
 }
-ClrGenericQuickListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrGenericQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrGenericQuickListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrGenericQuickListModule, declarations: [ClrGenericQuickList], imports: [CommonModule, ClarityModule], exports: [ClrGenericQuickList] });
-ClrGenericQuickListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrGenericQuickListModule, imports: [[CommonModule, ClarityModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrGenericQuickListModule, decorators: [{
+ClrGenericQuickListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrGenericQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrGenericQuickListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrGenericQuickListModule, declarations: [ClrGenericQuickList], imports: [CommonModule, ClarityModule], exports: [ClrGenericQuickList] });
+ClrGenericQuickListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrGenericQuickListModule, imports: [[CommonModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrGenericQuickListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -949,9 +1046,9 @@ class ClrLetterAvatar {
         }
     }
 }
-ClrLetterAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLetterAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ClrLetterAvatar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrLetterAvatar, decorators: [{
+ClrLetterAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLetterAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ClrLetterAvatar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -975,10 +1072,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrLetterAvatarModule {
 }
-ClrLetterAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLetterAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrLetterAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLetterAvatarModule, declarations: [ClrLetterAvatar], imports: [CommonModule, ClarityModule], exports: [ClrLetterAvatar] });
-ClrLetterAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLetterAvatarModule, imports: [[CommonModule, ClarityModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLetterAvatarModule, decorators: [{
+ClrLetterAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLetterAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrLetterAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLetterAvatarModule, declarations: [ClrLetterAvatar], imports: [CommonModule, ClarityModule], exports: [ClrLetterAvatar] });
+ClrLetterAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLetterAvatarModule, imports: [[CommonModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLetterAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -1003,9 +1100,9 @@ class ClrMainNavGroupItem {
         this.el.nativeElement.blur();
     }
 }
-ClrMainNavGroupItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", type: ClrMainNavGroupItem, selector: "[clrMainNavGroupItem]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMainNavGroupItem, decorators: [{
+ClrMainNavGroupItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", type: ClrMainNavGroupItem, selector: "[clrMainNavGroupItem]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMainNavGroupItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMainNavGroupItem]',
@@ -1148,9 +1245,9 @@ class ClrMainNavGroup {
         setTimeout(() => this.items.toArray()[this.currentFocusedId].focus());
     }
 }
-ClrMainNavGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMainNavGroup, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ClrMainNavGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrMainNavGroup, decorators: [{
+ClrMainNavGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMainNavGroup, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ClrMainNavGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -1168,10 +1265,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrMainNavGroupModule {
 }
-ClrMainNavGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMainNavGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrMainNavGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMainNavGroupModule, declarations: [ClrMainNavGroup, ClrMainNavGroupItem], imports: [CommonModule, RouterModule, ClarityModule], exports: [ClrMainNavGroup, ClrMainNavGroupItem] });
-ClrMainNavGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMainNavGroupModule, imports: [[CommonModule, RouterModule, ClarityModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMainNavGroupModule, decorators: [{
+ClrMainNavGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMainNavGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrMainNavGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMainNavGroupModule, declarations: [ClrMainNavGroup, ClrMainNavGroupItem], imports: [CommonModule, RouterModule, ClarityModule], exports: [ClrMainNavGroup, ClrMainNavGroupItem] });
+ClrMainNavGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMainNavGroupModule, imports: [[CommonModule, RouterModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMainNavGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, ClarityModule],
@@ -1248,9 +1345,9 @@ class ClrRequiredOneMultilang {
         return this._active ? ClrMultilingualInputValidators.requiredOne()(control) : null;
     }
 }
-ClrRequiredOneMultilang.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrRequiredOneMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClrRequiredOneMultilang.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrRequiredOneMultilang, decorators: [{
+ClrRequiredOneMultilang.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrRequiredOneMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrRequiredOneMultilang.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrRequiredOneMultilang, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrRequiredOneMultilang]',
@@ -1268,9 +1365,9 @@ class ClrRequiredAllMultilang {
         return this._active ? ClrMultilingualInputValidators.requiredAll()(control) : null;
     }
 }
-ClrRequiredAllMultilang.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrRequiredAllMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClrRequiredAllMultilang.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrRequiredAllMultilang, decorators: [{
+ClrRequiredAllMultilang.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrRequiredAllMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrRequiredAllMultilang.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrRequiredAllMultilang, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrRequiredAllMultilang]',
@@ -1303,9 +1400,9 @@ class ControlIdService {
         return this._idChange.asObservable();
     }
 }
-ControlIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ControlIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ControlIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ControlIdService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ControlIdService, decorators: [{
+ControlIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ControlIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ControlIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ControlIdService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ControlIdService, decorators: [{
             type: Injectable
         }] });
 
@@ -1390,9 +1487,9 @@ class ClrAbstractFormComponent {
         }
     }
 }
-ClrAbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAbstractFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-ClrAbstractFormComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrAbstractFormComponent, decorators: [{
+ClrAbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAbstractFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+ClrAbstractFormComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrAbstractFormComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { formControl: [{
                 type: HostBinding,
@@ -1434,9 +1531,9 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
         });
     }
 }
-ClrMultilingualAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMultilingualAbstract, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-ClrMultilingualAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
+ClrMultilingualAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualAbstract, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+ClrMultilingualAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { multi: [{
                 type: HostBinding,
@@ -1464,8 +1561,8 @@ class ClrMultilingualSelector {
         this.selectedLangChange = new EventEmitter();
     }
 }
-ClrMultilingualSelector.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMultilingualSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrMultilingualSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: { disabled: "disabled", texts: "texts", selectedLang: "selectedLang" }, outputs: { selectedLangChange: "selectedLangChange" }, ngImport: i0, template: `
+ClrMultilingualSelector.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrMultilingualSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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
@@ -1492,8 +1589,8 @@ ClrMultilingualSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
-  `, 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.3.5", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
+  `, 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: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { 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.3.8", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-multilingual-selector',
@@ -1546,8 +1643,8 @@ class ClrMultilingualInput extends ClrMultilingualAbstract {
         super(injector);
     }
 }
-ClrMultilingualInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMultilingualInput, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ClrMultilingualInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: ClrMultilingualInput, selector: "clr-multilingual-input", providers: [
+ClrMultilingualInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualInput, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ClrMultilingualInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrMultilingualInput, selector: "clr-multilingual-input", providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ClrMultilingualInput),
@@ -1555,7 +1652,7 @@ ClrMultilingualInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         },
         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.3.5", ngImport: i0, type: ClrMultilingualInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualInput, decorators: [{
             type: Component,
             args: [{ selector: 'clr-multilingual-input', providers: [
                         {
@@ -1577,8 +1674,8 @@ class ClrMultilingualTextarea extends ClrMultilingualAbstract {
         super(injector);
     }
 }
-ClrMultilingualTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMultilingualTextarea, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: ClrMultilingualTextarea, selector: "clr-multilingual-textarea", providers: [
+ClrMultilingualTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualTextarea, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrMultilingualTextarea, selector: "clr-multilingual-textarea", providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ClrMultilingualTextarea),
@@ -1586,7 +1683,7 @@ ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         },
         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.3.5", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'clr-multilingual-textarea', providers: [
                         {
@@ -1599,27 +1696,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 /*
- * 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.
  */
 class ClrMultilingualModule {
 }
-ClrMultilingualModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMultilingualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrMultilingualModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMultilingualModule, declarations: [ClrMultilingualInput,
+ClrMultilingualModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrMultilingualModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, declarations: [ClrMultilingualInput,
         ClrMultilingualTextarea,
         ClrRequiredOneMultilang,
         ClrRequiredAllMultilang,
-        ClrMultilingualSelector], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrMultilingualInput,
+        ClrMultilingualSelector], imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule], exports: [ClrMultilingualInput,
         ClrMultilingualTextarea,
         ClrRequiredOneMultilang,
         ClrRequiredAllMultilang,
         ClrMultilingualSelector] });
-ClrMultilingualModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMultilingualModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMultilingualModule, decorators: [{
+ClrMultilingualModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule, FormsModule],
+                    imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
                     declarations: [
                         ClrMultilingualInput,
                         ClrMultilingualTextarea,
@@ -1756,8 +1853,8 @@ class ClrNotification {
         zonedTimer(300, this.ngZone).subscribe(() => (this.state = { value: 'currentPosition', params: { absolute: this._translate } }));
     }
 }
-ClrNotification.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", 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: [
+ClrNotification.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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%)' }),
@@ -1776,7 +1873,7 @@ ClrNotification.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             transition('* => fadeOut', animate('0.3s')),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrNotification, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNotification, decorators: [{
             type: Component,
             args: [{ selector: 'clr-notification', animations: [
                         trigger('slideDown', [
@@ -1821,10 +1918,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrNotificationModule {
 }
-ClrNotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrNotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrNotificationModule, declarations: [ClrNotification], imports: [CommonModule, ClarityModule, FormsModule] });
-ClrNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrNotificationModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrNotificationModule, decorators: [{
+ClrNotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrNotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNotificationModule, declarations: [ClrNotification], imports: [CommonModule, ClarityModule, FormsModule] });
+ClrNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNotificationModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNotificationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -2143,15 +2240,15 @@ class ClrNumericField {
         return Math[method](+(value * Math.pow(10, this.decimalPlaces)).toPrecision(15)) / Math.pow(10, this.decimalPlaces);
     }
 }
-ClrNumericField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", 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: [
+ClrNumericField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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.3.5", ngImport: i0, type: ClrNumericField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNumericField, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrNumeric]',
@@ -2292,9 +2389,9 @@ class ClrMaxNumeric {
         return ClrNumericFieldValidators.max(this._max, this._groupingSep, this._decimalSep)(control);
     }
 }
-ClrMaxNumeric.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMaxNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClrMaxNumeric.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrMaxNumeric, decorators: [{
+ClrMaxNumeric.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMaxNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrMaxNumeric.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrMaxNumeric, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMaxNumeric]',
@@ -2319,9 +2416,9 @@ class ClrMinNumeric {
         return ClrNumericFieldValidators.min(this._min, this._groupingSep, this._decimalSep)(control);
     }
 }
-ClrMinNumeric.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrMinNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClrMinNumeric.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrMinNumeric, decorators: [{
+ClrMinNumeric.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMinNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrMinNumeric.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrMinNumeric, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMinNumeric]',
@@ -2345,10 +2442,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrNumericFieldModule {
 }
-ClrNumericFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrNumericFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrNumericFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrNumericFieldModule, imports: [[CommonModule, ClarityModule, ClrFormsModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrNumericFieldModule, decorators: [{
+ClrNumericFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNumericFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrNumericFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrNumericFieldModule, imports: [[CommonModule, ClarityModule, ClrFormsModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNumericFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
@@ -2466,9 +2563,9 @@ class ClrPager {
         return middlePages;
     }
 }
-ClrPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrPager, decorators: [{
+ClrPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -2505,9 +2602,9 @@ class ClrPagedSearchResultList {
         this.pageChange = new EventEmitter();
     }
 }
-ClrPagedSearchResultList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrPagedSearchResultList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrPagedSearchResultList, decorators: [{
+ClrPagedSearchResultList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrPagedSearchResultList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -2540,10 +2637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrPagerModule {
 }
-ClrPagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrPagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagerModule, declarations: [ClrPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrPager] });
-ClrPagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagerModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagerModule, decorators: [{
+ClrPagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrPagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagerModule, declarations: [ClrPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrPager] });
+ClrPagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagerModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -2559,10 +2656,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrPagedSearchResultListModule {
 }
-ClrPagedSearchResultListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagedSearchResultListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrPagedSearchResultListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagedSearchResultListModule, declarations: [ClrPagedSearchResultList], imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule], exports: [ClrPagedSearchResultList] });
-ClrPagedSearchResultListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagedSearchResultListModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrPagerModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrPagedSearchResultListModule, decorators: [{
+ClrPagedSearchResultListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagedSearchResultListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrPagedSearchResultListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagedSearchResultListModule, declarations: [ClrPagedSearchResultList], imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule], exports: [ClrPagedSearchResultList] });
+ClrPagedSearchResultListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagedSearchResultListModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrPagerModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrPagedSearchResultListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule],
@@ -2617,14 +2714,14 @@ class ClrProgressSpinnerComponent {
     }
 }
 ClrProgressSpinnerComponent.MINIMUM_VISIBLE_DURATION = 200;
-ClrProgressSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrProgressSpinnerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrProgressSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: ClrProgressSpinnerComponent, selector: "clr-progress-spinner", inputs: { size: ["clrSize", "size"], showSpinner: ["clrShowSpinner", "showSpinner"] }, host: { properties: { "class.progress-spinner-overlay": "_showSpinner" } }, ngImport: i0, template: `
+ClrProgressSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrProgressSpinnerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrProgressSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.5", ngImport: i0, type: ClrProgressSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrProgressSpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-progress-spinner',
@@ -2653,10 +2750,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrProgressSpinnerModule {
 }
-ClrProgressSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrProgressSpinnerModule, declarations: [ClrProgressSpinnerComponent], imports: [CommonModule], exports: [ClrProgressSpinnerComponent] });
-ClrProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrProgressSpinnerModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrProgressSpinnerModule, decorators: [{
+ClrProgressSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrProgressSpinnerModule, declarations: [ClrProgressSpinnerComponent], imports: [CommonModule], exports: [ClrProgressSpinnerComponent] });
+ClrProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrProgressSpinnerModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrProgressSpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -2704,9 +2801,9 @@ class ClrAddOption {
         !!this.select && this.select.nativeElement.focus();
     }
 }
-ClrAddOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAddOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrAddOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrAddOption, decorators: [{
+ClrAddOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrAddOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -2798,15 +2895,15 @@ class ClrQuickList extends ClrAbstractFormComponent {
         return this.hasBlankOption() || this.values.length === this.allValues.length;
     }
 }
-ClrQuickList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrQuickList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ClrQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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: [
+ClrQuickList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrQuickList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ClrQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.5", ngImport: i0, type: ClrQuickList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrQuickList, decorators: [{
             type: Component,
             args: [{ selector: 'clr-quick-list', host: { '[class.quick-list]': 'true' }, providers: [
                         {
@@ -2853,10 +2950,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrQuickListModule {
 }
-ClrQuickListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrQuickListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrQuickListModule, declarations: [ClrQuickList, ClrAddOption], imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule], exports: [ClrQuickList] });
-ClrQuickListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrQuickListModule, imports: [[CommonModule, FormsModule, ClarityModule, ClrFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrQuickListModule, decorators: [{
+ClrQuickListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrQuickListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrQuickListModule, declarations: [ClrQuickList, ClrAddOption], imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule], exports: [ClrQuickList] });
+ClrQuickListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrQuickListModule, imports: [[CommonModule, FormsModule, ClarityModule, ClrFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrQuickListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule],
@@ -2949,9 +3046,9 @@ class ClrSearchField {
         }
     }
 }
-ClrSearchField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", type: ClrSearchField, selector: "[clrSearch]", host: { properties: { "class.search-input": "true" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrSearchField, decorators: [{
+ClrSearchField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", type: ClrSearchField, selector: "[clrSearch]", host: { properties: { "class.search-input": "true" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrSearchField, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrSearch]',
@@ -2966,10 +3063,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrSearchFieldModule {
 }
-ClrSearchFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrSearchFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrSearchFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrSearchFieldModule, declarations: [ClrSearchField], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrSearchField] });
-ClrSearchFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrSearchFieldModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrSearchFieldModule, decorators: [{
+ClrSearchFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrSearchFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrSearchFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrSearchFieldModule, declarations: [ClrSearchField], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrSearchField] });
+ClrSearchFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrSearchFieldModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrSearchFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -3017,8 +3114,8 @@ class ClrTreetableActionOverflow {
         this.destroyed$.complete();
     }
 }
-ClrTreetableActionOverflow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", 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: `
+ClrTreetableActionOverflow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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>
@@ -3033,7 +3130,7 @@ ClrTreetableActionOverflow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
       </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.3.5", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-action-overflow',
@@ -3108,8 +3205,8 @@ class ClrTreetableRow {
         return this.expandable;
     }
 }
-ClrTreetableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetableRow, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrTreetableRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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: [
+ClrTreetableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableRow, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetableRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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' })),
@@ -3123,7 +3220,7 @@ ClrTreetableRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             ]),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableRow, decorators: [{
             type: Component,
             args: [{ selector: 'clr-tt-row', host: { '[class.treetable-row-wrapper]': 'true' }, animations: [
                         trigger('collapseExpandAnimation', [
@@ -3162,9 +3259,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrTreetableColumn {
 }
-ClrTreetableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTreetableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrTreetableColumn, decorators: [{
+ClrTreetableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrTreetableColumn, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-column',
@@ -3224,9 +3321,9 @@ class ClrTreetable {
         this.destroyed$.complete();
     }
 }
-ClrTreetable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTreetable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrTreetable, decorators: [{
+ClrTreetable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -3249,9 +3346,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrTreetableCell {
 }
-ClrTreetableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTreetableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrTreetableCell, decorators: [{
+ClrTreetableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrTreetableCell, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-cell',
@@ -3270,14 +3367,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrTreetablePlaceholder {
 }
-ClrTreetablePlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetablePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTreetablePlaceholder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: ClrTreetablePlaceholder, selector: "clr-tt-placeholder", host: { properties: { "class.treetable-placeholder-container": "true" } }, ngImport: i0, template: `
+ClrTreetablePlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetablePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrTreetablePlaceholder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.5", ngImport: i0, type: ClrTreetablePlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetablePlaceholder, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-placeholder',
@@ -3323,9 +3420,9 @@ class TreetableHeaderRenderer {
         this.renderer.addClass(this.el.nativeElement, 'clr-col');
     }
 }
-TreetableHeaderRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", type: TreetableHeaderRenderer, selector: "clr-tt-column", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TreetableHeaderRenderer, decorators: [{
+TreetableHeaderRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", type: TreetableHeaderRenderer, selector: "clr-tt-column", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TreetableHeaderRenderer, decorators: [{
             type: Directive,
             args: [{ selector: 'clr-tt-column' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
@@ -3349,9 +3446,9 @@ class TreetableCellRenderer {
         this.renderer.setStyle(this.el.nativeElement, 'max-width', maxWidth + 'px');
     }
 }
-TreetableCellRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", type: TreetableCellRenderer, selector: "clr-tt-cell", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TreetableCellRenderer, decorators: [{
+TreetableCellRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", type: TreetableCellRenderer, selector: "clr-tt-cell", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TreetableCellRenderer, decorators: [{
             type: Directive,
             args: [{ selector: 'clr-tt-cell' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
@@ -3363,9 +3460,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class TreetableRowRenderer {
 }
-TreetableRowRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TreetableRowRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TreetableRowRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: TreetableRowRenderer, selector: "clr-tt-row", queries: [{ propertyName: "cells", predicate: TreetableCellRenderer }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TreetableRowRenderer, decorators: [{
+TreetableRowRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TreetableRowRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TreetableRowRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: TreetableRowRenderer, selector: "clr-tt-row", queries: [{ propertyName: "cells", predicate: TreetableCellRenderer }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TreetableRowRenderer, decorators: [{
             type: Directive,
             args: [{ selector: 'clr-tt-row' }]
         }], propDecorators: { cells: [{
@@ -3450,9 +3547,9 @@ class TreetableMainRenderer {
         });
     }
 }
-TreetableMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TreetableMainRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TreetableMainRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: TreetableMainRenderer, decorators: [{
+TreetableMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TreetableMainRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TreetableMainRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: TreetableMainRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-treetable',
@@ -3490,8 +3587,8 @@ const CLR_TREETABLE_DIRECTIVES = [
 ];
 class ClrTreetableModule {
 }
-ClrTreetableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrTreetableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetableModule, declarations: [ClrTreetable,
+ClrTreetableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrTreetableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableModule, declarations: [ClrTreetable,
         ClrTreetableRow,
         ClrTreetableCell,
         ClrTreetableColumn,
@@ -3510,8 +3607,8 @@ ClrTreetableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         TreetableHeaderRenderer,
         TreetableRowRenderer,
         TreetableCellRenderer] });
-ClrTreetableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetableModule, imports: [[CommonModule, ClarityModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrTreetableModule, decorators: [{
+ClrTreetableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableModule, imports: [[CommonModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrTreetableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -3580,8 +3677,8 @@ class ClrViewEditSection {
         }
     }
 }
-ClrViewEditSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrViewEditSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrViewEditSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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: [
+ClrViewEditSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrViewEditSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrViewEditSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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' }),
@@ -3599,7 +3696,7 @@ ClrViewEditSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             transition('false => true', animate('300ms ease-in')),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrViewEditSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrViewEditSection, decorators: [{
             type: Component,
             args: [{ selector: 'clr-view-edit-section', animations: [
                         trigger('collapseExpandAnimation', [
@@ -3673,10 +3770,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrViewEditSectionModule {
 }
-ClrViewEditSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrViewEditSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrViewEditSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrViewEditSectionModule, declarations: [ClrViewEditSection], imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule], exports: [ClrViewEditSection] });
-ClrViewEditSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrViewEditSectionModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrViewEditSectionModule, decorators: [{
+ClrViewEditSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrViewEditSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrViewEditSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrViewEditSectionModule, declarations: [ClrViewEditSection], imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule], exports: [ClrViewEditSection] });
+ClrViewEditSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrViewEditSectionModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrViewEditSectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule],
@@ -3882,9 +3979,9 @@ class ClrHistoryService {
         return domain.join('.');
     }
 }
-ClrHistoryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ClrHistoryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistoryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistoryService, decorators: [{
+ClrHistoryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ClrHistoryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -3926,9 +4023,9 @@ class ClrHistory {
         this.historyService.setHistoryPinned(this.username, !this.pinActivated);
     }
 }
-ClrHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
-ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrHistory, decorators: [{
+ClrHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
+ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { 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.3.8", 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: [{
@@ -3985,9 +4082,9 @@ class ClrHistoryPinned {
         this.settingsSubscription.unsubscribe();
     }
 }
-ClrHistoryPinned.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistoryPinned, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
-ClrHistoryPinned.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrHistoryPinned, decorators: [{
+ClrHistoryPinned.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryPinned, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
+ClrHistoryPinned.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -4002,19 +4099,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2018-2020 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 ClrHistoryModule {
 }
-ClrHistoryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrHistory, ClrHistoryPinned] });
-ClrHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistoryModule, imports: [[CommonModule, ClarityModule, RouterModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrHistoryModule, decorators: [{
+ClrHistoryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule], exports: [ClrHistory, ClrHistoryPinned] });
+ClrHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, imports: [[CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule, RouterModule],
+                    imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule],
                     declarations: [ClrHistory, ClrHistoryPinned],
                     exports: [ClrHistory, ClrHistoryPinned],
                 }]
@@ -4027,9 +4124,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrAutocompleteOff {
 }
-ClrAutocompleteOff.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAutocompleteOff, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ClrAutocompleteOff.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: ClrAutocompleteOff, selector: "input:not([autocomplete])", host: { properties: { "attr.autocomplete": "\"off\"" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAutocompleteOff, decorators: [{
+ClrAutocompleteOff.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAutocompleteOff, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrAutocompleteOff.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrAutocompleteOff, selector: "input:not([autocomplete])", host: { properties: { "attr.autocomplete": "\"off\"" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAutocompleteOff, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input:not([autocomplete])',
@@ -4046,10 +4143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrAutocompleteOffModule {
 }
-ClrAutocompleteOffModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAutocompleteOffModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrAutocompleteOffModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAutocompleteOffModule, declarations: [ClrAutocompleteOff], exports: [ClrAutocompleteOff] });
-ClrAutocompleteOffModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAutocompleteOffModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAutocompleteOffModule, decorators: [{
+ClrAutocompleteOffModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAutocompleteOffModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrAutocompleteOffModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAutocompleteOffModule, declarations: [ClrAutocompleteOff], exports: [ClrAutocompleteOff] });
+ClrAutocompleteOffModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAutocompleteOffModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAutocompleteOffModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrAutocompleteOff],
@@ -4098,9 +4195,9 @@ class ClrBrandAvatar {
     }
 }
 ClrBrandAvatar.DEFAULT_ICON_SHAPE = 'new-car-private';
-ClrBrandAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBrandAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrBrandAvatar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrBrandAvatar, decorators: [{
+ClrBrandAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBrandAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrBrandAvatar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -4121,10 +4218,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrBrandAvatarModule {
 }
-ClrBrandAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBrandAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrBrandAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBrandAvatarModule, declarations: [ClrBrandAvatar], imports: [CommonModule, ClarityModule], exports: [ClrBrandAvatar] });
-ClrBrandAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBrandAvatarModule, imports: [[CommonModule, ClarityModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrBrandAvatarModule, decorators: [{
+ClrBrandAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBrandAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrBrandAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBrandAvatarModule, declarations: [ClrBrandAvatar], imports: [CommonModule, ClarityModule], exports: [ClrBrandAvatar] });
+ClrBrandAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBrandAvatarModule, imports: [[CommonModule, ClarityModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrBrandAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -4276,9 +4373,9 @@ class LocationBarNodeComponent {
         this.selectionChanged.emit([selectedNode.id]);
     }
 }
-LocationBarNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
+LocationBarNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { 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.3.8", 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: [{
@@ -4312,9 +4409,9 @@ class LocationBarComponent {
         this.selectionChanged.emit(selection);
     }
 }
-LocationBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: LocationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LocationBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: LocationBarComponent, decorators: [{
+LocationBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LocationBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", 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: [{
@@ -4333,14 +4430,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
 
 class ClrLocationBarModule {
 }
-ClrLocationBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLocationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrLocationBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent], imports: [CommonModule, ClrIconModule, ClrDropdownModule], exports: [LocationBarComponent] });
-ClrLocationBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLocationBarModule, imports: [[CommonModule, ClrIconModule, ClrDropdownModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrLocationBarModule, decorators: [{
+ClrLocationBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrLocationBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent], imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule], exports: [LocationBarComponent] });
+ClrLocationBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, imports: [[CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LocationBarComponent, LocationBarNodeComponent],
-                    imports: [CommonModule, ClrIconModule, ClrDropdownModule],
+                    imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule],
                     exports: [LocationBarComponent],
                 }]
         }] });
@@ -4368,9 +4465,9 @@ class ClrAddonsLabel {
         this.destroyed$.complete();
     }
 }
-ClrAddonsLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", type: ClrAddonsLabel, selector: "label", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAddonsLabel, decorators: [{
+ClrAddonsLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", type: ClrAddonsLabel, selector: "label", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsLabel, decorators: [{
             type: Directive,
             args: [{ selector: 'label' }]
         }], ctorParameters: function () { return [{ type: ControlIdService, decorators: [{
@@ -4384,10 +4481,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrFormModule {
 }
-ClrFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFormModule, declarations: [ClrAddonsLabel], exports: [ClrAddonsLabel] });
-ClrFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFormModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrFormModule, decorators: [{
+ClrFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFormModule, declarations: [ClrAddonsLabel], exports: [ClrAddonsLabel] });
+ClrFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFormModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrAddonsLabel],
@@ -4402,8 +4499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
  */
 class ClrAddonsModule {
 }
-ClrAddonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrAddonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAddonsModule, exports: [ClrViewEditSectionModule,
+ClrAddonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrAddonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsModule, exports: [ClrViewEditSectionModule,
         ClrPagerModule,
         ClrDotPagerModule,
         ClrPagedSearchResultListModule,
@@ -4428,8 +4525,9 @@ ClrAddonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ClrAutocompleteOffModule,
         ClrBrandAvatarModule,
         ClrLocationBarModule,
-        ClrFormModule] });
-ClrAddonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
+        ClrFormModule,
+        ClrDropdownOverflowModule] });
+ClrAddonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
         ClrPagerModule,
         ClrDotPagerModule,
         ClrPagedSearchResultListModule,
@@ -4454,8 +4552,9 @@ ClrAddonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         ClrAutocompleteOffModule,
         ClrBrandAvatarModule,
         ClrLocationBarModule,
-        ClrFormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrAddonsModule, decorators: [{
+        ClrFormModule,
+        ClrDropdownOverflowModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrAddonsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -4485,6 +4584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                         ClrBrandAvatarModule,
                         ClrLocationBarModule,
                         ClrFormModule,
+                        ClrDropdownOverflowModule,
                     ],
                 }]
         }] });
@@ -4680,9 +4780,9 @@ class ClrNotificationService {
         }
     }
 }
-ClrNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", 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.3.5", ngImport: i0, type: ClrNotificationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: ClrNotificationService, decorators: [{
+ClrNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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.3.8", ngImport: i0, type: ClrNotificationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrNotificationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: Document, decorators: [{
                     type: Inject,
@@ -4931,6 +5031,23 @@ const TouaregServiceShape = clrIconSVG(`<path d="M.735 9.949a2.213 2.213 0 003.1
 const VehicleConversionShape = clrIconSVG(`<path d="M23.887 17.55a4.447 4.447 0 00-2.092-3.5l-.852-.508a3.6 3.6 0 01-.718-.565L17.019 9.72a2.723 2.723 0 00-1.928-.831h-1.949l.005-1.771H.584v7.859A35.209 35.209 0 00.4 16.568L.171 19.21a1.044 1.044 0 00.757 1.123l1.992.477a2.354 2.354 0 004.7.015l9.136-.029a2.354 2.354 0 004.7-.015h.166l1.5-.43A1.286 1.286 0 0024 19zm-8.8-7.331a1.392 1.392 0 01.984.434l2.823 2.867-5.765-.026.009-3.275zm-3.274-1.771v1.054l-.03 5.263H1.914V8.448zM1.722 16.681c.013-.163.036-.371.061-.586h10.008l-.01 3.387-4.452.018a2.344 2.344 0 00-4.128.013l-1.685-.4zm3.546 4.989a1.023 1.023 0 01-1-.834 1.052 1.052 0 01-.04-.2 1.036 1.036 0 111.04 1.034zm13.832 0a1.035 1.035 0 111.036-1.035 1.076 1.076 0 01-.03.15 1.024 1.024 0 01-1.006.885zm2.328-2.219h-.291a2.345 2.345 0 00-4.08.013l-3.945.013.013-4.654 7.429.033.56.334a2.878 2.878 0 01.944.944 44.139 44.139 0 00-2.639-.148l-.031 1.33c1.074.025 2.128.092 3.146.191.005.048.023.093.026.142l.105 1.446z"/>`);
 const VirtualRealityShape = clrIconSVG(`<path d="M23.012 11.706l-1.005-.091c-.725-3.268-3.382-4.488-6.521-4.901l-1.362-3.067H9.948l-1.43 3.066c-3.156.415-5.825 1.646-6.534 4.952l-.99.114-.006 3.397.947.086c.704 4.074 3.976 4.872 7.485 5.07l.351.019.215-.28A2.335 2.335 0 0112 19.049a2.256 2.256 0 011.957 1.02l.216.284.355-.023c4.36-.278 6.875-2 7.513-5.116l.966-.111zM10.077 6.562l.725-1.585h2.45l.691 1.585h-.088c-.613-.033-1.235-.046-1.855-.046s-1.242.013-1.855.046zm4.697 12.417A3.811 3.811 0 0012 17.719a3.976 3.976 0 00-2.833 1.264c-3.612-.254-5.34-1.258-5.865-3.597l.687.063v-4.015l-.602.07c.791-2.6 3.407-3.658 8.613-3.658 5.197 0 7.813 1.052 8.609 3.642l-.598-.054v4.015l.598-.07c-.645 2.154-2.529 3.325-5.835 3.6z"></path><path d="M9.387 14.479l-1.115-3.441-.025-.08H6.988v.186l1.718 4.816h1.349l1.71-4.777.007-.225h-1.258zM15.778 13.961a1.387 1.387 0 00.974-1.449c0-.709-.308-1.554-1.771-1.554h-2.13v5.002h1.206v-1.887h.434l1.278 1.887h1.243v-.264zm-1.721-1.959h.875c.369 0 .572.18.572.51 0 .333-.203.517-.572.517h-.875z"/>`);
 const WindscreenWashShape = clrIconSVG(`<path d="M22.782 10.49c-.997-1.453-3.855-4.537-10.117-4.75V4.013a.96.96 0 01.959-.96.947.947 0 01.96.944h1.33A2.288 2.288 0 0012 2.402 2.288 2.288 0 008.085 4h1.33a.95.95 0 01.96-.946.96.96 0 01.96.96V5.74c-6.28.205-9.128 3.299-10.12 4.754a1.027 1.027 0 00.13 1.307L11.27 21.7a1.032 1.032 0 001.457 0l9.927-9.9a1.027 1.027 0 00.127-1.31zm-10.79 5.333h.002a8.226 8.226 0 013.697.902l-3.565 3.556a.179.179 0 01-.253 0l-3.567-3.557a8.162 8.162 0 013.685-.901zm4.772-.026a9.576 9.576 0 00-4.1-1.265v-2.525h-1.33v2.525a9.504 9.504 0 00-4.099 1.264l-4.774-4.76c.956-1.295 3.492-3.778 8.873-3.968v2.944h1.33V7.069c5.369.196 7.912 2.674 8.874 3.967z"/>`);
+const WrenchForward = clrIconSVG(`<path d="M33.18 26.11L20.35 13.28A9.28 9.28 0 007.54 2.79l-1.34.59 5.38 5.38-2.82 2.83-5.38-5.38-.59 1.33a9.27 9.27 0 0010.49 12.81l12.83 12.83a2 2 0 002.83 0l4.24-4.24a2 2 0 000-2.83zm-5.66 5.66L13.88 18.12l-.57.16a7.27 7.27 0 01-9-4.94A7.54 7.54 0 014 11.28a7.36 7.36 0 01.15-1.48l4.61 4.61 5.66-5.66-4.61-4.6a7.27 7.27 0 018.47 9.16l-.16.57 13.65 13.65z"/><circle cx="27.13" cy="27.09" r="1.3"/><path d="M18.06 28.94l-4-4a1.5 1.5 0 00-2.12 2.12l1.44 1.44H3a1.5 1.5 0 000 3h10.38l-1.44 1.44a1.49 1.49 0 000 2.12 1.5 1.5 0 002.12 0l4-4a1.49 1.49 0 000-2.12z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const TopcardShape = clrIconSVG(`<path fill="none" d="M0 0h36v36H0z"/><path d="M32 6H4a2 2 0 00-2 2v20a2 2 0 002 2h28a2 2 0 002-2V8a2 2 0 00-2-2zm0 2v12H4V8zM4 28v-4h28v4z"/><path d="M12.09 11.24h-1.9v6.24a1.16 1.16 0 01-.24.8.82.82 0 01-.62.26.8.8 0 01-.63-.27 1.13 1.13 0 01-.24-.79v-6.24h-1.9A1 1 0 015.9 11a.65.65 0 01-.22-.52.67.67 0 01.23-.48 1 1 0 01.65-.19h5.53a1 1 0 01.67.2.66.66 0 01.22.52.65.65 0 01-.22.52 1 1 0 01-.67.19zM17.63 9.65a4.53 4.53 0 012.3.55 3.49 3.49 0 011.45 1.54 5.2 5.2 0 01.49 2.34 5.69 5.69 0 01-.27 1.81 3.9 3.9 0 01-.81 1.42 3.51 3.51 0 01-1.32.91 4.85 4.85 0 01-1.8.32 4.75 4.75 0 01-1.81-.33 3.49 3.49 0 01-1.33-.92 3.86 3.86 0 01-.8-1.42 5.76 5.76 0 01-.27-1.8 5.5 5.5 0 01.28-1.81 3.94 3.94 0 01.82-1.41 3.58 3.58 0 011.32-.85 4.79 4.79 0 011.75-.35zm2.48 4.42a4 4 0 00-.31-1.63 2.27 2.27 0 00-.87-1 2.46 2.46 0 00-1.3-.35 2.35 2.35 0 00-1 .19 2.12 2.12 0 00-.76.57 2.9 2.9 0 00-.51 1 4.46 4.46 0 00-.18 1.31 4.6 4.6 0 00.18 1.33 2.78 2.78 0 00.53 1 2.15 2.15 0 00.77.58 2.32 2.32 0 001 .19 2.27 2.27 0 002.12-1.36 4 4 0 00.33-1.83zM26.69 15H25.1v2.44a1.12 1.12 0 01-.25.79.86.86 0 01-1.25 0 1.14 1.14 0 01-.24-.78v-6.58a1.09 1.09 0 01.26-.82 1.19 1.19 0 01.84-.25h2.23a6 6 0 011.53.15 2.3 2.3 0 01.91.49 2.22 2.22 0 01.58.83 3 3 0 01.2 1.11 2.45 2.45 0 01-.81 2 3.69 3.69 0 01-2.41.62zm-.42-3.93H25.1v2.62h1.17a3.4 3.4 0 001-.13 1.18 1.18 0 00.63-.42 1.28 1.28 0 00.22-.77 1.32 1.32 0 00-.34-.92 2.19 2.19 0 00-1.51-.34z"/>`, '0 0 36 36');
+const TaskAndAppointment = clrIconSVG(`<path fill="none" d="M0 0h36v36H0z"/><path d="M7.38 21.42h6v1.27H7.22a1.13 1.13 0 01-1.11-1.15V7.24a1.14 1.14 0 011.12-1.16H9.3v1.28H7.38zM26.55 7.24v6.47h-1.28V7.36h-1.91V6.08h2.07a1.14 1.14 0 011.12 1.16z"/><path d="M9.94 11.19h1.28v1.28H9.94zM13.77 11.19h1.28v1.28h-1.28zM17.61 11.19h1.27v1.28h-1.27zM9.94 14.39h1.28v1.28H9.94zM9.94 17.58h1.28v1.28H9.94zM11.86 4.17V8a.64.64 0 11-1.28 0V4.17a.64.64 0 111.28 0zM22.08 4.17V8a.64.64 0 11-1.28 0V4.17a.64.64 0 111.28 0zM13.13 6.08h6.39v1.28h-6.39z"/><path d="M9.94 11.19v1.28h1.28v-1.28zm0 3.2v1.28h1.28v-1.28zm0 3.19v1.28h1.28v-1.28zm1.28-14a.64.64 0 00-.64.64V8a.64.64 0 101.28 0V4.17a.64.64 0 00-.64-.64zm2.55 7.66v1.28h1.28v-1.33zm3.84 0v1.28h1.27v-1.33zm-4.48-5.16v1.28h6.39V6.08zm8.31-2.55a.64.64 0 00-.64.64V8a.64.64 0 101.28 0V4.17a.64.64 0 00-.64-.64zm4 2.55h-2.08v1.28h1.91v6.35h1.28V7.24a1.14 1.14 0 00-1.12-1.16zm-18 1.28H9.3V6.08H7.23a1.14 1.14 0 00-1.12 1.16v14.3a1.13 1.13 0 001.11 1.15h6.18v-1.27h-6z" fill="none"/><g><path d="M29.94 33.75H13.72a1.22 1.22 0 01-1.23-1.21V14.13a1.25 1.25 0 011.29-1.23h1.58v1.44h-1.43v18h15.8v-18H28.3v-1.43h1.61a1.22 1.22 0 011.26 1.19v18.44a1.22 1.22 0 01-1.23 1.21z"/><path d="M20.87 27.83L17 24a.71.71 0 01.08-1 .73.73 0 01.92 0l2.83 2.83 6.2-6.21a.74.74 0 011 .08.73.73 0 010 .94zM27.58 17.22h-11.5v-2.63a1.68 1.68 0 011.68-1.68H19a2.88 2.88 0 015.57 0h1.33a1.69 1.69 0 011.68 1.68zm-10.06-1.43h8.62v-1.2a.24.24 0 00-.24-.24h-2.63v-.72a1.44 1.44 0 10-2.88 0v.72h-2.63a.24.24 0 00-.24.24z"/></g>`, '0 0 36 36');
+const PartsShape = clrIconSVG(`<path data-name="Path 177" d="M6.6 10l-3.39 6.2 3.39 6.16h6.78l3.39-6.16-3.39-6.2zm5.81 10.68H7.57L5.08 16.2l2.49-4.53h4.84l2.49 4.53zM10 13.43a2.77 2.77 0 102.78 2.77A2.77 2.77 0 0010 13.43zm0 3.9a1.13 1.13 0 111.13-1.13A1.12 1.12 0 0110 17.33zM32.79 5.42H18v6.16h4.11v18.16h6.56l.12-18.16h4zM27.13 15v2.14l-3.37-1.07v-2.16zm0 3.85v2l-3.34-1.06v-2.02zm0 3.76v2.19l-3.32-1.06v-2.2zm-3.33 5.5v-2.66l3.31 1.05v1.6zm3.4-14.83l-3.4-1.08v-.61h3.41zm4-3.33H19.64V7.06h11.51zM3.21 29.76h13.56v-4.93H3.21zm1.64-3.29h10.28v1.65H4.85z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const PartsForwardShape = clrIconSVG(`<path data-name="Path 177" d="M32.79 5.42H18v6.16h4.11v18.16h6.56l.12-18.16h4zM27.13 15v2.14l-3.37-1.07v-2.16zm0 3.85v2l-3.34-1.06v-2.02zm0 3.76v2.19l-3.32-1.06v-2.2zm-3.33 5.5v-2.66l3.31 1.05v1.6zm3.4-14.83l-3.4-1.08v-.61h3.41zm4-3.33H19.64V7.06h11.51z"/><path d="M13.38 10H6.6l-3.39 6.2 3.39 6.16h6.78l3.39-6.16zm-1 10.68H7.57L5.08 16.2l2.49-4.53h4.84l2.49 4.53z"/><path d="M10 13.43a2.77 2.77 0 102.78 2.77A2.77 2.77 0 0010 13.43zm1.12 2.77A1.13 1.13 0 0110 17.33a1.13 1.13 0 111.13-1.13zM16.08 24.83l.69.69v-.69zm-12.86 0V27h1.64v-.53H10a2.42 2.42 0 010-.47 2.92 2.92 0 01.24-1.17zm14.84 6.23l-4 4a1.5 1.5 0 01-2.12 0 1.49 1.49 0 010-2.12l1.44-1.44H3a1.5 1.5 0 010-3h10.38l-1.44-1.44a1.5 1.5 0 012.12-2.12l4 4a1.49 1.49 0 010 2.12z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const PartsNonStockShape = clrIconSVG(`<path d="M6.61 14.07l-3.39 6.15 3.39 6.16h6.77l3.39-6.16-3.39-6.15zm5.8 10.67H7.58l-2.49-4.52 2.49-4.52h4.83l2.49 4.52zM10 17.45A2.77 2.77 0 0010 23a2.77 2.77 0 000-5.55zm0 3.9a1.13 1.13 0 111.14-1.13A1.13 1.13 0 0110 21.35zm22.78-15.9H18v6.15h4.11v18.16h6.56l.12-18.16h4zM27.13 15v2.14l-3.37-1.07v-2.13zm0 3.86v2l-3.34-1.06v-2zm0 3.75v2.18l-3.31-1.05v-2.18zm-3.33 5.5v-2.64l3.3 1.05v1.6zm3.4-14.82l-3.4-1.08v-.61h3.4zm4-3.33H19.65V7.09h11.5zM10.5 13.5v-3h-8v-4h8v-3l6 5z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const PartNonStockForwardShape = clrIconSVG(`<path d="M10.5 13.5v-3h-8v-4h8v-3l6 5zM10 26.38a2.33 2.33 0 010-.38 3 3 0 01.29-1.26H7.57l-2.48-4.51 2.48-4.53h4.84l2.49 4.52L13.35 23a2.87 2.87 0 011.52.64l1.9-3.45-3.39-6.16H6.61l-3.39 6.2 3.39 6.15zm2.73-6.16A2.77 2.77 0 1110 17.45a2.77 2.77 0 012.76 2.77zm-1.63 0a1.14 1.14 0 10-1.1 1.13 1.13 1.13 0 001.13-1.13zm6.92 8.72l-4-4a1.49 1.49 0 00-2.12 0 1.51 1.51 0 000 2.12l1.44 1.44H3a1.5 1.5 0 000 3h10.37l-1.44 1.44a1.51 1.51 0 000 2.12 1.53 1.53 0 001.07.44 1.49 1.49 0 001.06-.44l4-4a1.49 1.49 0 00-.01-2.12zM32.79 5.42H18v6.16h4.11v18.16h6.56l.12-18.16h4zM27.13 15v2.14l-3.37-1.07v-2.16zm0 3.85v2l-3.34-1.06v-2.02zm0 3.76v2.19l-3.32-1.06v-2.2zm-3.33 5.5v-2.66l3.31 1.05v1.6zm3.4-14.83l-3.4-1.08v-.61h3.41zm4-3.33H19.64V7.06h11.51z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const PaintMaterialShape = clrIconSVG(`<path data-name="Path 345" d="M24.34 11.7c0 1.12-1.73 2-6.34 2s-6.34-.91-6.34-2 1.73-2 6.34-2 6.34.87 6.34 2zM27 10v16c0 1.66-2.92 3-9 3s-9-1.34-9-3V10c0-1.66 2.92-3 9-3s9 1.34 9 3zm-1.33 0c0-.22-1.43-1.67-7.67-1.67S10.33 9.78 10.33 10v16c0 .22 1.43 1.67 7.67 1.67s7.67-1.45 7.67-1.67zm-4.81 4.91l-2 2.89a2.48 2.48 0 104.08 0z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const PaintMaterialForwardShape = clrIconSVG(`<path d="M18.86 17.8a2.48 2.48 0 104.08 0l-2.08-2.89z"/><ellipse cx="18" cy="11.7" rx="6.34" ry="2"/><path d="M18 7c-6.08 0-9 1.34-9 3v16a1.61 1.61 0 00.45 1.06h.72a3.09 3.09 0 01-.17-1 3 3 0 01.33-1.35V10c0-.22 1.43-1.67 7.67-1.67s7.67 1.45 7.67 1.67v16c0 .21-1.31 1.53-6.83 1.66l.28.27a3.06 3.06 0 01.67 1C24.65 28.71 27 27.49 27 26V10c0-1.66-2.92-3-9-3z"/><path d="M18.06 29l-4-4a1.5 1.5 0 00-2.12 2.12l1.44 1.44H3a1.5 1.5 0 000 3h10.38L11.94 33a1.49 1.49 0 000 2.12 1.5 1.5 0 002.12 0l4-4a1.49 1.49 0 000-2.12z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const ItemsRecieveShape = clrIconSVG(`<defs><style>.prefix__cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px}</style></defs><g id="prefix__items-rcv"><path d="M32 8.2H4a2 2 0 00-2 2v5.4a2.93 2.93 0 011.5-.41H4v-5h28v16H4v-5h-.5a2.94 2.94 0 01-1.5-.42v5.4a2 2 0 002 2h28a2 2 0 002-2v-16a2 2 0 00-2-1.97z"/><path d="M18.56 17.12l-4-4a1.5 1.5 0 10-2.12 2.13l1.44 1.44H3.5a1.5 1.5 0 000 3h10.38l-1.44 1.43a1.5 1.5 0 102.12 2.13l4-4a1.5 1.5 0 000-2.13z"/><path class="prefix__cls-1" d="M21.99 22.19h4M21.99 18.19h6.5M21.99 14.19h6"/></g><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const ItemsForwardShape = clrIconSVG(`<defs><style>.prefix__cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px}</style></defs><g id="prefix__items-fwd"><g id="prefix__fwd-template"><path d="M32 22.93v3.24H4v-16h28v3.24l2 2V10.2a2 2 0 00-2-2H4a2 2 0 00-2 2v16a2 2 0 002 2h28a2 2 0 002-2v-5.27z"/><path d="M33.56 17.12l-4-4a1.5 1.5 0 10-2.12 2.13l1.44 1.44H18.5a1.5 1.5 0 000 3h10.38l-1.44 1.43a1.5 1.5 0 102.12 2.13l4-4a1.5 1.5 0 000-2.13z"/></g><path class="prefix__cls-1" d="M7.68 22.19h4M7.68 18.19h6.5M7.68 14.19h6"/></g><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const DollarBillShape = clrIconSVG(`<path d="M18 24.55h-.16a5.52 5.52 0 01-1.07-.15 1 1 0 01-.77-1.23 1 1 0 011.22-.72 6.48 6.48 0 00.86.1 3.2 3.2 0 00.62-.09 1 1 0 11.5 1.93 4.74 4.74 0 01-1.2.16zM14.67 22.9a1 1 0 01-.76-.35 6.84 6.84 0 01-1.44-3 1 1 0 012-.43 4.79 4.79 0 001 2.1 1 1 0 01-.12 1.41 1 1 0 01-.68.27zm-1.21-5.33a.78.78 0 01-.22 0 1 1 0 01-.76-1.19 6.87 6.87 0 011.45-3 1 1 0 111.52 1.3 4.87 4.87 0 00-1 2.09 1 1 0 01-.99.8zM21.35 22.88a1 1 0 01-.64-.23 1 1 0 01-.13-1.41 4.88 4.88 0 001-2.1 1 1 0 011.19-.76 1 1 0 01.76 1.18 6.79 6.79 0 01-1.41 3 1 1 0 01-.77.32zm1.19-5.34a1 1 0 01-1-.77 4.85 4.85 0 00-1-2.08 1 1 0 011.52-1.31 6.85 6.85 0 011.46 2.94 1 1 0 01-.75 1.2.82.82 0 01-.23.02zm-5.48-4a1 1 0 01-.23-2 5 5 0 012.34 0 1 1 0 11-.47 1.94 3 3 0 00-1.4 0z"/><path d="M21.57 26H9.49A5.87 5.87 0 004 20.44V15.6A5.87 5.87 0 009.51 10h17A5.87 5.87 0 0032 15.6v3.93l2-1.25V10a2 2 0 00-2-2H4a2 2 0 00-2 2v16a2 2 0 002 2h14.35zM32 10v4a4.25 4.25 0 01-3.9-4zM4 10h3.9A4.25 4.25 0 014 14zm0 16v-3.94A4.25 4.25 0 017.9 26z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const DollarBillForwardShape = clrIconSVG(`<path d="M24.3 18c0-3.94-2.83-7.15-6.3-7.15s-6.3 3.21-6.3 7.15a7.63 7.63 0 001.85 5.05 3 3 0 011.57.83l.91.9a5.43 5.43 0 002 .37c3.44 0 6.27-3.21 6.27-7.15zm-11 0c0-3.06 2.11-5.55 4.7-5.55s4.7 2.49 4.7 5.55-2.11 5.56-4.7 5.56c-2.59-.02-4.7-2.51-4.7-5.56z"/><path d="M32 8H4a2 2 0 00-2 2v16a2 2 0 00.32 1.08A3.08 3.08 0 013 27h7.17a3 3 0 01-.17-1h-.51A5.87 5.87 0 004 20.44V15.6A5.87 5.87 0 009.51 10h17A5.87 5.87 0 0032 15.6v4.85A5.88 5.88 0 0026.49 26h-9.25l1.88 1.88.1.12H32a2 2 0 002-2V10a2 2 0 00-2-2zM7.9 26H4v-3.94A4.25 4.25 0 017.9 26zM4 14v-4h3.9A4.25 4.25 0 014 14zm28 12h-3.9a4.25 4.25 0 013.9-3.94zm0-12a4.25 4.25 0 01-3.9-4H32z"/><path d="M18.06 28.94l-4-4a1.5 1.5 0 00-2.12 2.12l1.44 1.44H3a1.5 1.5 0 000 3h10.38l-1.44 1.44a1.49 1.49 0 000 2.12 1.5 1.5 0 002.12 0l4-4a1.49 1.49 0 000-2.12z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const BlocksGroupForwardShape = clrIconSVG(`<path d="M10.17 33H8.42l1.6.74a3 3 0 01.15-.74zM33.53 18.76l-6.93-3.19V6.43a1 1 0 00-.6-.9l-7.5-3.45a1 1 0 00-.84 0l-7.5 3.45a1 1 0 00-.58.91v9.14l-6.9 3.18a1 1 0 00-.58.91v7.48A3 3 0 013 27h1.1v-5.77L10.18 24a1 1 0 00.55.06 1.3 1.3 0 01.15-.18A3 3 0 0113 23h.14l3.94-1.81v4.65l2 2v-6.62L25.19 24a1 1 0 00.81 0l6.08-2.8v7.61l-6.5 3-5.74-2.65A3 3 0 0120 30a3 3 0 01-.3 1.29l5.48 2.52a1 1 0 00.84 0l7.5-3.45a1 1 0 00.58-.91v-9.78a1 1 0 00-.57-.91zM18.1 4.08l5.11 2.35-5.11 2.35L13 6.43zM10.6 22l-5.11-2.33 5.11-2.36 5.11 2.35zm7.5-3.42l-6.5-3V8l6.08 2.8a1 1 0 00.84 0L24.6 8v7.58zM25.61 22l-5.11-2.33 5.11-2.35 5.11 2.35z"/><path d="M18.06 28.94l-4-4a1.5 1.5 0 00-2.12 2.12l1.44 1.44H3a1.5 1.5 0 000 3h10.38l-1.44 1.44a1.49 1.49 0 000 2.12 1.5 1.5 0 002.12 0l4-4a1.49 1.49 0 000-2.12z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const TextForward = clrIconSVG(`<path d="M26 16.5a1 1 0 01-1 1H11a1 1 0 010-2h14a1 1 0 011 1zm-4.25 4h-7.5a1 1 0 000 2h7.5a1 1 0 000-2zm-10.47-8h13.44a1 1 0 000-2H11.28a1 1 0 000 2zM18 2.5c-8.82 0-16 6.28-16 14A13.31 13.31 0 007.45 27h2.73a3 3 0 01-.15-.64A11.62 11.62 0 014 16.5c0-6.62 6.28-12 14-12s14 5.38 14 12a11.09 11.09 0 01-3.71 8.11 1 1 0 00-.32.73v5.34l-4.38-2.79a1 1 0 00-.83-.11 16.11 16.11 0 01-3.22.64 3 3 0 01.42 2 18.13 18.13 0 002.92-.56l5.53 3.52a1 1 0 001.38-.3 1 1 0 00.21-.58v-6.73a13 13 0 004-9.27c0-7.72-7.18-14-16-14zm.06 26.44l-4-4a1.5 1.5 0 00-2.12 2.12l1.44 1.44H3a1.5 1.5 0 000 3h10.38l-1.44 1.44a1.49 1.49 0 000 2.12 1.5 1.5 0 002.12 0l4-4a1.49 1.49 0 000-2.12z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const CalculatorForwardShape = clrIconSVG(`<path d="M22 28v2h4v-4h-2v2h-2zM26 20h-2v2h-2v2h4v-4zM13 23a3.05 3.05 0 011 .18V20h-2v2h-2v2h.78l.1-.12A3 3 0 0113 23zM26 14h-2v2h-2v2h4v-4zM6.28 33A2 2 0 008 34h2a3 3 0 01.17-1zM18 26v.76l1.12 1.12A3 3 0 0120 30v-4z"/><path d="M28 2H8a2 2 0 00-2 2v23h2V4h20v28h-8.78l-.1.12L17.24 34H28a2 2 0 002-2V4a2 2 0 00-2-2z"/><path d="M10 7v4.67h2V8h13.67V6H11a1 1 0 00-1 1zM10 18h4v-4h-2v2h-2v2zM20 20h-2v2h-2v2h4v-4zM20 14h-2v2h-2v2h4v-4zM18.06 28.94l-4-4a1.5 1.5 0 00-2.12 2.12l1.44 1.44H3a1.5 1.5 0 000 3h10.38l-1.44 1.44a1.49 1.49 0 000 2.12 1.5 1.5 0 002.12 0l4-4a1.49 1.49 0 000-2.12z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
+const BundleForwardShape = clrIconSVG(`<path d="M32.43 8.35l-13-6.21a1 1 0 00-.87 0l-15 7.24a1 1 0 00-.57.9v16.55A1 1 0 003 27h3.67L5 26.2V12.13l11 5.27v7.36l2 2v-9.4l13-6.29v14.1l-11 5.34a2.88 2.88 0 01-.83 1.61L17.26 34a1.46 1.46 0 00.2-.05l15-7.24a1 1 0 00.57-.9V9.25a1 1 0 00-.6-.9zM17 15.64L6 10.41l5.9-2.85 10.7 5.35zm7.88-3.83L14.21 6.46 19 4.15l10.93 5.22z"/><path d="M18.06 28.94l-4-4a1.5 1.5 0 00-2.12 2.12l1.44 1.44H3a1.5 1.5 0 000 3h10.38l-1.44 1.44a1.49 1.49 0 000 2.12 1.5 1.5 0 002.12 0l4-4a1.49 1.49 0 000-2.12z"/><path fill="none" d="M0 0h36v36H0z"/>`, '0 0 36 36');
 const ClrAddonsIconShapes = {
     'air-conditioner': ACShape,
     accessories: AccessoriesShape,
@@ -5014,6 +5131,23 @@ const ClrAddonsIconShapes = {
     'view-360': View360Shape,
     'wheel-to-wheel': WheelToWheelShape,
     'windscreen-wash': WindscreenWashShape,
+    'wrench-fwd': WrenchForward,
+    topcard: TopcardShape,
+    'task-appointment': TaskAndAppointment,
+    parts: PartsShape,
+    'parts-fwd': PartsForwardShape,
+    'parts-nonstock': PartsNonStockShape,
+    'parts-nonstock-fwd': PartNonStockForwardShape,
+    'paint-material': PaintMaterialShape,
+    'paint-material-fwd': PaintMaterialForwardShape,
+    'items-receive': ItemsRecieveShape,
+    'items-forward': ItemsForwardShape,
+    'dollar-bill': DollarBillShape,
+    'money-fwd': DollarBillForwardShape,
+    'blocksgroup-fwd': BlocksGroupForwardShape,
+    'text-fwd': TextForward,
+    'calculator-fwd': CalculatorForwardShape,
+    'bundle-fwd': BundleForwardShape,
 };
 
 /*
@@ -5056,5 +5190,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, 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 };
+export { ACShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BlocksGroupForwardShape, BrochureShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, 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, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, 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, DollarBillForwardShape, DollarBillShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HybridShape, ItemsForwardShape, ItemsRecieveShape, LoadingVolumeShape, LocateShape, LocationBarComponent, LocationBarContentProvider, LocationBarNode, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintMaterialForwardShape, PaintMaterialShape, PaintShopShape, PartNonStockForwardShape, PartsForwardShape, PartsNonStockShape, PartsShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RoadsideAssistanceShape, RouteShape, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StockLocatorCommercialShape, StockLocatorPrivateShape, TaskAndAppointment, TaxiDealerShape, TextForward, TopcardShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, TreetableCellRenderer, TreetableHeaderRenderer, TreetableMainRenderer, TreetableRowRenderer, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VirtualRealityShape, WheelToWheelShape, WindscreenWashShape, WrenchForward, clrIconSVG, escapeHtml, escapeRegex };
 //# sourceMappingURL=clr-addons.mjs.map