@porscheinformatik/clr-addons 21.0.7 → 21.1.0

package/fesm2022/porscheinformatik-clr-addons.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, DOCUMENT, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, output, viewChild, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, ChangeDetectorRef, NgZone, Injector, untracked, runInInjectionContext } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, DOCUMENT, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, viewChild, ViewContainerRef, output, afterRenderEffect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, ChangeDetectorRef, NgZone, Injector, untracked, runInInjectionContext } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, NgOptimizedImage, NgClass } from '@angular/common';
 import * as i2 from '@clr/angular/icon';
@@ -7,9 +7,9 @@ import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIco
 import * as i3 from '@angular/forms';
 import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, NgModel } from '@angular/forms';
 import * as i1$2 from '@clr/angular';
-import { ClarityModule, ClrFormsModule, ClrDropdown, ClrIcon, ClrForm, ClrAlert, ClrPopoverPosition, ClrPopoverService, ClrCommonStringsService, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrControlLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule, ClrTooltipModule } from '@clr/angular';
-import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, map as map$1, distinctUntilChanged, shareReplay, combineLatest, skip, auditTime, fromEvent, take as take$1, merge, debounceTime as debounceTime$1, tap, of, switchMap, filter as filter$2, ReplaySubject, takeUntil as takeUntil$1, delay } from 'rxjs';
-import { takeUntil, take, observeOn, filter as filter$1, debounceTime } from 'rxjs/operators';
+import { ClarityModule, ClrFormsModule, ClrDropdown, ClrIcon, ClrForm, ClrAlert, ClrPopoverPosition, ClrPopoverService, ClrCommonStringsService, ClrPopoverType, ClrPopoverHostDirective, CdkTrapFocusModule, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrControlLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule, ClrTooltipModule } from '@clr/angular';
+import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, map as map$1, distinctUntilChanged, shareReplay, combineLatest, skip, auditTime, tap, share, merge, fromEvent, first, take as take$1, debounceTime as debounceTime$1, of, switchMap, filter as filter$2, ReplaySubject, takeUntil as takeUntil$1, delay } from 'rxjs';
+import { takeUntil, take, observeOn, filter as filter$1, skip as skip$1, debounceTime } from 'rxjs/operators';
 import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { trigger, transition, style, animate, state } from '@angular/animations';
@@ -20,10 +20,10 @@ import * as i2$3 from '@clr/angular/popover/common';
 import * as i2$4 from '@clr/angular/emphasis/alert';
 import { takeUntilDestroyed, toObservable, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@clr/angular/progress/spinner';
+import * as i4 from '@clr/angular/forms/checkbox';
 import * as i3$2 from '@clr/angular/forms/input';
 import * as i1$4 from '@angular/common/http';
 import { CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import * as i4 from '@clr/angular/forms/checkbox';
 import * as i4$1 from '@clr/angular/forms/datepicker';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import * as i1$5 from '@clr/angular/popover/tooltip';
@@ -3699,7 +3699,7 @@ class ClrTreetableActionOverflow {
       </div>
     </ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "directive", type: i1$2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableActionOverflow, decorators: [{
             type: Component,
@@ -3925,11 +3925,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], propDecorators: { clrExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrExpanded", required: false }] }, { type: i0.Output, args: ["clrExpandedChange"] }], clrExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrExpandable", required: false }] }], clrClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrClickable", required: false }] }], clrTtItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtItem", required: false }] }], _actionOverflow: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClrTreetableActionOverflow), { isSignal: true }] }] } });
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-class Sort {
+class SortStateService {
     constructor() {
         this._comparator = signal(null, ...(ngDevMode ? [{ debugName: "_comparator" }] : /* istanbul ignore next */ []));
         this._reverse = signal(false, ...(ngDevMode ? [{ debugName: "_reverse" }] : /* istanbul ignore next */ []));
@@ -3970,10 +3970,10 @@ class Sort {
         }
         return (this._reverse() ? -1 : 1) * currentComparator.compare(a, b);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Sort, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Sort }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SortStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SortStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Sort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SortStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -4186,7 +4186,7 @@ function areFiltersDistinct(prev, curr) {
 }
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -4204,7 +4204,7 @@ class RegisteredTreetableFilter {
         this.unregister = unregister;
     }
 }
-class Filters {
+class FilterStateService {
     constructor() {
         this._destroyRef = inject(DestroyRef);
         this.filterId = 0;
@@ -4269,10 +4269,10 @@ class Filters {
         });
         return registered;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Filters, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Filters }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Filters, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterStateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4334,14 +4334,14 @@ function areTreetableStatesEqual(prev, curr) {
 }
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class TreetableDataStateService {
     constructor() {
-        this._filters = inject((Filters));
-        this._sort = inject((Sort));
+        this._filters = inject((FilterStateService));
+        this._sort = inject((SortStateService));
         this._dataSource = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataSource" }] : /* istanbul ignore next */ []));
         this._stickyIndeterminate = signal(false, ...(ngDevMode ? [{ debugName: "_stickyIndeterminate" }] : /* istanbul ignore next */ []));
         this._itemsExternallySelected = signal([], ...(ngDevMode ? [{ debugName: "_itemsExternallySelected" }] : /* istanbul ignore next */ []));
@@ -4489,8 +4489,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+const TreetableColumnUpdate = {
+    WIDTH: 'WIDTH',
+    HIDDEN: 'HIDDEN',
+    RESET_HIDDEN: 'RESET_HIDDEN',
+};
+class TreetableColumnStateService {
+    constructor() {
+        this._changeWidth$ = new Subject();
+        this._changeHideable$ = new Subject();
+        this._changeHiddenForAll$ = new Subject();
+        this._changeHidden$ = new Subject();
+        this._resetHidden$ = new Subject();
+        this._columnState = signal({}, ...(ngDevMode ? [{ debugName: "_columnState" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => Object.values(this._columnState()).sort((a, b) => a.columnIndex - b.columnIndex), ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.visibleColumns = computed(() => this.columns().filter(column => !column.hidden), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+        this.hideableColumns = computed(() => this.columns().filter(column => column.hideable), ...(ngDevMode ? [{ debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
+        this.hasHideableColumns = computed(() => this.hideableColumns()?.length > 0, ...(ngDevMode ? [{ debugName: "hasHideableColumns" }] : /* istanbul ignore next */ []));
+        this._changeWidthAction$ = this._changeWidth$.pipe(tap(({ id, width }) => this.update(id, { width })), share());
+        this._changeHideableAction$ = this._changeHideable$.pipe(tap(patch => {
+            const current = this.getColumn(patch.id);
+            if (current.hideable && !patch.hideable) {
+                this.update(patch.id, { hideable: false, hidden: false, initialHidden: false });
+            }
+            if (!current.hideable && patch.hideable) {
+                this.update(patch.id, { hideable: true, hidden: patch.hidden, initialHidden: patch.hidden });
+            }
+            this.update(patch.id, { hidden: patch.hidden });
+        }), share());
+        this._changeHiddenAction$ = this._changeHidden$.pipe(filter$1(change => this.getColumn(change.id)?.hideable), tap(change => this.update(change.id, { hidden: change.hidden })), share());
+        this._changeHiddenForAllAction$ = this._changeHiddenForAll$.pipe(tap(change => {
+            this._columnState.update(current => Object.fromEntries(Object.entries(current).map(([id, column]) => [
+                id,
+                {
+                    ...column,
+                    hidden: change,
+                },
+            ])));
+        }), share());
+        this._resetHiddenAction$ = this._resetHidden$.pipe(tap(() => {
+            this._columnState.update(current => Object.fromEntries(Object.entries(current).map(([id, column]) => [
+                id,
+                column.hideable
+                    ? {
+                        ...column,
+                        hidden: column.initialHidden,
+                    }
+                    : column,
+            ])));
+        }), share());
+        this.changes$ = merge(this._changeWidthAction$.pipe(map$1(() => TreetableColumnUpdate.WIDTH)), this._changeHideableAction$.pipe(map$1(() => TreetableColumnUpdate.HIDDEN)), this._changeHiddenForAllAction$.pipe(map$1(() => TreetableColumnUpdate.HIDDEN)), this._changeHiddenAction$.pipe(map$1(() => TreetableColumnUpdate.HIDDEN)), this._resetHiddenAction$.pipe(map$1(() => TreetableColumnUpdate.HIDDEN)));
+        this._changeWidthAction$.pipe(takeUntilDestroyed()).subscribe();
+        this._changeHideableAction$.pipe(takeUntilDestroyed()).subscribe();
+        this._changeHiddenForAllAction$.pipe(takeUntilDestroyed()).subscribe();
+        this._changeHiddenAction$.pipe(takeUntilDestroyed()).subscribe();
+        this._resetHiddenAction$.pipe(takeUntilDestroyed()).subscribe();
+    }
+    register(options) {
+        this._columnState.update(current => ({
+            ...current,
+            [options.id]: {
+                id: options.id,
+                columnIndex: Number.MAX_SAFE_INTEGER,
+                hideable: false,
+                hidden: false,
+                initialHidden: false,
+                titleTemplateRef: options.titleTemplateRef,
+            },
+        }));
+    }
+    registerHideable(columnId, options) {
+        this._columnState.update(current => {
+            const existing = current[columnId];
+            if (!existing) {
+                return current;
+            }
+            return {
+                ...current,
+                [columnId]: {
+                    ...existing,
+                    hideable: options.hideable,
+                    hidden: options.hidden,
+                    initialHidden: options.initialHidden ?? options.hidden,
+                    titleTemplateRef: options.titleTemplateRef,
+                },
+            };
+        });
+    }
+    unregister(id) {
+        this._columnState.update(current => {
+            const next = { ...current };
+            delete next[id];
+            return next;
+        });
+    }
+    initializeOrder(idsInRenderOrder) {
+        this._columnState.update(current => {
+            const next = { ...current };
+            idsInRenderOrder.forEach((id, index) => {
+                if (next[id]) {
+                    next[id] = {
+                        ...next[id],
+                        columnIndex: index,
+                    };
+                }
+            });
+            return next;
+        });
+    }
+    changeWidth(id, width) {
+        this._changeWidth$.next({ id, width });
+    }
+    changeHideable(id, hideable, hidden) {
+        this._changeHideable$.next({ id, hideable, hidden: hidden ?? false });
+    }
+    changeHiddenForAll(hidden) {
+        this._changeHiddenForAll$.next(hidden);
+    }
+    displayAllColumns() {
+        this.changeHiddenForAll(false);
+    }
+    toggleHidden(id) {
+        const current = this.getColumn(id);
+        this._changeHidden$.next({ id, hidden: !current.hidden });
+    }
+    resetToInitialHidden() {
+        this._resetHidden$.next();
+    }
+    getColumnState(id) {
+        return toObservable(this._columnState).pipe(map$1(columns => columns[id]), distinctUntilChanged());
+    }
+    getColumn(id) {
+        return this._columnState()[id];
+    }
+    update(id, patch) {
+        this._columnState.update(current => {
+            const existing = current[id];
+            if (!existing) {
+                return current;
+            }
+            return {
+                ...current,
+                [id]: {
+                    ...existing,
+                    ...patch,
+                    id: existing.id,
+                },
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableColumnStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableColumnStateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableColumnStateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -4528,11 +4684,23 @@ class ClrTreetable {
         this._dataStateService.toggleSelectionForDisplayedNodes();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetable, isStandalone: false, selector: "clr-treetable", inputs: { clrClickableRows: { classPropertyName: "clrClickableRows", publicName: "clrClickableRows", isSignal: true, isRequired: false, transformFunction: null }, clrHideHeader: { classPropertyName: "clrHideHeader", publicName: "clrHideHeader", isSignal: true, isRequired: false, transformFunction: null }, clrTtLoading: { classPropertyName: "clrTtLoading", publicName: "clrTtLoading", isSignal: true, isRequired: false, transformFunction: null }, clrTtSelected: { classPropertyName: "clrTtSelected", publicName: "clrTtSelected", isSignal: true, isRequired: false, transformFunction: null }, clrTtAutoParentSelection: { classPropertyName: "clrTtAutoParentSelection", publicName: "clrTtAutoParentSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectedChange: "clrTtSelectedChange", clrTtRefresh: "clrTtRefresh" }, host: { properties: { "class.empty": "empty()", "class.treetable-host": "true" } }, providers: [TREETABLE_RECURSION_SERVICE_PROVIDER, TreetableDataStateService, Sort, Filters], queries: [{ propertyName: "_ttRows", predicate: ClrTreetableRow, descendants: true, isSignal: true }, { propertyName: "_actionOverflow", predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"clrHideHeader()\">\n      @if (showSelection() && !empty()) {\n      <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-column\" role=\"row\">\n        <input\n          type=\"checkbox\"\n          data-testId=\"clrTtSelectAll\"\n          [checked]=\"areAllRowsSelected()\"\n          (change)=\"toggleSelectAll()\"\n        />\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\" />\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      @if (isRecursionMode()) {\n      <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n      } @else {\n      <ng-content select=\"clr-tt-row\" />\n      } @if (empty()) {\n      <ng-content select=\"clr-tt-placeholder\" />\n      }\n    </div>\n  </div>\n  @if (clrTtLoading()) {\n  <div class=\"treetable-spinner\">\n    <clr-spinner clrMedium />\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetable, isStandalone: false, selector: "clr-treetable", inputs: { clrClickableRows: { classPropertyName: "clrClickableRows", publicName: "clrClickableRows", isSignal: true, isRequired: false, transformFunction: null }, clrHideHeader: { classPropertyName: "clrHideHeader", publicName: "clrHideHeader", isSignal: true, isRequired: false, transformFunction: null }, clrTtLoading: { classPropertyName: "clrTtLoading", publicName: "clrTtLoading", isSignal: true, isRequired: false, transformFunction: null }, clrTtSelected: { classPropertyName: "clrTtSelected", publicName: "clrTtSelected", isSignal: true, isRequired: false, transformFunction: null }, clrTtAutoParentSelection: { classPropertyName: "clrTtAutoParentSelection", publicName: "clrTtAutoParentSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectedChange: "clrTtSelectedChange", clrTtRefresh: "clrTtRefresh" }, host: { properties: { "class.empty": "empty()", "class.treetable-host": "true" } }, providers: [
+            TREETABLE_RECURSION_SERVICE_PROVIDER,
+            TreetableDataStateService,
+            TreetableColumnStateService,
+            SortStateService,
+            FilterStateService,
+        ], queries: [{ propertyName: "_ttRows", predicate: ClrTreetableRow, descendants: true, isSignal: true }, { propertyName: "_actionOverflow", predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"clrHideHeader()\">\n      @if (showSelection() && !empty()) {\n      <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-column\" role=\"row\">\n        <input\n          type=\"checkbox\"\n          data-testId=\"clrTtSelectAll\"\n          [checked]=\"areAllRowsSelected()\"\n          (change)=\"toggleSelectAll()\"\n        />\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\" />\n      </div>\n    </div>\n\n    <div class=\"treetable-body\">\n      @if (isRecursionMode()) {\n      <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n      } @else {\n      <ng-content select=\"clr-tt-row\" />\n      } @if (empty() && !clrTtLoading()) {\n      <ng-content select=\"clr-tt-placeholder\" />\n      }\n    </div>\n  </div>\n\n  <ng-content select=\"clr-tt-footer\"></ng-content>\n\n  @if (clrTtLoading()) {\n  <div class=\"treetable-spinner\">\n    <clr-spinner clrMedium />\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetable, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-treetable', host: { '[class.empty]': 'empty()', '[class.treetable-host]': 'true' }, providers: [TREETABLE_RECURSION_SERVICE_PROVIDER, TreetableDataStateService, Sort, Filters], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"clrHideHeader()\">\n      @if (showSelection() && !empty()) {\n      <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-column\" role=\"row\">\n        <input\n          type=\"checkbox\"\n          data-testId=\"clrTtSelectAll\"\n          [checked]=\"areAllRowsSelected()\"\n          (change)=\"toggleSelectAll()\"\n        />\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\" />\n      </div>\n    </div>\n    <div class=\"treetable-body\">\n      @if (isRecursionMode()) {\n      <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n      } @else {\n      <ng-content select=\"clr-tt-row\" />\n      } @if (empty()) {\n      <ng-content select=\"clr-tt-placeholder\" />\n      }\n    </div>\n  </div>\n  @if (clrTtLoading()) {\n  <div class=\"treetable-spinner\">\n    <clr-spinner clrMedium />\n  </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'clr-treetable', host: { '[class.empty]': 'empty()', '[class.treetable-host]': 'true' }, providers: [
+                        TREETABLE_RECURSION_SERVICE_PROVIDER,
+                        TreetableDataStateService,
+                        TreetableColumnStateService,
+                        SortStateService,
+                        FilterStateService,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\">\n  <div class=\"treetable-grid\" role=\"grid\">\n    <div class=\"treetable-header\" role=\"rowgroup\" [class.hide-header]=\"clrHideHeader()\">\n      @if (showSelection() && !empty()) {\n      <div class=\"clr-checkbox-wrapper treetable-row-selection treetable-column\" role=\"row\">\n        <input\n          type=\"checkbox\"\n          data-testId=\"clrTtSelectAll\"\n          [checked]=\"areAllRowsSelected()\"\n          (change)=\"toggleSelectAll()\"\n        />\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\" role=\"row\">\n        <ng-content select=\"clr-tt-column\" />\n      </div>\n    </div>\n\n    <div class=\"treetable-body\">\n      @if (isRecursionMode()) {\n      <clr-tt-recursive-rows [children]=\"displayedNodes()\" />\n      } @else {\n      <ng-content select=\"clr-tt-row\" />\n      } @if (empty() && !clrTtLoading()) {\n      <ng-content select=\"clr-tt-placeholder\" />\n      }\n    </div>\n  </div>\n\n  <ng-content select=\"clr-tt-footer\"></ng-content>\n\n  @if (clrTtLoading()) {\n  <div class=\"treetable-spinner\">\n    <clr-spinner clrMedium />\n  </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { clrClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrClickableRows", required: false }] }], clrHideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrHideHeader", required: false }] }], clrTtLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtLoading", required: false }] }], clrTtSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSelected", required: false }] }], clrTtAutoParentSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtAutoParentSelection", required: false }] }], clrTtSelectedChange: [{ type: i0.Output, args: ["clrTtSelectedChange"] }], clrTtRefresh: [{ type: i0.Output, args: ["clrTtRefresh"] }], _ttRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClrTreetableRow), { ...{ descendants: true }, isSignal: true }] }], _actionOverflow: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClrTreetableActionOverflow), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /*
@@ -4552,12 +4720,20 @@ var ClrTreetableSortOrder;
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+let columnId = 0;
 class ClrTreetableColumn {
+    ngOnInit() {
+        this._columnState.register({ id: this.columnId, titleTemplateRef: this._columnTitleRef() });
+    }
+    ngOnDestroy() {
+        this._columnState.unregister(this.columnId);
+    }
     constructor() {
-        this._sort = inject((Sort));
+        this.columnId = `clr-tt-col-${columnId++}`;
+        this._columnTitleRef = viewChild('columnTitle', { ...(ngDevMode ? { debugName: "_columnTitleRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this._columnState = inject(TreetableColumnStateService);
+        this._sort = inject((SortStateService));
         this.clrTtSortBy = input(null, ...(ngDevMode ? [{ debugName: "clrTtSortBy" }] : /* istanbul ignore next */ []));
-        this.clrTtSortOrder = input(ClrTreetableSortOrder.UNSORTED, ...(ngDevMode ? [{ debugName: "clrTtSortOrder" }] : /* istanbul ignore next */ []));
-        this.clrTtSortOrderChange = output();
         this._internalSortOrder = computed(() => {
             const sortState = this._sort.sortState();
             const sortBy = this.clrTtSortBy();
@@ -4566,6 +4742,8 @@ class ClrTreetableColumn {
             }
             return sortState.reverse ? ClrTreetableSortOrder.DESC : ClrTreetableSortOrder.ASC;
         }, ...(ngDevMode ? [{ debugName: "_internalSortOrder" }] : /* istanbul ignore next */ []));
+        this.clrTtSortOrder = input(ClrTreetableSortOrder.UNSORTED, ...(ngDevMode ? [{ debugName: "clrTtSortOrder" }] : /* istanbul ignore next */ []));
+        this.clrTtSortOrderChange = outputFromObservable(toObservable(this._internalSortOrder));
         this.isSortable = computed(() => !!this.clrTtSortBy(), ...(ngDevMode ? [{ debugName: "isSortable" }] : /* istanbul ignore next */ []));
         this.sortDirection = computed(() => {
             const order = this._internalSortOrder();
@@ -4620,11 +4798,6 @@ class ClrTreetableColumn {
                     break;
             }
         });
-        // Emit sort order changes of the column
-        effect(() => {
-            const internalSortOrder = this._internalSortOrder();
-            this.clrTtSortOrderChange.emit(internalSortOrder);
-        });
     }
     sort(reverse) {
         const comparator = this.clrTtSortBy();
@@ -4634,7 +4807,7 @@ class ClrTreetableColumn {
         this._sort.toggle(comparator, reverse);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()" } }, providers: [ClrPopoverService], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()" } }, providers: [ClrPopoverService], viewQueries: [{ propertyName: "_columnTitleRef", first: true, predicate: ["columnTitle"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
     @if (isSortable()) {
     <button type="button" class="treetable-column-title" data-testId="clrTtSortButton" (click)="sort()">
       <ng-container *ngTemplateOutlet="columnTitle" />
@@ -4700,7 +4873,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [], propDecorators: { clrTtSortBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortBy", required: false }] }], clrTtSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortOrder", required: false }] }], clrTtSortOrderChange: [{ type: i0.Output, args: ["clrTtSortOrderChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { _columnTitleRef: [{ type: i0.ViewChild, args: ['columnTitle', { ...{ read: TemplateRef }, isSignal: true }] }], clrTtSortBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortBy", required: false }] }], clrTtSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortOrder", required: false }] }], clrTtSortOrderChange: [{ type: i0.Output, args: ["clrTtSortOrderChange"] }] } });
+
+let id = 0;
+class ClrTreetableColumnManagerMenuComponent {
+    constructor() {
+        this.popoverId = `clr-column-manager-menu-id-${id++}`;
+        this._commonStringsService = inject(ClrCommonStringsService);
+        this._popoverService = inject(ClrPopoverService);
+        this._columnService = inject(TreetableColumnStateService);
+        // Template constants
+        this.popoverPosition = ClrPopoverPosition.TOP_LEFT;
+        this.popoverType = ClrPopoverType.DROPDOWN;
+        this.commonStrings = this._commonStringsService.keys;
+        this.resetLabel = input.required(...(ngDevMode ? [{ debugName: "resetLabel" }] : /* istanbul ignore next */ []));
+        this.open = toSignal(this._popoverService.openChange);
+        this.hideableColumns = this._columnService.hideableColumns;
+        this.hasOnlyOneVisibleColumn = computed(() => this._columnService.columns().length === this._columnService.hideableColumns().length &&
+            this._columnService.visibleColumns().length === 1, ...(ngDevMode ? [{ debugName: "hasOnlyOneVisibleColumn" }] : /* istanbul ignore next */ []));
+        this.areAllColumnsVisible = computed(() => this._columnService.visibleColumns().length === this._columnService.columns().length, ...(ngDevMode ? [{ debugName: "areAllColumnsVisible" }] : /* istanbul ignore next */ []));
+        this.areAllColumnsReset = computed(() => this._columnService.hideableColumns().every(column => column.hidden === column.initialHidden), ...(ngDevMode ? [{ debugName: "areAllColumnsReset" }] : /* istanbul ignore next */ []));
+    }
+    toggleColumnState(id) {
+        this._columnService.toggleHidden(id);
+    }
+    selectAll() {
+        if (!this.areAllColumnsVisible()) {
+            this._columnService.displayAllColumns();
+        }
+    }
+    resetAllToInitial() {
+        this._columnService.resetToInitialHidden();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableColumnManagerMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableColumnManagerMenuComponent, isStandalone: false, selector: "clr-tt-column-manager-menu", inputs: { resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.column-manager-menu": "true", "class.active": "open()" } }, hostDirectives: [{ directive: i1$2.ClrPopoverHostDirective }], ngImport: i0, template: `
+    <button
+      role="button"
+      type="button"
+      class="btn btn-sm column-manager-menu-open"
+      clrPopoverOrigin
+      clrPopoverOpenCloseButton
+      [attr.aria-controls]="popoverId"
+      [attr.aria-expanded]="open()"
+      [attr.aria-haspopup]="'menu'"
+    >
+      {{ commonStrings.pickColumns }}
+    </button>
+    <div
+      class="column-switch"
+      role="dialog"
+      [attr.aria-label]="commonStrings.showColumnsMenuDescription"
+      [id]="popoverId"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+      *clrPopoverContent="
+        open();
+        at: popoverPosition;
+        type: popoverType;
+        outsideClickToClose: true;
+        scrollToClose: true
+      "
+    >
+      <div class="switch-header">
+        <div class="clr-sr-only" tabindex="-1" #allSelected>{{ commonStrings.allColumnsSelected }}</div>
+        <h2>{{ commonStrings.showColumns }}</h2>
+        <button
+          class="btn btn-sm btn-link-neutral toggle-switch-close-button"
+          clrPopoverCloseButton
+          type="button"
+          [attr.aria-label]="commonStrings.close"
+        >
+          <cds-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.close"></cds-icon>
+          <span class="clr-sr-only">{{ commonStrings.close }}</span>
+        </button>
+      </div>
+      <ul class="switch-content list-unstyled">
+        @for (column of hideableColumns(); track column.id) {
+        <li>
+          <clr-checkbox-wrapper>
+            <input
+              clrCheckbox
+              type="checkbox"
+              [disabled]="hasOnlyOneVisibleColumn() && !column.hidden"
+              [ngModel]="!column.hidden"
+              (ngModelChange)="toggleColumnState(column.id)"
+            />
+            <label>
+              <ng-template [ngTemplateOutlet]="column.titleTemplateRef"></ng-template>
+            </label>
+          </clr-checkbox-wrapper>
+        </li>
+        }
+      </ul>
+      <div class="switch-footer">
+        <button
+          type="button"
+          class="btn btn-sm btn-link switch-button"
+          [disabled]="areAllColumnsVisible()"
+          (click)="selectAll()"
+        >
+          {{ commonStrings.selectAll }}
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-link switch-button"
+          [disabled]="areAllColumnsReset()"
+          (click)="resetAllToInitial()"
+        >
+          {{ resetLabel() }}
+        </button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableColumnManagerMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-tt-column-manager-menu',
+                    template: `
+    <button
+      role="button"
+      type="button"
+      class="btn btn-sm column-manager-menu-open"
+      clrPopoverOrigin
+      clrPopoverOpenCloseButton
+      [attr.aria-controls]="popoverId"
+      [attr.aria-expanded]="open()"
+      [attr.aria-haspopup]="'menu'"
+    >
+      {{ commonStrings.pickColumns }}
+    </button>
+    <div
+      class="column-switch"
+      role="dialog"
+      [attr.aria-label]="commonStrings.showColumnsMenuDescription"
+      [id]="popoverId"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+      *clrPopoverContent="
+        open();
+        at: popoverPosition;
+        type: popoverType;
+        outsideClickToClose: true;
+        scrollToClose: true
+      "
+    >
+      <div class="switch-header">
+        <div class="clr-sr-only" tabindex="-1" #allSelected>{{ commonStrings.allColumnsSelected }}</div>
+        <h2>{{ commonStrings.showColumns }}</h2>
+        <button
+          class="btn btn-sm btn-link-neutral toggle-switch-close-button"
+          clrPopoverCloseButton
+          type="button"
+          [attr.aria-label]="commonStrings.close"
+        >
+          <cds-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.close"></cds-icon>
+          <span class="clr-sr-only">{{ commonStrings.close }}</span>
+        </button>
+      </div>
+      <ul class="switch-content list-unstyled">
+        @for (column of hideableColumns(); track column.id) {
+        <li>
+          <clr-checkbox-wrapper>
+            <input
+              clrCheckbox
+              type="checkbox"
+              [disabled]="hasOnlyOneVisibleColumn() && !column.hidden"
+              [ngModel]="!column.hidden"
+              (ngModelChange)="toggleColumnState(column.id)"
+            />
+            <label>
+              <ng-template [ngTemplateOutlet]="column.titleTemplateRef"></ng-template>
+            </label>
+          </clr-checkbox-wrapper>
+        </li>
+        }
+      </ul>
+      <div class="switch-footer">
+        <button
+          type="button"
+          class="btn btn-sm btn-link switch-button"
+          [disabled]="areAllColumnsVisible()"
+          (click)="selectAll()"
+        >
+          {{ commonStrings.selectAll }}
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-link switch-button"
+          [disabled]="areAllColumnsReset()"
+          (click)="resetAllToInitial()"
+        >
+          {{ resetLabel() }}
+        </button>
+      </div>
+    </div>
+  `,
+                    host: {
+                        '[class.column-manager-menu]': 'true',
+                        '[class.active]': 'open()',
+                    },
+                    hostDirectives: [ClrPopoverHostDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                }]
+        }], propDecorators: { resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: true }] }] } });
+
+class ClrTreetableFooter {
+    constructor() {
+        this._commonStringsService = inject(ClrCommonStringsService);
+        this._columnService = inject(TreetableColumnStateService);
+        this._dataService = inject(TreetableDataStateService);
+        this.commonStrings = this._commonStringsService.keys;
+        this.clrResetLabel = input('RESET', ...(ngDevMode ? [{ debugName: "clrResetLabel" }] : /* istanbul ignore next */ []));
+        this.hasHideableColumns = this._columnService.hasHideableColumns;
+        this.selectedRows = this._dataService.selectedNodes;
+        this.hasSelectedRows = computed(() => this.selectedRows()?.length > 0, ...(ngDevMode ? [{ debugName: "hasSelectedRows" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ClrTreetableFooter, isStandalone: false, selector: "clr-tt-footer", inputs: { clrResetLabel: { classPropertyName: "clrResetLabel", publicName: "clrResetLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.treetable-footer": "true" } }, ngImport: i0, template: `
+    @if (hasSelectedRows()) {
+    <div class="clr-form-control-disabled">
+      <clr-checkbox-wrapper class="treetable-footer-select">
+        <input clrCheckbox type="checkbox" checked="checked" disabled />
+        <label>{{ selectedRows().length }}</label>
+        <span class="clr-sr-only">{{ commonStrings.selectedRows }}</span>
+      </clr-checkbox-wrapper>
+    </div>
+    } @if (hasHideableColumns()) {
+    <clr-tt-column-manager-menu [resetLabel]="clrResetLabel()" />
+    }
+
+    <div class="treetable-footer-description">
+      <ng-content />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "component", type: ClrTreetableColumnManagerMenuComponent, selector: "clr-tt-column-manager-menu", inputs: ["resetLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-tt-footer',
+                    template: `
+    @if (hasSelectedRows()) {
+    <div class="clr-form-control-disabled">
+      <clr-checkbox-wrapper class="treetable-footer-select">
+        <input clrCheckbox type="checkbox" checked="checked" disabled />
+        <label>{{ selectedRows().length }}</label>
+        <span class="clr-sr-only">{{ commonStrings.selectedRows }}</span>
+      </clr-checkbox-wrapper>
+    </div>
+    } @if (hasHideableColumns()) {
+    <clr-tt-column-manager-menu [resetLabel]="clrResetLabel()" />
+    }
+
+    <div class="treetable-footer-description">
+      <ng-content />
+    </div>
+  `,
+                    host: {
+                        '[class.treetable-footer]': 'true',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                }]
+        }], propDecorators: { clrResetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrResetLabel", required: false }] }] } });
+
+/*
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * A structural directive meant to be used inside a clr-tt-column component.
+ *
+ * @example
+ * <clr-tt-column>
+ *   <ng-container *clrTtHideableColumn="{ hidden: true }">
+ *     User ID
+ *   </ng-container>
+ * </clr-tt-column>
+ *
+ * It sets up state and properties so that columns can be managed for hide/show
+ * by a service and the column manager menu component.
+ *
+ * The structural directive captures its content as a TemplateRef (without ng-content),
+ * which allows it to be safely instantiated in multiple places (header + menu).
+ */
+class ClrTreetableHideableColumn {
+    constructor() {
+        this._titleTemplateRef = inject(TemplateRef);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._columnState = inject(TreetableColumnStateService);
+        this._column = inject(ClrTreetableColumn);
+        this.clrTtHideableColumn = input('', ...(ngDevMode ? [{ debugName: "clrTtHideableColumn" }] : /* istanbul ignore next */ []));
+        this.clrTtHiddenChange = output();
+        this.resolvedHidden = computed(() => {
+            const value = this.clrTtHideableColumn();
+            if (typeof value === 'string') {
+                return { hidden: false, initialHidden: false };
+            }
+            const hidden = value?.hidden ?? false;
+            return { hidden: hidden, initialHidden: value?.initial ?? hidden };
+        }, ...(ngDevMode ? [{ debugName: "resolvedHidden" }] : /* istanbul ignore next */ []));
+        // Render the content in-place (inside the column header)
+        this._viewContainerRef.createEmbeddedView(this._titleTemplateRef);
+        // React to input changes after initial registration (skip the first emission handled by ngOnInit)
+        toObservable(this.resolvedHidden)
+            .pipe(skip$1(1), takeUntilDestroyed())
+            .subscribe(value => {
+            this._columnState.changeHideable(this._column.columnId, true, value.hidden);
+        });
+    }
+    ngOnInit() {
+        // Register the hideable state with the titleTemplateRef that does NOT contain <ng-content>
+        const resolvedHidden = this.resolvedHidden();
+        this._columnState.registerHideable(this._column.columnId, {
+            hideable: true,
+            hidden: resolvedHidden.hidden,
+            initialHidden: resolvedHidden.initialHidden,
+            titleTemplateRef: this._titleTemplateRef,
+        });
+    }
+    ngOnDestroy() {
+        // When the directive is destroyed, mark the column as non-hideable
+        this._columnState.changeHideable(this._column.columnId, false, false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableHideableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: ClrTreetableHideableColumn, isStandalone: false, selector: "[clrTtHideableColumn]", inputs: { clrTtHideableColumn: { classPropertyName: "clrTtHideableColumn", publicName: "clrTtHideableColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtHiddenChange: "clrTtHiddenChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableHideableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrTtHideableColumn]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [], propDecorators: { clrTtHideableColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtHideableColumn", required: false }] }], clrTtHiddenChange: [{ type: i0.Output, args: ["clrTtHiddenChange"] }] } });
 
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
@@ -4709,14 +5216,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  */
 class ClrTreetableFilter {
     constructor() {
-        this.commonStringsService = inject(ClrCommonStringsService);
-        this.smartToggleService = inject(ClrPopoverService);
-        this.filterProvider = inject((Filters));
-        // Smart Popover
-        this.smartPosition = ClrPopoverPosition.BOTTOM_LEFT;
+        this._commonStringsService = inject(ClrCommonStringsService);
+        this._popoverService = inject(ClrPopoverService);
+        this.filterProvider = inject((FilterStateService));
+        // Template constants
+        this.popoverPosition = ClrPopoverPosition.BOTTOM_LEFT;
+        this.commonStrings = this._commonStringsService.keys;
         this.clrTtFilter = input.required(...(ngDevMode ? [{ debugName: "clrTtFilter" }] : /* istanbul ignore next */ []));
         this.registered = signal(undefined, ...(ngDevMode ? [{ debugName: "registered" }] : /* istanbul ignore next */ []));
-        this.open = toSignal(this.smartToggleService.openChange);
+        this.open = toSignal(this._popoverService.openChange);
         this.active = computed(() => this.clrTtFilter()?.isActive(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
@@ -4750,18 +5258,18 @@ class ClrTreetableFilter {
       class="treetable-filter"
       role="dialog"
       cdkTrapFocus
-      *clrPopoverContent="open(); at: smartPosition; outsideClickToClose: true; scrollToClose: true"
-      [attr.aria-label]="commonStringsService.keys.datagridFilterDialogAriaLabel"
+      *clrPopoverContent="open(); at: popoverPosition; outsideClickToClose: true; scrollToClose: true"
+      [attr.aria-label]="commonStrings.datagridFilterDialogAriaLabel"
     >
       <div class="treetable-filter-close-wrapper">
         <button type="button" class="close" clrPopoverCloseButton>
-          <cds-icon shape="window-close" [attr.aria-label]="commonStringsService.keys.close"></cds-icon>
+          <cds-icon shape="window-close" [attr.aria-label]="commonStrings.close"></cds-icon>
         </button>
       </div>
 
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i2$3.ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2$3.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "directive", type: i1$2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableFilter, decorators: [{
             type: Component,
@@ -4789,12 +5297,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       class="treetable-filter"
       role="dialog"
       cdkTrapFocus
-      *clrPopoverContent="open(); at: smartPosition; outsideClickToClose: true; scrollToClose: true"
-      [attr.aria-label]="commonStringsService.keys.datagridFilterDialogAriaLabel"
+      *clrPopoverContent="open(); at: popoverPosition; outsideClickToClose: true; scrollToClose: true"
+      [attr.aria-label]="commonStrings.datagridFilterDialogAriaLabel"
     >
       <div class="treetable-filter-close-wrapper">
         <button type="button" class="close" clrPopoverCloseButton>
-          <cds-icon shape="window-close" [attr.aria-label]="commonStringsService.keys.close"></cds-icon>
+          <cds-icon shape="window-close" [attr.aria-label]="commonStrings.close"></cds-icon>
         </button>
       </div>
 
@@ -4859,28 +5367,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+/**
+ * The CSS class to use to hide a column and its related cells in the treetable.
+ */
+const HIDDEN_COLUMN_CSS_CLASS = 'treetable-hidden-column';
+
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class TreetableHeaderRenderer {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
     }
     /**
      * Returns the client width of the header cell.
      */
     getWidth() {
-        return this.el.nativeElement.clientWidth;
+        return this.elementRef.nativeElement.clientWidth;
+    }
+    hide() {
+        this.renderer.addClass(this.elementRef.nativeElement, HIDDEN_COLUMN_CSS_CLASS);
+    }
+    show() {
+        const element = this.elementRef.nativeElement;
+        if (element.classList.contains(HIDDEN_COLUMN_CSS_CLASS)) {
+            this.renderer.removeClass(element, HIDDEN_COLUMN_CSS_CLASS);
+        }
     }
     /**
      * Returns all classes starting with 'clr-col'.
      */
     getColumnClasses() {
         const classes = [];
-        this.el.nativeElement.classList.forEach((className) => {
+        this.elementRef.nativeElement.classList.forEach((className) => {
             if (className.indexOf('clr-col') !== -1) {
                 classes.push(className);
             }
@@ -4888,9 +5410,9 @@ class TreetableHeaderRenderer {
         return classes;
     }
     setDefaultColumnClass() {
-        this.renderer.addClass(this.el.nativeElement, 'clr-col');
+        this.renderer.addClass(this.elementRef.nativeElement, 'clr-col');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableHeaderRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableHeaderRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TreetableHeaderRenderer, isStandalone: false, selector: "clr-tt-column", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableHeaderRenderer, decorators: [{
@@ -4899,27 +5421,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     selector: 'clr-tt-column',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class TreetableCellRenderer {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
     }
     setColumnClasses(columnClasses) {
         columnClasses.forEach((className) => {
-            this.renderer.addClass(this.el.nativeElement, className);
+            this.renderer.addClass(this.elementRef.nativeElement, className);
         });
     }
+    hide() {
+        this.renderer.addClass(this.elementRef.nativeElement, HIDDEN_COLUMN_CSS_CLASS);
+    }
+    show() {
+        const element = this.elementRef.nativeElement;
+        if (element.classList.contains(HIDDEN_COLUMN_CSS_CLASS)) {
+            this.renderer.removeClass(element, HIDDEN_COLUMN_CSS_CLASS);
+        }
+    }
     setMaxWidth(maxWidth) {
-        this.renderer.setStyle(this.el.nativeElement, 'max-width', maxWidth + 'px');
+        this.renderer.setStyle(this.elementRef.nativeElement, 'max-width', maxWidth + 'px');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableCellRenderer, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TreetableCellRenderer, isStandalone: false, selector: "clr-tt-cell", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableCellRenderer, decorators: [{
@@ -4928,16 +5459,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     selector: 'clr-tt-cell',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class TreetableRowRenderer {
+    constructor() {
+        this.cells = contentChildren(TreetableCellRenderer, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableRowRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TreetableRowRenderer, isStandalone: false, selector: "clr-tt-row", queries: [{ propertyName: "cells", predicate: TreetableCellRenderer }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: TreetableRowRenderer, isStandalone: false, selector: "clr-tt-row", queries: [{ propertyName: "cells", predicate: TreetableCellRenderer, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableRowRenderer, decorators: [{
             type: Directive,
@@ -4945,93 +5479,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     selector: 'clr-tt-row',
                     standalone: false,
                 }]
-        }], propDecorators: { cells: [{
-                type: ContentChildren,
-                args: [TreetableCellRenderer]
-            }] } });
+        }], propDecorators: { cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TreetableCellRenderer), { isSignal: true }] }] } });
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class TreetableMainRenderer {
     constructor() {
-        this.shouldStabilizeColumn = true;
-    }
-    ngOnInit() {
+        this._columnState = inject(TreetableColumnStateService);
+        this.headers = contentChildren(TreetableHeaderRenderer, ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
+        this.rows = contentChildren(TreetableRowRenderer, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), descendants: true });
+        this.columns = contentChildren(ClrTreetableColumn, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.rules = [
+            this.createClassesRule(),
+            this.createFirstColumnWidthRule(),
+            this.createDisplayRule(),
+        ];
         fromEvent(window, 'resize')
-            .pipe(debounceTime(200))
-            .subscribe(() => this.applyMaxWidth());
-    }
-    ngAfterContentInit() {
-        this.headers.changes.subscribe(() => {
-            this.shouldStabilizeColumn = true;
+            .pipe(debounceTime(200), takeUntilDestroyed())
+            .subscribe(() => this.renderRuleByKey('first-column-width', this.headers(), this.rows()));
+        afterRenderEffect(() => {
+            const headers = this.headers();
+            const rows = this.rows();
+            if (headers.length > 0) {
+                this.renderAllRules(headers, rows);
+            }
         });
-        this.rows.changes.subscribe(() => {
-            this.shouldStabilizeColumn = true;
+        this._columnState.changes$.pipe(takeUntilDestroyed()).subscribe(event => {
+            const headers = this.headers();
+            const rows = this.rows();
+            switch (event) {
+                case TreetableColumnUpdate.HIDDEN:
+                    this.renderRulesByKeys(['display', 'first-column-width'], headers, rows);
+                    break;
+                case TreetableColumnUpdate.RESET_HIDDEN:
+                    this.renderAllRules(headers, rows); // resetHidden etc.
+                    break;
+                case TreetableColumnUpdate.WIDTH:
+                    this.renderRuleByKey('first-column-width', headers, rows);
+                    break;
+                default:
+                    this.renderAllRules(headers, rows);
+            }
         });
-    }
-    ngAfterViewChecked() {
-        if (this.shouldStabilizeColumn) {
-            this.applyColumnClasses();
-            setTimeout(() => {
-                this.applyMaxWidth();
-            }, 10);
-        }
+        toObservable(this.columns)
+            .pipe(first())
+            .subscribe(columns => this.initializeColumnOrder(columns));
     }
     /**
-     * Applies css column class to every header and cell.
+     * Initializes the index order of the columns as they are rendered.
      */
-    applyColumnClasses() {
-        this.shouldStabilizeColumn = false;
-        const headersArray = this.headers.toArray();
-        const rowsArray = this.rows.toArray();
-        headersArray.forEach((header, headerIndex) => {
-            const columnClasses = header.getColumnClasses();
-            if (columnClasses.length === 0) {
-                header.setDefaultColumnClass();
-                rowsArray.forEach(row => {
-                    // set every child cell of the same index to default class
-                    const cell = row.cells.find((_c, cellIndex) => cellIndex === headerIndex);
-                    if (cell) {
-                        cell.setColumnClasses(['clr-col']);
-                    }
-                });
-            }
-            else {
-                // set every child cell of the same index to the same class
-                // we do not allow overriding column width on a per cell basis different to the header.
-                rowsArray.forEach(row => {
-                    const cell = row.cells.find((_c, cellIndex) => cellIndex === headerIndex);
-                    if (cell) {
-                        cell.setColumnClasses(columnClasses);
-                    }
-                });
-            }
-        });
-    }
-    applyMaxWidth() {
-        if (this.headers.first) {
-            const maxWidth = this.headers.first.getWidth();
-            if (maxWidth === 0) {
-                // If the max width is zero, call this in a timeout to be able to retrieve the client rendered value
-                setTimeout(() => {
-                    this.applyMaxWidthOnEachRow(this.headers.first.getWidth());
-                }, 100);
+    initializeColumnOrder(columns) {
+        const idsInOrder = columns.map(column => column.columnId);
+        this._columnState.initializeOrder(idsInOrder);
+    }
+    renderAllRules(headers, rows) {
+        this.render(this.rules, headers, rows);
+    }
+    renderRuleByKey(key, headers, rows) {
+        this.renderRulesByKeys([key], headers, rows);
+    }
+    renderRulesByKeys(keys, headers, rows) {
+        const keySet = new Set(keys);
+        const activeRules = this.rules.filter(rule => keySet.has(rule.key));
+        this.render(activeRules, headers, rows);
+    }
+    render(activeRules, headers, rows) {
+        const columnStates = this._columnState.columns();
+        const statesByIdx = new Map(columnStates.map(state => [state.columnIndex, state]));
+        const firstVisibleIndex = headers.findIndex((_, idx) => !statesByIdx.get(idx)?.hidden);
+        const contexts = headers.map((header, idx) => ({
+            index: idx,
+            isFirstVisible: idx === firstVisibleIndex,
+            header,
+            state: statesByIdx.get(idx),
+        }));
+        const unstableLayoutRules = activeRules.filter(r => r.layoutPhase === 'unstable');
+        const stableLayoutRules = activeRules.filter(r => r.layoutPhase === 'stable');
+        // Phase 1: apply all DOM-mutating rules (classes, display)
+        if (unstableLayoutRules.length) {
+            this.applyRules(unstableLayoutRules, contexts, rows);
+        }
+        // Phase 2: stable - apply all DOM-reading rules (browser reflows on first read after mutations)
+        if (stableLayoutRules.length) {
+            this.applyRules(stableLayoutRules, contexts, rows);
+        }
+    }
+    applyRules(activeRules, contexts, rows) {
+        for (const ctx of contexts) {
+            const preparedRules = activeRules
+                .map(rule => ({ rule, data: rule.prepareData(ctx) }))
+                .filter((x) => x.data !== null);
+            if (ctx.header) {
+                for (const { rule, data } of preparedRules) {
+                    rule.applyHeader?.(ctx.header, data, ctx);
+                }
             }
-            else {
-                this.applyMaxWidthOnEachRow(maxWidth);
+            for (const row of rows) {
+                const cell = row.cells()[ctx.index];
+                if (!cell) {
+                    continue;
+                }
+                for (const { rule, data } of preparedRules) {
+                    rule.applyCell?.(cell, data, ctx);
+                }
             }
         }
     }
-    applyMaxWidthOnEachRow(maxWidth) {
-        this.rows.forEach(row => {
-            row.cells.first.setMaxWidth(maxWidth);
-        });
+    createClassesRule() {
+        return {
+            key: 'classes',
+            layoutPhase: 'unstable',
+            prepareData: ctx => {
+                if (!ctx.header) {
+                    return null;
+                }
+                const classes = ctx.header.getColumnClasses();
+                return { classes: classes.length ? classes : ['clr-col'], useDefault: classes.length === 0 };
+            },
+            applyHeader: (header, data) => {
+                if (data.useDefault) {
+                    header.setDefaultColumnClass();
+                }
+            },
+            applyCell: (cell, data) => {
+                cell.setColumnClasses(data.classes);
+            },
+        };
+    }
+    createFirstColumnWidthRule() {
+        return {
+            key: 'first-column-width',
+            layoutPhase: 'stable',
+            prepareData: ctx => {
+                if (!ctx.isFirstVisible || !ctx.header) {
+                    return null;
+                }
+                return { width: ctx.header.getWidth() };
+            },
+            applyCell: (cell, data) => {
+                cell.setMaxWidth(data.width);
+            },
+        };
+    }
+    createDisplayRule() {
+        return {
+            key: 'display',
+            layoutPhase: 'unstable',
+            prepareData: ctx => ({ hidden: !!ctx.state?.hidden }),
+            applyHeader: (header, data) => {
+                if (data.hidden) {
+                    header.hide();
+                }
+                else {
+                    header.show();
+                }
+            },
+            applyCell: (cell, data) => {
+                if (data.hidden) {
+                    cell.hide();
+                }
+                else {
+                    cell.show();
+                }
+            },
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableMainRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TreetableMainRenderer, isStandalone: false, selector: "clr-treetable", queries: [{ propertyName: "headers", predicate: TreetableHeaderRenderer }, { propertyName: "rows", predicate: TreetableRowRenderer, descendants: true }, { propertyName: "columns", predicate: ClrTreetableColumn }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: TreetableMainRenderer, isStandalone: false, selector: "clr-treetable", queries: [{ propertyName: "headers", predicate: TreetableHeaderRenderer, isSignal: true }, { propertyName: "rows", predicate: TreetableRowRenderer, descendants: true, isSignal: true }, { propertyName: "columns", predicate: ClrTreetableColumn, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TreetableMainRenderer, decorators: [{
             type: Directive,
@@ -5039,16 +5656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     selector: 'clr-treetable',
                     standalone: false,
                 }]
-        }], propDecorators: { headers: [{
-                type: ContentChildren,
-                args: [TreetableHeaderRenderer]
-            }], rows: [{
-                type: ContentChildren,
-                args: [TreetableRowRenderer, { descendants: true }]
-            }], columns: [{
-                type: ContentChildren,
-                args: [ClrTreetableColumn]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { headers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TreetableHeaderRenderer), { isSignal: true }] }], rows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TreetableRowRenderer), { ...{ descendants: true }, isSignal: true }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClrTreetableColumn), { isSignal: true }] }] } });
 
 /*
  * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
@@ -5213,6 +5821,8 @@ const CLR_TREETABLE_DIRECTIVES = [
     ClrTreetableRow,
     ClrTreetableCell,
     ClrTreetableColumn,
+    ClrTreetableHideableColumn,
+    ClrTreetableFooter,
     ClrTreetablePlaceholder,
     ClrTreetableActionOverflow,
     TreetableMainRenderer,
@@ -5232,6 +5842,8 @@ class ClrTreetableModule {
             ClrTreetableRow,
             ClrTreetableCell,
             ClrTreetableColumn,
+            ClrTreetableHideableColumn,
+            ClrTreetableFooter,
             ClrTreetablePlaceholder,
             ClrTreetableActionOverflow,
             TreetableMainRenderer,
@@ -5240,10 +5852,14 @@ class ClrTreetableModule {
             TreetableCellRenderer,
             TreetableItemsDirective,
             ClrTreetableFilter,
-            ClrTreetableStringFilter, ClrTreetableRecursiveRows, ClrTreetableRowCheckbox], imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule], exports: [ClrTreetable,
+            ClrTreetableStringFilter, ClrTreetableRecursiveRows,
+            ClrTreetableRowCheckbox,
+            ClrTreetableColumnManagerMenuComponent], imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule], exports: [ClrTreetable,
             ClrTreetableRow,
             ClrTreetableCell,
             ClrTreetableColumn,
+            ClrTreetableHideableColumn,
+            ClrTreetableFooter,
             ClrTreetablePlaceholder,
             ClrTreetableActionOverflow,
             TreetableMainRenderer,
@@ -5253,13 +5869,18 @@ class ClrTreetableModule {
             TreetableItemsDirective,
             ClrTreetableFilter,
             ClrTreetableStringFilter] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClrTreetableModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule],
-                    declarations: [CLR_TREETABLE_DIRECTIVES, ClrTreetableRecursiveRows, ClrTreetableRowCheckbox],
+                    imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule],
+                    declarations: [
+                        CLR_TREETABLE_DIRECTIVES,
+                        ClrTreetableRecursiveRows,
+                        ClrTreetableRowCheckbox,
+                        ClrTreetableColumnManagerMenuComponent,
+                    ],
                     exports: [CLR_TREETABLE_DIRECTIVES],
                 }]
         }], ctorParameters: () => [] });
@@ -5283,7 +5904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  */
 
 /*
- * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -17202,5 +17823,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CircleFilled, CircleHalfFilled, CircleQuarterFilled, CircleThreeQuartersFilled, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrControlEnterSubmitDirective, ClrCopyToClipboard, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridColumnReorderModule, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrExportDatagridButtonModule, ClrFlowBar, ClrFlowBarModule, ClrFocusFirstInvalidFieldDirective, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIconAvatar, ClrIconAvatarModule, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrImageCarousel, ClrImageGallery, ClrImageGalleryModule, ClrKeyboardNavAltMnemonicDirective, ClrKeyboardNavCtrlArrowDirective, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrReadonlyDirective, ClrReadonlyDirectiveModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrSummaryArea, ClrSummaryAreaStateService, ClrSummaryAreaToggle, ClrSummaryItem, ClrSummaryItemValue, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableFilter, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrTreetableSortOrder, ClrTreetableStringFilter, ClrTreetableTreeNode, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, CupraBrandShape, Customer, CustomerVip, CustomerVipCollection, CustomerWaiting, CustomerWaitingCollection, DATE, DELIMITER_REGEX, DWABrandShape, DatagridColumnReorderDirective, DatagridFieldDirective, DayModel, DeliveryDate, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DynamicCellContentComponent, EnergyShape, ExportDatagridButtonComponent, ExportDatagridService, ExportTypeEnum, ExternalPartForwardShape, FirstRegistrationDate, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HISTORY_TOKEN, HistoryProvider, InternalPartForwardShape, InvoiceReadyShape, InvoiceRecipient, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LocationBarComponent, LocationBarContentProvider, LocationBarNode, LogoCommissionModule, LogoCommissionModuleFavIcon, LogoCommissionModuleNegative, LogoCommissionModuleNegativeFavIcon, LogoCostApproval, LogoCostApprovalFavIcon, LogoCostApprovalNegative, LogoCostApprovalNegativeFavIcon, LogoCostControlling, LogoCostControllingFavIcon, LogoCostControllingNegative, LogoCostControllingNegativeFavIcon, LogoDigitalServiceReception, LogoDigitalServiceReceptionFavIcon, LogoDigitalServiceReceptionNegative, LogoDigitalServiceReceptionNegativeFavIcon, LogoDocFlow, LogoDocFlowFavIcon, LogoDocFlowNegative, LogoDocFlowNegativeFavIcon, LogoDocScan, LogoDocScanFavIcon, LogoDocScanNegative, LogoDocScanNegativeFavIcon, LogoDocStore, LogoDocStoreFavIcon, LogoDocStoreNegative, LogoDocStoreNegativeFavIcon, LogoEBilling, LogoEBillingFavIcon, LogoEBillingNegative, LogoEBillingNegativeFavIcon, LogoEPayment, LogoEPaymentFavIcon, LogoEPaymentNegative, LogoEPaymentNegativeFavIcon, LogoMobilityPlanner, LogoMobilityPlannerFavIcon, LogoMobilityPlannerNegative, LogoMobilityPlannerNegativeFavIcon, LogoPartsMobile, LogoPartsMobileFavIcon, LogoPartsMobileNegative, LogoPartsMobileNegativeFavIcon, LogoSBO, LogoSBOFavIcon, LogoSBONegative, LogoSBONegativeFavIcon, LogoServiceCube, LogoServiceCubeFavIcon, LogoServiceCubeNegative, LogoServiceCubeNegativeFavIcon, LogoWCP, LogoWCPFavIcon, LogoWCPNegative, LogoWCPNegativeFavIcon, LogoWorkshopOrderTracker, LogoWorkshopOrderTrackerFavIcon, LogoWorkshopOrderTrackerNegative, LogoWorkshopOrderTrackerNegativeFavIcon, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, Mechanic, NewCarUtilityVehicleShape, NodeId, Number0, Number1, Number10, Number11, Number12, Number13, Number14, Number15, Number16, Number17, Number18, Number19, Number2, Number20, Number3, Number4, Number5, Number6, Number7, Number8, Number9, OrderShape, OrderStatusShape, PaintMaterialForwardShape, PaintMaterialShape, ParkingLocation, PartAvailabilityInfoShape, PartAvailabilityNoShape, PartAvailabilityUnknownShape, PartAvailabilityWarningShape, PartAvailabilityYesShape, PartIdenticalPredecessorShape, PartIdenticalShape, PartIdenticalSuccessorShape, PartIdenticalSuccpredecessorShape, PartNonStockForwardShape, PartPredecessorShape, PartSuccessorPredecessorShape, PartSuccessorShape, PartsChangelocation, PartsForwardShape, PartsInventory, PartsNonStockShape, PartsPicking, PartsPickingPlus, PartsReceiving, PartsShape, PlusServiceShape, PorscheBrandShape, PriceTypeSwitchShape, RepeatRepairCollection, RepeatRepairShape, ReplacementVehicleCollection, ReplacementVehicleShape, ReturnDateShape, SEPARATOR_TEXT_DEFAULT, SeatBrandShape, ServiceAdvisor, SkodaBrandShape, Sort, StatePersistenceKeyDirective, TRANSLATIONS, TaskAndAppointment, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TreetableCellRenderer, TreetableDataStateService, TreetableHeaderRenderer, TreetableItemsDirective, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, VinShape, VsfSearchShape, VsfSearchShape48, WCPShape, WrenchForward, YEAR, acceleration, accelerationIcon, acceptanceDateIcon, accessories, accessoriesIcon, accessoryPartsIcon, adblueAppIcon, adblue_app, add, addIcon, airConditionerIcon, air_conditioning, alert, alertFilledAppIcon, alertIcon, alertNotificationFilledAppIcon, alert_filled_app, alert_notification_filled_app, allIcons, ambientLightAppIcon, ambient_light_app, amplifier, amplifierIcon, appConnectAppIcon, app_connect_app, archive, archiveIcon, arrowDownIcon, arrowLeftAlignedAppIcon, arrowLeftIcon, arrowRightIcon, arrowSliderAppIcon, arrowUpIcon, arrow_down, arrow_left, arrow_left_aligned_app, arrow_right, arrow_slider_app, arrow_up, attachment, attachmentIcon, audiBrandIcon, authentPlugChargeAppIcon, authentQrAppIcon, authentRfidAppIcon, authentTouchidAppIcon, authent_plug_charge_app, authent_qr_app, authent_rfid_app, authent_touch_id_app, automaticTempAppIcon, automatic_temp_app, awardWinnerPremiumIcon, award_winner_premium, back, backIcon, battery, batteryIcon, batterySocChargingAppIcon, batterySocDepartureAppIcon, batterySocDestinationAppIcon, battery_soc_charging_app, battery_soc_departure_app, battery_soc_destination_app, bin, binIcon, blocksGroupForwardIcon, bluetooth, bluetoothIcon, bookmark, bookmarkFilledIcon, bookmarkIcon, bookmark_filled, brakeAppIcon, brake_app, brochure, brochureIcon, bulletpointAppIcon, bulletpoint_app, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, business_customers_commercial, business_customers_private, calc, calcIcon, calculatorForwardIcon, calendar, calendarCustomIcon, californiaServiceIcon, californiaSpecialistIcon, california_specialist, cameraScanIcon, camera_scan, campaignIcon, campaignOutdatedIcon, carDocumentsIcon, carErrorAppIcon, carInsuranceIcon, carOffSite, carOnSite, carPickupServiceIcon, carPlusIcon, carSettingsIcon, carVerifiedAppIcon, carWashIcon, carWheelAppIcon, car_documents, car_error_app, car_insurance, car_pickup_service, car_plus, car_settings, car_verified_app, car_wheel_app, carwash, certifiedRepairIcon, certifiedRetailerIcon, certified_repair, certified_retailer, challengeAppIcon, challenge_app, charging, chargingIcon, chargingPduAppIcon, chargingStationIcon, chargingTarifOverviewAppIcon, charging_pdu_app, charging_station, charging_tarif_overview_app, chat, chatAppIcon, chatIcon, chat_app, checkboxCheckedAppIcon, checkboxCheckedIcon, checkboxUncheckedAppIcon, checkboxUncheckedIcon, checkbox_checked, checkbox_checked_app, checkbox_unchecked, checkbox_unchecked_app, checkmark, checkmarkAppIcon, checkmarkFilledAppIcon, checkmarkIcon, checkmark_app, checkmark_filled_app, chevronDownIcon, chevronLeftAlignedappIcon, chevronLeftIcon, chevronRightAlignedappIcon, chevronRightIcon, chevronSmallLeftAlignedappIcon, chevronSmallRightAlignedappIcon, chevronUpIcon, chevron_down, chevron_left, chevron_left_alignedapp, chevron_right, chevron_right_alignedapp, chevron_small_left_alignedapp, chevron_small_right_alignedapp, chevron_up, circleFilledIcon, circleHalfFilledIcon, circleQuarterFilledIcon, circleThreeQuartersFilledIcon, city, cityIcon, clearAppIcon, clearRightAlignedappIcon, clear_app, clear_right_alignedapp, clock, clockIcon, close, closeAppIcon, closeCircleIcon, closeIcon, closeLeftAlignedappIcon, closeRightAlignedappIcon, close_app, close_circle, close_left_alignedapp, close_right_alignedapp, clrIconSVG, coffeeFilledAppIcon, coffee_filled_app, compassAppIcon, compass_app, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, configurator_commercial, configurator_private, construction, constructionIcon, consumptionFuelFilledAppIcon, consumptionIcon, consumption_fuel, consumption_fuel_filled_app, contact, contactDealerFilledAppIcon, contactDealerIcon, contactIcon, contact_dealer, contact_dealer_filled_app, countryRoadIcon, country_road, craft, craftIcon, cupraBrandIcon, customerIcon, customerVipIcon, customerWaitingIcon, customersCenterIcon, customers_center, dataCopyAppIcon, dataExpiredIcon, dataFilledIcon, dataInputIcon, dataPlugAppIcon, dataSearchIcon, dataTimeExtensionIcon, data_copy_app, data_expired, data_filled, data_input, data_plug_app, data_search, data_time_extension, defaultSummaryAreaCollapsedKey, defogDefrostAutoAppIcon, defogDefrostIcon, defog_defrost, defog_defrost_auto_app, deliveryDateIcon, destinationAppIcon, destination_app, dieselIcon, direction, directionIcon, dischargingAppIcon, discharging_app, discountAppIcon, discount_app, discoveryAppIcon, discovery_app, dollarBillForwardIcon, dollarBillPartialIcon, download, downloadCustomIcon, dragIndicatorIcon, drag_indicator, driversAssistanceIcon, drivers_assistance, dropFilledAppIcon, drop_filled_app, dwaBrandIcon, eco, ecoIcon, edit, editIcon, editSmallRightAlignedAppIcon, edit_small_right_aligned_app, efficiency, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electric_cars, electric_cars_service, electricity, electricityFilledAppIcon, electricityIcon, electricity_filled_app, emergency, emergencyIcon, emission, emissionIcon, energyIcon, engine, engineIcon, entertainment, entertainmentIcon, escapeHtml, escapeRegex, exportAppIcon, export_app, expressServiceIcon, express_service, exterior, exterior360Icon, exteriorIcon, exterior_360, externalPartForwardIcon, faq, faqIcon, fastForwardIcon, fast_forward, fax, faxIcon, filter, filterIcon, findACarIcon, findADealerIcon, find_a_car, find_a_dealer, firstRegistrationDateIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, fleet_service_commercial, fleet_service_private, folderFilledAppIcon, folder_filled_app, foodFilledAppIcon, food_filled_app, formatNumber, fullscreenEnterIcon, fullscreenExitIcon, fullscreen_enter, fullscreen_exit, gallery, galleryIcon, garageAppIcon, garage_app, gasAppIcon, gasCarsServiceIcon, gasIcon, gas_app, glassDamageAppIcon, glass_damage_app, gte, gteIcon, heart, heartFilledAppIcon, heartIcon, heart_filled_app, heightAppIcon, height_app, highwayRoadIcon, highway_road, history, historyIcon, homeAppIcon, homeEnergyAppIcon, homeFilledAppIcon, home_app, home_energy_app, home_filled_app, hornAppIcon, hornFilledAppIcon, horn_app, horn_filled_app, hybrid, hybridIcon, immediateChargingAppIcon, immediate_charging_app, info, infoFilledIcon, infoIcon, info_filled, inputHideIcon, inputShowIcon, input_hide, input_show, interior, interior360Icon, interiorIcon, interior_360, internalPartForwardIcon, internet, internetIcon, invitationAppIcon, invitation_app, invoiceIcon, invoiceReadyIcon, invoiceRecipientIcon, itemsForwardIcon, itemsRecieveIcon, jobportal, jobportalIcon, keyAppIcon, keyCardAppIcon, keyDigitalAppIcon, key_app, key_card_app, key_digital_app, keyboardAppIcon, keyboard_app, layerCollapseAppIcon, layerExpandAppIcon, layer_collapse_app, layer_expand_app, layersAppIcon, layers_app, legalTermsAndConditionsAppIcon, legal_terms_and_conditions_app, licencePlateAppIcon, licence_plate_app, lightAssistappIcon, light_assistapp, lightingAppIcon, lighting_app, linkExternAppIcon, link_extern_app, list, listIcon, loadingVolumeIcon, loading_volume, localBusinessIcon, local_business, locate, locateIcon, lock, lockIcon, lockOpenIcon, lock_open, login, loginIcon, logistic, logisticIcon, logoCommissionModuleFavIcon, logoCommissionModuleIcon, logoCommissionModuleNegativeFavIcon, logoCommissionModuleNegativeIcon, logoCostApprovalFavIcon, logoCostApprovalIcon, logoCostApprovalNegativeFavIcon, logoCostApprovalNegativeIcon, logoCrossControllingFavIcon, logoCrossControllingIcon, logoCrossControllingNegativeFavIcon, logoCrossControllingNegativeIcon, logoDigitalServiceReceptionFavIcon, logoDigitalServiceReceptionIcon, logoDigitalServiceReceptionNegativeFavIcon, logoDigitalServiceReceptionNegativeIcon, logoDocFlowFavIcon, logoDocFlowIcon, logoDocFlowNegativeFavIcon, logoDocFlowNegativeIcon, logoDocScanFavIcon, logoDocScanIcon, logoDocScanNegativeFavIcon, logoDocScanNegativeIcon, logoDocStoreFavIcon, logoDocStoreIcon, logoDocStoreNegativeFavIcon, logoDocStoreNegativeIcon, logoEBillingFavIcon, logoEBillingIcon, logoEBillingNegativeFavIcon, logoEBillingNegativeIcon, logoEPaymentFavIcon, logoEPaymentIcon, logoEPaymentNegativeFavIcon, logoEPaymentNegativeIcon, logoMobilityPlannerFavIcon, logoMobilityPlannerIcon, logoMobilityPlannerNegativeFavIcon, logoMobilityPlannerNegativeIcon, logoPartsMobileFavIcon, logoPartsMobileIcon, logoPartsMobileNegativeFavIcon, logoPartsMobileNegativeIcon, logoSBOFavIcon, logoSBOIcon, logoSBONegativeFavIcon, logoSBONegativeIcon, logoServiceCubeFavIcon, logoServiceCubeIcon, logoServiceCubeNegativeFavIcon, logoServiceCubeNegativeIcon, logoWCPFavIcon, logoWCPIcon, logoWCPNegativeFavIcon, logoWCPNegativeIcon, logoWorkshopOrderTrackerFavIcon, logoWorkshopOrderTrackerIcon, logoWorkshopOrderTrackerNegativeFavIcon, logoWorkshopOrderTrackerNegativeIcon, logout, logoutIcon, magnifier, magnifierIcon, magnifierMinusIcon, magnifierPlusIcon, magnifier_minus, magnifier_plus, mail, mailIcon, mailResendAppIcon, mail_resend_app, manual, manualIcon, map, mapIcon, mapToInternalTree, mechanicIcon, media, mediaIcon, menu, menuAppAppIcon, menuIcon, menu_app_app, microphoneAppIcon, microphone_app, mobile, mobileIcon, moreAppIcon, moreAppbarAppIcon, more_app, more_appbar_app, mot, motIcon, motability, motabilityIcon, navigate, navigateFilledAppIcon, navigateIcon, navigate_filled_app, newCarCommercialIcon, newCarPrivateFilledAppIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, new_car_commercial, new_car_private, new_car_private_filled_app, nightServiceIcon, night_service, notification, notificationFilledIcon, notificationIcon, notification_filled, number0Icon, number10Icon, number11Icon, number12Icon, number13Icon, number14Icon, number15Icon, number16Icon, number17Icon, number18Icon, number19Icon, number1Icon, number20Icon, number2Icon, number3Icon, number4Icon, number5Icon, number6Icon, number7Icon, number8Icon, number9Icon, offers, offersFilledAppIcon, offersIcon, offers_filled_app, officeAppIcon, officeFilledAppIcon, office_app, office_filled_app, oilLevelIcon, oilLevelWarningIcon, oilTemperatureAppIcon, oil_level, oil_level_warning, oil_temperature_app, onCallDutyIcon, on_call_duty, openSatIcon, open_sat, orderIcon, orderStatusIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, paint_shop, paragraphAppIcon, paragraph_app, parkHeaterAppIcon, park_heater_app, parking, parkingFilledAppIcon, parkingGarageAppIcon, parkingIcon, parkingLocationIcon, parkingRouteAppIcon, parkingValetAppIcon, parking_filled_app, parking_garage_app, parking_route_app, parking_valet_app, partAvailabilityInfoIcon, partAvailabilityNoIcon, partAvailabilityUnknownIcon, partAvailabilityWarningIcon, partAvailabilityYesIcon, partIdenticalIcon, partIdenticalPredecessorIcon, partIdenticalSuccessorIcon, partIdenticalSuccpredecessorIcon, partPredecessorIcon, partSuccessorIcon, partSuccessorPredecessorIcon, partsChangelocationIcon, partsForwardIcon, partsIcon, partsInventoryIcon, partsNonStockForwardIcon, partsNonStockIcon, partsPickingIcon, partsPickingPlusIcon, partsReceivingIcon, pause, pauseIcon, payload, payloadIcon, paymentAppIcon, paymentCashAppIcon, paymentChargingCardAppIcon, paymentCreditcardAppIcon, paymentMachineAppIcon, payment_app, payment_cash_app, payment_charging_card_app, payment_creditcard_app, payment_machine_app, performance, performanceIcon, petrol, petrolIcon, phone, phoneIcon, pin, pinFilledAppIcon, pinGenericFilledAppIcon, pinIcon, pin_filled_app, pin_generic_filled_app, play, playIcon, plugCcsAppIcon, plugChademoAppIcon, plugChargeAppIcon, plugGenericAppIcon, plugSchukoAppIcon, plugType1AppIcon, plugType2AppIcon, plug_ccs_app, plug_chademo_app, plug_charge_app, plug_generic_app, plug_schuko_app, plug_type1_app, plug_type2_app, plusServiceIcon, porscheBrandIcon, power, powerIcon, powerTrainIcon, powertrain, preHeaterAppIcon, pre_heater_app, preciseLaneNavigationAppIcon, precise_lane_navigation_app, presentAppIcon, present_app, priceTypeSwitchIcon, printer, printerIcon, privacyAppIcon, privacy_app, profile, profileIcon, profileRegisterAppIcon, profileVerifiedIcon, profile_register_app, profile_verified, publicServiceIcon, publicTransportAppIcon, public_service, public_transport_app, qualifiedWorkshopIcon, qualified_workshop, questionnaireAppIcon, questionnaire_app, radio, radioButtonInselectedIcon, radioButtonSelectedForDefIcon, radioButtonSelectedIcon, radioIcon, radio_button_inselected, radio_button_selected, radio_button_selected_for_development, range, rangeIcon, reload, reloadIcon, remove, removeIcon, repeat, repeatIcon, repeatRepairIcon, replacementVehicleIcon, returnDateIcon, rewind, rewindIcon, roadsideAssistanceIcon, roadside_assistance, route, routeArrowAppIcon, routeIcon, route_arrow_app, routesHistoryAppIcon, routes_history_app, rss, rssIcon, safety, safetyIcon, save, saveAppIcon, saveIcon, save_app, seat, seatAirIcon, seatBrandIcon, seatIcon, seat_air, secretTipAppIcon, secretTipFilledAppIcon, secret_tip_app, secret_tip_filled_app, selected, selectedIcon, selectedPartnerNetworkAppIcon, selected_partner_network_app, sendToCarAppIcon, send_to_car_app, service, serviceAdvisorIcon, serviceBellIcon, serviceFilledAppIcon, serviceIcon, service_bell, service_filled_app, settings, settingsIcon, shareAndroidIcon, shareIosIcon, share_android, share_ios, shoppingCartFilledAppIcon, shoppingCartIcon, shopping_cart, shopping_cart_filled_app, shuffle, shuffleIcon, size, sizeIcon, skillAppIcon, skill_app, skipBackwardIcon, skipForwardIcon, skip_backward, skip_forward, skodaBrandIcon, softwareDownloadAppIcon, software_download_app, sortingAppIcon, sorting_app, sound, soundIcon, standardEquipmentIcon, standard_equipment, starFilledIcon, starOutlineIcon, star_filled, star_outline, statisticAppIcon, statistic_app, stockLocatorCommercialIcon, stockLocatorPrivateIcon, stock_locator_commercial, stock_locator_private, stop, stopIcon, strip, switchPositionAppIcon, switch_position_app, syncAppIcon, sync_app, taskAndAppointmentIcon, taxiDealerIcon, taxi_dealer, technicalSpecificationIcon, technical_specification, temperatureAppIcon, temperature_app, testDriveIcon, test_drive, textForwardIcon, thumbsdownAppIcon, thumbsdownFilledAppIcon, thumbsdown_app, thumbsdown_filled_app, thumbsupAppIcon, thumbsupFilledAppIcon, thumbsup_app, thumbsup_filled_app, timeClimatisationAppIcon, timePreferredAppIcon, time_climatisation_app, time_preferred_app, timer, timerIcon, topcardIcon, touaregServiceIcon, transcriptDownloadIcon, transcript_download, transmissionAutomaticIcon, transmissionManualIcon, transmission_automatic, transmission_manual, tripAppIcon, tripLongAppIcon, tripPartedAppIcon, tripShortAppIcon, trip_app, trip_long_app, trip_parted_app, trip_short_app, turnSignalsIcon, turn_signals, unselected, unselectedIcon, updateRefreshAppIcon, update_refresh_app, upload, uploadAppIcon, uploadCustomIcon, upload_app, usedCarCommercialIcon, usedCarPrivateIcon, used_car_commercial, used_car_private, vehicleAmarokIcon, vehicleCaddyIcon, vehicleConversionIcon, vehicleCrafterIcon, vehicleHightIcon, vehicleIdBuzzIcon, vehicleMultivanIcon, vehicleTransporterIcon, vehicle_amarok, vehicle_caddy, vehicle_crafter, vehicle_hight, vehicle_idbuzz, vehicle_multivan, vehicle_transporter, videoChatIcon, video_chat, view360Icon, view_360, vinIcon, virtualRealityIcon, virtual_reality, voiceMessageAppIcon, voice_message_app, volkswagenAppIcon, volkswagenIcon, volkswagen_app, volumeMaximumIcon, volumeMediumIcon, volumeMuteIcon, volume_maximum, volume_medium, volume_mute, vsfSearch48Icon, vsfSearchIcon, vwBrandIcon, vwConnectLicenseAppIcon, vw_connect_license_app, vwnBrandIcon, walkingAppIcon, walkingFilledAppIcon, walking_app, walking_filled_app, wallbox, wallboxIcon, wcAppIcon, wc_app, wcpIcon, weAssistAppIcon, weChargeAppIcon, weDeliverAppIcon, weExperienceAppIcon, weParkAppIcon, weUpgradeAppIcon, we_assist_app, we_charge_app, we_deliver_app, we_experience_app, we_park_app, we_upgrade_app, weatherSunAppIcon, weather_sun_app, wheelToWheelIcon, wheel_to_wheel, windscreenWashIcon, windscreen_wash, wlanHotspotIcon, wlan_hotspot, wrenchForwardIcon };
+export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CircleFilled, CircleHalfFilled, CircleQuarterFilled, CircleThreeQuartersFilled, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrControlEnterSubmitDirective, ClrCopyToClipboard, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridColumnReorderModule, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrExportDatagridButtonModule, ClrFlowBar, ClrFlowBarModule, ClrFocusFirstInvalidFieldDirective, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIconAvatar, ClrIconAvatarModule, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrImageCarousel, ClrImageGallery, ClrImageGalleryModule, ClrKeyboardNavAltMnemonicDirective, ClrKeyboardNavCtrlArrowDirective, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrReadonlyDirective, ClrReadonlyDirectiveModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrSummaryArea, ClrSummaryAreaStateService, ClrSummaryAreaToggle, ClrSummaryItem, ClrSummaryItemValue, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableFilter, ClrTreetableFooter, ClrTreetableHideableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrTreetableSortOrder, ClrTreetableStringFilter, ClrTreetableTreeNode, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, CupraBrandShape, Customer, CustomerVip, CustomerVipCollection, CustomerWaiting, CustomerWaitingCollection, DATE, DELIMITER_REGEX, DWABrandShape, DatagridColumnReorderDirective, DatagridFieldDirective, DayModel, DeliveryDate, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DynamicCellContentComponent, EnergyShape, ExportDatagridButtonComponent, ExportDatagridService, ExportTypeEnum, ExternalPartForwardShape, FirstRegistrationDate, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HISTORY_TOKEN, HistoryProvider, InternalPartForwardShape, InvoiceReadyShape, InvoiceRecipient, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LocationBarComponent, LocationBarContentProvider, LocationBarNode, LogoCommissionModule, LogoCommissionModuleFavIcon, LogoCommissionModuleNegative, LogoCommissionModuleNegativeFavIcon, LogoCostApproval, LogoCostApprovalFavIcon, LogoCostApprovalNegative, LogoCostApprovalNegativeFavIcon, LogoCostControlling, LogoCostControllingFavIcon, LogoCostControllingNegative, LogoCostControllingNegativeFavIcon, LogoDigitalServiceReception, LogoDigitalServiceReceptionFavIcon, LogoDigitalServiceReceptionNegative, LogoDigitalServiceReceptionNegativeFavIcon, LogoDocFlow, LogoDocFlowFavIcon, LogoDocFlowNegative, LogoDocFlowNegativeFavIcon, LogoDocScan, LogoDocScanFavIcon, LogoDocScanNegative, LogoDocScanNegativeFavIcon, LogoDocStore, LogoDocStoreFavIcon, LogoDocStoreNegative, LogoDocStoreNegativeFavIcon, LogoEBilling, LogoEBillingFavIcon, LogoEBillingNegative, LogoEBillingNegativeFavIcon, LogoEPayment, LogoEPaymentFavIcon, LogoEPaymentNegative, LogoEPaymentNegativeFavIcon, LogoMobilityPlanner, LogoMobilityPlannerFavIcon, LogoMobilityPlannerNegative, LogoMobilityPlannerNegativeFavIcon, LogoPartsMobile, LogoPartsMobileFavIcon, LogoPartsMobileNegative, LogoPartsMobileNegativeFavIcon, LogoSBO, LogoSBOFavIcon, LogoSBONegative, LogoSBONegativeFavIcon, LogoServiceCube, LogoServiceCubeFavIcon, LogoServiceCubeNegative, LogoServiceCubeNegativeFavIcon, LogoWCP, LogoWCPFavIcon, LogoWCPNegative, LogoWCPNegativeFavIcon, LogoWorkshopOrderTracker, LogoWorkshopOrderTrackerFavIcon, LogoWorkshopOrderTrackerNegative, LogoWorkshopOrderTrackerNegativeFavIcon, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, Mechanic, NewCarUtilityVehicleShape, NodeId, Number0, Number1, Number10, Number11, Number12, Number13, Number14, Number15, Number16, Number17, Number18, Number19, Number2, Number20, Number3, Number4, Number5, Number6, Number7, Number8, Number9, OrderShape, OrderStatusShape, PaintMaterialForwardShape, PaintMaterialShape, ParkingLocation, PartAvailabilityInfoShape, PartAvailabilityNoShape, PartAvailabilityUnknownShape, PartAvailabilityWarningShape, PartAvailabilityYesShape, PartIdenticalPredecessorShape, PartIdenticalShape, PartIdenticalSuccessorShape, PartIdenticalSuccpredecessorShape, PartNonStockForwardShape, PartPredecessorShape, PartSuccessorPredecessorShape, PartSuccessorShape, PartsChangelocation, PartsForwardShape, PartsInventory, PartsNonStockShape, PartsPicking, PartsPickingPlus, PartsReceiving, PartsShape, PlusServiceShape, PorscheBrandShape, PriceTypeSwitchShape, RepeatRepairCollection, RepeatRepairShape, ReplacementVehicleCollection, ReplacementVehicleShape, ReturnDateShape, SEPARATOR_TEXT_DEFAULT, SeatBrandShape, ServiceAdvisor, SkodaBrandShape, SortStateService, StatePersistenceKeyDirective, TRANSLATIONS, TaskAndAppointment, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TreetableCellRenderer, TreetableDataStateService, TreetableHeaderRenderer, TreetableItemsDirective, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, VinShape, VsfSearchShape, VsfSearchShape48, WCPShape, WrenchForward, YEAR, acceleration, accelerationIcon, acceptanceDateIcon, accessories, accessoriesIcon, accessoryPartsIcon, adblueAppIcon, adblue_app, add, addIcon, airConditionerIcon, air_conditioning, alert, alertFilledAppIcon, alertIcon, alertNotificationFilledAppIcon, alert_filled_app, alert_notification_filled_app, allIcons, ambientLightAppIcon, ambient_light_app, amplifier, amplifierIcon, appConnectAppIcon, app_connect_app, archive, archiveIcon, arrowDownIcon, arrowLeftAlignedAppIcon, arrowLeftIcon, arrowRightIcon, arrowSliderAppIcon, arrowUpIcon, arrow_down, arrow_left, arrow_left_aligned_app, arrow_right, arrow_slider_app, arrow_up, attachment, attachmentIcon, audiBrandIcon, authentPlugChargeAppIcon, authentQrAppIcon, authentRfidAppIcon, authentTouchidAppIcon, authent_plug_charge_app, authent_qr_app, authent_rfid_app, authent_touch_id_app, automaticTempAppIcon, automatic_temp_app, awardWinnerPremiumIcon, award_winner_premium, back, backIcon, battery, batteryIcon, batterySocChargingAppIcon, batterySocDepartureAppIcon, batterySocDestinationAppIcon, battery_soc_charging_app, battery_soc_departure_app, battery_soc_destination_app, bin, binIcon, blocksGroupForwardIcon, bluetooth, bluetoothIcon, bookmark, bookmarkFilledIcon, bookmarkIcon, bookmark_filled, brakeAppIcon, brake_app, brochure, brochureIcon, bulletpointAppIcon, bulletpoint_app, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, business_customers_commercial, business_customers_private, calc, calcIcon, calculatorForwardIcon, calendar, calendarCustomIcon, californiaServiceIcon, californiaSpecialistIcon, california_specialist, cameraScanIcon, camera_scan, campaignIcon, campaignOutdatedIcon, carDocumentsIcon, carErrorAppIcon, carInsuranceIcon, carOffSite, carOnSite, carPickupServiceIcon, carPlusIcon, carSettingsIcon, carVerifiedAppIcon, carWashIcon, carWheelAppIcon, car_documents, car_error_app, car_insurance, car_pickup_service, car_plus, car_settings, car_verified_app, car_wheel_app, carwash, certifiedRepairIcon, certifiedRetailerIcon, certified_repair, certified_retailer, challengeAppIcon, challenge_app, charging, chargingIcon, chargingPduAppIcon, chargingStationIcon, chargingTarifOverviewAppIcon, charging_pdu_app, charging_station, charging_tarif_overview_app, chat, chatAppIcon, chatIcon, chat_app, checkboxCheckedAppIcon, checkboxCheckedIcon, checkboxUncheckedAppIcon, checkboxUncheckedIcon, checkbox_checked, checkbox_checked_app, checkbox_unchecked, checkbox_unchecked_app, checkmark, checkmarkAppIcon, checkmarkFilledAppIcon, checkmarkIcon, checkmark_app, checkmark_filled_app, chevronDownIcon, chevronLeftAlignedappIcon, chevronLeftIcon, chevronRightAlignedappIcon, chevronRightIcon, chevronSmallLeftAlignedappIcon, chevronSmallRightAlignedappIcon, chevronUpIcon, chevron_down, chevron_left, chevron_left_alignedapp, chevron_right, chevron_right_alignedapp, chevron_small_left_alignedapp, chevron_small_right_alignedapp, chevron_up, circleFilledIcon, circleHalfFilledIcon, circleQuarterFilledIcon, circleThreeQuartersFilledIcon, city, cityIcon, clearAppIcon, clearRightAlignedappIcon, clear_app, clear_right_alignedapp, clock, clockIcon, close, closeAppIcon, closeCircleIcon, closeIcon, closeLeftAlignedappIcon, closeRightAlignedappIcon, close_app, close_circle, close_left_alignedapp, close_right_alignedapp, clrIconSVG, coffeeFilledAppIcon, coffee_filled_app, compassAppIcon, compass_app, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, configurator_commercial, configurator_private, construction, constructionIcon, consumptionFuelFilledAppIcon, consumptionIcon, consumption_fuel, consumption_fuel_filled_app, contact, contactDealerFilledAppIcon, contactDealerIcon, contactIcon, contact_dealer, contact_dealer_filled_app, countryRoadIcon, country_road, craft, craftIcon, cupraBrandIcon, customerIcon, customerVipIcon, customerWaitingIcon, customersCenterIcon, customers_center, dataCopyAppIcon, dataExpiredIcon, dataFilledIcon, dataInputIcon, dataPlugAppIcon, dataSearchIcon, dataTimeExtensionIcon, data_copy_app, data_expired, data_filled, data_input, data_plug_app, data_search, data_time_extension, defaultSummaryAreaCollapsedKey, defogDefrostAutoAppIcon, defogDefrostIcon, defog_defrost, defog_defrost_auto_app, deliveryDateIcon, destinationAppIcon, destination_app, dieselIcon, direction, directionIcon, dischargingAppIcon, discharging_app, discountAppIcon, discount_app, discoveryAppIcon, discovery_app, dollarBillForwardIcon, dollarBillPartialIcon, download, downloadCustomIcon, dragIndicatorIcon, drag_indicator, driversAssistanceIcon, drivers_assistance, dropFilledAppIcon, drop_filled_app, dwaBrandIcon, eco, ecoIcon, edit, editIcon, editSmallRightAlignedAppIcon, edit_small_right_aligned_app, efficiency, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electric_cars, electric_cars_service, electricity, electricityFilledAppIcon, electricityIcon, electricity_filled_app, emergency, emergencyIcon, emission, emissionIcon, energyIcon, engine, engineIcon, entertainment, entertainmentIcon, escapeHtml, escapeRegex, exportAppIcon, export_app, expressServiceIcon, express_service, exterior, exterior360Icon, exteriorIcon, exterior_360, externalPartForwardIcon, faq, faqIcon, fastForwardIcon, fast_forward, fax, faxIcon, filter, filterIcon, findACarIcon, findADealerIcon, find_a_car, find_a_dealer, firstRegistrationDateIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, fleet_service_commercial, fleet_service_private, folderFilledAppIcon, folder_filled_app, foodFilledAppIcon, food_filled_app, formatNumber, fullscreenEnterIcon, fullscreenExitIcon, fullscreen_enter, fullscreen_exit, gallery, galleryIcon, garageAppIcon, garage_app, gasAppIcon, gasCarsServiceIcon, gasIcon, gas_app, glassDamageAppIcon, glass_damage_app, gte, gteIcon, heart, heartFilledAppIcon, heartIcon, heart_filled_app, heightAppIcon, height_app, highwayRoadIcon, highway_road, history, historyIcon, homeAppIcon, homeEnergyAppIcon, homeFilledAppIcon, home_app, home_energy_app, home_filled_app, hornAppIcon, hornFilledAppIcon, horn_app, horn_filled_app, hybrid, hybridIcon, immediateChargingAppIcon, immediate_charging_app, info, infoFilledIcon, infoIcon, info_filled, inputHideIcon, inputShowIcon, input_hide, input_show, interior, interior360Icon, interiorIcon, interior_360, internalPartForwardIcon, internet, internetIcon, invitationAppIcon, invitation_app, invoiceIcon, invoiceReadyIcon, invoiceRecipientIcon, itemsForwardIcon, itemsRecieveIcon, jobportal, jobportalIcon, keyAppIcon, keyCardAppIcon, keyDigitalAppIcon, key_app, key_card_app, key_digital_app, keyboardAppIcon, keyboard_app, layerCollapseAppIcon, layerExpandAppIcon, layer_collapse_app, layer_expand_app, layersAppIcon, layers_app, legalTermsAndConditionsAppIcon, legal_terms_and_conditions_app, licencePlateAppIcon, licence_plate_app, lightAssistappIcon, light_assistapp, lightingAppIcon, lighting_app, linkExternAppIcon, link_extern_app, list, listIcon, loadingVolumeIcon, loading_volume, localBusinessIcon, local_business, locate, locateIcon, lock, lockIcon, lockOpenIcon, lock_open, login, loginIcon, logistic, logisticIcon, logoCommissionModuleFavIcon, logoCommissionModuleIcon, logoCommissionModuleNegativeFavIcon, logoCommissionModuleNegativeIcon, logoCostApprovalFavIcon, logoCostApprovalIcon, logoCostApprovalNegativeFavIcon, logoCostApprovalNegativeIcon, logoCrossControllingFavIcon, logoCrossControllingIcon, logoCrossControllingNegativeFavIcon, logoCrossControllingNegativeIcon, logoDigitalServiceReceptionFavIcon, logoDigitalServiceReceptionIcon, logoDigitalServiceReceptionNegativeFavIcon, logoDigitalServiceReceptionNegativeIcon, logoDocFlowFavIcon, logoDocFlowIcon, logoDocFlowNegativeFavIcon, logoDocFlowNegativeIcon, logoDocScanFavIcon, logoDocScanIcon, logoDocScanNegativeFavIcon, logoDocScanNegativeIcon, logoDocStoreFavIcon, logoDocStoreIcon, logoDocStoreNegativeFavIcon, logoDocStoreNegativeIcon, logoEBillingFavIcon, logoEBillingIcon, logoEBillingNegativeFavIcon, logoEBillingNegativeIcon, logoEPaymentFavIcon, logoEPaymentIcon, logoEPaymentNegativeFavIcon, logoEPaymentNegativeIcon, logoMobilityPlannerFavIcon, logoMobilityPlannerIcon, logoMobilityPlannerNegativeFavIcon, logoMobilityPlannerNegativeIcon, logoPartsMobileFavIcon, logoPartsMobileIcon, logoPartsMobileNegativeFavIcon, logoPartsMobileNegativeIcon, logoSBOFavIcon, logoSBOIcon, logoSBONegativeFavIcon, logoSBONegativeIcon, logoServiceCubeFavIcon, logoServiceCubeIcon, logoServiceCubeNegativeFavIcon, logoServiceCubeNegativeIcon, logoWCPFavIcon, logoWCPIcon, logoWCPNegativeFavIcon, logoWCPNegativeIcon, logoWorkshopOrderTrackerFavIcon, logoWorkshopOrderTrackerIcon, logoWorkshopOrderTrackerNegativeFavIcon, logoWorkshopOrderTrackerNegativeIcon, logout, logoutIcon, magnifier, magnifierIcon, magnifierMinusIcon, magnifierPlusIcon, magnifier_minus, magnifier_plus, mail, mailIcon, mailResendAppIcon, mail_resend_app, manual, manualIcon, map, mapIcon, mapToInternalTree, mechanicIcon, media, mediaIcon, menu, menuAppAppIcon, menuIcon, menu_app_app, microphoneAppIcon, microphone_app, mobile, mobileIcon, moreAppIcon, moreAppbarAppIcon, more_app, more_appbar_app, mot, motIcon, motability, motabilityIcon, navigate, navigateFilledAppIcon, navigateIcon, navigate_filled_app, newCarCommercialIcon, newCarPrivateFilledAppIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, new_car_commercial, new_car_private, new_car_private_filled_app, nightServiceIcon, night_service, notification, notificationFilledIcon, notificationIcon, notification_filled, number0Icon, number10Icon, number11Icon, number12Icon, number13Icon, number14Icon, number15Icon, number16Icon, number17Icon, number18Icon, number19Icon, number1Icon, number20Icon, number2Icon, number3Icon, number4Icon, number5Icon, number6Icon, number7Icon, number8Icon, number9Icon, offers, offersFilledAppIcon, offersIcon, offers_filled_app, officeAppIcon, officeFilledAppIcon, office_app, office_filled_app, oilLevelIcon, oilLevelWarningIcon, oilTemperatureAppIcon, oil_level, oil_level_warning, oil_temperature_app, onCallDutyIcon, on_call_duty, openSatIcon, open_sat, orderIcon, orderStatusIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, paint_shop, paragraphAppIcon, paragraph_app, parkHeaterAppIcon, park_heater_app, parking, parkingFilledAppIcon, parkingGarageAppIcon, parkingIcon, parkingLocationIcon, parkingRouteAppIcon, parkingValetAppIcon, parking_filled_app, parking_garage_app, parking_route_app, parking_valet_app, partAvailabilityInfoIcon, partAvailabilityNoIcon, partAvailabilityUnknownIcon, partAvailabilityWarningIcon, partAvailabilityYesIcon, partIdenticalIcon, partIdenticalPredecessorIcon, partIdenticalSuccessorIcon, partIdenticalSuccpredecessorIcon, partPredecessorIcon, partSuccessorIcon, partSuccessorPredecessorIcon, partsChangelocationIcon, partsForwardIcon, partsIcon, partsInventoryIcon, partsNonStockForwardIcon, partsNonStockIcon, partsPickingIcon, partsPickingPlusIcon, partsReceivingIcon, pause, pauseIcon, payload, payloadIcon, paymentAppIcon, paymentCashAppIcon, paymentChargingCardAppIcon, paymentCreditcardAppIcon, paymentMachineAppIcon, payment_app, payment_cash_app, payment_charging_card_app, payment_creditcard_app, payment_machine_app, performance, performanceIcon, petrol, petrolIcon, phone, phoneIcon, pin, pinFilledAppIcon, pinGenericFilledAppIcon, pinIcon, pin_filled_app, pin_generic_filled_app, play, playIcon, plugCcsAppIcon, plugChademoAppIcon, plugChargeAppIcon, plugGenericAppIcon, plugSchukoAppIcon, plugType1AppIcon, plugType2AppIcon, plug_ccs_app, plug_chademo_app, plug_charge_app, plug_generic_app, plug_schuko_app, plug_type1_app, plug_type2_app, plusServiceIcon, porscheBrandIcon, power, powerIcon, powerTrainIcon, powertrain, preHeaterAppIcon, pre_heater_app, preciseLaneNavigationAppIcon, precise_lane_navigation_app, presentAppIcon, present_app, priceTypeSwitchIcon, printer, printerIcon, privacyAppIcon, privacy_app, profile, profileIcon, profileRegisterAppIcon, profileVerifiedIcon, profile_register_app, profile_verified, publicServiceIcon, publicTransportAppIcon, public_service, public_transport_app, qualifiedWorkshopIcon, qualified_workshop, questionnaireAppIcon, questionnaire_app, radio, radioButtonInselectedIcon, radioButtonSelectedForDefIcon, radioButtonSelectedIcon, radioIcon, radio_button_inselected, radio_button_selected, radio_button_selected_for_development, range, rangeIcon, reload, reloadIcon, remove, removeIcon, repeat, repeatIcon, repeatRepairIcon, replacementVehicleIcon, returnDateIcon, rewind, rewindIcon, roadsideAssistanceIcon, roadside_assistance, route, routeArrowAppIcon, routeIcon, route_arrow_app, routesHistoryAppIcon, routes_history_app, rss, rssIcon, safety, safetyIcon, save, saveAppIcon, saveIcon, save_app, seat, seatAirIcon, seatBrandIcon, seatIcon, seat_air, secretTipAppIcon, secretTipFilledAppIcon, secret_tip_app, secret_tip_filled_app, selected, selectedIcon, selectedPartnerNetworkAppIcon, selected_partner_network_app, sendToCarAppIcon, send_to_car_app, service, serviceAdvisorIcon, serviceBellIcon, serviceFilledAppIcon, serviceIcon, service_bell, service_filled_app, settings, settingsIcon, shareAndroidIcon, shareIosIcon, share_android, share_ios, shoppingCartFilledAppIcon, shoppingCartIcon, shopping_cart, shopping_cart_filled_app, shuffle, shuffleIcon, size, sizeIcon, skillAppIcon, skill_app, skipBackwardIcon, skipForwardIcon, skip_backward, skip_forward, skodaBrandIcon, softwareDownloadAppIcon, software_download_app, sortingAppIcon, sorting_app, sound, soundIcon, standardEquipmentIcon, standard_equipment, starFilledIcon, starOutlineIcon, star_filled, star_outline, statisticAppIcon, statistic_app, stockLocatorCommercialIcon, stockLocatorPrivateIcon, stock_locator_commercial, stock_locator_private, stop, stopIcon, strip, switchPositionAppIcon, switch_position_app, syncAppIcon, sync_app, taskAndAppointmentIcon, taxiDealerIcon, taxi_dealer, technicalSpecificationIcon, technical_specification, temperatureAppIcon, temperature_app, testDriveIcon, test_drive, textForwardIcon, thumbsdownAppIcon, thumbsdownFilledAppIcon, thumbsdown_app, thumbsdown_filled_app, thumbsupAppIcon, thumbsupFilledAppIcon, thumbsup_app, thumbsup_filled_app, timeClimatisationAppIcon, timePreferredAppIcon, time_climatisation_app, time_preferred_app, timer, timerIcon, topcardIcon, touaregServiceIcon, transcriptDownloadIcon, transcript_download, transmissionAutomaticIcon, transmissionManualIcon, transmission_automatic, transmission_manual, tripAppIcon, tripLongAppIcon, tripPartedAppIcon, tripShortAppIcon, trip_app, trip_long_app, trip_parted_app, trip_short_app, turnSignalsIcon, turn_signals, unselected, unselectedIcon, updateRefreshAppIcon, update_refresh_app, upload, uploadAppIcon, uploadCustomIcon, upload_app, usedCarCommercialIcon, usedCarPrivateIcon, used_car_commercial, used_car_private, vehicleAmarokIcon, vehicleCaddyIcon, vehicleConversionIcon, vehicleCrafterIcon, vehicleHightIcon, vehicleIdBuzzIcon, vehicleMultivanIcon, vehicleTransporterIcon, vehicle_amarok, vehicle_caddy, vehicle_crafter, vehicle_hight, vehicle_idbuzz, vehicle_multivan, vehicle_transporter, videoChatIcon, video_chat, view360Icon, view_360, vinIcon, virtualRealityIcon, virtual_reality, voiceMessageAppIcon, voice_message_app, volkswagenAppIcon, volkswagenIcon, volkswagen_app, volumeMaximumIcon, volumeMediumIcon, volumeMuteIcon, volume_maximum, volume_medium, volume_mute, vsfSearch48Icon, vsfSearchIcon, vwBrandIcon, vwConnectLicenseAppIcon, vw_connect_license_app, vwnBrandIcon, walkingAppIcon, walkingFilledAppIcon, walking_app, walking_filled_app, wallbox, wallboxIcon, wcAppIcon, wc_app, wcpIcon, weAssistAppIcon, weChargeAppIcon, weDeliverAppIcon, weExperienceAppIcon, weParkAppIcon, weUpgradeAppIcon, we_assist_app, we_charge_app, we_deliver_app, we_experience_app, we_park_app, we_upgrade_app, weatherSunAppIcon, weather_sun_app, wheelToWheelIcon, wheel_to_wheel, windscreenWashIcon, windscreen_wash, wlanHotspotIcon, wlan_hotspot, wrenchForwardIcon };
 //# sourceMappingURL=porscheinformatik-clr-addons.mjs.map