@porscheinformatik/clr-addons 21.1.3 → 21.3.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, viewChild, ViewContainerRef, output, afterRenderEffect, 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, NgZone, viewChild, ViewContainerRef, afterRenderEffect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, output, ChangeDetectorRef, Injector, untracked, runInInjectionContext } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, NgOptimizedImage, NgClass } from '@angular/common';
 import * as i2 from '@clr/angular/icon';
@@ -19,14 +19,14 @@ import * as i3$1 from '@clr/angular/popover/dropdown';
 import * as i2$3 from '@clr/angular/popover/common';
 import * as i2$4 from '@clr/angular/emphasis/alert';
 import { takeUntilDestroyed, toObservable, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
-import * as i1$3 from '@clr/angular/progress/spinner';
+import * as i2$5 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 * as i1$3 from '@angular/common/http';
 import { CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
 import * as i4$1 from '@clr/angular/forms/datepicker';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
-import * as i1$5 from '@clr/angular/popover/tooltip';
+import * as i1$4 from '@clr/angular/popover/tooltip';
 import { provideAnimations } from '@angular/platform-browser/animations';
 
 /*
@@ -729,11 +729,14 @@ class ClrDropdownOverflowDirective {
     set clrMarginBottom(value) {
         this.marginBottomPx = this.convertToPixels(value);
     }
-    constructor(elRef) {
+    constructor(elRef, ngZone) {
         this.elRef = elRef;
+        this.ngZone = ngZone;
         this.defaultItemMinHeightRem = 1.5;
         this.alreadyChecked = false;
         this.marginBottomPx = 2;
+        this.deferredCheckPending = false;
+        this.requestAnimationFrameRetry = 0;
     }
     ngAfterViewChecked() {
         // first trigger manually because the subscription lower only triggers after first change
@@ -758,13 +761,32 @@ class ClrDropdownOverflowDirective {
     applyDropdownOverflowStyles() {
         // the vertical position of our element in the current window
         const rect = this.elRef.nativeElement.getBoundingClientRect();
-        const y = rect.y === 0 ? rect.height : rect.y;
-        if (y !== 0 && !this.alreadyChecked) {
+        // If the element is at position 0,0 it may not yet be positioned by the popover/CDK overlay system.
+        // Note: @clr/angular v18+ switched from Renderer2 (synchronous) to CDK Overlay (async rAF),
+        // so positioning is no longer guaranteed to be complete by the time ngAfterViewChecked runs.
+        // Defer the check to allow async positioning (e.g. CDK Overlay) to complete.
+        if (rect.x === 0 &&
+            rect.y === 0 &&
+            !this.alreadyChecked &&
+            !this.deferredCheckPending &&
+            this.requestAnimationFrameRetry < 10) {
+            this.deferredCheckPending = true;
+            this.requestAnimationFrameRetry++;
+            this.ngZone.runOutsideAngular(() => {
+                requestAnimationFrame(() => {
+                    this.deferredCheckPending = false;
+                    this.ngZone.run(() => this.applyDropdownOverflowStyles());
+                });
+            });
+            return;
+        }
+        if (!this.alreadyChecked) {
             const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
             // see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
             for (const item of this.getAllChildDropdownMenuItems()) {
                 item.style.minHeight = itemMinHeightPx + 'px';
             }
+            const y = this.elRef.nativeElement.getBoundingClientRect().y;
             const height = window.innerHeight - y;
             const maxHeight = this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, height - this.marginBottomPx);
             this.elRef.nativeElement.style.maxHeight = maxHeight + 'px';
@@ -779,6 +801,7 @@ class ClrDropdownOverflowDirective {
         this.elRef.nativeElement.style.maxHeight = null;
         this.elRef.nativeElement.style.overflowY = null;
         this.alreadyChecked = false;
+        this.requestAnimationFrameRetry = 0;
     }
     getAllChildDropdownMenuItems() {
         return this.elRef.nativeElement.getElementsByClassName('dropdown-item');
@@ -818,7 +841,7 @@ class ClrDropdownOverflowDirective {
         const pxPerVhUnit = window.innerHeight / 100;
         return vh * pxPerVhUnit;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDropdownOverflowDirective, isStandalone: false, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight", clrMarginBottom: "clrMarginBottom" }, queries: [{ propertyName: "nestedDropdownChildren", predicate: ClrDropdown, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
@@ -827,7 +850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     selector: 'clr-dropdown-menu',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clrDropdownMenuMaxHeight: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { clrDropdownMenuMaxHeight: [{
                 type: Input
             }], clrDropdownMenuItemMinHeight: [{
                 type: Input
@@ -3825,7 +3848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
         }], propDecorators: { parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }] } });
 
 /*
- * 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.
  */
@@ -3841,8 +3864,8 @@ class ClrTreetableRowCheckbox {
             : ClrTreetableSelectedState.SELECTED);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRowCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ClrTreetableRowCheckbox, isStandalone: false, selector: "clr-tt-row-checkbox", inputs: { clrTtSelectionState: { classPropertyName: "clrTtSelectionState", publicName: "clrTtSelectionState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectionState: "clrTtSelectionStateChange" }, ngImport: i0, template: `
-    <div class="clr-checkbox-wrapper treetable-row-selection treetable-cell">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ClrTreetableRowCheckbox, isStandalone: false, selector: "clr-tt-row-checkbox", inputs: { clrTtSelectionState: { classPropertyName: "clrTtSelectionState", publicName: "clrTtSelectionState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSelectionState: "clrTtSelectionStateChange" }, host: { attributes: { "role": "gridcell" }, properties: { "class.treetable-row-selection": "true", "class.treetable-cell": "true" } }, ngImport: i0, template: `
+    <div class="clr-checkbox-wrapper">
       <input
         type="checkbox"
         data-testId="clrTtRowCheckbox"
@@ -3856,7 +3879,7 @@ class ClrTreetableRowCheckbox {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableRowCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'clr-tt-row-checkbox', template: `
-    <div class="clr-checkbox-wrapper treetable-row-selection treetable-cell">
+    <div class="clr-checkbox-wrapper">
       <input
         type="checkbox"
         data-testId="clrTtRowCheckbox"
@@ -3865,7 +3888,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
         (change)="toggle()"
       />
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"] }]
+  `, host: {
+                        '[class.treetable-row-selection]': 'true',
+                        '[class.treetable-cell]': 'true',
+                        role: 'gridcell',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".treetable-children-container{opacity:0;will-change:height,opacity}.treetable-children-container.expanded{opacity:1}.treetable-children-container.collapsed{height:0;opacity:0;overflow:hidden}.treetable-children-container.animate{transition:height .4s ease,opacity .4s ease}\n"] }]
         }], propDecorators: { clrTtSelectionState: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSelectionState", required: false }] }, { type: i0.Output, args: ["clrTtSelectionStateChange"] }] } });
 
 /*
@@ -4507,8 +4534,8 @@ class TreetableColumnStateService {
         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.hasHideableColumns = computed(() => this.hideableColumns().length > 0, ...(ngDevMode ? [{ debugName: "hasHideableColumns" }] : /* istanbul ignore next */ []));
+        this._changeWidthAction$ = this._changeWidth$.pipe(filter$1(({ id, width }) => this.getColumn(id)?.width != width), 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) {
@@ -4621,6 +4648,19 @@ class TreetableColumnStateService {
     getColumnState(id) {
         return toObservable(this._columnState).pipe(map$1(columns => columns[id]), distinctUntilChanged());
     }
+    getColumnChangesById(id) {
+        const hiddenChanges$ = merge(this._changeHiddenAction$.pipe(filter$1(change => change.id === id)), this._changeHiddenForAllAction$, this._resetHiddenAction$).pipe(map$1(() => ({
+            id,
+            type: TreetableColumnUpdate.HIDDEN,
+            hidden: this.getColumn(id)?.hidden ?? false,
+        })));
+        const widthChanges$ = this._changeWidthAction$.pipe(filter$1(change => change.id === id), map$1((change) => ({
+            id,
+            type: TreetableColumnUpdate.WIDTH,
+            width: change.width,
+        })));
+        return merge(widthChanges$, hiddenChanges$);
+    }
     getColumn(id) {
         return this._columnState()[id];
     }
@@ -4652,10 +4692,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+let treetableId = 0;
 class ClrTreetable {
     constructor() {
+        this.treetableId = `clr-treetable-${++treetableId}`;
+        this.selectAllId = `clr-tt-select-all${treetableId}`;
         this._dataStateService = inject((TreetableDataStateService));
         this._recursionService = inject((ClrTreetableRecursionService));
+        this._commonStringsService = inject(ClrCommonStringsService);
+        this.commonStrings = this._commonStringsService.keys;
         this.clrClickableRows = input(true, ...(ngDevMode ? [{ debugName: "clrClickableRows" }] : /* istanbul ignore next */ []));
         this.clrHideHeader = input(false, ...(ngDevMode ? [{ debugName: "clrHideHeader" }] : /* istanbul ignore next */ []));
         this.clrTtLoading = input(false, ...(ngDevMode ? [{ debugName: "clrTtLoading" }] : /* istanbul ignore next */ []));
@@ -4692,7 +4737,7 @@ class ClrTreetable {
             TreetableColumnStateService,
             SortStateService,
             FilterStateService,
-        ], queries: [{ propertyName: "_ttRows", predicate: ClrTreetableRow, descendants: true, isSignal: true }, { propertyName: "_actionOverflow", predicate: ClrTreetableActionOverflow, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n~ Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.\n~ This software is released under MIT license.\n~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<div class=\"treetable\">\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 }); }
+        ], 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=\"treetable-row-selection treetable-column\" role=\"columnheader\">\n        <div class=\"clr-checkbox-wrapper\">\n          <input\n            type=\"checkbox\"\n            data-testId=\"clrTtSelectAll\"\n            [id]=\"selectAllId\"\n            [checked]=\"areAllRowsSelected()\"\n            (change)=\"toggleSelectAll()\"\n          />\n          <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a treetable is wrapped inside clrForm -->\n          <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n            <span class=\"clr-sr-only\">{{ commonStrings.selectAll }}</span>\n          </label>\n        </div>\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\">\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: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i2$5.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrTreetableRecursiveRows, selector: "clr-tt-recursive-rows", inputs: ["parent", "children"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetable, decorators: [{
             type: Component,
@@ -4702,7 +4747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         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" }]
+                    ], 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=\"treetable-row-selection treetable-column\" role=\"columnheader\">\n        <div class=\"clr-checkbox-wrapper\">\n          <input\n            type=\"checkbox\"\n            data-testId=\"clrTtSelectAll\"\n            [id]=\"selectAllId\"\n            [checked]=\"areAllRowsSelected()\"\n            (change)=\"toggleSelectAll()\"\n          />\n          <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a treetable is wrapped inside clrForm -->\n          <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n            <span class=\"clr-sr-only\">{{ commonStrings.selectAll }}</span>\n          </label>\n        </div>\n      </div>\n      } @if (hasActionOverflow()) {\n      <div class=\"treetable-row-actions treetable-column\">&nbsp;</div>\n      }\n      <div class=\"treetable-row-scrollable\">\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 }] }] } });
 
 /*
@@ -4717,6 +4762,230 @@ var ClrTreetableSortOrder;
     ClrTreetableSortOrder[ClrTreetableSortOrder["DESC"] = -1] = "DESC";
 })(ClrTreetableSortOrder || (ClrTreetableSortOrder = {}));
 
+/**
+ * The default CSS column class.
+ */
+const DEFAULT_COLUMN_CSS_CLASS = 'clr-col';
+/**
+ * The CSS class to use to hide a column and its related cells in the treetable.
+ */
+const HIDDEN_COLUMN_CSS_CLASS = 'treetable-hidden-column';
+/**
+ * The minimum width of column headers and cells in the treetable.
+ */
+const MIN_COLUMN_WIDTH = 48;
+/**
+ * The resize width of column headers and cells per keybinds.
+ */
+const KEYBOARD_RESIZE_LENGTH = 12;
+
+class ClrTreetableColumnSeparator {
+    constructor() {
+        this.columnId = input.required(...(ngDevMode ? [{ debugName: "columnId" }] : /* istanbul ignore next */ []));
+        this._columnState = inject(TreetableColumnStateService);
+        this._commonStringsService = inject(ClrCommonStringsService);
+        this._renderer = inject(Renderer2);
+        this._ngZone = inject(NgZone);
+        this._el = inject((ElementRef));
+        this._resizeTracker = viewChild.required('resizeTracker');
+        this._columnHandle = viewChild.required('columnHandle');
+        this.commonStrings = this._commonStringsService.keys;
+        this._minContentWidth = MIN_COLUMN_WIDTH;
+        this._widthBeforeResize = 0;
+        this._resizedBy = 0;
+        this._isWithinMaxResizeRange = true;
+        this._resizeStartedOnKeyDown = false;
+        this._unlisteners = [];
+    }
+    ngAfterViewInit() {
+        const handleEl = this._columnHandle().nativeElement;
+        this._ngZone.runOutsideAngular(() => {
+            this._unlisteners.push(this._renderer.listen(handleEl, 'pointerdown', (e) => this._onPointerDown(e)), this._renderer.listen(handleEl, 'keydown', (e) => {
+                this._showTrackerOnFirstKeyDown(e);
+                this._moveTrackerOnKeyDown(e);
+            }), this._renderer.listen(handleEl, 'keyup', (e) => this._hideTrackerOnKeyUp(e)));
+        });
+    }
+    ngOnDestroy() {
+        this._unlisteners.forEach(fn => fn());
+    }
+    // --- Pointer-based drag ---
+    _onPointerDown(event) {
+        event.preventDefault();
+        const handleEl = this._columnHandle().nativeElement;
+        handleEl.setPointerCapture(event.pointerId);
+        this._startResize();
+        this._showTracker();
+        const dragUnlisteners = [];
+        const onMove = (e) => {
+            this._calculateResize(e.clientX - event.clientX);
+            this._moveTracker();
+        };
+        const onUp = () => {
+            handleEl.releasePointerCapture(event.pointerId);
+            this._hideTracker();
+            this._endResize();
+            dragUnlisteners.forEach(unlisten => unlisten());
+        };
+        dragUnlisteners.push(this._renderer.listen(handleEl, 'pointermove', onMove), this._renderer.listen(handleEl, 'pointerup', onUp), this._renderer.listen(handleEl, 'pointercancel', onUp));
+    }
+    // --- Keyboard-based resize ---
+    _showTrackerOnFirstKeyDown(event) {
+        if (!this._resizeStartedOnKeyDown && this._isArrowHorizontal(event)) {
+            this._resizeStartedOnKeyDown = true;
+            this._startResize();
+            this._showTracker();
+        }
+    }
+    _moveTrackerOnKeyDown(event) {
+        if (event.key === 'ArrowLeft') {
+            event.stopPropagation();
+            this._calculateResize(this._resizedBy - KEYBOARD_RESIZE_LENGTH);
+            this._moveTracker();
+        }
+        else if (event.key === 'ArrowRight') {
+            event.stopPropagation();
+            this._calculateResize(this._resizedBy + KEYBOARD_RESIZE_LENGTH);
+            this._moveTracker();
+        }
+    }
+    _hideTrackerOnKeyUp(event) {
+        if (this._resizeStartedOnKeyDown && this._isArrowHorizontal(event)) {
+            this._resizeStartedOnKeyDown = false;
+            this._hideTracker();
+            this._endResize();
+            this._columnHandle().nativeElement.focus();
+        }
+    }
+    // --- Resize calculation ---
+    _startResize() {
+        this._resizedBy = 0;
+        this._isWithinMaxResizeRange = true;
+        const columnEl = this._getColumnElement();
+        this._widthBeforeResize = columnEl ? Math.round(columnEl.getBoundingClientRect().width) : 0;
+        this._minContentWidth = this.measureMinContentWidth(columnEl);
+    }
+    _calculateResize(movedBy) {
+        const maxShrink = this._widthBeforeResize - this._minContentWidth;
+        if (movedBy < -maxShrink) {
+            this._resizedBy = -maxShrink;
+            this._isWithinMaxResizeRange = false;
+        }
+        else {
+            this._resizedBy = movedBy;
+            this._isWithinMaxResizeRange = true;
+        }
+    }
+    _endResize() {
+        const newWidth = Math.max(this._widthBeforeResize + this._resizedBy, this._minContentWidth);
+        if (newWidth != this._widthBeforeResize) {
+            this._ngZone.run(() => {
+                this._columnState.changeWidth(this.columnId(), newWidth);
+            });
+        }
+    }
+    // --- Tracker visual ---
+    _showTracker() {
+        const trackerEl = this._resizeTracker().nativeElement;
+        const tableHeight = this._getTableHeight();
+        this._renderer.setStyle(trackerEl, 'height', tableHeight);
+        this._renderer.setStyle(trackerEl, 'display', 'block');
+    }
+    _moveTracker() {
+        const trackerEl = this._resizeTracker().nativeElement;
+        this._renderer.setStyle(trackerEl, 'transform', `translateX(${this._resizedBy}px)`);
+        if (this._isWithinMaxResizeRange) {
+            this._renderer.removeClass(trackerEl, 'exceeded-max');
+        }
+        else {
+            this._renderer.addClass(trackerEl, 'exceeded-max');
+        }
+    }
+    _hideTracker() {
+        const trackerEl = this._resizeTracker().nativeElement;
+        this._renderer.setStyle(trackerEl, 'display', 'none');
+        this._renderer.setStyle(trackerEl, 'transform', 'translateX(0px)');
+    }
+    // --- DOM helpers ---
+    _getColumnElement() {
+        return this._el.nativeElement.closest('.treetable-column');
+    }
+    _getTableHeight() {
+        const grid = this._el.nativeElement.closest('.treetable-grid');
+        return grid ? `${grid.clientHeight}px` : '100%';
+    }
+    _isArrowHorizontal(event) {
+        return event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+    }
+    /**
+     * Measures the intrinsic `min-content` width (incl. padding & border, rounded
+     * to whole pixels) of the given column by temporarily forcing `width: min-content`
+     * directly on the element, then restoring the previous inline value.
+     *
+     * `.treetable-column` already declares `min-width: min-content`; forcing the
+     * `width` collapses it so `getBoundingClientRect()` reports the min-content box.
+     *
+     * Falls back to (and is floored at) the MIN_COLUMN_WIDTH constant.
+     */
+    measureMinContentWidth(columnEl) {
+        if (!columnEl) {
+            return MIN_COLUMN_WIDTH;
+        }
+        const prevWidth = columnEl.style.width;
+        const prevMaxWidth = columnEl.style.maxWidth;
+        this._renderer.setStyle(columnEl, 'width', 'min-content');
+        this._renderer.setStyle(columnEl, 'max-width', 'min-content');
+        const measuredWidth = Math.round(columnEl.getBoundingClientRect().width);
+        if (prevWidth || prevMaxWidth) {
+            this._renderer.setStyle(columnEl, 'width', prevWidth);
+            this._renderer.setStyle(columnEl, 'max-width', prevMaxWidth);
+        }
+        else {
+            this._renderer.removeStyle(columnEl, 'width');
+            this._renderer.removeStyle(columnEl, 'max-width');
+        }
+        return Number.isFinite(measuredWidth) && measuredWidth > 0
+            ? Math.max(measuredWidth, MIN_COLUMN_WIDTH)
+            : MIN_COLUMN_WIDTH;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableColumnSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: ClrTreetableColumnSeparator, isStandalone: false, selector: "clr-tt-column-separator", inputs: { columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.treetable-column-separator": "true" } }, viewQueries: [{ propertyName: "_resizeTracker", first: true, predicate: ["resizeTracker"], descendants: true, isSignal: true }, { propertyName: "_columnHandle", first: true, predicate: ["columnHandle"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      type="button"
+      class="treetable-column-handle"
+      [aria-label]="commonStrings.columnSeparatorAriaLabel"
+      #columnHandle
+    ></button>
+    <span class="clr-sr-only">
+      {{ commonStrings.columnSeparatorDescription }}
+    </span>
+    <div class="treetable-column-resize-tracker" #resizeTracker></div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableColumnSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-tt-column-separator',
+                    template: `
+    <button
+      type="button"
+      class="treetable-column-handle"
+      [aria-label]="commonStrings.columnSeparatorAriaLabel"
+      #columnHandle
+    ></button>
+    <span class="clr-sr-only">
+      {{ commonStrings.columnSeparatorDescription }}
+    </span>
+    <div class="treetable-column-resize-tracker" #resizeTracker></div>
+  `,
+                    host: {
+                        '[class.treetable-column-separator]': 'true',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                }]
+        }], propDecorators: { columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnId", required: true }] }], _resizeTracker: [{ type: i0.ViewChild, args: ['resizeTracker', { isSignal: true }] }], _columnHandle: [{ type: i0.ViewChild, args: ['columnHandle', { isSignal: true }] }] } });
+
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -4746,6 +5015,8 @@ class ClrTreetableColumn {
         }, ...(ngDevMode ? [{ debugName: "_internalSortOrder" }] : /* istanbul ignore next */ []));
         this.clrTtSortOrder = input(ClrTreetableSortOrder.UNSORTED, ...(ngDevMode ? [{ debugName: "clrTtSortOrder" }] : /* istanbul ignore next */ []));
         this.clrTtSortOrderChange = outputFromObservable(toObservable(this._internalSortOrder));
+        this.clrTtColumnSize = input(null, ...(ngDevMode ? [{ debugName: "clrTtColumnSize" }] : /* istanbul ignore next */ []));
+        this.clrTtColumnResize = outputFromObservable(this._columnState.getColumnChangesById(this.columnId).pipe(filter$1(data => data.type === TreetableColumnUpdate.WIDTH), map$1(data => data.width)));
         this.isSortable = computed(() => !!this.clrTtSortBy(), ...(ngDevMode ? [{ debugName: "isSortable" }] : /* istanbul ignore next */ []));
         this.sortDirection = computed(() => {
             const order = this._internalSortOrder();
@@ -4800,6 +5071,12 @@ class ClrTreetableColumn {
                     break;
             }
         });
+        effect(() => {
+            const size = this.clrTtColumnSize();
+            if (size) {
+                this._columnState.changeWidth(this.columnId, size);
+            }
+        });
     }
     sort(reverse) {
         const comparator = this.clrTtSortBy();
@@ -4809,7 +5086,7 @@ class ClrTreetableColumn {
         this._sort.toggle(comparator, reverse);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()" } }, providers: [ClrPopoverService], viewQueries: [{ propertyName: "_columnTitleRef", first: true, predicate: ["columnTitle"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrTreetableColumn, isStandalone: false, selector: "clr-tt-column", inputs: { clrTtSortBy: { classPropertyName: "clrTtSortBy", publicName: "clrTtSortBy", isSignal: true, isRequired: false, transformFunction: null }, clrTtSortOrder: { classPropertyName: "clrTtSortOrder", publicName: "clrTtSortOrder", isSignal: true, isRequired: false, transformFunction: null }, clrTtColumnSize: { classPropertyName: "clrTtColumnSize", publicName: "clrTtColumnSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clrTtSortOrderChange: "clrTtSortOrderChange", clrTtColumnResize: "clrTtColumnResize" }, host: { attributes: { "role": "columnheader" }, properties: { "class.treetable-column": "true", "attr.aria-sort": "ariaSort()" } }, providers: [ClrPopoverService], viewQueries: [{ propertyName: "_columnTitleRef", first: true, predicate: ["columnTitle"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
     @if (isSortable()) {
       <button type="button" class="treetable-column-title" data-testId="clrTtSortButton" (click)="sort()">
         <ng-container *ngTemplateOutlet="columnTitle" />
@@ -4831,10 +5108,12 @@ class ClrTreetableColumn {
 
     <ng-content select="clr-tt-filter, clr-tt-string-filter" />
 
+    <clr-tt-column-separator [columnId]="columnId" />
+
     <ng-template #columnTitle>
       <ng-content />
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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: "component", type: ClrTreetableColumnSeparator, selector: "clr-tt-column-separator", inputs: ["columnId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableColumn, decorators: [{
             type: Component,
@@ -4863,6 +5142,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
 
     <ng-content select="clr-tt-filter, clr-tt-string-filter" />
 
+    <clr-tt-column-separator [columnId]="columnId" />
+
     <ng-template #columnTitle>
       <ng-content />
     </ng-template>
@@ -4875,7 +5156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [], propDecorators: { _columnTitleRef: [{ type: i0.ViewChild, args: ['columnTitle', { ...{ read: TemplateRef }, isSignal: true }] }], clrTtSortBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortBy", required: false }] }], clrTtSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortOrder", required: false }] }], clrTtSortOrderChange: [{ type: i0.Output, args: ["clrTtSortOrderChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { _columnTitleRef: [{ type: i0.ViewChild, args: ['columnTitle', { ...{ read: TemplateRef }, isSignal: true }] }], clrTtSortBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortBy", required: false }] }], clrTtSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtSortOrder", required: false }] }], clrTtSortOrderChange: [{ type: i0.Output, args: ["clrTtSortOrderChange"] }], clrTtColumnSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtColumnSize", required: false }] }], clrTtColumnResize: [{ type: i0.Output, args: ["clrTtColumnResize"] }] } });
 
 let id = 0;
 class ClrTreetableColumnManagerMenuComponent {
@@ -5170,7 +5451,7 @@ class ClrTreetableHideableColumn {
         this._columnState = inject(TreetableColumnStateService);
         this._column = inject(ClrTreetableColumn);
         this.clrTtHideableColumn = input('', ...(ngDevMode ? [{ debugName: "clrTtHideableColumn" }] : /* istanbul ignore next */ []));
-        this.clrTtHiddenChange = output();
+        this.clrTtHiddenChange = outputFromObservable(this._columnState.getColumnChangesById(this._column.columnId).pipe(filter$1(data => data.type === TreetableColumnUpdate.HIDDEN), map$1(data => data.hidden)));
         this.resolvedHidden = computed(() => {
             const value = this.clrTtHideableColumn();
             if (typeof value === 'string') {
@@ -5319,13 +5600,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
         }], propDecorators: { clrTtFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "clrTtFilter", required: 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 ClrTreetableCell {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrTreetableCell, isStandalone: false, selector: "clr-tt-cell", host: { attributes: { "role": "cell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrTreetableCell, isStandalone: false, selector: "clr-tt-cell", host: { attributes: { "role": "gridcell" }, properties: { "class.treetable-cell": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTreetableCell, decorators: [{
             type: Component,
@@ -5334,7 +5615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     template: '<ng-content></ng-content>',
                     host: {
                         '[class.treetable-cell]': 'true',
-                        role: 'cell',
+                        role: 'gridcell',
                     },
                     standalone: false,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5371,11 +5652,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", 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-2026 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -5383,14 +5659,14 @@ const HIDDEN_COLUMN_CSS_CLASS = 'treetable-hidden-column';
  */
 class TreetableHeaderRenderer {
     constructor() {
-        this.elementRef = inject(ElementRef);
+        this.elementRef = inject((ElementRef));
         this.renderer = inject(Renderer2);
     }
     /**
      * Returns the client width of the header cell.
      */
     getWidth() {
-        return this.elementRef.nativeElement.clientWidth;
+        return this.elementRef.nativeElement.getBoundingClientRect().width;
     }
     hide() {
         this.renderer.addClass(this.elementRef.nativeElement, HIDDEN_COLUMN_CSS_CLASS);
@@ -5407,14 +5683,20 @@ class TreetableHeaderRenderer {
     getColumnClasses() {
         const classes = [];
         this.elementRef.nativeElement.classList.forEach((className) => {
-            if (className.indexOf('clr-col') !== -1) {
+            if (className.includes(DEFAULT_COLUMN_CSS_CLASS)) {
                 classes.push(className);
             }
         });
         return classes;
     }
     setDefaultColumnClass() {
-        this.renderer.addClass(this.elementRef.nativeElement, 'clr-col');
+        this.renderer.addClass(this.elementRef.nativeElement, DEFAULT_COLUMN_CSS_CLASS);
+    }
+    setWidth(width) {
+        const el = this.elementRef.nativeElement;
+        this.renderer.setStyle(el, 'width', `${width}px`);
+        this.renderer.setStyle(el, 'max-width', `${width}px`);
+        this.renderer.setStyle(el, 'flex', '0 0 auto');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableHeaderRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: TreetableHeaderRenderer, isStandalone: false, selector: "clr-tt-column", ngImport: i0 }); }
@@ -5434,7 +5716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
  */
 class TreetableCellRenderer {
     constructor() {
-        this.elementRef = inject(ElementRef);
+        this.elementRef = inject((ElementRef));
         this.renderer = inject(Renderer2);
     }
     setColumnClasses(columnClasses) {
@@ -5454,6 +5736,12 @@ class TreetableCellRenderer {
     setMaxWidth(maxWidth) {
         this.renderer.setStyle(this.elementRef.nativeElement, 'max-width', maxWidth + 'px');
     }
+    setWidth(width) {
+        const el = this.elementRef.nativeElement;
+        this.renderer.setStyle(el, 'width', `${width}px`);
+        this.renderer.setStyle(el, 'max-width', `${width}px`);
+        this.renderer.setStyle(el, 'flex', '0 0 auto');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TreetableCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: TreetableCellRenderer, isStandalone: false, selector: "clr-tt-cell", ngImport: i0 }); }
 }
@@ -5498,12 +5786,13 @@ class TreetableMainRenderer {
         this.columns = contentChildren(ClrTreetableColumn, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         this.rules = [
             this.createClassesRule(),
-            this.createFirstColumnWidthRule(),
+            this.createColumnResizeWidthRule(),
+            this.createColumnCellWidthRule(),
             this.createDisplayRule(),
         ];
         fromEvent(window, 'resize')
             .pipe(debounceTime(200), takeUntilDestroyed())
-            .subscribe(() => this.renderRuleByKey('first-column-width', this.headers(), this.rows()));
+            .subscribe(() => this.renderRuleByKey('column-cell-width', this.headers(), this.rows()));
         afterRenderEffect(() => {
             const headers = this.headers();
             const rows = this.rows();
@@ -5516,13 +5805,13 @@ class TreetableMainRenderer {
             const rows = this.rows();
             switch (event) {
                 case TreetableColumnUpdate.HIDDEN:
-                    this.renderRulesByKeys(['display', 'first-column-width'], headers, rows);
+                    this.renderRulesByKeys(['display', 'column-cell-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);
+                    this.renderRulesByKeys(['column-cell-width', 'column-resize-width'], headers, rows);
                     break;
                 default:
                     this.renderAllRules(headers, rows);
@@ -5613,14 +5902,11 @@ class TreetableMainRenderer {
             },
         };
     }
-    createFirstColumnWidthRule() {
+    createColumnCellWidthRule() {
         return {
-            key: 'first-column-width',
+            key: 'column-cell-width',
             layoutPhase: 'stable',
             prepareData: ctx => {
-                if (!ctx.isFirstVisible || !ctx.header) {
-                    return null;
-                }
                 return { width: ctx.header.getWidth() };
             },
             applyCell: (cell, data) => {
@@ -5628,6 +5914,24 @@ class TreetableMainRenderer {
             },
         };
     }
+    createColumnResizeWidthRule() {
+        return {
+            key: 'column-resize-width',
+            layoutPhase: 'unstable',
+            prepareData: ctx => {
+                if (!ctx.state?.width) {
+                    return null;
+                }
+                return { width: ctx.state.width };
+            },
+            applyHeader: (header, data) => {
+                header.setWidth(data.width);
+            },
+            applyCell: (cell, data) => {
+                cell.setWidth(data.width);
+            },
+        };
+    }
     createDisplayRule() {
         return {
             key: 'display',
@@ -5858,7 +6162,8 @@ class ClrTreetableModule {
             ClrTreetableFilter,
             ClrTreetableStringFilter, ClrTreetableRecursiveRows,
             ClrTreetableRowCheckbox,
-            ClrTreetableColumnManagerMenuComponent], imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule], exports: [ClrTreetable,
+            ClrTreetableColumnManagerMenuComponent,
+            ClrTreetableColumnSeparator], imports: [CommonModule, ClarityModule, ReactiveFormsModule, FormsModule, CdkTrapFocusModule], exports: [ClrTreetable,
             ClrTreetableRow,
             ClrTreetableCell,
             ClrTreetableColumn,
@@ -5884,6 +6189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         ClrTreetableRecursiveRows,
                         ClrTreetableRowCheckbox,
                         ClrTreetableColumnManagerMenuComponent,
+                        ClrTreetableColumnSeparator,
                     ],
                     exports: [CLR_TREETABLE_DIRECTIVES],
                 }]
@@ -5941,6 +6247,8 @@ class ClrViewEditSection {
         this._isCollapsed = false;
         this._titleTextStyle = 'subsection';
         this._titleTextFontWeight = 'medium';
+        this._showBadge = false;
+        this._badgeClass = 'label label-primary';
         this._isCollapsedChange = new EventEmitter();
         this._editModeChanged = new EventEmitter(false);
         this._submitted = new EventEmitter(false);
@@ -5983,7 +6291,7 @@ class ClrViewEditSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrViewEditSection, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrViewEditSection, isStandalone: false, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editIcon: ["clrEditIcon", "_editIcon"], _isCollapsible: ["clrIsCollapsible", "_isCollapsible"], _isCollapsed: ["clrIsCollapsed", "_isCollapsed"], _titleTextStyle: ["clrTitleTextStyle", "_titleTextStyle"], _titleTextFontWeight: ["clrTitleTextFontWeight", "_titleTextFontWeight"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"], editMode: ["clrEditMode", "editMode"] }, outputs: { _isCollapsedChange: "clrIsCollapsedChange", _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\" [attr.cds-text]=\"_titleTextStyle + ' ' + _titleTextFontWeight\">\n      @if (_isCollapsible && !editMode) {\n      <span\n        class=\"ces-title-trigger\"\n        (click)=\"onCollapseExpand()\"\n        (keydown.enter)=\"onCollapseExpand()\"\n        (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-expanded]=\"!_isCollapsed\"\n      >\n        {{ _title }}\n      </span>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <cds-icon shape=\"angle\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></cds-icon>\n      </button>\n      } @else { {{ _title }} }\n      <div class=\"ves-actions\">\n        @if (_editable && !editMode && actionBlock.children.length == 0) {\n        <button type=\"button\" (click)=\"onEdit()\" class=\"btn btn-icon btn-link ves-action\">\n          <cds-icon class=\"ves-edit-icon\" [shape]=\"_editIcon\" size=\"20\"></cds-icon>\n        </button>\n        }\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    @if (!(_isCollapsed && _isCollapsible)) {\n    <div class=\"card-text\" [@collapseExpandAnimation]=\"initialized\">\n      @if (!editMode) {\n      <ng-template [ngTemplateOutlet]=\"viewRef\"></ng-template>\n      } @if (editMode) {\n      <ng-template [ngTemplateOutlet]=\"editRef\"></ng-template>\n      } @if (editMode) {\n      <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n        <button class=\"btn btn-primary ves-save\" type=\"submit\">{{ _saveText }}</button>\n        <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{ _cancelText }}</button>\n      </form>\n      }\n    </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrViewEditSection, isStandalone: false, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editIcon: ["clrEditIcon", "_editIcon"], _isCollapsible: ["clrIsCollapsible", "_isCollapsible"], _isCollapsed: ["clrIsCollapsed", "_isCollapsed"], _titleTextStyle: ["clrTitleTextStyle", "_titleTextStyle"], _titleTextFontWeight: ["clrTitleTextFontWeight", "_titleTextFontWeight"], _showBadge: ["clrShowBadge", "_showBadge"], _badgeContent: ["clrBadgeContent", "_badgeContent"], _badgeClass: ["clrBadgeClass", "_badgeClass"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"], editMode: ["clrEditMode", "editMode"] }, outputs: { _isCollapsedChange: "clrIsCollapsedChange", _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\" [attr.cds-text]=\"_titleTextStyle + ' ' + _titleTextFontWeight\">\n      <ng-template #titleContainer>\n        {{ _title }} @if (_showBadge) { @if (_badgeContent) {\n        <span class=\"ves-badge\" [ngClass]=\"_badgeClass\">{{ _badgeContent }}</span>\n        }\n        <ng-content select=\"[badge]\"></ng-content>\n        }\n      </ng-template>\n      @if (_isCollapsible && !editMode) {\n      <span\n        class=\"ces-title-trigger\"\n        (click)=\"onCollapseExpand()\"\n        (keydown.enter)=\"onCollapseExpand()\"\n        (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-expanded]=\"!_isCollapsed\"\n      >\n        <ng-template [ngTemplateOutlet]=\"titleContainer\"></ng-template>\n      </span>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <cds-icon shape=\"angle\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></cds-icon>\n      </button>\n      } @else {\n      <ng-template [ngTemplateOutlet]=\"titleContainer\"></ng-template>\n      }\n      <div class=\"ves-actions\">\n        @if (_editable && !editMode && actionBlock.children.length == 0) {\n        <button type=\"button\" (click)=\"onEdit()\" class=\"btn btn-icon btn-link ves-action\">\n          <cds-icon class=\"ves-edit-icon\" [shape]=\"_editIcon\" size=\"20\"></cds-icon>\n        </button>\n        }\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    @if (!(_isCollapsed && _isCollapsible)) {\n    <div class=\"card-text\" [@collapseExpandAnimation]=\"initialized\">\n      @if (!editMode) {\n      <ng-template [ngTemplateOutlet]=\"viewRef\"></ng-template>\n      } @if (editMode) {\n      <ng-template [ngTemplateOutlet]=\"editRef\"></ng-template>\n      } @if (editMode) {\n      <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n        <button class=\"btn btn-primary ves-save\" type=\"submit\">{{ _saveText }}</button>\n        <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{ _cancelText }}</button>\n      </form>\n      }\n    </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i1$1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], animations: [
             trigger('collapseExpandAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0, overflow: 'hidden' }),
@@ -6021,7 +6329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             transition('true => false', animate('300ms ease-out')),
                             transition('false => true', animate('300ms ease-in')),
                         ]),
-                    ], standalone: false, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\" [attr.cds-text]=\"_titleTextStyle + ' ' + _titleTextFontWeight\">\n      @if (_isCollapsible && !editMode) {\n      <span\n        class=\"ces-title-trigger\"\n        (click)=\"onCollapseExpand()\"\n        (keydown.enter)=\"onCollapseExpand()\"\n        (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-expanded]=\"!_isCollapsed\"\n      >\n        {{ _title }}\n      </span>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <cds-icon shape=\"angle\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></cds-icon>\n      </button>\n      } @else { {{ _title }} }\n      <div class=\"ves-actions\">\n        @if (_editable && !editMode && actionBlock.children.length == 0) {\n        <button type=\"button\" (click)=\"onEdit()\" class=\"btn btn-icon btn-link ves-action\">\n          <cds-icon class=\"ves-edit-icon\" [shape]=\"_editIcon\" size=\"20\"></cds-icon>\n        </button>\n        }\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    @if (!(_isCollapsed && _isCollapsible)) {\n    <div class=\"card-text\" [@collapseExpandAnimation]=\"initialized\">\n      @if (!editMode) {\n      <ng-template [ngTemplateOutlet]=\"viewRef\"></ng-template>\n      } @if (editMode) {\n      <ng-template [ngTemplateOutlet]=\"editRef\"></ng-template>\n      } @if (editMode) {\n      <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n        <button class=\"btn btn-primary ves-save\" type=\"submit\">{{ _saveText }}</button>\n        <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{ _cancelText }}</button>\n      </form>\n      }\n    </div>\n    }\n  </div>\n</div>\n" }]
+                    ], standalone: false, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\" [attr.cds-text]=\"_titleTextStyle + ' ' + _titleTextFontWeight\">\n      <ng-template #titleContainer>\n        {{ _title }} @if (_showBadge) { @if (_badgeContent) {\n        <span class=\"ves-badge\" [ngClass]=\"_badgeClass\">{{ _badgeContent }}</span>\n        }\n        <ng-content select=\"[badge]\"></ng-content>\n        }\n      </ng-template>\n      @if (_isCollapsible && !editMode) {\n      <span\n        class=\"ces-title-trigger\"\n        (click)=\"onCollapseExpand()\"\n        (keydown.enter)=\"onCollapseExpand()\"\n        (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-expanded]=\"!_isCollapsed\"\n      >\n        <ng-template [ngTemplateOutlet]=\"titleContainer\"></ng-template>\n      </span>\n      <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n        <cds-icon shape=\"angle\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></cds-icon>\n      </button>\n      } @else {\n      <ng-template [ngTemplateOutlet]=\"titleContainer\"></ng-template>\n      }\n      <div class=\"ves-actions\">\n        @if (_editable && !editMode && actionBlock.children.length == 0) {\n        <button type=\"button\" (click)=\"onEdit()\" class=\"btn btn-icon btn-link ves-action\">\n          <cds-icon class=\"ves-edit-icon\" [shape]=\"_editIcon\" size=\"20\"></cds-icon>\n        </button>\n        }\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    @if (!(_isCollapsed && _isCollapsible)) {\n    <div class=\"card-text\" [@collapseExpandAnimation]=\"initialized\">\n      @if (!editMode) {\n      <ng-template [ngTemplateOutlet]=\"viewRef\"></ng-template>\n      } @if (editMode) {\n      <ng-template [ngTemplateOutlet]=\"editRef\"></ng-template>\n      } @if (editMode) {\n      <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n        <button class=\"btn btn-primary ves-save\" type=\"submit\">{{ _saveText }}</button>\n        <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{ _cancelText }}</button>\n      </form>\n      }\n    </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _title: [{
                 type: Input,
                 args: ['clrTitle']
@@ -6052,6 +6360,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }], _titleTextFontWeight: [{
                 type: Input,
                 args: ['clrTitleTextFontWeight']
+            }], _showBadge: [{
+                type: Input,
+                args: ['clrShowBadge']
+            }], _badgeContent: [{
+                type: Input,
+                args: ['clrBadgeContent']
+            }], _badgeClass: [{
+                type: Input,
+                args: ['clrBadgeClass']
             }], viewRef: [{
                 type: Input,
                 args: ['clrViewRef']
@@ -6403,7 +6720,7 @@ class ClrHistoryHttpImplService {
         }
         return url;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryHttpImplService, deps: [{ token: HISTORY_NOTIFICATION_URL_PROVIDER }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryHttpImplService, deps: [{ token: HISTORY_NOTIFICATION_URL_PROVIDER }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryHttpImplService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrHistoryHttpImplService, decorators: [{
@@ -6411,7 +6728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HISTORY_NOTIFICATION_URL_PROVIDER]
-                }] }, { type: i1$4.HttpClient }] });
+                }] }, { type: i1$3.HttpClient }] });
 
 /*
  * Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
@@ -16868,7 +17185,7 @@ class ClrCopyToClipboard {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ClrCopyToClipboard, isStandalone: true, selector: "clr-copy-to-clipboard", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, hiddenUntilHovered: { classPropertyName: "hiddenUntilHovered", publicName: "hiddenUntilHovered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hidden-until-hovered": "hiddenUntilHovered()", "class.parent-hovered": "parentHovered" } }, ngImport: i0, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"copy-to-clipboard-icon\"\n    [cdkCopyToClipboard]=\"trimmedValue()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.enter)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></cds-icon>\n  <clr-tooltip-content\n    class=\"clr-tooltip-fit-content\"\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$5.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$5.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$5.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ClrCopyToClipboard, isStandalone: true, selector: "clr-copy-to-clipboard", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, hiddenUntilHovered: { classPropertyName: "hiddenUntilHovered", publicName: "hiddenUntilHovered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hidden-until-hovered": "hiddenUntilHovered()", "class.parent-hovered": "parentHovered" } }, ngImport: i0, template: "<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    class=\"copy-to-clipboard-icon\"\n    [cdkCopyToClipboard]=\"trimmedValue()\"\n    (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n    [shape]=\"showCopiedIcon ? 'success-standard' : 'copy-to-clipboard'\"\n    [ngClass]=\"{ 'attribute-was-copied-color': showCopiedIcon }\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.enter)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></cds-icon>\n  <clr-tooltip-content\n    class=\"clr-tooltip-fit-content\"\n    [clrSize]=\"tooltipSize\"\n    [clrPosition]=\"tooltipPosition\"\n    *clrIfOpen\n    >{{ tooltipText() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n", styles: [":host,.tooltip{display:flex;align-items:center}.copy-to-clipboard-icon{cursor:pointer;color:var(--cds-alias-status-disabled-tint)!important}.copy-to-clipboard-icon:hover{color:var(--cds-alias-typography-link-color)!important}.attribute-was-copied-color{color:var(--cds-alias-status-success)!important}:host(.hidden-until-hovered){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease}:host(.hidden-until-hovered.parent-hovered),:host(.hidden-until-hovered:focus-within){visibility:visible;opacity:1}.copy-to-clipboard-parent{display:flex;flex-direction:row;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "ngmodule", type: ClrTooltipModule }, { kind: "component", type: i1$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCopyToClipboard, decorators: [{
             type: Component,
@@ -17124,7 +17441,7 @@ class ClrSummaryItemValue {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryItemValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n  <a clrTooltipTrigger class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n    <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon\n  [shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n  <a\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    [href]=\"href()\"\n    [attr.target]=\"target() ?? null\"\n    (click)=\"handleClick()\"\n  >\n    {{ value() }}\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a #valueElement class=\"value value-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$5.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$5.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$5.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrSummaryItemValue, isStandalone: true, selector: "clr-summary-item-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.has-icon": "this.hasIcon", "class.has-text": "this.hasText", "class.hidden": "this.isHidden" } }, providers: [provideAnimations()], viewQueries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }, { propertyName: "valueElement", first: true, predicate: ["valueElement"], descendants: true }], ngImport: i0, template: "@if (icon() !== undefined && icon() !== null && icon() !== '') { @if (href()) { @if (tooltip()) {\n<clr-tooltip>\n  <a clrTooltipTrigger class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n    <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a class=\"value-icon-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  <cds-icon [shape]=\"icon()\" class=\"value-icon value-link\"></cds-icon>\n</a>\n} } @else if (hasClickHandler) { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon\n    clrTooltipTrigger\n    [shape]=\"icon()\"\n    class=\"value-icon value-link\"\n    tabindex=\"0\"\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  ></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon\n  [shape]=\"icon()\"\n  class=\"value-icon value-link\"\n  tabindex=\"0\"\n  (click)=\"handleClick()\"\n  (keydown.enter)=\"handleClick()\"\n></cds-icon>\n} } @else { @if (tooltip()) {\n<clr-tooltip>\n  <cds-icon clrTooltipTrigger [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ tooltip() }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<cds-icon [shape]=\"icon()\" class=\"value-icon value-icon-neutral\"></cds-icon>\n} } } @else if (value() !== undefined && value() !== null && value() !== '') { @if (href()) { @if (effectiveTooltip) {\n<clr-tooltip>\n  <a\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    [href]=\"href()\"\n    [attr.target]=\"target() ?? null\"\n    (click)=\"handleClick()\"\n  >\n    {{ value() }}\n  </a>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<a #valueElement class=\"value value-link\" [href]=\"href()\" [attr.target]=\"target() ?? null\" (click)=\"handleClick()\">\n  {{ value() }}\n</a>\n} } @else if (hasClickHandler) {\n<clr-tooltip>\n  <span\n    #valueElement\n    class=\"value value-link\"\n    clrTooltipTrigger\n    (click)=\"handleClick()\"\n    (keydown.enter)=\"handleClick()\"\n  >\n    {{ value() }}\n  </span>\n  @if (effectiveTooltip) {\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n  }\n</clr-tooltip>\n} @else if(effectiveTooltip) {\n<clr-tooltip>\n  <span #valueElement class=\"value\" clrTooltipTrigger>{{ value() }}</span>\n  <clr-tooltip-content [clrSize]=\"tooltipSize\" [clrPosition]=\"tooltipPosition\" *clrIfOpen>\n    {{ effectiveTooltip }}</clr-tooltip-content\n  >\n</clr-tooltip>\n} @else {\n<span #valueElement class=\"value\">{{ value() }}</span>\n} } @else {\n<span class=\"projected-wrapper\" #projectedContent>\n  <ng-content></ng-content>\n</span>\n}\n", styles: [":host{display:inline-flex;flex-direction:row;align-items:center;gap:.25rem;flex:0 1 auto;max-width:100%;min-width:0;overflow:visible}:host.hidden{display:none}:host(.has-icon){flex:0 0 auto;width:auto}.value,.value-link,.projected-wrapper,clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}cds-icon{flex-shrink:0}.value-icon-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}.value-icon-link cds-icon{color:var(--cds-alias-typography-link-color)}.value-icon-link:hover cds-icon,.value-icon-link:focus cds-icon{color:var(--cds-alias-typography-link-color-hover)}.value-icon-link:visited cds-icon{color:var(--cds-alias-typography-link-color-visited)}.value-icon{height:20px;width:20px}.value-icon-neutral{color:var(--cds-alias-status-neutral)}.value-link,.edit-link{color:var(--cds-alias-typography-link-color);text-decoration:underline;cursor:pointer}.value-link:visited,.edit-link:visited{color:var(--cds-alias-typography-link-color-visited)}.value-link:hover,.value-link:focus,.edit-link:hover,.edit-link:focus{color:var(--cds-alias-typography-link-color-hover);text-decoration:underline}.value{display:inline-block}clr-tooltip{display:inline-flex;flex:1 1 auto;min-width:0;overflow:visible}clr-tooltip [clrTooltipTrigger]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep clr-tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}::ng-deep .tooltip-content{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}:host(.error){color:var(--cds-alias-status-danger)}:host(.error) cds-icon{color:var(--cds-alias-status-danger)!important}:host(.error) .value{color:var(--cds-alias-status-danger)}:host(.warning){color:var(--cds-alias-status-warning)}:host(.warning) cds-icon{color:var(--cds-alias-status-warning)!important}:host(.warning) .value{color:var(--cds-alias-status-warning)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$4.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$4.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$4.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryItemValue, decorators: [{
             type: Component,
@@ -17750,7 +18067,7 @@ class ClrSummaryArea {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], viewQueries: [{ propertyName: "panelsRef", first: true, predicate: ["panelsRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #panelsRef\n  class=\"summary-area-panels\"\n  [class.is-active]=\"!isCollapsed()\"\n  [class.loading-active]=\"hasLoading\"\n  [style.height]=\"panelHeight\"\n>\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [style.--rows]=\"currentRows()\"\n    [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div\n        class=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\">\n              {{ warningLinkText }}\n            </span>\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows()\">\n          @for (item of visibleItems; track item) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i2$4.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrSummaryArea, isStandalone: true, selector: "clr-summary-area", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "items", predicate: ClrSummaryItem, descendants: true }], viewQueries: [{ propertyName: "panelsRef", first: true, predicate: ["panelsRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #panelsRef\n  class=\"summary-area-panels\"\n  [class.is-active]=\"!isCollapsed()\"\n  [class.loading-active]=\"hasLoading\"\n  [style.height]=\"panelHeight\"\n>\n  <div\n    class=\"summary-area-panel summary-area-panel--state\"\n    [class.is-active]=\"!isCollapsed() && (hasLoading || hasError || hasWarning)\"\n    [class.is-error]=\"hasError\"\n    [class.is-warning]=\"hasWarning\"\n    [style.--rows]=\"currentRows()\"\n    [attr.aria-hidden]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || !(hasLoading || hasError || hasWarning) ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div\n        class=\"summary-area-loading\"\n        [class.is-visible]=\"loadingVisible\"\n        [attr.aria-hidden]=\"!hasLoading\"\n        [style.height]=\"loadingPanelHeight\"\n      >\n        <clr-spinner [clrMedium]=\"true\"></clr-spinner>\n        <span class=\"loading-text\">{{ loadingText }}</span>\n      </div>\n      @if (hasError) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'danger'\">\n          <clr-alert-item>\n            @if (errorLinkText && errorClick) {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorLinkText }}</span>\n            } @else if (errorClick) {\n            <span class=\"alert-action\" (click)=\"errorClick()\" (keydown.enter)=\"errorClick()\">{{ errorText }}</span>\n            } @else {\n            <span class=\"alert-text\">{{ errorText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      } @else if (hasWarning) {\n      <div class=\"summary-area-alert\">\n        <clr-alert [clrAlertLightweight]=\"true\" [clrAlertType]=\"'warning'\">\n          <clr-alert-item>\n            @if (warningLinkText && warningClick) {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\">\n              {{ warningLinkText }}\n            </span>\n            } @else if (warningClick) {\n            <span class=\"alert-action\" (click)=\"warningClick()\" (keydown.enter)=\"warningClick()\"\n              >{{ warningText }}</span\n            >\n            } @else {\n            <span class=\"alert-text\">{{ warningText }}</span>\n            }\n          </clr-alert-item>\n        </clr-alert>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"summary-area-panel summary-area-panel--grid\"\n    [class.is-active]=\"!isCollapsed() && !hasError && !hasWarning && !hasLoading\"\n    [attr.aria-hidden]=\"isCollapsed() || hasError || hasWarning || hasLoading ? 'true' : 'false'\"\n    [attr.inert]=\"isCollapsed() || hasError || hasWarning || hasLoading ? '' : null\"\n  >\n    <div class=\"summary-area-panel__body\">\n      <div class=\"summary-area-container\">\n        <div class=\"summary-grid\" [style.--columns]=\"currentColumns\" [style.--rows]=\"currentRows()\">\n          @for (item of visibleItems; track item) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".summary-area-container,.summary-area-alert{margin:0 24px 9px;max-width:100%;overflow-x:auto}.summary-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,320px));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;max-width:100%;column-gap:36px;row-gap:6px;padding:3px 0}.summary-item{max-width:320px;min-width:0;height:20px;overflow:visible;display:flex;flex-direction:column}clr-alert-item{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}clr-alert-item .alert-text{flex:none;width:auto;white-space:nowrap;align-self:flex-start}clr-alert-item .alert-action{white-space:nowrap}.alert-action{color:var(--cds-alias-typography-link-color)!important;cursor:pointer}.alert-action:visited{color:var(--cds-alias-typography-link-color-visited)}.alert-action:hover,.alert-action:focus{color:var(--cds-alias-typography-link-color-hover)}clr-alert ::ng-deep>.alert-lightweight{padding-left:0;padding-right:0}.summary-area-panels{position:relative;height:0;opacity:0;transform-origin:top center;pointer-events:none;visibility:hidden;overflow:hidden;margin:0 0 9px;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.is-active{opacity:1;pointer-events:auto;visibility:visible;overflow:visible;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .4s ease-in-out,visibility .4s ease-in-out}.summary-area-panels.loading-active{display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease-in-out}.summary-area-panel{transform-origin:top center;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out;position:absolute;top:0;left:0;right:0}.summary-area-panel__body{will-change:opacity}.summary-area-panel.is-active{opacity:1;pointer-events:auto;position:relative;transition:opacity .4s ease-in-out}.summary-area-panel.is-active .summary-area-panel__body{overflow:visible}.summary-area-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 24px;padding:3px 0;opacity:0;transition:opacity 0s ease-in-out}.summary-area-loading.is-visible{opacity:1;transition:opacity .4s ease-in-out}.summary-area-loading .loading-text{color:var(--cds-alias-typography-color-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ClarityModule }, { kind: "component", type: i2$4.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i2$4.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i2$4.ClrAlertText, selector: ".alert-text" }, { kind: "component", type: i2$5.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrSummaryArea, decorators: [{
             type: Component,