@porscheinformatik/clr-addons 21.1.1 → 21.1.3

package/fesm2022/porscheinformatik-clr-addons.mjs

@@ -42,10 +42,10 @@ class ClrBackButton {
     back() {
         this.location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBackButton, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrBackButton, isStandalone: false, selector: "clr-back-button", ngImport: i0, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n  <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButton, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrBackButton, isStandalone: false, selector: "clr-back-button", ngImport: i0, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n  <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBackButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButton, decorators: [{
             type: Component,
             args: [{ selector: 'clr-back-button', standalone: false, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n  <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i1.Location }] });
@@ -56,11 +56,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrBackButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBackButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrBackButtonModule, declarations: [ClrBackButton], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrBackButton] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBackButtonModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButtonModule, declarations: [ClrBackButton], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrBackButton] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButtonModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBackButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -87,10 +87,10 @@ class ClrBreadcrumbService {
     updateBreadcrumb(breadcrumbElements) {
         this.breadcrumbChange.next(breadcrumbElements);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumbService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -118,10 +118,10 @@ class ClrBreadcrumb {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumb, deps: [{ token: ClrBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrBreadcrumb, isStandalone: false, selector: "clr-breadcrumb", ngImport: i0, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb\">\n    @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n    <li class=\"breadcrumb-item\">\n      <a [routerLink]=\"breadcrumbItem.url\">{{breadcrumbItem.label}}</a>\n    </li>\n    } @if (!breadcrumbItem.url) {\n    <li class=\"breadcrumb-item active\">{{breadcrumbItem.label}}</li>\n    } }\n  </ol>\n</nav>\n}\n", dependencies: [{ kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumb, deps: [{ token: ClrBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrBreadcrumb, isStandalone: false, selector: "clr-breadcrumb", ngImport: i0, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb\">\n    @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n    <li class=\"breadcrumb-item\">\n      <a [routerLink]=\"breadcrumbItem.url\">{{breadcrumbItem.label}}</a>\n    </li>\n    } @if (!breadcrumbItem.url) {\n    <li class=\"breadcrumb-item active\">{{breadcrumbItem.label}}</li>\n    } }\n  </ol>\n</nav>\n}\n", dependencies: [{ kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumb, decorators: [{
             type: Component,
             args: [{ selector: 'clr-breadcrumb', standalone: false, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb\">\n    @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n    <li class=\"breadcrumb-item\">\n      <a [routerLink]=\"breadcrumbItem.url\">{{breadcrumbItem.label}}</a>\n    </li>\n    } @if (!breadcrumbItem.url) {\n    <li class=\"breadcrumb-item active\">{{breadcrumbItem.label}}</li>\n    } }\n  </ol>\n</nav>\n}\n" }]
         }], ctorParameters: () => [{ type: ClrBreadcrumbService }] });
@@ -132,11 +132,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrBreadcrumbModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumbModule, declarations: [ClrBreadcrumb], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrBreadcrumb] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumbModule, providers: [ClrBreadcrumbService], imports: [CommonModule, ClarityModule, RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbModule, declarations: [ClrBreadcrumb], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrBreadcrumb] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbModule, providers: [ClrBreadcrumbService], imports: [CommonModule, ClarityModule, RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBreadcrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, RouterModule],
@@ -190,8 +190,8 @@ class ClrCollapseExpandSection {
         }
         this.isCollapsed = !this.isCollapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrCollapseExpandSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrCollapseExpandSection, isStandalone: false, selector: "clr-collapse-expand-section", inputs: { isCollapsed: ["clrIsCollapsed", "isCollapsed"], disableHeaderStyles: ["clrDisableHeaderStyles", "disableHeaderStyles"], disableSubtitle: ["clrDisableSubtitle", "disableSubtitle"] }, outputs: { collapsed: "clrCollapsed", expanded: "clrExpanded" }, ngImport: i0, template: "<div class=\"ces\">\n  <ng-template #titleContent>\n    <ng-content select=\"[clr-ces-title]\"></ng-content>\n  </ng-template>\n  <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n    @if (!disableHeaderStyles) {\n    <h2>\n      <span\n        class=\"ces-title-trigger\"\n        (click)=\"onCollapseExpand()\"\n        (keydown.enter)=\"onCollapseExpand()\"\n        (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n      >\n        <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n      </span>\n      <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n    </h2>\n    } @else {\n    <span\n      class=\"ces-title-trigger\"\n      (click)=\"onCollapseExpand()\"\n      (keydown.enter)=\"onCollapseExpand()\"\n      (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n      tabindex=\"0\"\n      role=\"button\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n    >\n      <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n    </span>\n    <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n    }\n    <ng-template #caretBtn>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <cds-icon\n          shape=\"angle\"\n          size=\"28\"\n          class=\"ces-caret-icon\"\n          [@rotateIcon]=\"isCollapsed\"\n          [@.disabled]=\"disableAnimation\"\n        ></cds-icon>\n      </button>\n    </ng-template>\n  </div>\n  <ng-template #subtitleContent>\n    <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n  </ng-template>\n  @if (!disableSubtitle) {\n  <div class=\"ces-subtitle\">\n    @if (!disableHeaderStyles) {\n    <h4>\n      <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n    </h4>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n    }\n  </div>\n  } @if (!isCollapsed) {\n  <div [@collapseExpandAnimation]=\"isCollapsed\" [@.disabled]=\"disableAnimation\">\n    <ng-content select=\"[clr-ces-content]\"></ng-content>\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrCollapseExpandSection, isStandalone: false, selector: "clr-collapse-expand-section", inputs: { isCollapsed: ["clrIsCollapsed", "isCollapsed"], disableHeaderStyles: ["clrDisableHeaderStyles", "disableHeaderStyles"], disableSubtitle: ["clrDisableSubtitle", "disableSubtitle"] }, outputs: { collapsed: "clrCollapsed", expanded: "clrExpanded" }, ngImport: i0, template: "<div class=\"ces\">\n  <ng-template #titleContent>\n    <ng-content select=\"[clr-ces-title]\"></ng-content>\n  </ng-template>\n  <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n    @if (!disableHeaderStyles) {\n    <h2>\n      <span\n        class=\"ces-title-trigger\"\n        (click)=\"onCollapseExpand()\"\n        (keydown.enter)=\"onCollapseExpand()\"\n        (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n      >\n        <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n      </span>\n      <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n    </h2>\n    } @else {\n    <span\n      class=\"ces-title-trigger\"\n      (click)=\"onCollapseExpand()\"\n      (keydown.enter)=\"onCollapseExpand()\"\n      (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n      tabindex=\"0\"\n      role=\"button\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n    >\n      <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n    </span>\n    <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n    }\n    <ng-template #caretBtn>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <cds-icon\n          shape=\"angle\"\n          size=\"28\"\n          class=\"ces-caret-icon\"\n          [@rotateIcon]=\"isCollapsed\"\n          [@.disabled]=\"disableAnimation\"\n        ></cds-icon>\n      </button>\n    </ng-template>\n  </div>\n  <ng-template #subtitleContent>\n    <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n  </ng-template>\n  @if (!disableSubtitle) {\n  <div class=\"ces-subtitle\">\n    @if (!disableHeaderStyles) {\n    <h4>\n      <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n    </h4>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n    }\n  </div>\n  } @if (!isCollapsed) {\n  <div [@collapseExpandAnimation]=\"isCollapsed\" [@.disabled]=\"disableAnimation\">\n    <ng-content select=\"[clr-ces-content]\"></ng-content>\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], animations: [
             trigger('collapseExpandAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0, overflow: 'hidden' }),
@@ -210,7 +210,7 @@ class ClrCollapseExpandSection {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrCollapseExpandSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSection, decorators: [{
             type: Component,
             args: [{ selector: 'clr-collapse-expand-section', animations: [
                         trigger('collapseExpandAnimation', [
@@ -253,11 +253,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrCollapseExpandSectionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrCollapseExpandSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrCollapseExpandSectionModule, declarations: [ClrCollapseExpandSection], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrCollapseExpandSection] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrCollapseExpandSectionModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSectionModule, declarations: [ClrCollapseExpandSection], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrCollapseExpandSection] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSectionModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrCollapseExpandSectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -313,8 +313,8 @@ class ClrContentPanel {
         // this event is used by the tree table to adjust the colomns width
         window.dispatchEvent(new Event('resize'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrContentPanel, isStandalone: false, selector: "clr-content-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.content-panel": "true" } }, ngImport: i0, template: "@if (_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      <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"24\"></cds-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}\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrContentPanel, isStandalone: false, selector: "clr-content-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.content-panel": "true" } }, ngImport: i0, template: "@if (_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      <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"24\"></cds-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}\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-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 }))]),
@@ -325,7 +325,7 @@ class ClrContentPanel {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanel, decorators: [{
             type: Component,
             args: [{ selector: 'clr-content-panel', animations: [
                         trigger('slideIn', [
@@ -353,8 +353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrContentPanelContainer {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrContentPanelContainer, isStandalone: false, selector: "clr-content-panel-container", host: { properties: { "class.content-container": "true", "class.content-panel-container": "true" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrContentPanelContainer, isStandalone: false, 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>
@@ -362,7 +362,7 @@ class ClrContentPanelContainer {
     <ng-content select="clr-content-panel"></ng-content>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-content-panel-container',
@@ -387,10 +387,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrContentPanelContainerContent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrContentPanelContainerContent, isStandalone: false, selector: "clr-content-panel-container-content", host: { properties: { "class.content-area": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrContentPanelContainerContent, isStandalone: false, 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: "21.2.17", ngImport: i0, type: ClrContentPanelContainerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainerContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-content-panel-container-content',
@@ -408,10 +408,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrContentPanelContainerFooter {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrContentPanelContainerFooter, isStandalone: false, selector: "clr-content-panel-container-footer", host: { properties: { "class.content-area-footer": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrContentPanelContainerFooter, isStandalone: false, 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: "21.2.17", ngImport: i0, type: ClrContentPanelContainerFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainerFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-content-panel-container-footer',
@@ -429,14 +429,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrContentPanelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelModule, declarations: [ClrContentPanel,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelModule, declarations: [ClrContentPanel,
             ClrContentPanelContainer,
             ClrContentPanelContainerContent,
             ClrContentPanelContainerFooter], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -507,10 +507,10 @@ class ClrDataListPredefinedValidatorDirective {
     validate(control) {
         return ClrDataListValidators.predefined(this.clrDataListPredefined)(control);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrDataListPredefinedValidatorDirective, isStandalone: false, selector: "[clrDataListPredefined]", inputs: { clrDataListPredefined: "clrDataListPredefined" }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrDataListPredefinedValidatorDirective, multi: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDataListPredefinedValidatorDirective, isStandalone: false, selector: "[clrDataListPredefined]", inputs: { clrDataListPredefined: "clrDataListPredefined" }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrDataListPredefinedValidatorDirective, multi: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDataListPredefined]',
@@ -527,11 +527,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDataListValidatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDataListValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrDataListValidatorModule, declarations: [ClrDataListPredefinedValidatorDirective], exports: [ClrDataListPredefinedValidatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDataListValidatorModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListValidatorModule, declarations: [ClrDataListPredefinedValidatorDirective], exports: [ClrDataListPredefinedValidatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListValidatorModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDataListValidatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListValidatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrDataListPredefinedValidatorDirective],
@@ -546,7 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  */
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 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.
  */
@@ -563,8 +563,8 @@ class ClrDateTimeContainer {
         // Append it as a child
         this.renderer.appendChild(inputWrapper, timeInputElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateTimeContainer, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrDateTimeContainer, isStandalone: false, 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeContainer, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrDateTimeContainer, isStandalone: false, 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>
@@ -574,7 +574,7 @@ class ClrDateTimeContainer {
     </ng-template>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateTimeContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-date-time-container',
@@ -603,10 +603,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrTimeInput {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrTimeInput, isStandalone: false, selector: "[clrTime]", host: { properties: { "class.clr-input": "true" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrTimeInput, isStandalone: false, selector: "[clrTime]", host: { properties: { "class.clr-input": "true" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTimeInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTimeInput, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrTime]',
@@ -623,11 +623,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDateTimeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrDateTimeModule, declarations: [ClrDateTimeContainer, ClrTimeInput], imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule], exports: [ClrDateTimeContainer, ClrTimeInput] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateTimeModule, imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeModule, declarations: [ClrDateTimeContainer, ClrTimeInput], imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule], exports: [ClrDateTimeContainer, ClrTimeInput] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeModule, imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
@@ -678,10 +678,10 @@ class ClrDotPager {
     pageArray() {
         return Array(this._pages);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDotPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrDotPager, isStandalone: false, selector: "clr-dot-pager", inputs: { pages: ["clrPages", "pages"], currentPage: ["clrCurrentPage", "currentPage"] }, outputs: { currentPageChange: "clrCurrentPageChange" }, host: { properties: { "class.dot-pager": "true" } }, ngImport: i0, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n  @for (a of pageArray(); track a; let page = $index) {\n  <clr-radio-wrapper>\n    <input clrRadio type=\"radio\" [value]=\"page+1\" [(ngModel)]=\"currentPage\" name=\"{{uniqueName}}\" />\n    <label>&nbsp;</label>\n  </clr-radio-wrapper>\n  }\n</clr-radio-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i2$2.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i2$2.ClrRadioContainer, selector: "clr-radio-container", inputs: ["clrInline"] }, { kind: "component", type: i2$2.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrDotPager, isStandalone: false, selector: "clr-dot-pager", inputs: { pages: ["clrPages", "pages"], currentPage: ["clrCurrentPage", "currentPage"] }, outputs: { currentPageChange: "clrCurrentPageChange" }, host: { properties: { "class.dot-pager": "true" } }, ngImport: i0, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n  @for (a of pageArray(); track a; let page = $index) {\n  <clr-radio-wrapper>\n    <input clrRadio type=\"radio\" [value]=\"page+1\" [(ngModel)]=\"currentPage\" name=\"{{uniqueName}}\" />\n    <label>&nbsp;</label>\n  </clr-radio-wrapper>\n  }\n</clr-radio-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i2$2.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i2$2.ClrRadioContainer, selector: "clr-radio-container", inputs: ["clrInline"] }, { kind: "component", type: i2$2.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDotPager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPager, decorators: [{
             type: Component,
             args: [{ selector: 'clr-dot-pager', host: { '[class.dot-pager]': 'true' }, standalone: false, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n  @for (a of pageArray(); track a; let page = $index) {\n  <clr-radio-wrapper>\n    <input clrRadio type=\"radio\" [value]=\"page+1\" [(ngModel)]=\"currentPage\" name=\"{{uniqueName}}\" />\n    <label>&nbsp;</label>\n  </clr-radio-wrapper>\n  }\n</clr-radio-container>\n}\n" }]
         }], propDecorators: { currentPageChange: [{
@@ -701,11 +701,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDotPagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDotPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrDotPagerModule, declarations: [ClrDotPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrDotPager] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDotPagerModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPagerModule, declarations: [ClrDotPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrDotPager] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPagerModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDotPagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -818,10 +818,10 @@ class ClrDropdownOverflowDirective {
         const pxPerVhUnit = window.innerHeight / 100;
         return vh * pxPerVhUnit;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrDropdownOverflowDirective, isStandalone: false, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight", clrMarginBottom: "clrMarginBottom" }, queries: [{ propertyName: "nestedDropdownChildren", predicate: ClrDropdown, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDropdownOverflowDirective, isStandalone: false, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight", clrMarginBottom: "clrMarginBottom" }, queries: [{ propertyName: "nestedDropdownChildren", predicate: ClrDropdown, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-dropdown-menu',
@@ -976,10 +976,10 @@ class ClrFlowBar {
         const index = this.getCurrentIndex();
         return this._steps.slice(index + 1, this._steps.length).find(step => step.enabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrFlowBar, isStandalone: false, 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  @for (step of _steps; track step; 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    @if (!last) {\n    <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n    }\n  </div>\n  }\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    <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n  </button>\n  <clr-dropdown-menu>\n    @for (step of _steps; track step; 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    }\n  </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrFlowBar, isStandalone: false, 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  @for (step of _steps; track step; 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    @if (!last) {\n    <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n    }\n  </div>\n  }\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    <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n  </button>\n  <clr-dropdown-menu>\n    @for (step of _steps; track step; 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    }\n  </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFlowBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFlowBar, decorators: [{
             type: Component,
             args: [{ selector: 'clr-flow-bar', host: {
                         '[class.flow-bar]': 'true',
@@ -1001,11 +1001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDropdownOverflowModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDropdownOverflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrDropdownOverflowModule, declarations: [ClrDropdownOverflowDirective], exports: [ClrDropdownOverflowDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDropdownOverflowModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowModule, declarations: [ClrDropdownOverflowDirective], exports: [ClrDropdownOverflowDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrDropdownOverflowDirective],
@@ -1025,11 +1025,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrFlowBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFlowBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule], exports: [ClrFlowBar] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFlowBarModule, imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFlowBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule], exports: [ClrFlowBar] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFlowBarModule, imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFlowBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFlowBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
@@ -1095,10 +1095,10 @@ class ClrGenericQuickList {
     ngOnDestroy() {
         clearTimeout(this.timeout);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrGenericQuickList, isStandalone: false, 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", compactMode: "compactMode" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true", "class.readonly-list": "this.readonly" } }, 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  @for (item of allItems; track item; let i = $index) {\n  <div class=\"controls-wrapper\">\n    @if (itemTemplate) {\n    <div class=\"controls-container\" #row>\n      <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n    </div>\n    } @if (!(readonly || readonly === '')) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-link btn-trash\"\n      [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n      [disabled]=\"required && allItems.length === 1\"\n      (click)=\"removeItem(item)\"\n    >\n      <cds-icon shape=\"trash\"></cds-icon>\n    </button>\n    } @if (!(readonly || readonly === '') && compactMode && i === allItems.length - 1) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-link quick-list-addcompact\"\n      (click)=\"addItem()\"\n      [disabled]=\"!addPossible\"\n    >\n      <cds-icon shape=\"plus-circle\"></cds-icon>\n    </button>\n    }\n  </div>\n  } @if (!(readonly || readonly === '') && allItems.length === 0 && compactMode) {\n  <button\n    type=\"button\"\n    class=\"btn btn-icon btn-link quick-list-addcompact\"\n    (click)=\"addItem()\"\n    [disabled]=\"!addPossible\"\n  >\n    <cds-icon shape=\"plus-circle\"></cds-icon>\n  </button>\n  } @if (!(readonly || readonly === '') && !compactMode) {\n  <button type=\"button\" class=\"btn btn-link btn-sm btn-add\" (click)=\"addItem()\" [disabled]=\"!addPossible\">\n    {{addLabel}}\n  </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrGenericQuickList, isStandalone: false, 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", compactMode: "compactMode" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true", "class.readonly-list": "this.readonly" } }, 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  @for (item of allItems; track item; let i = $index) {\n  <div class=\"controls-wrapper\">\n    @if (itemTemplate) {\n    <div class=\"controls-container\" #row>\n      <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n    </div>\n    } @if (!(readonly || readonly === '')) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-link btn-trash\"\n      [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n      [disabled]=\"required && allItems.length === 1\"\n      (click)=\"removeItem(item)\"\n    >\n      <cds-icon shape=\"trash\"></cds-icon>\n    </button>\n    } @if (!(readonly || readonly === '') && compactMode && i === allItems.length - 1) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-link quick-list-addcompact\"\n      (click)=\"addItem()\"\n      [disabled]=\"!addPossible\"\n    >\n      <cds-icon shape=\"plus-circle\"></cds-icon>\n    </button>\n    }\n  </div>\n  } @if (!(readonly || readonly === '') && allItems.length === 0 && compactMode) {\n  <button\n    type=\"button\"\n    class=\"btn btn-icon btn-link quick-list-addcompact\"\n    (click)=\"addItem()\"\n    [disabled]=\"!addPossible\"\n  >\n    <cds-icon shape=\"plus-circle\"></cds-icon>\n  </button>\n  } @if (!(readonly || readonly === '') && !compactMode) {\n  <button type=\"button\" class=\"btn btn-link btn-sm btn-add\" (click)=\"addItem()\" [disabled]=\"!addPossible\">\n    {{addLabel}}\n  </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrGenericQuickList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrGenericQuickList, decorators: [{
             type: Component,
             args: [{ selector: 'clr-generic-quick-list', host: { '[class.generic-quick-list]': 'true', '[class.clr-form-control]': 'true' }, standalone: false, 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  @for (item of allItems; track item; let i = $index) {\n  <div class=\"controls-wrapper\">\n    @if (itemTemplate) {\n    <div class=\"controls-container\" #row>\n      <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n    </div>\n    } @if (!(readonly || readonly === '')) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-link btn-trash\"\n      [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n      [disabled]=\"required && allItems.length === 1\"\n      (click)=\"removeItem(item)\"\n    >\n      <cds-icon shape=\"trash\"></cds-icon>\n    </button>\n    } @if (!(readonly || readonly === '') && compactMode && i === allItems.length - 1) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-link quick-list-addcompact\"\n      (click)=\"addItem()\"\n      [disabled]=\"!addPossible\"\n    >\n      <cds-icon shape=\"plus-circle\"></cds-icon>\n    </button>\n    }\n  </div>\n  } @if (!(readonly || readonly === '') && allItems.length === 0 && compactMode) {\n  <button\n    type=\"button\"\n    class=\"btn btn-icon btn-link quick-list-addcompact\"\n    (click)=\"addItem()\"\n    [disabled]=\"!addPossible\"\n  >\n    <cds-icon shape=\"plus-circle\"></cds-icon>\n  </button>\n  } @if (!(readonly || readonly === '') && !compactMode) {\n  <button type=\"button\" class=\"btn btn-link btn-sm btn-add\" (click)=\"addItem()\" [disabled]=\"!addPossible\">\n    {{addLabel}}\n  </button>\n  }\n</div>\n" }]
         }], propDecorators: { allItems: [{
@@ -1146,11 +1146,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrGenericQuickListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrGenericQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrGenericQuickListModule, declarations: [ClrGenericQuickList], imports: [CommonModule, ClarityModule], exports: [ClrGenericQuickList] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrGenericQuickListModule, imports: [CommonModule, ClarityModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrGenericQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrGenericQuickListModule, declarations: [ClrGenericQuickList], imports: [CommonModule, ClarityModule], exports: [ClrGenericQuickList] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrGenericQuickListModule, imports: [CommonModule, ClarityModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrGenericQuickListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrGenericQuickListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -1183,10 +1183,10 @@ class ClrIconAvatar {
     getShape() {
         return this.shape ?? 'user';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIconAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrIconAvatar, isStandalone: false, selector: "clr-icon-avatar", inputs: { shape: ["clrShape", "shape"], 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-icon\">\n    <cds-icon [shape]=\"getShape()\"></cds-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i1$2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIconAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrIconAvatar, isStandalone: false, selector: "clr-icon-avatar", inputs: { shape: ["clrShape", "shape"], 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-icon\">\n    <cds-icon [shape]=\"getShape()\"></cds-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i1$2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIconAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIconAvatar, decorators: [{
             type: Component,
             args: [{ selector: 'clr-icon-avatar', standalone: false, template: "<div class=\"avatar-circle\">\n  <div #avatar class=\"avatar-icon\">\n    <cds-icon [shape]=\"getShape()\"></cds-icon>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { avatar: [{
@@ -1209,11 +1209,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrIconAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIconAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrIconAvatarModule, declarations: [ClrIconAvatar], imports: [CommonModule, ClarityModule, ClrIcon], exports: [ClrIconAvatar] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIconAvatarModule, imports: [CommonModule, ClarityModule, ClrIcon] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIconAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrIconAvatarModule, declarations: [ClrIconAvatar], imports: [CommonModule, ClarityModule, ClrIcon], exports: [ClrIconAvatar] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIconAvatarModule, imports: [CommonModule, ClarityModule, ClrIcon] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIconAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIconAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, ClrIcon],
@@ -1229,7 +1229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  */
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 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.
  */
@@ -1247,7 +1247,7 @@ class ClrLetterAvatar {
         if (this.name !== undefined) {
             return this.name.split(/\s/).reduce((response, word) => {
                 if (response.length < 2) {
-                    return (response += word.slice(0, 1));
+                    return response + word.slice(0, 1);
                 }
                 else {
                     return response;
@@ -1258,10 +1258,10 @@ class ClrLetterAvatar {
             return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLetterAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrLetterAvatar, isStandalone: false, 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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrLetterAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrLetterAvatar, isStandalone: false, 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: "21.2.17", ngImport: i0, type: ClrLetterAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrLetterAvatar, decorators: [{
             type: Component,
             args: [{ selector: 'clr-letter-avatar', standalone: false, template: "<div class=\"avatar-circle\">\n  <div #avatar class=\"avatar-initials\">{{getInitials()}}</div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { avatar: [{
@@ -1284,11 +1284,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrLetterAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLetterAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrLetterAvatarModule, declarations: [ClrLetterAvatar], imports: [CommonModule, ClarityModule], exports: [ClrLetterAvatar] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLetterAvatarModule, imports: [CommonModule, ClarityModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrLetterAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrLetterAvatarModule, declarations: [ClrLetterAvatar], imports: [CommonModule, ClarityModule], exports: [ClrLetterAvatar] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrLetterAvatarModule, imports: [CommonModule, ClarityModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLetterAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrLetterAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -1318,10 +1318,10 @@ class ClrMainNavGroupItem {
         this.renderer.setAttribute(this.el.nativeElement, 'tabindex', '-1');
         this.el.nativeElement.blur();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroupItem, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrMainNavGroupItem, isStandalone: false, selector: "[clrMainNavGroupItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMainNavGroupItem, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrMainNavGroupItem, isStandalone: false, selector: "[clrMainNavGroupItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroupItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMainNavGroupItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMainNavGroupItem]',
@@ -1464,10 +1464,10 @@ class ClrMainNavGroup {
         this.currentFocusedId = 0;
         setTimeout(() => this.items.toArray()[this.currentFocusedId].focus());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroup, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrMainNavGroup, isStandalone: false, selector: "clr-main-nav-group", inputs: { title: ["clrTitle", "title"], icon: ["clrIcon", "icon"] }, 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}}\">\n    @if (icon) {\n    <cds-icon class=\"title-icon\" [shape]=\"icon\"></cds-icon>\n    } {{title}}\n    <cds-icon class=\"dropdown-icon\" shape=\"angle\" direction=\"down\"></cds-icon>\n  </label>\n  <div class=\"nav-list dropdown-menu\">\n    <ng-content></ng-content>\n  </div>\n</section>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMainNavGroup, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrMainNavGroup, isStandalone: false, selector: "clr-main-nav-group", inputs: { title: ["clrTitle", "title"], icon: ["clrIcon", "icon"] }, 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}}\">\n    @if (icon) {\n    <cds-icon class=\"title-icon\" [shape]=\"icon\"></cds-icon>\n    } {{title}}\n    <cds-icon class=\"dropdown-icon\" shape=\"angle\" direction=\"down\"></cds-icon>\n  </label>\n  <div class=\"nav-list dropdown-menu\">\n    <ng-content></ng-content>\n  </div>\n</section>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMainNavGroup, decorators: [{
             type: Component,
             args: [{ selector: 'clr-main-nav-group', host: { '[class.main-nav-group]': 'true' }, standalone: false, 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}}\">\n    @if (icon) {\n    <cds-icon class=\"title-icon\" [shape]=\"icon\"></cds-icon>\n    } {{title}}\n    <cds-icon class=\"dropdown-icon\" shape=\"angle\" direction=\"down\"></cds-icon>\n  </label>\n  <div class=\"nav-list dropdown-menu\">\n    <ng-content></ng-content>\n  </div>\n</section>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
@@ -1487,11 +1487,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrMainNavGroupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroupModule, declarations: [ClrMainNavGroup, ClrMainNavGroupItem], imports: [CommonModule, RouterModule, ClarityModule], exports: [ClrMainNavGroup, ClrMainNavGroupItem] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroupModule, imports: [CommonModule, RouterModule, ClarityModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMainNavGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrMainNavGroupModule, declarations: [ClrMainNavGroup, ClrMainNavGroupItem], imports: [CommonModule, RouterModule, ClarityModule], exports: [ClrMainNavGroup, ClrMainNavGroupItem] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMainNavGroupModule, imports: [CommonModule, RouterModule, ClarityModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMainNavGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, ClarityModule],
@@ -1573,10 +1573,10 @@ class ClrRequiredOneMultilang {
     validate(control) {
         return this._active ? ClrMultilingualInputValidators.requiredOne()(control) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrRequiredOneMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrRequiredOneMultilang, isStandalone: false, selector: "[clrRequiredOneMultilang]", inputs: { active: ["clrRequiredOneMultilang", "active"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredOneMultilang, multi: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrRequiredOneMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrRequiredOneMultilang, isStandalone: false, selector: "[clrRequiredOneMultilang]", inputs: { active: ["clrRequiredOneMultilang", "active"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredOneMultilang, multi: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrRequiredOneMultilang, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrRequiredOneMultilang, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrRequiredOneMultilang]',
@@ -1594,10 +1594,10 @@ class ClrRequiredAllMultilang {
     validate(control) {
         return this._active ? ClrMultilingualInputValidators.requiredAll()(control) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrRequiredAllMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrRequiredAllMultilang, isStandalone: false, selector: "[clrRequiredAllMultilang]", inputs: { active: ["clrRequiredAllMultilang", "active"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredAllMultilang, multi: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrRequiredAllMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrRequiredAllMultilang, isStandalone: false, selector: "[clrRequiredAllMultilang]", inputs: { active: ["clrRequiredAllMultilang", "active"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrRequiredAllMultilang, multi: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrRequiredAllMultilang, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrRequiredAllMultilang, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrRequiredAllMultilang]',
@@ -1630,10 +1630,10 @@ class ControlIdService {
     get idChange() {
         return this._idChange.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ControlIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ControlIdService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ControlIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ControlIdService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ControlIdService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ControlIdService, decorators: [{
             type: Injectable
         }] });
 
@@ -1717,10 +1717,10 @@ class ClrAbstractFormComponent {
             ClrForm.prototype.markAsTouched = origMarkAsTouched;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAbstractFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrAbstractFormComponent, isStandalone: true, host: { properties: { "class.clr-form-control": "this.formControl", "class.clr-error": "this.showError" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAbstractFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrAbstractFormComponent, isStandalone: true, host: { properties: { "class.clr-form-control": "this.formControl", "class.clr-error": "this.showError" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAbstractFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAbstractFormComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { formControl: [{
                 type: HostBinding,
@@ -1827,10 +1827,10 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualAbstract, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrMultilingualAbstract, isStandalone: true, inputs: { controlClasses: ["clrControlClasses", "controlClasses"], selectedLang: ["clrSelectedLang", "selectedLang"], readonly: "readonly", maxlength: "maxlength", showSingleLanguageSelector: ["clrShowSingleLanguageSelector", "showSingleLanguageSelector"], fallbackLanguage: ["clrFallbackLang", "fallbackLanguage"], missingPre: ["clrMissingPrefix", "missingPre"], langs: ["clrLanguages", "langs"] }, host: { properties: { "class.clr-multilingual": "this.multi" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualAbstract, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrMultilingualAbstract, isStandalone: true, inputs: { controlClasses: ["clrControlClasses", "controlClasses"], selectedLang: ["clrSelectedLang", "selectedLang"], readonly: "readonly", maxlength: "maxlength", showSingleLanguageSelector: ["clrShowSingleLanguageSelector", "showSingleLanguageSelector"], fallbackLanguage: ["clrFallbackLang", "fallbackLanguage"], missingPre: ["clrMissingPrefix", "missingPre"], langs: ["clrLanguages", "langs"] }, 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: "21.2.17", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { multi: [{
                 type: HostBinding,
@@ -1867,8 +1867,8 @@ class ClrMultilingualSelector {
     constructor() {
         this.selectedLangChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrMultilingualSelector, isStandalone: false, selector: "clr-multilingual-selector", inputs: { disabled: "disabled", texts: "texts", selectedLang: "selectedLang" }, outputs: { selectedLangChange: "selectedLangChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrMultilingualSelector, isStandalone: false, selector: "clr-multilingual-selector", inputs: { disabled: "disabled", texts: "texts", selectedLang: "selectedLang" }, outputs: { selectedLangChange: "selectedLangChange" }, ngImport: i0, template: `
     <div>
       <clr-dropdown [clrCloseMenuOnItemClick]="true">
         <button
@@ -1881,18 +1881,20 @@ class ClrMultilingualSelector {
           <cds-icon shape="angle" direction="down"></cds-icon>
         </button>
         <clr-dropdown-menu *clrIfOpen>
-          @for (text of texts | keyvalue; track text) { @if (text.key !== selectedLang) {
-          <div class="clr-multilingual-dd-entry" clrDropdownItem (click)="selectedLangChange.emit(text.key)">
-            <span class="label">{{ text.key }}</span
-            >{{ text.value }}
-          </div>
-          } }
+          @for (text of texts | keyvalue; track text) {
+            @if (text.key !== selectedLang) {
+              <div class="clr-multilingual-dd-entry" clrDropdownItem (click)="selectedLangChange.emit(text.key)">
+                <span class="label">{{ text.key }}</span
+                >{{ text.value }}
+              </div>
+            }
+          }
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-multilingual-selector',
@@ -1909,12 +1911,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           <cds-icon shape="angle" direction="down"></cds-icon>
         </button>
         <clr-dropdown-menu *clrIfOpen>
-          @for (text of texts | keyvalue; track text) { @if (text.key !== selectedLang) {
-          <div class="clr-multilingual-dd-entry" clrDropdownItem (click)="selectedLangChange.emit(text.key)">
-            <span class="label">{{ text.key }}</span
-            >{{ text.value }}
-          </div>
-          } }
+          @for (text of texts | keyvalue; track text) {
+            @if (text.key !== selectedLang) {
+              <div class="clr-multilingual-dd-entry" clrDropdownItem (click)="selectedLangChange.emit(text.key)">
+                <span class="label">{{ text.key }}</span
+                >{{ text.value }}
+              </div>
+            }
+          }
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
@@ -1941,8 +1945,8 @@ class ClrMultilingualInput extends ClrMultilingualAbstract {
     constructor(injector) {
         super(injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualInput, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrMultilingualInput, isStandalone: false, selector: "clr-multilingual-input", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualInput, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrMultilingualInput, isStandalone: false, selector: "clr-multilingual-input", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClrMultilingualInput),
@@ -1951,7 +1955,7 @@ class ClrMultilingualInput extends ClrMultilingualAbstract {
             ControlIdService,
         ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  @if (showLanguageSelector()) {\n  <clr-multilingual-selector\n    [disabled]=\"disabled\"\n    [texts]=\"shownTexts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  } @if (readonly || readonly === '') {\n  <span [title]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\" class=\"text-truncate\">\n    {{ !!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : '' }}\n  </span>\n  } @else {\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]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        autocomplete=\"off\"\n        [maxlength]=\"maxlength || null\"\n        #input\n      />\n      @if (showError) {\n      <cds-icon class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></cds-icon>\n      }\n    </div>\n    @if (!showError) {\n    <ng-content select=\"clr-control-helper\"></ng-content>\n    } @if (showError) {\n    <ng-content select=\"clr-control-error\"></ng-content>\n    }\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualInput, decorators: [{
             type: Component,
             args: [{ selector: 'clr-multilingual-input', providers: [
                         {
@@ -1973,8 +1977,8 @@ class ClrMultilingualTextarea extends ClrMultilingualAbstract {
     constructor(injector) {
         super(injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualTextarea, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrMultilingualTextarea, isStandalone: false, selector: "clr-multilingual-textarea", inputs: { rows: "rows" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualTextarea, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrMultilingualTextarea, isStandalone: false, selector: "clr-multilingual-textarea", inputs: { rows: "rows" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClrMultilingualTextarea),
@@ -1983,7 +1987,7 @@ class ClrMultilingualTextarea extends ClrMultilingualAbstract {
             ControlIdService,
         ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  @if (showLanguageSelector()) {\n  <clr-multilingual-selector\n    [disabled]=\"disabled\"\n    [texts]=\"shownTexts\"\n    [selectedLang]=\"selectedLang\"\n    (selectedLangChange)=\"changeLanguage($event)\"\n  >\n  </clr-multilingual-selector>\n  }\n  <div class=\"clr-multi-input-wrapper\">\n    <div class=\"clr-textarea-wrapper\">\n      <textarea\n        class=\"clr-textarea\"\n        [id]=\"inputId\"\n        [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n        (ngModelChange)=\"setText(selectedLang, $event)\"\n        (blur)=\"onTouch()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly || readonly === ''\"\n        [maxlength]=\"maxlength || null\"\n        [rows]=\"rows || 1\"\n        #input\n      ></textarea>\n      @if (showError) {\n      <cds-icon class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></cds-icon>\n      }\n    </div>\n    @if (!showError) {\n    <ng-content select=\"clr-control-helper\"></ng-content>\n    } @if (showError) {\n    <ng-content select=\"clr-control-error\"></ng-content>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'clr-multilingual-textarea', providers: [
                         {
@@ -2003,8 +2007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrMultilingualModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualModule, declarations: [ClrMultilingualInput,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualModule, declarations: [ClrMultilingualInput,
             ClrMultilingualTextarea,
             ClrRequiredOneMultilang,
             ClrRequiredAllMultilang,
@@ -2013,9 +2017,9 @@ class ClrMultilingualModule {
             ClrRequiredOneMultilang,
             ClrRequiredAllMultilang,
             ClrMultilingualSelector] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualModule, imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualModule, imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMultilingualModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
@@ -2043,12 +2047,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  */
 
 /*
- * Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 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-2021 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 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.
  */
@@ -2103,7 +2107,7 @@ class ClrNotificationRef {
 }
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 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.
  */
@@ -2153,7 +2157,7 @@ function zonedInterval(period, zone) {
 }
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 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.
  */
@@ -2220,8 +2224,8 @@ class ClrNotification {
     setCurrentPosition() {
         zonedTimer(300, this.ngZone).subscribe(() => (this.state = { value: 'currentPosition', params: { absolute: this._translate } }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotification, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrNotification, isStandalone: false, 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  @if (progressbar && timeout > 0) {\n  <div class=\"progress top\" [ngClass]=\"notificationType\">\n    <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\"></progress>\n  </div>\n  }\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNotification, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrNotification, isStandalone: false, 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  @if (progressbar && timeout > 0) {\n  <div class=\"progress top\" [ngClass]=\"notificationType\">\n    <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\"></progress>\n  </div>\n  }\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }], animations: [
             trigger('slideDown', [
                 transition(':enter', [
                     style({ transform: 'translateY(-200%)' }),
@@ -2241,7 +2245,7 @@ class ClrNotification {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotification, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNotification, decorators: [{
             type: Component,
             args: [{ selector: 'clr-notification', animations: [
                         trigger('slideDown', [
@@ -2285,11 +2289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrNotificationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationModule, declarations: [ClrNotification], imports: [CommonModule, ClarityModule, FormsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrNotificationModule, declarations: [ClrNotification], imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNotificationModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNotificationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -2373,10 +2377,10 @@ class ClrNotificationService {
             notificationInstance.progressbar = options.progressbar;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationService, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNotificationService, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNotificationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNotificationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: Document, decorators: [{
                     type: Inject,
@@ -2515,7 +2519,7 @@ function strip(value, removeLeadingZeros = false, decimalSeparator, groupingSepa
  */
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 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.
  */
@@ -2577,9 +2581,7 @@ class ClrNumericField {
         this._unit = null;
         this.allowedKeys = new Set(NUMBERS);
         /* Control Values Accessor Stuff below */
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
     }
     ngOnInit() {
@@ -2737,8 +2739,8 @@ class ClrNumericField {
         // 16 is the highest precision before numbers have weird behaviour. see https://stackoverflow.com/q/21472828/15120942
         return Math[method](+(value * Math.pow(10, this.decimalPlaces)).toPrecision(15)) / Math.pow(10, this.decimalPlaces);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNumericField, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrNumericField, isStandalone: false, 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNumericField, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrNumericField, isStandalone: false, 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),
@@ -2746,7 +2748,7 @@ class ClrNumericField {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNumericField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNumericField, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrNumeric]',
@@ -2887,10 +2889,10 @@ class ClrMaxNumeric {
     validate(control) {
         return ClrNumericFieldValidators.max(this._max, this._groupingSep, this._decimalSep)(control);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMaxNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrMaxNumeric, isStandalone: false, selector: "[clrMaxNumeric]", inputs: { _max: ["clrMaxNumeric", "_max"], _groupingSep: ["clrGroupingSep", "_groupingSep"], _decimalSep: ["clrDecimalSep", "_decimalSep"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrMaxNumeric, multi: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMaxNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrMaxNumeric, isStandalone: false, 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: "21.2.17", ngImport: i0, type: ClrMaxNumeric, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMaxNumeric, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMaxNumeric]',
@@ -2915,10 +2917,10 @@ class ClrMinNumeric {
     validate(control) {
         return ClrNumericFieldValidators.min(this._min, this._groupingSep, this._decimalSep)(control);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMinNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrMinNumeric, isStandalone: false, selector: "[clrMinNumeric]", inputs: { _min: ["clrMinNumeric", "_min"], _groupingSep: ["clrGroupingSep", "_groupingSep"], _decimalSep: ["clrDecimalSep", "_decimalSep"] }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrMinNumeric, multi: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMinNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrMinNumeric, isStandalone: false, 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: "21.2.17", ngImport: i0, type: ClrMinNumeric, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrMinNumeric, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMinNumeric]',
@@ -2942,11 +2944,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrNumericFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNumericFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrNumericFieldModule, declarations: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric], imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule], exports: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNumericFieldModule, imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNumericFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrNumericFieldModule, declarations: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric], imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule], exports: [ClrNumericField, ClrMaxNumeric, ClrMinNumeric] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNumericFieldModule, imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNumericFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrNumericFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
@@ -3070,10 +3072,10 @@ class ClrPager {
         }
         return middlePages;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrPager, isStandalone: false, 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: "@if (last > 1) {\n<div class=\"btn-group\">\n  <button class=\"btn pagination-previous\" (click)=\"previous()\" [disabled]=\"page == 1\">\n    <cds-icon shape=\"angle\" direction=\"left\"></cds-icon>\n  </button>\n  @if (page > 2) {\n  <button class=\"btn\" (click)=\"page = 1\">1</button>\n  } @if (page > 3) {\n  <button class=\"btn\" disabled>...</button>\n  } @for (pageNum of middlePages; track pageNum) { @if (pageNum !== page) {\n  <button class=\"btn\" (click)=\"page = pageNum\">{{pageNum}}</button>\n  } @else {\n  <button class=\"btn btn-primary\" type=\"button\">{{pageNum}}</button>\n  } } @if (page < last - 2) {\n  <button class=\"btn\" disabled>...</button>\n  } @if (page < last - 1) {\n  <button class=\"btn\" (click)=\"page = last\">{{last}}</button>\n  }\n  <button class=\"btn pagination-next\" (click)=\"next()\" [disabled]=\"page == last\">\n    <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n  </button>\n</div>\n}\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrPager, isStandalone: false, 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: "@if (last > 1) {\n<div class=\"btn-group\">\n  <button class=\"btn pagination-previous\" (click)=\"previous()\" [disabled]=\"page == 1\">\n    <cds-icon shape=\"angle\" direction=\"left\"></cds-icon>\n  </button>\n  @if (page > 2) {\n  <button class=\"btn\" (click)=\"page = 1\">1</button>\n  } @if (page > 3) {\n  <button class=\"btn\" disabled>...</button>\n  } @for (pageNum of middlePages; track pageNum) { @if (pageNum !== page) {\n  <button class=\"btn\" (click)=\"page = pageNum\">{{pageNum}}</button>\n  } @else {\n  <button class=\"btn btn-primary\" type=\"button\">{{pageNum}}</button>\n  } } @if (page < last - 2) {\n  <button class=\"btn\" disabled>...</button>\n  } @if (page < last - 1) {\n  <button class=\"btn\" (click)=\"page = last\">{{last}}</button>\n  }\n  <button class=\"btn pagination-next\" (click)=\"next()\" [disabled]=\"page == last\">\n    <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n  </button>\n</div>\n}\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPager, decorators: [{
             type: Component,
             args: [{ selector: 'clr-pager', host: { '[class.pager]': 'true' }, standalone: false, template: "@if (last > 1) {\n<div class=\"btn-group\">\n  <button class=\"btn pagination-previous\" (click)=\"previous()\" [disabled]=\"page == 1\">\n    <cds-icon shape=\"angle\" direction=\"left\"></cds-icon>\n  </button>\n  @if (page > 2) {\n  <button class=\"btn\" (click)=\"page = 1\">1</button>\n  } @if (page > 3) {\n  <button class=\"btn\" disabled>...</button>\n  } @for (pageNum of middlePages; track pageNum) { @if (pageNum !== page) {\n  <button class=\"btn\" (click)=\"page = pageNum\">{{pageNum}}</button>\n  } @else {\n  <button class=\"btn btn-primary\" type=\"button\">{{pageNum}}</button>\n  } } @if (page < last - 2) {\n  <button class=\"btn\" disabled>...</button>\n  } @if (page < last - 1) {\n  <button class=\"btn\" (click)=\"page = last\">{{last}}</button>\n  }\n  <button class=\"btn pagination-next\" (click)=\"next()\" [disabled]=\"page == last\">\n    <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n  </button>\n</div>\n}\n" }]
         }], propDecorators: { pageChange: [{
@@ -3117,10 +3119,10 @@ class ClrPagedSearchResultList {
          */
         this.pageSizeChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrPagedSearchResultList, isStandalone: false, selector: "clr-paged-search-result-list", inputs: { pageSize: ["clrPageSize", "pageSize"], pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeLabel: ["clrPageSizeLabel", "pageSizeLabel"], currentPage: ["clrPage", "currentPage"], totalItems: ["clrTotalItems", "totalItems"], items: ["clrItems", "items"], clrPagerPosition: "clrPagerPosition" }, outputs: { pageChange: "clrPageChange", pageSizeChange: "clrPageSizeChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "@if (clrPagerPosition === 'top' || clrPagerPosition === 'both') {\n<div>\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"> </ng-container>\n</div>\n} @for (item of items; track item) {\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  @if (!itemTemplate) {\n  <div>Item template input is undefined!</div>\n  }\n</ng-container>\n} @if (clrPagerPosition === 'bottom' || clrPagerPosition === 'both') {\n<div>\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"> </ng-container>\n</div>\n}\n<ng-template #pager let-position>\n  <div class=\"clr-row\">\n    <div [class.pager-top]=\"position === 'top'\" [class.pager-bottom]=\"position === 'bottom'\">\n      <ng-container *ngTemplateOutlet=\"pageSizeDropdown\"></ng-container>\n      <clr-pager\n        [clrPage]=\"currentPage\"\n        [clrPageSize]=\"pageSize\"\n        [clrTotalItems]=\"totalItems\"\n        (clrPageChange)=\"pageChange.emit($event)\"\n      ></clr-pager>\n    </div>\n  </div>\n</ng-template>\n<ng-template #pageSizeDropdown>\n  @if (pageSizeOptions?.length > 1) {\n  <div>\n    <clr-dropdown>\n      <button type=\"button\" class=\"btn btn-link options-text-button btn-no-capitalized\" clrDropdownTrigger>\n        {{pageSizeLabel}}: {{pageSize}}\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <button type=\"button\" class=\"btn btn-link options-icon-button\" clrDropdownTrigger>\n        <cds-icon shape=\"cog\"></cds-icon>\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <clr-dropdown-menu class=\"spinner-in-front\" clrPosition=\"top-right\">\n        @for (sizeOption of pageSizeOptions; track sizeOption) {\n        <button type=\"button\" clrDropdownItem (click)=\"pageSizeChange.emit(sizeOption)\">{{sizeOption}}</button>\n        }\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "component", type: ClrPager, selector: "clr-pager", inputs: ["clrPageSize", "clrTotalItems", "clrLast", "clrPage"], outputs: ["clrPageChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrPagedSearchResultList, isStandalone: false, selector: "clr-paged-search-result-list", inputs: { pageSize: ["clrPageSize", "pageSize"], pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeLabel: ["clrPageSizeLabel", "pageSizeLabel"], currentPage: ["clrPage", "currentPage"], totalItems: ["clrTotalItems", "totalItems"], items: ["clrItems", "items"], clrPagerPosition: "clrPagerPosition" }, outputs: { pageChange: "clrPageChange", pageSizeChange: "clrPageSizeChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "@if (clrPagerPosition === 'top' || clrPagerPosition === 'both') {\n<div>\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"> </ng-container>\n</div>\n} @for (item of items; track item) {\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  @if (!itemTemplate) {\n  <div>Item template input is undefined!</div>\n  }\n</ng-container>\n} @if (clrPagerPosition === 'bottom' || clrPagerPosition === 'both') {\n<div>\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"> </ng-container>\n</div>\n}\n<ng-template #pager let-position>\n  <div class=\"clr-row\">\n    <div [class.pager-top]=\"position === 'top'\" [class.pager-bottom]=\"position === 'bottom'\">\n      <ng-container *ngTemplateOutlet=\"pageSizeDropdown\"></ng-container>\n      <clr-pager\n        [clrPage]=\"currentPage\"\n        [clrPageSize]=\"pageSize\"\n        [clrTotalItems]=\"totalItems\"\n        (clrPageChange)=\"pageChange.emit($event)\"\n      ></clr-pager>\n    </div>\n  </div>\n</ng-template>\n<ng-template #pageSizeDropdown>\n  @if (pageSizeOptions?.length > 1) {\n  <div>\n    <clr-dropdown>\n      <button type=\"button\" class=\"btn btn-link options-text-button btn-no-capitalized\" clrDropdownTrigger>\n        {{pageSizeLabel}}: {{pageSize}}\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <button type=\"button\" class=\"btn btn-link options-icon-button\" clrDropdownTrigger>\n        <cds-icon shape=\"cog\"></cds-icon>\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <clr-dropdown-menu class=\"spinner-in-front\" clrPosition=\"top-right\">\n        @for (sizeOption of pageSizeOptions; track sizeOption) {\n        <button type=\"button\" clrDropdownItem (click)=\"pageSizeChange.emit(sizeOption)\">{{sizeOption}}</button>\n        }\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "component", type: ClrPager, selector: "clr-pager", inputs: ["clrPageSize", "clrTotalItems", "clrLast", "clrPage"], outputs: ["clrPageChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagedSearchResultList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPagedSearchResultList, decorators: [{
             type: Component,
             args: [{ selector: 'clr-paged-search-result-list', standalone: false, template: "@if (clrPagerPosition === 'top' || clrPagerPosition === 'both') {\n<div>\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"> </ng-container>\n</div>\n} @for (item of items; track item) {\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  @if (!itemTemplate) {\n  <div>Item template input is undefined!</div>\n  }\n</ng-container>\n} @if (clrPagerPosition === 'bottom' || clrPagerPosition === 'both') {\n<div>\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"> </ng-container>\n</div>\n}\n<ng-template #pager let-position>\n  <div class=\"clr-row\">\n    <div [class.pager-top]=\"position === 'top'\" [class.pager-bottom]=\"position === 'bottom'\">\n      <ng-container *ngTemplateOutlet=\"pageSizeDropdown\"></ng-container>\n      <clr-pager\n        [clrPage]=\"currentPage\"\n        [clrPageSize]=\"pageSize\"\n        [clrTotalItems]=\"totalItems\"\n        (clrPageChange)=\"pageChange.emit($event)\"\n      ></clr-pager>\n    </div>\n  </div>\n</ng-template>\n<ng-template #pageSizeDropdown>\n  @if (pageSizeOptions?.length > 1) {\n  <div>\n    <clr-dropdown>\n      <button type=\"button\" class=\"btn btn-link options-text-button btn-no-capitalized\" clrDropdownTrigger>\n        {{pageSizeLabel}}: {{pageSize}}\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <button type=\"button\" class=\"btn btn-link options-icon-button\" clrDropdownTrigger>\n        <cds-icon shape=\"cog\"></cds-icon>\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <clr-dropdown-menu class=\"spinner-in-front\" clrPosition=\"top-right\">\n        @for (sizeOption of pageSizeOptions; track sizeOption) {\n        <button type=\"button\" clrDropdownItem (click)=\"pageSizeChange.emit(sizeOption)\">{{sizeOption}}</button>\n        }\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </div>\n  }\n</ng-template>\n" }]
         }], propDecorators: { pageSize: [{
@@ -3161,11 +3163,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrPagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrPagerModule, declarations: [ClrPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrPager] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagerModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrPagerModule, declarations: [ClrPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrPager] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPagerModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -3180,11 +3182,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrPagedSearchResultListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagedSearchResultListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrPagedSearchResultListModule, declarations: [ClrPagedSearchResultList], imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule], exports: [ClrPagedSearchResultList] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagedSearchResultListModule, imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPagedSearchResultListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrPagedSearchResultListModule, declarations: [ClrPagedSearchResultList], imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule], exports: [ClrPagedSearchResultList] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPagedSearchResultListModule, imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagedSearchResultListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrPagedSearchResultListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule],
@@ -3250,22 +3252,22 @@ class ClrProgressSpinnerComponent {
             return new Date().getTime() - this.startTimestamp;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrProgressSpinnerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrProgressSpinnerComponent, isStandalone: false, selector: "clr-progress-spinner", inputs: { size: ["clrSize", "size"], showSpinner: ["clrShowSpinner", "showSpinner"] }, host: { properties: { "class.progress-spinner-overlay": "_showSpinner" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrProgressSpinnerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrProgressSpinnerComponent, isStandalone: false, selector: "clr-progress-spinner", inputs: { size: ["clrSize", "size"], showSpinner: ["clrShowSpinner", "showSpinner"] }, host: { properties: { "class.progress-spinner-overlay": "_showSpinner" } }, ngImport: i0, template: `
     @if (_showSpinner) {
-    <span [class]="'spinner-' + size + ' spinner'"></span>
-    <span>&nbsp;<ng-content></ng-content></span>
+      <span [class]="'spinner-' + size + ' spinner'"></span>
+      <span>&nbsp;<ng-content></ng-content></span>
     }
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrProgressSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrProgressSpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-progress-spinner',
                     template: `
     @if (_showSpinner) {
-    <span [class]="'spinner-' + size + ' spinner'"></span>
-    <span>&nbsp;<ng-content></ng-content></span>
+      <span [class]="'spinner-' + size + ' spinner'"></span>
+      <span>&nbsp;<ng-content></ng-content></span>
     }
   `,
                     host: {
@@ -3287,11 +3289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrProgressSpinnerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrProgressSpinnerModule, declarations: [ClrProgressSpinnerComponent], imports: [CommonModule], exports: [ClrProgressSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrProgressSpinnerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrProgressSpinnerModule, declarations: [ClrProgressSpinnerComponent], imports: [CommonModule], exports: [ClrProgressSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrProgressSpinnerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrProgressSpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrProgressSpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -3350,10 +3352,10 @@ class ClrAddOption {
             this.select.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrAddOption, isStandalone: false, selector: "clr-add-option", inputs: { blankOption: "blankOption", value: "value", mandatory: "mandatory", allValues: "allValues", excludedValues: "excludedValues", readonly: "readonly", disabled: "disabled", disableAddButton: "disableAddButton", showAddButton: "showAddButton" }, outputs: { valueChanged: "valueChanged", remove: "remove", add: "add" }, host: { properties: { "class.quick-list-option": "true" } }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "@if (!(readonly || readonly === '')) {\n<div class=\"clr-select-wrapper quick-list-input\">\n  <select #select clr-select class=\"quick-list-select\" name=\"options\" [(ngModel)]=\"selectedValue\" [disabled]=\"disabled\">\n    @if (blankOption.id === selectedValue) {\n    <option [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\">{{blankOption.label}}</option>\n    } @for (val of getValues(); track val) {\n    <option [selected]=\"val.id === selectedValue\" [ngValue]=\"val.id\">{{val.label}}</option>\n    }\n  </select>\n</div>\n} @else {\n<span>{{value.label}}</span>\n} @if (!(readonly || readonly === '')) {\n<button\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-trash\"\n  [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n  [disabled]=\"trashDisabled() || disabled\"\n  (click)=\"remove.emit()\"\n>\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n} @if (!(readonly || readonly === '') && showAddButton) {\n<button\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-addcompact\"\n  (click)=\"add.emit()\"\n  [disabled]=\"disableAddButton\"\n>\n  <cds-icon shape=\"plus-circle\"></cds-icon>\n</button>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAddOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrAddOption, isStandalone: false, selector: "clr-add-option", inputs: { blankOption: "blankOption", value: "value", mandatory: "mandatory", allValues: "allValues", excludedValues: "excludedValues", readonly: "readonly", disabled: "disabled", disableAddButton: "disableAddButton", showAddButton: "showAddButton" }, outputs: { valueChanged: "valueChanged", remove: "remove", add: "add" }, host: { properties: { "class.quick-list-option": "true" } }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "@if (!(readonly || readonly === '')) {\n<div class=\"clr-select-wrapper quick-list-input\">\n  <select #select clr-select class=\"quick-list-select\" name=\"options\" [(ngModel)]=\"selectedValue\" [disabled]=\"disabled\">\n    @if (blankOption.id === selectedValue) {\n    <option [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\">{{blankOption.label}}</option>\n    } @for (val of getValues(); track val) {\n    <option [selected]=\"val.id === selectedValue\" [ngValue]=\"val.id\">{{val.label}}</option>\n    }\n  </select>\n</div>\n} @else {\n<span>{{value.label}}</span>\n} @if (!(readonly || readonly === '')) {\n<button\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-trash\"\n  [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n  [disabled]=\"trashDisabled() || disabled\"\n  (click)=\"remove.emit()\"\n>\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n} @if (!(readonly || readonly === '') && showAddButton) {\n<button\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-addcompact\"\n  (click)=\"add.emit()\"\n  [disabled]=\"disableAddButton\"\n>\n  <cds-icon shape=\"plus-circle\"></cds-icon>\n</button>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAddOption, decorators: [{
             type: Component,
             args: [{ selector: 'clr-add-option', host: { '[class.quick-list-option]': 'true' }, standalone: false, template: "@if (!(readonly || readonly === '')) {\n<div class=\"clr-select-wrapper quick-list-input\">\n  <select #select clr-select class=\"quick-list-select\" name=\"options\" [(ngModel)]=\"selectedValue\" [disabled]=\"disabled\">\n    @if (blankOption.id === selectedValue) {\n    <option [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\">{{blankOption.label}}</option>\n    } @for (val of getValues(); track val) {\n    <option [selected]=\"val.id === selectedValue\" [ngValue]=\"val.id\">{{val.label}}</option>\n    }\n  </select>\n</div>\n} @else {\n<span>{{value.label}}</span>\n} @if (!(readonly || readonly === '')) {\n<button\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-trash\"\n  [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n  [disabled]=\"trashDisabled() || disabled\"\n  (click)=\"remove.emit()\"\n>\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n} @if (!(readonly || readonly === '') && showAddButton) {\n<button\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-addcompact\"\n  (click)=\"add.emit()\"\n  [disabled]=\"disableAddButton\"\n>\n  <cds-icon shape=\"plus-circle\"></cds-icon>\n</button>\n}\n" }]
         }], propDecorators: { blankOption: [{
@@ -3452,8 +3454,8 @@ class ClrQuickList extends ClrAbstractFormComponent {
     addNotPossible() {
         return this.hasBlankOption() || this.values.length === this.allValues.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrQuickList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrQuickList, isStandalone: false, 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", compactMode: "compactMode" }, outputs: { valuesChanged: "clrValuesChanged", emptyOptionAdded: "clrEmptyOptionAdded" }, host: { properties: { "class.quick-list": "true" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrQuickList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrQuickList, isStandalone: false, 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", compactMode: "compactMode" }, outputs: { valuesChanged: "clrValuesChanged", emptyOptionAdded: "clrEmptyOptionAdded" }, host: { properties: { "class.quick-list": "true" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClrQuickList),
@@ -3461,7 +3463,7 @@ class ClrQuickList extends ClrAbstractFormComponent {
             },
         ], 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  @for (value of values; track value; let i = $index) {\n  <clr-add-option\n    [allValues]=\"allValues\"\n    [excludedValues]=\"values\"\n    (remove)=\"onRemoveValue(i)\"\n    (add)=\"addBlankOption()\"\n    [value]=\"value\"\n    (valueChanged)=\"onValueChanged($event, i)\"\n    [blankOption]=\"blankOption\"\n    [mandatory]=\"mandatory\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [disableAddButton]=\"addNotPossible() || disabled\"\n    [showAddButton]=\"compactMode && i === values.length - 1\"\n  >\n  </clr-add-option>\n  } @if (!(readonly || readonly === '') && values.length === 0 && compactMode) {\n  <button\n    type=\"button\"\n    class=\"btn btn-icon btn-link quick-list-addcompact\"\n    (click)=\"addBlankOption()\"\n    [disabled]=\"addNotPossible() || disabled\"\n  >\n    <cds-icon shape=\"plus-circle\"></cds-icon>\n  </button>\n  } @if (!(readonly || readonly === '') && !compactMode) {\n  <button\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  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrAddOption, selector: "clr-add-option", inputs: ["blankOption", "value", "mandatory", "allValues", "excludedValues", "readonly", "disabled", "disableAddButton", "showAddButton"], outputs: ["valueChanged", "remove", "add"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrQuickList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrQuickList, decorators: [{
             type: Component,
             args: [{ selector: 'clr-quick-list', host: { '[class.quick-list]': 'true' }, providers: [
                         {
@@ -3509,11 +3511,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrQuickListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrQuickListModule, declarations: [ClrQuickList, ClrAddOption], imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule], exports: [ClrQuickList] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrQuickListModule, imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrQuickListModule, declarations: [ClrQuickList, ClrAddOption], imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule], exports: [ClrQuickList] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrQuickListModule, imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrQuickListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrQuickListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule],
@@ -3615,10 +3617,10 @@ class ClrSearchField {
             delete this.keyupListener;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSearchField, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i3.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrSearchField, isStandalone: false, selector: "[clrSearch]", host: { properties: { "class.search-input": "true" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSearchField, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i3.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrSearchField, isStandalone: false, selector: "[clrSearch]", host: { properties: { "class.search-input": "true" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSearchField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSearchField, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrSearch]',
@@ -3635,11 +3637,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrSearchFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSearchFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrSearchFieldModule, declarations: [ClrSearchField], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrSearchField] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSearchFieldModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSearchFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrSearchFieldModule, declarations: [ClrSearchField], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrSearchField] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSearchFieldModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSearchFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSearchFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -3682,45 +3684,45 @@ class ClrTreetableActionOverflow {
     closeOverflowContent(event) {
         this.smartToggleService.toggleWithEvent(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableActionOverflow, deps: [{ token: i1$2.ClrPopoverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableActionOverflow, isStandalone: false, selector: "clr-tt-action-overflow", inputs: { empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "cell" }, properties: { "class.treetable-row-actions": "true", "class.treetable-cell": "true" } }, providers: [ClrPopoverService], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableActionOverflow, deps: [{ token: i1$2.ClrPopoverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetableActionOverflow, isStandalone: false, selector: "clr-tt-action-overflow", inputs: { empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "cell" }, properties: { "class.treetable-row-actions": "true", "class.treetable-cell": "true" } }, providers: [ClrPopoverService], ngImport: i0, template: `
     @if (!empty()) {
-    <ng-container>
-      <button class="treetable-action-trigger" clrPopoverOrigin clrPopoverOpenCloseButton>
-        <cds-icon shape="ellipsis-vertical"></cds-icon>
-      </button>
-      <div
-        class="datagrid-action-overflow"
-        cdkTrapFocus
-        (click)="closeOverflowContent($event)"
-        *clrPopoverContent="false; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
-      >
-        <ng-content></ng-content>
-      </div>
-    </ng-container>
+      <ng-container>
+        <button class="treetable-action-trigger" clrPopoverOrigin clrPopoverOpenCloseButton>
+          <cds-icon shape="ellipsis-vertical"></cds-icon>
+        </button>
+        <div
+          class="datagrid-action-overflow"
+          cdkTrapFocus
+          (click)="closeOverflowContent($event)"
+          *clrPopoverContent="false; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
+        >
+          <ng-content></ng-content>
+        </div>
+      </ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "directive", type: i1$2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-action-overflow',
                     providers: [ClrPopoverService],
                     template: `
     @if (!empty()) {
-    <ng-container>
-      <button class="treetable-action-trigger" clrPopoverOrigin clrPopoverOpenCloseButton>
-        <cds-icon shape="ellipsis-vertical"></cds-icon>
-      </button>
-      <div
-        class="datagrid-action-overflow"
-        cdkTrapFocus
-        (click)="closeOverflowContent($event)"
-        *clrPopoverContent="false; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
-      >
-        <ng-content></ng-content>
-      </div>
-    </ng-container>
+      <ng-container>
+        <button class="treetable-action-trigger" clrPopoverOrigin clrPopoverOpenCloseButton>
+          <cds-icon shape="ellipsis-vertical"></cds-icon>
+        </button>
+        <div
+          class="datagrid-action-overflow"
+          cdkTrapFocus
+          (click)="closeOverflowContent($event)"
+          *clrPopoverContent="false; at: smartPosition; outsideClickToClose: true; scrollToClose: true"
+        >
+          <ng-content></ng-content>
+        </div>
+      </ng-container>
     }
   `,
                     host: {
@@ -3764,10 +3766,10 @@ class ClrTreetableRecursionService {
     setTemplate(newTemplate) {
         this._template.set(newTemplate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRecursionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRecursionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRecursionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRecursionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRecursionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRecursionService, decorators: [{
             type: Injectable
         }] });
 function treetableRecursionServiceFactory(existing) {
@@ -3780,7 +3782,7 @@ const TREETABLE_RECURSION_SERVICE_PROVIDER = {
 };
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 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.
  */
@@ -3794,23 +3796,23 @@ class ClrTreetableRecursiveRows {
     getContext(node) {
         return { $implicit: node.value, isLeaf: node.isLeaf, clrTtNode: node };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRecursiveRows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableRecursiveRows, isStandalone: false, selector: "clr-tt-recursive-rows", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"group\"" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRecursiveRows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetableRecursiveRows, isStandalone: false, selector: "clr-tt-recursive-rows", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"group\"" } }, ngImport: i0, template: `
     <ng-container>
       @for (child of parent()?.children || children(); track child.id) {
-      <ng-container *ngTemplateOutlet="template(); context: getContext(child)" />
+        <ng-container *ngTemplateOutlet="template(); context: getContext(child)" />
       }
     </ng-container>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRecursiveRows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRecursiveRows, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-recursive-rows',
                     template: `
     <ng-container>
       @for (child of parent()?.children || children(); track child.id) {
-      <ng-container *ngTemplateOutlet="template(); context: getContext(child)" />
+        <ng-container *ngTemplateOutlet="template(); context: getContext(child)" />
       }
     </ng-container>
   `,
@@ -3838,8 +3840,8 @@ class ClrTreetableRowCheckbox {
             ? ClrTreetableSelectedState.UNSELECTED
             : ClrTreetableSelectedState.SELECTED);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRowCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: ClrTreetableRowCheckbox, isStandalone: false, selector: "clr-tt-row-checkbox", inputs: { clrTtSelectionState: { classPropertyName: "clrTtSelectionState", publicName: "clrTtSelectionState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectionState: "clrTtSelectionStateChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRowCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ClrTreetableRowCheckbox, isStandalone: false, selector: "clr-tt-row-checkbox", inputs: { clrTtSelectionState: { classPropertyName: "clrTtSelectionState", publicName: "clrTtSelectionState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectionState: "clrTtSelectionStateChange" }, ngImport: i0, template: `
     <div class="clr-checkbox-wrapper treetable-row-selection treetable-cell">
       <input
         type="checkbox"
@@ -3851,7 +3853,7 @@ class ClrTreetableRowCheckbox {
     </div>
   `, isInline: true, styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRowCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRowCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'clr-tt-row-checkbox', template: `
     <div class="clr-checkbox-wrapper treetable-row-selection treetable-cell">
@@ -3916,10 +3918,10 @@ class ClrTreetableRow {
             this.onExpandCollapseClick();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableRow, isStandalone: false, selector: "clr-tt-row", inputs: { clrExpanded: { classPropertyName: "clrExpanded", publicName: "clrExpanded", isSignal: true, isRequired: false, transformFunction: null }, clrExpandable: { classPropertyName: "clrExpandable", publicName: "clrExpandable", isSignal: true, isRequired: false, transformFunction: null }, clrClickable: { classPropertyName: "clrClickable", publicName: "clrClickable", isSignal: true, isRequired: false, transformFunction: null }, clrTtItem: { classPropertyName: "clrTtItem", publicName: "clrTtItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrExpanded: "clrExpandedChange" }, host: { properties: { "class.treetable-row-wrapper": "true", "class.treetable-selected": "isSelected()" } }, providers: [TREETABLE_RECURSION_SERVICE_PROVIDER], queries: [{ propertyName: "_actionOverflow", first: true, predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2018-2026 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  class=\"clr-tt-node-content treetable-row\"\n  [class.clr-row-clickable]=\"showClickClass()\"\n  [class.treetable-selected]=\"isSelected()\"\n  (click)=\"onRowClick($event)\"\n>\n  @if (showSelection()) {\n  <clr-tt-row-checkbox\n    [clrTtSelectionState]=\"clrTtItem().selected()\"\n    (clrTtSelectionStateChange)=\"toggleSelection($event)\"\n    (click)=\"$event.stopPropagation()\"\n  >\n  </clr-tt-row-checkbox>\n  }\n\n  <ng-content select=\"clr-tt-action-overflow\" />\n\n  @if (showActionOverflow() && showEmptyActionOverflow()) {\n  <clr-tt-action-overflow [empty]=\"true\" />\n  }\n\n  <div class=\"treetable-scrolling-cells\">\n    @if (clrExpandable()) {\n    <div class=\"treetable-expandable-caret\">\n      <button\n        type=\"button\"\n        class=\"treetable-expandable-caret-button\"\n        data-testId=\"clrTtRowCaret\"\n        (click)=\"onCaretClick()\"\n      >\n        <cds-icon\n          shape=\"angle\"\n          [direction]=\"clrExpanded() ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></cds-icon>\n      </button>\n    </div>\n    }\n\n    <ng-content select=\"clr-tt-cell\" />\n  </div>\n</div>\n\n<div\n  class=\"treetable-children-container\"\n  data-testId=\"clrTtRowChildContainer\"\n  [class.expanded]=\"clrExpanded()\"\n  [class.collapsed]=\"!clrExpanded()\"\n  [class.animate]=\"shouldAnimate()\"\n>\n  @if (isRecursionMode()) {\n  <clr-tt-recursive-rows [parent]=\"clrTtItem()\" />\n  } @else {\n  <ng-content select=\"clr-tt-row\" />\n  }\n</div>\n", styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrTreetableActionOverflow, selector: "clr-tt-action-overflow", inputs: ["empty"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }, { kind: "component", type: ClrTreetableRowCheckbox, selector: "clr-tt-row-checkbox", inputs: ["clrTtSelectionState"], outputs: ["clrTtSelectionStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetableRow, isStandalone: false, selector: "clr-tt-row", inputs: { clrExpanded: { classPropertyName: "clrExpanded", publicName: "clrExpanded", isSignal: true, isRequired: false, transformFunction: null }, clrExpandable: { classPropertyName: "clrExpandable", publicName: "clrExpandable", isSignal: true, isRequired: false, transformFunction: null }, clrClickable: { classPropertyName: "clrClickable", publicName: "clrClickable", isSignal: true, isRequired: false, transformFunction: null }, clrTtItem: { classPropertyName: "clrTtItem", publicName: "clrTtItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrExpanded: "clrExpandedChange" }, host: { properties: { "class.treetable-row-wrapper": "true", "class.treetable-selected": "isSelected()" } }, providers: [TREETABLE_RECURSION_SERVICE_PROVIDER], queries: [{ propertyName: "_actionOverflow", first: true, predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2018-2026 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  class=\"clr-tt-node-content treetable-row\"\n  [class.clr-row-clickable]=\"showClickClass()\"\n  [class.treetable-selected]=\"isSelected()\"\n  (click)=\"onRowClick($event)\"\n>\n  @if (showSelection()) {\n  <clr-tt-row-checkbox\n    [clrTtSelectionState]=\"clrTtItem().selected()\"\n    (clrTtSelectionStateChange)=\"toggleSelection($event)\"\n    (click)=\"$event.stopPropagation()\"\n  >\n  </clr-tt-row-checkbox>\n  }\n\n  <ng-content select=\"clr-tt-action-overflow\" />\n\n  @if (showActionOverflow() && showEmptyActionOverflow()) {\n  <clr-tt-action-overflow [empty]=\"true\" />\n  }\n\n  <div class=\"treetable-scrolling-cells\">\n    @if (clrExpandable()) {\n    <div class=\"treetable-expandable-caret\">\n      <button\n        type=\"button\"\n        class=\"treetable-expandable-caret-button\"\n        data-testId=\"clrTtRowCaret\"\n        (click)=\"onCaretClick()\"\n      >\n        <cds-icon\n          shape=\"angle\"\n          [direction]=\"clrExpanded() ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></cds-icon>\n      </button>\n    </div>\n    }\n\n    <ng-content select=\"clr-tt-cell\" />\n  </div>\n</div>\n\n<div\n  class=\"treetable-children-container\"\n  data-testId=\"clrTtRowChildContainer\"\n  [class.expanded]=\"clrExpanded()\"\n  [class.collapsed]=\"!clrExpanded()\"\n  [class.animate]=\"shouldAnimate()\"\n>\n  @if (isRecursionMode()) {\n  <clr-tt-recursive-rows [parent]=\"clrTtItem()\" />\n  } @else {\n  <ng-content select=\"clr-tt-row\" />\n  }\n</div>\n", styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrTreetableActionOverflow, selector: "clr-tt-action-overflow", inputs: ["empty"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }, { kind: "component", type: ClrTreetableRowCheckbox, selector: "clr-tt-row-checkbox", inputs: ["clrTtSelectionState"], outputs: ["clrTtSelectionStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRow, decorators: [{
             type: Component,
             args: [{ selector: 'clr-tt-row', providers: [TREETABLE_RECURSION_SERVICE_PROVIDER], host: { '[class.treetable-row-wrapper]': 'true', '[class.treetable-selected]': 'isSelected()' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!--\n  ~ Copyright (c) 2018-2026 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  class=\"clr-tt-node-content treetable-row\"\n  [class.clr-row-clickable]=\"showClickClass()\"\n  [class.treetable-selected]=\"isSelected()\"\n  (click)=\"onRowClick($event)\"\n>\n  @if (showSelection()) {\n  <clr-tt-row-checkbox\n    [clrTtSelectionState]=\"clrTtItem().selected()\"\n    (clrTtSelectionStateChange)=\"toggleSelection($event)\"\n    (click)=\"$event.stopPropagation()\"\n  >\n  </clr-tt-row-checkbox>\n  }\n\n  <ng-content select=\"clr-tt-action-overflow\" />\n\n  @if (showActionOverflow() && showEmptyActionOverflow()) {\n  <clr-tt-action-overflow [empty]=\"true\" />\n  }\n\n  <div class=\"treetable-scrolling-cells\">\n    @if (clrExpandable()) {\n    <div class=\"treetable-expandable-caret\">\n      <button\n        type=\"button\"\n        class=\"treetable-expandable-caret-button\"\n        data-testId=\"clrTtRowCaret\"\n        (click)=\"onCaretClick()\"\n      >\n        <cds-icon\n          shape=\"angle\"\n          [direction]=\"clrExpanded() ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></cds-icon>\n      </button>\n    </div>\n    }\n\n    <ng-content select=\"clr-tt-cell\" />\n  </div>\n</div>\n\n<div\n  class=\"treetable-children-container\"\n  data-testId=\"clrTtRowChildContainer\"\n  [class.expanded]=\"clrExpanded()\"\n  [class.collapsed]=\"!clrExpanded()\"\n  [class.animate]=\"shouldAnimate()\"\n>\n  @if (isRecursionMode()) {\n  <clr-tt-recursive-rows [parent]=\"clrTtItem()\" />\n  } @else {\n  <ng-content select=\"clr-tt-row\" />\n  }\n</div>\n", styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"] }]
         }], propDecorators: { clrExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrExpanded", required: false }] }, { type: i0.Output, args: ["clrExpandedChange"] }], clrExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrExpandable", required: false }] }], clrClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrClickable", required: false }] }], clrTtItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtItem", required: false }] }], _actionOverflow: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClrTreetableActionOverflow), { isSignal: true }] }] } });
@@ -3970,10 +3972,10 @@ class SortStateService {
         }
         return (this._reverse() ? -1 : 1) * currentComparator.compare(a, b);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SortStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SortStateService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SortStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SortStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SortStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SortStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -4269,10 +4271,10 @@ class FilterStateService {
         });
         return registered;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterStateService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilterStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilterStateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4482,10 +4484,10 @@ class TreetableDataStateService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableDataStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableDataStateService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableDataStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableDataStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableDataStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableDataStateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4638,10 +4640,10 @@ class TreetableColumnStateService {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableColumnStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableColumnStateService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableColumnStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableColumnStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableColumnStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableColumnStateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4683,8 +4685,8 @@ class ClrTreetable {
     toggleSelectAll() {
         this._dataStateService.toggleSelectionForDisplayedNodes();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetable, isStandalone: false, selector: "clr-treetable", inputs: { clrClickableRows: { classPropertyName: "clrClickableRows", publicName: "clrClickableRows", isSignal: true, isRequired: false, transformFunction: null }, clrHideHeader: { classPropertyName: "clrHideHeader", publicName: "clrHideHeader", isSignal: true, isRequired: false, transformFunction: null }, clrTtLoading: { classPropertyName: "clrTtLoading", publicName: "clrTtLoading", isSignal: true, isRequired: false, transformFunction: null }, clrTtSelected: { classPropertyName: "clrTtSelected", publicName: "clrTtSelected", isSignal: true, isRequired: false, transformFunction: null }, clrTtAutoParentSelection: { classPropertyName: "clrTtAutoParentSelection", publicName: "clrTtAutoParentSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectedChange: "clrTtSelectedChange", clrTtRefresh: "clrTtRefresh" }, host: { properties: { "class.empty": "empty()", "class.treetable-host": "true" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetable, isStandalone: false, selector: "clr-treetable", inputs: { clrClickableRows: { classPropertyName: "clrClickableRows", publicName: "clrClickableRows", isSignal: true, isRequired: false, transformFunction: null }, clrHideHeader: { classPropertyName: "clrHideHeader", publicName: "clrHideHeader", isSignal: true, isRequired: false, transformFunction: null }, clrTtLoading: { classPropertyName: "clrTtLoading", publicName: "clrTtLoading", isSignal: true, isRequired: false, transformFunction: null }, clrTtSelected: { classPropertyName: "clrTtSelected", publicName: "clrTtSelected", isSignal: true, isRequired: false, transformFunction: null }, clrTtAutoParentSelection: { classPropertyName: "clrTtAutoParentSelection", publicName: "clrTtAutoParentSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectedChange: "clrTtSelectedChange", clrTtRefresh: "clrTtRefresh" }, host: { properties: { "class.empty": "empty()", "class.treetable-host": "true" } }, providers: [
             TREETABLE_RECURSION_SERVICE_PROVIDER,
             TreetableDataStateService,
             TreetableColumnStateService,
@@ -4692,7 +4694,7 @@ class ClrTreetable {
             FilterStateService,
         ], queries: [{ propertyName: "_ttRows", predicate: ClrTreetableRow, descendants: true, isSignal: true }, { propertyName: "_actionOverflow", predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 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]=\"clrHideHeader()\">\n      @if (showSelection() && !empty()) {\n      <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-column\" role=\"row\">\n        <input\n          type=\"checkbox\"\n          data-testId=\"clrTtSelectAll\"\n          [checked]=\"areAllRowsSelected()\"\n          (change)=\"toggleSelectAll()\"\n        />\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\" />\n      </div>\n    </div>\n\n    <div class=\"treetable-body\">\n      @if (isRecursionMode()) {\n      <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n      } @else {\n      <ng-content select=\"clr-tt-row\" />\n      } @if (empty() && !clrTtLoading()) {\n      <ng-content select=\"clr-tt-placeholder\" />\n      }\n    </div>\n  </div>\n\n  <ng-content select=\"clr-tt-footer\"></ng-content>\n\n  @if (clrTtLoading()) {\n  <div class=\"treetable-spinner\">\n    <clr-spinner clrMedium />\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetable, decorators: [{
             type: Component,
             args: [{ selector: 'clr-treetable', host: { '[class.empty]': 'empty()', '[class.treetable-host]': 'true' }, providers: [
                         TREETABLE_RECURSION_SERVICE_PROVIDER,
@@ -4806,25 +4808,25 @@ class ClrTreetableColumn {
         }
         this._sort.toggle(comparator, reverse);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()" } }, providers: [ClrPopoverService], viewQueries: [{ propertyName: "_columnTitleRef", first: true, predicate: ["columnTitle"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()" } }, providers: [ClrPopoverService], viewQueries: [{ propertyName: "_columnTitleRef", first: true, predicate: ["columnTitle"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
     @if (isSortable()) {
-    <button type="button" class="treetable-column-title" data-testId="clrTtSortButton" (click)="sort()">
-      <ng-container *ngTemplateOutlet="columnTitle" />
-      @if (sortDirection()) {
-      <cds-icon
-        shape="arrow"
-        aria-hidden="true"
-        class="sort-icon"
-        data-testId="clrTtSortIndicator"
-        [direction]="sortDirection()"
-      />
-      }
-    </button>
+      <button type="button" class="treetable-column-title" data-testId="clrTtSortButton" (click)="sort()">
+        <ng-container *ngTemplateOutlet="columnTitle" />
+        @if (sortDirection()) {
+          <cds-icon
+            shape="arrow"
+            aria-hidden="true"
+            class="sort-icon"
+            data-testId="clrTtSortIndicator"
+            [direction]="sortDirection()"
+          />
+        }
+      </button>
     } @else {
-    <div class="treetable-column-title">
-      <ng-container *ngTemplateOutlet="columnTitle" />
-    </div>
+      <div class="treetable-column-title">
+        <ng-container *ngTemplateOutlet="columnTitle" />
+      </div>
     }
 
     <ng-content select="clr-tt-filter, clr-tt-string-filter" />
@@ -4834,29 +4836,29 @@ class ClrTreetableColumn {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableColumn, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-column',
                     providers: [ClrPopoverService],
                     template: `
     @if (isSortable()) {
-    <button type="button" class="treetable-column-title" data-testId="clrTtSortButton" (click)="sort()">
-      <ng-container *ngTemplateOutlet="columnTitle" />
-      @if (sortDirection()) {
-      <cds-icon
-        shape="arrow"
-        aria-hidden="true"
-        class="sort-icon"
-        data-testId="clrTtSortIndicator"
-        [direction]="sortDirection()"
-      />
-      }
-    </button>
+      <button type="button" class="treetable-column-title" data-testId="clrTtSortButton" (click)="sort()">
+        <ng-container *ngTemplateOutlet="columnTitle" />
+        @if (sortDirection()) {
+          <cds-icon
+            shape="arrow"
+            aria-hidden="true"
+            class="sort-icon"
+            data-testId="clrTtSortIndicator"
+            [direction]="sortDirection()"
+          />
+        }
+      </button>
     } @else {
-    <div class="treetable-column-title">
-      <ng-container *ngTemplateOutlet="columnTitle" />
-    </div>
+      <div class="treetable-column-title">
+        <ng-container *ngTemplateOutlet="columnTitle" />
+      </div>
     }
 
     <ng-content select="clr-tt-filter, clr-tt-string-filter" />
@@ -4905,8 +4907,8 @@ class ClrTreetableColumnManagerMenuComponent {
     resetAllToInitial() {
         this._columnService.resetToInitialHidden();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableColumnManagerMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableColumnManagerMenuComponent, isStandalone: false, selector: "clr-tt-column-manager-menu", inputs: { resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.column-manager-menu": "true", "class.active": "open()" } }, hostDirectives: [{ directive: i1$2.ClrPopoverHostDirective }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableColumnManagerMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetableColumnManagerMenuComponent, isStandalone: false, selector: "clr-tt-column-manager-menu", inputs: { resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.column-manager-menu": "true", "class.active": "open()" } }, hostDirectives: [{ directive: i1$2.ClrPopoverHostDirective }], ngImport: i0, template: `
     <button
       role="button"
       type="button"
@@ -4949,20 +4951,20 @@ class ClrTreetableColumnManagerMenuComponent {
       </div>
       <ul class="switch-content list-unstyled">
         @for (column of hideableColumns(); track column.id) {
-        <li>
-          <clr-checkbox-wrapper>
-            <input
-              clrCheckbox
-              type="checkbox"
-              [disabled]="hasOnlyOneVisibleColumn() && !column.hidden"
-              [ngModel]="!column.hidden"
-              (ngModelChange)="toggleColumnState(column.id)"
-            />
-            <label>
-              <ng-template [ngTemplateOutlet]="column.titleTemplateRef"></ng-template>
-            </label>
-          </clr-checkbox-wrapper>
-        </li>
+          <li>
+            <clr-checkbox-wrapper>
+              <input
+                clrCheckbox
+                type="checkbox"
+                [disabled]="hasOnlyOneVisibleColumn() && !column.hidden"
+                [ngModel]="!column.hidden"
+                (ngModelChange)="toggleColumnState(column.id)"
+              />
+              <label>
+                <ng-template [ngTemplateOutlet]="column.titleTemplateRef"></ng-template>
+              </label>
+            </clr-checkbox-wrapper>
+          </li>
         }
       </ul>
       <div class="switch-footer">
@@ -4986,7 +4988,7 @@ class ClrTreetableColumnManagerMenuComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableColumnManagerMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableColumnManagerMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-column-manager-menu',
@@ -5033,20 +5035,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
       <ul class="switch-content list-unstyled">
         @for (column of hideableColumns(); track column.id) {
-        <li>
-          <clr-checkbox-wrapper>
-            <input
-              clrCheckbox
-              type="checkbox"
-              [disabled]="hasOnlyOneVisibleColumn() && !column.hidden"
-              [ngModel]="!column.hidden"
-              (ngModelChange)="toggleColumnState(column.id)"
-            />
-            <label>
-              <ng-template [ngTemplateOutlet]="column.titleTemplateRef"></ng-template>
-            </label>
-          </clr-checkbox-wrapper>
-        </li>
+          <li>
+            <clr-checkbox-wrapper>
+              <input
+                clrCheckbox
+                type="checkbox"
+                [disabled]="hasOnlyOneVisibleColumn() && !column.hidden"
+                [ngModel]="!column.hidden"
+                (ngModelChange)="toggleColumnState(column.id)"
+              />
+              <label>
+                <ng-template [ngTemplateOutlet]="column.titleTemplateRef"></ng-template>
+              </label>
+            </clr-checkbox-wrapper>
+          </li>
         }
       </ul>
       <div class="switch-footer">
@@ -5090,18 +5092,19 @@ class ClrTreetableFooter {
         this.selectedRows = this._dataService.selectedNodes;
         this.hasSelectedRows = computed(() => this.selectedRows()?.length > 0, ...(ngDevMode ? [{ debugName: "hasSelectedRows" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableFooter, isStandalone: false, selector: "clr-tt-footer", inputs: { clrResetLabel: { classPropertyName: "clrResetLabel", publicName: "clrResetLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.treetable-footer": "true" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetableFooter, isStandalone: false, selector: "clr-tt-footer", inputs: { clrResetLabel: { classPropertyName: "clrResetLabel", publicName: "clrResetLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.treetable-footer": "true" } }, ngImport: i0, template: `
     @if (hasSelectedRows()) {
-    <div class="clr-form-control-disabled">
-      <clr-checkbox-wrapper class="treetable-footer-select">
-        <input clrCheckbox type="checkbox" checked="checked" disabled />
-        <label>{{ selectedRows().length }}</label>
-        <span class="clr-sr-only">{{ commonStrings.selectedRows }}</span>
-      </clr-checkbox-wrapper>
-    </div>
-    } @if (hasHideableColumns()) {
-    <clr-tt-column-manager-menu [resetLabel]="clrResetLabel()" />
+      <div class="clr-form-control-disabled">
+        <clr-checkbox-wrapper class="treetable-footer-select">
+          <input clrCheckbox type="checkbox" checked="checked" disabled />
+          <label>{{ selectedRows().length }}</label>
+          <span class="clr-sr-only">{{ commonStrings.selectedRows }}</span>
+        </clr-checkbox-wrapper>
+      </div>
+    }
+    @if (hasHideableColumns()) {
+      <clr-tt-column-manager-menu [resetLabel]="clrResetLabel()" />
     }
 
     <div class="treetable-footer-description">
@@ -5109,21 +5112,22 @@ class ClrTreetableFooter {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "component", type: ClrTreetableColumnManagerMenuComponent, selector: "clr-tt-column-manager-menu", inputs: ["resetLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-footer',
                     template: `
     @if (hasSelectedRows()) {
-    <div class="clr-form-control-disabled">
-      <clr-checkbox-wrapper class="treetable-footer-select">
-        <input clrCheckbox type="checkbox" checked="checked" disabled />
-        <label>{{ selectedRows().length }}</label>
-        <span class="clr-sr-only">{{ commonStrings.selectedRows }}</span>
-      </clr-checkbox-wrapper>
-    </div>
-    } @if (hasHideableColumns()) {
-    <clr-tt-column-manager-menu [resetLabel]="clrResetLabel()" />
+      <div class="clr-form-control-disabled">
+        <clr-checkbox-wrapper class="treetable-footer-select">
+          <input clrCheckbox type="checkbox" checked="checked" disabled />
+          <label>{{ selectedRows().length }}</label>
+          <span class="clr-sr-only">{{ commonStrings.selectedRows }}</span>
+        </clr-checkbox-wrapper>
+      </div>
+    }
+    @if (hasHideableColumns()) {
+      <clr-tt-column-manager-menu [resetLabel]="clrResetLabel()" />
     }
 
     <div class="treetable-footer-description">
@@ -5198,10 +5202,10 @@ class ClrTreetableHideableColumn {
         // When the directive is destroyed, mark the column as non-hideable
         this._columnState.changeHideable(this._column.columnId, false, false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableHideableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: ClrTreetableHideableColumn, isStandalone: false, selector: "[clrTtHideableColumn]", inputs: { clrTtHideableColumn: { classPropertyName: "clrTtHideableColumn", publicName: "clrTtHideableColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtHiddenChange: "clrTtHiddenChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableHideableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: ClrTreetableHideableColumn, isStandalone: false, selector: "[clrTtHideableColumn]", inputs: { clrTtHideableColumn: { classPropertyName: "clrTtHideableColumn", publicName: "clrTtHideableColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtHiddenChange: "clrTtHiddenChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableHideableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableHideableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrTtHideableColumn]',
@@ -5235,8 +5239,8 @@ class ClrTreetableFilter {
             this.registered().unregister();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: ClrTreetableFilter, isStandalone: false, selector: "clr-tt-filter", inputs: { clrTtFilter: { classPropertyName: "clrTtFilter", publicName: "clrTtFilter", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ClrTreetableFilter, isStandalone: false, selector: "clr-tt-filter", inputs: { clrTtFilter: { classPropertyName: "clrTtFilter", publicName: "clrTtFilter", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <button
       type="button"
       clrPopoverOrigin
@@ -5271,7 +5275,7 @@ class ClrTreetableFilter {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "directive", type: i1$2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-filter',
@@ -5320,10 +5324,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrTreetableCell {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrTreetableCell, isStandalone: false, selector: "clr-tt-cell", host: { attributes: { "role": "cell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrTreetableCell, isStandalone: false, selector: "clr-tt-cell", host: { attributes: { "role": "cell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableCell, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-cell',
@@ -5343,15 +5347,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrTreetablePlaceholder {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetablePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrTreetablePlaceholder, isStandalone: false, selector: "clr-tt-placeholder", host: { properties: { "class.treetable-placeholder-container": "true" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetablePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrTreetablePlaceholder, isStandalone: false, 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, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetablePlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetablePlaceholder, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-placeholder',
@@ -5412,10 +5416,10 @@ class TreetableHeaderRenderer {
     setDefaultColumnClass() {
         this.renderer.addClass(this.elementRef.nativeElement, 'clr-col');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableHeaderRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TreetableHeaderRenderer, isStandalone: false, selector: "clr-tt-column", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableHeaderRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: TreetableHeaderRenderer, isStandalone: false, selector: "clr-tt-column", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableHeaderRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableHeaderRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-tt-column',
@@ -5450,10 +5454,10 @@ class TreetableCellRenderer {
     setMaxWidth(maxWidth) {
         this.renderer.setStyle(this.elementRef.nativeElement, 'max-width', maxWidth + 'px');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TreetableCellRenderer, isStandalone: false, selector: "clr-tt-cell", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: TreetableCellRenderer, isStandalone: false, selector: "clr-tt-cell", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableCellRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableCellRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-tt-cell',
@@ -5470,10 +5474,10 @@ class TreetableRowRenderer {
     constructor() {
         this.cells = contentChildren(TreetableCellRenderer, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableRowRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: TreetableRowRenderer, isStandalone: false, selector: "clr-tt-row", queries: [{ propertyName: "cells", predicate: TreetableCellRenderer, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableRowRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.18", type: TreetableRowRenderer, isStandalone: false, selector: "clr-tt-row", queries: [{ propertyName: "cells", predicate: TreetableCellRenderer, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableRowRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableRowRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-tt-row',
@@ -5647,10 +5651,10 @@ class TreetableMainRenderer {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableMainRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: TreetableMainRenderer, isStandalone: false, selector: "clr-treetable", queries: [{ propertyName: "headers", predicate: TreetableHeaderRenderer, isSignal: true }, { propertyName: "rows", predicate: TreetableRowRenderer, descendants: true, isSignal: true }, { propertyName: "columns", predicate: ClrTreetableColumn, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableMainRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.18", type: TreetableMainRenderer, isStandalone: false, selector: "clr-treetable", queries: [{ propertyName: "headers", predicate: TreetableHeaderRenderer, isSignal: true }, { propertyName: "rows", predicate: TreetableRowRenderer, descendants: true, isSignal: true }, { propertyName: "columns", predicate: ClrTreetableColumn, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableMainRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableMainRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-treetable',
@@ -5688,10 +5692,10 @@ class TreetableItemsDirective {
     ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableItemsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: TreetableItemsDirective, isStandalone: false, selector: "[clrTtItems][clrTtItemsOf]", inputs: { clrTtItemsOf: { classPropertyName: "clrTtItemsOf", publicName: "clrTtItemsOf", isSignal: true, isRequired: true, transformFunction: null }, clrTtItemsGetChildren: { classPropertyName: "clrTtItemsGetChildren", publicName: "clrTtItemsGetChildren", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableItemsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: TreetableItemsDirective, isStandalone: false, selector: "[clrTtItems][clrTtItemsOf]", inputs: { clrTtItemsOf: { classPropertyName: "clrTtItemsOf", publicName: "clrTtItemsOf", isSignal: true, isRequired: true, transformFunction: null }, clrTtItemsGetChildren: { classPropertyName: "clrTtItemsGetChildren", publicName: "clrTtItemsGetChildren", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableItemsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableItemsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrTtItems][clrTtItemsOf]',
@@ -5753,8 +5757,8 @@ class ClrTreetableStringFilter {
     inputChanged(value) {
         this._textChange$.next(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableStringFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: ClrTreetableStringFilter, isStandalone: false, selector: "clr-tt-string-filter", inputs: { clrTtStringFilter: { classPropertyName: "clrTtStringFilter", publicName: "clrTtStringFilter", isSignal: true, isRequired: true, transformFunction: null }, clrTtFilterPlaceholder: { classPropertyName: "clrTtFilterPlaceholder", publicName: "clrTtFilterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clrTtFilterLabel: { classPropertyName: "clrTtFilterLabel", publicName: "clrTtFilterLabel", isSignal: true, isRequired: false, transformFunction: null }, clrTtFilterValue: { classPropertyName: "clrTtFilterValue", publicName: "clrTtFilterValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtFilterValue: "clrTtFilterValueChange" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableStringFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: ClrTreetableStringFilter, isStandalone: false, selector: "clr-tt-string-filter", inputs: { clrTtStringFilter: { classPropertyName: "clrTtStringFilter", publicName: "clrTtStringFilter", isSignal: true, isRequired: true, transformFunction: null }, clrTtFilterPlaceholder: { classPropertyName: "clrTtFilterPlaceholder", publicName: "clrTtFilterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clrTtFilterLabel: { classPropertyName: "clrTtFilterLabel", publicName: "clrTtFilterLabel", isSignal: true, isRequired: false, transformFunction: null }, clrTtFilterValue: { classPropertyName: "clrTtFilterValue", publicName: "clrTtFilterValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtFilterValue: "clrTtFilterValueChange" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <clr-tt-filter [clrTtFilter]="this">
       <button
         class="btn btn-sm btn-icon btn-link btn-trash"
@@ -5781,7 +5785,7 @@ class ClrTreetableStringFilter {
     </clr-tt-filter>
   `, isInline: true, styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrTreetableFilter, selector: "clr-tt-filter", inputs: ["clrTtFilter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableStringFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableStringFilter, decorators: [{
             type: Component,
             args: [{ selector: 'clr-tt-string-filter', template: `
     <clr-tt-filter [clrTtFilter]="this">
@@ -5837,8 +5841,8 @@ class ClrTreetableModule {
     constructor() {
         ClarityIcons.addIcons(angleIcon, arrowIcon, ellipsisVerticalIcon, filterGridCircleIcon, filterGridIcon);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, declarations: [ClrTreetable,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableModule, declarations: [ClrTreetable,
             ClrTreetableRow,
             ClrTreetableCell,
             ClrTreetableColumn,
@@ -5869,9 +5873,9 @@ class ClrTreetableModule {
             TreetableItemsDirective,
             ClrTreetableFilter,
             ClrTreetableStringFilter] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule],
@@ -5978,8 +5982,8 @@ class ClrViewEditSection {
             this.toggleCollapsed(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrViewEditSection, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrViewEditSection, isStandalone: false, 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"], _titleTextStyle: ["clrTitleTextStyle", "_titleTextStyle"], _titleTextFontWeight: ["clrTitleTextFontWeight", "_titleTextFontWeight"], 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\" [attr.cds-text]=\"_titleTextStyle + ' ' + _titleTextFontWeight\">\n      @if (_isCollapsible && !editMode) {\n      <span\n        class=\"ces-title-trigger\"\n        (click)=\"onCollapseExpand()\"\n        (keydown.enter)=\"onCollapseExpand()\"\n        (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-expanded]=\"!_isCollapsed\"\n      >\n        {{ _title }}\n      </span>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <cds-icon shape=\"angle\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></cds-icon>\n      </button>\n      } @else { {{ _title }} }\n      <div class=\"ves-actions\">\n        @if (_editable && !editMode && actionBlock.children.length == 0) {\n        <button type=\"button\" (click)=\"onEdit()\" class=\"btn btn-icon btn-link ves-action\">\n          <cds-icon class=\"ves-edit-icon\" [shape]=\"_editIcon\" size=\"20\"></cds-icon>\n        </button>\n        }\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    @if (!(_isCollapsed && _isCollapsible)) {\n    <div class=\"card-text\" [@collapseExpandAnimation]=\"initialized\">\n      @if (!editMode) {\n      <ng-template [ngTemplateOutlet]=\"viewRef\"></ng-template>\n      } @if (editMode) {\n      <ng-template [ngTemplateOutlet]=\"editRef\"></ng-template>\n      } @if (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      }\n    </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrViewEditSection, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrViewEditSection, isStandalone: false, 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"], _titleTextStyle: ["clrTitleTextStyle", "_titleTextStyle"], _titleTextFontWeight: ["clrTitleTextFontWeight", "_titleTextFontWeight"], 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\" [attr.cds-text]=\"_titleTextStyle + ' ' + _titleTextFontWeight\">\n      @if (_isCollapsible && !editMode) {\n      <span\n        class=\"ces-title-trigger\"\n        (click)=\"onCollapseExpand()\"\n        (keydown.enter)=\"onCollapseExpand()\"\n        (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-expanded]=\"!_isCollapsed\"\n      >\n        {{ _title }}\n      </span>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <cds-icon shape=\"angle\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></cds-icon>\n      </button>\n      } @else { {{ _title }} }\n      <div class=\"ves-actions\">\n        @if (_editable && !editMode && actionBlock.children.length == 0) {\n        <button type=\"button\" (click)=\"onEdit()\" class=\"btn btn-icon btn-link ves-action\">\n          <cds-icon class=\"ves-edit-icon\" [shape]=\"_editIcon\" size=\"20\"></cds-icon>\n        </button>\n        }\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    @if (!(_isCollapsed && _isCollapsible)) {\n    <div class=\"card-text\" [@collapseExpandAnimation]=\"initialized\">\n      @if (!editMode) {\n      <ng-template [ngTemplateOutlet]=\"viewRef\"></ng-template>\n      } @if (editMode) {\n      <ng-template [ngTemplateOutlet]=\"editRef\"></ng-template>\n      } @if (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      }\n    </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], animations: [
             trigger('collapseExpandAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0, overflow: 'hidden' }),
@@ -5998,7 +6002,7 @@ class ClrViewEditSection {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrViewEditSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrViewEditSection, decorators: [{
             type: Component,
             args: [{ selector: 'clr-view-edit-section', animations: [
                         trigger('collapseExpandAnimation', [
@@ -6077,11 +6081,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrViewEditSectionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrViewEditSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrViewEditSectionModule, declarations: [ClrViewEditSection], imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule], exports: [ClrViewEditSection] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrViewEditSectionModule, imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrViewEditSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrViewEditSectionModule, declarations: [ClrViewEditSection], imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule], exports: [ClrViewEditSection] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrViewEditSectionModule, imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrViewEditSectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrViewEditSectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule],
@@ -6200,10 +6204,10 @@ class ClrHistoryService {
         domain.shift();
         return domain.join('.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryService, deps: [{ token: HISTORY_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryService, deps: [{ token: HISTORY_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -6263,10 +6267,10 @@ class ClrHistory {
     togglePinHistory() {
         this.historyService.setHistoryPinned(this.username, !this.pinActivated);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }, { token: HISTORY_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrHistory, isStandalone: false, selector: "clr-history", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, host: { classAttribute: "clr-history" }, ngImport: i0, template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-outline-primary history-button\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{ dropdownHeader }}</label>\n    @for (history of historyElements$ | async; track history) {\n    <button type=\"button\" clrDropdownItem (click)=\"select(history)\">{{ history.title }}</button>\n    } @if (pinActive) {\n    <div class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    }\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      @if (pinActive && !pinActivated) {\n      <span>{{ dropdownPin }}</span>\n      } @if (pinActive && pinActivated) {\n      <span>{{ dropdownUnpin }}</span>\n      }\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }, { token: HISTORY_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrHistory, isStandalone: false, selector: "clr-history", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, host: { classAttribute: "clr-history" }, ngImport: i0, template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-outline-primary history-button\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{ dropdownHeader }}</label>\n    @for (history of historyElements$ | async; track history) {\n    <button type=\"button\" clrDropdownItem (click)=\"select(history)\">{{ history.title }}</button>\n    } @if (pinActive) {\n    <div class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    }\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      @if (pinActive && !pinActivated) {\n      <span>{{ dropdownPin }}</span>\n      } @if (pinActive && pinActivated) {\n      <span>{{ dropdownUnpin }}</span>\n      }\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistory, decorators: [{
             type: Component,
             args: [{ selector: 'clr-history', host: { class: 'clr-history' }, standalone: false, template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-outline-primary history-button\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{ dropdownHeader }}</label>\n    @for (history of historyElements$ | async; track history) {\n    <button type=\"button\" clrDropdownItem (click)=\"select(history)\">{{ history.title }}</button>\n    } @if (pinActive) {\n    <div class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    }\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      @if (pinActive && !pinActivated) {\n      <span>{{ dropdownPin }}</span>\n      } @if (pinActive && pinActivated) {\n      <span>{{ dropdownUnpin }}</span>\n      }\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n" }]
         }], ctorParameters: () => [{ type: ClrHistoryService }, { type: HistoryProvider, decorators: [{
@@ -6338,10 +6342,10 @@ class ClrHistoryPinned {
     ngOnDestroy() {
         this.settingsSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryPinned, deps: [{ token: ClrHistoryService }, { token: HISTORY_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrHistoryPinned, isStandalone: false, selector: "clr-history-pinned", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], domain: ["clrDomain", "domain"] }, ngImport: i0, template: "@if ((active$ | async)) {\n<nav aria-label=\"history\" class=\"history-container\">\n  <ol class=\"history\">\n    <!-- dummy entry with no visible content to reserve space for the history header -->\n    <li>&nbsp;</li>\n    @for (historyItem of historyElements$ | async; track historyItem) { @if (historyItem.url) {\n    <li class=\"history-item\">\n      <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n    </li>\n    } }\n  </ol>\n</nav>\n}\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryPinned, deps: [{ token: ClrHistoryService }, { token: HISTORY_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrHistoryPinned, isStandalone: false, selector: "clr-history-pinned", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], domain: ["clrDomain", "domain"] }, ngImport: i0, template: "@if ((active$ | async)) {\n<nav aria-label=\"history\" class=\"history-container\">\n  <ol class=\"history\">\n    <!-- dummy entry with no visible content to reserve space for the history header -->\n    <li>&nbsp;</li>\n    @for (historyItem of historyElements$ | async; track historyItem) { @if (historyItem.url) {\n    <li class=\"history-item\">\n      <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n    </li>\n    } }\n  </ol>\n</nav>\n}\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryPinned, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryPinned, decorators: [{
             type: Component,
             args: [{ selector: 'clr-history-pinned', standalone: false, template: "@if ((active$ | async)) {\n<nav aria-label=\"history\" class=\"history-container\">\n  <ol class=\"history\">\n    <!-- dummy entry with no visible content to reserve space for the history header -->\n    <li>&nbsp;</li>\n    @for (historyItem of historyElements$ | async; track historyItem) { @if (historyItem.url) {\n    <li class=\"history-item\">\n      <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n    </li>\n    } }\n  </ol>\n</nav>\n}\n" }]
         }], ctorParameters: () => [{ type: ClrHistoryService }, { type: HistoryProvider, decorators: [{
@@ -6399,10 +6403,10 @@ class ClrHistoryHttpImplService {
         }
         return url;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryHttpImplService, deps: [{ token: HISTORY_NOTIFICATION_URL_PROVIDER }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryHttpImplService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryHttpImplService, deps: [{ token: HISTORY_NOTIFICATION_URL_PROVIDER }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryHttpImplService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryHttpImplService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryHttpImplService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -6415,16 +6419,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrHistoryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule], exports: [ClrHistory, ClrHistoryPinned] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule], exports: [ClrHistory, ClrHistoryPinned] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryModule, providers: [
             {
                 provide: HISTORY_TOKEN,
                 useClass: ClrHistoryHttpImplService,
             },
         ], imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule],
@@ -6451,10 +6455,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrAutocompleteOff {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAutocompleteOff, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrAutocompleteOff, isStandalone: false, selector: "input:not([autocomplete])", host: { properties: { "attr.autocomplete": "\"off\"" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAutocompleteOff, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrAutocompleteOff, isStandalone: false, selector: "input:not([autocomplete])", host: { properties: { "attr.autocomplete": "\"off\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAutocompleteOff, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAutocompleteOff, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input:not([autocomplete])',
@@ -6471,11 +6475,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrAutocompleteOffModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAutocompleteOffModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrAutocompleteOffModule, declarations: [ClrAutocompleteOff], exports: [ClrAutocompleteOff] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAutocompleteOffModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAutocompleteOffModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrAutocompleteOffModule, declarations: [ClrAutocompleteOff], exports: [ClrAutocompleteOff] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAutocompleteOffModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAutocompleteOffModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAutocompleteOffModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrAutocompleteOff],
@@ -7140,10 +7144,10 @@ const sorting_app = clrIconSVG('<g id="24px/sorting [APP]"> <path id="Shape" fil
 const sound = clrIconSVG('<g id="24px/sound"> <path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M13.3599 1.21002C15.0665 1.37858 16.59 2.35211 17.4599 3.83002C18.1999 5.21002 17.9999 7.63002 16.8799 11.22L15.6099 10.82C16.8599 6.85002 16.6699 5.17002 16.2899 4.45002C15.7749 3.56072 14.9123 2.92648 13.9099 2.70002V18.91C13.9188 20.7431 12.6468 22.3336 10.8566 22.7279C9.06647 23.1222 7.24395 22.2132 6.48196 20.546C5.71997 18.8788 6.22531 16.9058 7.69496 15.8102C9.1646 14.7146 11.1997 14.7937 12.5799 16V1.08002L13.3599 1.21002ZM7.4199 18.89C7.4199 20.3149 8.57501 21.47 9.9999 21.47C11.4225 21.4645 12.5744 20.3126 12.5799 18.89C12.5799 17.4651 11.4248 16.31 9.9999 16.31C8.57501 16.31 7.4199 17.4651 7.4199 18.89Z" /> </g>  ', '0 0 24 24');
 const sparkles = clrIconSVG('<g id="36px/sparkles" transform="matrix(2.145977,0,0,1.979201,-9.797101,-5.151016)">\n' +
     '        <g transform="matrix(0.583979,0,0,0.633187,0.601632,-0.765988)">\n' +
-    '            <path d="M21.151,10.108C21.151,12.187 21.828,14.944 23.859,16.975C25.89,19.006 28.647,19.683 30.726,19.683C28.647,19.683 25.89,20.36 23.859,22.392C21.828,24.423 21.151,27.179 21.151,29.259C21.151,27.179 20.473,24.423 18.442,22.392C16.411,20.36 13.655,19.683 11.575,19.683C13.655,19.683 16.411,19.006 18.442,16.975C20.473,14.944 21.151,12.187 21.151,10.108Z" style="fill:none;stroke:black;stroke-width:1.6px;"/>\n' +
+    '            <path d="M21.151,10.108C21.151,12.187 21.828,14.944 23.859,16.975C25.89,19.006 28.647,19.683 30.726,19.683C28.647,19.683 25.89,20.36 23.859,22.392C21.828,24.423 21.151,27.179 21.151,29.259C21.151,27.179 20.473,24.423 18.442,22.392C16.411,20.36 13.655,19.683 11.575,19.683C13.655,19.683 16.411,19.006 18.442,16.975C20.473,14.944 21.151,12.187 21.151,10.108Z" style="fill:none;stroke:currentColor;stroke-width:1.6px;"/>\n' +
     '        </g>\n' +
     '        <g transform="matrix(0.179686,0,0,0.194827,13.023949,12.059837)">\n' +
-    '            <path d="M21.151,10.108C21.151,12.187 21.828,14.944 23.859,16.975C25.89,19.006 28.647,19.683 30.726,19.683C28.647,19.683 25.89,20.36 23.859,22.392C21.828,24.423 21.151,27.179 21.151,29.259C21.151,27.179 20.473,24.423 18.442,22.392C16.411,20.36 13.655,19.683 11.575,19.683C13.655,19.683 16.411,19.006 18.442,16.975C20.473,14.944 21.151,12.187 21.151,10.108Z" style="fill:none;stroke:black;stroke-width:5.19px;"/>\n' +
+    '            <path d="M21.151,10.108C21.151,12.187 21.828,14.944 23.859,16.975C25.89,19.006 28.647,19.683 30.726,19.683C28.647,19.683 25.89,20.36 23.859,22.392C21.828,24.423 21.151,27.179 21.151,29.259C21.151,27.179 20.473,24.423 18.442,22.392C16.411,20.36 13.655,19.683 11.575,19.683C13.655,19.683 16.411,19.006 18.442,16.975C20.473,14.944 21.151,12.187 21.151,10.108Z" style="fill:none;stroke:currentColor;stroke-width:5.19px;"/>\n' +
     '        </g>\n' +
     '    </g>', '0 0 36 36');
 const standard_equipment = clrIconSVG('<g id="24px/standard equipment"> <path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M17.1562 3.15H18.2053C19.3996 3.15116 20.3677 4.11875 20.3695 5.3131V20.8239C20.3682 22.0186 19.4 22.9867 18.2054 22.988H5.86405C4.66938 22.9867 3.70122 22.0186 3.69995 20.8239V5.3132C3.7016 4.11883 4.66968 3.15116 5.86405 3.15H7.00105V2H17.1562V3.15ZM15.8262 3.33H8.33105V3.66C8.33116 4.21162 8.77834 4.65874 9.32995 4.6588H14.8274C15.379 4.6588 15.8262 4.21162 15.8262 3.66V3.33ZM19.0393 20.8238C19.0388 21.2842 18.6657 21.6574 18.2053 21.6578H5.86405C5.40363 21.6574 5.03049 21.2842 5.03005 20.8238V5.3131C5.03093 4.85302 5.40397 4.48043 5.86405 4.4801H7.15735C7.49727 5.38579 8.36218 5.98663 9.32955 5.9891H14.8274C15.7947 5.98659 16.6595 5.38576 16.9995 4.4801H18.2052C18.6652 4.48043 19.0383 4.85302 19.0392 5.3131V20.8238H19.0393ZM9.98135 16.6212L11.4854 17.8622L14.5334 14.8242L15.4724 15.7662L11.5694 19.6552L9.13535 17.6472L9.98135 16.6212ZM7.80405 8.351H16.8041V9.651H7.80405V8.351ZM16.8041 11.6512H7.80405V12.9512H16.8041V11.6512Z" /> </g>  ', '0 0 24 24');
@@ -12043,10 +12047,10 @@ class ClrBrandAvatar {
         output = output.replace('Š', 'S');
         return output;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBrandAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrBrandAvatar, isStandalone: false, selector: "clr-brand-avatar", inputs: { brand: ["clrBrand", "brand"], size: ["clrSize", "size"] }, 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    <cds-icon\n      [size]=\"'' + size\"\n      [shape]=\"getShape()\"\n      [ngClass]=\"{'default-icon': getShape() === getDefaultIcon()}\"\n    ></cds-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBrandAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrBrandAvatar, isStandalone: false, selector: "clr-brand-avatar", inputs: { brand: ["clrBrand", "brand"], size: ["clrSize", "size"] }, 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    <cds-icon\n      [size]=\"'' + size\"\n      [shape]=\"getShape()\"\n      [ngClass]=\"{'default-icon': getShape() === getDefaultIcon()}\"\n    ></cds-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBrandAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBrandAvatar, decorators: [{
             type: Component,
             args: [{ selector: 'clr-brand-avatar', standalone: false, template: "<div class=\"brand-avatar-rectangle\">\n  <div #avatar class=\"brand-avatar-icon-container\">\n    <cds-icon\n      [size]=\"'' + size\"\n      [shape]=\"getShape()\"\n      [ngClass]=\"{'default-icon': getShape() === getDefaultIcon()}\"\n    ></cds-icon>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { avatar: [{
@@ -12069,11 +12073,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrBrandAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBrandAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrBrandAvatarModule, declarations: [ClrBrandAvatar], imports: [CommonModule, ClarityModule], exports: [ClrBrandAvatar] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBrandAvatarModule, imports: [CommonModule, ClarityModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBrandAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrBrandAvatarModule, declarations: [ClrBrandAvatar], imports: [CommonModule, ClarityModule], exports: [ClrBrandAvatar] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBrandAvatarModule, imports: [CommonModule, ClarityModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBrandAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBrandAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -12190,10 +12194,10 @@ class ClrAddonsLabel {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsLabel, deps: [{ token: ControlIdService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrAddonsLabel, isStandalone: false, selector: "label", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAddonsLabel, deps: [{ token: ControlIdService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrAddonsLabel, isStandalone: false, selector: "label", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAddonsLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: 'label',
@@ -12251,10 +12255,10 @@ class LocationBarSearchComponent {
     getMinCharactersText() {
         return `Type ${this.searchRequest?.minCharacters ?? this.MIN_CHARACTERS_DEFAULT}+ characters to search.`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LocationBarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LocationBarSearchComponent, isStandalone: false, selector: "clr-location-bar-search", inputs: { searchRequest: ["clrSearchRequest", "searchRequest"] }, outputs: { searchPerformed: "searchPerformed" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"clr-col-md-12 search-wrapper\">\n  <form clrForm>\n    <clr-input-container class=\"input-container\">\n      <label hidden></label>\n      <input\n        #searchInput\n        class=\"clr-col-md-12\"\n        clrInput\n        clrSearch\n        [placeholder]=\"searchRequest?.placeholder ?? ''\"\n        type=\"text\"\n        name=\"search\"\n        (keydown.Space)=\"preventDropdownActions($event)\"\n        [formControl]=\"searchControl\"\n      />\n      @if (displayWarning) {\n      <clr-control-helper class=\"min-text-warning\">{{\n        searchRequest?.minCharacterText ?? getMinCharactersText()\n      }}</clr-control-helper>\n      }\n    </clr-input-container>\n  </form>\n</div>\n", styles: ["input::placeholder{font-size:.55rem}.search-wrapper{margin-bottom:.3rem}.input-container{margin-top:0}.min-text-warning{color:var(--cds-global-color-construction-800)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i1$1.ClrControlHelper, selector: "clr-control-helper" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClrAutocompleteOff, selector: "input:not([autocomplete])" }, { kind: "directive", type: ClrAddonsLabel, selector: "label" }, { kind: "directive", type: ClrSearchField, selector: "[clrSearch]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LocationBarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LocationBarSearchComponent, isStandalone: false, selector: "clr-location-bar-search", inputs: { searchRequest: ["clrSearchRequest", "searchRequest"] }, outputs: { searchPerformed: "searchPerformed" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"clr-col-md-12 search-wrapper\">\n  <form clrForm>\n    <clr-input-container class=\"input-container\">\n      <label hidden></label>\n      <input\n        #searchInput\n        class=\"clr-col-md-12\"\n        clrInput\n        clrSearch\n        [placeholder]=\"searchRequest?.placeholder ?? ''\"\n        type=\"text\"\n        name=\"search\"\n        (keydown.Space)=\"preventDropdownActions($event)\"\n        [formControl]=\"searchControl\"\n      />\n      @if (displayWarning) {\n      <clr-control-helper class=\"min-text-warning\">{{\n        searchRequest?.minCharacterText ?? getMinCharactersText()\n      }}</clr-control-helper>\n      }\n    </clr-input-container>\n  </form>\n</div>\n", styles: ["input::placeholder{font-size:.55rem}.search-wrapper{margin-bottom:.3rem}.input-container{margin-top:0}.min-text-warning{color:var(--cds-global-color-construction-800)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i1$1.ClrControlHelper, selector: "clr-control-helper" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClrAutocompleteOff, selector: "input:not([autocomplete])" }, { kind: "directive", type: ClrAddonsLabel, selector: "label" }, { kind: "directive", type: ClrSearchField, selector: "[clrSearch]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LocationBarSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LocationBarSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-location-bar-search', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"clr-col-md-12 search-wrapper\">\n  <form clrForm>\n    <clr-input-container class=\"input-container\">\n      <label hidden></label>\n      <input\n        #searchInput\n        class=\"clr-col-md-12\"\n        clrInput\n        clrSearch\n        [placeholder]=\"searchRequest?.placeholder ?? ''\"\n        type=\"text\"\n        name=\"search\"\n        (keydown.Space)=\"preventDropdownActions($event)\"\n        [formControl]=\"searchControl\"\n      />\n      @if (displayWarning) {\n      <clr-control-helper class=\"min-text-warning\">{{\n        searchRequest?.minCharacterText ?? getMinCharactersText()\n      }}</clr-control-helper>\n      }\n    </clr-input-container>\n  </form>\n</div>\n", styles: ["input::placeholder{font-size:.55rem}.search-wrapper{margin-bottom:.3rem}.input-container{margin-top:0}.min-text-warning{color:var(--cds-global-color-construction-800)}\n"] }]
         }], propDecorators: { searchRequest: [{
@@ -12377,10 +12381,10 @@ class LocationBarNodeComponent {
         }
         this.searchItemChanged.emit(searchedItem);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LocationBarNodeComponent, isStandalone: false, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode", searchResultItems: ["clrSearchResultItems", "searchResultItems"], searchRequest: ["clrSearchRequest", "searchRequest"] }, outputs: { selectionChanged: "selectionChanged", searchItemChanged: "searchItemChanged" }, host: { properties: { "class.location-bar-node": "true" } }, viewQueries: [{ propertyName: "locationBarSearch", first: true, predicate: ["locationBarSearch"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (parentNode) { @if (parentNode.getChildren()?.length > 0) {\n<ng-content></ng-content>\n} @if ( (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1) {\n<clr-dropdown>\n  <button\n    class=\"btn btn-link btn-sm\"\n    (blur)=\"focus = false\"\n    (focus)=\"focus = true\"\n    (click)=\"resetSearch()\"\n    clrDropdownTrigger\n  >\n    @if (parentNode.getSelectedChild(); as node) {\n    <span\n      (click)=\"resetSearch()\"\n      class=\"text-truncate\"\n      [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n      title=\"{{ node.label }}\"\n    >\n      {{ node.label }}\n    </span>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n    } @else {\n    <cds-icon class=\"unselected\" size=\"18\" [solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;... }\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" [clrDropdownMenuItemMinHeight]=\"'24px'\" *clrIfOpen>\n    @if (searchRequest) {\n    <clr-location-bar-search\n      #locationBarSearch\n      [clrSearchRequest]=\"searchRequest\"\n      (searchPerformed)=\"onSearch($event)\"\n    ></clr-location-bar-search>\n    } @if (displaySearchResult()) { @if (searchResultItems.length !== 0) { @for (searchResultItem of searchResultItems;\n    track searchResultItem) {\n    <button type=\"button\" clrDropdownItem class=\"text-truncate\" (click)=\"onSearchItemChanged(searchResultItem)\">\n      <ng-container\n        *ngTemplateOutlet=\"searchRequest?.searchResultItemRef; context: { $implicit: searchResultItem }\"\n      ></ng-container>\n    </button>\n    } } @else {\n    <span class=\"no-result-text\">\n      {{ searchRequest?.noResultsText ?? 'No search result found.' }}\n    </span>\n    } } @else { @for (item of selectableChilds; track item) {\n    <button\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    } }\n  </clr-dropdown-menu>\n</clr-dropdown>\n} @else { @if (parentNode.getSelectedChild()) { @if (parentNode.getSelectedChild().selectable) {\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} @else {\n<span\n  class=\"unselectable-node text-truncate\"\n  [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n  title=\"{{ parentNode.getSelectedChild().label }}\"\n>\n  {{ parentNode.getSelectedChild().label }}\n</span>\n} } } @if (parentNode.getSelectedChild() && parentNode.getChildren().length > 0) {\n<clr-location-bar-node\n  [parentNode]=\"parentNode.getSelectedChild()\"\n  [clrSearchRequest]=\"searchRequest\"\n  [clrSearchResultItems]=\"searchResultItems\"\n  (selectionChanged)=\"onSelectionChanged($event)\"\n  (searchItemChanged)=\"onSearchItemChanged(null)\"\n>\n  <span>/</span>\n</clr-location-bar-node>\n} }\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode", "clrSearchResultItems", "clrSearchRequest"], outputs: ["selectionChanged", "searchItemChanged"] }, { kind: "component", type: LocationBarSearchComponent, selector: "clr-location-bar-search", inputs: ["clrSearchRequest"], outputs: ["searchPerformed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LocationBarNodeComponent, isStandalone: false, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode", searchResultItems: ["clrSearchResultItems", "searchResultItems"], searchRequest: ["clrSearchRequest", "searchRequest"] }, outputs: { selectionChanged: "selectionChanged", searchItemChanged: "searchItemChanged" }, host: { properties: { "class.location-bar-node": "true" } }, viewQueries: [{ propertyName: "locationBarSearch", first: true, predicate: ["locationBarSearch"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (parentNode) { @if (parentNode.getChildren()?.length > 0) {\n<ng-content></ng-content>\n} @if ( (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1) {\n<clr-dropdown>\n  <button\n    class=\"btn btn-link btn-sm\"\n    (blur)=\"focus = false\"\n    (focus)=\"focus = true\"\n    (click)=\"resetSearch()\"\n    clrDropdownTrigger\n  >\n    @if (parentNode.getSelectedChild(); as node) {\n    <span\n      (click)=\"resetSearch()\"\n      class=\"text-truncate\"\n      [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n      title=\"{{ node.label }}\"\n    >\n      {{ node.label }}\n    </span>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n    } @else {\n    <cds-icon class=\"unselected\" size=\"18\" [solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;... }\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" [clrDropdownMenuItemMinHeight]=\"'24px'\" *clrIfOpen>\n    @if (searchRequest) {\n    <clr-location-bar-search\n      #locationBarSearch\n      [clrSearchRequest]=\"searchRequest\"\n      (searchPerformed)=\"onSearch($event)\"\n    ></clr-location-bar-search>\n    } @if (displaySearchResult()) { @if (searchResultItems.length !== 0) { @for (searchResultItem of searchResultItems;\n    track searchResultItem) {\n    <button type=\"button\" clrDropdownItem class=\"text-truncate\" (click)=\"onSearchItemChanged(searchResultItem)\">\n      <ng-container\n        *ngTemplateOutlet=\"searchRequest?.searchResultItemRef; context: { $implicit: searchResultItem }\"\n      ></ng-container>\n    </button>\n    } } @else {\n    <span class=\"no-result-text\">\n      {{ searchRequest?.noResultsText ?? 'No search result found.' }}\n    </span>\n    } } @else { @for (item of selectableChilds; track item) {\n    <button\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    } }\n  </clr-dropdown-menu>\n</clr-dropdown>\n} @else { @if (parentNode.getSelectedChild()) { @if (parentNode.getSelectedChild().selectable) {\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} @else {\n<span\n  class=\"unselectable-node text-truncate\"\n  [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n  title=\"{{ parentNode.getSelectedChild().label }}\"\n>\n  {{ parentNode.getSelectedChild().label }}\n</span>\n} } } @if (parentNode.getSelectedChild() && parentNode.getChildren().length > 0) {\n<clr-location-bar-node\n  [parentNode]=\"parentNode.getSelectedChild()\"\n  [clrSearchRequest]=\"searchRequest\"\n  [clrSearchResultItems]=\"searchResultItems\"\n  (selectionChanged)=\"onSelectionChanged($event)\"\n  (searchItemChanged)=\"onSearchItemChanged(null)\"\n>\n  <span>/</span>\n</clr-location-bar-node>\n} }\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode", "clrSearchResultItems", "clrSearchRequest"], outputs: ["selectionChanged", "searchItemChanged"] }, { kind: "component", type: LocationBarSearchComponent, selector: "clr-location-bar-search", inputs: ["clrSearchRequest"], outputs: ["searchPerformed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-location-bar-node', host: { '[class.location-bar-node]': 'true' }, standalone: false, template: "@if (parentNode) { @if (parentNode.getChildren()?.length > 0) {\n<ng-content></ng-content>\n} @if ( (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1) {\n<clr-dropdown>\n  <button\n    class=\"btn btn-link btn-sm\"\n    (blur)=\"focus = false\"\n    (focus)=\"focus = true\"\n    (click)=\"resetSearch()\"\n    clrDropdownTrigger\n  >\n    @if (parentNode.getSelectedChild(); as node) {\n    <span\n      (click)=\"resetSearch()\"\n      class=\"text-truncate\"\n      [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n      title=\"{{ node.label }}\"\n    >\n      {{ node.label }}\n    </span>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n    } @else {\n    <cds-icon class=\"unselected\" size=\"18\" [solid]=\"focus\" shape=\"tree-view\"></cds-icon>&nbsp;... }\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" [clrDropdownMenuItemMinHeight]=\"'24px'\" *clrIfOpen>\n    @if (searchRequest) {\n    <clr-location-bar-search\n      #locationBarSearch\n      [clrSearchRequest]=\"searchRequest\"\n      (searchPerformed)=\"onSearch($event)\"\n    ></clr-location-bar-search>\n    } @if (displaySearchResult()) { @if (searchResultItems.length !== 0) { @for (searchResultItem of searchResultItems;\n    track searchResultItem) {\n    <button type=\"button\" clrDropdownItem class=\"text-truncate\" (click)=\"onSearchItemChanged(searchResultItem)\">\n      <ng-container\n        *ngTemplateOutlet=\"searchRequest?.searchResultItemRef; context: { $implicit: searchResultItem }\"\n      ></ng-container>\n    </button>\n    } } @else {\n    <span class=\"no-result-text\">\n      {{ searchRequest?.noResultsText ?? 'No search result found.' }}\n    </span>\n    } } @else { @for (item of selectableChilds; track item) {\n    <button\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    } }\n  </clr-dropdown-menu>\n</clr-dropdown>\n} @else { @if (parentNode.getSelectedChild()) { @if (parentNode.getSelectedChild().selectable) {\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} @else {\n<span\n  class=\"unselectable-node text-truncate\"\n  [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n  title=\"{{ parentNode.getSelectedChild().label }}\"\n>\n  {{ parentNode.getSelectedChild().label }}\n</span>\n} } } @if (parentNode.getSelectedChild() && parentNode.getChildren().length > 0) {\n<clr-location-bar-node\n  [parentNode]=\"parentNode.getSelectedChild()\"\n  [clrSearchRequest]=\"searchRequest\"\n  [clrSearchResultItems]=\"searchResultItems\"\n  (selectionChanged)=\"onSelectionChanged($event)\"\n  (searchItemChanged)=\"onSearchItemChanged(null)\"\n>\n  <span>/</span>\n</clr-location-bar-node>\n} }\n" }]
         }], ctorParameters: () => [{ type: LocationBarContentProvider, decorators: [{
@@ -12431,10 +12435,10 @@ class LocationBarComponent {
     onSelectionChanged(selection) {
         this.selectionChanged.emit(selection);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LocationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LocationBarComponent, isStandalone: false, selector: "clr-location-bar", inputs: { iconShape: ["clrIconShape", "iconShape"], iconTitle: ["clrIconTitle", "iconTitle"], searchRequest: ["clrSearchRequest", "searchRequest"], searchResultItems: ["clrSearchResultItems", "searchResultItems"], roots: ["clrRoots", "roots"] }, outputs: { selectionChanged: "clrSelectionChanged", searchItemChanged: "clrSearchItemChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (iconShape) {\n<cds-icon [shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n}\n<clr-location-bar-node\n  (selectionChanged)=\"onSelectionChanged($event)\"\n  (searchItemChanged)=\"searchItemChanged.emit($event)\"\n  [parentNode]=\"root$ | async\"\n  [clrSearchRequest]=\"searchRequest\"\n  [clrSearchResultItems]=\"searchResultItems\"\n>\n</clr-location-bar-node>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode", "clrSearchResultItems", "clrSearchRequest"], outputs: ["selectionChanged", "searchItemChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LocationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LocationBarComponent, isStandalone: false, selector: "clr-location-bar", inputs: { iconShape: ["clrIconShape", "iconShape"], iconTitle: ["clrIconTitle", "iconTitle"], searchRequest: ["clrSearchRequest", "searchRequest"], searchResultItems: ["clrSearchResultItems", "searchResultItems"], roots: ["clrRoots", "roots"] }, outputs: { selectionChanged: "clrSelectionChanged", searchItemChanged: "clrSearchItemChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (iconShape) {\n<cds-icon [shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n}\n<clr-location-bar-node\n  (selectionChanged)=\"onSelectionChanged($event)\"\n  (searchItemChanged)=\"searchItemChanged.emit($event)\"\n  [parentNode]=\"root$ | async\"\n  [clrSearchRequest]=\"searchRequest\"\n  [clrSearchResultItems]=\"searchResultItems\"\n>\n</clr-location-bar-node>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode", "clrSearchResultItems", "clrSearchRequest"], outputs: ["selectionChanged", "searchItemChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LocationBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LocationBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-location-bar', standalone: false, template: "@if (iconShape) {\n<cds-icon [shape]=\"iconShape\" [title]=\"iconTitle\"></cds-icon>\n}\n<clr-location-bar-node\n  (selectionChanged)=\"onSelectionChanged($event)\"\n  (searchItemChanged)=\"searchItemChanged.emit($event)\"\n  [parentNode]=\"root$ | async\"\n  [clrSearchRequest]=\"searchRequest\"\n  [clrSearchResultItems]=\"searchResultItems\"\n>\n</clr-location-bar-node>\n" }]
         }], propDecorators: { iconShape: [{
@@ -12466,11 +12470,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrFormModule, declarations: [ClrAddonsLabel], exports: [ClrAddonsLabel] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFormModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrFormModule, declarations: [ClrAddonsLabel], exports: [ClrAddonsLabel] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFormModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrAddonsLabel],
@@ -12479,8 +12483,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }] });
 
 class ClrLocationBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLocationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent, LocationBarSearchComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrLocationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent, LocationBarSearchComponent], imports: [CommonModule,
             ClrIcon,
             ClrDropdownModule,
             ClrDropdownOverflowModule,
@@ -12490,7 +12494,7 @@ class ClrLocationBarModule {
             ClrFormModule,
             ClrSearchFieldModule,
             ReactiveFormsModule], exports: [LocationBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLocationBarModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrLocationBarModule, imports: [CommonModule,
             ClrIcon,
             ClrDropdownModule,
             ClrDropdownOverflowModule,
@@ -12501,7 +12505,7 @@ class ClrLocationBarModule {
             ClrSearchFieldModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLocationBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrLocationBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LocationBarComponent, LocationBarNodeComponent, LocationBarSearchComponent],
@@ -12525,10 +12529,10 @@ class DatagridFieldDirective {
     getFieldName() {
         return this.clrDgField ?? this.clrDgFieldKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatagridFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: DatagridFieldDirective, isStandalone: false, selector: "[clrDgField],[clrDgFieldKey]", inputs: { clrDgField: "clrDgField", clrDgFieldKey: "clrDgFieldKey" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatagridFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: DatagridFieldDirective, isStandalone: false, selector: "[clrDgField],[clrDgFieldKey]", inputs: { clrDgField: "clrDgField", clrDgFieldKey: "clrDgFieldKey" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatagridFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatagridFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDgField],[clrDgFieldKey]',
@@ -12612,10 +12616,10 @@ class DatagridColumnReorderDirective {
     isDragItemDgColumn(item) {
         return item.element.nativeElement.tagName === 'CLR-DG-COLUMN';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatagridColumnReorderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: DatagridColumnReorderDirective, isStandalone: false, selector: "[clrDatagridColumnReorder]", inputs: { columnDefinitions: ["clrDatagridColumnReorder", "columnDefinitions"] }, outputs: { columnOrderChanged: "clrDatagridColumnOrderChanged" }, host: { properties: { "class.datagrid-column-reorder": "true" } }, queries: [{ propertyName: "clrColumns", predicate: ClrDatagridColumn }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatagridColumnReorderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: DatagridColumnReorderDirective, isStandalone: false, selector: "[clrDatagridColumnReorder]", inputs: { columnDefinitions: ["clrDatagridColumnReorder", "columnDefinitions"] }, outputs: { columnOrderChanged: "clrDatagridColumnOrderChanged" }, host: { properties: { "class.datagrid-column-reorder": "true" } }, queries: [{ propertyName: "clrColumns", predicate: ClrDatagridColumn }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatagridColumnReorderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatagridColumnReorderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDatagridColumnReorder]',
@@ -12641,36 +12645,36 @@ class DynamicCellContentComponent {
         this.item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : /* istanbul ignore next */ []));
         this.defaultDisplayValue = input('', ...(ngDevMode ? [{ debugName: "defaultDisplayValue" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DynamicCellContentComponent, isStandalone: false, selector: "clr-dg-dynamic-cell-content", inputs: { col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, defaultDisplayValue: { classPropertyName: "defaultDisplayValue", publicName: "defaultDisplayValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DynamicCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DynamicCellContentComponent, isStandalone: false, selector: "clr-dg-dynamic-cell-content", inputs: { col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, defaultDisplayValue: { classPropertyName: "defaultDisplayValue", publicName: "defaultDisplayValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (col().component) {
-    <ng-container *ngComponentOutlet="col().component; inputs: { item: item() }" />
+      <ng-container *ngComponentOutlet="col().component; inputs: { item: item() }" />
     } @else if (col().template) {
-    <ng-container *ngTemplateOutlet="col().template; context: { $implicit: item() }" />
+      <ng-container *ngTemplateOutlet="col().template; context: { $implicit: item() }" />
     } @else if (col().formatter) {
-    {{ col().formatter(item()) }}
+      {{ col().formatter(item()) }}
     } @else if (col().displayField) {
-    {{ item()[col().displayField] }}
+      {{ item()[col().displayField] }}
     } @else {
-    {{ defaultDisplayValue() }}
+      {{ defaultDisplayValue() }}
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicCellContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DynamicCellContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-dynamic-cell-content',
                     template: `
     @if (col().component) {
-    <ng-container *ngComponentOutlet="col().component; inputs: { item: item() }" />
+      <ng-container *ngComponentOutlet="col().component; inputs: { item: item() }" />
     } @else if (col().template) {
-    <ng-container *ngTemplateOutlet="col().template; context: { $implicit: item() }" />
+      <ng-container *ngTemplateOutlet="col().template; context: { $implicit: item() }" />
     } @else if (col().formatter) {
-    {{ col().formatter(item()) }}
+      {{ col().formatter(item()) }}
     } @else if (col().displayField) {
-    {{ item()[col().displayField] }}
+      {{ item()[col().displayField] }}
     } @else {
-    {{ defaultDisplayValue() }}
+      {{ defaultDisplayValue() }}
     }
   `,
                     standalone: false,
@@ -12679,11 +12683,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], propDecorators: { col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], defaultDisplayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDisplayValue", required: false }] }] } });
 
 class ClrDatagridColumnReorderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridColumnReorderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridColumnReorderModule, declarations: [DatagridColumnReorderDirective, DynamicCellContentComponent], imports: [NgComponentOutlet, NgTemplateOutlet], exports: [DatagridColumnReorderDirective, DynamicCellContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridColumnReorderModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDatagridColumnReorderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDatagridColumnReorderModule, declarations: [DatagridColumnReorderDirective, DynamicCellContentComponent], imports: [NgComponentOutlet, NgTemplateOutlet], exports: [DatagridColumnReorderDirective, DynamicCellContentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDatagridColumnReorderModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridColumnReorderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDatagridColumnReorderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DatagridColumnReorderDirective, DynamicCellContentComponent],
@@ -13002,10 +13006,10 @@ class StatePersistenceKeyDirective {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatePersistenceKeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: StatePersistenceKeyDirective, isStandalone: false, selector: "[clrStatePersistenceKey]", inputs: { options: ["clrStatePersistenceKey", "options"], useLocalStoreOnly: ["clrUseLocalStoreOnly", "useLocalStoreOnly"], paginationDescription: ["clrPaginationDescription", "paginationDescription"] }, host: { listeners: { "window:beforeunload": "persistColumnWidths()" } }, queries: [{ propertyName: "pagination", first: true, predicate: ClrDatagridPagination, descendants: true }, { propertyName: "paginationElem", first: true, predicate: ClrDatagridPagination, descendants: true, read: ElementRef }, { propertyName: "customFilters", predicate: ClrDatagridFilter, descendants: true }, { propertyName: "gridColumnRefs", predicate: ClrDatagridColumn, read: ElementRef }, { propertyName: "gridColumns", predicate: ClrDatagridColumn }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StatePersistenceKeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: StatePersistenceKeyDirective, isStandalone: false, selector: "[clrStatePersistenceKey]", inputs: { options: ["clrStatePersistenceKey", "options"], useLocalStoreOnly: ["clrUseLocalStoreOnly", "useLocalStoreOnly"], paginationDescription: ["clrPaginationDescription", "paginationDescription"] }, host: { listeners: { "window:beforeunload": "persistColumnWidths()" } }, queries: [{ propertyName: "pagination", first: true, predicate: ClrDatagridPagination, descendants: true }, { propertyName: "paginationElem", first: true, predicate: ClrDatagridPagination, descendants: true, read: ElementRef }, { propertyName: "customFilters", predicate: ClrDatagridFilter, descendants: true }, { propertyName: "gridColumnRefs", predicate: ClrDatagridColumn, read: ElementRef }, { propertyName: "gridColumns", predicate: ClrDatagridColumn }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrStatePersistenceKey]',
@@ -13096,10 +13100,10 @@ class ColumnHiddenStatePersistenceDirective {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, deps: [{ token: DatagridFieldDirective, optional: true }, { token: StatePersistenceKeyDirective, optional: true }, { token: i1$2.ClrDatagrid }, { token: i1$2.ClrDatagridHideableColumn }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ColumnHiddenStatePersistenceDirective, isStandalone: false, selector: "[clrDgHideableColumn]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, deps: [{ token: DatagridFieldDirective, optional: true }, { token: StatePersistenceKeyDirective, optional: true }, { token: i1$2.ClrDatagrid }, { token: i1$2.ClrDatagridHideableColumn }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ColumnHiddenStatePersistenceDirective, isStandalone: false, selector: "[clrDgHideableColumn]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDgHideableColumn]',
@@ -13112,11 +13116,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }] }, { type: i1$2.ClrDatagrid }, { type: i1$2.ClrDatagridHideableColumn }] });
 
 class ClrDatagridStatePersistenceModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridStatePersistenceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridStatePersistenceModule, declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective], exports: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridStatePersistenceModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDatagridStatePersistenceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDatagridStatePersistenceModule, declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective], exports: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDatagridStatePersistenceModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridStatePersistenceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDatagridStatePersistenceModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective],
@@ -13243,10 +13247,10 @@ class ClrEnumFilterComponent {
         }
         return value ? { value: value, displayValue: value } : { value: '', displayValue: this.emptyValue };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrEnumFilterComponent, deps: [{ token: i1$2.ClrDatagridFilter }, { token: i1$2.ClrDatagrid }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrEnumFilterComponent, isStandalone: false, selector: "clr-enum-filter", inputs: { property: ["clrProperty", "property"], setEmptyValuesTranslation: ["clrEmptyValuesTranslation", "setEmptyValuesTranslation"], value: ["clrFilterValues", "value"], clrPossibleValues: "clrPossibleValues" }, outputs: { clrFilterValuesChange: "clrFilterValuesChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilters()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<clr-checkbox-container class=\"filter-selection\">\n  @for (possibleValue of possibleValues; track possibleValue) {\n  <clr-checkbox-wrapper>\n    <input\n      type=\"checkbox\"\n      clrCheckbox\n      value=\"{{ possibleValue.displayValue ?? possibleValue }}\"\n      name=\"possibleValue\"\n      [ngModel]=\"containsFilterValue(filteredValues, possibleValue)\"\n      (ngModelChange)=\"onChange(possibleValue, $event)\"\n    />\n    <label>{{ possibleValue.displayValue ?? possibleValue }}</label>\n  </clr-checkbox-wrapper>\n  }\n</clr-checkbox-container>\n", styles: [".filter-selection{display:block;max-height:calc(100dvh - 4rem);overflow-y:auto}.btn-trash{position:absolute;top:15px;right:40px;padding:0}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrEnumFilterComponent, deps: [{ token: i1$2.ClrDatagridFilter }, { token: i1$2.ClrDatagrid }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrEnumFilterComponent, isStandalone: false, selector: "clr-enum-filter", inputs: { property: ["clrProperty", "property"], setEmptyValuesTranslation: ["clrEmptyValuesTranslation", "setEmptyValuesTranslation"], value: ["clrFilterValues", "value"], clrPossibleValues: "clrPossibleValues" }, outputs: { clrFilterValuesChange: "clrFilterValuesChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilters()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<clr-checkbox-container class=\"filter-selection\">\n  @for (possibleValue of possibleValues; track possibleValue) {\n  <clr-checkbox-wrapper>\n    <input\n      type=\"checkbox\"\n      clrCheckbox\n      value=\"{{ possibleValue.displayValue ?? possibleValue }}\"\n      name=\"possibleValue\"\n      [ngModel]=\"containsFilterValue(filteredValues, possibleValue)\"\n      (ngModelChange)=\"onChange(possibleValue, $event)\"\n    />\n    <label>{{ possibleValue.displayValue ?? possibleValue }}</label>\n  </clr-checkbox-wrapper>\n  }\n</clr-checkbox-container>\n", styles: [".filter-selection{display:block;max-height:calc(100dvh - 4rem);overflow-y:auto}.btn-trash{position:absolute;top:15px;right:40px;padding:0}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrEnumFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrEnumFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-enum-filter', standalone: false, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilters()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<clr-checkbox-container class=\"filter-selection\">\n  @for (possibleValue of possibleValues; track possibleValue) {\n  <clr-checkbox-wrapper>\n    <input\n      type=\"checkbox\"\n      clrCheckbox\n      value=\"{{ possibleValue.displayValue ?? possibleValue }}\"\n      name=\"possibleValue\"\n      [ngModel]=\"containsFilterValue(filteredValues, possibleValue)\"\n      (ngModelChange)=\"onChange(possibleValue, $event)\"\n    />\n    <label>{{ possibleValue.displayValue ?? possibleValue }}</label>\n  </clr-checkbox-wrapper>\n  }\n</clr-checkbox-container>\n", styles: [".filter-selection{display:block;max-height:calc(100dvh - 4rem);overflow-y:auto}.btn-trash{position:absolute;top:15px;right:40px;padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ClrDatagridFilter }, { type: i1$2.ClrDatagrid }], propDecorators: { property: [{
@@ -13265,11 +13269,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class ClrEnumFilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrEnumFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrEnumFilterModule, declarations: [ClrEnumFilterComponent], imports: [ClarityModule, CommonModule, FormsModule], exports: [ClrEnumFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrEnumFilterModule, imports: [ClarityModule, CommonModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrEnumFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrEnumFilterModule, declarations: [ClrEnumFilterComponent], imports: [ClarityModule, CommonModule, FormsModule], exports: [ClrEnumFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrEnumFilterModule, imports: [ClarityModule, CommonModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrEnumFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrEnumFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ClarityModule, CommonModule, FormsModule],
@@ -13487,10 +13491,10 @@ class ClrDateFilterComponent {
             this.valError = this._from > this._to;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateFilterComponent, deps: [{ token: i1$2.ClrCommonStringsService }, { token: i1$2.ClrDatagridFilter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrDateFilterComponent, isStandalone: false, selector: "clr-date-filter", inputs: { timeActive: "timeActive", dateValidationError: "dateValidationError", property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n@if (!timeActive) {\n<clr-date-container class=\"filter-selection\">\n  <input\n    #input_from\n    type=\"date\"\n    name=\"from\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"from\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n  />\n</clr-date-container>\n<clr-date-container class=\"filter-selection\">\n  <input\n    type=\"date\"\n    name=\"to\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"to\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n  />\n</clr-date-container>\n@if (valError) {\n<clr-control-error>{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }} </clr-control-error>\n} } @if (timeActive) {\n<clr-date-time-container class=\"filter-selection\">\n  <clr-date-container class=\"time-filter-active\">\n    <input\n      #input_from\n      type=\"date\"\n      name=\"from\"\n      class=\"datagrid-date-filter-input time-filter-active-input\"\n      [(clrDate)]=\"from\"\n      [placeholder]=\"minPlaceholderValue\"\n      [attr.aria-label]=\"minPlaceholderValue\"\n    />\n  </clr-date-container>\n  <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"fromTime\" />\n</clr-date-time-container>\n<clr-date-time-container>\n  <clr-date-container class=\"time-filter-active\">\n    <input\n      type=\"date\"\n      name=\"to\"\n      class=\"datagrid-date-filter-input time-filter-active-input\"\n      [(clrDate)]=\"to\"\n      [placeholder]=\"maxPlaceholderValue\"\n      [attr.aria-label]=\"maxPlaceholderValue\"\n    />\n  </clr-date-container>\n  <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"toTime\" />\n</clr-date-time-container>\n@if (valError) {\n<clr-control-error>{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }} </clr-control-error>\n} }\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrControlError, selector: "clr-control-error" }, { kind: "directive", type: i4$1.ClrDateInput, selector: "[clrDate]", inputs: ["clrDate", "min", "max"], outputs: ["clrDateChange"] }, { kind: "component", type: i4$1.ClrDateContainer, selector: "clr-date-container, clr-date-range-container", inputs: ["clrFirstDayOfWeek", "showActionButtons", "clrPosition", "rangeOptions", "min", "max"] }, { kind: "directive", type: i4$1.ClrDateInputValidator, selector: "[clrDate], [clrStartDate], [clrEndDate]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDateTimeContainer, selector: "clr-date-time-container" }, { kind: "directive", type: ClrTimeInput, selector: "[clrTime]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateFilterComponent, deps: [{ token: i1$2.ClrCommonStringsService }, { token: i1$2.ClrDatagridFilter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrDateFilterComponent, isStandalone: false, selector: "clr-date-filter", inputs: { timeActive: "timeActive", dateValidationError: "dateValidationError", property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n@if (!timeActive) {\n<clr-date-container class=\"filter-selection\">\n  <input\n    #input_from\n    type=\"date\"\n    name=\"from\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"from\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n  />\n</clr-date-container>\n<clr-date-container class=\"filter-selection\">\n  <input\n    type=\"date\"\n    name=\"to\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"to\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n  />\n</clr-date-container>\n@if (valError) {\n<clr-control-error>{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }} </clr-control-error>\n} } @if (timeActive) {\n<clr-date-time-container class=\"filter-selection\">\n  <clr-date-container class=\"time-filter-active\">\n    <input\n      #input_from\n      type=\"date\"\n      name=\"from\"\n      class=\"datagrid-date-filter-input time-filter-active-input\"\n      [(clrDate)]=\"from\"\n      [placeholder]=\"minPlaceholderValue\"\n      [attr.aria-label]=\"minPlaceholderValue\"\n    />\n  </clr-date-container>\n  <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"fromTime\" />\n</clr-date-time-container>\n<clr-date-time-container>\n  <clr-date-container class=\"time-filter-active\">\n    <input\n      type=\"date\"\n      name=\"to\"\n      class=\"datagrid-date-filter-input time-filter-active-input\"\n      [(clrDate)]=\"to\"\n      [placeholder]=\"maxPlaceholderValue\"\n      [attr.aria-label]=\"maxPlaceholderValue\"\n    />\n  </clr-date-container>\n  <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"toTime\" />\n</clr-date-time-container>\n@if (valError) {\n<clr-control-error>{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }} </clr-control-error>\n} }\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrControlError, selector: "clr-control-error" }, { kind: "directive", type: i4$1.ClrDateInput, selector: "[clrDate]", inputs: ["clrDate", "min", "max"], outputs: ["clrDateChange"] }, { kind: "component", type: i4$1.ClrDateContainer, selector: "clr-date-container, clr-date-range-container", inputs: ["clrFirstDayOfWeek", "showActionButtons", "clrPosition", "rangeOptions", "min", "max"] }, { kind: "directive", type: i4$1.ClrDateInputValidator, selector: "[clrDate], [clrStartDate], [clrEndDate]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDateTimeContainer, selector: "clr-date-time-container" }, { kind: "directive", type: ClrTimeInput, selector: "[clrTime]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-date-filter', standalone: false, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n@if (!timeActive) {\n<clr-date-container class=\"filter-selection\">\n  <input\n    #input_from\n    type=\"date\"\n    name=\"from\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"from\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n  />\n</clr-date-container>\n<clr-date-container class=\"filter-selection\">\n  <input\n    type=\"date\"\n    name=\"to\"\n    class=\"datagrid-date-filter-input\"\n    [(clrDate)]=\"to\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n  />\n</clr-date-container>\n@if (valError) {\n<clr-control-error>{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }} </clr-control-error>\n} } @if (timeActive) {\n<clr-date-time-container class=\"filter-selection\">\n  <clr-date-container class=\"time-filter-active\">\n    <input\n      #input_from\n      type=\"date\"\n      name=\"from\"\n      class=\"datagrid-date-filter-input time-filter-active-input\"\n      [(clrDate)]=\"from\"\n      [placeholder]=\"minPlaceholderValue\"\n      [attr.aria-label]=\"minPlaceholderValue\"\n    />\n  </clr-date-container>\n  <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"fromTime\" />\n</clr-date-time-container>\n<clr-date-time-container>\n  <clr-date-container class=\"time-filter-active\">\n    <input\n      type=\"date\"\n      name=\"to\"\n      class=\"datagrid-date-filter-input time-filter-active-input\"\n      [(clrDate)]=\"to\"\n      [placeholder]=\"maxPlaceholderValue\"\n      [attr.aria-label]=\"maxPlaceholderValue\"\n    />\n  </clr-date-container>\n  <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"toTime\" />\n</clr-date-time-container>\n@if (valError) {\n<clr-control-error>{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }} </clr-control-error>\n} }\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ClrCommonStringsService }, { type: i1$2.ClrDatagridFilter }], propDecorators: { timeActive: [{
@@ -13515,11 +13519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class ClrDateFilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrDateFilterModule, declarations: [ClrDateFilterComponent], imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule], exports: [ClrDateFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateFilterModule, imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDateFilterModule, declarations: [ClrDateFilterComponent], imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule], exports: [ClrDateFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateFilterModule, imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule],
@@ -13708,10 +13712,10 @@ class ClrDatepickerComponent {
     focus() {
         this.inputElm.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrDatepickerComponent, isStandalone: false, selector: "clr-datepicker", inputs: { value: "value", label: "label", minDate: "minDate", maxDate: "maxDate", timeSelection: "timeSelection" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-date-container>\n  <label>{{ this.label }}</label>\n  <input #inputElm clrDate [(clrDate)]=\"this.date\" [min]=\"this.minDateAttr\" [max]=\"this.maxDateAttr\" />\n</clr-date-container>\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4$1.ClrDateInput, selector: "[clrDate]", inputs: ["clrDate", "min", "max"], outputs: ["clrDateChange"] }, { kind: "component", type: i4$1.ClrDateContainer, selector: "clr-date-container, clr-date-range-container", inputs: ["clrFirstDayOfWeek", "showActionButtons", "clrPosition", "rangeOptions", "min", "max"] }, { kind: "directive", type: i4$1.ClrDateInputValidator, selector: "[clrDate], [clrStartDate], [clrEndDate]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrDatepickerComponent, isStandalone: false, selector: "clr-datepicker", inputs: { value: "value", label: "label", minDate: "minDate", maxDate: "maxDate", timeSelection: "timeSelection" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-date-container>\n  <label>{{ this.label }}</label>\n  <input #inputElm clrDate [(clrDate)]=\"this.date\" [min]=\"this.minDateAttr\" [max]=\"this.maxDateAttr\" />\n</clr-date-container>\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4$1.ClrDateInput, selector: "[clrDate]", inputs: ["clrDate", "min", "max"], outputs: ["clrDateChange"] }, { kind: "component", type: i4$1.ClrDateContainer, selector: "clr-date-container, clr-date-range-container", inputs: ["clrFirstDayOfWeek", "showActionButtons", "clrPosition", "rangeOptions", "min", "max"] }, { kind: "directive", type: i4$1.ClrDateInputValidator, selector: "[clrDate], [clrStartDate], [clrEndDate]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-datepicker', standalone: false, template: "<clr-date-container>\n  <label>{{ this.label }}</label>\n  <input #inputElm clrDate [(clrDate)]=\"this.date\" [min]=\"this.minDateAttr\" [max]=\"this.maxDateAttr\" />\n</clr-date-container>\n" }]
         }], propDecorators: { value: [{
@@ -13784,10 +13788,10 @@ class DaterangeControlStateService {
             this.statusChange.emit(this._invalid);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeControlStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeControlStateService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeControlStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeControlStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeControlStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeControlStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -14125,10 +14129,10 @@ class DaterangeParsingService {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeParsingService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeParsingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeParsingService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeParsingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeParsingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeParsingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -14195,10 +14199,10 @@ class DaterangeService {
             this._selectedDaterange.from == null ||
             this._selectedDaterange.to == null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DaterangeService, decorators: [{
             type: Injectable
         }] });
 
@@ -14273,10 +14277,10 @@ class ClrAbstractContainer {
         this.daterangeControlStateService = daterangeControlStateService;
         this.isFormControl = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAbstractContainer, deps: [{ token: i1$2.ClrLayout, optional: true }, { token: DaterangeControlStateService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrAbstractContainer, isStandalone: true, host: { properties: { "class.clr-form-control": "this.isFormControl", "class.clr-row": "this.addLayoutGrid" } }, queries: [{ propertyName: "labelComponent", first: true, predicate: ClrControlLabel, descendants: true }, { propertyName: "controlHelperComponent", first: true, predicate: ClrControlHelper, descendants: true }, { propertyName: "controlErrorComponent", first: true, predicate: ClrControlError, descendants: true }, { propertyName: "controlSuccessComponent", first: true, predicate: ClrControlSuccess, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAbstractContainer, deps: [{ token: i1$2.ClrLayout, optional: true }, { token: DaterangeControlStateService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrAbstractContainer, isStandalone: true, host: { properties: { "class.clr-form-control": "this.isFormControl", "class.clr-row": "this.addLayoutGrid" } }, queries: [{ propertyName: "labelComponent", first: true, predicate: ClrControlLabel, descendants: true }, { propertyName: "controlHelperComponent", first: true, predicate: ClrControlHelper, descendants: true }, { propertyName: "controlErrorComponent", first: true, predicate: ClrControlError, descendants: true }, { propertyName: "controlSuccessComponent", first: true, predicate: ClrControlSuccess, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAbstractContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAbstractContainer, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1$2.ClrLayout, decorators: [{
                     type: Optional
@@ -14571,10 +14575,10 @@ class ClrDaterangepickerDirective {
             }, true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerDirective, deps: [{ token: i3.NgControl, self: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DaterangeControlStateService }, { token: ControlIdService }, { token: DaterangeService }, { token: DaterangeParsingService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrDaterangepickerDirective, isStandalone: false, selector: "[clrDaterangepicker]", inputs: { min: "min", max: "max", separatorText: "separatorText", placeholder: "placeholder", id: "id", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "change": "onChangeEvent($event.target)", "focus": "focusEvent()", "blur": "blurEvent()" }, properties: { "attr.placeholder": "this.placeholderText", "id": "this.id", "disabled": "this.disabled", "attr.type": "this.inputType", "class.clr-input": "this.inputClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangepickerDirective, deps: [{ token: i3.NgControl, self: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DaterangeControlStateService }, { token: ControlIdService }, { token: DaterangeService }, { token: DaterangeParsingService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDaterangepickerDirective, isStandalone: false, selector: "[clrDaterangepicker]", inputs: { min: "min", max: "max", separatorText: "separatorText", placeholder: "placeholder", id: "id", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "change": "onChangeEvent($event.target)", "focus": "focusEvent()", "blur": "blurEvent()" }, properties: { "attr.placeholder": "this.placeholderText", "id": "this.id", "disabled": "this.disabled", "attr.type": "this.inputType", "class.clr-input": "this.inputClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker]',
@@ -14653,10 +14657,10 @@ class ClrTimepickerComponent {
     focus() {
         this.inputElm.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrTimepickerComponent, isStandalone: false, selector: "clr-timepicker", inputs: { value: "value", activateSeconds: "activateSeconds" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-input-container class=\"clr-input-time\">\n  <label class=\"clr-control-label\">&nbsp;</label>\n  <input clrInput #inputElm [(ngModel)]=\"this.time\" type=\"time\" step=\"{{ activateSeconds ? 1 : 60 }}\" />\n</clr-input-container>\n", styles: [".clr-input-time{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$2.ClrInputContainer, selector: "clr-input-container" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrTimepickerComponent, isStandalone: false, selector: "clr-timepicker", inputs: { value: "value", activateSeconds: "activateSeconds" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-input-container class=\"clr-input-time\">\n  <label class=\"clr-control-label\">&nbsp;</label>\n  <input clrInput #inputElm [(ngModel)]=\"this.time\" type=\"time\" step=\"{{ activateSeconds ? 1 : 60 }}\" />\n</clr-input-container>\n", styles: [".clr-input-time{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$2.ClrInputContainer, selector: "clr-input-container" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-timepicker', standalone: false, template: "<clr-input-container class=\"clr-input-time\">\n  <label class=\"clr-control-label\">&nbsp;</label>\n  <input clrInput #inputElm [(ngModel)]=\"this.time\" type=\"time\" step=\"{{ activateSeconds ? 1 : 60 }}\" />\n</clr-input-container>\n", styles: [".clr-input-time{margin-top:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
@@ -14891,10 +14895,10 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
             toTime: value,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerContainerComponent, deps: [{ token: i1$2.ClrPopoverService }, { token: i1$2.ClrCommonStringsService }, { token: i1$2.ClrLayout, optional: true }, { token: DaterangeControlStateService }, { token: DaterangeService }, { token: DaterangeParsingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrDaterangepickerContainerComponent, isStandalone: false, selector: "clr-daterangepicker-container", inputs: { presets: "presets", presetsDateTime: "presetsDateTime", timeSelection: "timeSelection", activateSeconds: "activateSeconds", popoverPosition: ["clrPosition", "popoverPosition"], labelFrom: "labelFrom", labelTo: "labelTo" }, host: { properties: { "class": "this.classes" } }, providers: [ClrPopoverService, DaterangeControlStateService, DaterangeService, ControlIdService], queries: [{ propertyName: "daterangepickerDirective", first: true, predicate: ClrDaterangepickerDirective, descendants: true }], viewQueries: [{ propertyName: "datepickerComponents", predicate: ClrDatepickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n@if (!this.labelComponent && this.addLayoutGrid) {\n<label></label>\n}\n<div\n  [class.clr-col-12]=\"this.addLayoutGrid\"\n  [class.clr-col-md-10]=\"this.addLayoutGrid\"\n  [class.clr-error]=\"this.isInvalid\"\n  class=\"clr-control-container\"\n>\n  <div class=\"clr-input-wrapper\">\n    <div\n      [class.clr-focus]=\"this.focus\"\n      class=\"custom-input-group clr-input-group\"\n      [ngClass]=\"_timeSelection ? 'custom-input-group-time' : 'custom-input-group-date'\"\n    >\n      <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n      <button\n        [attr.aria-label]=\"this.friendlyDaterange\"\n        [disabled]=\"this.disabled\"\n        [title]=\"this.friendlyDaterange\"\n        class=\"clr-input-group-icon-action\"\n        clrPopoverOpenCloseButton\n        clrPopoverOrigin\n        type=\"button\"\n      >\n        <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n      </button>\n    </div>\n    @if (this.isInvalid) {\n    <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" status=\"danger\"></cds-icon>\n    } @if (!this.isInvalid) {\n    <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"check-circle\" status=\"success\"></cds-icon>\n    }\n  </div>\n  @if (this.showHelper) {\n  <ng-content select=\"clr-control-helper\"></ng-content>\n  } @if (this.showInvalid) {\n  <ng-content select=\"clr-control-error\"></ng-content>\n  } @if (this.showValid) {\n  <ng-content select=\"clr-control-success\"></ng-content>\n  }\n\n  <div\n    *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    class=\"clr-daterangepicker-container-popup datepicker\"\n  >\n    <button\n      class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n      type=\"button\"\n      (click)=\"daterangeService.updateSelectedDaterange(null)\"\n    >\n      <cds-icon shape=\"trash\"></cds-icon>\n    </button>\n    <button\n      [attr.aria-label]=\"this.commonStrings.close\"\n      class=\"btn btn-sm btn-link close\"\n      clrPopoverCloseButton\n      type=\"button\"\n    >\n      <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n      <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n    </button>\n    <div class=\"clr-daterangepicker-container-popup-content\">\n      <form [clrLayout]=\"'vertical'\" clrForm>\n        <div class=\"datetime-container\">\n          <clr-datepicker\n            (valueChange)=\"this.onDateFromChange($event)\"\n            [label]=\"this.labelFrom\"\n            [maxDate]=\"this.maxDate\"\n            [minDate]=\"this.minDate\"\n            [value]=\"this.dateFrom\"\n            class=\"clr-datepicker\"\n          >\n          </clr-datepicker>\n          @if (_timeSelection) {\n          <clr-timepicker\n            class=\"timepicker\"\n            (valueChange)=\"this.onTimeFromChange($event)\"\n            [value]=\"this.timeFrom\"\n            [activateSeconds]=\"_activateSeconds\"\n          >\n          </clr-timepicker>\n          }\n        </div>\n        <div class=\"datetime-container datetime-container-to\">\n          <clr-datepicker\n            (valueChange)=\"this.onDateToChange($event)\"\n            [label]=\"this.labelTo\"\n            [maxDate]=\"this.maxDate\"\n            [minDate]=\"this.minDate\"\n            [value]=\"this.dateTo\"\n            class=\"clr-datepicker\"\n          >\n          </clr-datepicker>\n          @if (_timeSelection) {\n          <clr-timepicker\n            class=\"timepicker\"\n            (valueChange)=\"this.onTimeToChange($event)\"\n            [value]=\"this.timeTo\"\n            [activateSeconds]=\"_activateSeconds\"\n          >\n          </clr-timepicker>\n          }\n        </div>\n      </form>\n      @if (this.presets?.length > 0) {\n      <div class=\"clr-daterangepicker-container-popup-content-presets\">\n        @for (preset of this.presets; track preset) {\n        <button (click)=\"this.applyPreset(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n          {{ preset.text }}\n        </button>\n        }\n      </div>\n      } @if (this.presetsDateTime?.length > 0) {\n      <div class=\"clr-daterangepicker-container-popup-content-presets\">\n        @for (preset of this.presetsDateTime; track preset) {\n        <button (click)=\"this.applyPresetTime(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n          {{ preset.text }}\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:1rem;display:flex;flex-direction:row}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-form ::ng-deep clr-datepicker:first-of-type ::ng-deep clr-date-container{margin-top:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets{margin-left:.6rem;padding:.3rem}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets .btn{margin-right:0}.datetime-container{display:flex;flex-direction:row;align-items:flex-start}.datetime-container-to{padding-top:1rem}.timepicker{padding-left:1rem}.timepicker clr-input-container{margin-top:.8rem}.custom-input-group{padding-right:0!important}.custom-input-group .clr-input-group-icon-action{margin-left:.5rem}.custom-input-group input{min-width:10rem!important;width:10rem!important}.custom-input-group-time{min-width:17rem!important}.custom-input-group-date{min-width:12rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i1$2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1$1.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "component", type: ClrDatepickerComponent, selector: "clr-datepicker", inputs: ["value", "label", "minDate", "maxDate", "timeSelection"], outputs: ["valueChange"] }, { kind: "component", type: ClrTimepickerComponent, selector: "clr-timepicker", inputs: ["value", "activateSeconds"], outputs: ["valueChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangepickerContainerComponent, deps: [{ token: i1$2.ClrPopoverService }, { token: i1$2.ClrCommonStringsService }, { token: i1$2.ClrLayout, optional: true }, { token: DaterangeControlStateService }, { token: DaterangeService }, { token: DaterangeParsingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrDaterangepickerContainerComponent, isStandalone: false, selector: "clr-daterangepicker-container", inputs: { presets: "presets", presetsDateTime: "presetsDateTime", timeSelection: "timeSelection", activateSeconds: "activateSeconds", popoverPosition: ["clrPosition", "popoverPosition"], labelFrom: "labelFrom", labelTo: "labelTo" }, host: { properties: { "class": "this.classes" } }, providers: [ClrPopoverService, DaterangeControlStateService, DaterangeService, ControlIdService], queries: [{ propertyName: "daterangepickerDirective", first: true, predicate: ClrDaterangepickerDirective, descendants: true }], viewQueries: [{ propertyName: "datepickerComponents", predicate: ClrDatepickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n@if (!this.labelComponent && this.addLayoutGrid) {\n<label></label>\n}\n<div\n  [class.clr-col-12]=\"this.addLayoutGrid\"\n  [class.clr-col-md-10]=\"this.addLayoutGrid\"\n  [class.clr-error]=\"this.isInvalid\"\n  class=\"clr-control-container\"\n>\n  <div class=\"clr-input-wrapper\">\n    <div\n      [class.clr-focus]=\"this.focus\"\n      class=\"custom-input-group clr-input-group\"\n      [ngClass]=\"_timeSelection ? 'custom-input-group-time' : 'custom-input-group-date'\"\n    >\n      <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n      <button\n        [attr.aria-label]=\"this.friendlyDaterange\"\n        [disabled]=\"this.disabled\"\n        [title]=\"this.friendlyDaterange\"\n        class=\"clr-input-group-icon-action\"\n        clrPopoverOpenCloseButton\n        clrPopoverOrigin\n        type=\"button\"\n      >\n        <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n      </button>\n    </div>\n    @if (this.isInvalid) {\n    <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" status=\"danger\"></cds-icon>\n    } @if (!this.isInvalid) {\n    <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"check-circle\" status=\"success\"></cds-icon>\n    }\n  </div>\n  @if (this.showHelper) {\n  <ng-content select=\"clr-control-helper\"></ng-content>\n  } @if (this.showInvalid) {\n  <ng-content select=\"clr-control-error\"></ng-content>\n  } @if (this.showValid) {\n  <ng-content select=\"clr-control-success\"></ng-content>\n  }\n\n  <div\n    *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    class=\"clr-daterangepicker-container-popup datepicker\"\n  >\n    <button\n      class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n      type=\"button\"\n      (click)=\"daterangeService.updateSelectedDaterange(null)\"\n    >\n      <cds-icon shape=\"trash\"></cds-icon>\n    </button>\n    <button\n      [attr.aria-label]=\"this.commonStrings.close\"\n      class=\"btn btn-sm btn-link close\"\n      clrPopoverCloseButton\n      type=\"button\"\n    >\n      <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n      <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n    </button>\n    <div class=\"clr-daterangepicker-container-popup-content\">\n      <form [clrLayout]=\"'vertical'\" clrForm>\n        <div class=\"datetime-container\">\n          <clr-datepicker\n            (valueChange)=\"this.onDateFromChange($event)\"\n            [label]=\"this.labelFrom\"\n            [maxDate]=\"this.maxDate\"\n            [minDate]=\"this.minDate\"\n            [value]=\"this.dateFrom\"\n            class=\"clr-datepicker\"\n          >\n          </clr-datepicker>\n          @if (_timeSelection) {\n          <clr-timepicker\n            class=\"timepicker\"\n            (valueChange)=\"this.onTimeFromChange($event)\"\n            [value]=\"this.timeFrom\"\n            [activateSeconds]=\"_activateSeconds\"\n          >\n          </clr-timepicker>\n          }\n        </div>\n        <div class=\"datetime-container datetime-container-to\">\n          <clr-datepicker\n            (valueChange)=\"this.onDateToChange($event)\"\n            [label]=\"this.labelTo\"\n            [maxDate]=\"this.maxDate\"\n            [minDate]=\"this.minDate\"\n            [value]=\"this.dateTo\"\n            class=\"clr-datepicker\"\n          >\n          </clr-datepicker>\n          @if (_timeSelection) {\n          <clr-timepicker\n            class=\"timepicker\"\n            (valueChange)=\"this.onTimeToChange($event)\"\n            [value]=\"this.timeTo\"\n            [activateSeconds]=\"_activateSeconds\"\n          >\n          </clr-timepicker>\n          }\n        </div>\n      </form>\n      @if (this.presets?.length > 0) {\n      <div class=\"clr-daterangepicker-container-popup-content-presets\">\n        @for (preset of this.presets; track preset) {\n        <button (click)=\"this.applyPreset(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n          {{ preset.text }}\n        </button>\n        }\n      </div>\n      } @if (this.presetsDateTime?.length > 0) {\n      <div class=\"clr-daterangepicker-container-popup-content-presets\">\n        @for (preset of this.presetsDateTime; track preset) {\n        <button (click)=\"this.applyPresetTime(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n          {{ preset.text }}\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:1rem;display:flex;flex-direction:row}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-form ::ng-deep clr-datepicker:first-of-type ::ng-deep clr-date-container{margin-top:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets{margin-left:.6rem;padding:.3rem}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets .btn{margin-right:0}.datetime-container{display:flex;flex-direction:row;align-items:flex-start}.datetime-container-to{padding-top:1rem}.timepicker{padding-left:1rem}.timepicker clr-input-container{margin-top:.8rem}.custom-input-group{padding-right:0!important}.custom-input-group .clr-input-group-icon-action{margin-left:.5rem}.custom-input-group input{min-width:10rem!important;width:10rem!important}.custom-input-group-time{min-width:17rem!important}.custom-input-group-date{min-width:12rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i1$2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1$1.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "component", type: ClrDatepickerComponent, selector: "clr-datepicker", inputs: ["value", "label", "minDate", "maxDate", "timeSelection"], outputs: ["valueChange"] }, { kind: "component", type: ClrTimepickerComponent, selector: "clr-timepicker", inputs: ["value", "activateSeconds"], outputs: ["valueChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangepickerContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-daterangepicker-container', providers: [ClrPopoverService, DaterangeControlStateService, DaterangeService, ControlIdService], standalone: false, template: "<ng-content select=\"label\"></ng-content>\n@if (!this.labelComponent && this.addLayoutGrid) {\n<label></label>\n}\n<div\n  [class.clr-col-12]=\"this.addLayoutGrid\"\n  [class.clr-col-md-10]=\"this.addLayoutGrid\"\n  [class.clr-error]=\"this.isInvalid\"\n  class=\"clr-control-container\"\n>\n  <div class=\"clr-input-wrapper\">\n    <div\n      [class.clr-focus]=\"this.focus\"\n      class=\"custom-input-group clr-input-group\"\n      [ngClass]=\"_timeSelection ? 'custom-input-group-time' : 'custom-input-group-date'\"\n    >\n      <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n      <button\n        [attr.aria-label]=\"this.friendlyDaterange\"\n        [disabled]=\"this.disabled\"\n        [title]=\"this.friendlyDaterange\"\n        class=\"clr-input-group-icon-action\"\n        clrPopoverOpenCloseButton\n        clrPopoverOrigin\n        type=\"button\"\n      >\n        <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n      </button>\n    </div>\n    @if (this.isInvalid) {\n    <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" status=\"danger\"></cds-icon>\n    } @if (!this.isInvalid) {\n    <cds-icon aria-hidden=\"true\" class=\"clr-validate-icon\" shape=\"check-circle\" status=\"success\"></cds-icon>\n    }\n  </div>\n  @if (this.showHelper) {\n  <ng-content select=\"clr-control-helper\"></ng-content>\n  } @if (this.showInvalid) {\n  <ng-content select=\"clr-control-error\"></ng-content>\n  } @if (this.showValid) {\n  <ng-content select=\"clr-control-success\"></ng-content>\n  }\n\n  <div\n    *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    class=\"clr-daterangepicker-container-popup datepicker\"\n  >\n    <button\n      class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n      type=\"button\"\n      (click)=\"daterangeService.updateSelectedDaterange(null)\"\n    >\n      <cds-icon shape=\"trash\"></cds-icon>\n    </button>\n    <button\n      [attr.aria-label]=\"this.commonStrings.close\"\n      class=\"btn btn-sm btn-link close\"\n      clrPopoverCloseButton\n      type=\"button\"\n    >\n      <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n      <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n    </button>\n    <div class=\"clr-daterangepicker-container-popup-content\">\n      <form [clrLayout]=\"'vertical'\" clrForm>\n        <div class=\"datetime-container\">\n          <clr-datepicker\n            (valueChange)=\"this.onDateFromChange($event)\"\n            [label]=\"this.labelFrom\"\n            [maxDate]=\"this.maxDate\"\n            [minDate]=\"this.minDate\"\n            [value]=\"this.dateFrom\"\n            class=\"clr-datepicker\"\n          >\n          </clr-datepicker>\n          @if (_timeSelection) {\n          <clr-timepicker\n            class=\"timepicker\"\n            (valueChange)=\"this.onTimeFromChange($event)\"\n            [value]=\"this.timeFrom\"\n            [activateSeconds]=\"_activateSeconds\"\n          >\n          </clr-timepicker>\n          }\n        </div>\n        <div class=\"datetime-container datetime-container-to\">\n          <clr-datepicker\n            (valueChange)=\"this.onDateToChange($event)\"\n            [label]=\"this.labelTo\"\n            [maxDate]=\"this.maxDate\"\n            [minDate]=\"this.minDate\"\n            [value]=\"this.dateTo\"\n            class=\"clr-datepicker\"\n          >\n          </clr-datepicker>\n          @if (_timeSelection) {\n          <clr-timepicker\n            class=\"timepicker\"\n            (valueChange)=\"this.onTimeToChange($event)\"\n            [value]=\"this.timeTo\"\n            [activateSeconds]=\"_activateSeconds\"\n          >\n          </clr-timepicker>\n          }\n        </div>\n      </form>\n      @if (this.presets?.length > 0) {\n      <div class=\"clr-daterangepicker-container-popup-content-presets\">\n        @for (preset of this.presets; track preset) {\n        <button (click)=\"this.applyPreset(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n          {{ preset.text }}\n        </button>\n        }\n      </div>\n      } @if (this.presetsDateTime?.length > 0) {\n      <div class=\"clr-daterangepicker-container-popup-content-presets\">\n        @for (preset of this.presetsDateTime; track preset) {\n        <button (click)=\"this.applyPresetTime(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n          {{ preset.text }}\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:1rem;display:flex;flex-direction:row}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-form ::ng-deep clr-datepicker:first-of-type ::ng-deep clr-date-container{margin-top:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets{margin-left:.6rem;padding:.3rem}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets .btn{margin-right:0}.datetime-container{display:flex;flex-direction:row;align-items:flex-start}.datetime-container-to{padding-top:1rem}.timepicker{padding-left:1rem}.timepicker clr-input-container{margin-top:.8rem}.custom-input-group{padding-right:0!important}.custom-input-group .clr-input-group-icon-action{margin-left:.5rem}.custom-input-group input{min-width:10rem!important;width:10rem!important}.custom-input-group-time{min-width:17rem!important}.custom-input-group-date{min-width:12rem!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ClrPopoverService }, { type: i1$2.ClrCommonStringsService }, { type: i1$2.ClrLayout, decorators: [{
@@ -14997,10 +15001,10 @@ class ClrIfDaterangeErrorDirective {
             this.displayedContent = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfDaterangeErrorDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DaterangeControlStateService, optional: true }, { token: ClrDaterangepickerContainerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrIfDaterangeErrorDirective, isStandalone: false, selector: "[clrIfDaterangeError]", inputs: { clrIfDaterangeError: "clrIfDaterangeError" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIfDaterangeErrorDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DaterangeControlStateService, optional: true }, { token: ClrDaterangepickerContainerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrIfDaterangeErrorDirective, isStandalone: false, selector: "[clrIfDaterangeError]", inputs: { clrIfDaterangeError: "clrIfDaterangeError" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfDaterangeErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIfDaterangeErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrIfDaterangeError]',
@@ -15066,8 +15070,8 @@ class ClrDaterangeMaxValidator {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeMaxValidator, deps: [{ token: DaterangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrDaterangeMaxValidator, isStandalone: false, selector: "[clrDaterangepicker][max], [clrDaterangeMax]", inputs: { active: ["clrDaterangeMax", "active"] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangeMaxValidator, deps: [{ token: DaterangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDaterangeMaxValidator, isStandalone: false, selector: "[clrDaterangepicker][max], [clrDaterangeMax]", inputs: { active: ["clrDaterangeMax", "active"] }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ClrDaterangeMaxValidator),
@@ -15075,7 +15079,7 @@ class ClrDaterangeMaxValidator {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeMaxValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangeMaxValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker][max], [clrDaterangeMax]',
@@ -15147,8 +15151,8 @@ class ClrDaterangeMinValidator {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeMinValidator, deps: [{ token: DaterangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrDaterangeMinValidator, isStandalone: false, selector: "[clrDaterangepicker][min], [clrDaterangeMin]", inputs: { active: ["clrDaterangeMin", "active"] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangeMinValidator, deps: [{ token: DaterangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDaterangeMinValidator, isStandalone: false, selector: "[clrDaterangepicker][min], [clrDaterangeMin]", inputs: { active: ["clrDaterangeMin", "active"] }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ClrDaterangeMinValidator),
@@ -15156,7 +15160,7 @@ class ClrDaterangeMinValidator {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeMinValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangeMinValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker][min], [clrDaterangeMin]',
@@ -15229,8 +15233,8 @@ class ClrDaterangeOrderValidator {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeOrderValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrDaterangeOrderValidator, isStandalone: false, selector: "[clrDaterangepicker], [clrDaterangeOrder]", inputs: { active: ["clrDaterangeOrder", "active"] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangeOrderValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDaterangeOrderValidator, isStandalone: false, selector: "[clrDaterangepicker], [clrDaterangeOrder]", inputs: { active: ["clrDaterangeOrder", "active"] }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ClrDaterangeOrderValidator),
@@ -15238,7 +15242,7 @@ class ClrDaterangeOrderValidator {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeOrderValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangeOrderValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker], [clrDaterangeOrder]',
@@ -15298,8 +15302,8 @@ class ClrDaterangeRequiredValidator {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeRequiredValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrDaterangeRequiredValidator, isStandalone: false, selector: "[clrDaterangepicker][required], [clrDaterangeRequired]", inputs: { active: ["clrDaterangeRequired", "active"] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangeRequiredValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDaterangeRequiredValidator, isStandalone: false, selector: "[clrDaterangepicker][required], [clrDaterangeRequired]", inputs: { active: ["clrDaterangeRequired", "active"] }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ClrDaterangeRequiredValidator),
@@ -15307,7 +15311,7 @@ class ClrDaterangeRequiredValidator {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeRequiredValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangeRequiredValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker][required], [clrDaterangeRequired]',
@@ -15326,8 +15330,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class ClrDaterangepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerModule, declarations: [ClrDatepickerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangepickerModule, declarations: [ClrDatepickerComponent,
             ClrDaterangeMaxValidator,
             ClrDaterangeMinValidator,
             ClrDaterangeOrderValidator,
@@ -15342,9 +15346,9 @@ class ClrDaterangepickerModule {
             ClrDaterangepickerDirective,
             ClrDaterangeRequiredValidator,
             ClrIfDaterangeErrorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerModule, imports: [CommonModule, FormsModule, ClarityModule, ClrDatepickerModule, ClrIcon] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangepickerModule, imports: [CommonModule, FormsModule, ClarityModule, ClrDatepickerModule, ClrIcon] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDaterangepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ClarityModule, ClrDatepickerModule, ClrIcon],
@@ -15432,10 +15436,10 @@ class ClrIfWarning {
             this.renderer.addClass(this.formContainer, 'clr-warning');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfWarning, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrIfWarning, isStandalone: false, selector: "[clrIfWarning]", inputs: { clrIfWarning: "clrIfWarning" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIfWarning, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrIfWarning, isStandalone: false, selector: "[clrIfWarning]", inputs: { clrIfWarning: "clrIfWarning" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfWarning, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIfWarning, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrIfWarning]',
@@ -15447,11 +15451,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 ClarityIcons.addIcons(exclamationTriangleIcon);
 class ClrIfWarningModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfWarningModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrIfWarningModule, declarations: [ClrIfWarning], imports: [CommonModule], exports: [ClrIfWarning] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfWarningModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIfWarningModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrIfWarningModule, declarations: [ClrIfWarning], imports: [CommonModule], exports: [ClrIfWarning] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIfWarningModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfWarningModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrIfWarningModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrIfWarning],
@@ -15501,8 +15505,8 @@ class ClrActionPanel {
         // this event is used by the tree table to adjust the colomns width
         window.dispatchEvent(new Event('resize'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrActionPanel, isStandalone: false, selector: "clr-action-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.action-panel": "true" } }, ngImport: i0, template: "@if (_open) {\n<div [@slideIn] class=\"action-panel-action-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n  <ng-content select=\"[clr-action-panel-content]\"></ng-content>\n</div>\n<div [@fade] class=\"action-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n}\n", animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrActionPanel, isStandalone: false, selector: "clr-action-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.action-panel": "true" } }, ngImport: i0, template: "@if (_open) {\n<div [@slideIn] class=\"action-panel-action-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n  <ng-content select=\"[clr-action-panel-content]\"></ng-content>\n</div>\n<div [@fade] class=\"action-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n}\n", animations: [
             trigger('slideIn', [
                 transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
                 transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
@@ -15513,7 +15517,7 @@ class ClrActionPanel {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanel, decorators: [{
             type: Component,
             args: [{ selector: 'clr-action-panel', animations: [
                         trigger('slideIn', [
@@ -15541,8 +15545,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrActionPanelContainer {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrActionPanelContainer, isStandalone: false, selector: "clr-action-panel-container", host: { properties: { "class.content-container": "true", "class.action-panel-container": "true" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrActionPanelContainer, isStandalone: false, selector: "clr-action-panel-container", host: { properties: { "class.content-container": "true", "class.action-panel-container": "true" } }, ngImport: i0, template: `
     <div class="action-panel-outer-wrapper">
       <ng-content select="clr-action-panel-container-content"></ng-content>
       <ng-content select="clr-action-panel-container-footer"></ng-content>
@@ -15550,7 +15554,7 @@ class ClrActionPanelContainer {
     <ng-content select="clr-action-panel"></ng-content>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-action-panel-container',
@@ -15575,10 +15579,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrActionPanelContainerContent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrActionPanelContainerContent, isStandalone: false, selector: "clr-action-panel-container-content", host: { properties: { "class.content-area": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrActionPanelContainerContent, isStandalone: false, selector: "clr-action-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: "21.2.17", ngImport: i0, type: ClrActionPanelContainerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelContainerContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-action-panel-container-content',
@@ -15596,10 +15600,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrActionPanelContainerFooter {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ClrActionPanelContainerFooter, isStandalone: false, selector: "clr-action-panel-container-footer", host: { properties: { "class.content-area-footer": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrActionPanelContainerFooter, isStandalone: false, selector: "clr-action-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: "21.2.17", ngImport: i0, type: ClrActionPanelContainerFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelContainerFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-action-panel-container-footer',
@@ -15617,14 +15621,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrActionPanelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelModule, declarations: [ClrActionPanel,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelModule, declarations: [ClrActionPanel,
             ClrActionPanelContainer,
             ClrActionPanelContainerContent,
             ClrActionPanelContainerFooter], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrActionPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -15770,10 +15774,10 @@ class ClrReadonlyDirective {
         }
         return formattedValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrReadonlyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrReadonlyDirective, isStandalone: false, selector: "[clrReadonly]", inputs: { unitPosition: ["clrUnitPosition", "unitPosition"], property: ["clrReadOnlyProperty", "property"], clrReadOnly: ["clrReadonly", "clrReadOnly"], unit: ["clrUnit", "unit"], decimalPlaces: ["clrDecimalPlaces", "decimalPlaces"], roundValue: ["clrRoundDisplayValue", "roundValue"], autofillDecimals: ["clrAutofillDecimals", "autofillDecimals"], decimalSeparator: ["clrDecimalSep", "decimalSeparator"], groupingSeparator: ["clrGroupingSep", "groupingSeparator"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrReadonlyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrReadonlyDirective, isStandalone: false, selector: "[clrReadonly]", inputs: { unitPosition: ["clrUnitPosition", "unitPosition"], property: ["clrReadOnlyProperty", "property"], clrReadOnly: ["clrReadonly", "clrReadOnly"], unit: ["clrUnit", "unit"], decimalPlaces: ["clrDecimalPlaces", "decimalPlaces"], roundValue: ["clrRoundDisplayValue", "roundValue"], autofillDecimals: ["clrAutofillDecimals", "autofillDecimals"], decimalSeparator: ["clrDecimalSep", "decimalSeparator"], groupingSeparator: ["clrGroupingSep", "groupingSeparator"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrReadonlyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrReadonlyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrReadonly]',
@@ -15809,11 +15813,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class ClrReadonlyDirectiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrReadonlyDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrReadonlyDirectiveModule, declarations: [ClrReadonlyDirective], exports: [ClrReadonlyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrReadonlyDirectiveModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrReadonlyDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrReadonlyDirectiveModule, declarations: [ClrReadonlyDirective], exports: [ClrReadonlyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrReadonlyDirectiveModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrReadonlyDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrReadonlyDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrReadonlyDirective],
@@ -15846,10 +15850,10 @@ class ClrFocusFirstInvalidFieldDirective {
             parentElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFocusFirstInvalidFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrFocusFirstInvalidFieldDirective, isStandalone: true, selector: "form[clrFocusFirstInvalidField]", host: { listeners: { "ngSubmit": "onFormSubmit()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFocusFirstInvalidFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrFocusFirstInvalidFieldDirective, isStandalone: true, selector: "form[clrFocusFirstInvalidField]", host: { listeners: { "ngSubmit": "onFormSubmit()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFocusFirstInvalidFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrFocusFirstInvalidFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[clrFocusFirstInvalidField]',
@@ -15895,10 +15899,10 @@ class ClrControlEnterSubmitDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrControlEnterSubmitDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$2.ClrForm, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrControlEnterSubmitDirective, isStandalone: true, selector: "form[clrControlEnterSubmit]", inputs: { tooltipText: ["clrControlEnterSubmit", "tooltipText"] }, host: { listeners: { "window:keydown.control.enter": "submitCtrlEnter($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrControlEnterSubmitDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$2.ClrForm, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrControlEnterSubmitDirective, isStandalone: true, selector: "form[clrControlEnterSubmit]", inputs: { tooltipText: ["clrControlEnterSubmit", "tooltipText"] }, host: { listeners: { "window:keydown.control.enter": "submitCtrlEnter($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrControlEnterSubmitDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrControlEnterSubmitDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[clrControlEnterSubmit]',
@@ -16040,10 +16044,10 @@ class ClrKeyboardNavCtrlArrowDirective {
         // on the next navigation event, which is intuitive fallback behaviour.
         return -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrKeyboardNavCtrlArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrKeyboardNavCtrlArrowDirective, isStandalone: true, selector: "[clrKeyboardNavCtrlArrow]", inputs: { clrNavItemSelector: "clrNavItemSelector", clrNavOrientation: "clrNavOrientation", clrNavDisabled: "clrNavDisabled" }, host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrKeyboardNavCtrlArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrKeyboardNavCtrlArrowDirective, isStandalone: true, selector: "[clrKeyboardNavCtrlArrow]", inputs: { clrNavItemSelector: "clrNavItemSelector", clrNavOrientation: "clrNavOrientation", clrNavDisabled: "clrNavDisabled" }, host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrKeyboardNavCtrlArrowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrKeyboardNavCtrlArrowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrKeyboardNavCtrlArrow]',
@@ -16205,10 +16209,10 @@ class ClrKeyboardNavAltMnemonicDirective {
         this.digitBuffer = '';
         this.renderer.removeClass(this.el.nativeElement, MNEMONICS_VISIBLE_CLASS);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrKeyboardNavAltMnemonicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClrKeyboardNavAltMnemonicDirective, isStandalone: true, selector: "[clrKeyboardNavAltMnemonic]", inputs: { clrNavItemSelector: "clrNavItemSelector", clrNavDisabled: "clrNavDisabled" }, host: { listeners: { "window:keydown": "onWindowKeyDown($event)", "window:keyup": "onWindowKeyUp($event)", "window:blur": "onWindowBlur()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrKeyboardNavAltMnemonicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrKeyboardNavAltMnemonicDirective, isStandalone: true, selector: "[clrKeyboardNavAltMnemonic]", inputs: { clrNavItemSelector: "clrNavItemSelector", clrNavDisabled: "clrNavDisabled" }, host: { listeners: { "window:keydown": "onWindowKeyDown($event)", "window:keyup": "onWindowKeyUp($event)", "window:blur": "onWindowBlur()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrKeyboardNavAltMnemonicDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrKeyboardNavAltMnemonicDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrKeyboardNavAltMnemonic]',
@@ -16331,10 +16335,10 @@ class ClrImageCarousel {
             this.closeCarousel.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrImageCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrImageCarousel, isStandalone: false, selector: "clr-image-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, thumbnailSize: { classPropertyName: "thumbnailSize", publicName: "thumbnailSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeCarousel: "closeCarousel" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "thumbStripRef", first: true, predicate: ["thumbStrip"], descendants: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 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=\"clr-image-carousel\">\n  <!-- Header -->\n  @if (!hideHeader()) {\n  <div class=\"clr-image-carousel__header\">\n    <span class=\"clr-image-carousel__title\">{{ productName() }}</span>\n    <button class=\"clr-image-carousel__close\" (click)=\"closeCarousel.emit()\" aria-label=\"Close\">\n      <cds-icon shape=\"times\"></cds-icon>\n    </button>\n  </div>\n  }\n\n  <!-- Spotlight + thumbnails, constrained to image width -->\n  <div class=\"clr-image-carousel__content\" [style.width.px]=\"imageSize() > 0 ? imageSize() : null\">\n    <!-- Spotlight -->\n    <div class=\"clr-image-carousel__spotlight\">\n      <div\n        class=\"clr-image-carousel__img-wrap\"\n        [style.width.px]=\"imageSize() > 0 ? imageSize() : null\"\n        [style.height.px]=\"imageSize() > 0 ? imageSize() : null\"\n      >\n        <button\n          class=\"clr-image-carousel__arrow clr-image-carousel__arrow--prev\"\n          (click)=\"prev()\"\n          aria-label=\"Previous\"\n        >\n          <cds-icon shape=\"circle-arrow\" direction=\"left\" solid></cds-icon>\n        </button>\n\n        @if (images().length > 0) {\n        <img\n          [src]=\"images()[activeIndex()].src\"\n          [alt]=\"images()[activeIndex()].alt || ''\"\n          class=\"clr-image-carousel__img\"\n        />\n        }\n\n        <button class=\"clr-image-carousel__arrow clr-image-carousel__arrow--next\" (click)=\"next()\" aria-label=\"Next\">\n          <cds-icon shape=\"circle-arrow\" direction=\"right\" solid></cds-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Thumbnail strip -->\n    <div\n      class=\"clr-image-carousel__thumbs-wrap\"\n      [class.clr-image-carousel__thumbs-wrap--fade-left]=\"showFadeLeft()\"\n      [class.clr-image-carousel__thumbs-wrap--fade-right]=\"showFadeRight()\"\n    >\n      <div\n        class=\"clr-image-carousel__thumbs\"\n        [class.clr-image-carousel__thumbs--centered]=\"!needsScroll()\"\n        (scroll)=\"onThumbStripScroll()\"\n        #thumbStrip\n      >\n        @for (img of images(); track img; let i = $index) {\n        <div\n          class=\"clr-image-carousel__thumb\"\n          [style.width.px]=\"thumbnailSize()\"\n          [style.height.px]=\"thumbnailSize()\"\n          [class.clr-image-carousel__thumb--active]=\"i === activeIndex()\"\n          (click)=\"setActive(i)\"\n        >\n          <img [src]=\"img.src\" [alt]=\"img.alt || ''\" class=\"clr-image-carousel__thumb-img\" />\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".clr-image-carousel{display:flex;flex-direction:column;align-items:center;padding:0 24px;box-sizing:border-box;width:100%;background:var(--clr-modal-bg-color, #fff);overflow:hidden}.clr-image-carousel__header{display:flex;align-items:center;justify-content:space-between;height:68px;flex-shrink:0;box-sizing:border-box;align-self:stretch}.clr-image-carousel__title{font-size:14px;font-weight:400;line-height:24px}.clr-image-carousel__close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:inherit}.clr-image-carousel__close cds-icon{--color: currentColor;width:18px;height:18px}.clr-image-carousel__close:hover{opacity:.7}.clr-image-carousel__content{display:flex;flex-direction:column;flex-shrink:0;width:100%}.clr-image-carousel__spotlight{flex-shrink:0;display:flex;align-items:center;justify-content:center}.clr-image-carousel__img-wrap{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px}.clr-image-carousel__img{display:block;width:100%;height:100%;object-fit:cover}.clr-image-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:none;border:none;padding:0;outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.25;transition:opacity .15s}.clr-image-carousel__arrow:focus{outline:none}.clr-image-carousel__arrow:hover{opacity:1}.clr-image-carousel__arrow--prev{left:12px}.clr-image-carousel__arrow--next{right:12px}.clr-image-carousel__arrow cds-icon{--color: white;width:56px;height:56px}.clr-image-carousel__thumbs-wrap{position:relative;flex-shrink:0;width:100%;overflow:hidden}.clr-image-carousel__thumbs-wrap:before,.clr-image-carousel__thumbs-wrap:after{content:\"\";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none;opacity:0;transition:opacity .15s}.clr-image-carousel__thumbs-wrap:before{left:0;background:linear-gradient(to right,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap:after{right:0;background:linear-gradient(to left,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap--fade-left:before{opacity:1}.clr-image-carousel__thumbs-wrap--fade-right:after{opacity:1}.clr-image-carousel__thumbs{display:flex;gap:8px;padding:8px 0 24px;overflow-x:auto;flex-shrink:0;width:100%;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none}.clr-image-carousel__thumbs::-webkit-scrollbar{display:none}.clr-image-carousel__thumbs--centered{justify-content:center;overflow-x:hidden}.clr-image-carousel__thumbs-spacer{flex-shrink:0}.clr-image-carousel__thumb{flex-shrink:0;overflow:hidden;cursor:pointer;border-radius:3px;outline:4px solid transparent;outline-offset:-4px;transition:outline-color .15s}.clr-image-carousel__thumb--active{outline-color:#14a1a9}.clr-image-carousel__thumb:hover:not(.clr-image-carousel__thumb--active){outline-color:var(--cds-global-color-gray-400, #aaa)}.clr-image-carousel__thumb-img{width:100%;height:100%;object-fit:cover;display:block}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrImageCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrImageCarousel, isStandalone: false, selector: "clr-image-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, thumbnailSize: { classPropertyName: "thumbnailSize", publicName: "thumbnailSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeCarousel: "closeCarousel" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "thumbStripRef", first: true, predicate: ["thumbStrip"], descendants: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 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=\"clr-image-carousel\">\n  <!-- Header -->\n  @if (!hideHeader()) {\n  <div class=\"clr-image-carousel__header\">\n    <span class=\"clr-image-carousel__title\">{{ productName() }}</span>\n    <button class=\"clr-image-carousel__close\" (click)=\"closeCarousel.emit()\" aria-label=\"Close\">\n      <cds-icon shape=\"times\"></cds-icon>\n    </button>\n  </div>\n  }\n\n  <!-- Spotlight + thumbnails, constrained to image width -->\n  <div class=\"clr-image-carousel__content\" [style.width.px]=\"imageSize() > 0 ? imageSize() : null\">\n    <!-- Spotlight -->\n    <div class=\"clr-image-carousel__spotlight\">\n      <div\n        class=\"clr-image-carousel__img-wrap\"\n        [style.width.px]=\"imageSize() > 0 ? imageSize() : null\"\n        [style.height.px]=\"imageSize() > 0 ? imageSize() : null\"\n      >\n        <button\n          class=\"clr-image-carousel__arrow clr-image-carousel__arrow--prev\"\n          (click)=\"prev()\"\n          aria-label=\"Previous\"\n        >\n          <cds-icon shape=\"circle-arrow\" direction=\"left\" solid></cds-icon>\n        </button>\n\n        @if (images().length > 0) {\n        <img\n          [src]=\"images()[activeIndex()].src\"\n          [alt]=\"images()[activeIndex()].alt || ''\"\n          class=\"clr-image-carousel__img\"\n        />\n        }\n\n        <button class=\"clr-image-carousel__arrow clr-image-carousel__arrow--next\" (click)=\"next()\" aria-label=\"Next\">\n          <cds-icon shape=\"circle-arrow\" direction=\"right\" solid></cds-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Thumbnail strip -->\n    <div\n      class=\"clr-image-carousel__thumbs-wrap\"\n      [class.clr-image-carousel__thumbs-wrap--fade-left]=\"showFadeLeft()\"\n      [class.clr-image-carousel__thumbs-wrap--fade-right]=\"showFadeRight()\"\n    >\n      <div\n        class=\"clr-image-carousel__thumbs\"\n        [class.clr-image-carousel__thumbs--centered]=\"!needsScroll()\"\n        (scroll)=\"onThumbStripScroll()\"\n        #thumbStrip\n      >\n        @for (img of images(); track img; let i = $index) {\n        <div\n          class=\"clr-image-carousel__thumb\"\n          [style.width.px]=\"thumbnailSize()\"\n          [style.height.px]=\"thumbnailSize()\"\n          [class.clr-image-carousel__thumb--active]=\"i === activeIndex()\"\n          (click)=\"setActive(i)\"\n        >\n          <img [src]=\"img.src\" [alt]=\"img.alt || ''\" class=\"clr-image-carousel__thumb-img\" />\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".clr-image-carousel{display:flex;flex-direction:column;align-items:center;padding:0 24px;box-sizing:border-box;width:100%;background:var(--clr-modal-bg-color, #fff);overflow:hidden}.clr-image-carousel__header{display:flex;align-items:center;justify-content:space-between;height:68px;flex-shrink:0;box-sizing:border-box;align-self:stretch}.clr-image-carousel__title{font-size:14px;font-weight:400;line-height:24px}.clr-image-carousel__close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:inherit}.clr-image-carousel__close cds-icon{--color: currentColor;width:18px;height:18px}.clr-image-carousel__close:hover{opacity:.7}.clr-image-carousel__content{display:flex;flex-direction:column;flex-shrink:0;width:100%}.clr-image-carousel__spotlight{flex-shrink:0;display:flex;align-items:center;justify-content:center}.clr-image-carousel__img-wrap{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px}.clr-image-carousel__img{display:block;width:100%;height:100%;object-fit:cover}.clr-image-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:none;border:none;padding:0;outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.25;transition:opacity .15s}.clr-image-carousel__arrow:focus{outline:none}.clr-image-carousel__arrow:hover{opacity:1}.clr-image-carousel__arrow--prev{left:12px}.clr-image-carousel__arrow--next{right:12px}.clr-image-carousel__arrow cds-icon{--color: white;width:56px;height:56px}.clr-image-carousel__thumbs-wrap{position:relative;flex-shrink:0;width:100%;overflow:hidden}.clr-image-carousel__thumbs-wrap:before,.clr-image-carousel__thumbs-wrap:after{content:\"\";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none;opacity:0;transition:opacity .15s}.clr-image-carousel__thumbs-wrap:before{left:0;background:linear-gradient(to right,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap:after{right:0;background:linear-gradient(to left,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap--fade-left:before{opacity:1}.clr-image-carousel__thumbs-wrap--fade-right:after{opacity:1}.clr-image-carousel__thumbs{display:flex;gap:8px;padding:8px 0 24px;overflow-x:auto;flex-shrink:0;width:100%;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none}.clr-image-carousel__thumbs::-webkit-scrollbar{display:none}.clr-image-carousel__thumbs--centered{justify-content:center;overflow-x:hidden}.clr-image-carousel__thumbs-spacer{flex-shrink:0}.clr-image-carousel__thumb{flex-shrink:0;overflow:hidden;cursor:pointer;border-radius:3px;outline:4px solid transparent;outline-offset:-4px;transition:outline-color .15s}.clr-image-carousel__thumb--active{outline-color:#14a1a9}.clr-image-carousel__thumb:hover:not(.clr-image-carousel__thumb--active){outline-color:var(--cds-global-color-gray-400, #aaa)}.clr-image-carousel__thumb-img{width:100%;height:100%;object-fit:cover;display:block}\n"], dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrImageCarousel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrImageCarousel, decorators: [{
             type: Component,
             args: [{ selector: 'clr-image-carousel', standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 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=\"clr-image-carousel\">\n  <!-- Header -->\n  @if (!hideHeader()) {\n  <div class=\"clr-image-carousel__header\">\n    <span class=\"clr-image-carousel__title\">{{ productName() }}</span>\n    <button class=\"clr-image-carousel__close\" (click)=\"closeCarousel.emit()\" aria-label=\"Close\">\n      <cds-icon shape=\"times\"></cds-icon>\n    </button>\n  </div>\n  }\n\n  <!-- Spotlight + thumbnails, constrained to image width -->\n  <div class=\"clr-image-carousel__content\" [style.width.px]=\"imageSize() > 0 ? imageSize() : null\">\n    <!-- Spotlight -->\n    <div class=\"clr-image-carousel__spotlight\">\n      <div\n        class=\"clr-image-carousel__img-wrap\"\n        [style.width.px]=\"imageSize() > 0 ? imageSize() : null\"\n        [style.height.px]=\"imageSize() > 0 ? imageSize() : null\"\n      >\n        <button\n          class=\"clr-image-carousel__arrow clr-image-carousel__arrow--prev\"\n          (click)=\"prev()\"\n          aria-label=\"Previous\"\n        >\n          <cds-icon shape=\"circle-arrow\" direction=\"left\" solid></cds-icon>\n        </button>\n\n        @if (images().length > 0) {\n        <img\n          [src]=\"images()[activeIndex()].src\"\n          [alt]=\"images()[activeIndex()].alt || ''\"\n          class=\"clr-image-carousel__img\"\n        />\n        }\n\n        <button class=\"clr-image-carousel__arrow clr-image-carousel__arrow--next\" (click)=\"next()\" aria-label=\"Next\">\n          <cds-icon shape=\"circle-arrow\" direction=\"right\" solid></cds-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Thumbnail strip -->\n    <div\n      class=\"clr-image-carousel__thumbs-wrap\"\n      [class.clr-image-carousel__thumbs-wrap--fade-left]=\"showFadeLeft()\"\n      [class.clr-image-carousel__thumbs-wrap--fade-right]=\"showFadeRight()\"\n    >\n      <div\n        class=\"clr-image-carousel__thumbs\"\n        [class.clr-image-carousel__thumbs--centered]=\"!needsScroll()\"\n        (scroll)=\"onThumbStripScroll()\"\n        #thumbStrip\n      >\n        @for (img of images(); track img; let i = $index) {\n        <div\n          class=\"clr-image-carousel__thumb\"\n          [style.width.px]=\"thumbnailSize()\"\n          [style.height.px]=\"thumbnailSize()\"\n          [class.clr-image-carousel__thumb--active]=\"i === activeIndex()\"\n          (click)=\"setActive(i)\"\n        >\n          <img [src]=\"img.src\" [alt]=\"img.alt || ''\" class=\"clr-image-carousel__thumb-img\" />\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".clr-image-carousel{display:flex;flex-direction:column;align-items:center;padding:0 24px;box-sizing:border-box;width:100%;background:var(--clr-modal-bg-color, #fff);overflow:hidden}.clr-image-carousel__header{display:flex;align-items:center;justify-content:space-between;height:68px;flex-shrink:0;box-sizing:border-box;align-self:stretch}.clr-image-carousel__title{font-size:14px;font-weight:400;line-height:24px}.clr-image-carousel__close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:inherit}.clr-image-carousel__close cds-icon{--color: currentColor;width:18px;height:18px}.clr-image-carousel__close:hover{opacity:.7}.clr-image-carousel__content{display:flex;flex-direction:column;flex-shrink:0;width:100%}.clr-image-carousel__spotlight{flex-shrink:0;display:flex;align-items:center;justify-content:center}.clr-image-carousel__img-wrap{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px}.clr-image-carousel__img{display:block;width:100%;height:100%;object-fit:cover}.clr-image-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:none;border:none;padding:0;outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.25;transition:opacity .15s}.clr-image-carousel__arrow:focus{outline:none}.clr-image-carousel__arrow:hover{opacity:1}.clr-image-carousel__arrow--prev{left:12px}.clr-image-carousel__arrow--next{right:12px}.clr-image-carousel__arrow cds-icon{--color: white;width:56px;height:56px}.clr-image-carousel__thumbs-wrap{position:relative;flex-shrink:0;width:100%;overflow:hidden}.clr-image-carousel__thumbs-wrap:before,.clr-image-carousel__thumbs-wrap:after{content:\"\";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none;opacity:0;transition:opacity .15s}.clr-image-carousel__thumbs-wrap:before{left:0;background:linear-gradient(to right,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap:after{right:0;background:linear-gradient(to left,var(--clr-modal-bg-color, #fff),transparent)}.clr-image-carousel__thumbs-wrap--fade-left:before{opacity:1}.clr-image-carousel__thumbs-wrap--fade-right:after{opacity:1}.clr-image-carousel__thumbs{display:flex;gap:8px;padding:8px 0 24px;overflow-x:auto;flex-shrink:0;width:100%;box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none}.clr-image-carousel__thumbs::-webkit-scrollbar{display:none}.clr-image-carousel__thumbs--centered{justify-content:center;overflow-x:hidden}.clr-image-carousel__thumbs-spacer{flex-shrink:0}.clr-image-carousel__thumb{flex-shrink:0;overflow:hidden;cursor:pointer;border-radius:3px;outline:4px solid transparent;outline-offset:-4px;transition:outline-color .15s}.clr-image-carousel__thumb--active{outline-color:#14a1a9}.clr-image-carousel__thumb:hover:not(.clr-image-carousel__thumb--active){outline-color:var(--cds-global-color-gray-400, #aaa)}.clr-image-carousel__thumb-img{width:100%;height:100%;object-fit:cover;display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { thumbStripRef: [{
@@ -16394,10 +16398,10 @@ class ClrImageGallery {
             this.closeModal();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrImageGallery, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrImageGallery, isStandalone: false, selector: "clr-image-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null }, spotlightSize: { classPropertyName: "spotlightSize", publicName: "spotlightSize", isSignal: true, isRequired: false, transformFunction: null }, useBuiltInModal: { classPropertyName: "useBuiltInModal", publicName: "useBuiltInModal", isSignal: true, isRequired: false, transformFunction: null }, carouselImageSize: { classPropertyName: "carouselImageSize", publicName: "carouselImageSize", isSignal: true, isRequired: false, transformFunction: null }, carouselThumbnailSize: { classPropertyName: "carouselThumbnailSize", publicName: "carouselThumbnailSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { galleryOpen: "galleryOpen" }, ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 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<!-- Static gallery view -->\n<div class=\"clr-image-gallery\" [style.width.px]=\"spotlightSize()\">\n  <!-- Spotlight image -->\n  <div\n    class=\"clr-image-gallery__spotlight\"\n    [style.width.px]=\"spotlightSize()\"\n    [style.height.px]=\"spotlightSize()\"\n    (click)=\"openModal(0)\"\n  >\n    @if (images().length > 0) {\n    <img\n      [ngSrc]=\"images()[0].src\"\n      [width]=\"spotlightSize()\"\n      [height]=\"spotlightSize()\"\n      [alt]=\"images()[0].alt || ''\"\n      class=\"clr-image-gallery__spotlight-img\"\n    />\n    }\n  </div>\n\n  <!-- Thumbnail row -->\n  @if (images().length > 1) {\n  <div class=\"clr-image-gallery__thumbs\">\n    @for (img of staticThumbnails(); track img; let i = $index) {\n    <div\n      class=\"clr-image-gallery__thumb\"\n      [style.width.px]=\"thumbnailSize()\"\n      [style.height.px]=\"thumbnailSize()\"\n      (click)=\"openModal(i + 1)\"\n    >\n      <img\n        [ngSrc]=\"img.src\"\n        [width]=\"thumbnailSize()\"\n        [height]=\"thumbnailSize()\"\n        [alt]=\"img.alt || ''\"\n        class=\"clr-image-gallery__thumb-img\"\n      />\n      <!-- Overlay on last thumbnail when there are more images -->\n      @if (i === maxThumbnails - 1 && remainingCount() > 0) {\n      <div class=\"clr-image-gallery__thumb-overlay\">\n        <span>{{ remainingCount() }}+</span>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n\n<!-- Built-in modal (only when useBuiltInModal is true) -->\n@if (useBuiltInModal() && modalOpen()) {\n<div class=\"clr-image-gallery-backdrop\" (click)=\"onBackdropClick($event)\" role=\"dialog\" aria-modal=\"true\">\n  <div class=\"clr-image-gallery-modal\">\n    <clr-image-carousel\n      [images]=\"images()\"\n      [productName]=\"productName()\"\n      [initialIndex]=\"activeIndex()\"\n      [imageSize]=\"carouselImageSize()\"\n      [thumbnailSize]=\"carouselThumbnailSize()\"\n      (closeCarousel)=\"closeModal()\"\n    ></clr-image-carousel>\n  </div>\n</div>\n}\n", styles: [".clr-image-gallery{display:inline-flex;flex-direction:column;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.clr-image-gallery__spotlight{overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__spotlight-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumbs{display:flex;gap:8px}.clr-image-gallery__thumb{position:relative;overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__thumb-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumb-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600}.clr-image-gallery-backdrop{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000}.clr-image-gallery-modal{background:var(--clr-modal-bg-color, #fff);border-radius:4px;display:flex;flex-direction:column;height:96vh;width:calc(96vh - 116px);max-width:98vw;overflow:hidden;box-shadow:0 4px 32px #00000059}\n"], dependencies: [{ kind: "directive", type: i1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: ClrImageCarousel, selector: "clr-image-carousel", inputs: ["images", "productName", "initialIndex", "hideHeader", "imageSize", "thumbnailSize"], outputs: ["closeCarousel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrImageGallery, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrImageGallery, isStandalone: false, selector: "clr-image-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null }, spotlightSize: { classPropertyName: "spotlightSize", publicName: "spotlightSize", isSignal: true, isRequired: false, transformFunction: null }, useBuiltInModal: { classPropertyName: "useBuiltInModal", publicName: "useBuiltInModal", isSignal: true, isRequired: false, transformFunction: null }, carouselImageSize: { classPropertyName: "carouselImageSize", publicName: "carouselImageSize", isSignal: true, isRequired: false, transformFunction: null }, carouselThumbnailSize: { classPropertyName: "carouselThumbnailSize", publicName: "carouselThumbnailSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { galleryOpen: "galleryOpen" }, ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 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<!-- Static gallery view -->\n<div class=\"clr-image-gallery\" [style.width.px]=\"spotlightSize()\">\n  <!-- Spotlight image -->\n  <div\n    class=\"clr-image-gallery__spotlight\"\n    [style.width.px]=\"spotlightSize()\"\n    [style.height.px]=\"spotlightSize()\"\n    (click)=\"openModal(0)\"\n  >\n    @if (images().length > 0) {\n    <img\n      [ngSrc]=\"images()[0].src\"\n      [width]=\"spotlightSize()\"\n      [height]=\"spotlightSize()\"\n      [alt]=\"images()[0].alt || ''\"\n      class=\"clr-image-gallery__spotlight-img\"\n    />\n    }\n  </div>\n\n  <!-- Thumbnail row -->\n  @if (images().length > 1) {\n  <div class=\"clr-image-gallery__thumbs\">\n    @for (img of staticThumbnails(); track img; let i = $index) {\n    <div\n      class=\"clr-image-gallery__thumb\"\n      [style.width.px]=\"thumbnailSize()\"\n      [style.height.px]=\"thumbnailSize()\"\n      (click)=\"openModal(i + 1)\"\n    >\n      <img\n        [ngSrc]=\"img.src\"\n        [width]=\"thumbnailSize()\"\n        [height]=\"thumbnailSize()\"\n        [alt]=\"img.alt || ''\"\n        class=\"clr-image-gallery__thumb-img\"\n      />\n      <!-- Overlay on last thumbnail when there are more images -->\n      @if (i === maxThumbnails - 1 && remainingCount() > 0) {\n      <div class=\"clr-image-gallery__thumb-overlay\">\n        <span>{{ remainingCount() }}+</span>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n\n<!-- Built-in modal (only when useBuiltInModal is true) -->\n@if (useBuiltInModal() && modalOpen()) {\n<div class=\"clr-image-gallery-backdrop\" (click)=\"onBackdropClick($event)\" role=\"dialog\" aria-modal=\"true\">\n  <div class=\"clr-image-gallery-modal\">\n    <clr-image-carousel\n      [images]=\"images()\"\n      [productName]=\"productName()\"\n      [initialIndex]=\"activeIndex()\"\n      [imageSize]=\"carouselImageSize()\"\n      [thumbnailSize]=\"carouselThumbnailSize()\"\n      (closeCarousel)=\"closeModal()\"\n    ></clr-image-carousel>\n  </div>\n</div>\n}\n", styles: [".clr-image-gallery{display:inline-flex;flex-direction:column;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.clr-image-gallery__spotlight{overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__spotlight-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumbs{display:flex;gap:8px}.clr-image-gallery__thumb{position:relative;overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__thumb-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumb-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600}.clr-image-gallery-backdrop{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000}.clr-image-gallery-modal{background:var(--clr-modal-bg-color, #fff);border-radius:4px;display:flex;flex-direction:column;height:96vh;width:calc(96vh - 116px);max-width:98vw;overflow:hidden;box-shadow:0 4px 32px #00000059}\n"], dependencies: [{ kind: "directive", type: i1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: ClrImageCarousel, selector: "clr-image-carousel", inputs: ["images", "productName", "initialIndex", "hideHeader", "imageSize", "thumbnailSize"], outputs: ["closeCarousel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrImageGallery, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrImageGallery, decorators: [{
             type: Component,
             args: [{ selector: 'clr-image-gallery', standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 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<!-- Static gallery view -->\n<div class=\"clr-image-gallery\" [style.width.px]=\"spotlightSize()\">\n  <!-- Spotlight image -->\n  <div\n    class=\"clr-image-gallery__spotlight\"\n    [style.width.px]=\"spotlightSize()\"\n    [style.height.px]=\"spotlightSize()\"\n    (click)=\"openModal(0)\"\n  >\n    @if (images().length > 0) {\n    <img\n      [ngSrc]=\"images()[0].src\"\n      [width]=\"spotlightSize()\"\n      [height]=\"spotlightSize()\"\n      [alt]=\"images()[0].alt || ''\"\n      class=\"clr-image-gallery__spotlight-img\"\n    />\n    }\n  </div>\n\n  <!-- Thumbnail row -->\n  @if (images().length > 1) {\n  <div class=\"clr-image-gallery__thumbs\">\n    @for (img of staticThumbnails(); track img; let i = $index) {\n    <div\n      class=\"clr-image-gallery__thumb\"\n      [style.width.px]=\"thumbnailSize()\"\n      [style.height.px]=\"thumbnailSize()\"\n      (click)=\"openModal(i + 1)\"\n    >\n      <img\n        [ngSrc]=\"img.src\"\n        [width]=\"thumbnailSize()\"\n        [height]=\"thumbnailSize()\"\n        [alt]=\"img.alt || ''\"\n        class=\"clr-image-gallery__thumb-img\"\n      />\n      <!-- Overlay on last thumbnail when there are more images -->\n      @if (i === maxThumbnails - 1 && remainingCount() > 0) {\n      <div class=\"clr-image-gallery__thumb-overlay\">\n        <span>{{ remainingCount() }}+</span>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n\n<!-- Built-in modal (only when useBuiltInModal is true) -->\n@if (useBuiltInModal() && modalOpen()) {\n<div class=\"clr-image-gallery-backdrop\" (click)=\"onBackdropClick($event)\" role=\"dialog\" aria-modal=\"true\">\n  <div class=\"clr-image-gallery-modal\">\n    <clr-image-carousel\n      [images]=\"images()\"\n      [productName]=\"productName()\"\n      [initialIndex]=\"activeIndex()\"\n      [imageSize]=\"carouselImageSize()\"\n      [thumbnailSize]=\"carouselThumbnailSize()\"\n      (closeCarousel)=\"closeModal()\"\n    ></clr-image-carousel>\n  </div>\n</div>\n}\n", styles: [".clr-image-gallery{display:inline-flex;flex-direction:column;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.clr-image-gallery__spotlight{overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__spotlight-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumbs{display:flex;gap:8px}.clr-image-gallery__thumb{position:relative;overflow:hidden;flex-shrink:0;border-radius:3px}.clr-image-gallery__thumb-img{width:100%;height:100%;object-fit:cover;display:block}.clr-image-gallery__thumb-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600}.clr-image-gallery-backdrop{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000}.clr-image-gallery-modal{background:var(--clr-modal-bg-color, #fff);border-radius:4px;display:flex;flex-direction:column;height:96vh;width:calc(96vh - 116px);max-width:98vw;overflow:hidden;box-shadow:0 4px 32px #00000059}\n"] }]
         }], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], productName: [{ type: i0.Input, args: [{ isSignal: true, alias: "productName", required: false }] }], spotlightSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spotlightSize", required: false }] }], useBuiltInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "useBuiltInModal", required: false }] }], galleryOpen: [{ type: i0.Output, args: ["galleryOpen"] }], carouselImageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "carouselImageSize", required: false }] }], carouselThumbnailSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "carouselThumbnailSize", required: false }] }] } });
@@ -16408,11 +16412,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrImageGalleryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrImageGalleryModule, declarations: [ClrImageGallery, ClrImageCarousel], imports: [CommonModule, ClarityModule, NgOptimizedImage], exports: [ClrImageGallery, ClrImageCarousel] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrImageGalleryModule, imports: [CommonModule, ClarityModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrImageGalleryModule, declarations: [ClrImageGallery, ClrImageCarousel], imports: [CommonModule, ClarityModule, NgOptimizedImage], exports: [ClrImageGallery, ClrImageCarousel] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrImageGalleryModule, imports: [CommonModule, ClarityModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrImageGalleryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrImageGalleryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, NgOptimizedImage],
@@ -16433,8 +16437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrAddonsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsModule, imports: [ClrFocusFirstInvalidFieldDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrAddonsModule, imports: [ClrFocusFirstInvalidFieldDirective,
             ClrControlEnterSubmitDirective,
             ClrKeyboardNavCtrlArrowDirective,
             ClrKeyboardNavAltMnemonicDirective], exports: [ClrViewEditSectionModule,
@@ -16478,7 +16482,7 @@ class ClrAddonsModule {
             ClrKeyboardNavCtrlArrowDirective,
             ClrKeyboardNavAltMnemonicDirective,
             ClrImageGalleryModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
             ClrPagerModule,
             ClrDotPagerModule,
             ClrPagedSearchResultListModule,
@@ -16516,7 +16520,7 @@ class ClrAddonsModule {
             ClrDatagridColumnReorderModule,
             ClrImageGalleryModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrAddonsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -16606,10 +16610,10 @@ class ExportDatagridService {
         };
         this.zipcelx.default(config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExportDatagridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExportDatagridService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ExportDatagridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ExportDatagridService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExportDatagridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ExportDatagridService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -16735,10 +16739,10 @@ class ExportDatagridButtonComponent {
         });
         return columnTitles;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExportDatagridButtonComponent, deps: [{ token: ExportDatagridService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ExportDatagridButtonComponent, isStandalone: true, selector: "clr-export-datagrid-button", inputs: { datagrid: { classPropertyName: "datagrid", publicName: "datagrid", isSignal: true, isRequired: false, transformFunction: null }, datagridRef: { classPropertyName: "datagridRef", publicName: "datagridRef", isSignal: true, isRequired: false, transformFunction: null }, exportTypesToShow: { classPropertyName: "exportTypesToShow", publicName: "exportTypesToShow", isSignal: true, isRequired: false, transformFunction: null }, isBackendExport: { classPropertyName: "isBackendExport", publicName: "isBackendExport", isSignal: true, isRequired: false, transformFunction: null }, exportTitlePrefix: { classPropertyName: "exportTitlePrefix", publicName: "exportTitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, exportButtonPosition: { classPropertyName: "exportButtonPosition", publicName: "exportButtonPosition", isSignal: true, isRequired: false, transformFunction: null }, exportButtonText: { classPropertyName: "exportButtonText", publicName: "exportButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backendExport: "backendExport" }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'export-btn-right': exportButtonPosition() === 'right',\n    'export-btn-left': exportButtonPosition() === 'left'\n  }\"\n>\n  <clr-dropdown>\n    <button class=\"btn btn-sm btn-outline\" clrDropdownTrigger type=\"button\">\n      {{ exportButtonText() }}\n      <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n    </button>\n    <clr-dropdown-menu *clrIfOpen clrPosition=\"bottom-right\">\n      @for (exportType of exportTypesFiltered(); track exportType) {\n      <button (click)=\"onExport(exportType.type)\" clrDropdownItem>\n        {{ exportType.value }}\n      </button>\n      }\n    </clr-dropdown-menu>\n  </clr-dropdown>\n</div>\n", styles: [".export-btn-right{display:flex;justify-content:flex-end}.export-btn-left{display:flex;justify-content:flex-start}.custom-button-export{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ExportDatagridButtonComponent, deps: [{ token: ExportDatagridService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ExportDatagridButtonComponent, isStandalone: true, selector: "clr-export-datagrid-button", inputs: { datagrid: { classPropertyName: "datagrid", publicName: "datagrid", isSignal: true, isRequired: false, transformFunction: null }, datagridRef: { classPropertyName: "datagridRef", publicName: "datagridRef", isSignal: true, isRequired: false, transformFunction: null }, exportTypesToShow: { classPropertyName: "exportTypesToShow", publicName: "exportTypesToShow", isSignal: true, isRequired: false, transformFunction: null }, isBackendExport: { classPropertyName: "isBackendExport", publicName: "isBackendExport", isSignal: true, isRequired: false, transformFunction: null }, exportTitlePrefix: { classPropertyName: "exportTitlePrefix", publicName: "exportTitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, exportButtonPosition: { classPropertyName: "exportButtonPosition", publicName: "exportButtonPosition", isSignal: true, isRequired: false, transformFunction: null }, exportButtonText: { classPropertyName: "exportButtonText", publicName: "exportButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backendExport: "backendExport" }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'export-btn-right': exportButtonPosition() === 'right',\n    'export-btn-left': exportButtonPosition() === 'left'\n  }\"\n>\n  <clr-dropdown>\n    <button class=\"btn btn-sm btn-outline\" clrDropdownTrigger type=\"button\">\n      {{ exportButtonText() }}\n      <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n    </button>\n    <clr-dropdown-menu *clrIfOpen clrPosition=\"bottom-right\">\n      @for (exportType of exportTypesFiltered(); track exportType) {\n      <button (click)=\"onExport(exportType.type)\" clrDropdownItem>\n        {{ exportType.value }}\n      </button>\n      }\n    </clr-dropdown-menu>\n  </clr-dropdown>\n</div>\n", styles: [".export-btn-right{display:flex;justify-content:flex-end}.export-btn-left{display:flex;justify-content:flex-start}.custom-button-export{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExportDatagridButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ExportDatagridButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clr-export-datagrid-button', standalone: true, imports: [ClarityModule, NgClass], template: "<div\n  [ngClass]=\"{\n    'export-btn-right': exportButtonPosition() === 'right',\n    'export-btn-left': exportButtonPosition() === 'left'\n  }\"\n>\n  <clr-dropdown>\n    <button class=\"btn btn-sm btn-outline\" clrDropdownTrigger type=\"button\">\n      {{ exportButtonText() }}\n      <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n    </button>\n    <clr-dropdown-menu *clrIfOpen clrPosition=\"bottom-right\">\n      @for (exportType of exportTypesFiltered(); track exportType) {\n      <button (click)=\"onExport(exportType.type)\" clrDropdownItem>\n        {{ exportType.value }}\n      </button>\n      }\n    </clr-dropdown-menu>\n  </clr-dropdown>\n</div>\n", styles: [".export-btn-right{display:flex;justify-content:flex-end}.export-btn-left{display:flex;justify-content:flex-start}.custom-button-export{margin:0}\n"] }]
         }], ctorParameters: () => [{ type: ExportDatagridService }], propDecorators: { datagrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "datagrid", required: false }] }], datagridRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "datagridRef", required: false }] }], exportTypesToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportTypesToShow", required: false }] }], isBackendExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBackendExport", required: false }] }], exportTitlePrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportTitlePrefix", required: false }] }], exportButtonPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonPosition", required: false }] }], exportButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonText", required: false }] }], backendExport: [{
@@ -16746,11 +16750,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class ClrExportDatagridButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrExportDatagridButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ClrExportDatagridButtonModule, imports: [ExportDatagridButtonComponent], exports: [ExportDatagridButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrExportDatagridButtonModule, providers: [ExportDatagridService], imports: [ExportDatagridButtonComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrExportDatagridButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrExportDatagridButtonModule, imports: [ExportDatagridButtonComponent], exports: [ExportDatagridButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrExportDatagridButtonModule, providers: [ExportDatagridService], imports: [ExportDatagridButtonComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrExportDatagridButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrExportDatagridButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ExportDatagridButtonComponent],
@@ -16863,10 +16867,10 @@ class ClrCopyToClipboard {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: ClrCopyToClipboard, isStandalone: true, selector: "clr-copy-to-clipboard", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, hiddenUntilHovered: { classPropertyName: "hiddenUntilHovered", publicName: "hiddenUntilHovered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hidden-until-hovered": "hiddenUntilHovered()", "class.parent-hovered": "parentHovered" } }, ngImport: i0, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"copy-to-clipboard-icon\"\n    [cdkCopyToClipboard]=\"trimmedValue()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.enter)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></cds-icon>\n  <clr-tooltip-content\n    class=\"clr-tooltip-fit-content\"\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$5.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$5.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$5.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ClrCopyToClipboard, isStandalone: true, selector: "clr-copy-to-clipboard", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, hiddenUntilHovered: { classPropertyName: "hiddenUntilHovered", publicName: "hiddenUntilHovered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hidden-until-hovered": "hiddenUntilHovered()", "class.parent-hovered": "parentHovered" } }, ngImport: i0, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"copy-to-clipboard-icon\"\n    [cdkCopyToClipboard]=\"trimmedValue()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.enter)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></cds-icon>\n  <clr-tooltip-content\n    class=\"clr-tooltip-fit-content\"\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$5.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$5.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$5.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrCopyToClipboard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCopyToClipboard, decorators: [{
             type: Component,
             args: [{ selector: 'clr-copy-to-clipboard', imports: [CdkCopyToClipboard, NgClass, ClrIcon, ClrTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[class.hidden-until-hovered]': 'hiddenUntilHovered()',
@@ -17119,10 +17123,10 @@ class ClrSummaryItemValue {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n  <a clrTooltipTrigger class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n    <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon\n  [shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n  <a\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    [href]=\"href()\"\n    [attr.target]=\"target() ?? null\"\n    (click)=\"handleClick()\"\n  >\n    {{ value() }}\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a #valueElement class=\"value value-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$5.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$5.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$5.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n  <a clrTooltipTrigger class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n    <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon\n  [shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n  <a\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    [href]=\"href()\"\n    [attr.target]=\"target() ?? null\"\n    (click)=\"handleClick()\"\n  >\n    {{ value() }}\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a #valueElement class=\"value value-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$5.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$5.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$5.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
             type: Component,
             args: [{ selector: 'clr-summary-item-value', standalone: true, imports: [RouterModule, ClarityModule, ClrIcon], providers: [provideAnimations()], template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n  <a clrTooltipTrigger class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n    <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon\n  [shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n  <a\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    [href]=\"href()\"\n    [attr.target]=\"target() ?? null\"\n    (click)=\"handleClick()\"\n  >\n    {{ value() }}\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a #valueElement class=\"value value-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { projectedContent: [{
@@ -17331,10 +17335,10 @@ class ClrSummaryItem {
             return !child.hasIcon && !!child.value()?.trim();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null }, copyButtonTooltip: { classPropertyName: "copyButtonTooltip", publicName: "copyButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-copy-to-clipboard [value]=\"copyableValue\" [tooltipText]=\"copyButtonTooltip()\"></clr-copy-to-clipboard>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-copy-to-clipboard{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: ClarityModule }, { kind: "component", type: ClrSummaryItemValue, selector: "clr-summary-item-value", inputs: ["value", "icon", "tooltip", "clickable", "href", "target"], outputs: ["clicked"] }, { kind: "component", type: ClrCopyToClipboard, selector: "clr-copy-to-clipboard", inputs: ["value", "tooltipText", "hiddenUntilHovered"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrSummaryItem, isStandalone: true, selector: "clr-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, showOnEmptyValue: { classPropertyName: "showOnEmptyValue", publicName: "showOnEmptyValue", isSignal: true, isRequired: false, transformFunction: null }, valueCopyable: { classPropertyName: "valueCopyable", publicName: "valueCopyable", isSignal: true, isRequired: false, transformFunction: null }, copyButtonTooltip: { classPropertyName: "copyButtonTooltip", publicName: "copyButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "valueChildren", predicate: ClrSummaryItemValue, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "valuesContainer", first: true, predicate: ["valuesContainer"], descendants: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-copy-to-clipboard [value]=\"copyableValue\" [tooltipText]=\"copyButtonTooltip()\"></clr-copy-to-clipboard>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-copy-to-clipboard{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: ClarityModule }, { kind: "component", type: ClrSummaryItemValue, selector: "clr-summary-item-value", inputs: ["value", "icon", "tooltip", "clickable", "href", "target"], outputs: ["clicked"] }, { kind: "component", type: ClrCopyToClipboard, selector: "clr-copy-to-clipboard", inputs: ["value", "tooltipText", "hiddenUntilHovered"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryItem, decorators: [{
             type: Component,
             args: [{ selector: 'clr-summary-item', standalone: true, imports: [ClarityModule, ClrSummaryItemValue, ClrCopyToClipboard], template: "<ng-template #itemTemplate>\n  <div\n    class=\"summary-item\"\n    [class.hidden]=\"\n      !hasProjectedContent && !hasLoading && !hasError && !hasWarning && !showEditButton && !showOnEmptyValue()\n    \"\n  >\n    <span class=\"summary-item-label\">{{ label() }}:</span>\n    <div class=\"summary-item-values\" #valuesContainer>\n      @if (hasLoading) {\n      <div class=\"summary-item-loading\">\n        <span class=\"spinner spinner-inline\"></span>\n        <span>{{ loadingText }}</span>\n      </div>\n      } @else if (hasError) {\n      <clr-summary-item-value icon=\"error-standard\" class=\"error\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"errorText\"\n        [clickable]=\"true\"\n        (clicked)=\"errorClick()\"\n        class=\"error\"\n      ></clr-summary-item-value>\n      } @else if (hasWarning) {\n      <clr-summary-item-value icon=\"warning-standard\" class=\"warning\"></clr-summary-item-value>\n      <clr-summary-item-value\n        [value]=\"warningText\"\n        [clickable]=\"true\"\n        (clicked)=\"warningClick()\"\n        class=\"warning\"\n      ></clr-summary-item-value>\n      } @else {\n      <ng-content select=\"clr-summary-item-value\"></ng-content>\n      @if (showCopyButton) {\n      <clr-copy-to-clipboard [value]=\"copyableValue\" [tooltipText]=\"copyButtonTooltip()\"></clr-copy-to-clipboard>\n      }\n      <ng-content></ng-content>\n      @if (showEditButton) {\n      <clr-summary-item-value [value]=\"editText\" [clickable]=\"true\" (clicked)=\"editClick()\"></clr-summary-item-value>\n      } @else if (!hasProjectedContent) {\n      <span class=\"value value-placeholder\">&mdash;</span>\n      } }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0;max-width:100%;overflow:hidden}.summary-item{display:flex;flex-direction:row;align-items:center;gap:.25rem;width:100%;min-width:0}.summary-item.hidden{display:none}.summary-item-label{flex-shrink:0;white-space:nowrap;font-weight:600}.summary-item-values{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}clr-copy-to-clipboard{flex:0 0 auto}.summary-item-loading{display:flex;align-items:center}.summary-item-loading .loading-spinner{width:20px;height:20px;flex-shrink:0}.summary-item-loading .loading-text{color:var(--cds-alias-typography-color-300);white-space:nowrap}.value{display:inline-block;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:ellipsis;white-space:nowrap}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}\n"] }]
         }], propDecorators: { template: [{
@@ -17415,10 +17419,10 @@ class ClrSummaryAreaStateService {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryAreaStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryAreaStateService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryAreaStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryAreaStateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryAreaStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryAreaStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -17745,10 +17749,10 @@ class ClrSummaryArea {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], viewQueries: [{ propertyName: "panelsRef", first: true, predicate: ["panelsRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #panelsRef\n  class=\"summary-area-panels\"\n  [class.is-active]=\"!isCollapsed()\"\n  [class.loading-active]=\"hasLoading\"\n  [style.height]=\"panelHeight\"\n>\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [style.--rows]=\"currentRows()\"\n    [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div\n        class=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\">\n              {{ warningLinkText }}\n            </span>\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows()\">\n          @for (item of visibleItems; track item) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i2$4.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], viewQueries: [{ propertyName: "panelsRef", first: true, predicate: ["panelsRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #panelsRef\n  class=\"summary-area-panels\"\n  [class.is-active]=\"!isCollapsed()\"\n  [class.loading-active]=\"hasLoading\"\n  [style.height]=\"panelHeight\"\n>\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [style.--rows]=\"currentRows()\"\n    [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div\n        class=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\">\n              {{ warningLinkText }}\n            </span>\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows()\">\n          @for (item of visibleItems; track item) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i2$4.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryArea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryArea, decorators: [{
             type: Component,
             args: [{ selector: 'clr-summary-area', standalone: true, imports: [CommonModule, ClarityModule], template: "<div\n  #panelsRef\n  class=\"summary-area-panels\"\n  [class.is-active]=\"!isCollapsed()\"\n  [class.loading-active]=\"hasLoading\"\n  [style.height]=\"panelHeight\"\n>\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [style.--rows]=\"currentRows()\"\n    [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div\n        class=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\">\n              {{ warningLinkText }}\n            </span>\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows()\">\n          @for (item of visibleItems; track item) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{
@@ -17794,10 +17798,10 @@ class ClrSummaryAreaToggle {
         this.state.toggle(this.localStorageKey());
         this.summaryToggle.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryAreaToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: ClrSummaryAreaToggle, isStandalone: true, selector: "clr-summary-area-toggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { summaryToggle: "summaryToggle" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<button\n  class=\"summary-area-toggle\"\n  type=\"button\"\n  [attr.aria-pressed]=\"!collapsed()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleToggle($event)\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    size=\"20\"\n    direction=\"up\"\n    class=\"icon-rotate summary-area-icon\"\n    [class.icon-rotated]=\"collapsed()\"\n    [class.no-animation]=\"suppressAnimation\"\n  ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryAreaToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ClrSummaryAreaToggle, isStandalone: true, selector: "clr-summary-area-toggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { summaryToggle: "summaryToggle" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<button\n  class=\"summary-area-toggle\"\n  type=\"button\"\n  [attr.aria-pressed]=\"!collapsed()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleToggle($event)\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    size=\"20\"\n    direction=\"up\"\n    class=\"icon-rotate summary-area-icon\"\n    [class.icon-rotated]=\"collapsed()\"\n    [class.no-animation]=\"suppressAnimation\"\n  ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryAreaToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryAreaToggle, decorators: [{
             type: Component,
             args: [{ selector: 'clr-summary-area-toggle', standalone: true, imports: [ClrIcon, ClrTooltipModule], template: "<button\n  class=\"summary-area-toggle\"\n  type=\"button\"\n  [attr.aria-pressed]=\"!collapsed()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleToggle($event)\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    size=\"20\"\n    direction=\"up\"\n    class=\"icon-rotate summary-area-icon\"\n    [class.icon-rotated]=\"collapsed()\"\n    [class.no-animation]=\"suppressAnimation\"\n  ></cds-icon>\n</button>\n", styles: [".summary-area-toggle{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.summary-area-icon{margin-left:10px;margin-right:10px;opacity:.7}.icon-rotated{transform:rotate(180deg);transition:all .2s ease-in-out}.icon-rotated.no-animation{transition:none!important}.summary-area-toggle:disabled{cursor:not-allowed;opacity:.4}\n"] }]
         }], propDecorators: { summaryToggle: [{ type: i0.Output, args: ["summaryToggle"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], localStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "localStorageKey", required: false }] }], handleKeydown: [{