@porscheinformatik/clr-addons 21.6.0 → 21.7.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, NgZone, viewChild, ViewContainerRef, afterRenderEffect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, output, ChangeDetectorRef, 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, NgZone, viewChild, output, ViewContainerRef, afterRenderEffect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, ChangeDetectorRef, 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';
@@ -15,13 +15,13 @@ import { RouterModule } from '@angular/router';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import * as i1$1 from '@clr/angular/forms/common';
 import * as i2$2 from '@clr/angular/forms/radio';
-import * as i3$1 from '@clr/angular/popover/dropdown';
-import * as i2$3 from '@clr/angular/popover/common';
-import * as i2$4 from '@clr/angular/emphasis/alert';
+import * as i2$3 from '@clr/angular/popover/dropdown';
+import * as i2$4 from '@clr/angular/popover/common';
+import * as i2$5 from '@clr/angular/emphasis/alert';
 import { takeUntilDestroyed, toObservable, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
-import * as i2$5 from '@clr/angular/progress/spinner';
+import * as i2$6 from '@clr/angular/progress/spinner';
 import * as i4 from '@clr/angular/forms/checkbox';
-import * as i3$2 from '@clr/angular/forms/input';
+import * as i3$1 from '@clr/angular/forms/input';
 import * as i1$3 from '@angular/common/http';
 import { CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
 import * as i4$1 from '@clr/angular/forms/datepicker';
@@ -1000,7 +1000,7 @@ class ClrFlowBar {
         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.22", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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      [attr.data-testid]=\"'flow-bar-step-' + (step.title | async)\"\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\" data-testid=\"flow-bar-dropdown\">\n  <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger data-testid=\"flow-bar-dropdown-trigger\">\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\n      clrDropdownItem\n      type=\"button\"\n      class=\"btn\"\n      [disabled]=\"!step.enabled\"\n      (click)=\"changeActiveStep(step)\"\n      [attr.data-testid]=\"'flow-bar-dropdown-step-' + (step.title | async)\"\n    >\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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      [attr.data-testid]=\"'flow-bar-step-' + (step.title | async)\"\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\" data-testid=\"flow-bar-dropdown\">\n  <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger data-testid=\"flow-bar-dropdown-trigger\">\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\n      clrDropdownItem\n      type=\"button\"\n      class=\"btn\"\n      [disabled]=\"!step.enabled\"\n      (click)=\"changeActiveStep(step)\"\n      [attr.data-testid]=\"'flow-bar-dropdown-step-' + (step.title | async)\"\n    >\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: i2$3.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2$3.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2$3.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2$3.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.22", ngImport: i0, type: ClrFlowBar, decorators: [{
             type: Component,
@@ -1937,7 +1937,7 @@ class ClrMultilingualSelector {
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i3$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i3$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i3$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i3$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
+  `, 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: i2$3.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2$3.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2$3.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2$3.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$4.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.22", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
             type: Component,
@@ -2285,7 +2285,7 @@ class ClrNotification {
         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.22", 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.22", 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\" data-testid=\"notification\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n  @if (progressbar && timeout > 0) {\n  <div class=\"progress top\" [ngClass]=\"notificationType\" data-testid=\"notification-progress-container\">\n    <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\" data-testid=\"notification-progress\"></progress>\n  </div>\n  }\n  <clr-alert\n    data-testid=\"notification-alert\"\n    [clrAlertType]=\"notificationType\"\n    [clrAlertAppLevel]=\"true\"\n    [clrAlertClosable]=\"dismissable\"\n    (clrAlertClosedChange)=\"close()\"\n  >\n    <div class=\"alert-item\">\n      <span class=\"alert-text\" data-testid=\"notification-message\">\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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\" data-testid=\"notification\" [@slideDown] [@move]=\"state\" [@fade]=\"state\">\n  @if (progressbar && timeout > 0) {\n  <div class=\"progress top\" [ngClass]=\"notificationType\" data-testid=\"notification-progress-container\">\n    <progress class=\"progress\" [max]=\"timeout\" [value]=\"progressStatus\" data-testid=\"notification-progress\"></progress>\n  </div>\n  }\n  <clr-alert\n    data-testid=\"notification-alert\"\n    [clrAlertType]=\"notificationType\"\n    [clrAlertAppLevel]=\"true\"\n    [clrAlertClosable]=\"dismissable\"\n    (clrAlertClosedChange)=\"close()\"\n  >\n    <div class=\"alert-item\">\n      <span class=\"alert-text\" data-testid=\"notification-message\">\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$5.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "directive", type: i2$5.ClrAlertText, selector: ".alert-text" }], animations: [
             trigger('slideDown', [
                 transition(':enter', [
                     style({ transform: 'translateY(-200%)' }),
@@ -3180,7 +3180,7 @@ class ClrPagedSearchResultList {
         this.pageSizeChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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\" [attr.data-testid]=\"'paged-search-result-list-pager-row-' + (position)\">\n    <div\n      [class.pager-top]=\"position === 'top'\"\n      [class.pager-bottom]=\"position === 'bottom'\"\n      [attr.data-testid]=\"'paged-search-result-list-pager-container-' + (position)\"\n    >\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        [attr.data-testid]=\"'paged-search-result-list-pager-' + (position)\"\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\n        type=\"button\"\n        class=\"btn btn-link btn-no-capitalized\"\n        clrDropdownTrigger\n        data-testid=\"paged-search-result-list-page-size-trigger\"\n      >\n        <span class=\"options-text-button\" data-testid=\"paged-search-result-list-page-size-label\">\n          {{ pageSizeLabel }}: {{ pageSize }}\n        </span>\n        <cds-icon class=\"options-icon-button\" shape=\"cog\"></cds-icon>\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <clr-dropdown-menu\n        class=\"spinner-in-front\"\n        clrPosition=\"top-right\"\n        data-testid=\"paged-search-result-list-page-size-menu\"\n      >\n        @for (sizeOption of pageSizeOptions; track sizeOption) {\n        <button\n          type=\"button\"\n          clrDropdownItem\n          (click)=\"pageSizeChange.emit(sizeOption)\"\n          [attr.data-testid]=\"'paged-search-result-list-page-size-option-' + (sizeOption)\"\n        >\n          {{ sizeOption }}\n        </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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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\" [attr.data-testid]=\"'paged-search-result-list-pager-row-' + (position)\">\n    <div\n      [class.pager-top]=\"position === 'top'\"\n      [class.pager-bottom]=\"position === 'bottom'\"\n      [attr.data-testid]=\"'paged-search-result-list-pager-container-' + (position)\"\n    >\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        [attr.data-testid]=\"'paged-search-result-list-pager-' + (position)\"\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\n        type=\"button\"\n        class=\"btn btn-link btn-no-capitalized\"\n        clrDropdownTrigger\n        data-testid=\"paged-search-result-list-page-size-trigger\"\n      >\n        <span class=\"options-text-button\" data-testid=\"paged-search-result-list-page-size-label\">\n          {{ pageSizeLabel }}: {{ pageSize }}\n        </span>\n        <cds-icon class=\"options-icon-button\" shape=\"cog\"></cds-icon>\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <clr-dropdown-menu\n        class=\"spinner-in-front\"\n        clrPosition=\"top-right\"\n        data-testid=\"paged-search-result-list-page-size-menu\"\n      >\n        @for (sizeOption of pageSizeOptions; track sizeOption) {\n        <button\n          type=\"button\"\n          clrDropdownItem\n          (click)=\"pageSizeChange.emit(sizeOption)\"\n          [attr.data-testid]=\"'paged-search-result-list-page-size-option-' + (sizeOption)\"\n        >\n          {{ sizeOption }}\n        </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: i2$3.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2$3.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2$3.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2$3.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.22", ngImport: i0, type: ClrPagedSearchResultList, decorators: [{
             type: Component,
@@ -3767,7 +3767,7 @@ 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"] }, { kind: "directive", type: i1$2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }], 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$4.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$4.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$4.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.22", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
             type: Component,
@@ -4439,14 +4439,21 @@ class TreetableDataStateService {
             }
             return this.filterTreeRecursively(treetableNodes, activeFilters);
         }, ...(ngDevMode ? [{ debugName: "_filteredNodes" }] : /* istanbul ignore next */ []));
-        this.displayedNodes = computed(() => {
-            const nodes = this._filteredNodes();
-            const { comparator } = this._sort.sortState();
-            if (!comparator) {
-                return nodes;
-            }
-            return this.sortTreeRecursively(nodes);
-        }, ...(ngDevMode ? [{ debugName: "displayedNodes" }] : /* istanbul ignore next */ []));
+        this.displayedNodes = computed(() => this.applySort(this._filteredNodes()), ...(ngDevMode ? [{ debugName: "displayedNodes" }] : /* istanbul ignore next */ []));
+        /**
+         * All nodes of the data source, ignoring the active filters. The active sort is applied, so the
+         * order matches the order of the displayed nodes.
+         */
+        this.allNodes = computed(() => this.applySort(this._treetableNodes()), ...(ngDevMode ? [{ debugName: "allNodes" }] : /* istanbul ignore next */ []));
+        /**
+         * All items of the data source as a flat, depth-first list. Active filters are ignored, the
+         * active sort is applied.
+         */
+        this.allItems = computed(() => this.flatten(this.allNodes()), ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
+        /**
+         * All currently displayed items (filtered and sorted) as a flat, depth-first list.
+         */
+        this.displayedItems = computed(() => this.flatten(this.displayedNodes()), ...(ngDevMode ? [{ debugName: "displayedItems" }] : /* istanbul ignore next */ []));
         this.areAllNodesSelected = computed(() => this.displayedNodes().every(node => node.selected() === ClrTreetableSelectedState.SELECTED), ...(ngDevMode ? [{ debugName: "areAllNodesSelected" }] : /* istanbul ignore next */ []));
         this.selectedNodes = computed(() => {
             const result = [];
@@ -4541,6 +4548,26 @@ class TreetableDataStateService {
         }
         return result;
     }
+    /**
+     * Applies the currently active sort to the given nodes. Returns them unchanged if no sort is active.
+     */
+    applySort(nodes) {
+        const { comparator } = this._sort.sortState();
+        if (!comparator) {
+            return nodes;
+        }
+        return this.sortTreeRecursively(nodes);
+    }
+    /**
+     * Flattens the given nodes into a depth-first list of their values.
+     */
+    flatten(nodes) {
+        const result = [];
+        this.traverseTreeNodes(nodes, (node) => {
+            result.push(node.value);
+        });
+        return result;
+    }
     sortTreeRecursively(nodes) {
         const sortedNodes = [...nodes].sort((nodeA, nodeB) => this._sort.compare(nodeA.value, nodeB.value));
         return sortedNodes.map(node => {
@@ -4620,6 +4647,8 @@ class TreetableColumnStateService {
                 hidden: false,
                 initialHidden: false,
                 titleTemplateRef: options.titleTemplateRef,
+                field: options.field,
+                colType: options.colType ?? 'string',
             },
         }));
     }
@@ -4734,6 +4763,8 @@ class ClrTreetable {
         this.treetableId = `clr-treetable-${++treetableId}`;
         this.selectAllId = `clr-tt-select-all${treetableId}`;
         this._dataStateService = inject((TreetableDataStateService));
+        this._columnStateService = inject(TreetableColumnStateService);
+        this._filterStateService = inject((FilterStateService));
         this._recursionService = inject((ClrTreetableRecursionService));
         this._commonStringsService = inject(ClrCommonStringsService);
         this.commonStrings = this._commonStringsService.keys;
@@ -4753,6 +4784,30 @@ class ClrTreetable {
         this.showSelection = computed(() => this.selectionType() === SelectionType.Multi, ...(ngDevMode ? [{ debugName: "showSelection" }] : /* istanbul ignore next */ []));
         this.areAllRowsSelected = computed(() => this._dataStateService.areAllNodesSelected(), ...(ngDevMode ? [{ debugName: "areAllRowsSelected" }] : /* istanbul ignore next */ []));
         this.hasActionOverflow = computed(() => this._actionOverflow()?.length > 0, ...(ngDevMode ? [{ debugName: "hasActionOverflow" }] : /* istanbul ignore next */ []));
+        /**
+         * All items of the data source as a flat, depth-first list. Active filters are ignored, the
+         * active sort is applied.
+         */
+        this.allItems = this._dataStateService.allItems;
+        /**
+         * All currently displayed items (filtered and sorted) as a flat, depth-first list.
+         */
+        this.displayedItems = this._dataStateService.displayedItems;
+        /**
+         * All currently selected items as a flat, depth-first list.
+         *
+         * Selection is tracked on the displayed nodes, so a selected item that is hidden by an active
+         * filter is not part of this list.
+         */
+        this.selectedItems = this._dataStateService.selectedNodes;
+        /**
+         * True as long as at least one filter of the treetable is active.
+         */
+        this.hasActiveFilters = this._filterStateService.hasActiveFilters;
+        /**
+         * State of all currently visible (not hidden) columns, in render order.
+         */
+        this.visibleColumnStates = this._columnStateService.visibleColumns;
         effect(() => {
             const selectedItems = this.clrTtSelected();
             if (selectedItems) {
@@ -4773,7 +4828,7 @@ class ClrTreetable {
             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\" data-testid=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\" data-testid=\"treetable-grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" data-testid=\"treetable-header\" [class.hide-header]=\"clrHideHeader()\">\n      @if (showSelection() && !empty()) {\n      <div class=\"treetable-row-selection treetable-column\" role=\"columnheader\">\n        <div class=\"clr-checkbox-wrapper\">\n          <input\n            type=\"checkbox\"\n            data-testId=\"clrTtSelectAll\"\n            [id]=\"selectAllId\"\n            [checked]=\"areAllRowsSelected()\"\n            (change)=\"toggleSelectAll()\"\n          />\n          <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a treetable is wrapped inside clrForm -->\n          <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\" data-testid=\"treetable-select-all-label\">\n            <span class=\"clr-sr-only\" data-testid=\"treetable-select-all-text\">{{ commonStrings.selectAll }}</span>\n          </label>\n        </div>\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\" data-testid=\"treetable-action-header\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\" data-testid=\"treetable-column-headers\">\n        <ng-content select=\"clr-tt-column\" />\n      </div>\n    </div>\n\n    <div class=\"treetable-body\" data-testid=\"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\" data-testid=\"treetable-loading\">\n    <clr-spinner clrMedium data-testid=\"treetable-loading-spinner\" />\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i2$5.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 }); }
+        ], 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\" data-testid=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\" data-testid=\"treetable-grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" data-testid=\"treetable-header\" [class.hide-header]=\"clrHideHeader()\">\n      @if (showSelection() && !empty()) {\n      <div class=\"treetable-row-selection treetable-column\" role=\"columnheader\">\n        <div class=\"clr-checkbox-wrapper\">\n          <input\n            type=\"checkbox\"\n            data-testId=\"clrTtSelectAll\"\n            [id]=\"selectAllId\"\n            [checked]=\"areAllRowsSelected()\"\n            (change)=\"toggleSelectAll()\"\n          />\n          <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a treetable is wrapped inside clrForm -->\n          <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\" data-testid=\"treetable-select-all-label\">\n            <span class=\"clr-sr-only\" data-testid=\"treetable-select-all-text\">{{ commonStrings.selectAll }}</span>\n          </label>\n        </div>\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\" data-testid=\"treetable-action-header\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\" data-testid=\"treetable-column-headers\">\n        <ng-content select=\"clr-tt-column\" />\n      </div>\n    </div>\n\n    <div class=\"treetable-body\" data-testid=\"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\" data-testid=\"treetable-loading\">\n    <clr-spinner clrMedium data-testid=\"treetable-loading-spinner\" />\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i2$6.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.22", ngImport: i0, type: ClrTreetable, decorators: [{
             type: Component,
@@ -5040,7 +5095,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 let columnId = 0;
 class ClrTreetableColumn {
     ngOnInit() {
-        this._columnState.register({ id: this.columnId, titleTemplateRef: this._columnTitleRef() });
+        this._columnState.register({
+            id: this.columnId,
+            titleTemplateRef: this._columnTitleRef(),
+            field: this.clrTtField() ?? undefined,
+            colType: this.clrTtColType(),
+        });
     }
     ngAfterViewInit() {
         // Only set a default testid if the consumer didn't already provide one.
@@ -5059,6 +5119,19 @@ class ClrTreetableColumn {
         this._columnTitleRef = viewChild('columnTitle', { ...(ngDevMode ? { debugName: "_columnTitleRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this._columnState = inject(TreetableColumnStateService);
         this._sort = inject((SortStateService));
+        /**
+         * Property path of the item rendered in this column, e.g. `name` or `address.city`.
+         *
+         * The treetable itself does not use this value for rendering. It is metadata consumed by features
+         * that need to map a column to a raw data property, most notably `clr-export-treetable-button`.
+         */
+        this.clrTtField = input(null, ...(ngDevMode ? [{ debugName: "clrTtField" }] : /* istanbul ignore next */ []));
+        /**
+         * Type of the values rendered in this column.
+         *
+         * It is only used as metadata for the export, where it determines the type of the written cells.
+         */
+        this.clrTtColType = input('string', ...(ngDevMode ? [{ debugName: "clrTtColType" }] : /* istanbul ignore next */ []));
         this.clrTtSortBy = input(null, ...(ngDevMode ? [{ debugName: "clrTtSortBy" }] : /* istanbul ignore next */ []));
         this._internalSortOrder = computed(() => {
             const sortState = this._sort.sortState();
@@ -5140,7 +5213,7 @@ class ClrTreetableColumn {
         this._sort.toggle(comparator, reverse);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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 }, clrTtColumnSize: { classPropertyName: "clrTtColumnSize", publicName: "clrTtColumnSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange", clrTtColumnResize: "clrTtColumnResize" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()" } }, providers: [ClrPopoverService], viewQueries: [{ propertyName: "_columnTitleRef", first: true, predicate: ["columnTitle"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtField: { classPropertyName: "clrTtField", publicName: "clrTtField", isSignal: true, isRequired: false, transformFunction: null }, clrTtColType: { classPropertyName: "clrTtColType", publicName: "clrTtColType", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null }, clrTtColumnSize: { classPropertyName: "clrTtColumnSize", publicName: "clrTtColumnSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange", clrTtColumnResize: "clrTtColumnResize" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()", "attr.data-column-id": "columnId" } }, 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" />
@@ -5205,12 +5278,251 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     host: {
                         '[class.treetable-column]': 'true',
                         '[attr.aria-sort]': 'ariaSort()',
+                        '[attr.data-column-id]': 'columnId',
                         role: 'columnheader',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: false,
                 }]
-        }], 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"] }], clrTtColumnSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtColumnSize", required: false }] }], clrTtColumnResize: [{ type: i0.Output, args: ["clrTtColumnResize"] }] } });
+        }], ctorParameters: () => [], propDecorators: { _columnTitleRef: [{ type: i0.ViewChild, args: ['columnTitle', { ...{ read: TemplateRef }, isSignal: true }] }], clrTtField: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtField", required: false }] }], clrTtColType: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtColType", required: false }] }], 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"] }], clrTtColumnSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtColumnSize", required: false }] }], clrTtColumnResize: [{ type: i0.Output, args: ["clrTtColumnResize"] }] } });
+
+/**
+ * Generic excel export service based on the optional `zipcelx` dependency.
+ *
+ * It is used as the shared writer for all export buttons of this library
+ * (e.g. datagrid and treetable export).
+ */
+class ExportExcelService {
+    constructor() {
+        this.init();
+    }
+    async init() {
+        try {
+            this.zipcelx = await import('zipcelx');
+        }
+        catch (error) {
+            console.warn('Optional feature requires `zipcelx`. Please install it: npm install zipcelx', error);
+        }
+    }
+    /**
+     * Writes the given headers and rows into an excel file and triggers the download.
+     *
+     * @param filename Name of the exported file (without extension).
+     * @param headers The header row of the exported sheet.
+     * @param rows The data rows of the exported sheet.
+     */
+    exportToExcel(filename, headers, rows) {
+        const config = {
+            filename,
+            sheet: {
+                data: [headers, ...rows],
+            },
+        };
+        this.zipcelx.default(config);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportExcelService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportExcelService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The available export types of the export buttons.
+ */
+var ExportTypeEnum;
+(function (ExportTypeEnum) {
+    /** All entries, ignoring active filters. */
+    ExportTypeEnum["ALL"] = "ALL";
+    /** Only the entries that pass the active filters. */
+    ExportTypeEnum["FILTERED"] = "FILTERED";
+    /** Only the currently selected entries. */
+    ExportTypeEnum["SELECTED"] = "SELECTED";
+})(ExportTypeEnum || (ExportTypeEnum = {}));
+
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/*
+ * Copyright (c) 2018-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.
+ */
+/**
+ * Export button for the `clr-treetable`.
+ *
+ * The button is placed as a sibling of the treetable and receives the treetable instance and its
+ * `ElementRef`. Column headers are read from the rendered treetable, cell values are resolved via
+ * the `clrTtField` property path of the corresponding `clr-tt-column`.
+ *
+ * `clrTtField` is the opt-in for the export: only columns that declare it are exported. A column
+ * without `clrTtField` is omitted entirely, header and values alike. Hidden columns are excluded as
+ * well. The type of the exported cells is taken from `clrTtColType` (`string` by default).
+ *
+ * The button offers the same export types as the datagrid export button:
+ * - `ALL`: all rows, ignoring active filters. The active sort is applied.
+ * - `FILTERED`: the rows that pass the active filters. Only offered while a filter is active.
+ * - `SELECTED`: the currently selected rows. Only offered while at least one row is selected.
+ *   Selection is tracked on the displayed rows, so a selected row that is hidden by a filter is not
+ *   part of the export.
+ *
+ * @example
+ * <clr-export-treetable-button [treetable]="tt" [treetableRef]="ttRef" />
+ * <clr-treetable #tt>...</clr-treetable>
+ */
+class ExportTreetableButtonComponent {
+    constructor() {
+        this._exportService = inject(ExportExcelService);
+        /** The treetable instance to export. */
+        this.treetable = input(...(ngDevMode ? [undefined, { debugName: "treetable" }] : /* istanbul ignore next */ []));
+        /** The `ElementRef` of the same treetable, used to read the rendered column titles. */
+        this.treetableRef = input(...(ngDevMode ? [undefined, { debugName: "treetableRef" }] : /* istanbul ignore next */ []));
+        /** Restricts and/or relabels the offered export types. */
+        this.exportTypesToShow = input(...(ngDevMode ? [undefined, { debugName: "exportTypesToShow" }] : /* istanbul ignore next */ []));
+        /** If true, no file is written and `backendExport` is emitted instead. */
+        this.isBackendExport = input(false, ...(ngDevMode ? [{ debugName: "isBackendExport" }] : /* istanbul ignore next */ []));
+        /** File name of the exported file (without extension). */
+        this.exportTitlePrefix = input('export-treetable', ...(ngDevMode ? [{ debugName: "exportTitlePrefix" }] : /* istanbul ignore next */ []));
+        /** Horizontal alignment of the button. */
+        this.exportButtonPosition = input('right', ...(ngDevMode ? [{ debugName: "exportButtonPosition" }] : /* istanbul ignore next */ []));
+        /** Custom or translated label of the button. */
+        this.exportButtonText = input('EXPORT', ...(ngDevMode ? [{ debugName: "exportButtonText" }] : /* istanbul ignore next */ []));
+        /** Emitted instead of writing a file when `isBackendExport` is true. */
+        this.backendExport = output();
+        this.exportTypes = [
+            { type: ExportTypeEnum.ALL, value: 'All entries' },
+            { type: ExportTypeEnum.FILTERED, value: 'Filtered entries' },
+            { type: ExportTypeEnum.SELECTED, value: 'Selected entries' },
+        ];
+        /**
+         * The export types that are currently possible. `FILTERED` is only possible while at least one
+         * filter is active, `SELECTED` only if at least one row is selected.
+         */
+        this.possibleExportTypes = computed(() => {
+            const treetable = this.treetable();
+            const types = [ExportTypeEnum.ALL];
+            if (treetable?.hasActiveFilters()) {
+                types.push(ExportTypeEnum.FILTERED);
+            }
+            if (treetable?.selectedItems()?.length > 0) {
+                types.push(ExportTypeEnum.SELECTED);
+            }
+            return types;
+        }, ...(ngDevMode ? [{ debugName: "possibleExportTypes" }] : /* istanbul ignore next */ []));
+        /**
+         * The export types shown in the dropdown, restricted by `exportTypesToShow` and by the current
+         * state of the treetable.
+         */
+        this.exportTypesFiltered = computed(() => {
+            let exportTypesToShowVal = this.exportTypesToShow();
+            if (!exportTypesToShowVal || exportTypesToShowVal.length === 0) {
+                exportTypesToShowVal = this.exportTypes;
+            }
+            return exportTypesToShowVal
+                .filter(showType => this.possibleExportTypes().some(type => type === showType.type))
+                .map(showType => ({
+                type: showType.type,
+                value: showType.value ?? this.exportTypes.find(type => type.type === showType.type)?.value,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "exportTypesFiltered" }] : /* istanbul ignore next */ []));
+    }
+    onExport(type) {
+        if (this.isBackendExport()) {
+            this.backendExport.emit(type);
+        }
+        else {
+            this.exportExcel(type);
+        }
+    }
+    exportExcel(type) {
+        const treetable = this.treetable();
+        if (!treetable || !this.treetableRef()) {
+            return;
+        }
+        const columnTitles = this.getColumnTitles();
+        // `clrTtField` is the opt-in for the export: columns without it are omitted entirely.
+        const exportColumns = treetable.visibleColumnStates().filter(column => !!column.field);
+        if (exportColumns.length === 0) {
+            console.warn('No columns declared for export. Add [clrTtField] to a treetable column that should be exported.');
+            return;
+        }
+        const headerRow = exportColumns.map(column => ({
+            value: columnTitles.get(column.id) ?? '',
+            type: 'string',
+        }));
+        const dataRows = this.getRowsToExport(type).map(item => exportColumns.map(column => this.toCell(this.getValueByPath(item, column.field), column.colType)));
+        this._exportService.exportToExcel(this.exportTitlePrefix(), headerRow, dataRows);
+    }
+    getRowsToExport(type) {
+        switch (type) {
+            case ExportTypeEnum.ALL:
+                return this.treetable()?.allItems() ?? [];
+            case ExportTypeEnum.FILTERED:
+                return this.treetable()?.displayedItems() ?? [];
+            case ExportTypeEnum.SELECTED:
+                return this.treetable()?.selectedItems() ?? [];
+            default:
+                return [];
+        }
+    }
+    /**
+     * Reads the rendered column titles from the DOM and maps them by column id. Hidden columns are
+     * skipped, because they are not part of the export either.
+     */
+    getColumnTitles() {
+        const nativeEl = this.treetableRef()?.nativeElement;
+        const columnEls = nativeEl?.querySelectorAll(`clr-tt-column:not(${HIDDEN_COLUMN_CSS_CLASS})`) ?? [];
+        const titles = new Map();
+        columnEls.forEach(columnEl => {
+            const columnId = columnEl.getAttribute('data-column-id');
+            if (!columnId) {
+                return;
+            }
+            titles.set(columnId, columnEl.querySelector('.treetable-column-title')?.textContent?.trim() ?? '');
+        });
+        return titles;
+    }
+    /**
+     * Resolves a (possibly nested) property path like `address.city` on the given item.
+     */
+    getValueByPath(item, path) {
+        if (!path) {
+            return undefined;
+        }
+        return path.split('.').reduce((current, segment) => current?.[segment], item);
+    }
+    /**
+     * Maps a resolved value to an export cell.
+     *
+     * The cell type is taken from the `clrTtColType` of the column (`string` by default). A `number`
+     * column falls back to `string` for values that are not a finite number, because an empty numeric
+     * cell would result in an invalid excel file.
+     */
+    toCell(value, colType = 'string') {
+        const stringValue = value == null ? '' : String(value);
+        const isNumber = colType === 'number' && stringValue.trim() !== '' && Number.isFinite(Number(stringValue));
+        return {
+            value: stringValue,
+            type: isNumber ? 'number' : 'string',
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportTreetableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ExportTreetableButtonComponent, isStandalone: false, selector: "clr-export-treetable-button", inputs: { treetable: { classPropertyName: "treetable", publicName: "treetable", isSignal: true, isRequired: false, transformFunction: null }, treetableRef: { classPropertyName: "treetableRef", publicName: "treetableRef", 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  [class]=\"{\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\" data-testid=\"clr-tt-export-trigger\">\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.type) {\n        <button\n          (click)=\"onExport(exportType.type)\"\n          clrDropdownItem\n          [attr.data-testid]=\"'clr-tt-export-' + exportType.type\"\n        >\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}\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: i2$3.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2$3.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2$3.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2$3.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$4.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportTreetableButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-export-treetable-button', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"{\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\" data-testid=\"clr-tt-export-trigger\">\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.type) {\n        <button\n          (click)=\"onExport(exportType.type)\"\n          clrDropdownItem\n          [attr.data-testid]=\"'clr-tt-export-' + exportType.type\"\n        >\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}\n"] }]
+        }], propDecorators: { treetable: [{ type: i0.Input, args: [{ isSignal: true, alias: "treetable", required: false }] }], treetableRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "treetableRef", 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: [{ type: i0.Output, args: ["backendExport"] }] } });
 
 let id = 0;
 class ClrTreetableColumnManagerMenuComponent {
@@ -5315,7 +5627,7 @@ class ClrTreetableColumnManagerMenuComponent {
         </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 }); }
+  `, 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$4.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$4.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$4.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$4.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.22", ngImport: i0, type: ClrTreetableColumnManagerMenuComponent, decorators: [{
             type: Component,
@@ -5616,7 +5928,7 @@ class ClrTreetableFilter {
 
       <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"] }, { kind: "directive", type: i1$2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }], 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$4.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$4.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$4.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$4.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.22", ngImport: i0, type: ClrTreetableFilter, decorators: [{
             type: Component,
@@ -6156,7 +6468,7 @@ class ClrTreetableStringFilter {
         />
       </clr-input-container>
     </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 }); }
+  `, 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$1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$1.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.22", ngImport: i0, type: ClrTreetableStringFilter, decorators: [{
             type: Component,
@@ -6209,6 +6521,7 @@ const CLR_TREETABLE_DIRECTIVES = [
     TreetableItemsDirective,
     ClrTreetableFilter,
     ClrTreetableStringFilter,
+    ExportTreetableButtonComponent,
 ];
 class ClrTreetableModule {
     constructor() {
@@ -6229,7 +6542,8 @@ class ClrTreetableModule {
             TreetableCellRenderer,
             TreetableItemsDirective,
             ClrTreetableFilter,
-            ClrTreetableStringFilter, ClrTreetableRecursiveRows,
+            ClrTreetableStringFilter,
+            ExportTreetableButtonComponent, ClrTreetableRecursiveRows,
             ClrTreetableRowCheckbox,
             ClrTreetableColumnManagerMenuComponent,
             ClrTreetableColumnSeparator], imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule], exports: [ClrTreetable,
@@ -6246,7 +6560,8 @@ class ClrTreetableModule {
             TreetableCellRenderer,
             TreetableItemsDirective,
             ClrTreetableFilter,
-            ClrTreetableStringFilter] }); }
+            ClrTreetableStringFilter,
+            ExportTreetableButtonComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrTreetableModule, decorators: [{
@@ -6654,7 +6969,7 @@ class ClrHistory {
         this.historyService.setHistoryPinned(this.username, !this.pinActivated);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", 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.22", 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\n    type=\"button\"\n    class=\"btn btn-icon btn-outline-primary history-button\"\n    clrDropdownTrigger\n    data-testid=\"history-trigger\"\n  >\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 data-testid=\"history-menu\">\n    <label class=\"dropdown-header\" aria-hidden=\"true\" data-testid=\"history-header\">{{ dropdownHeader }}</label>\n    @for (history of historyElements$ | async; track history) {\n    <button\n      type=\"button\"\n      clrDropdownItem\n      (click)=\"select(history)\"\n      [attr.data-testid]=\"'history-option-' + (history.title)\"\n    >\n      {{ history.title }}\n    </button>\n    } @if (pinActive) {\n    <div class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    }\n    <button clrDropdownItem (click)=\"togglePinHistory()\" data-testid=\"history-pin-toggle\">\n      @if (pinActive && !pinActivated) {\n      <span data-testid=\"history-pin-label\">{{ dropdownPin }}</span>\n      } @if (pinActive && pinActivated) {\n      <span data-testid=\"history-unpin-label\">{{ 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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\n    type=\"button\"\n    class=\"btn btn-icon btn-outline-primary history-button\"\n    clrDropdownTrigger\n    data-testid=\"history-trigger\"\n  >\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 data-testid=\"history-menu\">\n    <label class=\"dropdown-header\" aria-hidden=\"true\" data-testid=\"history-header\">{{ dropdownHeader }}</label>\n    @for (history of historyElements$ | async; track history) {\n    <button\n      type=\"button\"\n      clrDropdownItem\n      (click)=\"select(history)\"\n      [attr.data-testid]=\"'history-option-' + (history.title)\"\n    >\n      {{ history.title }}\n    </button>\n    } @if (pinActive) {\n    <div class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    }\n    <button clrDropdownItem (click)=\"togglePinHistory()\" data-testid=\"history-pin-toggle\">\n      @if (pinActive && !pinActivated) {\n      <span data-testid=\"history-pin-label\">{{ dropdownPin }}</span>\n      } @if (pinActive && pinActivated) {\n      <span data-testid=\"history-unpin-label\">{{ 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: i2$3.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2$3.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2$3.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2$3.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$4.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.22", ngImport: i0, type: ClrHistory, decorators: [{
             type: Component,
@@ -12642,7 +12957,7 @@ class LocationBarSearchComponent {
         return `Type ${this.searchRequest?.minCharacters ?? this.MIN_CHARACTERS_DEFAULT}+ characters to search.`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LocationBarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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        data-testid=\"location-bar-search-input\"\n      />\n      @if (displayWarning) {\n      <clr-control-helper class=\"min-text-warning\" data-testid=\"location-bar-search-min-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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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        data-testid=\"location-bar-search-input\"\n      />\n      @if (displayWarning) {\n      <clr-control-helper class=\"min-text-warning\" data-testid=\"location-bar-search-min-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$1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$1.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.22", ngImport: i0, type: LocationBarSearchComponent, decorators: [{
             type: Component,
@@ -12768,7 +13083,7 @@ class LocationBarNodeComponent {
         this.searchItemChanged.emit(searchedItem);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", 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.22", 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) {\n  @if (parentNode.getChildren()?.length > 0) {\n    <ng-content></ng-content>\n  }\n  @if ((selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1) {\n    <clr-dropdown data-testid=\"location-bar-dropdown\">\n      <button\n        class=\"btn btn-link btn-sm\"\n        (blur)=\"focus = false\"\n        (focus)=\"focus = true\"\n        (click)=\"resetSearch()\"\n        clrDropdownTrigger\n        data-testid=\"location-bar-dropdown-trigger\"\n      >\n        @if (parentNode.getSelectedChild(); as node) {\n          <span\n            (click)=\"resetSearch()\"\n            class=\"text-truncate\"\n            [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n            title=\"{{ node.label }}\"\n            [attr.data-testid]=\"'location-bar-selected-node-' + 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\n            class=\"locationbar-unselected\"\n            size=\"18\"\n            [solid]=\"focus\"\n            shape=\"tree-view\"\n            data-testid=\"location-bar-unselected-icon\"\n          ></cds-icon\n          >&nbsp;...\n        }\n      </button>\n      <clr-dropdown-menu\n        class=\"locationbar-clr-dropdown-menu\"\n        [clrPosition]=\"'bottom-left'\"\n        [clrDropdownMenuItemMinHeight]=\"'24px'\"\n        *clrIfOpen\n      >\n        @if (searchRequest) {\n          <clr-location-bar-search\n            #locationBarSearch\n            [clrSearchRequest]=\"searchRequest\"\n            (searchPerformed)=\"onSearch($event)\"\n          ></clr-location-bar-search>\n        }\n        @if (displaySearchResult()) {\n          @if (searchResultItems.length !== 0) {\n            @for (searchResultItem of searchResultItems; track searchResultItem; let index = $index) {\n              <button\n                type=\"button\"\n                clrDropdownItem\n                class=\"text-truncate\"\n                (click)=\"onSearchItemChanged(searchResultItem)\"\n                [attr.data-testid]=\"'location-bar-search-result-' + index\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"searchRequest?.searchResultItemRef; context: { $implicit: searchResultItem }\"\n                ></ng-container>\n              </button>\n            }\n          } @else {\n            <span class=\"locationbar-no-result-text\" data-testid=\"location-bar-no-results-text\">\n              {{ searchRequest?.noResultsText ?? 'No search result found.' }}\n            </span>\n          }\n        } @else {\n          @for (item of selectableChilds; track item) {\n            <button\n              type=\"button\"\n              clrDropdownItem\n              class=\"text-truncate\"\n              [class.locationbar-selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n              (click)=\"selectNode(item)\"\n              title=\"{{ item.label }}\"\n              [attr.data-testid]=\"'location-bar-child-' + item.label\"\n            >\n              {{ item.label }}\n            </button>\n          }\n        }\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  } @else {\n    @if (parentNode.getSelectedChild()) {\n      @if (parentNode.getSelectedChild().selectable) {\n        <button\n          class=\"btn btn-link btn-sm locationbar-btn\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n          [attr.data-testid]=\"'location-bar-selected-button-' + parentNode.getSelectedChild().label\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      } @else {\n        <span\n          class=\"locationbar-unselectable-node text-truncate\"\n          [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n          [attr.data-testid]=\"'location-bar-unselectable-node-' + parentNode.getSelectedChild().label\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      }\n    }\n  }\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 data-testid=\"location-bar-separator\">/</span>\n    </clr-location-bar-node>\n  }\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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) {\n  @if (parentNode.getChildren()?.length > 0) {\n    <ng-content></ng-content>\n  }\n  @if ((selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1) {\n    <clr-dropdown data-testid=\"location-bar-dropdown\">\n      <button\n        class=\"btn btn-link btn-sm\"\n        (blur)=\"focus = false\"\n        (focus)=\"focus = true\"\n        (click)=\"resetSearch()\"\n        clrDropdownTrigger\n        data-testid=\"location-bar-dropdown-trigger\"\n      >\n        @if (parentNode.getSelectedChild(); as node) {\n          <span\n            (click)=\"resetSearch()\"\n            class=\"text-truncate\"\n            [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n            title=\"{{ node.label }}\"\n            [attr.data-testid]=\"'location-bar-selected-node-' + 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\n            class=\"locationbar-unselected\"\n            size=\"18\"\n            [solid]=\"focus\"\n            shape=\"tree-view\"\n            data-testid=\"location-bar-unselected-icon\"\n          ></cds-icon\n          >&nbsp;...\n        }\n      </button>\n      <clr-dropdown-menu\n        class=\"locationbar-clr-dropdown-menu\"\n        [clrPosition]=\"'bottom-left'\"\n        [clrDropdownMenuItemMinHeight]=\"'24px'\"\n        *clrIfOpen\n      >\n        @if (searchRequest) {\n          <clr-location-bar-search\n            #locationBarSearch\n            [clrSearchRequest]=\"searchRequest\"\n            (searchPerformed)=\"onSearch($event)\"\n          ></clr-location-bar-search>\n        }\n        @if (displaySearchResult()) {\n          @if (searchResultItems.length !== 0) {\n            @for (searchResultItem of searchResultItems; track searchResultItem; let index = $index) {\n              <button\n                type=\"button\"\n                clrDropdownItem\n                class=\"text-truncate\"\n                (click)=\"onSearchItemChanged(searchResultItem)\"\n                [attr.data-testid]=\"'location-bar-search-result-' + index\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"searchRequest?.searchResultItemRef; context: { $implicit: searchResultItem }\"\n                ></ng-container>\n              </button>\n            }\n          } @else {\n            <span class=\"locationbar-no-result-text\" data-testid=\"location-bar-no-results-text\">\n              {{ searchRequest?.noResultsText ?? 'No search result found.' }}\n            </span>\n          }\n        } @else {\n          @for (item of selectableChilds; track item) {\n            <button\n              type=\"button\"\n              clrDropdownItem\n              class=\"text-truncate\"\n              [class.locationbar-selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n              (click)=\"selectNode(item)\"\n              title=\"{{ item.label }}\"\n              [attr.data-testid]=\"'location-bar-child-' + item.label\"\n            >\n              {{ item.label }}\n            </button>\n          }\n        }\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  } @else {\n    @if (parentNode.getSelectedChild()) {\n      @if (parentNode.getSelectedChild().selectable) {\n        <button\n          class=\"btn btn-link btn-sm locationbar-btn\"\n          (click)=\"selectNode(parentNode.getSelectedChild())\"\n          [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n          [attr.data-testid]=\"'location-bar-selected-button-' + parentNode.getSelectedChild().label\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </button>\n      } @else {\n        <span\n          class=\"locationbar-unselectable-node text-truncate\"\n          [class.locationbar-last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n          title=\"{{ parentNode.getSelectedChild().label }}\"\n          [attr.data-testid]=\"'location-bar-unselectable-node-' + parentNode.getSelectedChild().label\"\n        >\n          {{ parentNode.getSelectedChild().label }}\n        </span>\n      }\n    }\n  }\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 data-testid=\"location-bar-separator\">/</span>\n    </clr-location-bar-node>\n  }\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: i2$3.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2$3.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2$3.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2$3.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$4.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.22", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
             type: Component,
@@ -15046,7 +15361,7 @@ class ClrTimepickerComponent {
         this.inputElm.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", 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\n    clrInput\n    #inputElm\n    [(ngModel)]=\"this.time\"\n    type=\"time\"\n    step=\"{{ activateSeconds ? 1 : 60 }}\"\n    data-testid=\"timepicker-input\"\n  />\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", 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\n    clrInput\n    #inputElm\n    [(ngModel)]=\"this.time\"\n    type=\"time\"\n    step=\"{{ activateSeconds ? 1 : 60 }}\"\n    data-testid=\"timepicker-input\"\n  />\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$1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3$1.ClrInputContainer, selector: "clr-input-container" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrTimepickerComponent, decorators: [{
             type: Component,
@@ -15284,7 +15599,7 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", 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.22", 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        data-testid=\"daterangepicker-toggle-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    }\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  }\n  @if (this.showInvalid) {\n    <ng-content select=\"clr-control-error\"></ng-content>\n  }\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    data-testid=\"daterangepicker-popup\"\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      data-testid=\"daterangepicker-clear-button\"\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      data-testid=\"daterangepicker-close-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            data-testid=\"daterangepicker-date-from\"\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              data-testid=\"daterangepicker-time-from\"\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            data-testid=\"daterangepicker-date-to\"\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              data-testid=\"daterangepicker-time-to\"\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\n              (click)=\"this.applyPreset(preset)\"\n              class=\"btn btn-outline btn-sm btn-block\"\n              type=\"button\"\n              [attr.data-testid]=\"'daterangepicker-preset-' + preset.text\"\n            >\n              {{ preset.text }}\n            </button>\n          }\n        </div>\n      }\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\n              (click)=\"this.applyPresetTime(preset)\"\n              class=\"btn btn-outline btn-sm btn-block\"\n              type=\"button\"\n              [attr.data-testid]=\"'daterangepicker-time-preset-' + preset.text\"\n            >\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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        data-testid=\"daterangepicker-toggle-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    }\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  }\n  @if (this.showInvalid) {\n    <ng-content select=\"clr-control-error\"></ng-content>\n  }\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    data-testid=\"daterangepicker-popup\"\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      data-testid=\"daterangepicker-clear-button\"\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      data-testid=\"daterangepicker-close-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            data-testid=\"daterangepicker-date-from\"\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              data-testid=\"daterangepicker-time-from\"\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            data-testid=\"daterangepicker-date-to\"\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              data-testid=\"daterangepicker-time-to\"\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\n              (click)=\"this.applyPreset(preset)\"\n              class=\"btn btn-outline btn-sm btn-block\"\n              type=\"button\"\n              [attr.data-testid]=\"'daterangepicker-preset-' + preset.text\"\n            >\n              {{ preset.text }}\n            </button>\n          }\n        </div>\n      }\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\n              (click)=\"this.applyPresetTime(preset)\"\n              class=\"btn btn-outline btn-sm btn-block\"\n              type=\"button\"\n              [attr.data-testid]=\"'daterangepicker-time-preset-' + preset.text\"\n            >\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$4.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$4.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$4.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$4.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.22", ngImport: i0, type: ClrDaterangepickerContainerComponent, decorators: [{
             type: Component,
@@ -16979,40 +17294,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-var ExportTypeEnum;
-(function (ExportTypeEnum) {
-    ExportTypeEnum["ALL"] = "ALL";
-    ExportTypeEnum["FILTERED"] = "FILTERED";
-    ExportTypeEnum["SELECTED"] = "SELECTED";
-})(ExportTypeEnum || (ExportTypeEnum = {}));
-
-class ExportDatagridService {
-    constructor() {
-        this.init();
-    }
-    async init() {
-        try {
-            this.zipcelx = await import('zipcelx');
-        }
-        catch (error) {
-            console.warn('Optional feature requires `zipcelx`. Please install it: npm install zipcelx', error);
-        }
-    }
-    exportToExcel(filename, headers, rows) {
-        const config = {
-            filename,
-            sheet: {
-                data: [headers, ...rows],
-            },
-        };
-        this.zipcelx.default(config);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportDatagridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+/**
+ * Excel export service used by the datagrid export button.
+ *
+ * It is a thin alias of the shared {@link ExportExcelService}.
+ */
+class ExportDatagridService extends ExportExcelService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportDatagridService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportDatagridService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportDatagridService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 
 class ExportDatagridButtonComponent {
     constructor(exportService) {
@@ -17083,7 +17376,7 @@ class ExportDatagridButtonComponent {
         const rowsToExport = this.getRowsToExport(type);
         // Map data rows for visible columns only
         const dataRows = rowsToExport.map(row => visibleColumns.map(col => ({
-            value: String(row[col.field] ?? ''),
+            value: String(this.getValueByPath(row, col.field) ?? ''),
             type: col.colType,
         })));
         this.exportService.exportToExcel(this.exportTitlePrefix(), headerRow, dataRows);
@@ -17124,6 +17417,15 @@ class ExportDatagridButtonComponent {
                 return [];
         }
     }
+    /**
+     * Resolves a (possibly nested) property path like `address.city` on the given item.
+     */
+    getValueByPath(item, path) {
+        if (!path) {
+            return undefined;
+        }
+        return path.split('.').reduce((current, segment) => current?.[segment], item);
+    }
     getColumnsTitle() {
         const nativeEl = this.datagridRef()?.nativeElement;
         const headerEls = nativeEl?.querySelectorAll('clr-dg-column:not(.datagrid-hidden-column)') ?? [];
@@ -17137,7 +17439,7 @@ class ExportDatagridButtonComponent {
         return columnTitles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ExportDatagridButtonComponent, deps: [{ token: ExportDatagridService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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: i2$3.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2$3.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2$3.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2$3.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2$4.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.22", ngImport: i0, type: ExportDatagridButtonComponent, decorators: [{
             type: Component,
@@ -17265,7 +17567,7 @@ class ClrCopyToClipboard {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", 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    data-testid=\"copy-to-clipboard-button\"\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    data-testid=\"copy-to-clipboard-tooltip\"\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$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", 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    data-testid=\"copy-to-clipboard-button\"\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    data-testid=\"copy-to-clipboard-tooltip\"\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$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i2$4.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrCopyToClipboard, decorators: [{
             type: Component,
@@ -17521,7 +17823,7 @@ class ClrSummaryItemValue {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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\n    clrTooltipTrigger\n    class=\"value-icon-link\"\n    [href]=\"href()\"\n    [attr.target]=\"target() ?? null\"\n    (click)=\"handleClick()\"\n    data-testid=\"summary-item-value-icon-link\"\n  >\n    <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n  </a>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-icon-link-tooltip\"\n  >\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a\n  class=\"value-icon-link\"\n  [href]=\"href()\"\n  [attr.target]=\"target() ?? null\"\n  (click)=\"handleClick()\"\n  data-testid=\"summary-item-value-icon-link-plain\"\n>\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    data-testid=\"summary-item-value-icon-action\"\n  ></cds-icon>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-icon-action-tooltip\"\n  >\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  data-testid=\"summary-item-value-icon-action-plain\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [shape]=\"icon()\"\n    class=\"value-icon value-icon-neutral\"\n    data-testid=\"summary-item-value-icon\"\n  ></cds-icon>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-icon-tooltip\"\n  >\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\" data-testid=\"summary-item-value-icon-plain\"></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    data-testid=\"summary-item-value-link\"\n  >\n    {{ value() }}\n  </a>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-link-tooltip\"\n  >\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a\n  #valueElement\n  class=\"value value-link\"\n  [href]=\"href()\"\n  [attr.target]=\"target() ?? null\"\n  (click)=\"handleClick()\"\n  data-testid=\"summary-item-value-link-plain\"\n>\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    data-testid=\"summary-item-value-action\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-action-tooltip\"\n  >\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger data-testid=\"summary-item-value\">{{ value() }}</span>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-tooltip\"\n  >\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\" data-testid=\"summary-item-value-plain\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent data-testid=\"summary-item-value-projected\">\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$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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\n    clrTooltipTrigger\n    class=\"value-icon-link\"\n    [href]=\"href()\"\n    [attr.target]=\"target() ?? null\"\n    (click)=\"handleClick()\"\n    data-testid=\"summary-item-value-icon-link\"\n  >\n    <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n  </a>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-icon-link-tooltip\"\n  >\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a\n  class=\"value-icon-link\"\n  [href]=\"href()\"\n  [attr.target]=\"target() ?? null\"\n  (click)=\"handleClick()\"\n  data-testid=\"summary-item-value-icon-link-plain\"\n>\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    data-testid=\"summary-item-value-icon-action\"\n  ></cds-icon>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-icon-action-tooltip\"\n  >\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  data-testid=\"summary-item-value-icon-action-plain\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [shape]=\"icon()\"\n    class=\"value-icon value-icon-neutral\"\n    data-testid=\"summary-item-value-icon\"\n  ></cds-icon>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-icon-tooltip\"\n  >\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\" data-testid=\"summary-item-value-icon-plain\"></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    data-testid=\"summary-item-value-link\"\n  >\n    {{ value() }}\n  </a>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-link-tooltip\"\n  >\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a\n  #valueElement\n  class=\"value value-link\"\n  [href]=\"href()\"\n  [attr.target]=\"target() ?? null\"\n  (click)=\"handleClick()\"\n  data-testid=\"summary-item-value-link-plain\"\n>\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    data-testid=\"summary-item-value-action\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-action-tooltip\"\n  >\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger data-testid=\"summary-item-value\">{{ value() }}</span>\n  <clr-tooltip-content\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    data-testid=\"summary-item-value-tooltip\"\n  >\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\" data-testid=\"summary-item-value-plain\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent data-testid=\"summary-item-value-projected\">\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$4.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
             type: Component,
@@ -18147,7 +18449,7 @@ class ClrSummaryArea {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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  data-testid=\"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    data-testid=\"summary-area-state-panel\"\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        data-testid=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\" data-testid=\"summary-area-loading-spinner\"></clr-spinner>\n        <span class=\"loading-text\" data-testid=\"summary-area-loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\" data-testid=\"summary-area-error-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\" data-testid=\"summary-area-error\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\" data-testid=\"summary-area-error-text\">{{ errorText }}</span>\n            <span\n              class=\"alert-action\"\n              (click)=\"errorClick()\"\n              (keydown.enter)=\"errorClick()\"\n              data-testid=\"summary-area-error-action\"\n              >{{ errorLinkText }}</span\n            >\n            } @else if (errorClick) {\n            <span\n              class=\"alert-action\"\n              (click)=\"errorClick()\"\n              (keydown.enter)=\"errorClick()\"\n              data-testid=\"summary-area-error-text-action\"\n              >{{ errorText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\" data-testid=\"summary-area-error-text-only\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\" data-testid=\"summary-area-warning-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\" data-testid=\"summary-area-warning\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\" data-testid=\"summary-area-warning-text\">{{ warningText }}</span>\n            <span\n              class=\"alert-action\"\n              (click)=\"warningClick()\"\n              (keydown.enter)=\"warningClick()\"\n              data-testid=\"summary-area-warning-action\"\n            >\n              {{ warningLinkText }}\n            </span>\n            } @else if (warningClick) {\n            <span\n              class=\"alert-action\"\n              (click)=\"warningClick()\"\n              (keydown.enter)=\"warningClick()\"\n              data-testid=\"summary-area-warning-text-action\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\" data-testid=\"summary-area-warning-text-only\">{{ 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    data-testid=\"summary-area-grid-panel\"\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\n          class=\"summary-grid\"\n          [style.--columns]=\"currentColumns\"\n          [style.--rows]=\"currentRows()\"\n          data-testid=\"summary-area-grid\"\n        >\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: i2$5.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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  data-testid=\"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    data-testid=\"summary-area-state-panel\"\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        data-testid=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\" data-testid=\"summary-area-loading-spinner\"></clr-spinner>\n        <span class=\"loading-text\" data-testid=\"summary-area-loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\" data-testid=\"summary-area-error-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\" data-testid=\"summary-area-error\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\" data-testid=\"summary-area-error-text\">{{ errorText }}</span>\n            <span\n              class=\"alert-action\"\n              (click)=\"errorClick()\"\n              (keydown.enter)=\"errorClick()\"\n              data-testid=\"summary-area-error-action\"\n              >{{ errorLinkText }}</span\n            >\n            } @else if (errorClick) {\n            <span\n              class=\"alert-action\"\n              (click)=\"errorClick()\"\n              (keydown.enter)=\"errorClick()\"\n              data-testid=\"summary-area-error-text-action\"\n              >{{ errorText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\" data-testid=\"summary-area-error-text-only\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\" data-testid=\"summary-area-warning-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\" data-testid=\"summary-area-warning\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\" data-testid=\"summary-area-warning-text\">{{ warningText }}</span>\n            <span\n              class=\"alert-action\"\n              (click)=\"warningClick()\"\n              (keydown.enter)=\"warningClick()\"\n              data-testid=\"summary-area-warning-action\"\n            >\n              {{ warningLinkText }}\n            </span>\n            } @else if (warningClick) {\n            <span\n              class=\"alert-action\"\n              (click)=\"warningClick()\"\n              (keydown.enter)=\"warningClick()\"\n              data-testid=\"summary-area-warning-text-action\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\" data-testid=\"summary-area-warning-text-only\">{{ 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    data-testid=\"summary-area-grid-panel\"\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\n          class=\"summary-grid\"\n          [style.--columns]=\"currentColumns\"\n          [style.--rows]=\"currentRows()\"\n          data-testid=\"summary-area-grid\"\n        >\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$5.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i2$5.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i2$5.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i2$6.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ClrSummaryArea, decorators: [{
             type: Component,
@@ -18234,5 +18536,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", 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, 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, sparkles, sparklesIcon, 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, ExportExcelService, ExportTreetableButtonComponent, 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, sparkles, sparklesIcon, 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