@porscheinformatik/clr-addons 19.6.1 → 19.7.0

package/fesm2022/clr-addons.mjs

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, HostListener, InjectionToken, ChangeDetectionStrategy, isSignal, LOCALE_ID, Self } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, inject, ChangeDetectorRef, output, ChangeDetectionStrategy, DestroyRef, signal, input, IterableDiffers, ViewContainerRef, effect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT, getLocaleDateFormat, FormatWidth } from '@angular/common';
+import { CommonModule, DOCUMENT, NgForOf, getLocaleDateFormat, FormatWidth } from '@angular/common';
 import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon, exclamationCircleIcon, searchIcon, ellipsisVerticalIcon, pencilIcon, historyIcon as historyIcon$1, treeViewIcon, organizationIcon, calendarIcon, checkCircleIcon, windowCloseIcon, exclamationTriangleIcon } from '@cds/core/icon';
 import * as i2 from '@clr/angular';
 import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAlignment, ClrSide, ClrAxis, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDatagridColumn, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule } from '@clr/angular';
 import * as i3$1 from '@angular/forms';
-import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, NgModel } from '@angular/forms';
-import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, ReplaySubject, takeUntil as takeUntil$1, of, delay } from 'rxjs';
-import { takeUntil, take, observeOn } from 'rxjs/operators';
+import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, NgModel } from '@angular/forms';
+import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, debounceTime, fromEvent, ReplaySubject, takeUntil as takeUntil$1, of, delay } from 'rxjs';
+import { takeUntil, take, observeOn, debounceTime as debounceTime$1 } from 'rxjs/operators';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { trigger, transition, style, animate, state } from '@angular/animations';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/common/http';
 import '@cds/core/icon/register.js';
 
@@ -3578,27 +3579,404 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+/*
+ * Copyright (c) 2018-2025 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.
+ */
+var SelectionType;
+(function (SelectionType) {
+    SelectionType[SelectionType["None"] = 0] = "None";
+    SelectionType[SelectionType["Multi"] = 1] = "Multi";
+})(SelectionType || (SelectionType = {}));
+
+/*
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class Sort {
+    constructor() {
+        this._reverse = false;
+        this._change = new Subject();
+    }
+    get comparator() {
+        return this._comparator;
+    }
+    set comparator(value) {
+        this._comparator = value;
+        this.emitChange();
+    }
+    get reverse() {
+        return this._reverse;
+    }
+    set reverse(value) {
+        this._reverse = value;
+        this.emitChange();
+    }
+    // We do not want to expose the Subject itself, but the Observable which is read-only
+    get change() {
+        return this._change.asObservable();
+    }
+    /**
+     * Sets a comparator as the current one, or toggles reverse if the comparator is already used. The
+     * optional forceReverse input parameter allows to override that toggling behavior by sorting in
+     * reverse order if `true`.
+     *
+     * @memberof Sort
+     */
+    toggle(sortBy, forceReverse) {
+        if (this.comparator === sortBy) {
+            this._reverse = typeof forceReverse !== 'undefined' ? forceReverse || !this._reverse : !this._reverse;
+        }
+        else {
+            this._comparator = sortBy;
+            this._reverse = typeof forceReverse !== 'undefined' ? forceReverse : false;
+        }
+        this.emitChange();
+    }
+    clear() {
+        this.comparator = null;
+    }
+    compare(a, b) {
+        return (this.reverse ? -1 : 1) * this.comparator.compare(a, b);
+    }
+    emitChange() {
+        this._change.next(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Sort, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Sort }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Sort, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class Items {
+    constructor() {
+        this._all = [];
+        this._displayed = [];
+        this._change = new Subject();
+        this._sort = inject((Sort));
+        this._sort.change.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.sortItems();
+        });
+    }
+    get all() {
+        return this._all;
+    }
+    addItems(items) {
+        this._all = this._all.concat([items.slice()]);
+        this._displayed = this._displayed.concat([items.slice()]);
+        this.emitChange();
+    }
+    get displayed() {
+        return this._displayed;
+    }
+    get change() {
+        return this._change.asObservable();
+    }
+    /**
+     * Checks if we don't have data to process yet, to abort early operations
+     */
+    get uninitialized() {
+        return !this._all;
+    }
+    emitChange() {
+        this._change.next(this.displayed);
+    }
+    sortItems() {
+        if (this.uninitialized) {
+            return;
+        }
+        if (this._sort.comparator) {
+            this._displayed.forEach(subArray => {
+                subArray.sort((a, b) => this._sort.compare(a, b));
+            });
+        }
+        else {
+            this._displayed = this._all.map(subArray => subArray.slice());
+        }
+        this.emitChange();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Items, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Items }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Items, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class Selection {
+    constructor() {
+        this._change = new Subject();
+        this._allSelected = new Subject();
+        //debounce and batch changes before emitting them to subscribers
+        this._valueCollector = new Subject();
+        this._selectionType = SelectionType.None;
+        this._items = inject(Items);
+        this._valueCollector.pipe(debounceTime(0), takeUntilDestroyed()).subscribe(() => this.emitChange());
+    }
+    get selectionType() {
+        return this._selectionType;
+    }
+    set selectionType(value) {
+        if (value === this.selectionType) {
+            return;
+        }
+        this._selectionType = value;
+        if (value === SelectionType.None) {
+            delete this.current;
+        }
+        else {
+            this.updateCurrent([], false);
+        }
+    }
+    get current() {
+        return this._current;
+    }
+    set current(value) {
+        this.updateCurrent(value, true);
+    }
+    updateCurrent(value, emit) {
+        this._current = value;
+        if (emit) {
+            this._valueCollector.next(value);
+        }
+    }
+    get change() {
+        return this._change.asObservable();
+    }
+    get allSelectedChange() {
+        return this._allSelected.asObservable();
+    }
+    isSelected(item) {
+        return this.current.indexOf(item) >= 0;
+    }
+    setSelected(item, selected) {
+        const index = this.current ? this.current.indexOf(item) : -1;
+        if (index >= 0 && !selected) {
+            this.deselectItem(index);
+        }
+        else if (index < 0 && selected) {
+            this.selectItem(item);
+        }
+    }
+    isAllSelected() {
+        const displayedItems = this._items.displayed;
+        const nbDisplayed = displayedItems.length;
+        if (nbDisplayed < 1) {
+            return false;
+        }
+        const flattenedDisplayedItems = displayedItems.flat();
+        const selectedItems = flattenedDisplayedItems.filter(item => this.current.indexOf(item) > -1);
+        return selectedItems.length === flattenedDisplayedItems.length;
+    }
+    toggleAll() {
+        const isAllSelected = this.isAllSelected();
+        if (isAllSelected) {
+            this._items.displayed.forEach(items => {
+                items.forEach(item => {
+                    const currentIndex = this.current.indexOf(item);
+                    if (currentIndex > -1) {
+                        this.deselectItem(currentIndex);
+                    }
+                });
+            });
+        }
+        else {
+            this._items.displayed.forEach(items => {
+                items.forEach(item => {
+                    if (this.current.indexOf(item) < 0) {
+                        this.selectItem(item);
+                    }
+                });
+            });
+        }
+        this._allSelected.next(!isAllSelected);
+    }
+    selectItem(item) {
+        this.current = this.current.concat(item);
+    }
+    deselectItem(indexOfItem) {
+        this.current = this.current.slice(0, indexOfItem).concat(this.current.slice(indexOfItem + 1));
+    }
+    emitChange() {
+        this._change.next(this.current);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Selection, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Selection }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Selection, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright (c) 2018-2025 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.
+ */
+var ClrTreetableSortOrder;
+(function (ClrTreetableSortOrder) {
+    ClrTreetableSortOrder[ClrTreetableSortOrder["UNSORTED"] = 0] = "UNSORTED";
+    ClrTreetableSortOrder[ClrTreetableSortOrder["ASC"] = 1] = "ASC";
+    ClrTreetableSortOrder[ClrTreetableSortOrder["DESC"] = -1] = "DESC";
+})(ClrTreetableSortOrder || (ClrTreetableSortOrder = {}));
+
 /*
  * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrTreetableColumn {
+    get sortBy() {
+        return this._sortBy;
+    }
+    set sortBy(comparator) {
+        this._sortBy = comparator;
+    }
+    get sortOrder() {
+        return this._sortOrder;
+    }
+    set sortOrder(value) {
+        if (typeof value === 'undefined') {
+            return;
+        }
+        // nothing to do when incoming sort order is the same
+        if (this._sortOrder === value) {
+            return;
+        }
+        switch (value) {
+            case ClrTreetableSortOrder.ASC:
+                this.sort(false);
+                break;
+            case ClrTreetableSortOrder.DESC:
+                this.sort(true);
+                break;
+            // UNSORTED when neither ASC or DESC
+            case ClrTreetableSortOrder.UNSORTED:
+            default:
+                this._sort.clear();
+                break;
+        }
+    }
+    get sortDirection() {
+        return this._sortDirection;
+    }
+    constructor() {
+        this._sort = inject((Sort));
+        this._cdr = inject(ChangeDetectorRef);
+        this._sortOrder = ClrTreetableSortOrder.UNSORTED;
+        this.sortOrderChange = output({ alias: 'clrTtSortOrderChange' });
+        this.listenForSortingChanges();
+    }
+    get ariaSort() {
+        switch (this._sortOrder) {
+            case ClrTreetableSortOrder.ASC:
+                return 'ascending';
+            case ClrTreetableSortOrder.DESC:
+                return 'descending';
+            case ClrTreetableSortOrder.UNSORTED:
+            default:
+                return 'none';
+        }
+    }
+    get sortable() {
+        return !!this._sortBy;
+    }
+    sort(reverse) {
+        if (!this.sortable) {
+            return;
+        }
+        this._sort.toggle(this._sortBy, reverse);
+        // setting the private variable to not retrigger the setter logic
+        this._sortOrder = this._sort.reverse ? ClrTreetableSortOrder.DESC : ClrTreetableSortOrder.ASC;
+        // Sets the correct icon for current sort order
+        this._sortDirection = this._sortOrder === ClrTreetableSortOrder.DESC ? 'down' : 'up';
+        this.sortOrderChange.emit(this._sortOrder);
+    }
+    listenForSortingChanges() {
+        this._sort.change.pipe(takeUntilDestroyed()).subscribe(sort => {
+            // Need to manually mark the component to be checked
+            // for both activating and deactivating sorting
+            this._cdr.markForCheck();
+            // We're only listening to make sure we emit an event when the column goes from sorted to unsorted
+            if (this.sortOrder !== ClrTreetableSortOrder.UNSORTED && sort.comparator !== this._sortBy) {
+                this._sortOrder = ClrTreetableSortOrder.UNSORTED;
+                this.sortOrderChange.emit(this._sortOrder);
+                this._sortDirection = null;
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { sortBy: ["clrTtSortBy", "sortBy"], sortOrder: ["clrTtSortOrder", "sortOrder"] }, outputs: { sortOrderChange: "clrTtSortOrderChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort" } }, ngImport: i0, template: `
+    @if(sortable) {
+    <button class="treetable-column-title" (click)="sort()" type="button">
+      <ng-container *ngTemplateOutlet="columnTitle" />
+      <cds-icon
+        *ngIf="sortDirection"
+        shape="arrow"
+        [attr.direction]="sortDirection"
+        aria-hidden="true"
+        class="sort-icon"
+      />
+    </button>
+    } @else {
+    <ng-container *ngTemplateOutlet="columnTitle" />
+    }
+
+    <ng-template #columnTitle>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableColumn, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tt-column',
-                    template: '<ng-content></ng-content>',
+                    template: `
+    @if(sortable) {
+    <button class="treetable-column-title" (click)="sort()" type="button">
+      <ng-container *ngTemplateOutlet="columnTitle" />
+      <cds-icon
+        *ngIf="sortDirection"
+        shape="arrow"
+        [attr.direction]="sortDirection"
+        aria-hidden="true"
+        class="sort-icon"
+      />
+    </button>
+    } @else {
+    <ng-container *ngTemplateOutlet="columnTitle" />
+    }
+
+    <ng-template #columnTitle>
+      <ng-content />
+    </ng-template>
+  `,
                     host: {
                         '[class.treetable-column]': 'true',
+                        '[attr.aria-sort]': 'ariaSort',
                         role: 'columnheader',
                     },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: false,
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { sortBy: [{
+                type: Input,
+                args: ['clrTtSortBy']
+            }], sortOrder: [{
+                type: Input,
+                args: ['clrTtSortOrder']
+            }] } });
 
 /*
  * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
@@ -3694,23 +4072,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  */
 ClarityIcons.addIcons(angleIcon);
 class ClrTreetableRow {
-    set actionOverflow(actionOverflow) {
-        this.showActionOverflow = !!actionOverflow;
-        this.showEmptyActionOverflow = !this.showActionOverflow;
-        this.hasActionOverflow.emit(this.showActionOverflow);
-    }
     constructor() {
+        this.selection = inject(Selection);
+        this._cdr = inject(ChangeDetectorRef);
+        this._destroyRef = inject(DestroyRef);
+        this._selected = false;
+        this.shouldAnimate = signal(false);
         this.expanded = false;
         this.clickable = true;
         this.expandable = false;
+        this.clrTtItem = input();
         this.hasActionOverflow = new EventEmitter();
         this.expandedChange = new EventEmitter();
+        this.selectedChanged = new EventEmitter(false);
         this.showActionOverflow = false;
         this.showEmptyActionOverflow = false;
         this.showClickClass = false;
+        this.SelectionType = SelectionType;
+    }
+    set actionOverflow(actionOverflow) {
+        this.showActionOverflow = !!actionOverflow;
+        this.showEmptyActionOverflow = !this.showActionOverflow;
+        this.hasActionOverflow.emit(this.showActionOverflow);
     }
     ngOnInit() {
         this.showClickClass = this.expandable && this.clickable;
+        // We need to trigger change detection when the checkbox in overall treetable is clicked
+        // because of ChangeDetectionStrategy.OnPush
+        this.selection.allSelectedChange.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._cdr.markForCheck();
+        });
+    }
+    onExpandCollapseClick() {
+        // Only animate on user click (not on sorting or initial rendering)
+        this.shouldAnimate.set(true);
+        this.toggleExpand();
+        // Remove .animate after animation to prevent unwanted transitions
+        setTimeout(() => {
+            this.shouldAnimate.set(false);
+        }, 350);
+    }
+    toggle(selected = !this.selected) {
+        if (selected !== this.selected) {
+            this.selected = selected;
+            this.selectedChanged.emit(selected);
+        }
     }
     toggleExpand() {
         if (this.expandable) {
@@ -3720,47 +4126,32 @@ class ClrTreetableRow {
     }
     onRowClick(event) {
         if (this.clickable && !event.target.closest('.treetable-action-trigger')) {
-            this.toggleExpand();
+            this.onExpandCollapseClick();
         }
     }
     onCaretClick() {
         if (!this.clickable) {
-            this.toggleExpand();
+            this.onExpandCollapseClick();
+        }
+    }
+    get selected() {
+        if (this.selection.selectionType === SelectionType.None) {
+            return this._selected;
+        }
+        else {
+            return this.selection.isSelected(this.clrTtItem());
         }
     }
+    set selected(value) {
+        this.selection.setSelected(this.clrTtItem(), value);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ClrTreetableRow, isStandalone: false, selector: "clr-tt-row", inputs: { expanded: ["clrExpanded", "expanded"], clickable: ["clrClickable", "clickable"], expandable: ["clrExpandable", "expandable"] }, outputs: { hasActionOverflow: "hasActionOverflow", expandedChange: "clrExpandedChange" }, host: { properties: { "class.treetable-row-wrapper": "true" } }, queries: [{ propertyName: "actionOverflow", first: true, predicate: ClrTreetableActionOverflow, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  [ngClass]=\"{'clr-row-clickable': showClickClass}\"\n  class=\"clr-tt-node-content treetable-row\"\n  (click)=\"onRowClick($event)\"\n>\n  <ng-content select=\"clr-tt-action-overflow\"></ng-content>\n  <clr-tt-action-overflow *ngIf=\"showActionOverflow && showEmptyActionOverflow\" [empty]=\"true\"></clr-tt-action-overflow>\n  <div class=\"treetable-scrolling-cells\">\n    <div class=\"treetable-expandable-caret\" *ngIf=\"expandable\">\n      <button type=\"button\" class=\"treetable-expandable-caret-button\" (click)=\"onCaretClick()\">\n        <cds-icon\n          shape=\"angle\"\n          [attr.direction]=\"expanded ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></cds-icon>\n      </button>\n    </div>\n\n    <ng-content select=\"clr-tt-cell\"></ng-content>\n  </div>\n</div>\n<div [@collapseExpandAnimation]=\"expanded\">\n  <ng-content select=\"clr-tt-row\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrTreetableActionOverflow, selector: "clr-tt-action-overflow", inputs: ["empty"] }], animations: [
-            trigger('collapseExpandAnimation', [
-                state('false', style({ display: 'none' })),
-                state('true', style({ display: 'block' })),
-                transition('false => true', [
-                    style({ opacity: 0, height: 0, overflow: 'hidden', display: 'block' }),
-                    animate('300ms', style({ opacity: 1, height: '*' })),
-                ]),
-                transition('true => false', [
-                    style({ opacity: 1, height: '*', overflow: 'hidden' }),
-                    animate('300ms', style({ opacity: 0, height: 0 })),
-                ]),
-            ]),
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ClrTreetableRow, isStandalone: false, selector: "clr-tt-row", inputs: { expanded: { classPropertyName: "expanded", publicName: "clrExpanded", isSignal: false, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clrClickable", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "clrExpandable", isSignal: false, isRequired: false, transformFunction: null }, clrTtItem: { classPropertyName: "clrTtItem", publicName: "clrTtItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasActionOverflow: "hasActionOverflow", expandedChange: "clrExpandedChange", selectedChanged: "clrTtSelectedChange" }, host: { properties: { "class.treetable-row-wrapper": "true", "class.treetable-selected": "selected" } }, queries: [{ propertyName: "actionOverflow", first: true, predicate: ClrTreetableActionOverflow, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  [ngClass]=\"{'clr-row-clickable': showClickClass, 'treetable-selected': selected}\"\n  class=\"clr-tt-node-content treetable-row\"\n  (click)=\"onRowClick($event)\"\n>\n  @if(selection.selectionType === SelectionType.Multi){\n  <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-cell\">\n    <input type=\"checkbox\" [ngModel]=\"selected\" (ngModelChange)=\"toggle($event)\" (click)=\"$event.stopPropagation()\" />\n  </div>\n  }\n\n  <ng-content select=\"clr-tt-action-overflow\"></ng-content>\n  <clr-tt-action-overflow *ngIf=\"showActionOverflow && showEmptyActionOverflow\" [empty]=\"true\"></clr-tt-action-overflow>\n  <div class=\"treetable-scrolling-cells\">\n    <div class=\"treetable-expandable-caret\" *ngIf=\"expandable\">\n      <button type=\"button\" class=\"treetable-expandable-caret-button\" (click)=\"onCaretClick()\">\n        <cds-icon\n          shape=\"angle\"\n          [attr.direction]=\"expanded ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></cds-icon>\n      </button>\n    </div>\n\n    <ng-content select=\"clr-tt-cell\"></ng-content>\n  </div>\n</div>\n\n<div\n  class=\"treetable-row-animation-container\"\n  [class.expanded]=\"expanded\"\n  [class.collapsed]=\"!expanded\"\n  [class.animate]=\"shouldAnimate()\"\n>\n  <div class=\"treetable-row-animation-wrapper\">\n    <ng-content select=\"clr-tt-row\"></ng-content>\n  </div>\n</div>\n", styles: [".treetable-row-animation-container.expanded{display:grid;grid-template-rows:1fr;opacity:1}.treetable-row-animation-container.collapsed{display:none;grid-template-rows:0fr;opacity:0}.treetable-row-animation-container.animate{transition:grid-template-rows .3s ease,opacity .3s ease,display .3s ease allow-discrete}@starting-style{.treetable-row-animation-container.animate.expanded{grid-template-rows:0fr;opacity:0}}@starting-style{.treetable-row-animation-container.animate.collapsed{grid-template-rows:1fr;opacity:1}}.treetable-row-animation-wrapper{min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrTreetableActionOverflow, selector: "clr-tt-action-overflow", inputs: ["empty"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableRow, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-tt-row', host: { '[class.treetable-row-wrapper]': 'true' }, animations: [
-                        trigger('collapseExpandAnimation', [
-                            state('false', style({ display: 'none' })),
-                            state('true', style({ display: 'block' })),
-                            transition('false => true', [
-                                style({ opacity: 0, height: 0, overflow: 'hidden', display: 'block' }),
-                                animate('300ms', style({ opacity: 1, height: '*' })),
-                            ]),
-                            transition('true => false', [
-                                style({ opacity: 1, height: '*', overflow: 'hidden' }),
-                                animate('300ms', style({ opacity: 0, height: 0 })),
-                            ]),
-                        ]),
-                    ], standalone: false, template: "<!--\n  ~ Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  [ngClass]=\"{'clr-row-clickable': showClickClass}\"\n  class=\"clr-tt-node-content treetable-row\"\n  (click)=\"onRowClick($event)\"\n>\n  <ng-content select=\"clr-tt-action-overflow\"></ng-content>\n  <clr-tt-action-overflow *ngIf=\"showActionOverflow && showEmptyActionOverflow\" [empty]=\"true\"></clr-tt-action-overflow>\n  <div class=\"treetable-scrolling-cells\">\n    <div class=\"treetable-expandable-caret\" *ngIf=\"expandable\">\n      <button type=\"button\" class=\"treetable-expandable-caret-button\" (click)=\"onCaretClick()\">\n        <cds-icon\n          shape=\"angle\"\n          [attr.direction]=\"expanded ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></cds-icon>\n      </button>\n    </div>\n\n    <ng-content select=\"clr-tt-cell\"></ng-content>\n  </div>\n</div>\n<div [@collapseExpandAnimation]=\"expanded\">\n  <ng-content select=\"clr-tt-row\"></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { expanded: [{
+            args: [{ selector: 'clr-tt-row', host: { '[class.treetable-row-wrapper]': 'true', '[class.treetable-selected]': 'selected' }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  [ngClass]=\"{'clr-row-clickable': showClickClass, 'treetable-selected': selected}\"\n  class=\"clr-tt-node-content treetable-row\"\n  (click)=\"onRowClick($event)\"\n>\n  @if(selection.selectionType === SelectionType.Multi){\n  <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-cell\">\n    <input type=\"checkbox\" [ngModel]=\"selected\" (ngModelChange)=\"toggle($event)\" (click)=\"$event.stopPropagation()\" />\n  </div>\n  }\n\n  <ng-content select=\"clr-tt-action-overflow\"></ng-content>\n  <clr-tt-action-overflow *ngIf=\"showActionOverflow && showEmptyActionOverflow\" [empty]=\"true\"></clr-tt-action-overflow>\n  <div class=\"treetable-scrolling-cells\">\n    <div class=\"treetable-expandable-caret\" *ngIf=\"expandable\">\n      <button type=\"button\" class=\"treetable-expandable-caret-button\" (click)=\"onCaretClick()\">\n        <cds-icon\n          shape=\"angle\"\n          [attr.direction]=\"expanded ? 'down' : 'right'\"\n          class=\"treetable-expandable-caret-icon\"\n        ></cds-icon>\n      </button>\n    </div>\n\n    <ng-content select=\"clr-tt-cell\"></ng-content>\n  </div>\n</div>\n\n<div\n  class=\"treetable-row-animation-container\"\n  [class.expanded]=\"expanded\"\n  [class.collapsed]=\"!expanded\"\n  [class.animate]=\"shouldAnimate()\"\n>\n  <div class=\"treetable-row-animation-wrapper\">\n    <ng-content select=\"clr-tt-row\"></ng-content>\n  </div>\n</div>\n", styles: [".treetable-row-animation-container.expanded{display:grid;grid-template-rows:1fr;opacity:1}.treetable-row-animation-container.collapsed{display:none;grid-template-rows:0fr;opacity:0}.treetable-row-animation-container.animate{transition:grid-template-rows .3s ease,opacity .3s ease,display .3s ease allow-discrete}@starting-style{.treetable-row-animation-container.animate.expanded{grid-template-rows:0fr;opacity:0}}@starting-style{.treetable-row-animation-container.animate.collapsed{grid-template-rows:1fr;opacity:1}}.treetable-row-animation-wrapper{min-height:0;overflow:hidden}\n"] }]
+        }], propDecorators: { expanded: [{
                 type: Input,
                 args: ['clrExpanded']
             }], clickable: [{
@@ -3774,11 +4165,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], expandedChange: [{
                 type: Output,
                 args: ['clrExpandedChange']
+            }], selectedChanged: [{
+                type: Output,
+                args: ['clrTtSelectedChange']
             }], actionOverflow: [{
                 type: ContentChild,
                 args: [ClrTreetableActionOverflow]
             }] } });
 
+/*
+ * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class TreetableItemsDirective {
+    get clrTtItems() {
+        return this.ttItems();
+    }
+    set clrTtItems(items) {
+        if (items == null || items.length === 0) {
+            return;
+        }
+        this._items.addItems(items);
+        if (this._sort.comparator) {
+            this._cdr.detach();
+            items.sort((a, b) => this._sort.compare(a, b)); // Sort in place
+            this._cdr.reattach();
+        }
+        this.ttItems.set(items);
+    }
+    set trackBy(value) {
+        this._iterableProxy.ngForTrackBy = value;
+    }
+    constructor() {
+        this._items = inject((Items));
+        this._sort = inject((Sort));
+        this._template = inject((TemplateRef));
+        this._differs = inject(IterableDiffers);
+        this._vcr = inject(ViewContainerRef);
+        this._cdr = inject(ChangeDetectorRef);
+        this.ttItems = signal([]);
+        this._iterableProxy = new NgForOf(this._vcr, this._template, this._differs);
+        effect(() => {
+            const newItems = this.ttItems();
+            if (newItems) {
+                this._iterableProxy.ngForOf = newItems;
+                this._iterableProxy.ngDoCheck();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreetableItemsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: TreetableItemsDirective, isStandalone: false, selector: "[clrTtItems]", inputs: { clrTtItems: "clrTtItems", trackBy: ["clrTtItemsTrackBy", "trackBy"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreetableItemsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrTtItems]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [], propDecorators: { clrTtItems: [{
+                type: Input
+            }], trackBy: [{
+                type: Input,
+                args: ['clrTtItemsTrackBy']
+            }] } });
+
 /*
  * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -3786,11 +4237,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  */
 class ClrTreetable {
     constructor() {
+        this.selection = inject((Selection));
+        this._items = inject((Items));
+        this._destroyRef = inject(DestroyRef);
         this.clrClickableRows = true;
         this.hideHeader = false;
+        this.selectedChanged = new EventEmitter(false);
         this.empty = true;
         this.hasActionOverflow = false;
-        this.destroyed$ = new Subject();
+        this.SelectionType = SelectionType;
+    }
+    set selected(value) {
+        if (value) {
+            this.selection.selectionType = SelectionType.Multi;
+        }
+        else {
+            this.selection.selectionType = SelectionType.None;
+        }
+        this.selection.updateCurrent(value, false);
     }
     set ttRows(items) {
         this._ttRows = items;
@@ -3799,6 +4263,22 @@ class ClrTreetable {
         this.initEmpty();
         this.initActionOverflow();
     }
+    ngAfterViewInit() {
+        this.selection.change.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(items => {
+            this.selectedChanged.emit(items);
+        });
+        //_items changed, therefore we need to update the ttItems in the directives
+        // in order to display them right again -> e.g when sorting changed
+        this._items.change.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((allItems) => {
+            const directives = this.iterator.toArray();
+            directives.forEach((directive, index) => {
+                if (allItems[index]) {
+                    const sortedItems = [...allItems[index]];
+                    directive.ttItems.set(sortedItems);
+                }
+            });
+        });
+    }
     initClickableRows() {
         if (this._ttRows) {
             this._ttRows.forEach(ttRow => {
@@ -3812,7 +4292,7 @@ class ClrTreetable {
     initActionOverflow() {
         this._ttRows.forEach(row => {
             this.setActionOverflow(row.showActionOverflow);
-            row.hasActionOverflow.pipe(takeUntil(this.destroyed$)).subscribe((hasActionOverflow) => {
+            row.hasActionOverflow.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((hasActionOverflow) => {
                 this.setActionOverflow(hasActionOverflow);
             });
         });
@@ -3828,27 +4308,43 @@ class ClrTreetable {
             });
         }
     }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
+    get allSelected() {
+        return this.selection.isAllSelected();
+    }
+    set allSelected(_) {
+        /**
+         * This is a setter but we ignore the value.
+         * It's strange, but it lets us have an indeterminate state where only
+         * some of the _items are selected.
+         */
+        this.selection.toggleAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ClrTreetable, isStandalone: false, selector: "clr-treetable", inputs: { clrClickableRows: "clrClickableRows", hideHeader: ["clrHideHeader", "hideHeader"] }, host: { properties: { "class.empty": "empty", "class.treetable-host": "true" } }, queries: [{ propertyName: "ttColumns", predicate: ClrTreetableColumn, descendants: true }, { propertyName: "ttRows", predicate: ClrTreetableRow, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div class=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"hideHeader\">\n      <div *ngIf=\"hasActionOverflow\" class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\"></ng-content>\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      <ng-content select=\"clr-tt-row\"></ng-content>\n      <ng-content select=\"clr-tt-placeholder\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ClrTreetable, isStandalone: false, selector: "clr-treetable", inputs: { clrClickableRows: "clrClickableRows", hideHeader: ["clrHideHeader", "hideHeader"], selected: ["clrTtSelected", "selected"] }, outputs: { selectedChanged: "clrTtSelectedChange" }, host: { properties: { "class.empty": "empty", "class.treetable-host": "true" } }, providers: [Selection, Items, Sort], queries: [{ propertyName: "ttColumns", predicate: ClrTreetableColumn, descendants: true }, { propertyName: "ttRows", predicate: ClrTreetableRow, descendants: true }, { propertyName: "iterator", predicate: TreetableItemsDirective, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div class=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"hideHeader\">\n      @if(selection.selectionType === SelectionType.Multi && !empty){\n      <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-column\" role=\"row\">\n        <input type=\"checkbox\" [(ngModel)]=\"allSelected\" />\n      </div>\n      }\n\n      <div *ngIf=\"hasActionOverflow\" class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\"></ng-content>\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      <ng-content select=\"clr-tt-row\"></ng-content>\n      <ng-content select=\"clr-tt-placeholder\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetable, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-treetable', host: { '[class.empty]': 'empty', '[class.treetable-host]': 'true' }, standalone: false, template: "<!--\n  ~ Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div class=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"hideHeader\">\n      <div *ngIf=\"hasActionOverflow\" class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\"></ng-content>\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      <ng-content select=\"clr-tt-row\"></ng-content>\n      <ng-content select=\"clr-tt-placeholder\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'clr-treetable', host: { '[class.empty]': 'empty', '[class.treetable-host]': 'true' }, standalone: false, providers: [Selection, Items, Sort], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div class=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"hideHeader\">\n      @if(selection.selectionType === SelectionType.Multi && !empty){\n      <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-column\" role=\"row\">\n        <input type=\"checkbox\" [(ngModel)]=\"allSelected\" />\n      </div>\n      }\n\n      <div *ngIf=\"hasActionOverflow\" class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\"></ng-content>\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      <ng-content select=\"clr-tt-row\"></ng-content>\n      <ng-content select=\"clr-tt-placeholder\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { clrClickableRows: [{
                 type: Input
             }], hideHeader: [{
                 type: Input,
                 args: ['clrHideHeader']
+            }], selected: [{
+                type: Input,
+                args: ['clrTtSelected']
+            }], selectedChanged: [{
+                type: Output,
+                args: ['clrTtSelectedChange']
             }], ttColumns: [{
                 type: ContentChildren,
                 args: [ClrTreetableColumn, { descendants: true }]
             }], ttRows: [{
                 type: ContentChildren,
                 args: [ClrTreetableRow, { descendants: true }]
+            }], iterator: [{
+                type: ContentChildren,
+                args: [TreetableItemsDirective, { descendants: true }]
             }] } });
 
 /*
@@ -3858,7 +4354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  */
 class ClrTreetableCell {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ClrTreetableCell, isStandalone: false, selector: "clr-tt-cell", host: { attributes: { "role": "cell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ClrTreetableCell, isStandalone: false, selector: "clr-tt-cell", host: { attributes: { "role": "cell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableCell, decorators: [{
             type: Component,
@@ -3870,6 +4366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         role: 'cell',
                     },
                     standalone: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
@@ -3885,7 +4382,7 @@ class ClrTreetablePlaceholder {
       <div class="treetable-placeholder-image"></div>
       <ng-content></ng-content>
     </div>
-  `, isInline: true }); }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetablePlaceholder, decorators: [{
             type: Component,
@@ -3899,6 +4396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
   `,
                     host: { '[class.treetable-placeholder-container]': 'true' },
                     standalone: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
@@ -4002,8 +4500,10 @@ class TreetableMainRenderer {
     constructor() {
         this.shouldStabilizeColumn = true;
     }
-    onResize() {
-        this.applyMaxWidth();
+    ngOnInit() {
+        fromEvent(window, 'resize')
+            .pipe(debounceTime$1(200))
+            .subscribe(() => this.applyMaxWidth());
     }
     ngAfterContentInit() {
         this.headers.changes.subscribe(() => {
@@ -4026,11 +4526,13 @@ class TreetableMainRenderer {
      */
     applyColumnClasses() {
         this.shouldStabilizeColumn = false;
-        this.headers.forEach((header, headerIndex) => {
+        const headersArray = this.headers.toArray();
+        const rowsArray = this.rows.toArray();
+        headersArray.forEach((header, headerIndex) => {
             const columnClasses = header.getColumnClasses();
             if (columnClasses.length === 0) {
                 header.setDefaultColumnClass();
-                this.rows.forEach(row => {
+                rowsArray.forEach(row => {
                     // set every child cell of the same index to default class
                     const cell = row.cells.find((_c, cellIndex) => cellIndex === headerIndex);
                     if (cell) {
@@ -4041,7 +4543,7 @@ class TreetableMainRenderer {
             else {
                 // set every child cell of the same index to the same class
                 // we do not allow overriding column width on a per cell basis different to the header.
-                this.rows.forEach(row => {
+                rowsArray.forEach(row => {
                     const cell = row.cells.find((_c, cellIndex) => cellIndex === headerIndex);
                     if (cell) {
                         cell.setColumnClasses(columnClasses);
@@ -4070,7 +4572,7 @@ class TreetableMainRenderer {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreetableMainRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: TreetableMainRenderer, isStandalone: false, selector: "clr-treetable", host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "headers", predicate: TreetableHeaderRenderer }, { propertyName: "rows", predicate: TreetableRowRenderer, descendants: true }, { propertyName: "columns", predicate: ClrTreetableColumn }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: TreetableMainRenderer, isStandalone: false, selector: "clr-treetable", queries: [{ propertyName: "headers", predicate: TreetableHeaderRenderer }, { propertyName: "rows", predicate: TreetableRowRenderer, descendants: true }, { propertyName: "columns", predicate: ClrTreetableColumn }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreetableMainRenderer, decorators: [{
             type: Directive,
@@ -4087,13 +4589,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }], columns: [{
                 type: ContentChildren,
                 args: [ClrTreetableColumn]
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize']
             }] } });
 
 /*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 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.
  */
@@ -4108,6 +4607,7 @@ const CLR_TREETABLE_DIRECTIVES = [
     TreetableHeaderRenderer,
     TreetableRowRenderer,
     TreetableCellRenderer,
+    TreetableItemsDirective,
 ];
 class ClrTreetableModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4120,7 +4620,8 @@ class ClrTreetableModule {
             TreetableMainRenderer,
             TreetableHeaderRenderer,
             TreetableRowRenderer,
-            TreetableCellRenderer], imports: [CommonModule, ClarityModule], exports: [ClrTreetable,
+            TreetableCellRenderer,
+            TreetableItemsDirective], imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule], exports: [ClrTreetable,
             ClrTreetableRow,
             ClrTreetableCell,
             ClrTreetableColumn,
@@ -4129,20 +4630,27 @@ class ClrTreetableModule {
             TreetableMainRenderer,
             TreetableHeaderRenderer,
             TreetableRowRenderer,
-            TreetableCellRenderer] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule] }); }
+            TreetableCellRenderer,
+            TreetableItemsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrTreetableModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule],
+                    imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule],
                     declarations: [CLR_TREETABLE_DIRECTIVES],
                     exports: [CLR_TREETABLE_DIRECTIVES],
                 }]
         }] });
 
 /*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 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-2025 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.
  */
@@ -4369,6 +4877,7 @@ class ClrHistoryService {
             historySettings.push({ username: username, historyPinned: false });
         }
         this.cookieSettings$.next(historySettings);
+        return historySettings.find(hSetting => hSetting.username === username);
     }
     setHistoryPinned(username, pin, domain) {
         const historySettings = this.getCookieByName(this.cookieNameSettings);
@@ -4539,13 +5048,15 @@ class ClrHistoryPinned {
          * The array of history elements to be displayed.
          */
         this.historyElements$ = new ReplaySubject(1);
-        this.active$ = new ReplaySubject(1);
+        this.active$ = new BehaviorSubject(this.initActive());
+    }
+    initActive() {
+        return this.historyService.initializeCookieSettings(this.username, this.domain).historyPinned;
     }
     ngOnInit() {
         this.historyService.getHistory(this.username, this.tenantId).subscribe(elements => {
             this.historyElements$.next(this.historyProvider ? this.historyProvider.getModifiedHistoryEntries(elements) : elements);
         });
-        this.historyService.initializeCookieSettings(this.username, this.domain);
         this.settingsSubscription = this.historyService.cookieSettings$.subscribe(settings => {
             const setting = settings.find(setting => setting.username === this.username);
             this.active$.next(setting?.historyPinned);
@@ -4556,11 +5067,11 @@ class ClrHistoryPinned {
         this.settingsSubscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrHistoryPinned, deps: [{ token: ClrHistoryService }, { token: HISTORY_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ClrHistoryPinned, isStandalone: false, selector: "clr-history-pinned", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], domain: ["clrDomain", "domain"] }, ngImport: i0, template: "<div [ngClass]=\"{'history-container-pinned': active$ | async}\"></div>\n<nav\n  aria-label=\"history\"\n  class=\"history-container\"\n  *ngIf=\"(active$ | async) && (historyElements$ | async) as historyElements\"\n>\n  <ol class=\"history\">\n    <ng-container *ngFor=\"let historyItem of historyElements\">\n      <li *ngIf=\"historyItem.url\" class=\"history-item\">\n        <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n      </li>\n    </ng-container>\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ClrHistoryPinned, isStandalone: false, selector: "clr-history-pinned", inputs: { username: ["clrUsername", "username"], tenantId: ["clrTenantId", "tenantId"], context: ["clrContext", "context"], domain: ["clrDomain", "domain"] }, ngImport: i0, template: "<div class=\"history-container-pinned\" *ngIf=\"(active$ | async)\"></div>\n<nav\n  aria-label=\"history\"\n  class=\"history-container\"\n  *ngIf=\"(active$ | async) && (historyElements$ | async) as historyElements\"\n>\n  <ol class=\"history\">\n    <ng-container *ngFor=\"let historyItem of historyElements\">\n      <li *ngIf=\"historyItem.url\" class=\"history-item\">\n        <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n      </li>\n    </ng-container>\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ClrHistoryPinned, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-history-pinned', standalone: false, template: "<div [ngClass]=\"{'history-container-pinned': active$ | async}\"></div>\n<nav\n  aria-label=\"history\"\n  class=\"history-container\"\n  *ngIf=\"(active$ | async) && (historyElements$ | async) as historyElements\"\n>\n  <ol class=\"history\">\n    <ng-container *ngFor=\"let historyItem of historyElements\">\n      <li *ngIf=\"historyItem.url\" class=\"history-item\">\n        <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n      </li>\n    </ng-container>\n  </ol>\n</nav>\n" }]
+            args: [{ selector: 'clr-history-pinned', standalone: false, template: "<div class=\"history-container-pinned\" *ngIf=\"(active$ | async)\"></div>\n<nav\n  aria-label=\"history\"\n  class=\"history-container\"\n  *ngIf=\"(active$ | async) && (historyElements$ | async) as historyElements\"\n>\n  <ol class=\"history\">\n    <ng-container *ngFor=\"let historyItem of historyElements\">\n      <li *ngIf=\"historyItem.url\" class=\"history-item\">\n        <a [href]=\"historyItem.url\">{{ historyItem.title }}</a>\n      </li>\n    </ng-container>\n  </ol>\n</nav>\n" }]
         }], ctorParameters: () => [{ type: ClrHistoryService }, { type: HistoryProvider, decorators: [{
                     type: Inject,
                     args: [HISTORY_PROVIDER]
@@ -14019,7 +14530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
         }] });
 
 /*
- * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 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.
  */
@@ -14143,7 +14654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  */
 
 /*
- * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2025 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.
  */
@@ -14152,5 +14663,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * 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, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, 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, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, CupraBrandShape, Customer, CustomerVip, CustomerVipCollection, CustomerWaiting, CustomerWaitingCollection, DATE, DELIMITER_REGEX, DWABrandShape, DatagridFieldDirective, DayModel, DeliveryDate, DieselShape, DollarBillForwardShape, DollarBillPartialShape, EnergyShape, 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, PopoverPositions, PorscheBrandShape, PriceTypeSwitchShape, RepeatRepairCollection, RepeatRepairShape, ReplacementVehicleCollection, ReplacementVehicleShape, ReturnDateShape, SEPARATOR_TEXT_DEFAULT, SeatBrandShape, ServiceAdvisor, SkodaBrandShape, StatePersistenceKeyDirective, TRANSLATIONS, TaskAndAppointment, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TreetableCellRenderer, TreetableHeaderRenderer, 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, 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, mechanicIcon, media, mediaIcon, menu, menuAppAppIcon, menuIcon, menu_app_app, microphoneAppIcon, microphone_app, mobile, mobileIcon, moreAppIcon, moreAppbarAppIcon, more_app, more_appbar_app, mot, motIcon, motability, motabilityIcon, navigate, navigateFilledAppIcon, navigateIcon, navigate_filled_app, newCarCommercialIcon, newCarPrivateFilledAppIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, new_car_commercial, new_car_private, new_car_private_filled_app, nightServiceIcon, night_service, notification, notificationFilledIcon, notificationIcon, notification_filled, number0Icon, number10Icon, number11Icon, number12Icon, number13Icon, number14Icon, number15Icon, number16Icon, number17Icon, number18Icon, number19Icon, number1Icon, number20Icon, number2Icon, number3Icon, number4Icon, number5Icon, number6Icon, number7Icon, number8Icon, number9Icon, offers, offersFilledAppIcon, offersIcon, offers_filled_app, officeAppIcon, officeFilledAppIcon, office_app, office_filled_app, oilLevelIcon, oilLevelWarningIcon, oilTemperatureAppIcon, oil_level, oil_level_warning, oil_temperature_app, onCallDutyIcon, on_call_duty, openSatIcon, open_sat, orderIcon, orderStatusIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, paint_shop, paragraphAppIcon, paragraph_app, parkHeaterAppIcon, park_heater_app, parking, parkingFilledAppIcon, parkingGarageAppIcon, parkingIcon, parkingLocationIcon, parkingRouteAppIcon, parkingValetAppIcon, parking_filled_app, parking_garage_app, parking_route_app, parking_valet_app, partAvailabilityInfoIcon, partAvailabilityNoIcon, partAvailabilityUnknownIcon, partAvailabilityWarningIcon, partAvailabilityYesIcon, partIdenticalIcon, partIdenticalPredecessorIcon, partIdenticalSuccessorIcon, partIdenticalSuccpredecessorIcon, partPredecessorIcon, partSuccessorIcon, partSuccessorPredecessorIcon, partsChangelocationIcon, partsForwardIcon, partsIcon, partsInventoryIcon, partsNonStockForwardIcon, partsNonStockIcon, partsPickingIcon, partsPickingPlusIcon, partsReceivingIcon, pause, pauseIcon, payload, payloadIcon, paymentAppIcon, paymentCashAppIcon, paymentChargingCardAppIcon, paymentCreditcardAppIcon, paymentMachineAppIcon, payment_app, payment_cash_app, payment_charging_card_app, payment_creditcard_app, payment_machine_app, performance, performanceIcon, petrol, petrolIcon, phone, phoneIcon, pin, pinFilledAppIcon, pinGenericFilledAppIcon, pinIcon, pin_filled_app, pin_generic_filled_app, play, playIcon, plugCcsAppIcon, plugChademoAppIcon, plugChargeAppIcon, plugGenericAppIcon, plugSchukoAppIcon, plugType1AppIcon, plugType2AppIcon, plug_ccs_app, plug_chademo_app, plug_charge_app, plug_generic_app, plug_schuko_app, plug_type1_app, plug_type2_app, plusServiceIcon, porscheBrandIcon, power, powerIcon, powerTrainIcon, powertrain, preHeaterAppIcon, pre_heater_app, preciseLaneNavigationAppIcon, precise_lane_navigation_app, presentAppIcon, present_app, priceTypeSwitchIcon, printer, printerIcon, privacyAppIcon, privacy_app, profile, profileIcon, profileRegisterAppIcon, profileVerifiedIcon, profile_register_app, profile_verified, publicServiceIcon, publicTransportAppIcon, public_service, public_transport_app, qualifiedWorkshopIcon, qualified_workshop, questionnaireAppIcon, questionnaire_app, radio, radioButtonInselectedIcon, radioButtonSelectedForDefIcon, radioButtonSelectedIcon, radioIcon, radio_button_inselected, radio_button_selected, radio_button_selected_for_development, range, rangeIcon, reload, reloadIcon, remove, removeIcon, repeat, repeatIcon, repeatRepairIcon, replacementVehicleIcon, returnDateIcon, rewind, rewindIcon, roadsideAssistanceIcon, roadside_assistance, route, routeArrowAppIcon, routeIcon, route_arrow_app, routesHistoryAppIcon, routes_history_app, rss, rssIcon, safety, safetyIcon, save, saveAppIcon, saveIcon, save_app, seat, seatAirIcon, seatBrandIcon, seatIcon, seat_air, secretTipAppIcon, secretTipFilledAppIcon, secret_tip_app, secret_tip_filled_app, selected, selectedIcon, selectedPartnerNetworkAppIcon, selected_partner_network_app, sendToCarAppIcon, send_to_car_app, service, serviceAdvisorIcon, serviceBellIcon, serviceFilledAppIcon, serviceIcon, service_bell, service_filled_app, settings, settingsIcon, shareAndroidIcon, shareIosIcon, share_android, share_ios, shoppingCartFilledAppIcon, shoppingCartIcon, shopping_cart, shopping_cart_filled_app, shuffle, shuffleIcon, size, sizeIcon, skillAppIcon, skill_app, skipBackwardIcon, skipForwardIcon, skip_backward, skip_forward, skodaBrandIcon, softwareDownloadAppIcon, software_download_app, sortingAppIcon, sorting_app, sound, soundIcon, standardEquipmentIcon, standard_equipment, starFilledIcon, starOutlineIcon, star_filled, star_outline, statisticAppIcon, statistic_app, stockLocatorCommercialIcon, stockLocatorPrivateIcon, stock_locator_commercial, stock_locator_private, stop, stopIcon, strip, switchPositionAppIcon, switch_position_app, syncAppIcon, sync_app, taskAndAppointmentIcon, taxiDealerIcon, taxi_dealer, technicalSpecificationIcon, technical_specification, temperatureAppIcon, temperature_app, testDriveIcon, test_drive, textForwardIcon, thumbsdownAppIcon, thumbsdownFilledAppIcon, thumbsdown_app, thumbsdown_filled_app, thumbsupAppIcon, thumbsupFilledAppIcon, thumbsup_app, thumbsup_filled_app, timeClimatisationAppIcon, timePreferredAppIcon, time_climatisation_app, time_preferred_app, timer, timerIcon, topcardIcon, touaregServiceIcon, transcriptDownloadIcon, transcript_download, transmissionAutomaticIcon, transmissionManualIcon, transmission_automatic, transmission_manual, tripAppIcon, tripLongAppIcon, tripPartedAppIcon, tripShortAppIcon, trip_app, trip_long_app, trip_parted_app, trip_short_app, turnSignalsIcon, turn_signals, unselected, unselectedIcon, updateRefreshAppIcon, update_refresh_app, upload, uploadAppIcon, uploadCustomIcon, upload_app, usedCarCommercialIcon, usedCarPrivateIcon, used_car_commercial, used_car_private, vehicleAmarokIcon, vehicleCaddyIcon, vehicleConversionIcon, vehicleCrafterIcon, vehicleHightIcon, vehicleIdBuzzIcon, vehicleMultivanIcon, vehicleTransporterIcon, vehicle_amarok, vehicle_caddy, vehicle_crafter, vehicle_hight, vehicle_idbuzz, vehicle_multivan, vehicle_transporter, videoChatIcon, video_chat, view360Icon, view_360, vinIcon, virtualRealityIcon, virtual_reality, voiceMessageAppIcon, voice_message_app, volkswagenAppIcon, volkswagenIcon, volkswagen_app, volumeMaximumIcon, volumeMediumIcon, volumeMuteIcon, volume_maximum, volume_medium, volume_mute, vsfSearch48Icon, vsfSearchIcon, vwBrandIcon, vwConnectLicenseAppIcon, vw_connect_license_app, vwnBrandIcon, walkingAppIcon, walkingFilledAppIcon, walking_app, walking_filled_app, wallbox, wallboxIcon, wcAppIcon, wc_app, wcpIcon, weAssistAppIcon, weChargeAppIcon, weDeliverAppIcon, weExperienceAppIcon, weParkAppIcon, weUpgradeAppIcon, we_assist_app, we_charge_app, we_deliver_app, we_experience_app, we_park_app, we_upgrade_app, weatherSunAppIcon, weather_sun_app, wheelToWheelIcon, wheel_to_wheel, windscreenWashIcon, windscreen_wash, wlanHotspotIcon, wlan_hotspot, wrenchForwardIcon };
+export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CircleFilled, CircleHalfFilled, CircleQuarterFilled, CircleThreeQuartersFilled, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, 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, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrTreetableSortOrder, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, CupraBrandShape, Customer, CustomerVip, CustomerVipCollection, CustomerWaiting, CustomerWaitingCollection, DATE, DELIMITER_REGEX, DWABrandShape, DatagridFieldDirective, DayModel, DeliveryDate, DieselShape, DollarBillForwardShape, DollarBillPartialShape, EnergyShape, ExternalPartForwardShape, FirstRegistrationDate, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HISTORY_TOKEN, HistoryProvider, InternalPartForwardShape, InvoiceReadyShape, InvoiceRecipient, InvoiceShape, Items, 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, PopoverPositions, PorscheBrandShape, PriceTypeSwitchShape, RepeatRepairCollection, RepeatRepairShape, ReplacementVehicleCollection, ReplacementVehicleShape, ReturnDateShape, SEPARATOR_TEXT_DEFAULT, SeatBrandShape, Selection, ServiceAdvisor, SkodaBrandShape, Sort, StatePersistenceKeyDirective, TRANSLATIONS, TaskAndAppointment, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TreetableCellRenderer, 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, 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, mechanicIcon, media, mediaIcon, menu, menuAppAppIcon, menuIcon, menu_app_app, microphoneAppIcon, microphone_app, mobile, mobileIcon, moreAppIcon, moreAppbarAppIcon, more_app, more_appbar_app, mot, motIcon, motability, motabilityIcon, navigate, navigateFilledAppIcon, navigateIcon, navigate_filled_app, newCarCommercialIcon, newCarPrivateFilledAppIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, new_car_commercial, new_car_private, new_car_private_filled_app, nightServiceIcon, night_service, notification, notificationFilledIcon, notificationIcon, notification_filled, number0Icon, number10Icon, number11Icon, number12Icon, number13Icon, number14Icon, number15Icon, number16Icon, number17Icon, number18Icon, number19Icon, number1Icon, number20Icon, number2Icon, number3Icon, number4Icon, number5Icon, number6Icon, number7Icon, number8Icon, number9Icon, offers, offersFilledAppIcon, offersIcon, offers_filled_app, officeAppIcon, officeFilledAppIcon, office_app, office_filled_app, oilLevelIcon, oilLevelWarningIcon, oilTemperatureAppIcon, oil_level, oil_level_warning, oil_temperature_app, onCallDutyIcon, on_call_duty, openSatIcon, open_sat, orderIcon, orderStatusIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, paint_shop, paragraphAppIcon, paragraph_app, parkHeaterAppIcon, park_heater_app, parking, parkingFilledAppIcon, parkingGarageAppIcon, parkingIcon, parkingLocationIcon, parkingRouteAppIcon, parkingValetAppIcon, parking_filled_app, parking_garage_app, parking_route_app, parking_valet_app, partAvailabilityInfoIcon, partAvailabilityNoIcon, partAvailabilityUnknownIcon, partAvailabilityWarningIcon, partAvailabilityYesIcon, partIdenticalIcon, partIdenticalPredecessorIcon, partIdenticalSuccessorIcon, partIdenticalSuccpredecessorIcon, partPredecessorIcon, partSuccessorIcon, partSuccessorPredecessorIcon, partsChangelocationIcon, partsForwardIcon, partsIcon, partsInventoryIcon, partsNonStockForwardIcon, partsNonStockIcon, partsPickingIcon, partsPickingPlusIcon, partsReceivingIcon, pause, pauseIcon, payload, payloadIcon, paymentAppIcon, paymentCashAppIcon, paymentChargingCardAppIcon, paymentCreditcardAppIcon, paymentMachineAppIcon, payment_app, payment_cash_app, payment_charging_card_app, payment_creditcard_app, payment_machine_app, performance, performanceIcon, petrol, petrolIcon, phone, phoneIcon, pin, pinFilledAppIcon, pinGenericFilledAppIcon, pinIcon, pin_filled_app, pin_generic_filled_app, play, playIcon, plugCcsAppIcon, plugChademoAppIcon, plugChargeAppIcon, plugGenericAppIcon, plugSchukoAppIcon, plugType1AppIcon, plugType2AppIcon, plug_ccs_app, plug_chademo_app, plug_charge_app, plug_generic_app, plug_schuko_app, plug_type1_app, plug_type2_app, plusServiceIcon, porscheBrandIcon, power, powerIcon, powerTrainIcon, powertrain, preHeaterAppIcon, pre_heater_app, preciseLaneNavigationAppIcon, precise_lane_navigation_app, presentAppIcon, present_app, priceTypeSwitchIcon, printer, printerIcon, privacyAppIcon, privacy_app, profile, profileIcon, profileRegisterAppIcon, profileVerifiedIcon, profile_register_app, profile_verified, publicServiceIcon, publicTransportAppIcon, public_service, public_transport_app, qualifiedWorkshopIcon, qualified_workshop, questionnaireAppIcon, questionnaire_app, radio, radioButtonInselectedIcon, radioButtonSelectedForDefIcon, radioButtonSelectedIcon, radioIcon, radio_button_inselected, radio_button_selected, radio_button_selected_for_development, range, rangeIcon, reload, reloadIcon, remove, removeIcon, repeat, repeatIcon, repeatRepairIcon, replacementVehicleIcon, returnDateIcon, rewind, rewindIcon, roadsideAssistanceIcon, roadside_assistance, route, routeArrowAppIcon, routeIcon, route_arrow_app, routesHistoryAppIcon, routes_history_app, rss, rssIcon, safety, safetyIcon, save, saveAppIcon, saveIcon, save_app, seat, seatAirIcon, seatBrandIcon, seatIcon, seat_air, secretTipAppIcon, secretTipFilledAppIcon, secret_tip_app, secret_tip_filled_app, selected, selectedIcon, selectedPartnerNetworkAppIcon, selected_partner_network_app, sendToCarAppIcon, send_to_car_app, service, serviceAdvisorIcon, serviceBellIcon, serviceFilledAppIcon, serviceIcon, service_bell, service_filled_app, settings, settingsIcon, shareAndroidIcon, shareIosIcon, share_android, share_ios, shoppingCartFilledAppIcon, shoppingCartIcon, shopping_cart, shopping_cart_filled_app, shuffle, shuffleIcon, size, sizeIcon, skillAppIcon, skill_app, skipBackwardIcon, skipForwardIcon, skip_backward, skip_forward, skodaBrandIcon, softwareDownloadAppIcon, software_download_app, sortingAppIcon, sorting_app, sound, soundIcon, standardEquipmentIcon, standard_equipment, starFilledIcon, starOutlineIcon, star_filled, star_outline, statisticAppIcon, statistic_app, stockLocatorCommercialIcon, stockLocatorPrivateIcon, stock_locator_commercial, stock_locator_private, stop, stopIcon, strip, switchPositionAppIcon, switch_position_app, syncAppIcon, sync_app, taskAndAppointmentIcon, taxiDealerIcon, taxi_dealer, technicalSpecificationIcon, technical_specification, temperatureAppIcon, temperature_app, testDriveIcon, test_drive, textForwardIcon, thumbsdownAppIcon, thumbsdownFilledAppIcon, thumbsdown_app, thumbsdown_filled_app, thumbsupAppIcon, thumbsupFilledAppIcon, thumbsup_app, thumbsup_filled_app, timeClimatisationAppIcon, timePreferredAppIcon, time_climatisation_app, time_preferred_app, timer, timerIcon, topcardIcon, touaregServiceIcon, transcriptDownloadIcon, transcript_download, transmissionAutomaticIcon, transmissionManualIcon, transmission_automatic, transmission_manual, tripAppIcon, tripLongAppIcon, tripPartedAppIcon, tripShortAppIcon, trip_app, trip_long_app, trip_parted_app, trip_short_app, turnSignalsIcon, turn_signals, unselected, unselectedIcon, updateRefreshAppIcon, update_refresh_app, upload, uploadAppIcon, uploadCustomIcon, upload_app, usedCarCommercialIcon, usedCarPrivateIcon, used_car_commercial, used_car_private, vehicleAmarokIcon, vehicleCaddyIcon, vehicleConversionIcon, vehicleCrafterIcon, vehicleHightIcon, vehicleIdBuzzIcon, vehicleMultivanIcon, vehicleTransporterIcon, vehicle_amarok, vehicle_caddy, vehicle_crafter, vehicle_hight, vehicle_idbuzz, vehicle_multivan, vehicle_transporter, videoChatIcon, video_chat, view360Icon, view_360, vinIcon, virtualRealityIcon, virtual_reality, voiceMessageAppIcon, voice_message_app, volkswagenAppIcon, volkswagenIcon, volkswagen_app, volumeMaximumIcon, volumeMediumIcon, volumeMuteIcon, volume_maximum, volume_medium, volume_mute, vsfSearch48Icon, vsfSearchIcon, vwBrandIcon, vwConnectLicenseAppIcon, vw_connect_license_app, vwnBrandIcon, walkingAppIcon, walkingFilledAppIcon, walking_app, walking_filled_app, wallbox, wallboxIcon, wcAppIcon, wc_app, wcpIcon, weAssistAppIcon, weChargeAppIcon, weDeliverAppIcon, weExperienceAppIcon, weParkAppIcon, weUpgradeAppIcon, we_assist_app, we_charge_app, we_deliver_app, we_experience_app, we_park_app, we_upgrade_app, weatherSunAppIcon, weather_sun_app, wheelToWheelIcon, wheel_to_wheel, windscreenWashIcon, windscreen_wash, wlanHotspotIcon, wlan_hotspot, wrenchForwardIcon };
 //# sourceMappingURL=clr-addons.mjs.map