@porscheinformatik/clr-addons 21.0.6 → 21.1.0

package/fesm2022/porscheinformatik-clr-addons.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, DOCUMENT, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, output, viewChild, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, ChangeDetectorRef, NgZone, Injector, untracked, runInInjectionContext } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, DOCUMENT, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, viewChild, ViewContainerRef, output, afterRenderEffect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, ChangeDetectorRef, NgZone, Injector, untracked, runInInjectionContext } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, NgOptimizedImage, NgClass } from '@angular/common';
 import * as i2 from '@clr/angular/icon';
@@ -7,9 +7,9 @@ import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIco
 import * as i3 from '@angular/forms';
 import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, NgModel } from '@angular/forms';
 import * as i1$2 from '@clr/angular';
-import { ClarityModule, ClrFormsModule, ClrDropdown, ClrIcon, ClrForm, ClrAlert, ClrPopoverPosition, ClrPopoverService, ClrCommonStringsService, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrControlLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule, ClrTooltipModule } from '@clr/angular';
-import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, map as map$1, distinctUntilChanged, shareReplay, combineLatest, skip, auditTime, fromEvent, take as take$1, merge, debounceTime as debounceTime$1, tap, of, switchMap, filter as filter$2, ReplaySubject, takeUntil as takeUntil$1, delay } from 'rxjs';
-import { takeUntil, take, observeOn, filter as filter$1, debounceTime } from 'rxjs/operators';
+import { ClarityModule, ClrFormsModule, ClrDropdown, ClrIcon, ClrForm, ClrAlert, ClrPopoverPosition, ClrPopoverService, ClrCommonStringsService, ClrPopoverType, ClrPopoverHostDirective, CdkTrapFocusModule, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrControlLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule, ClrTooltipModule } from '@clr/angular';
+import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, map as map$1, distinctUntilChanged, shareReplay, combineLatest, skip, auditTime, tap, share, merge, fromEvent, first, take as take$1, debounceTime as debounceTime$1, of, switchMap, filter as filter$2, ReplaySubject, takeUntil as takeUntil$1, delay } from 'rxjs';
+import { takeUntil, take, observeOn, filter as filter$1, skip as skip$1, debounceTime } from 'rxjs/operators';
 import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { trigger, transition, style, animate, state } from '@angular/animations';
@@ -20,10 +20,10 @@ import * as i2$3 from '@clr/angular/popover/common';
 import * as i2$4 from '@clr/angular/emphasis/alert';
 import { takeUntilDestroyed, toObservable, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@clr/angular/progress/spinner';
+import * as i4 from '@clr/angular/forms/checkbox';
 import * as i3$2 from '@clr/angular/forms/input';
 import * as i1$4 from '@angular/common/http';
 import { CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import * as i4 from '@clr/angular/forms/checkbox';
 import * as i4$1 from '@clr/angular/forms/datepicker';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import * as i1$5 from '@clr/angular/popover/tooltip';
@@ -42,10 +42,10 @@ class ClrBackButton {
     back() {
         this.location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBackButton, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBackButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", 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.13", ngImport: i0, type: ClrBackButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrBackButtonModule, declarations: [ClrBackButton], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrBackButton] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBackButtonModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBackButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", ngImport: i0, type: ClrBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBreadcrumbService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", ngImport: i0, type: ClrBreadcrumb, deps: [{ token: ClrBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBreadcrumb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", 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.13", ngImport: i0, type: ClrBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrBreadcrumbModule, declarations: [ClrBreadcrumb], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrBreadcrumb] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBreadcrumbModule, providers: [ClrBreadcrumbService], imports: [CommonModule, ClarityModule, RouterModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBreadcrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", ngImport: i0, type: ClrCollapseExpandSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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  <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-content select=\"[clr-ces-title]\"></ng-content>\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-content select=\"[clr-ces-title]\"></ng-content>\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  @if (!disableSubtitle) {\n  <div class=\"ces-subtitle\">\n    @if (!disableHeaderStyles) {\n    <h4>\n      <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n    </h4>\n    } @else {\n    <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\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.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: [
             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.13", ngImport: i0, type: ClrCollapseExpandSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrCollapseExpandSection, decorators: [{
             type: Component,
             args: [{ selector: 'clr-collapse-expand-section', animations: [
                         trigger('collapseExpandAnimation', [
@@ -229,7 +229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             transition('true => false', animate('300ms ease-out')),
                             transition('false => true', animate('300ms ease-in')),
                         ]),
-                    ], standalone: false, template: "<div class=\"ces\">\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-content select=\"[clr-ces-title]\"></ng-content>\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-content select=\"[clr-ces-title]\"></ng-content>\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  @if (!disableSubtitle) {\n  <div class=\"ces-subtitle\">\n    @if (!disableHeaderStyles) {\n    <h4>\n      <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n    </h4>\n    } @else {\n    <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\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" }]
+                    ], standalone: false, 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" }]
         }], propDecorators: { isCollapsed: [{
                 type: Input,
                 args: ['clrIsCollapsed']
@@ -253,11 +253,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrCollapseExpandSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrCollapseExpandSectionModule, declarations: [ClrCollapseExpandSection], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrCollapseExpandSection] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrCollapseExpandSectionModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrCollapseExpandSectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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: [
             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.13", ngImport: i0, type: ClrContentPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", 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.13", ngImport: i0, type: ClrContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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: `
     <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.13", ngImport: i0, type: ClrContentPanelContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", 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.13", ngImport: i0, type: ClrContentPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrContentPanelContainerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", 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.13", ngImport: i0, type: ClrContentPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrContentPanelContainerFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", 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.13", ngImport: i0, type: ClrContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrContentPanelModule, declarations: [ClrContentPanel,
+    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,
             ClrContentPanelContainer,
             ClrContentPanelContainerContent,
             ClrContentPanelContainerFooter], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrContentPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrContentPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrContentPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDataListPredefined]',
@@ -527,11 +527,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrDataListValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrDataListValidatorModule, declarations: [ClrDataListPredefinedValidatorDirective], exports: [ClrDataListPredefinedValidatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDataListValidatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDataListValidatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrDataListPredefinedValidatorDirective],
@@ -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.13", 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.13", 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.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: `
     <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.13", ngImport: i0, type: ClrDateTimeContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", 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.13", ngImport: i0, type: ClrTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTimeInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTimeInput, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrTime]',
@@ -623,11 +623,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrDateTimeModule, imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", ngImport: i0, type: ClrDotPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDotPager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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.13", 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.13", ngImport: i0, type: ClrDotPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrDotPagerModule, declarations: [ClrDotPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrDotPager] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDotPagerModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDotPagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDotPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -721,7 +721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.
  */
@@ -757,7 +757,8 @@ class ClrDropdownOverflowDirective {
     }
     applyDropdownOverflowStyles() {
         // the vertical position of our element in the current window
-        const y = this.elRef.nativeElement.getBoundingClientRect().y;
+        const rect = this.elRef.nativeElement.getBoundingClientRect();
+        const y = rect.y === 0 ? rect.height : rect.y;
         if (y !== 0 && !this.alreadyChecked) {
             const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
             // see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
@@ -817,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.13", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-dropdown-menu',
@@ -975,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.13", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrFlowBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFlowBar, decorators: [{
             type: Component,
             args: [{ selector: 'clr-flow-bar', host: {
                         '[class.flow-bar]': 'true',
@@ -1000,11 +1001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrDropdownOverflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrDropdownOverflowModule, declarations: [ClrDropdownOverflowDirective], exports: [ClrDropdownOverflowDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrDropdownOverflowDirective],
@@ -1024,11 +1025,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrFlowBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrFlowBarModule, imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrFlowBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFlowBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
@@ -1094,10 +1095,10 @@ class ClrGenericQuickList {
     ngOnDestroy() {
         clearTimeout(this.timeout);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrGenericQuickList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -1145,11 +1146,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrGenericQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrGenericQuickListModule, declarations: [ClrGenericQuickList], imports: [CommonModule, ClarityModule], exports: [ClrGenericQuickList] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrGenericQuickListModule, imports: [CommonModule, ClarityModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrGenericQuickListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrGenericQuickListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -1182,10 +1183,10 @@ class ClrIconAvatar {
     getShape() {
         return this.shape ?? 'user';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIconAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIconAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -1208,11 +1209,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrIconAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrIconAvatarModule, declarations: [ClrIconAvatar], imports: [CommonModule, ClarityModule, ClrIcon], exports: [ClrIconAvatar] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIconAvatarModule, imports: [CommonModule, ClarityModule, ClrIcon] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIconAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIconAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, ClrIcon],
@@ -1257,10 +1258,10 @@ class ClrLetterAvatar {
             return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrLetterAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrLetterAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -1283,11 +1284,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrLetterAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrLetterAvatarModule, declarations: [ClrLetterAvatar], imports: [CommonModule, ClarityModule], exports: [ClrLetterAvatar] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrLetterAvatarModule, imports: [CommonModule, ClarityModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrLetterAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLetterAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -1317,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.13", 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.13", type: ClrMainNavGroupItem, isStandalone: false, selector: "[clrMainNavGroupItem]", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMainNavGroupItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroupItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMainNavGroupItem]',
@@ -1463,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.13", ngImport: i0, type: ClrMainNavGroup, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMainNavGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -1486,11 +1487,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrMainNavGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrMainNavGroupModule, imports: [CommonModule, RouterModule, ClarityModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMainNavGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMainNavGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, ClarityModule],
@@ -1572,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.13", ngImport: i0, type: ClrRequiredOneMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrRequiredOneMultilang, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrRequiredOneMultilang, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrRequiredOneMultilang]',
@@ -1593,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.13", ngImport: i0, type: ClrRequiredAllMultilang, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrRequiredAllMultilang, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrRequiredAllMultilang, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrRequiredAllMultilang]',
@@ -1629,10 +1630,10 @@ class ControlIdService {
     get idChange() {
         return this._idChange.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ControlIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ControlIdService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ControlIdService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ControlIdService, decorators: [{
             type: Injectable
         }] });
 
@@ -1716,10 +1717,10 @@ class ClrAbstractFormComponent {
             ClrForm.prototype.markAsTouched = origMarkAsTouched;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAbstractFormComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAbstractFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAbstractFormComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { formControl: [{
                 type: HostBinding,
@@ -1826,10 +1827,10 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMultilingualAbstract, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { multi: [{
                 type: HostBinding,
@@ -1866,8 +1867,8 @@ class ClrMultilingualSelector {
     constructor() {
         this.selectedLangChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMultilingualSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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: `
     <div>
       <clr-dropdown [clrCloseMenuOnItemClick]="true">
         <button
@@ -1891,7 +1892,7 @@ class ClrMultilingualSelector {
     </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.13", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-multilingual-selector',
@@ -1940,8 +1941,8 @@ class ClrMultilingualInput extends ClrMultilingualAbstract {
     constructor(injector) {
         super(injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMultilingualInput, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ClrMultilingualInput, isStandalone: false, selector: "clr-multilingual-input", providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClrMultilingualInput),
@@ -1950,7 +1951,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.13", ngImport: i0, type: ClrMultilingualInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualInput, decorators: [{
             type: Component,
             args: [{ selector: 'clr-multilingual-input', providers: [
                         {
@@ -1972,8 +1973,8 @@ class ClrMultilingualTextarea extends ClrMultilingualAbstract {
     constructor(injector) {
         super(injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMultilingualTextarea, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ClrMultilingualTextarea, isStandalone: false, selector: "clr-multilingual-textarea", inputs: { rows: "rows" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClrMultilingualTextarea),
@@ -1982,7 +1983,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.13", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'clr-multilingual-textarea', providers: [
                         {
@@ -2002,8 +2003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrMultilingualModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrMultilingualModule, declarations: [ClrMultilingualInput,
+    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,
             ClrMultilingualTextarea,
             ClrRequiredOneMultilang,
             ClrRequiredAllMultilang,
@@ -2012,9 +2013,9 @@ class ClrMultilingualModule {
             ClrRequiredOneMultilang,
             ClrRequiredAllMultilang,
             ClrMultilingualSelector] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMultilingualModule, imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualModule, imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMultilingualModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMultilingualModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
@@ -2219,8 +2220,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.13", 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.13", 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.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: [
             trigger('slideDown', [
                 transition(':enter', [
                     style({ transform: 'translateY(-200%)' }),
@@ -2240,7 +2241,7 @@ class ClrNotification {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrNotification, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotification, decorators: [{
             type: Component,
             args: [{ selector: 'clr-notification', animations: [
                         trigger('slideDown', [
@@ -2284,11 +2285,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrNotificationModule, declarations: [ClrNotification], imports: [CommonModule, ClarityModule, FormsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrNotificationModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrNotificationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -2372,10 +2373,10 @@ class ClrNotificationService {
             notificationInstance.progressbar = options.progressbar;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrNotificationService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNotificationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: Document, decorators: [{
                     type: Inject,
@@ -2736,8 +2737,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.13", 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.13", 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.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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClrNumericField),
@@ -2745,7 +2746,7 @@ class ClrNumericField {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrNumericField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNumericField, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrNumeric]',
@@ -2886,10 +2887,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.13", ngImport: i0, type: ClrMaxNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMaxNumeric, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMaxNumeric, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMaxNumeric]',
@@ -2914,10 +2915,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.13", ngImport: i0, type: ClrMinNumeric, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrMinNumeric, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrMinNumeric, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrMinNumeric]',
@@ -2941,11 +2942,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrNumericFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrNumericFieldModule, imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrNumericFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrNumericFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
@@ -3069,10 +3070,10 @@ class ClrPager {
         }
         return middlePages;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrPager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -3116,10 +3117,10 @@ class ClrPagedSearchResultList {
          */
         this.pageSizeChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrPagedSearchResultList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -3160,11 +3161,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrPagerModule, declarations: [ClrPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrPager] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrPagerModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrPagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -3179,11 +3180,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrPagedSearchResultListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrPagedSearchResultListModule, imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrPagedSearchResultListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrPagedSearchResultListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrPagerModule],
@@ -3249,15 +3250,15 @@ class ClrProgressSpinnerComponent {
             return new Date().getTime() - this.startTimestamp;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrProgressSpinnerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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: `
     @if (_showSpinner) {
     <span [class]="'spinner-' + size + ' spinner'"></span>
     <span>&nbsp;<ng-content></ng-content></span>
     }
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrProgressSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrProgressSpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-progress-spinner',
@@ -3286,11 +3287,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrProgressSpinnerModule, declarations: [ClrProgressSpinnerComponent], imports: [CommonModule], exports: [ClrProgressSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrProgressSpinnerModule, imports: [CommonModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrProgressSpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrProgressSpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -3349,10 +3350,10 @@ class ClrAddOption {
             this.select.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAddOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAddOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -3451,8 +3452,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.13", ngImport: i0, type: ClrQuickList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClrQuickList),
@@ -3460,7 +3461,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.13", ngImport: i0, type: ClrQuickList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrQuickList, decorators: [{
             type: Component,
             args: [{ selector: 'clr-quick-list', host: { '[class.quick-list]': 'true' }, providers: [
                         {
@@ -3508,11 +3509,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrQuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrQuickListModule, imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrQuickListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrQuickListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ClarityModule, ClrFormsModule],
@@ -3614,10 +3615,10 @@ class ClrSearchField {
             delete this.keyupListener;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSearchField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSearchField, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrSearch]',
@@ -3634,11 +3635,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrSearchFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrSearchFieldModule, declarations: [ClrSearchField], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrSearchField] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSearchFieldModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSearchFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSearchFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -3681,8 +3682,8 @@ class ClrTreetableActionOverflow {
     closeOverflowContent(event) {
         this.smartToggleService.toggleWithEvent(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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: `
     @if (!empty()) {
     <ng-container>
       <button class="treetable-action-trigger" clrPopoverOrigin clrPopoverOpenCloseButton>
@@ -3698,9 +3699,9 @@ class ClrTreetableActionOverflow {
       </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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.13", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-action-overflow',
@@ -3763,10 +3764,10 @@ class ClrTreetableRecursionService {
     setTemplate(newTemplate) {
         this._template.set(newTemplate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableRecursionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableRecursionService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableRecursionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRecursionService, decorators: [{
             type: Injectable
         }] });
 function treetableRecursionServiceFactory(existing) {
@@ -3793,8 +3794,8 @@ 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.13", ngImport: i0, type: ClrTreetableRecursiveRows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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: `
     <ng-container>
       @for (child of parent()?.children || children(); track child.id) {
       <ng-container *ngTemplateOutlet="template(); context: getContext(child)" />
@@ -3802,7 +3803,7 @@ class ClrTreetableRecursiveRows {
     </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.13", ngImport: i0, type: ClrTreetableRecursiveRows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRecursiveRows, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-recursive-rows',
@@ -3837,8 +3838,8 @@ class ClrTreetableRowCheckbox {
             ? ClrTreetableSelectedState.UNSELECTED
             : ClrTreetableSelectedState.SELECTED);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableRowCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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.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: `
     <div class="clr-checkbox-wrapper treetable-row-selection treetable-cell">
       <input
         type="checkbox"
@@ -3850,7 +3851,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.13", ngImport: i0, type: ClrTreetableRowCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableRowCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'clr-tt-row-checkbox', template: `
     <div class="clr-checkbox-wrapper treetable-row-selection treetable-cell">
@@ -3915,20 +3916,20 @@ class ClrTreetableRow {
             this.onExpandCollapseClick();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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 }] }] } });
 
 /*
- * 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.
  */
-class Sort {
+class SortStateService {
     constructor() {
         this._comparator = signal(null, ...(ngDevMode ? [{ debugName: "_comparator" }] : /* istanbul ignore next */ []));
         this._reverse = signal(false, ...(ngDevMode ? [{ debugName: "_reverse" }] : /* istanbul ignore next */ []));
@@ -3969,10 +3970,10 @@ class Sort {
         }
         return (this._reverse() ? -1 : 1) * currentComparator.compare(a, b);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Sort, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Sort }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Sort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SortStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -4185,7 +4186,7 @@ function areFiltersDistinct(prev, curr) {
 }
 
 /*
- * 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.
  */
@@ -4203,7 +4204,7 @@ class RegisteredTreetableFilter {
         this.unregister = unregister;
     }
 }
-class Filters {
+class FilterStateService {
     constructor() {
         this._destroyRef = inject(DestroyRef);
         this.filterId = 0;
@@ -4268,10 +4269,10 @@ class Filters {
         });
         return registered;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Filters, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Filters }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Filters, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterStateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4333,14 +4334,14 @@ function areTreetableStatesEqual(prev, curr) {
 }
 
 /*
- * 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.
  */
 class TreetableDataStateService {
     constructor() {
-        this._filters = inject((Filters));
-        this._sort = inject((Sort));
+        this._filters = inject((FilterStateService));
+        this._sort = inject((SortStateService));
         this._dataSource = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataSource" }] : /* istanbul ignore next */ []));
         this._stickyIndeterminate = signal(false, ...(ngDevMode ? [{ debugName: "_stickyIndeterminate" }] : /* istanbul ignore next */ []));
         this._itemsExternallySelected = signal([], ...(ngDevMode ? [{ debugName: "_itemsExternallySelected" }] : /* istanbul ignore next */ []));
@@ -4481,15 +4482,171 @@ class TreetableDataStateService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableDataStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableDataStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableDataStateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const TreetableColumnUpdate = {
+    WIDTH: 'WIDTH',
+    HIDDEN: 'HIDDEN',
+    RESET_HIDDEN: 'RESET_HIDDEN',
+};
+class TreetableColumnStateService {
+    constructor() {
+        this._changeWidth$ = new Subject();
+        this._changeHideable$ = new Subject();
+        this._changeHiddenForAll$ = new Subject();
+        this._changeHidden$ = new Subject();
+        this._resetHidden$ = new Subject();
+        this._columnState = signal({}, ...(ngDevMode ? [{ debugName: "_columnState" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => Object.values(this._columnState()).sort((a, b) => a.columnIndex - b.columnIndex), ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.visibleColumns = computed(() => this.columns().filter(column => !column.hidden), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+        this.hideableColumns = computed(() => this.columns().filter(column => column.hideable), ...(ngDevMode ? [{ debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
+        this.hasHideableColumns = computed(() => this.hideableColumns()?.length > 0, ...(ngDevMode ? [{ debugName: "hasHideableColumns" }] : /* istanbul ignore next */ []));
+        this._changeWidthAction$ = this._changeWidth$.pipe(tap(({ id, width }) => this.update(id, { width })), share());
+        this._changeHideableAction$ = this._changeHideable$.pipe(tap(patch => {
+            const current = this.getColumn(patch.id);
+            if (current.hideable && !patch.hideable) {
+                this.update(patch.id, { hideable: false, hidden: false, initialHidden: false });
+            }
+            if (!current.hideable && patch.hideable) {
+                this.update(patch.id, { hideable: true, hidden: patch.hidden, initialHidden: patch.hidden });
+            }
+            this.update(patch.id, { hidden: patch.hidden });
+        }), share());
+        this._changeHiddenAction$ = this._changeHidden$.pipe(filter$1(change => this.getColumn(change.id)?.hideable), tap(change => this.update(change.id, { hidden: change.hidden })), share());
+        this._changeHiddenForAllAction$ = this._changeHiddenForAll$.pipe(tap(change => {
+            this._columnState.update(current => Object.fromEntries(Object.entries(current).map(([id, column]) => [
+                id,
+                {
+                    ...column,
+                    hidden: change,
+                },
+            ])));
+        }), share());
+        this._resetHiddenAction$ = this._resetHidden$.pipe(tap(() => {
+            this._columnState.update(current => Object.fromEntries(Object.entries(current).map(([id, column]) => [
+                id,
+                column.hideable
+                    ? {
+                        ...column,
+                        hidden: column.initialHidden,
+                    }
+                    : column,
+            ])));
+        }), share());
+        this.changes$ = merge(this._changeWidthAction$.pipe(map$1(() => TreetableColumnUpdate.WIDTH)), this._changeHideableAction$.pipe(map$1(() => TreetableColumnUpdate.HIDDEN)), this._changeHiddenForAllAction$.pipe(map$1(() => TreetableColumnUpdate.HIDDEN)), this._changeHiddenAction$.pipe(map$1(() => TreetableColumnUpdate.HIDDEN)), this._resetHiddenAction$.pipe(map$1(() => TreetableColumnUpdate.HIDDEN)));
+        this._changeWidthAction$.pipe(takeUntilDestroyed()).subscribe();
+        this._changeHideableAction$.pipe(takeUntilDestroyed()).subscribe();
+        this._changeHiddenForAllAction$.pipe(takeUntilDestroyed()).subscribe();
+        this._changeHiddenAction$.pipe(takeUntilDestroyed()).subscribe();
+        this._resetHiddenAction$.pipe(takeUntilDestroyed()).subscribe();
+    }
+    register(options) {
+        this._columnState.update(current => ({
+            ...current,
+            [options.id]: {
+                id: options.id,
+                columnIndex: Number.MAX_SAFE_INTEGER,
+                hideable: false,
+                hidden: false,
+                initialHidden: false,
+                titleTemplateRef: options.titleTemplateRef,
+            },
+        }));
+    }
+    registerHideable(columnId, options) {
+        this._columnState.update(current => {
+            const existing = current[columnId];
+            if (!existing) {
+                return current;
+            }
+            return {
+                ...current,
+                [columnId]: {
+                    ...existing,
+                    hideable: options.hideable,
+                    hidden: options.hidden,
+                    initialHidden: options.initialHidden ?? options.hidden,
+                    titleTemplateRef: options.titleTemplateRef,
+                },
+            };
+        });
+    }
+    unregister(id) {
+        this._columnState.update(current => {
+            const next = { ...current };
+            delete next[id];
+            return next;
+        });
+    }
+    initializeOrder(idsInRenderOrder) {
+        this._columnState.update(current => {
+            const next = { ...current };
+            idsInRenderOrder.forEach((id, index) => {
+                if (next[id]) {
+                    next[id] = {
+                        ...next[id],
+                        columnIndex: index,
+                    };
+                }
+            });
+            return next;
+        });
+    }
+    changeWidth(id, width) {
+        this._changeWidth$.next({ id, width });
+    }
+    changeHideable(id, hideable, hidden) {
+        this._changeHideable$.next({ id, hideable, hidden: hidden ?? false });
+    }
+    changeHiddenForAll(hidden) {
+        this._changeHiddenForAll$.next(hidden);
+    }
+    displayAllColumns() {
+        this.changeHiddenForAll(false);
+    }
+    toggleHidden(id) {
+        const current = this.getColumn(id);
+        this._changeHidden$.next({ id, hidden: !current.hidden });
+    }
+    resetToInitialHidden() {
+        this._resetHidden$.next();
+    }
+    getColumnState(id) {
+        return toObservable(this._columnState).pipe(map$1(columns => columns[id]), distinctUntilChanged());
+    }
+    getColumn(id) {
+        return this._columnState()[id];
+    }
+    update(id, patch) {
+        this._columnState.update(current => {
+            const existing = current[id];
+            if (!existing) {
+                return current;
+            }
+            return {
+                ...current,
+                [id]: {
+                    ...existing,
+                    ...patch,
+                    id: existing.id,
+                },
+            };
+        });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableColumnStateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 /*
- * 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.
  */
@@ -4526,12 +4683,24 @@ class ClrTreetable {
     toggleSelectAll() {
         this._dataStateService.toggleSelectionForDisplayedNodes();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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, Sort, Filters], 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    <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()) {\n      <ng-content select=\"clr-tt-placeholder\" />\n      }\n    </div>\n  </div>\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 }); }
+    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: [
+            TREETABLE_RECURSION_SERVICE_PROVIDER,
+            TreetableDataStateService,
+            TreetableColumnStateService,
+            SortStateService,
+            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.13", ngImport: i0, type: ClrTreetable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetable, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-treetable', host: { '[class.empty]': 'empty()', '[class.treetable-host]': 'true' }, providers: [TREETABLE_RECURSION_SERVICE_PROVIDER, TreetableDataStateService, Sort, Filters], 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 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    <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()) {\n      <ng-content select=\"clr-tt-placeholder\" />\n      }\n    </div>\n  </div>\n  @if (clrTtLoading()) {\n  <div class=\"treetable-spinner\">\n    <clr-spinner clrMedium />\n  </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'clr-treetable', host: { '[class.empty]': 'empty()', '[class.treetable-host]': 'true' }, providers: [
+                        TREETABLE_RECURSION_SERVICE_PROVIDER,
+                        TreetableDataStateService,
+                        TreetableColumnStateService,
+                        SortStateService,
+                        FilterStateService,
+                    ], 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 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" }]
         }], ctorParameters: () => [], propDecorators: { clrClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrClickableRows", required: false }] }], clrHideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrHideHeader", required: false }] }], clrTtLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtLoading", required: false }] }], clrTtSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSelected", required: false }] }], clrTtAutoParentSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtAutoParentSelection", required: false }] }], clrTtSelectedChange: [{ type: i0.Output, args: ["clrTtSelectedChange"] }], clrTtRefresh: [{ type: i0.Output, args: ["clrTtRefresh"] }], _ttRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClrTreetableRow), { ...{ descendants: true }, isSignal: true }] }], _actionOverflow: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClrTreetableActionOverflow), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /*
@@ -4551,12 +4720,20 @@ var ClrTreetableSortOrder;
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+let columnId = 0;
 class ClrTreetableColumn {
+    ngOnInit() {
+        this._columnState.register({ id: this.columnId, titleTemplateRef: this._columnTitleRef() });
+    }
+    ngOnDestroy() {
+        this._columnState.unregister(this.columnId);
+    }
     constructor() {
-        this._sort = inject((Sort));
+        this.columnId = `clr-tt-col-${columnId++}`;
+        this._columnTitleRef = viewChild('columnTitle', { ...(ngDevMode ? { debugName: "_columnTitleRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this._columnState = inject(TreetableColumnStateService);
+        this._sort = inject((SortStateService));
         this.clrTtSortBy = input(null, ...(ngDevMode ? [{ debugName: "clrTtSortBy" }] : /* istanbul ignore next */ []));
-        this.clrTtSortOrder = input(ClrTreetableSortOrder.UNSORTED, ...(ngDevMode ? [{ debugName: "clrTtSortOrder" }] : /* istanbul ignore next */ []));
-        this.clrTtSortOrderChange = output();
         this._internalSortOrder = computed(() => {
             const sortState = this._sort.sortState();
             const sortBy = this.clrTtSortBy();
@@ -4565,6 +4742,8 @@ class ClrTreetableColumn {
             }
             return sortState.reverse ? ClrTreetableSortOrder.DESC : ClrTreetableSortOrder.ASC;
         }, ...(ngDevMode ? [{ debugName: "_internalSortOrder" }] : /* istanbul ignore next */ []));
+        this.clrTtSortOrder = input(ClrTreetableSortOrder.UNSORTED, ...(ngDevMode ? [{ debugName: "clrTtSortOrder" }] : /* istanbul ignore next */ []));
+        this.clrTtSortOrderChange = outputFromObservable(toObservable(this._internalSortOrder));
         this.isSortable = computed(() => !!this.clrTtSortBy(), ...(ngDevMode ? [{ debugName: "isSortable" }] : /* istanbul ignore next */ []));
         this.sortDirection = computed(() => {
             const order = this._internalSortOrder();
@@ -4619,11 +4798,6 @@ class ClrTreetableColumn {
                     break;
             }
         });
-        // Emit sort order changes of the column
-        effect(() => {
-            const internalSortOrder = this._internalSortOrder();
-            this.clrTtSortOrderChange.emit(internalSortOrder);
-        });
     }
     sort(reverse) {
         const comparator = this.clrTtSortBy();
@@ -4632,8 +4806,8 @@ class ClrTreetableColumn {
         }
         this._sort.toggle(comparator, reverse);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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], ngImport: i0, template: `
+    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: `
     @if (isSortable()) {
     <button type="button" class="treetable-column-title" data-testId="clrTtSortButton" (click)="sort()">
       <ng-container *ngTemplateOutlet="columnTitle" />
@@ -4660,7 +4834,7 @@ 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.13", ngImport: i0, type: ClrTreetableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableColumn, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-column',
@@ -4699,7 +4873,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [], propDecorators: { clrTtSortBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortBy", required: false }] }], clrTtSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortOrder", required: false }] }], clrTtSortOrderChange: [{ type: i0.Output, args: ["clrTtSortOrderChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { _columnTitleRef: [{ type: i0.ViewChild, args: ['columnTitle', { ...{ read: TemplateRef }, isSignal: true }] }], clrTtSortBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortBy", required: false }] }], clrTtSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortOrder", required: false }] }], clrTtSortOrderChange: [{ type: i0.Output, args: ["clrTtSortOrderChange"] }] } });
+
+let id = 0;
+class ClrTreetableColumnManagerMenuComponent {
+    constructor() {
+        this.popoverId = `clr-column-manager-menu-id-${id++}`;
+        this._commonStringsService = inject(ClrCommonStringsService);
+        this._popoverService = inject(ClrPopoverService);
+        this._columnService = inject(TreetableColumnStateService);
+        // Template constants
+        this.popoverPosition = ClrPopoverPosition.TOP_LEFT;
+        this.popoverType = ClrPopoverType.DROPDOWN;
+        this.commonStrings = this._commonStringsService.keys;
+        this.resetLabel = input.required(...(ngDevMode ? [{ debugName: "resetLabel" }] : /* istanbul ignore next */ []));
+        this.open = toSignal(this._popoverService.openChange);
+        this.hideableColumns = this._columnService.hideableColumns;
+        this.hasOnlyOneVisibleColumn = computed(() => this._columnService.columns().length === this._columnService.hideableColumns().length &&
+            this._columnService.visibleColumns().length === 1, ...(ngDevMode ? [{ debugName: "hasOnlyOneVisibleColumn" }] : /* istanbul ignore next */ []));
+        this.areAllColumnsVisible = computed(() => this._columnService.visibleColumns().length === this._columnService.columns().length, ...(ngDevMode ? [{ debugName: "areAllColumnsVisible" }] : /* istanbul ignore next */ []));
+        this.areAllColumnsReset = computed(() => this._columnService.hideableColumns().every(column => column.hidden === column.initialHidden), ...(ngDevMode ? [{ debugName: "areAllColumnsReset" }] : /* istanbul ignore next */ []));
+    }
+    toggleColumnState(id) {
+        this._columnService.toggleHidden(id);
+    }
+    selectAll() {
+        if (!this.areAllColumnsVisible()) {
+            this._columnService.displayAllColumns();
+        }
+    }
+    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: `
+    <button
+      role="button"
+      type="button"
+      class="btn btn-sm column-manager-menu-open"
+      clrPopoverOrigin
+      clrPopoverOpenCloseButton
+      [attr.aria-controls]="popoverId"
+      [attr.aria-expanded]="open()"
+      [attr.aria-haspopup]="'menu'"
+    >
+      {{ commonStrings.pickColumns }}
+    </button>
+    <div
+      class="column-switch"
+      role="dialog"
+      [attr.aria-label]="commonStrings.showColumnsMenuDescription"
+      [id]="popoverId"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+      *clrPopoverContent="
+        open();
+        at: popoverPosition;
+        type: popoverType;
+        outsideClickToClose: true;
+        scrollToClose: true
+      "
+    >
+      <div class="switch-header">
+        <div class="clr-sr-only" tabindex="-1" #allSelected>{{ commonStrings.allColumnsSelected }}</div>
+        <h2>{{ commonStrings.showColumns }}</h2>
+        <button
+          class="btn btn-sm btn-link-neutral toggle-switch-close-button"
+          clrPopoverCloseButton
+          type="button"
+          [attr.aria-label]="commonStrings.close"
+        >
+          <cds-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.close"></cds-icon>
+          <span class="clr-sr-only">{{ commonStrings.close }}</span>
+        </button>
+      </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>
+        }
+      </ul>
+      <div class="switch-footer">
+        <button
+          type="button"
+          class="btn btn-sm btn-link switch-button"
+          [disabled]="areAllColumnsVisible()"
+          (click)="selectAll()"
+        >
+          {{ commonStrings.selectAll }}
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-link switch-button"
+          [disabled]="areAllColumnsReset()"
+          (click)="resetAllToInitial()"
+        >
+          {{ resetLabel() }}
+        </button>
+      </div>
+    </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: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-tt-column-manager-menu',
+                    template: `
+    <button
+      role="button"
+      type="button"
+      class="btn btn-sm column-manager-menu-open"
+      clrPopoverOrigin
+      clrPopoverOpenCloseButton
+      [attr.aria-controls]="popoverId"
+      [attr.aria-expanded]="open()"
+      [attr.aria-haspopup]="'menu'"
+    >
+      {{ commonStrings.pickColumns }}
+    </button>
+    <div
+      class="column-switch"
+      role="dialog"
+      [attr.aria-label]="commonStrings.showColumnsMenuDescription"
+      [id]="popoverId"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+      *clrPopoverContent="
+        open();
+        at: popoverPosition;
+        type: popoverType;
+        outsideClickToClose: true;
+        scrollToClose: true
+      "
+    >
+      <div class="switch-header">
+        <div class="clr-sr-only" tabindex="-1" #allSelected>{{ commonStrings.allColumnsSelected }}</div>
+        <h2>{{ commonStrings.showColumns }}</h2>
+        <button
+          class="btn btn-sm btn-link-neutral toggle-switch-close-button"
+          clrPopoverCloseButton
+          type="button"
+          [attr.aria-label]="commonStrings.close"
+        >
+          <cds-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.close"></cds-icon>
+          <span class="clr-sr-only">{{ commonStrings.close }}</span>
+        </button>
+      </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>
+        }
+      </ul>
+      <div class="switch-footer">
+        <button
+          type="button"
+          class="btn btn-sm btn-link switch-button"
+          [disabled]="areAllColumnsVisible()"
+          (click)="selectAll()"
+        >
+          {{ commonStrings.selectAll }}
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-link switch-button"
+          [disabled]="areAllColumnsReset()"
+          (click)="resetAllToInitial()"
+        >
+          {{ resetLabel() }}
+        </button>
+      </div>
+    </div>
+  `,
+                    host: {
+                        '[class.column-manager-menu]': 'true',
+                        '[class.active]': 'open()',
+                    },
+                    hostDirectives: [ClrPopoverHostDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                }]
+        }], propDecorators: { resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: true }] }] } });
+
+class ClrTreetableFooter {
+    constructor() {
+        this._commonStringsService = inject(ClrCommonStringsService);
+        this._columnService = inject(TreetableColumnStateService);
+        this._dataService = inject(TreetableDataStateService);
+        this.commonStrings = this._commonStringsService.keys;
+        this.clrResetLabel = input('RESET', ...(ngDevMode ? [{ debugName: "clrResetLabel" }] : /* istanbul ignore next */ []));
+        this.hasHideableColumns = this._columnService.hasHideableColumns;
+        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: `
+    @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="treetable-footer-description">
+      <ng-content />
+    </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: [{
+            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="treetable-footer-description">
+      <ng-content />
+    </div>
+  `,
+                    host: {
+                        '[class.treetable-footer]': 'true',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                }]
+        }], propDecorators: { clrResetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrResetLabel", required: false }] }] } });
+
+/*
+ * 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.
+ */
+/**
+ * A structural directive meant to be used inside a clr-tt-column component.
+ *
+ * @example
+ * <clr-tt-column>
+ *   <ng-container *clrTtHideableColumn="{ hidden: true }">
+ *     User ID
+ *   </ng-container>
+ * </clr-tt-column>
+ *
+ * It sets up state and properties so that columns can be managed for hide/show
+ * by a service and the column manager menu component.
+ *
+ * The structural directive captures its content as a TemplateRef (without ng-content),
+ * which allows it to be safely instantiated in multiple places (header + menu).
+ */
+class ClrTreetableHideableColumn {
+    constructor() {
+        this._titleTemplateRef = inject(TemplateRef);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._columnState = inject(TreetableColumnStateService);
+        this._column = inject(ClrTreetableColumn);
+        this.clrTtHideableColumn = input('', ...(ngDevMode ? [{ debugName: "clrTtHideableColumn" }] : /* istanbul ignore next */ []));
+        this.clrTtHiddenChange = output();
+        this.resolvedHidden = computed(() => {
+            const value = this.clrTtHideableColumn();
+            if (typeof value === 'string') {
+                return { hidden: false, initialHidden: false };
+            }
+            const hidden = value?.hidden ?? false;
+            return { hidden: hidden, initialHidden: value?.initial ?? hidden };
+        }, ...(ngDevMode ? [{ debugName: "resolvedHidden" }] : /* istanbul ignore next */ []));
+        // Render the content in-place (inside the column header)
+        this._viewContainerRef.createEmbeddedView(this._titleTemplateRef);
+        // React to input changes after initial registration (skip the first emission handled by ngOnInit)
+        toObservable(this.resolvedHidden)
+            .pipe(skip$1(1), takeUntilDestroyed())
+            .subscribe(value => {
+            this._columnState.changeHideable(this._column.columnId, true, value.hidden);
+        });
+    }
+    ngOnInit() {
+        // Register the hideable state with the titleTemplateRef that does NOT contain <ng-content>
+        const resolvedHidden = this.resolvedHidden();
+        this._columnState.registerHideable(this._column.columnId, {
+            hideable: true,
+            hidden: resolvedHidden.hidden,
+            initialHidden: resolvedHidden.initialHidden,
+            titleTemplateRef: this._titleTemplateRef,
+        });
+    }
+    ngOnDestroy() {
+        // 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableHideableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrTtHideableColumn]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [], propDecorators: { clrTtHideableColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtHideableColumn", required: false }] }], clrTtHiddenChange: [{ type: i0.Output, args: ["clrTtHiddenChange"] }] } });
 
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
@@ -4708,14 +5216,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  */
 class ClrTreetableFilter {
     constructor() {
-        this.commonStringsService = inject(ClrCommonStringsService);
-        this.smartToggleService = inject(ClrPopoverService);
-        this.filterProvider = inject((Filters));
-        // Smart Popover
-        this.smartPosition = ClrPopoverPosition.BOTTOM_LEFT;
+        this._commonStringsService = inject(ClrCommonStringsService);
+        this._popoverService = inject(ClrPopoverService);
+        this.filterProvider = inject((FilterStateService));
+        // Template constants
+        this.popoverPosition = ClrPopoverPosition.BOTTOM_LEFT;
+        this.commonStrings = this._commonStringsService.keys;
         this.clrTtFilter = input.required(...(ngDevMode ? [{ debugName: "clrTtFilter" }] : /* istanbul ignore next */ []));
         this.registered = signal(undefined, ...(ngDevMode ? [{ debugName: "registered" }] : /* istanbul ignore next */ []));
-        this.open = toSignal(this.smartToggleService.openChange);
+        this.open = toSignal(this._popoverService.openChange);
         this.active = computed(() => this.clrTtFilter()?.isActive(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
@@ -4726,8 +5235,8 @@ class ClrTreetableFilter {
             this.registered().unregister();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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.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: `
     <button
       type="button"
       clrPopoverOrigin
@@ -4749,20 +5258,20 @@ class ClrTreetableFilter {
       class="treetable-filter"
       role="dialog"
       cdkTrapFocus
-      *clrPopoverContent="open(); at: smartPosition; outsideClickToClose: true; scrollToClose: true"
-      [attr.aria-label]="commonStringsService.keys.datagridFilterDialogAriaLabel"
+      *clrPopoverContent="open(); at: popoverPosition; outsideClickToClose: true; scrollToClose: true"
+      [attr.aria-label]="commonStrings.datagridFilterDialogAriaLabel"
     >
       <div class="treetable-filter-close-wrapper">
         <button type="button" class="close" clrPopoverCloseButton>
-          <cds-icon shape="window-close" [attr.aria-label]="commonStringsService.keys.close"></cds-icon>
+          <cds-icon shape="window-close" [attr.aria-label]="commonStrings.close"></cds-icon>
         </button>
       </div>
 
       <ng-content></ng-content>
     </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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.13", ngImport: i0, type: ClrTreetableFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-filter',
@@ -4788,12 +5297,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
       class="treetable-filter"
       role="dialog"
       cdkTrapFocus
-      *clrPopoverContent="open(); at: smartPosition; outsideClickToClose: true; scrollToClose: true"
-      [attr.aria-label]="commonStringsService.keys.datagridFilterDialogAriaLabel"
+      *clrPopoverContent="open(); at: popoverPosition; outsideClickToClose: true; scrollToClose: true"
+      [attr.aria-label]="commonStrings.datagridFilterDialogAriaLabel"
     >
       <div class="treetable-filter-close-wrapper">
         <button type="button" class="close" clrPopoverCloseButton>
-          <cds-icon shape="window-close" [attr.aria-label]="commonStringsService.keys.close"></cds-icon>
+          <cds-icon shape="window-close" [attr.aria-label]="commonStrings.close"></cds-icon>
         </button>
       </div>
 
@@ -4811,10 +5320,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableCell, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-cell',
@@ -4834,15 +5343,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrTreetablePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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: `
     <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.13", ngImport: i0, type: ClrTreetablePlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetablePlaceholder, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-placeholder',
@@ -4858,28 +5367,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }] });
 
+/**
+ * The CSS class to use to hide a column and its related cells in the treetable.
+ */
+const HIDDEN_COLUMN_CSS_CLASS = 'treetable-hidden-column';
+
 /*
- * 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.
  */
 class TreetableHeaderRenderer {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
     }
     /**
      * Returns the client width of the header cell.
      */
     getWidth() {
-        return this.el.nativeElement.clientWidth;
+        return this.elementRef.nativeElement.clientWidth;
+    }
+    hide() {
+        this.renderer.addClass(this.elementRef.nativeElement, HIDDEN_COLUMN_CSS_CLASS);
+    }
+    show() {
+        const element = this.elementRef.nativeElement;
+        if (element.classList.contains(HIDDEN_COLUMN_CSS_CLASS)) {
+            this.renderer.removeClass(element, HIDDEN_COLUMN_CSS_CLASS);
+        }
     }
     /**
      * Returns all classes starting with 'clr-col'.
      */
     getColumnClasses() {
         const classes = [];
-        this.el.nativeElement.classList.forEach((className) => {
+        this.elementRef.nativeElement.classList.forEach((className) => {
             if (className.indexOf('clr-col') !== -1) {
                 classes.push(className);
             }
@@ -4887,167 +5410,253 @@ class TreetableHeaderRenderer {
         return classes;
     }
     setDefaultColumnClass() {
-        this.renderer.addClass(this.el.nativeElement, 'clr-col');
+        this.renderer.addClass(this.elementRef.nativeElement, 'clr-col');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableHeaderRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: TreetableHeaderRenderer, isStandalone: false, selector: "clr-tt-column", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableHeaderRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableHeaderRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-tt-column',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
 /*
- * 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.
  */
 class TreetableCellRenderer {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
     }
     setColumnClasses(columnClasses) {
         columnClasses.forEach((className) => {
-            this.renderer.addClass(this.el.nativeElement, className);
+            this.renderer.addClass(this.elementRef.nativeElement, className);
         });
     }
+    hide() {
+        this.renderer.addClass(this.elementRef.nativeElement, HIDDEN_COLUMN_CSS_CLASS);
+    }
+    show() {
+        const element = this.elementRef.nativeElement;
+        if (element.classList.contains(HIDDEN_COLUMN_CSS_CLASS)) {
+            this.renderer.removeClass(element, HIDDEN_COLUMN_CSS_CLASS);
+        }
+    }
     setMaxWidth(maxWidth) {
-        this.renderer.setStyle(this.el.nativeElement, 'max-width', maxWidth + 'px');
+        this.renderer.setStyle(this.elementRef.nativeElement, 'max-width', maxWidth + 'px');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableCellRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: TreetableCellRenderer, isStandalone: false, selector: "clr-tt-cell", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableCellRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableCellRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-tt-cell',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
 /*
- * 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.
  */
 class TreetableRowRenderer {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableRowRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: TreetableRowRenderer, isStandalone: false, selector: "clr-tt-row", queries: [{ propertyName: "cells", predicate: TreetableCellRenderer }], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableRowRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableRowRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-tt-row',
                     standalone: false,
                 }]
-        }], propDecorators: { cells: [{
-                type: ContentChildren,
-                args: [TreetableCellRenderer]
-            }] } });
+        }], propDecorators: { cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TreetableCellRenderer), { isSignal: true }] }] } });
 
 /*
- * 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.
  */
 class TreetableMainRenderer {
     constructor() {
-        this.shouldStabilizeColumn = true;
-    }
-    ngOnInit() {
+        this._columnState = inject(TreetableColumnStateService);
+        this.headers = contentChildren(TreetableHeaderRenderer, ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
+        this.rows = contentChildren(TreetableRowRenderer, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), descendants: true });
+        this.columns = contentChildren(ClrTreetableColumn, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.rules = [
+            this.createClassesRule(),
+            this.createFirstColumnWidthRule(),
+            this.createDisplayRule(),
+        ];
         fromEvent(window, 'resize')
-            .pipe(debounceTime(200))
-            .subscribe(() => this.applyMaxWidth());
-    }
-    ngAfterContentInit() {
-        this.headers.changes.subscribe(() => {
-            this.shouldStabilizeColumn = true;
+            .pipe(debounceTime(200), takeUntilDestroyed())
+            .subscribe(() => this.renderRuleByKey('first-column-width', this.headers(), this.rows()));
+        afterRenderEffect(() => {
+            const headers = this.headers();
+            const rows = this.rows();
+            if (headers.length > 0) {
+                this.renderAllRules(headers, rows);
+            }
         });
-        this.rows.changes.subscribe(() => {
-            this.shouldStabilizeColumn = true;
+        this._columnState.changes$.pipe(takeUntilDestroyed()).subscribe(event => {
+            const headers = this.headers();
+            const rows = this.rows();
+            switch (event) {
+                case TreetableColumnUpdate.HIDDEN:
+                    this.renderRulesByKeys(['display', 'first-column-width'], headers, rows);
+                    break;
+                case TreetableColumnUpdate.RESET_HIDDEN:
+                    this.renderAllRules(headers, rows); // resetHidden etc.
+                    break;
+                case TreetableColumnUpdate.WIDTH:
+                    this.renderRuleByKey('first-column-width', headers, rows);
+                    break;
+                default:
+                    this.renderAllRules(headers, rows);
+            }
         });
-    }
-    ngAfterViewChecked() {
-        if (this.shouldStabilizeColumn) {
-            this.applyColumnClasses();
-            setTimeout(() => {
-                this.applyMaxWidth();
-            }, 10);
-        }
+        toObservable(this.columns)
+            .pipe(first())
+            .subscribe(columns => this.initializeColumnOrder(columns));
     }
     /**
-     * Applies css column class to every header and cell.
+     * Initializes the index order of the columns as they are rendered.
      */
-    applyColumnClasses() {
-        this.shouldStabilizeColumn = false;
-        const headersArray = this.headers.toArray();
-        const rowsArray = this.rows.toArray();
-        headersArray.forEach((header, headerIndex) => {
-            const columnClasses = header.getColumnClasses();
-            if (columnClasses.length === 0) {
-                header.setDefaultColumnClass();
-                rowsArray.forEach(row => {
-                    // set every child cell of the same index to default class
-                    const cell = row.cells.find((_c, cellIndex) => cellIndex === headerIndex);
-                    if (cell) {
-                        cell.setColumnClasses(['clr-col']);
-                    }
-                });
-            }
-            else {
-                // set every child cell of the same index to the same class
-                // we do not allow overriding column width on a per cell basis different to the header.
-                rowsArray.forEach(row => {
-                    const cell = row.cells.find((_c, cellIndex) => cellIndex === headerIndex);
-                    if (cell) {
-                        cell.setColumnClasses(columnClasses);
-                    }
-                });
-            }
-        });
-    }
-    applyMaxWidth() {
-        if (this.headers.first) {
-            const maxWidth = this.headers.first.getWidth();
-            if (maxWidth === 0) {
-                // If the max width is zero, call this in a timeout to be able to retrieve the client rendered value
-                setTimeout(() => {
-                    this.applyMaxWidthOnEachRow(this.headers.first.getWidth());
-                }, 100);
+    initializeColumnOrder(columns) {
+        const idsInOrder = columns.map(column => column.columnId);
+        this._columnState.initializeOrder(idsInOrder);
+    }
+    renderAllRules(headers, rows) {
+        this.render(this.rules, headers, rows);
+    }
+    renderRuleByKey(key, headers, rows) {
+        this.renderRulesByKeys([key], headers, rows);
+    }
+    renderRulesByKeys(keys, headers, rows) {
+        const keySet = new Set(keys);
+        const activeRules = this.rules.filter(rule => keySet.has(rule.key));
+        this.render(activeRules, headers, rows);
+    }
+    render(activeRules, headers, rows) {
+        const columnStates = this._columnState.columns();
+        const statesByIdx = new Map(columnStates.map(state => [state.columnIndex, state]));
+        const firstVisibleIndex = headers.findIndex((_, idx) => !statesByIdx.get(idx)?.hidden);
+        const contexts = headers.map((header, idx) => ({
+            index: idx,
+            isFirstVisible: idx === firstVisibleIndex,
+            header,
+            state: statesByIdx.get(idx),
+        }));
+        const unstableLayoutRules = activeRules.filter(r => r.layoutPhase === 'unstable');
+        const stableLayoutRules = activeRules.filter(r => r.layoutPhase === 'stable');
+        // Phase 1: apply all DOM-mutating rules (classes, display)
+        if (unstableLayoutRules.length) {
+            this.applyRules(unstableLayoutRules, contexts, rows);
+        }
+        // Phase 2: stable - apply all DOM-reading rules (browser reflows on first read after mutations)
+        if (stableLayoutRules.length) {
+            this.applyRules(stableLayoutRules, contexts, rows);
+        }
+    }
+    applyRules(activeRules, contexts, rows) {
+        for (const ctx of contexts) {
+            const preparedRules = activeRules
+                .map(rule => ({ rule, data: rule.prepareData(ctx) }))
+                .filter((x) => x.data !== null);
+            if (ctx.header) {
+                for (const { rule, data } of preparedRules) {
+                    rule.applyHeader?.(ctx.header, data, ctx);
+                }
             }
-            else {
-                this.applyMaxWidthOnEachRow(maxWidth);
+            for (const row of rows) {
+                const cell = row.cells()[ctx.index];
+                if (!cell) {
+                    continue;
+                }
+                for (const { rule, data } of preparedRules) {
+                    rule.applyCell?.(cell, data, ctx);
+                }
             }
         }
     }
-    applyMaxWidthOnEachRow(maxWidth) {
-        this.rows.forEach(row => {
-            row.cells.first.setMaxWidth(maxWidth);
-        });
+    createClassesRule() {
+        return {
+            key: 'classes',
+            layoutPhase: 'unstable',
+            prepareData: ctx => {
+                if (!ctx.header) {
+                    return null;
+                }
+                const classes = ctx.header.getColumnClasses();
+                return { classes: classes.length ? classes : ['clr-col'], useDefault: classes.length === 0 };
+            },
+            applyHeader: (header, data) => {
+                if (data.useDefault) {
+                    header.setDefaultColumnClass();
+                }
+            },
+            applyCell: (cell, data) => {
+                cell.setColumnClasses(data.classes);
+            },
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableMainRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: TreetableMainRenderer, isStandalone: false, selector: "clr-treetable", queries: [{ propertyName: "headers", predicate: TreetableHeaderRenderer }, { propertyName: "rows", predicate: TreetableRowRenderer, descendants: true }, { propertyName: "columns", predicate: ClrTreetableColumn }], ngImport: i0 }); }
+    createFirstColumnWidthRule() {
+        return {
+            key: 'first-column-width',
+            layoutPhase: 'stable',
+            prepareData: ctx => {
+                if (!ctx.isFirstVisible || !ctx.header) {
+                    return null;
+                }
+                return { width: ctx.header.getWidth() };
+            },
+            applyCell: (cell, data) => {
+                cell.setMaxWidth(data.width);
+            },
+        };
+    }
+    createDisplayRule() {
+        return {
+            key: 'display',
+            layoutPhase: 'unstable',
+            prepareData: ctx => ({ hidden: !!ctx.state?.hidden }),
+            applyHeader: (header, data) => {
+                if (data.hidden) {
+                    header.hide();
+                }
+                else {
+                    header.show();
+                }
+            },
+            applyCell: (cell, data) => {
+                if (data.hidden) {
+                    cell.hide();
+                }
+                else {
+                    cell.show();
+                }
+            },
+        };
+    }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableMainRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableMainRenderer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'clr-treetable',
                     standalone: false,
                 }]
-        }], propDecorators: { headers: [{
-                type: ContentChildren,
-                args: [TreetableHeaderRenderer]
-            }], rows: [{
-                type: ContentChildren,
-                args: [TreetableRowRenderer, { descendants: true }]
-            }], columns: [{
-                type: ContentChildren,
-                args: [ClrTreetableColumn]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { headers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TreetableHeaderRenderer), { isSignal: true }] }], rows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TreetableRowRenderer), { ...{ descendants: true }, isSignal: true }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClrTreetableColumn), { isSignal: true }] }] } });
 
 /*
  * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
@@ -5079,10 +5688,10 @@ class TreetableItemsDirective {
     ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableItemsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreetableItemsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableItemsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrTtItems][clrTtItemsOf]',
@@ -5144,8 +5753,8 @@ class ClrTreetableStringFilter {
     inputChanged(value) {
         this._textChange$.next(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableStringFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", 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.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: `
     <clr-tt-filter [clrTtFilter]="this">
       <button
         class="btn btn-sm btn-icon btn-link btn-trash"
@@ -5172,7 +5781,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.13", ngImport: i0, type: ClrTreetableStringFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableStringFilter, decorators: [{
             type: Component,
             args: [{ selector: 'clr-tt-string-filter', template: `
     <clr-tt-filter [clrTtFilter]="this">
@@ -5212,6 +5821,8 @@ const CLR_TREETABLE_DIRECTIVES = [
     ClrTreetableRow,
     ClrTreetableCell,
     ClrTreetableColumn,
+    ClrTreetableHideableColumn,
+    ClrTreetableFooter,
     ClrTreetablePlaceholder,
     ClrTreetableActionOverflow,
     TreetableMainRenderer,
@@ -5226,11 +5837,13 @@ class ClrTreetableModule {
     constructor() {
         ClarityIcons.addIcons(angleIcon, arrowIcon, ellipsisVerticalIcon, filterGridCircleIcon, filterGridIcon);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableModule, declarations: [ClrTreetable,
+    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,
             ClrTreetableRow,
             ClrTreetableCell,
             ClrTreetableColumn,
+            ClrTreetableHideableColumn,
+            ClrTreetableFooter,
             ClrTreetablePlaceholder,
             ClrTreetableActionOverflow,
             TreetableMainRenderer,
@@ -5239,10 +5852,14 @@ class ClrTreetableModule {
             TreetableCellRenderer,
             TreetableItemsDirective,
             ClrTreetableFilter,
-            ClrTreetableStringFilter, ClrTreetableRecursiveRows, ClrTreetableRowCheckbox], imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule], exports: [ClrTreetable,
+            ClrTreetableStringFilter, ClrTreetableRecursiveRows,
+            ClrTreetableRowCheckbox,
+            ClrTreetableColumnManagerMenuComponent], imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule], exports: [ClrTreetable,
             ClrTreetableRow,
             ClrTreetableCell,
             ClrTreetableColumn,
+            ClrTreetableHideableColumn,
+            ClrTreetableFooter,
             ClrTreetablePlaceholder,
             ClrTreetableActionOverflow,
             TreetableMainRenderer,
@@ -5252,13 +5869,18 @@ class ClrTreetableModule {
             TreetableItemsDirective,
             ClrTreetableFilter,
             ClrTreetableStringFilter] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTreetableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule],
-                    declarations: [CLR_TREETABLE_DIRECTIVES, ClrTreetableRecursiveRows, ClrTreetableRowCheckbox],
+                    imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule],
+                    declarations: [
+                        CLR_TREETABLE_DIRECTIVES,
+                        ClrTreetableRecursiveRows,
+                        ClrTreetableRowCheckbox,
+                        ClrTreetableColumnManagerMenuComponent,
+                    ],
                     exports: [CLR_TREETABLE_DIRECTIVES],
                 }]
         }], ctorParameters: () => [] });
@@ -5282,7 +5904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.
  */
@@ -5356,8 +5978,8 @@ class ClrViewEditSection {
             this.toggleCollapsed(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrViewEditSection, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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: [
             trigger('collapseExpandAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0, overflow: 'hidden' }),
@@ -5376,7 +5998,7 @@ class ClrViewEditSection {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrViewEditSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrViewEditSection, decorators: [{
             type: Component,
             args: [{ selector: 'clr-view-edit-section', animations: [
                         trigger('collapseExpandAnimation', [
@@ -5455,11 +6077,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrViewEditSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrViewEditSectionModule, imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrViewEditSectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrViewEditSectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule, ClrFormsModule],
@@ -5578,10 +6200,10 @@ class ClrHistoryService {
         domain.shift();
         return domain.join('.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrHistoryService, deps: [{ token: HISTORY_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrHistoryService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrHistoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -5641,10 +6263,10 @@ class ClrHistory {
     togglePinHistory() {
         this.historyService.setHistoryPinned(this.username, !this.pinActivated);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrHistory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -5716,10 +6338,10 @@ class ClrHistoryPinned {
     ngOnDestroy() {
         this.settingsSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrHistoryPinned, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -5777,10 +6399,10 @@ class ClrHistoryHttpImplService {
         }
         return url;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrHistoryHttpImplService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrHistoryHttpImplService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryHttpImplService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -5793,16 +6415,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrHistoryModule, providers: [
+    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: [
             {
                 provide: HISTORY_TOKEN,
                 useClass: ClrHistoryHttpImplService,
             },
         ], imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrHistoryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrHistoryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule],
@@ -5829,10 +6451,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrAutocompleteOff, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAutocompleteOff, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAutocompleteOff, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input:not([autocomplete])',
@@ -5849,11 +6471,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrAutocompleteOffModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrAutocompleteOffModule, declarations: [ClrAutocompleteOff], exports: [ClrAutocompleteOff] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAutocompleteOffModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAutocompleteOffModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrAutocompleteOff],
@@ -11411,10 +12033,10 @@ class ClrBrandAvatar {
         output = output.replace('Š', 'S');
         return output;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBrandAvatar, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBrandAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -11437,11 +12059,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrBrandAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrBrandAvatarModule, declarations: [ClrBrandAvatar], imports: [CommonModule, ClarityModule], exports: [ClrBrandAvatar] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBrandAvatarModule, imports: [CommonModule, ClarityModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrBrandAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrBrandAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule],
@@ -11558,10 +12180,10 @@ class ClrAddonsLabel {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", type: ClrAddonsLabel, isStandalone: false, selector: "label", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAddonsLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: 'label',
@@ -11619,10 +12241,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.13", ngImport: i0, type: LocationBarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LocationBarSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -11745,10 +12367,10 @@ class LocationBarNodeComponent {
         }
         this.searchItemChanged.emit(searchedItem);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -11799,10 +12421,10 @@ class LocationBarComponent {
     onSelectionChanged(selection) {
         this.selectionChanged.emit(selection);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LocationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LocationBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -11834,11 +12456,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrFormModule, declarations: [ClrAddonsLabel], exports: [ClrAddonsLabel] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrAddonsLabel],
@@ -11847,8 +12469,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }] });
 
 class ClrLocationBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrLocationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent, LocationBarSearchComponent], imports: [CommonModule,
+    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,
             ClrIcon,
             ClrDropdownModule,
             ClrDropdownOverflowModule,
@@ -11858,7 +12480,7 @@ class ClrLocationBarModule {
             ClrFormModule,
             ClrSearchFieldModule,
             ReactiveFormsModule], exports: [LocationBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrLocationBarModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLocationBarModule, imports: [CommonModule,
             ClrIcon,
             ClrDropdownModule,
             ClrDropdownOverflowModule,
@@ -11869,7 +12491,7 @@ class ClrLocationBarModule {
             ClrSearchFieldModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrLocationBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrLocationBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LocationBarComponent, LocationBarNodeComponent, LocationBarSearchComponent],
@@ -11893,10 +12515,10 @@ class DatagridFieldDirective {
     getFieldName() {
         return this.clrDgField ?? this.clrDgFieldKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DatagridFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DatagridFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatagridFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDgField],[clrDgFieldKey]',
@@ -11980,10 +12602,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.13", ngImport: i0, type: DatagridColumnReorderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DatagridColumnReorderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatagridColumnReorderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDatagridColumnReorder]',
@@ -12009,8 +12631,8 @@ 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.13", ngImport: i0, type: DynamicCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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: `
     @if (col().component) {
     <ng-container *ngComponentOutlet="col().component; inputs: { item: item() }" />
     } @else if (col().template) {
@@ -12024,7 +12646,7 @@ class DynamicCellContentComponent {
     }
   `, 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.13", ngImport: i0, type: DynamicCellContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicCellContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-dynamic-cell-content',
@@ -12047,11 +12669,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrDatagridColumnReorderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDatagridColumnReorderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridColumnReorderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DatagridColumnReorderDirective, DynamicCellContentComponent],
@@ -12370,10 +12992,10 @@ class StatePersistenceKeyDirective {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: StatePersistenceKeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrStatePersistenceKey]',
@@ -12464,10 +13086,10 @@ class ColumnHiddenStatePersistenceDirective {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", type: ColumnHiddenStatePersistenceDirective, isStandalone: false, selector: "[clrDgHideableColumn]", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnHiddenStatePersistenceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDgHideableColumn]',
@@ -12480,11 +13102,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }] }, { type: i1$2.ClrDatagrid }, { type: i1$2.ClrDatagridHideableColumn }] });
 
 class ClrDatagridStatePersistenceModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDatagridStatePersistenceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrDatagridStatePersistenceModule, declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective], exports: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDatagridStatePersistenceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDatagridStatePersistenceModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ColumnHiddenStatePersistenceDirective, DatagridFieldDirective, StatePersistenceKeyDirective],
@@ -12611,10 +13233,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.13", 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.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrEnumFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -12633,11 +13255,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             }] } });
 
 class ClrEnumFilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrEnumFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrEnumFilterModule, declarations: [ClrEnumFilterComponent], imports: [ClarityModule, CommonModule, FormsModule], exports: [ClrEnumFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrEnumFilterModule, imports: [ClarityModule, CommonModule, FormsModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrEnumFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrEnumFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ClarityModule, CommonModule, FormsModule],
@@ -12855,10 +13477,10 @@ class ClrDateFilterComponent {
             this.valError = this._from > this._to;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -12883,11 +13505,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             }] } });
 
 class ClrDateFilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDateFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrDateFilterModule, imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDateFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDateFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule],
@@ -13076,10 +13698,10 @@ class ClrDatepickerComponent {
     focus() {
         this.inputElm.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -13152,10 +13774,10 @@ class DaterangeControlStateService {
             this.statusChange.emit(this._invalid);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeControlStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeControlStateService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeControlStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeControlStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -13493,10 +14115,10 @@ class DaterangeParsingService {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeParsingService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeParsingService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeParsingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeParsingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -13563,10 +14185,10 @@ class DaterangeService {
             this._selectedDaterange.from == null ||
             this._selectedDaterange.to == null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DaterangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DaterangeService, decorators: [{
             type: Injectable
         }] });
 
@@ -13641,10 +14263,10 @@ class ClrAbstractContainer {
         this.daterangeControlStateService = daterangeControlStateService;
         this.isFormControl = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAbstractContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAbstractContainer, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1$2.ClrLayout, decorators: [{
                     type: Optional
@@ -13939,10 +14561,10 @@ class ClrDaterangepickerDirective {
             }, true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker]',
@@ -14021,10 +14643,10 @@ class ClrTimepickerComponent {
     focus() {
         this.inputElm.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -14259,10 +14881,10 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
             toTime: value,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangepickerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -14365,10 +14987,10 @@ class ClrIfDaterangeErrorDirective {
             this.displayedContent = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", type: ClrIfDaterangeErrorDirective, isStandalone: false, selector: "[clrIfDaterangeError]", inputs: { clrIfDaterangeError: "clrIfDaterangeError" }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIfDaterangeErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfDaterangeErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrIfDaterangeError]',
@@ -14434,8 +15056,8 @@ class ClrDaterangeMaxValidator {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ClrDaterangeMaxValidator),
@@ -14443,7 +15065,7 @@ class ClrDaterangeMaxValidator {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangeMaxValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeMaxValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker][max], [clrDaterangeMax]',
@@ -14515,8 +15137,8 @@ class ClrDaterangeMinValidator {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ClrDaterangeMinValidator),
@@ -14524,7 +15146,7 @@ class ClrDaterangeMinValidator {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangeMinValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeMinValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker][min], [clrDaterangeMin]',
@@ -14597,8 +15219,8 @@ class ClrDaterangeOrderValidator {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangeOrderValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ClrDaterangeOrderValidator, isStandalone: false, selector: "[clrDaterangepicker], [clrDaterangeOrder]", inputs: { active: ["clrDaterangeOrder", "active"] }, providers: [
+    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: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ClrDaterangeOrderValidator),
@@ -14606,7 +15228,7 @@ class ClrDaterangeOrderValidator {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangeOrderValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeOrderValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker], [clrDaterangeOrder]',
@@ -14666,8 +15288,8 @@ class ClrDaterangeRequiredValidator {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangeRequiredValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => ClrDaterangeRequiredValidator),
@@ -14675,7 +15297,7 @@ class ClrDaterangeRequiredValidator {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangeRequiredValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangeRequiredValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrDaterangepicker][required], [clrDaterangeRequired]',
@@ -14694,8 +15316,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             }] } });
 
 class ClrDaterangepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangepickerModule, declarations: [ClrDatepickerComponent,
+    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,
             ClrDaterangeMaxValidator,
             ClrDaterangeMinValidator,
             ClrDaterangeOrderValidator,
@@ -14710,9 +15332,9 @@ class ClrDaterangepickerModule {
             ClrDaterangepickerDirective,
             ClrDaterangeRequiredValidator,
             ClrIfDaterangeErrorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangepickerModule, imports: [CommonModule, FormsModule, ClarityModule, ClrDatepickerModule, ClrIcon] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerModule, imports: [CommonModule, FormsModule, ClarityModule, ClrDatepickerModule, ClrIcon] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrDaterangepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrDaterangepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ClarityModule, ClrDatepickerModule, ClrIcon],
@@ -14800,10 +15422,10 @@ class ClrIfWarning {
             this.renderer.addClass(this.formContainer, 'clr-warning');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", type: ClrIfWarning, isStandalone: false, selector: "[clrIfWarning]", inputs: { clrIfWarning: "clrIfWarning" }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIfWarning, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfWarning, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrIfWarning]',
@@ -14815,11 +15437,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
 
 ClarityIcons.addIcons(exclamationTriangleIcon);
 class ClrIfWarningModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIfWarningModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrIfWarningModule, declarations: [ClrIfWarning], imports: [CommonModule], exports: [ClrIfWarning] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIfWarningModule, imports: [CommonModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrIfWarningModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrIfWarningModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrIfWarning],
@@ -14869,8 +15491,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.13", ngImport: i0, type: ClrActionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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: [
             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 }))]),
@@ -14881,7 +15503,7 @@ class ClrActionPanel {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrActionPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanel, decorators: [{
             type: Component,
             args: [{ selector: 'clr-action-panel', animations: [
                         trigger('slideIn', [
@@ -14909,8 +15531,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrActionPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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: `
     <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>
@@ -14918,7 +15540,7 @@ class ClrActionPanelContainer {
     <ng-content select="clr-action-panel"></ng-content>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrActionPanelContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-action-panel-container',
@@ -14943,10 +15565,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrActionPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrActionPanelContainerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelContainerContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-action-panel-container-content',
@@ -14964,10 +15586,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrActionPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrActionPanelContainerFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelContainerFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-action-panel-container-footer',
@@ -14985,14 +15607,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrActionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrActionPanelModule, declarations: [ClrActionPanel,
+    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,
             ClrActionPanelContainer,
             ClrActionPanelContainerContent,
             ClrActionPanelContainerFooter], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrActionPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrActionPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrActionPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, FormsModule],
@@ -15138,10 +15760,10 @@ class ClrReadonlyDirective {
         }
         return formattedValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrReadonlyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrReadonlyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrReadonly]',
@@ -15177,11 +15799,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             }] } });
 
 class ClrReadonlyDirectiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrReadonlyDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrReadonlyDirectiveModule, declarations: [ClrReadonlyDirective], exports: [ClrReadonlyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrReadonlyDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrReadonlyDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ClrReadonlyDirective],
@@ -15214,10 +15836,10 @@ class ClrFocusFirstInvalidFieldDirective {
             parentElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrFocusFirstInvalidFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrFocusFirstInvalidFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrFocusFirstInvalidFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[clrFocusFirstInvalidField]',
@@ -15263,10 +15885,10 @@ class ClrControlEnterSubmitDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrControlEnterSubmitDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrControlEnterSubmitDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[clrControlEnterSubmit]',
@@ -15408,10 +16030,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.13", ngImport: i0, type: ClrKeyboardNavCtrlArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrKeyboardNavCtrlArrowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrKeyboardNavCtrlArrowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrKeyboardNavCtrlArrow]',
@@ -15573,10 +16195,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.13", ngImport: i0, type: ClrKeyboardNavAltMnemonicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrKeyboardNavAltMnemonicDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrKeyboardNavAltMnemonicDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clrKeyboardNavAltMnemonic]',
@@ -15699,10 +16321,10 @@ class ClrImageCarousel {
             this.closeCarousel.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrImageCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrImageCarousel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -15762,10 +16384,10 @@ class ClrImageGallery {
             this.closeModal();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrImageGallery, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrImageGallery, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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 }] }] } });
@@ -15776,11 +16398,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrImageGalleryModule, imports: [CommonModule, ClarityModule] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrImageGalleryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrImageGalleryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClarityModule, NgOptimizedImage],
@@ -15801,8 +16423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ClrAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrAddonsModule, imports: [ClrFocusFirstInvalidFieldDirective,
+    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,
             ClrControlEnterSubmitDirective,
             ClrKeyboardNavCtrlArrowDirective,
             ClrKeyboardNavAltMnemonicDirective], exports: [ClrViewEditSectionModule,
@@ -15846,7 +16468,7 @@ class ClrAddonsModule {
             ClrKeyboardNavCtrlArrowDirective,
             ClrKeyboardNavAltMnemonicDirective,
             ClrImageGalleryModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
             ClrPagerModule,
             ClrDotPagerModule,
             ClrPagedSearchResultListModule,
@@ -15884,7 +16506,7 @@ class ClrAddonsModule {
             ClrDatagridColumnReorderModule,
             ClrImageGalleryModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrAddonsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrAddonsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -15974,10 +16596,10 @@ class ExportDatagridService {
         };
         this.zipcelx.default(config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ExportDatagridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ExportDatagridService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ExportDatagridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExportDatagridService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -16103,10 +16725,10 @@ class ExportDatagridButtonComponent {
         });
         return columnTitles;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ExportDatagridButtonComponent, deps: [{ token: ExportDatagridService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ExportDatagridButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -16114,11 +16736,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             }] } });
 
 class ClrExportDatagridButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrExportDatagridButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ClrExportDatagridButtonModule, imports: [ExportDatagridButtonComponent], exports: [ExportDatagridButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrExportDatagridButtonModule, providers: [ExportDatagridService], imports: [ExportDatagridButtonComponent] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrExportDatagridButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrExportDatagridButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ExportDatagridButtonComponent],
@@ -16231,10 +16853,10 @@ class ClrCopyToClipboard {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrCopyToClipboard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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()',
@@ -16487,10 +17109,10 @@ class ClrSummaryItemValue {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -16699,10 +17321,10 @@ class ClrSummaryItem {
             return !child.hasIcon && !!child.value()?.trim();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -16783,10 +17405,10 @@ class ClrSummaryAreaStateService {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryAreaStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryAreaStateService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryAreaStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrSummaryAreaStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -17113,10 +17735,10 @@ class ClrSummaryArea {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryArea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -17162,10 +17784,10 @@ class ClrSummaryAreaToggle {
         this.state.toggle(this.localStorageKey());
         this.summaryToggle.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryAreaToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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.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 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ClrSummaryAreaToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [{
@@ -17201,5 +17823,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CircleFilled, CircleHalfFilled, CircleQuarterFilled, CircleThreeQuartersFilled, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrControlEnterSubmitDirective, ClrCopyToClipboard, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridColumnReorderModule, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrExportDatagridButtonModule, ClrFlowBar, ClrFlowBarModule, ClrFocusFirstInvalidFieldDirective, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIconAvatar, ClrIconAvatarModule, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrImageCarousel, ClrImageGallery, ClrImageGalleryModule, ClrKeyboardNavAltMnemonicDirective, ClrKeyboardNavCtrlArrowDirective, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrReadonlyDirective, ClrReadonlyDirectiveModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrSummaryArea, ClrSummaryAreaStateService, ClrSummaryAreaToggle, ClrSummaryItem, ClrSummaryItemValue, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableFilter, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrTreetableSortOrder, ClrTreetableStringFilter, ClrTreetableTreeNode, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, CupraBrandShape, Customer, CustomerVip, CustomerVipCollection, CustomerWaiting, CustomerWaitingCollection, DATE, DELIMITER_REGEX, DWABrandShape, DatagridColumnReorderDirective, DatagridFieldDirective, DayModel, DeliveryDate, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DynamicCellContentComponent, EnergyShape, ExportDatagridButtonComponent, ExportDatagridService, ExportTypeEnum, ExternalPartForwardShape, FirstRegistrationDate, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HISTORY_TOKEN, HistoryProvider, InternalPartForwardShape, InvoiceReadyShape, InvoiceRecipient, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LocationBarComponent, LocationBarContentProvider, LocationBarNode, LogoCommissionModule, LogoCommissionModuleFavIcon, LogoCommissionModuleNegative, LogoCommissionModuleNegativeFavIcon, LogoCostApproval, LogoCostApprovalFavIcon, LogoCostApprovalNegative, LogoCostApprovalNegativeFavIcon, LogoCostControlling, LogoCostControllingFavIcon, LogoCostControllingNegative, LogoCostControllingNegativeFavIcon, LogoDigitalServiceReception, LogoDigitalServiceReceptionFavIcon, LogoDigitalServiceReceptionNegative, LogoDigitalServiceReceptionNegativeFavIcon, LogoDocFlow, LogoDocFlowFavIcon, LogoDocFlowNegative, LogoDocFlowNegativeFavIcon, LogoDocScan, LogoDocScanFavIcon, LogoDocScanNegative, LogoDocScanNegativeFavIcon, LogoDocStore, LogoDocStoreFavIcon, LogoDocStoreNegative, LogoDocStoreNegativeFavIcon, LogoEBilling, LogoEBillingFavIcon, LogoEBillingNegative, LogoEBillingNegativeFavIcon, LogoEPayment, LogoEPaymentFavIcon, LogoEPaymentNegative, LogoEPaymentNegativeFavIcon, LogoMobilityPlanner, LogoMobilityPlannerFavIcon, LogoMobilityPlannerNegative, LogoMobilityPlannerNegativeFavIcon, LogoPartsMobile, LogoPartsMobileFavIcon, LogoPartsMobileNegative, LogoPartsMobileNegativeFavIcon, LogoSBO, LogoSBOFavIcon, LogoSBONegative, LogoSBONegativeFavIcon, LogoServiceCube, LogoServiceCubeFavIcon, LogoServiceCubeNegative, LogoServiceCubeNegativeFavIcon, LogoWCP, LogoWCPFavIcon, LogoWCPNegative, LogoWCPNegativeFavIcon, LogoWorkshopOrderTracker, LogoWorkshopOrderTrackerFavIcon, LogoWorkshopOrderTrackerNegative, LogoWorkshopOrderTrackerNegativeFavIcon, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, Mechanic, NewCarUtilityVehicleShape, NodeId, Number0, Number1, Number10, Number11, Number12, Number13, Number14, Number15, Number16, Number17, Number18, Number19, Number2, Number20, Number3, Number4, Number5, Number6, Number7, Number8, Number9, OrderShape, OrderStatusShape, PaintMaterialForwardShape, PaintMaterialShape, ParkingLocation, PartAvailabilityInfoShape, PartAvailabilityNoShape, PartAvailabilityUnknownShape, PartAvailabilityWarningShape, PartAvailabilityYesShape, PartIdenticalPredecessorShape, PartIdenticalShape, PartIdenticalSuccessorShape, PartIdenticalSuccpredecessorShape, PartNonStockForwardShape, PartPredecessorShape, PartSuccessorPredecessorShape, PartSuccessorShape, PartsChangelocation, PartsForwardShape, PartsInventory, PartsNonStockShape, PartsPicking, PartsPickingPlus, PartsReceiving, PartsShape, PlusServiceShape, PorscheBrandShape, PriceTypeSwitchShape, RepeatRepairCollection, RepeatRepairShape, ReplacementVehicleCollection, ReplacementVehicleShape, ReturnDateShape, SEPARATOR_TEXT_DEFAULT, SeatBrandShape, ServiceAdvisor, SkodaBrandShape, Sort, StatePersistenceKeyDirective, TRANSLATIONS, TaskAndAppointment, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TreetableCellRenderer, TreetableDataStateService, TreetableHeaderRenderer, TreetableItemsDirective, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, VinShape, VsfSearchShape, VsfSearchShape48, WCPShape, WrenchForward, YEAR, acceleration, accelerationIcon, acceptanceDateIcon, accessories, accessoriesIcon, accessoryPartsIcon, adblueAppIcon, adblue_app, add, addIcon, airConditionerIcon, air_conditioning, alert, alertFilledAppIcon, alertIcon, alertNotificationFilledAppIcon, alert_filled_app, alert_notification_filled_app, allIcons, ambientLightAppIcon, ambient_light_app, amplifier, amplifierIcon, appConnectAppIcon, app_connect_app, archive, archiveIcon, arrowDownIcon, arrowLeftAlignedAppIcon, arrowLeftIcon, arrowRightIcon, arrowSliderAppIcon, arrowUpIcon, arrow_down, arrow_left, arrow_left_aligned_app, arrow_right, arrow_slider_app, arrow_up, attachment, attachmentIcon, audiBrandIcon, authentPlugChargeAppIcon, authentQrAppIcon, authentRfidAppIcon, authentTouchidAppIcon, authent_plug_charge_app, authent_qr_app, authent_rfid_app, authent_touch_id_app, automaticTempAppIcon, automatic_temp_app, awardWinnerPremiumIcon, award_winner_premium, back, backIcon, battery, batteryIcon, batterySocChargingAppIcon, batterySocDepartureAppIcon, batterySocDestinationAppIcon, battery_soc_charging_app, battery_soc_departure_app, battery_soc_destination_app, bin, binIcon, blocksGroupForwardIcon, bluetooth, bluetoothIcon, bookmark, bookmarkFilledIcon, bookmarkIcon, bookmark_filled, brakeAppIcon, brake_app, brochure, brochureIcon, bulletpointAppIcon, bulletpoint_app, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, business_customers_commercial, business_customers_private, calc, calcIcon, calculatorForwardIcon, calendar, calendarCustomIcon, californiaServiceIcon, californiaSpecialistIcon, california_specialist, cameraScanIcon, camera_scan, campaignIcon, campaignOutdatedIcon, carDocumentsIcon, carErrorAppIcon, carInsuranceIcon, carOffSite, carOnSite, carPickupServiceIcon, carPlusIcon, carSettingsIcon, carVerifiedAppIcon, carWashIcon, carWheelAppIcon, car_documents, car_error_app, car_insurance, car_pickup_service, car_plus, car_settings, car_verified_app, car_wheel_app, carwash, certifiedRepairIcon, certifiedRetailerIcon, certified_repair, certified_retailer, challengeAppIcon, challenge_app, charging, chargingIcon, chargingPduAppIcon, chargingStationIcon, chargingTarifOverviewAppIcon, charging_pdu_app, charging_station, charging_tarif_overview_app, chat, chatAppIcon, chatIcon, chat_app, checkboxCheckedAppIcon, checkboxCheckedIcon, checkboxUncheckedAppIcon, checkboxUncheckedIcon, checkbox_checked, checkbox_checked_app, checkbox_unchecked, checkbox_unchecked_app, checkmark, checkmarkAppIcon, checkmarkFilledAppIcon, checkmarkIcon, checkmark_app, checkmark_filled_app, chevronDownIcon, chevronLeftAlignedappIcon, chevronLeftIcon, chevronRightAlignedappIcon, chevronRightIcon, chevronSmallLeftAlignedappIcon, chevronSmallRightAlignedappIcon, chevronUpIcon, chevron_down, chevron_left, chevron_left_alignedapp, chevron_right, chevron_right_alignedapp, chevron_small_left_alignedapp, chevron_small_right_alignedapp, chevron_up, circleFilledIcon, circleHalfFilledIcon, circleQuarterFilledIcon, circleThreeQuartersFilledIcon, city, cityIcon, clearAppIcon, clearRightAlignedappIcon, clear_app, clear_right_alignedapp, clock, clockIcon, close, closeAppIcon, closeCircleIcon, closeIcon, closeLeftAlignedappIcon, closeRightAlignedappIcon, close_app, close_circle, close_left_alignedapp, close_right_alignedapp, clrIconSVG, coffeeFilledAppIcon, coffee_filled_app, compassAppIcon, compass_app, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, configurator_commercial, configurator_private, construction, constructionIcon, consumptionFuelFilledAppIcon, consumptionIcon, consumption_fuel, consumption_fuel_filled_app, contact, contactDealerFilledAppIcon, contactDealerIcon, contactIcon, contact_dealer, contact_dealer_filled_app, countryRoadIcon, country_road, craft, craftIcon, cupraBrandIcon, customerIcon, customerVipIcon, customerWaitingIcon, customersCenterIcon, customers_center, dataCopyAppIcon, dataExpiredIcon, dataFilledIcon, dataInputIcon, dataPlugAppIcon, dataSearchIcon, dataTimeExtensionIcon, data_copy_app, data_expired, data_filled, data_input, data_plug_app, data_search, data_time_extension, defaultSummaryAreaCollapsedKey, defogDefrostAutoAppIcon, defogDefrostIcon, defog_defrost, defog_defrost_auto_app, deliveryDateIcon, destinationAppIcon, destination_app, dieselIcon, direction, directionIcon, dischargingAppIcon, discharging_app, discountAppIcon, discount_app, discoveryAppIcon, discovery_app, dollarBillForwardIcon, dollarBillPartialIcon, download, downloadCustomIcon, dragIndicatorIcon, drag_indicator, driversAssistanceIcon, drivers_assistance, dropFilledAppIcon, drop_filled_app, dwaBrandIcon, eco, ecoIcon, edit, editIcon, editSmallRightAlignedAppIcon, edit_small_right_aligned_app, efficiency, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electric_cars, electric_cars_service, electricity, electricityFilledAppIcon, electricityIcon, electricity_filled_app, emergency, emergencyIcon, emission, emissionIcon, energyIcon, engine, engineIcon, entertainment, entertainmentIcon, escapeHtml, escapeRegex, exportAppIcon, export_app, expressServiceIcon, express_service, exterior, exterior360Icon, exteriorIcon, exterior_360, externalPartForwardIcon, faq, faqIcon, fastForwardIcon, fast_forward, fax, faxIcon, filter, filterIcon, findACarIcon, findADealerIcon, find_a_car, find_a_dealer, firstRegistrationDateIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, fleet_service_commercial, fleet_service_private, folderFilledAppIcon, folder_filled_app, foodFilledAppIcon, food_filled_app, formatNumber, fullscreenEnterIcon, fullscreenExitIcon, fullscreen_enter, fullscreen_exit, gallery, galleryIcon, garageAppIcon, garage_app, gasAppIcon, gasCarsServiceIcon, gasIcon, gas_app, glassDamageAppIcon, glass_damage_app, gte, gteIcon, heart, heartFilledAppIcon, heartIcon, heart_filled_app, heightAppIcon, height_app, highwayRoadIcon, highway_road, history, historyIcon, homeAppIcon, homeEnergyAppIcon, homeFilledAppIcon, home_app, home_energy_app, home_filled_app, hornAppIcon, hornFilledAppIcon, horn_app, horn_filled_app, hybrid, hybridIcon, immediateChargingAppIcon, immediate_charging_app, info, infoFilledIcon, infoIcon, info_filled, inputHideIcon, inputShowIcon, input_hide, input_show, interior, interior360Icon, interiorIcon, interior_360, internalPartForwardIcon, internet, internetIcon, invitationAppIcon, invitation_app, invoiceIcon, invoiceReadyIcon, invoiceRecipientIcon, itemsForwardIcon, itemsRecieveIcon, jobportal, jobportalIcon, keyAppIcon, keyCardAppIcon, keyDigitalAppIcon, key_app, key_card_app, key_digital_app, keyboardAppIcon, keyboard_app, layerCollapseAppIcon, layerExpandAppIcon, layer_collapse_app, layer_expand_app, layersAppIcon, layers_app, legalTermsAndConditionsAppIcon, legal_terms_and_conditions_app, licencePlateAppIcon, licence_plate_app, lightAssistappIcon, light_assistapp, lightingAppIcon, lighting_app, linkExternAppIcon, link_extern_app, list, listIcon, loadingVolumeIcon, loading_volume, localBusinessIcon, local_business, locate, locateIcon, lock, lockIcon, lockOpenIcon, lock_open, login, loginIcon, logistic, logisticIcon, logoCommissionModuleFavIcon, logoCommissionModuleIcon, logoCommissionModuleNegativeFavIcon, logoCommissionModuleNegativeIcon, logoCostApprovalFavIcon, logoCostApprovalIcon, logoCostApprovalNegativeFavIcon, logoCostApprovalNegativeIcon, logoCrossControllingFavIcon, logoCrossControllingIcon, logoCrossControllingNegativeFavIcon, logoCrossControllingNegativeIcon, logoDigitalServiceReceptionFavIcon, logoDigitalServiceReceptionIcon, logoDigitalServiceReceptionNegativeFavIcon, logoDigitalServiceReceptionNegativeIcon, logoDocFlowFavIcon, logoDocFlowIcon, logoDocFlowNegativeFavIcon, logoDocFlowNegativeIcon, logoDocScanFavIcon, logoDocScanIcon, logoDocScanNegativeFavIcon, logoDocScanNegativeIcon, logoDocStoreFavIcon, logoDocStoreIcon, logoDocStoreNegativeFavIcon, logoDocStoreNegativeIcon, logoEBillingFavIcon, logoEBillingIcon, logoEBillingNegativeFavIcon, logoEBillingNegativeIcon, logoEPaymentFavIcon, logoEPaymentIcon, logoEPaymentNegativeFavIcon, logoEPaymentNegativeIcon, logoMobilityPlannerFavIcon, logoMobilityPlannerIcon, logoMobilityPlannerNegativeFavIcon, logoMobilityPlannerNegativeIcon, logoPartsMobileFavIcon, logoPartsMobileIcon, logoPartsMobileNegativeFavIcon, logoPartsMobileNegativeIcon, logoSBOFavIcon, logoSBOIcon, logoSBONegativeFavIcon, logoSBONegativeIcon, logoServiceCubeFavIcon, logoServiceCubeIcon, logoServiceCubeNegativeFavIcon, logoServiceCubeNegativeIcon, logoWCPFavIcon, logoWCPIcon, logoWCPNegativeFavIcon, logoWCPNegativeIcon, logoWorkshopOrderTrackerFavIcon, logoWorkshopOrderTrackerIcon, logoWorkshopOrderTrackerNegativeFavIcon, logoWorkshopOrderTrackerNegativeIcon, logout, logoutIcon, magnifier, magnifierIcon, magnifierMinusIcon, magnifierPlusIcon, magnifier_minus, magnifier_plus, mail, mailIcon, mailResendAppIcon, mail_resend_app, manual, manualIcon, map, mapIcon, mapToInternalTree, mechanicIcon, media, mediaIcon, menu, menuAppAppIcon, menuIcon, menu_app_app, microphoneAppIcon, microphone_app, mobile, mobileIcon, moreAppIcon, moreAppbarAppIcon, more_app, more_appbar_app, mot, motIcon, motability, motabilityIcon, navigate, navigateFilledAppIcon, navigateIcon, navigate_filled_app, newCarCommercialIcon, newCarPrivateFilledAppIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, new_car_commercial, new_car_private, new_car_private_filled_app, nightServiceIcon, night_service, notification, notificationFilledIcon, notificationIcon, notification_filled, number0Icon, number10Icon, number11Icon, number12Icon, number13Icon, number14Icon, number15Icon, number16Icon, number17Icon, number18Icon, number19Icon, number1Icon, number20Icon, number2Icon, number3Icon, number4Icon, number5Icon, number6Icon, number7Icon, number8Icon, number9Icon, offers, offersFilledAppIcon, offersIcon, offers_filled_app, officeAppIcon, officeFilledAppIcon, office_app, office_filled_app, oilLevelIcon, oilLevelWarningIcon, oilTemperatureAppIcon, oil_level, oil_level_warning, oil_temperature_app, onCallDutyIcon, on_call_duty, openSatIcon, open_sat, orderIcon, orderStatusIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, paint_shop, paragraphAppIcon, paragraph_app, parkHeaterAppIcon, park_heater_app, parking, parkingFilledAppIcon, parkingGarageAppIcon, parkingIcon, parkingLocationIcon, parkingRouteAppIcon, parkingValetAppIcon, parking_filled_app, parking_garage_app, parking_route_app, parking_valet_app, partAvailabilityInfoIcon, partAvailabilityNoIcon, partAvailabilityUnknownIcon, partAvailabilityWarningIcon, partAvailabilityYesIcon, partIdenticalIcon, partIdenticalPredecessorIcon, partIdenticalSuccessorIcon, partIdenticalSuccpredecessorIcon, partPredecessorIcon, partSuccessorIcon, partSuccessorPredecessorIcon, partsChangelocationIcon, partsForwardIcon, partsIcon, partsInventoryIcon, partsNonStockForwardIcon, partsNonStockIcon, partsPickingIcon, partsPickingPlusIcon, partsReceivingIcon, pause, pauseIcon, payload, payloadIcon, paymentAppIcon, paymentCashAppIcon, paymentChargingCardAppIcon, paymentCreditcardAppIcon, paymentMachineAppIcon, payment_app, payment_cash_app, payment_charging_card_app, payment_creditcard_app, payment_machine_app, performance, performanceIcon, petrol, petrolIcon, phone, phoneIcon, pin, pinFilledAppIcon, pinGenericFilledAppIcon, pinIcon, pin_filled_app, pin_generic_filled_app, play, playIcon, plugCcsAppIcon, plugChademoAppIcon, plugChargeAppIcon, plugGenericAppIcon, plugSchukoAppIcon, plugType1AppIcon, plugType2AppIcon, plug_ccs_app, plug_chademo_app, plug_charge_app, plug_generic_app, plug_schuko_app, plug_type1_app, plug_type2_app, plusServiceIcon, porscheBrandIcon, power, powerIcon, powerTrainIcon, powertrain, preHeaterAppIcon, pre_heater_app, preciseLaneNavigationAppIcon, precise_lane_navigation_app, presentAppIcon, present_app, priceTypeSwitchIcon, printer, printerIcon, privacyAppIcon, privacy_app, profile, profileIcon, profileRegisterAppIcon, profileVerifiedIcon, profile_register_app, profile_verified, publicServiceIcon, publicTransportAppIcon, public_service, public_transport_app, qualifiedWorkshopIcon, qualified_workshop, questionnaireAppIcon, questionnaire_app, radio, radioButtonInselectedIcon, radioButtonSelectedForDefIcon, radioButtonSelectedIcon, radioIcon, radio_button_inselected, radio_button_selected, radio_button_selected_for_development, range, rangeIcon, reload, reloadIcon, remove, removeIcon, repeat, repeatIcon, repeatRepairIcon, replacementVehicleIcon, returnDateIcon, rewind, rewindIcon, roadsideAssistanceIcon, roadside_assistance, route, routeArrowAppIcon, routeIcon, route_arrow_app, routesHistoryAppIcon, routes_history_app, rss, rssIcon, safety, safetyIcon, save, saveAppIcon, saveIcon, save_app, seat, seatAirIcon, seatBrandIcon, seatIcon, seat_air, secretTipAppIcon, secretTipFilledAppIcon, secret_tip_app, secret_tip_filled_app, selected, selectedIcon, selectedPartnerNetworkAppIcon, selected_partner_network_app, sendToCarAppIcon, send_to_car_app, service, serviceAdvisorIcon, serviceBellIcon, serviceFilledAppIcon, serviceIcon, service_bell, service_filled_app, settings, settingsIcon, shareAndroidIcon, shareIosIcon, share_android, share_ios, shoppingCartFilledAppIcon, shoppingCartIcon, shopping_cart, shopping_cart_filled_app, shuffle, shuffleIcon, size, sizeIcon, skillAppIcon, skill_app, skipBackwardIcon, skipForwardIcon, skip_backward, skip_forward, skodaBrandIcon, softwareDownloadAppIcon, software_download_app, sortingAppIcon, sorting_app, sound, soundIcon, standardEquipmentIcon, standard_equipment, starFilledIcon, starOutlineIcon, star_filled, star_outline, statisticAppIcon, statistic_app, stockLocatorCommercialIcon, stockLocatorPrivateIcon, stock_locator_commercial, stock_locator_private, stop, stopIcon, strip, switchPositionAppIcon, switch_position_app, syncAppIcon, sync_app, taskAndAppointmentIcon, taxiDealerIcon, taxi_dealer, technicalSpecificationIcon, technical_specification, temperatureAppIcon, temperature_app, testDriveIcon, test_drive, textForwardIcon, thumbsdownAppIcon, thumbsdownFilledAppIcon, thumbsdown_app, thumbsdown_filled_app, thumbsupAppIcon, thumbsupFilledAppIcon, thumbsup_app, thumbsup_filled_app, timeClimatisationAppIcon, timePreferredAppIcon, time_climatisation_app, time_preferred_app, timer, timerIcon, topcardIcon, touaregServiceIcon, transcriptDownloadIcon, transcript_download, transmissionAutomaticIcon, transmissionManualIcon, transmission_automatic, transmission_manual, tripAppIcon, tripLongAppIcon, tripPartedAppIcon, tripShortAppIcon, trip_app, trip_long_app, trip_parted_app, trip_short_app, turnSignalsIcon, turn_signals, unselected, unselectedIcon, updateRefreshAppIcon, update_refresh_app, upload, uploadAppIcon, uploadCustomIcon, upload_app, usedCarCommercialIcon, usedCarPrivateIcon, used_car_commercial, used_car_private, vehicleAmarokIcon, vehicleCaddyIcon, vehicleConversionIcon, vehicleCrafterIcon, vehicleHightIcon, vehicleIdBuzzIcon, vehicleMultivanIcon, vehicleTransporterIcon, vehicle_amarok, vehicle_caddy, vehicle_crafter, vehicle_hight, vehicle_idbuzz, vehicle_multivan, vehicle_transporter, videoChatIcon, video_chat, view360Icon, view_360, vinIcon, virtualRealityIcon, virtual_reality, voiceMessageAppIcon, voice_message_app, volkswagenAppIcon, volkswagenIcon, volkswagen_app, volumeMaximumIcon, volumeMediumIcon, volumeMuteIcon, volume_maximum, volume_medium, volume_mute, vsfSearch48Icon, vsfSearchIcon, vwBrandIcon, vwConnectLicenseAppIcon, vw_connect_license_app, vwnBrandIcon, walkingAppIcon, walkingFilledAppIcon, walking_app, walking_filled_app, wallbox, wallboxIcon, wcAppIcon, wc_app, wcpIcon, weAssistAppIcon, weChargeAppIcon, weDeliverAppIcon, weExperienceAppIcon, weParkAppIcon, weUpgradeAppIcon, we_assist_app, we_charge_app, we_deliver_app, we_experience_app, we_park_app, we_upgrade_app, weatherSunAppIcon, weather_sun_app, wheelToWheelIcon, wheel_to_wheel, windscreenWashIcon, windscreen_wash, wlanHotspotIcon, wlan_hotspot, wrenchForwardIcon };
+export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CircleFilled, CircleHalfFilled, CircleQuarterFilled, CircleThreeQuartersFilled, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrControlEnterSubmitDirective, ClrCopyToClipboard, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridColumnReorderModule, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrExportDatagridButtonModule, ClrFlowBar, ClrFlowBarModule, ClrFocusFirstInvalidFieldDirective, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIconAvatar, ClrIconAvatarModule, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrImageCarousel, ClrImageGallery, ClrImageGalleryModule, ClrKeyboardNavAltMnemonicDirective, ClrKeyboardNavCtrlArrowDirective, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrReadonlyDirective, ClrReadonlyDirectiveModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrSummaryArea, ClrSummaryAreaStateService, ClrSummaryAreaToggle, ClrSummaryItem, ClrSummaryItemValue, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableFilter, ClrTreetableFooter, ClrTreetableHideableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrTreetableSortOrder, ClrTreetableStringFilter, ClrTreetableTreeNode, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, CupraBrandShape, Customer, CustomerVip, CustomerVipCollection, CustomerWaiting, CustomerWaitingCollection, DATE, DELIMITER_REGEX, DWABrandShape, DatagridColumnReorderDirective, DatagridFieldDirective, DayModel, DeliveryDate, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DynamicCellContentComponent, EnergyShape, ExportDatagridButtonComponent, ExportDatagridService, ExportTypeEnum, ExternalPartForwardShape, FirstRegistrationDate, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HISTORY_TOKEN, HistoryProvider, InternalPartForwardShape, InvoiceReadyShape, InvoiceRecipient, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LocationBarComponent, LocationBarContentProvider, LocationBarNode, LogoCommissionModule, LogoCommissionModuleFavIcon, LogoCommissionModuleNegative, LogoCommissionModuleNegativeFavIcon, LogoCostApproval, LogoCostApprovalFavIcon, LogoCostApprovalNegative, LogoCostApprovalNegativeFavIcon, LogoCostControlling, LogoCostControllingFavIcon, LogoCostControllingNegative, LogoCostControllingNegativeFavIcon, LogoDigitalServiceReception, LogoDigitalServiceReceptionFavIcon, LogoDigitalServiceReceptionNegative, LogoDigitalServiceReceptionNegativeFavIcon, LogoDocFlow, LogoDocFlowFavIcon, LogoDocFlowNegative, LogoDocFlowNegativeFavIcon, LogoDocScan, LogoDocScanFavIcon, LogoDocScanNegative, LogoDocScanNegativeFavIcon, LogoDocStore, LogoDocStoreFavIcon, LogoDocStoreNegative, LogoDocStoreNegativeFavIcon, LogoEBilling, LogoEBillingFavIcon, LogoEBillingNegative, LogoEBillingNegativeFavIcon, LogoEPayment, LogoEPaymentFavIcon, LogoEPaymentNegative, LogoEPaymentNegativeFavIcon, LogoMobilityPlanner, LogoMobilityPlannerFavIcon, LogoMobilityPlannerNegative, LogoMobilityPlannerNegativeFavIcon, LogoPartsMobile, LogoPartsMobileFavIcon, LogoPartsMobileNegative, LogoPartsMobileNegativeFavIcon, LogoSBO, LogoSBOFavIcon, LogoSBONegative, LogoSBONegativeFavIcon, LogoServiceCube, LogoServiceCubeFavIcon, LogoServiceCubeNegative, LogoServiceCubeNegativeFavIcon, LogoWCP, LogoWCPFavIcon, LogoWCPNegative, LogoWCPNegativeFavIcon, LogoWorkshopOrderTracker, LogoWorkshopOrderTrackerFavIcon, LogoWorkshopOrderTrackerNegative, LogoWorkshopOrderTrackerNegativeFavIcon, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, Mechanic, NewCarUtilityVehicleShape, NodeId, Number0, Number1, Number10, Number11, Number12, Number13, Number14, Number15, Number16, Number17, Number18, Number19, Number2, Number20, Number3, Number4, Number5, Number6, Number7, Number8, Number9, OrderShape, OrderStatusShape, PaintMaterialForwardShape, PaintMaterialShape, ParkingLocation, PartAvailabilityInfoShape, PartAvailabilityNoShape, PartAvailabilityUnknownShape, PartAvailabilityWarningShape, PartAvailabilityYesShape, PartIdenticalPredecessorShape, PartIdenticalShape, PartIdenticalSuccessorShape, PartIdenticalSuccpredecessorShape, PartNonStockForwardShape, PartPredecessorShape, PartSuccessorPredecessorShape, PartSuccessorShape, PartsChangelocation, PartsForwardShape, PartsInventory, PartsNonStockShape, PartsPicking, PartsPickingPlus, PartsReceiving, PartsShape, PlusServiceShape, PorscheBrandShape, PriceTypeSwitchShape, RepeatRepairCollection, RepeatRepairShape, ReplacementVehicleCollection, ReplacementVehicleShape, ReturnDateShape, SEPARATOR_TEXT_DEFAULT, SeatBrandShape, ServiceAdvisor, SkodaBrandShape, SortStateService, StatePersistenceKeyDirective, TRANSLATIONS, TaskAndAppointment, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TreetableCellRenderer, TreetableDataStateService, TreetableHeaderRenderer, TreetableItemsDirective, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, VinShape, VsfSearchShape, VsfSearchShape48, WCPShape, WrenchForward, YEAR, acceleration, accelerationIcon, acceptanceDateIcon, accessories, accessoriesIcon, accessoryPartsIcon, adblueAppIcon, adblue_app, add, addIcon, airConditionerIcon, air_conditioning, alert, alertFilledAppIcon, alertIcon, alertNotificationFilledAppIcon, alert_filled_app, alert_notification_filled_app, allIcons, ambientLightAppIcon, ambient_light_app, amplifier, amplifierIcon, appConnectAppIcon, app_connect_app, archive, archiveIcon, arrowDownIcon, arrowLeftAlignedAppIcon, arrowLeftIcon, arrowRightIcon, arrowSliderAppIcon, arrowUpIcon, arrow_down, arrow_left, arrow_left_aligned_app, arrow_right, arrow_slider_app, arrow_up, attachment, attachmentIcon, audiBrandIcon, authentPlugChargeAppIcon, authentQrAppIcon, authentRfidAppIcon, authentTouchidAppIcon, authent_plug_charge_app, authent_qr_app, authent_rfid_app, authent_touch_id_app, automaticTempAppIcon, automatic_temp_app, awardWinnerPremiumIcon, award_winner_premium, back, backIcon, battery, batteryIcon, batterySocChargingAppIcon, batterySocDepartureAppIcon, batterySocDestinationAppIcon, battery_soc_charging_app, battery_soc_departure_app, battery_soc_destination_app, bin, binIcon, blocksGroupForwardIcon, bluetooth, bluetoothIcon, bookmark, bookmarkFilledIcon, bookmarkIcon, bookmark_filled, brakeAppIcon, brake_app, brochure, brochureIcon, bulletpointAppIcon, bulletpoint_app, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, business_customers_commercial, business_customers_private, calc, calcIcon, calculatorForwardIcon, calendar, calendarCustomIcon, californiaServiceIcon, californiaSpecialistIcon, california_specialist, cameraScanIcon, camera_scan, campaignIcon, campaignOutdatedIcon, carDocumentsIcon, carErrorAppIcon, carInsuranceIcon, carOffSite, carOnSite, carPickupServiceIcon, carPlusIcon, carSettingsIcon, carVerifiedAppIcon, carWashIcon, carWheelAppIcon, car_documents, car_error_app, car_insurance, car_pickup_service, car_plus, car_settings, car_verified_app, car_wheel_app, carwash, certifiedRepairIcon, certifiedRetailerIcon, certified_repair, certified_retailer, challengeAppIcon, challenge_app, charging, chargingIcon, chargingPduAppIcon, chargingStationIcon, chargingTarifOverviewAppIcon, charging_pdu_app, charging_station, charging_tarif_overview_app, chat, chatAppIcon, chatIcon, chat_app, checkboxCheckedAppIcon, checkboxCheckedIcon, checkboxUncheckedAppIcon, checkboxUncheckedIcon, checkbox_checked, checkbox_checked_app, checkbox_unchecked, checkbox_unchecked_app, checkmark, checkmarkAppIcon, checkmarkFilledAppIcon, checkmarkIcon, checkmark_app, checkmark_filled_app, chevronDownIcon, chevronLeftAlignedappIcon, chevronLeftIcon, chevronRightAlignedappIcon, chevronRightIcon, chevronSmallLeftAlignedappIcon, chevronSmallRightAlignedappIcon, chevronUpIcon, chevron_down, chevron_left, chevron_left_alignedapp, chevron_right, chevron_right_alignedapp, chevron_small_left_alignedapp, chevron_small_right_alignedapp, chevron_up, circleFilledIcon, circleHalfFilledIcon, circleQuarterFilledIcon, circleThreeQuartersFilledIcon, city, cityIcon, clearAppIcon, clearRightAlignedappIcon, clear_app, clear_right_alignedapp, clock, clockIcon, close, closeAppIcon, closeCircleIcon, closeIcon, closeLeftAlignedappIcon, closeRightAlignedappIcon, close_app, close_circle, close_left_alignedapp, close_right_alignedapp, clrIconSVG, coffeeFilledAppIcon, coffee_filled_app, compassAppIcon, compass_app, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, configurator_commercial, configurator_private, construction, constructionIcon, consumptionFuelFilledAppIcon, consumptionIcon, consumption_fuel, consumption_fuel_filled_app, contact, contactDealerFilledAppIcon, contactDealerIcon, contactIcon, contact_dealer, contact_dealer_filled_app, countryRoadIcon, country_road, craft, craftIcon, cupraBrandIcon, customerIcon, customerVipIcon, customerWaitingIcon, customersCenterIcon, customers_center, dataCopyAppIcon, dataExpiredIcon, dataFilledIcon, dataInputIcon, dataPlugAppIcon, dataSearchIcon, dataTimeExtensionIcon, data_copy_app, data_expired, data_filled, data_input, data_plug_app, data_search, data_time_extension, defaultSummaryAreaCollapsedKey, defogDefrostAutoAppIcon, defogDefrostIcon, defog_defrost, defog_defrost_auto_app, deliveryDateIcon, destinationAppIcon, destination_app, dieselIcon, direction, directionIcon, dischargingAppIcon, discharging_app, discountAppIcon, discount_app, discoveryAppIcon, discovery_app, dollarBillForwardIcon, dollarBillPartialIcon, download, downloadCustomIcon, dragIndicatorIcon, drag_indicator, driversAssistanceIcon, drivers_assistance, dropFilledAppIcon, drop_filled_app, dwaBrandIcon, eco, ecoIcon, edit, editIcon, editSmallRightAlignedAppIcon, edit_small_right_aligned_app, efficiency, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electric_cars, electric_cars_service, electricity, electricityFilledAppIcon, electricityIcon, electricity_filled_app, emergency, emergencyIcon, emission, emissionIcon, energyIcon, engine, engineIcon, entertainment, entertainmentIcon, escapeHtml, escapeRegex, exportAppIcon, export_app, expressServiceIcon, express_service, exterior, exterior360Icon, exteriorIcon, exterior_360, externalPartForwardIcon, faq, faqIcon, fastForwardIcon, fast_forward, fax, faxIcon, filter, filterIcon, findACarIcon, findADealerIcon, find_a_car, find_a_dealer, firstRegistrationDateIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, fleet_service_commercial, fleet_service_private, folderFilledAppIcon, folder_filled_app, foodFilledAppIcon, food_filled_app, formatNumber, fullscreenEnterIcon, fullscreenExitIcon, fullscreen_enter, fullscreen_exit, gallery, galleryIcon, garageAppIcon, garage_app, gasAppIcon, gasCarsServiceIcon, gasIcon, gas_app, glassDamageAppIcon, glass_damage_app, gte, gteIcon, heart, heartFilledAppIcon, heartIcon, heart_filled_app, heightAppIcon, height_app, highwayRoadIcon, highway_road, history, historyIcon, homeAppIcon, homeEnergyAppIcon, homeFilledAppIcon, home_app, home_energy_app, home_filled_app, hornAppIcon, hornFilledAppIcon, horn_app, horn_filled_app, hybrid, hybridIcon, immediateChargingAppIcon, immediate_charging_app, info, infoFilledIcon, infoIcon, info_filled, inputHideIcon, inputShowIcon, input_hide, input_show, interior, interior360Icon, interiorIcon, interior_360, internalPartForwardIcon, internet, internetIcon, invitationAppIcon, invitation_app, invoiceIcon, invoiceReadyIcon, invoiceRecipientIcon, itemsForwardIcon, itemsRecieveIcon, jobportal, jobportalIcon, keyAppIcon, keyCardAppIcon, keyDigitalAppIcon, key_app, key_card_app, key_digital_app, keyboardAppIcon, keyboard_app, layerCollapseAppIcon, layerExpandAppIcon, layer_collapse_app, layer_expand_app, layersAppIcon, layers_app, legalTermsAndConditionsAppIcon, legal_terms_and_conditions_app, licencePlateAppIcon, licence_plate_app, lightAssistappIcon, light_assistapp, lightingAppIcon, lighting_app, linkExternAppIcon, link_extern_app, list, listIcon, loadingVolumeIcon, loading_volume, localBusinessIcon, local_business, locate, locateIcon, lock, lockIcon, lockOpenIcon, lock_open, login, loginIcon, logistic, logisticIcon, logoCommissionModuleFavIcon, logoCommissionModuleIcon, logoCommissionModuleNegativeFavIcon, logoCommissionModuleNegativeIcon, logoCostApprovalFavIcon, logoCostApprovalIcon, logoCostApprovalNegativeFavIcon, logoCostApprovalNegativeIcon, logoCrossControllingFavIcon, logoCrossControllingIcon, logoCrossControllingNegativeFavIcon, logoCrossControllingNegativeIcon, logoDigitalServiceReceptionFavIcon, logoDigitalServiceReceptionIcon, logoDigitalServiceReceptionNegativeFavIcon, logoDigitalServiceReceptionNegativeIcon, logoDocFlowFavIcon, logoDocFlowIcon, logoDocFlowNegativeFavIcon, logoDocFlowNegativeIcon, logoDocScanFavIcon, logoDocScanIcon, logoDocScanNegativeFavIcon, logoDocScanNegativeIcon, logoDocStoreFavIcon, logoDocStoreIcon, logoDocStoreNegativeFavIcon, logoDocStoreNegativeIcon, logoEBillingFavIcon, logoEBillingIcon, logoEBillingNegativeFavIcon, logoEBillingNegativeIcon, logoEPaymentFavIcon, logoEPaymentIcon, logoEPaymentNegativeFavIcon, logoEPaymentNegativeIcon, logoMobilityPlannerFavIcon, logoMobilityPlannerIcon, logoMobilityPlannerNegativeFavIcon, logoMobilityPlannerNegativeIcon, logoPartsMobileFavIcon, logoPartsMobileIcon, logoPartsMobileNegativeFavIcon, logoPartsMobileNegativeIcon, logoSBOFavIcon, logoSBOIcon, logoSBONegativeFavIcon, logoSBONegativeIcon, logoServiceCubeFavIcon, logoServiceCubeIcon, logoServiceCubeNegativeFavIcon, logoServiceCubeNegativeIcon, logoWCPFavIcon, logoWCPIcon, logoWCPNegativeFavIcon, logoWCPNegativeIcon, logoWorkshopOrderTrackerFavIcon, logoWorkshopOrderTrackerIcon, logoWorkshopOrderTrackerNegativeFavIcon, logoWorkshopOrderTrackerNegativeIcon, logout, logoutIcon, magnifier, magnifierIcon, magnifierMinusIcon, magnifierPlusIcon, magnifier_minus, magnifier_plus, mail, mailIcon, mailResendAppIcon, mail_resend_app, manual, manualIcon, map, mapIcon, mapToInternalTree, mechanicIcon, media, mediaIcon, menu, menuAppAppIcon, menuIcon, menu_app_app, microphoneAppIcon, microphone_app, mobile, mobileIcon, moreAppIcon, moreAppbarAppIcon, more_app, more_appbar_app, mot, motIcon, motability, motabilityIcon, navigate, navigateFilledAppIcon, navigateIcon, navigate_filled_app, newCarCommercialIcon, newCarPrivateFilledAppIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, new_car_commercial, new_car_private, new_car_private_filled_app, nightServiceIcon, night_service, notification, notificationFilledIcon, notificationIcon, notification_filled, number0Icon, number10Icon, number11Icon, number12Icon, number13Icon, number14Icon, number15Icon, number16Icon, number17Icon, number18Icon, number19Icon, number1Icon, number20Icon, number2Icon, number3Icon, number4Icon, number5Icon, number6Icon, number7Icon, number8Icon, number9Icon, offers, offersFilledAppIcon, offersIcon, offers_filled_app, officeAppIcon, officeFilledAppIcon, office_app, office_filled_app, oilLevelIcon, oilLevelWarningIcon, oilTemperatureAppIcon, oil_level, oil_level_warning, oil_temperature_app, onCallDutyIcon, on_call_duty, openSatIcon, open_sat, orderIcon, orderStatusIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, paint_shop, paragraphAppIcon, paragraph_app, parkHeaterAppIcon, park_heater_app, parking, parkingFilledAppIcon, parkingGarageAppIcon, parkingIcon, parkingLocationIcon, parkingRouteAppIcon, parkingValetAppIcon, parking_filled_app, parking_garage_app, parking_route_app, parking_valet_app, partAvailabilityInfoIcon, partAvailabilityNoIcon, partAvailabilityUnknownIcon, partAvailabilityWarningIcon, partAvailabilityYesIcon, partIdenticalIcon, partIdenticalPredecessorIcon, partIdenticalSuccessorIcon, partIdenticalSuccpredecessorIcon, partPredecessorIcon, partSuccessorIcon, partSuccessorPredecessorIcon, partsChangelocationIcon, partsForwardIcon, partsIcon, partsInventoryIcon, partsNonStockForwardIcon, partsNonStockIcon, partsPickingIcon, partsPickingPlusIcon, partsReceivingIcon, pause, pauseIcon, payload, payloadIcon, paymentAppIcon, paymentCashAppIcon, paymentChargingCardAppIcon, paymentCreditcardAppIcon, paymentMachineAppIcon, payment_app, payment_cash_app, payment_charging_card_app, payment_creditcard_app, payment_machine_app, performance, performanceIcon, petrol, petrolIcon, phone, phoneIcon, pin, pinFilledAppIcon, pinGenericFilledAppIcon, pinIcon, pin_filled_app, pin_generic_filled_app, play, playIcon, plugCcsAppIcon, plugChademoAppIcon, plugChargeAppIcon, plugGenericAppIcon, plugSchukoAppIcon, plugType1AppIcon, plugType2AppIcon, plug_ccs_app, plug_chademo_app, plug_charge_app, plug_generic_app, plug_schuko_app, plug_type1_app, plug_type2_app, plusServiceIcon, porscheBrandIcon, power, powerIcon, powerTrainIcon, powertrain, preHeaterAppIcon, pre_heater_app, preciseLaneNavigationAppIcon, precise_lane_navigation_app, presentAppIcon, present_app, priceTypeSwitchIcon, printer, printerIcon, privacyAppIcon, privacy_app, profile, profileIcon, profileRegisterAppIcon, profileVerifiedIcon, profile_register_app, profile_verified, publicServiceIcon, publicTransportAppIcon, public_service, public_transport_app, qualifiedWorkshopIcon, qualified_workshop, questionnaireAppIcon, questionnaire_app, radio, radioButtonInselectedIcon, radioButtonSelectedForDefIcon, radioButtonSelectedIcon, radioIcon, radio_button_inselected, radio_button_selected, radio_button_selected_for_development, range, rangeIcon, reload, reloadIcon, remove, removeIcon, repeat, repeatIcon, repeatRepairIcon, replacementVehicleIcon, returnDateIcon, rewind, rewindIcon, roadsideAssistanceIcon, roadside_assistance, route, routeArrowAppIcon, routeIcon, route_arrow_app, routesHistoryAppIcon, routes_history_app, rss, rssIcon, safety, safetyIcon, save, saveAppIcon, saveIcon, save_app, seat, seatAirIcon, seatBrandIcon, seatIcon, seat_air, secretTipAppIcon, secretTipFilledAppIcon, secret_tip_app, secret_tip_filled_app, selected, selectedIcon, selectedPartnerNetworkAppIcon, selected_partner_network_app, sendToCarAppIcon, send_to_car_app, service, serviceAdvisorIcon, serviceBellIcon, serviceFilledAppIcon, serviceIcon, service_bell, service_filled_app, settings, settingsIcon, shareAndroidIcon, shareIosIcon, share_android, share_ios, shoppingCartFilledAppIcon, shoppingCartIcon, shopping_cart, shopping_cart_filled_app, shuffle, shuffleIcon, size, sizeIcon, skillAppIcon, skill_app, skipBackwardIcon, skipForwardIcon, skip_backward, skip_forward, skodaBrandIcon, softwareDownloadAppIcon, software_download_app, sortingAppIcon, sorting_app, sound, soundIcon, standardEquipmentIcon, standard_equipment, starFilledIcon, starOutlineIcon, star_filled, star_outline, statisticAppIcon, statistic_app, stockLocatorCommercialIcon, stockLocatorPrivateIcon, stock_locator_commercial, stock_locator_private, stop, stopIcon, strip, switchPositionAppIcon, switch_position_app, syncAppIcon, sync_app, taskAndAppointmentIcon, taxiDealerIcon, taxi_dealer, technicalSpecificationIcon, technical_specification, temperatureAppIcon, temperature_app, testDriveIcon, test_drive, textForwardIcon, thumbsdownAppIcon, thumbsdownFilledAppIcon, thumbsdown_app, thumbsdown_filled_app, thumbsupAppIcon, thumbsupFilledAppIcon, thumbsup_app, thumbsup_filled_app, timeClimatisationAppIcon, timePreferredAppIcon, time_climatisation_app, time_preferred_app, timer, timerIcon, topcardIcon, touaregServiceIcon, transcriptDownloadIcon, transcript_download, transmissionAutomaticIcon, transmissionManualIcon, transmission_automatic, transmission_manual, tripAppIcon, tripLongAppIcon, tripPartedAppIcon, tripShortAppIcon, trip_app, trip_long_app, trip_parted_app, trip_short_app, turnSignalsIcon, turn_signals, unselected, unselectedIcon, updateRefreshAppIcon, update_refresh_app, upload, uploadAppIcon, uploadCustomIcon, upload_app, usedCarCommercialIcon, usedCarPrivateIcon, used_car_commercial, used_car_private, vehicleAmarokIcon, vehicleCaddyIcon, vehicleConversionIcon, vehicleCrafterIcon, vehicleHightIcon, vehicleIdBuzzIcon, vehicleMultivanIcon, vehicleTransporterIcon, vehicle_amarok, vehicle_caddy, vehicle_crafter, vehicle_hight, vehicle_idbuzz, vehicle_multivan, vehicle_transporter, videoChatIcon, video_chat, view360Icon, view_360, vinIcon, virtualRealityIcon, virtual_reality, voiceMessageAppIcon, voice_message_app, volkswagenAppIcon, volkswagenIcon, volkswagen_app, volumeMaximumIcon, volumeMediumIcon, volumeMuteIcon, volume_maximum, volume_medium, volume_mute, vsfSearch48Icon, vsfSearchIcon, vwBrandIcon, vwConnectLicenseAppIcon, vw_connect_license_app, vwnBrandIcon, walkingAppIcon, walkingFilledAppIcon, walking_app, walking_filled_app, wallbox, wallboxIcon, wcAppIcon, wc_app, wcpIcon, weAssistAppIcon, weChargeAppIcon, weDeliverAppIcon, weExperienceAppIcon, weParkAppIcon, weUpgradeAppIcon, we_assist_app, we_charge_app, we_deliver_app, we_experience_app, we_park_app, we_upgrade_app, weatherSunAppIcon, weather_sun_app, wheelToWheelIcon, wheel_to_wheel, windscreenWashIcon, windscreen_wash, wlanHotspotIcon, wlan_hotspot, wrenchForwardIcon };
 //# sourceMappingURL=porscheinformatik-clr-addons.mjs.map