@c8y/ngx-components 1023.15.0 → 1023.16.3

package/fesm2022/c8y-ngx-components.mjs

@@ -4,7 +4,7 @@ import * as i1$4 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, each, mapValues, mapKeys, keys, get, isNaN as isNaN$1, isFinite, forEach, assign, min, every, first, map as map$1, find, negate, upperFirst, memoize as memoize$1, isEmpty, property, some, entries, omitBy, isDate, pick, flatMap, cloneDeep, set as set$1, orderBy, filter as filter$2, snakeCase, matches, escape, escapeRegExp, assignWith, uniqBy, toNumber, isEqualWith, clone, omit, has, transform, identity, unset, flow, findIndex as findIndex$1, isNil, chunk, values, union, without, indexOf, kebabCase, forOwn } from 'lodash-es';
-import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, ReplaySubject, firstValueFrom, lastValueFrom, NEVER, Observable, startWith as startWith$1, filter as filter$1, tap as tap$1, mergeMap, fromEvent, pipe, throwError, concat, map as map$2, timer, fromEventPattern, withLatestFrom, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, switchMap as switchMap$1, shareReplay as shareReplay$1, catchError as catchError$1, empty, forkJoin, interval } from 'rxjs';
+import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, ReplaySubject, firstValueFrom, lastValueFrom, NEVER, Observable, startWith as startWith$1, filter as filter$1, tap as tap$1, mergeMap, fromEvent, pipe, throwError, concat, map as map$2, timer, fromEventPattern, withLatestFrom, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, switchMap as switchMap$1, shareReplay as shareReplay$1, catchError as catchError$1, empty, forkJoin, interval, skip as skip$1, debounceTime as debounceTime$1 } from 'rxjs';
 import { map, distinctUntilChanged, filter, startWith, switchMap, shareReplay, take, scan, takeUntil, tap, catchError, debounceTime, share, first as first$1, retryWhen, delay, concatMap, mergeMap as mergeMap$1, debounce, sample, withLatestFrom as withLatestFrom$1, every as every$1, toArray, merge as merge$1, expand, mapTo, skip, reduce, finalize, combineLatestWith } from 'rxjs/operators';
 import * as i1 from '@c8y/client';
 import { InventoryService, OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BasicAuth, CookieAuth, Realtime, FetchClient, BearerAuthFromSessionStorage, FeatureService, ApplicationAvailability, QueriesUtil, Client, PasswordStrength, AlarmService, TenantService, ApplicationService, UserService, aggregationType, Service, Paging } from '@c8y/client';
@@ -2971,6 +2971,18 @@ const MESSAGES_CORE_I18N = {
         placeholders: {
             revokedSerials: '$1'
         }
+    },
+    "^Certificate serial number hex: '(.+?)'.*$": {
+        gettext: gettext$1('Certificate serial number: "{{ serialNumber }}"'),
+        placeholders: {
+            serialNumber: '$1'
+        }
+    },
+    '^Tenant certificate authority\\(CA\\) signed certificate for device: (.+?)\\.$': {
+        gettext: gettext$1('Tenant certificate authority (CA) signed certificate for device: "{{ deviceId }}".'),
+        placeholders: {
+            deviceId: '$1'
+        }
     }
 };
 
@@ -8805,6 +8817,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+/**
+ * Pipe that strips HTML tags from a string.
+ *
+ * Useful for creating plain text versions of HTML content,
+ * such as for aria-labels or other accessibility attributes.
+ *
+ * @example
+ * ```html
+ * <div [attr.aria-label]="htmlContent | stripHtml">
+ *   <div [innerHTML]="htmlContent"></div>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * const html = '<p>Hello <strong>world</strong></p>';
+ * // Result: 'Hello world'
+ * ```
+ */
+class StripHtmlPipe {
+    /**
+     * Strips HTML tags from the input string.
+     *
+     * @param value - The HTML string to process
+     * @returns Plain text with HTML tags removed
+     */
+    transform(value) {
+        if (!value) {
+            return '';
+        }
+        const tmp = document.createElement('div');
+        tmp.innerHTML = value;
+        return tmp.textContent || tmp.innerText || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StripHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: StripHtmlPipe, isStandalone: true, name: "stripHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StripHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'stripHtml',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+/**
+ * Icon Panel Component
+ *
+ * Displays information in a grid of bordered panels, each with an icon, label, and content.
+ * Useful for showing structured metadata, device information, connection status, etc.
+ *
+ * @example
+ * ```typescript
+ * sections: IconPanelSection[] = [
+ *   {
+ *     id: 'device-info',
+ *     label: 'Device Information',
+ *     icon: 'c8y-device',
+ *     visible: true,
+ *     content: '<p>Device ID: THM-001</p><p>Type: Sensor</p>',
+ *     colClass: 'col-xs-12 col-md-6'
+ *   },
+ *   {
+ *     id: 'status',
+ *     label: 'Status',
+ *     icon: 'c8y-connection',
+ *     visible: true,
+ *     content: 'Connected',
+ *     colClass: 'col-xs-12 col-md-6'
+ *   }
+ * ];
+ * ```
+ *
+ * ```html
+ * <c8y-icon-panel [sections]="sections"></c8y-icon-panel>
+ * ```
+ *
+ * You can also project additional content:
+ * ```html
+ * <c8y-icon-panel [sections]="sections">
+ *   <div class="col-xs-12">
+ *     <p>Additional custom content here</p>
+ *   </div>
+ * </c8y-icon-panel>
+ * ```
+ */
+class IconPanelComponent {
+    constructor() {
+        /**
+         * Array of sections to display in the panel
+         */
+        this.sections = [];
+        /**
+         * Accessible label for the icon panel region.
+         */
+        this.ariaLabel = 'Information sections';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: IconPanelComponent, isStandalone: true, selector: "c8y-icon-panel", inputs: { sections: "sections", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div\n  class=\"d-flex row tight-grid flex-wrap a-i-stretch\"\n  [attr.aria-label]=\"ariaLabel | translate\"\n  role=\"region\"\n  data-cy=\"c8y-icon-panel\"\n>\n  @for (section of sections; track section.id) {\n    @if (section.visible) {\n      <div\n        class=\"d-flex m-b-8\"\n        [attr.aria-label]=\"\n          (section.label | translate) + ': ' + (section.content | translate | stripHtml)\n        \"\n        role=\"definition\"\n        [ngClass]=\"section.colClass || 'col-xs-12 col-md-6'\"\n        [attr.data-cy]=\"section.dataCy\"\n      >\n        <div [ngClass]=\"section.containerClass || 'border-all fit-w d-flex'\">\n          <div class=\"p-8\">\n            <i\n              [class]=\"'icon-24  m-t-4 c8y-icon ' + (section.iconClass || '')\"\n              [c8yIcon]=\"section.icon\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n          <div class=\"p-t-8 p-b-8 p-r-8 flex-grow\">\n            <p class=\"text-label-small m-b-4\">{{ section.label | translate }}</p>\n            <div\n              class=\"small fit-w\"\n              [innerHTML]=\"section.content | translate\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-icon-panel', standalone: true, imports: [NgClass, C8yTranslatePipe, IconDirective, StripHtmlPipe], template: "<div\n  class=\"d-flex row tight-grid flex-wrap a-i-stretch\"\n  [attr.aria-label]=\"ariaLabel | translate\"\n  role=\"region\"\n  data-cy=\"c8y-icon-panel\"\n>\n  @for (section of sections; track section.id) {\n    @if (section.visible) {\n      <div\n        class=\"d-flex m-b-8\"\n        [attr.aria-label]=\"\n          (section.label | translate) + ': ' + (section.content | translate | stripHtml)\n        \"\n        role=\"definition\"\n        [ngClass]=\"section.colClass || 'col-xs-12 col-md-6'\"\n        [attr.data-cy]=\"section.dataCy\"\n      >\n        <div [ngClass]=\"section.containerClass || 'border-all fit-w d-flex'\">\n          <div class=\"p-8\">\n            <i\n              [class]=\"'icon-24  m-t-4 c8y-icon ' + (section.iconClass || '')\"\n              [c8yIcon]=\"section.icon\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n          <div class=\"p-t-8 p-b-8 p-r-8 flex-grow\">\n            <p class=\"text-label-small m-b-4\">{{ section.label | translate }}</p>\n            <div\n              class=\"small fit-w\"\n              [innerHTML]=\"section.content | translate\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { sections: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
 class GeoService {
     constructor() {
         this.C8Y_POSITION_FRAGMENT = 'c8y_Position';
@@ -11731,6 +11853,55 @@ class DynamicBulkIIdentifiedResolver extends DynamicBulkDetailsResolver {
     }
 }
 
+class MOChunkLoaderService {
+    constructor(inventory) {
+        this.inventory = inventory;
+    }
+    async processInChunks(ids, chunkSize, loadChunkFn) {
+        if (!ids.length) {
+            return { results: [], errors: [] };
+        }
+        const promiseArray = [];
+        const idsCopy = [...ids];
+        while (idsCopy.length) {
+            const batch = idsCopy.splice(0, chunkSize);
+            promiseArray.push(loadChunkFn(batch));
+        }
+        const chunkResults = await Promise.all(promiseArray);
+        const results = chunkResults.flatMap(r => r.managedObjects);
+        const errors = chunkResults.flatMap(r => r.errors);
+        return { results, errors };
+    }
+    async loadAChunkOfManagedObjectsBase(uniqIds, inventory, pageSize, getStatusDetails, queryFilter) {
+        const { data: managedObjects } = await inventory.list(Object.assign({}, queryFilter || {}, {
+            ids: uniqIds.join(),
+            pageSize
+        }));
+        const notFoundMOs = uniqIds.filter(id => !managedObjects.find(tmp => tmp.id === id));
+        if (notFoundMOs.length) {
+            const promArray = notFoundMOs.map(id => getStatusDetails(id));
+            const res = await Promise.all(promArray);
+            return { managedObjects, errors: res };
+        }
+        return { managedObjects, errors: [] };
+    }
+    async getStatusDetails(moId) {
+        try {
+            const res = await this.inventory.detail(moId);
+            return { id: moId, ...pick(res.res, ['status', 'statusText']) };
+        }
+        catch (e) {
+            return { id: moId, ...pick(e.res, ['status', 'statusText']) };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MOChunkLoaderService, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MOChunkLoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MOChunkLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.InventoryService }] });
+
 /**
  * A DynamicDetailsResolver responsible to resolve managedObjects for dynamic components.
  * This service implements bulk resolving. This reduces the number of requests made to
@@ -11875,55 +12046,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class MOChunkLoaderService {
-    constructor(inventory) {
-        this.inventory = inventory;
-    }
-    async processInChunks(ids, chunkSize, loadChunkFn) {
-        if (!ids.length) {
-            return { results: [], errors: [] };
-        }
-        const promiseArray = [];
-        const idsCopy = [...ids];
-        while (idsCopy.length) {
-            const batch = idsCopy.splice(0, chunkSize);
-            promiseArray.push(loadChunkFn(batch));
-        }
-        const chunkResults = await Promise.all(promiseArray);
-        const results = chunkResults.flatMap(r => r.managedObjects);
-        const errors = chunkResults.flatMap(r => r.errors);
-        return { results, errors };
-    }
-    async loadAChunkOfManagedObjectsBase(uniqIds, inventory, pageSize, getStatusDetails, queryFilter) {
-        const { data: managedObjects } = await inventory.list(Object.assign({}, queryFilter || {}, {
-            ids: uniqIds.join(),
-            pageSize
-        }));
-        const notFoundMOs = uniqIds.filter(id => !managedObjects.find(tmp => tmp.id === id));
-        if (notFoundMOs.length) {
-            const promArray = notFoundMOs.map(id => getStatusDetails(id));
-            const res = await Promise.all(promArray);
-            return { managedObjects, errors: res };
-        }
-        return { managedObjects, errors: [] };
-    }
-    async getStatusDetails(moId) {
-        try {
-            const res = await this.inventory.detail(moId);
-            return { id: moId, ...pick(res.res, ['status', 'statusText']) };
-        }
-        catch (e) {
-            return { id: moId, ...pick(e.res, ['status', 'statusText']) };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MOChunkLoaderService, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MOChunkLoaderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MOChunkLoaderService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.InventoryService }] });
-
 class AppSwitcherService {
     constructor(ui) {
         this.ui = ui;
@@ -29186,7 +29308,7 @@ class DashboardChildChange {
         this.child = childToChange;
     }
     get resize$() {
-        return this.child.dragSource.moved.pipe(map(move => this.getPixelSize(move)), tap(resizeDimension => this.setPixelSize(resizeDimension)), map(resizeDimension => this.getDimensionSize(resizeDimension)), distinctUntilChanged((prev, next) => prev.width === next.width && prev.height === next.height), map(dimension => this.setDimension(dimension)), tap(() => console.log('Resize dimension:', this.child)), this.arrangePipe());
+        return this.child.dragSource.moved.pipe(map(move => this.getPixelSize(move)), tap(resizeDimension => this.setPixelSize(resizeDimension)), map(resizeDimension => this.getDimensionSize(resizeDimension)), distinctUntilChanged((prev, next) => prev.width === next.width && prev.height === next.height), map(dimension => this.setDimension(dimension)), this.arrangePipe());
     }
     get drag$() {
         return this.child.dragSource.moved.pipe(map(move => this.getDimensionPosition(move)), filter(dimension => dimension.x >= 0 &&
@@ -37594,9 +37716,22 @@ class RealtimeMessage {
 }
 
 /**
- * A resizable grid component with two columns (A and B).
- * Allows the user to resize columns by dragging the divider.
- * Supports collapse/expand logic and persistent width via localStorage.
+ * Resizable Grid Component
+ *
+ * Provides a flexible layout with two adjustable columns separated by a draggable divider.
+ *
+ * ## Basic Usage
+ *
+ * ```html
+ * <c8y-resizable-grid
+ *   [leftColumnWidth]="'50%'"
+ *   [collapseThreshold]="320"
+ *   [collapsible]="true"
+ *   [trackId]="'my-layout'">
+ *   <div #colA>Left column content</div>
+ *   <div #colB>Right column content</div>
+ * </c8y-resizable-grid>
+ * ```
  */
 class ResizableGridComponent {
     /**
@@ -37627,6 +37762,10 @@ class ResizableGridComponent {
          * Minimum width (in pixels) before a column is considered collapsed.
          */
         this.collapseThreshold = 320;
+        /**
+         * If true, columns can collapse below the threshold. If false, columns stop at the threshold.
+         */
+        this.collapsible = true;
         /**
          * True if the user is currently resizing the grid.
          */
@@ -37813,10 +37952,12 @@ class ResizableGridComponent {
         if (!this.colA || !this.colB) {
             return;
         }
-        let newWidthPx = Math.max(0, targetWidthPx);
         const totalWidth = this.colA.nativeElement.parentElement?.offsetWidth || window.innerWidth;
-        const minColBWidthPx = 0; // Allow colB to go down to 0 for collapsing
-        newWidthPx = Math.min(newWidthPx, totalWidth - minColBWidthPx);
+        // If not collapsible, enforce the threshold as the minimum
+        const minWidthPx = this.collapsible ? 0 : this.collapseThreshold;
+        const maxWidthPx = this.collapsible ? totalWidth : totalWidth - this.collapseThreshold;
+        let newWidthPx = Math.max(minWidthPx, targetWidthPx);
+        newWidthPx = Math.min(newWidthPx, maxWidthPx);
         const newWidthString = `${newWidthPx}px`;
         this._colAWidth = newWidthString;
         // Update lastKnownNonCollapsedWidth during drag, regardless of trackId
@@ -37844,25 +37985,38 @@ class ResizableGridComponent {
         const colANative = this.colA.nativeElement;
         const colBNative = this.colB.nativeElement;
         this.removeCollapseClasses();
-        if (colAWidth < this.collapseThreshold) {
-            this.renderer.addClass(colANative, 'collapsed');
-            this.renderer.addClass(colBNative, 'expanded');
-            this._colAWidth = '0px';
-        }
-        else if (colBWidth < this.collapseThreshold) {
-            this.renderer.addClass(colBNative, 'collapsed');
-            this.renderer.addClass(colANative, 'expanded');
-            this._colAWidth = '100%';
+        // Only apply collapse logic if collapsible is true
+        if (this.collapsible) {
+            if (colAWidth < this.collapseThreshold) {
+                this.renderer.addClass(colANative, 'collapsed');
+                this.renderer.addClass(colBNative, 'expanded');
+                this._colAWidth = '0px';
+            }
+            else if (colBWidth < this.collapseThreshold) {
+                this.renderer.addClass(colBNative, 'collapsed');
+                this.renderer.addClass(colANative, 'expanded');
+                this._colAWidth = '100%';
+            }
+            else {
+                // If neither is collapsed, restore the last known non-collapsed width.
+                // This will be the actual width from the drag, or the localStorage value.
+                this._colAWidth = this.lastKnownNonCollapsedWidth || this.leftColumnWidth;
+                if (this.trackId) {
+                    // Ensure localStorage is up-to-date if no collapse occurred.
+                    const saved = localStorage.getItem(this.trackId);
+                    if (saved !== this._colAWidth) {
+                        // Only write if different
+                        localStorage.setItem(this.trackId, this._colAWidth);
+                    }
+                }
+            }
         }
         else {
-            // If neither is collapsed, restore the last known non-collapsed width.
-            // This will be the actual width from the drag, or the localStorage value.
+            // When not collapsible, just maintain the current width without collapse
             this._colAWidth = this.lastKnownNonCollapsedWidth || this.leftColumnWidth;
             if (this.trackId) {
-                // Ensure localStorage is up-to-date if no collapse occurred.
                 const saved = localStorage.getItem(this.trackId);
                 if (saved !== this._colAWidth) {
-                    // Only write if different
                     localStorage.setItem(this.trackId, this._colAWidth);
                 }
             }
@@ -37883,7 +38037,7 @@ class ResizableGridComponent {
         this.renderer.removeClass(colBNative, 'expanded');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ResizableGridComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ResizableGridComponent, isStandalone: true, selector: "c8y-resizable-grid", inputs: { leftColumnWidth: "leftColumnWidth", trackId: "trackId", collapseThreshold: "collapseThreshold" }, host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp()" }, properties: { "class.is-resizing": "this.isResizing", "style.--col-a-width": "this._colAWidth" } }, viewQueries: [{ propertyName: "colA", first: true, predicate: ["colA"], descendants: true }, { propertyName: "colB", first: true, predicate: ["colB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"resizable-grid-container\" [class.is-resizing]=\"isResizing\">\n  <div #colA class=\"col-a\" [id]=\"colAId\">\n    <!-- Content for the left column goes here -->\n    <ng-content select=\"[left-pane]\"></ng-content>\n  </div>\n  <div\n    class=\"resizer\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    [attr.aria-controls]=\"colAId + ' ' + colBId\"\n    [attr.aria-label]=\"'Resize columns' | translate\"\n    [attr.aria-valuenow]=\"colAWidthPercent\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <i class=\"dlt-c8y-icon-arrow-circle-divide-horizontal\"></i>\n  </div>\n  <div #colB class=\"col-b\" [id]=\"colBId\">\n    <!-- Content for the right column goes here -->\n    <ng-content select=\"[right-pane]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ResizableGridComponent, isStandalone: true, selector: "c8y-resizable-grid", inputs: { leftColumnWidth: "leftColumnWidth", trackId: "trackId", collapseThreshold: "collapseThreshold", collapsible: "collapsible" }, host: { listeners: { "window:mousemove": "onMouseMove($event)", "window:mouseup": "onMouseUp()" }, properties: { "class.is-resizing": "this.isResizing", "style.--col-a-width": "this._colAWidth" } }, viewQueries: [{ propertyName: "colA", first: true, predicate: ["colA"], descendants: true }, { propertyName: "colB", first: true, predicate: ["colB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"resizable-grid-container\" [class.is-resizing]=\"isResizing\">\n  <div #colA class=\"col-a\" [id]=\"colAId\">\n    <!-- Content for the left column goes here -->\n    <ng-content select=\"[left-pane]\"></ng-content>\n  </div>\n  <div\n    class=\"resizer\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    [attr.aria-controls]=\"colAId + ' ' + colBId\"\n    [attr.aria-label]=\"'Resize columns' | translate\"\n    [attr.aria-valuenow]=\"colAWidthPercent\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <i class=\"dlt-c8y-icon-arrow-circle-divide-horizontal\"></i>\n  </div>\n  <div #colB class=\"col-b\" [id]=\"colBId\">\n    <!-- Content for the right column goes here -->\n    <ng-content select=\"[right-pane]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ResizableGridComponent, decorators: [{
             type: Component,
@@ -37894,6 +38048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], collapseThreshold: [{
                 type: Input
+            }], collapsible: [{
+                type: Input
             }], colA: [{
                 type: ViewChild,
                 args: ['colA']
@@ -38123,6 +38279,891 @@ function colorValidator(allowedModes) {
     };
 }
 
+/**
+ * Displays a row of action buttons in the split view details panel.
+ * Renders buttons based on the provided action configurations with support for:
+ * - Icons and translatable labels
+ * - Disabled and visibility states
+ * - Product experience analytics tracking
+ * - Custom tooltips and styling
+ *
+ * @example
+ * ```html
+ * <c8y-sv-details-actions [actions]="detailActions"></c8y-sv-details-actions>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * detailActions: SplitViewAction[] = [
+ *   {
+ *     id: 'edit',
+ *     label: 'Edit',
+ *     icon: 'pencil',
+ *     class: 'btn btn-primary',
+ *     action: () => this.editItem(),
+ *     title: 'Edit this item'
+ *   },
+ *   {
+ *     id: 'delete',
+ *     label: 'Delete',
+ *     icon: 'trash',
+ *     class: 'btn btn-danger',
+ *     action: () => this.deleteItem(),
+ *     productExperience: {
+ *       actionName: 'delete_item',
+ *       actionData: { itemType: 'device' }
+ *     }
+ *   }
+ * ];
+ * ```
+ */
+class SplitViewDetailsActionsComponent {
+    constructor() {
+        /**
+         * Array of action configurations to display as buttons.
+         * Buttons are rendered in the order provided.
+         */
+        this.actions = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewDetailsActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SplitViewDetailsActionsComponent, isStandalone: true, selector: "c8y-sv-details-actions", inputs: { actions: "actions" }, ngImport: i0, template: "<div\n  class=\"d-flex gap-8 a-i-center\"\n  [attr.aria-label]=\"'Actions' | translate\"\n  role=\"group\"\n  data-cy=\"c8y-sv-details-actions\"\n>\n  @for (action of actions; track action.id) {\n    @if (action.visible !== false) {\n      <button\n        [title]=\"action.title ? (action.title | translate) : null\"\n        [attr.aria-label]=\"action.title ? (action.title | translate) : (action.label | translate)\"\n        [attr.aria-disabled]=\"action.disabled ? 'true' : 'false'\"\n        type=\"button\"\n        [ngClass]=\"action.class || ''\"\n        [disabled]=\"action.disabled || false\"\n        [attr.data-cy]=\"action.dataCy\"\n        (click)=\"action.action()\"\n        c8yProductExperience\n        [actionName]=\"action.productExperience?.actionName\"\n        [actionData]=\"action.productExperience?.actionData\"\n      >\n        <i\n          [c8yIcon]=\"action.icon\"\n          aria-hidden=\"true\"\n          [ngClass]=\"action.iconClass || ''\"\n        ></i>\n        {{ action.label | translate }}\n      </button>\n    }\n  }\n\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewDetailsActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-sv-details-actions', standalone: true, imports: [NgClass, C8yTranslatePipe, IconDirective, ProductExperienceDirective], template: "<div\n  class=\"d-flex gap-8 a-i-center\"\n  [attr.aria-label]=\"'Actions' | translate\"\n  role=\"group\"\n  data-cy=\"c8y-sv-details-actions\"\n>\n  @for (action of actions; track action.id) {\n    @if (action.visible !== false) {\n      <button\n        [title]=\"action.title ? (action.title | translate) : null\"\n        [attr.aria-label]=\"action.title ? (action.title | translate) : (action.label | translate)\"\n        [attr.aria-disabled]=\"action.disabled ? 'true' : 'false'\"\n        type=\"button\"\n        [ngClass]=\"action.class || ''\"\n        [disabled]=\"action.disabled || false\"\n        [attr.data-cy]=\"action.dataCy\"\n        (click)=\"action.action()\"\n        c8yProductExperience\n        [actionName]=\"action.productExperience?.actionName\"\n        [actionData]=\"action.productExperience?.actionData\"\n      >\n        <i\n          [c8yIcon]=\"action.icon\"\n          aria-hidden=\"true\"\n          [ngClass]=\"action.iconClass || ''\"\n        ></i>\n        {{ action.label | translate }}\n      </button>\n    }\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }] } });
+
+/**
+ * Extra header component for split view details.
+ * Provides a flexible content projection area below the main header.
+ *
+ * Use this component to add custom content like metadata, status information,
+ * or any other details you want to display at the top of the details panel.
+ *
+ * @example
+ * ```html
+ * <c8y-sv-details>
+ *   <c8y-sv-extra-header>
+ *     <div class="row p-16">
+ *       <div class="col-sm-6">
+ *         <label>Device ID:</label>
+ *         <span>{{ device.id }}</span>
+ *       </div>
+ *       <div class="col-sm-6">
+ *         <label>Status:</label>
+ *         <span>{{ device.status }}</span>
+ *       </div>
+ *     </div>
+ *   </c8y-sv-extra-header>
+ * </c8y-sv-details>
+ * ```
+ */
+class SplitViewExtraHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewExtraHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SplitViewExtraHeaderComponent, isStandalone: true, selector: "c8y-sv-extra-header", host: { classAttribute: "d-contents" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewExtraHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-sv-extra-header',
+                    template: '<ng-content></ng-content>',
+                    host: { class: 'd-contents' },
+                    standalone: true
+                }]
+        }] });
+
+class SplitViewFooterComponent {
+    constructor() {
+        this.cssClass = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SplitViewFooterComponent, isStandalone: true, selector: "c8y-sv-footer", inputs: { cssClass: "cssClass" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div\n  class=\"card-footer separator-top fit-w sticky-bottom m-t-auto bg-inherit\"\n  [ngClass]=\"cssClass\"\n  data-cy=\"c8y-sv-footer\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-sv-footer', host: { class: 'd-contents' }, standalone: true, imports: [NgClass], template: "<div\n  class=\"card-footer separator-top fit-w sticky-bottom m-t-auto bg-inherit\"\n  [ngClass]=\"cssClass\"\n  data-cy=\"c8y-sv-footer\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { cssClass: [{
+                type: Input
+            }] } });
+
+/**
+ * Service to manage selection state in split view components.
+ * Provides methods to select/deselect items and track selection state.
+ */
+class SplitViewSelectionService {
+    constructor() {
+        this._selectedItem$ = new BehaviorSubject(null);
+    }
+    ngOnDestroy() {
+        this._selectedItem$.complete();
+    }
+    /**
+     * Observable of the currently selected item
+     */
+    get selectedItem$() {
+        return this._selectedItem$.asObservable();
+    }
+    /**
+     * Get the current selected item value
+     */
+    get selectedItem() {
+        return this._selectedItem$.value;
+    }
+    /**
+     * Check if an item is currently selected
+     */
+    get hasSelection() {
+        return this._selectedItem$.value !== null;
+    }
+    /**
+     * Select an item
+     */
+    select(item) {
+        this._selectedItem$.next(item);
+    }
+    /**
+     * Clear the current selection
+     */
+    clearSelection() {
+        this._selectedItem$.next(null);
+    }
+    /**
+     * Check if a specific item is selected
+     */
+    isSelected(item) {
+        return this._selectedItem$.value === item;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewSelectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewSelectionService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Split View Details Component
+ *
+ * Displays the details panel of a split-view layout.
+ *
+ * ## Basic Usage
+ *
+ * ```html
+ * <c8y-sv-details
+ *   emptyStateIcon="c8y-devices"
+ *   emptyStateTitle="No device selected"
+ *   emptyStateSubtitle="Select a device to view details">
+ *
+ *   @if (selectedItem) {
+ *     <c8y-sv-extra-header>
+ *       <c8y-icon-panel [sections]="sections"></c8y-icon-panel>
+ *     </c8y-sv-extra-header>
+ *   }
+ *
+ *   @if (selectedItem) {
+ *     <h3>{{ selectedItem.name }}</h3>
+ *     <p>{{ selectedItem.description }}</p>
+ *   }
+ * </c8y-sv-details>
+ * ```
+ *
+ * ## Router-Outlet Integration
+ *
+ * ```html
+ * <c8y-sv-details (backClick)="handleBackClick()">
+ *   <router-outlet></router-outlet>
+ * </c8y-sv-details>
+ * ```
+ *
+ * ```typescript
+ * async handleBackClick(): Promise<void> {
+ *   await this.alarmsViewService.closeDetailsView(this.activatedRoute);
+ * }
+ * ```
+ */
+class SplitViewDetailsComponent {
+    constructor(selectionService, location, cdr) {
+        this.selectionService = selectionService;
+        this.location = location;
+        this.cdr = cdr;
+        this.destroyRef = inject(DestroyRef);
+        this._routerOutletActivated = false;
+        /**
+         * Aria label for the details panel region.
+         */
+        this.ariaLabel = gettext$1('Details panel');
+        /**
+         * Custom CSS classes
+         */
+        this.cssClass = '';
+        /**
+         * Empty state icon when nothing is selected
+         */
+        this.emptyStateIcon = 'c8y-alert-idle';
+        /**
+         * Empty state title when nothing is selected
+         */
+        this.emptyStateTitle = gettext$1('No item selected');
+        /**
+         * Empty state subtitle when nothing is selected
+         */
+        this.emptyStateSubtitle = gettext$1('Select an item from the list to view details');
+        /**
+         * Emits when the back button is clicked.
+         * Allows parent components to handle custom navigation logic.
+         * If not handled, default behavior (location.back or clearSelection) is used.
+         */
+        this.backClick = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        // Listen to router outlet activation/deactivation events directly
+        if (this.routerOutlet) {
+            // Set initial state and mark for check
+            this._routerOutletActivated = !!this.routerOutlet.isActivated;
+            this.cdr?.markForCheck();
+            // Subscribe to activation events
+            this.routerOutlet.activateEvents.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                this._routerOutletActivated = true;
+                this.cdr?.markForCheck();
+            });
+            // Subscribe to deactivation events
+            this.routerOutlet.deactivateEvents.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                this._routerOutletActivated = false;
+                this.cdr?.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.backClick.complete();
+    }
+    get hasExtraHeader() {
+        return !!this.extraHeaderComponent;
+    }
+    get hasActions() {
+        return !!this.actionsComponent;
+    }
+    get hasFooter() {
+        return !!this.footerComponent;
+    }
+    /**
+     * Check if an item is selected or if router-outlet is activated
+     */
+    get hasSelection() {
+        // Check selection service first
+        if (this.selectionService?.hasSelection) {
+            return true;
+        }
+        // Check router outlet activation state (updated via outlet events)
+        return this._routerOutletActivated;
+    }
+    /**
+     * Clear the current selection (back button handler).
+     * Emits backClick event for parent to handle, or uses default behavior:
+     * - Router-outlet: navigates back using browser history
+     * - Selection service: clears the selection
+     */
+    clearSelection() {
+        // Emit event for parent to handle
+        if (this.backClick.observed) {
+            this.backClick.emit();
+        }
+        // Default behavior: If using router-outlet, go back in history
+        else if (this.routerOutlet?.isActivated && this.location) {
+            this.location.back();
+        }
+        // Otherwise clear selection service
+        else {
+            this.selectionService?.clearSelection();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewDetailsComponent, deps: [{ token: SplitViewSelectionService, optional: true }, { token: i1$a.Location, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SplitViewDetailsComponent, isStandalone: true, selector: "c8y-sv-details", inputs: { title: "title", ariaLabel: "ariaLabel", cssClass: "cssClass", emptyStateIcon: "emptyStateIcon", emptyStateTitle: "emptyStateTitle", emptyStateSubtitle: "emptyStateSubtitle" }, outputs: { backClick: "backClick" }, host: { classAttribute: "d-contents" }, queries: [{ propertyName: "extraHeaderComponent", first: true, predicate: SplitViewExtraHeaderComponent, descendants: true }, { propertyName: "actionsComponent", first: true, predicate: SplitViewDetailsActionsComponent, descendants: true }, { propertyName: "footerComponent", first: true, predicate: SplitViewFooterComponent, descendants: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true }], ngImport: i0, template: "<div\n  class=\"inner-scroll fit-h d-col fit-w split-view__detail\"\n  [class.split-view__detail--selected]=\"hasSelection\"\n  [attr.aria-label]=\"ariaLabel | translate\"\n  role=\"region\"\n  [ngClass]=\"cssClass\"\n  data-cy=\"c8y-sv-details\"\n>\n  <!-- Back button for mobile/tablet -->\n  @if (hasSelection) {\n    <div class=\"card-header separator sticky-top visible-sm visible-xs\">\n      <button\n        class=\"btn btn-clean text-primary\"\n        [title]=\"'Back' | translate\"\n        [attr.aria-label]=\"'Back' | translate\"\n        type=\"button\"\n        (click)=\"clearSelection()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n    </div>\n  }\n  <!-- Content when item is selected -->\n  @if (title || hasExtraHeader) {\n    <div\n      class=\"p-l-24 p-r-24 card-header flex-no-shrink sticky-top bg-component separator\"\n      [ngClass]=\"{ 'flex-wrap': hasExtraHeader, 'gap-8': hasExtraHeader && title }\"\n    >\n      <h4 class=\"card-title\">{{ title | translate }}</h4>\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasExtraHeader) {\n        <div class=\"details-info fit-w\">\n          <ng-content select=\"c8y-sv-extra-header\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n  <!-- Empty state when nothing is selected -->\n  @if (!hasSelection) {\n    <div class=\"d-flex a-i-center j-c-center flex-grow p-24\">\n      <c8y-ui-empty-state\n        [icon]=\"emptyStateIcon\"\n        [title]=\"emptyStateTitle\"\n        [subtitle]=\"emptyStateSubtitle\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n  <!-- Content when item is selected -->\n  @if (hasSelection) {\n    <div\n      class=\"p-24\"\n      [ngClass]=\"{ 'p-t-0': !title && !hasExtraHeader }\"\n    >\n      <div class=\"details-content\">\n        <ng-content\n          select=\":not(c8y-sv-extra-header):not(c8y-sv-details-actions):not(c8y-sv-footer):not(c8y-sv-header-actions)\"\n        ></ng-content>\n      </div>\n\n      @if (hasActions) {\n        <div class=\"details-actions\">\n          <ng-content select=\"c8y-sv-details-actions\"></ng-content>\n        </div>\n      }\n    </div>\n    @if (hasFooter) {\n      <ng-content select=\"c8y-sv-footer\"></ng-content>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-sv-details', host: { class: 'd-contents' }, standalone: true, imports: [NgClass, C8yTranslatePipe, EmptyStateComponent, IconDirective], template: "<div\n  class=\"inner-scroll fit-h d-col fit-w split-view__detail\"\n  [class.split-view__detail--selected]=\"hasSelection\"\n  [attr.aria-label]=\"ariaLabel | translate\"\n  role=\"region\"\n  [ngClass]=\"cssClass\"\n  data-cy=\"c8y-sv-details\"\n>\n  <!-- Back button for mobile/tablet -->\n  @if (hasSelection) {\n    <div class=\"card-header separator sticky-top visible-sm visible-xs\">\n      <button\n        class=\"btn btn-clean text-primary\"\n        [title]=\"'Back' | translate\"\n        [attr.aria-label]=\"'Back' | translate\"\n        type=\"button\"\n        (click)=\"clearSelection()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n    </div>\n  }\n  <!-- Content when item is selected -->\n  @if (title || hasExtraHeader) {\n    <div\n      class=\"p-l-24 p-r-24 card-header flex-no-shrink sticky-top bg-component separator\"\n      [ngClass]=\"{ 'flex-wrap': hasExtraHeader, 'gap-8': hasExtraHeader && title }\"\n    >\n      <h4 class=\"card-title\">{{ title | translate }}</h4>\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasExtraHeader) {\n        <div class=\"details-info fit-w\">\n          <ng-content select=\"c8y-sv-extra-header\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n  <!-- Empty state when nothing is selected -->\n  @if (!hasSelection) {\n    <div class=\"d-flex a-i-center j-c-center flex-grow p-24\">\n      <c8y-ui-empty-state\n        [icon]=\"emptyStateIcon\"\n        [title]=\"emptyStateTitle\"\n        [subtitle]=\"emptyStateSubtitle\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n  <!-- Content when item is selected -->\n  @if (hasSelection) {\n    <div\n      class=\"p-24\"\n      [ngClass]=\"{ 'p-t-0': !title && !hasExtraHeader }\"\n    >\n      <div class=\"details-content\">\n        <ng-content\n          select=\":not(c8y-sv-extra-header):not(c8y-sv-details-actions):not(c8y-sv-footer):not(c8y-sv-header-actions)\"\n        ></ng-content>\n      </div>\n\n      @if (hasActions) {\n        <div class=\"details-actions\">\n          <ng-content select=\"c8y-sv-details-actions\"></ng-content>\n        </div>\n      }\n    </div>\n    @if (hasFooter) {\n      <ng-content select=\"c8y-sv-footer\"></ng-content>\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: SplitViewSelectionService, decorators: [{
+                    type: Optional
+                }] }, { type: i1$a.Location, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], emptyStateIcon: [{
+                type: Input
+            }], emptyStateTitle: [{
+                type: Input
+            }], emptyStateSubtitle: [{
+                type: Input
+            }], backClick: [{
+                type: Output
+            }], extraHeaderComponent: [{
+                type: ContentChild,
+                args: [SplitViewExtraHeaderComponent]
+            }], actionsComponent: [{
+                type: ContentChild,
+                args: [SplitViewDetailsActionsComponent]
+            }], footerComponent: [{
+                type: ContentChild,
+                args: [SplitViewFooterComponent]
+            }], routerOutlet: [{
+                type: ContentChild,
+                args: [RouterOutlet]
+            }] } });
+
+const DEFAULT_RESIZABLE_CONFIG = Object.freeze({
+    collapseThreshold: 320,
+    leftColumnWidth: '50%',
+    trackId: 'c8y-sv-resizable-default',
+    collapsible: true
+});
+/**
+ * A responsive split view layout component with automatic selection management and resizable panes.
+ *
+ * #### Basic usage
+ *
+ *
+ * ```typescript
+ * export class MyComponent {
+ *   items: Device[] = [];
+ *   selectedItem?: Device;
+ *
+ *   onSelectionChange(item: Device | null) {
+ *     this.selectedItem = item || undefined;
+ *   }
+ * }
+ * ```
+ *
+ * ```html
+ * <c8y-sv (selectionChange)="onSelectionChange($event)">
+ *   <c8y-sv-list [title]="'Devices'">
+ *     <c8y-sv-header-actions>
+ *       <button class="btn btn-primary">Add Device</button>
+ *     </c8y-sv-header-actions>
+ *
+ *     @for (item of items; track item.id) {
+ *       <c8y-li [c8ySvListItem]="item">
+ *         {{ item.name }}
+ *       </c8y-li>
+ *     }
+ *
+ *     <c8y-sv-footer>
+ *       Total: {{ items.length }}
+ *     </c8y-sv-footer>
+ *   </c8y-sv-list>
+ *
+ *   <c8y-sv-details
+ *     emptyStateIcon="c8y-devices"
+ *     emptyStateTitle="No device selected"
+ *     emptyStateSubtitle="Select a device to view details">
+ *     @if (selectedItem) {
+ *       <c8y-sv-extra-header>
+ *         <c8y-icon-panel [sections]="sections"></c8y-icon-panel>
+ *       </c8y-sv-extra-header>
+ *     }
+ *
+ *     @if (selectedItem) {
+ *       <h3>{{ selectedItem.name }}</h3>
+ *       <p>{{ selectedItem.description }}</p>
+ *     }
+ *   </c8y-sv-details>
+ * </c8y-sv>
+ * ```
+ *
+ * #### Router-Outlet integration
+ *
+ * For components using Angular router:
+ *
+ * ```html
+ * <c8y-sv>
+ *   <c8y-alarms-list>...</c8y-alarms-list>
+ *
+ *   <c8y-sv-details (backClick)="handleBackClick()">
+ *     <router-outlet></router-outlet>
+ *   </c8y-sv-details>
+ * </c8y-sv>
+ * ```
+ *
+ * ```typescript
+ * async handleBackClick(): Promise<void> {
+ *   await this.alarmsViewService.closeDetailsView(this.activatedRoute);
+ * }
+ * ```
+ *
+ * #### Resizable configuration
+ *
+ * ```html
+ * <c8y-sv
+ *   [isResizable]="true"
+ *   [resizableBreakpoint]="991"
+ *   [resizableConfig]="{
+ *     trackId: 'my-split-view',
+ *     leftColumnWidth: '40%',
+ *     collapseThreshold: 320,
+ *     collapsible: false
+ *   }"
+ *   [initialSelection]="items[0]"
+ *   (selectionChange)="onSelectionChange($event)">
+ *   <!-- content -->
+ * </c8y-sv>
+ * ```
+ *
+ * #### List-Only mode
+ *
+ * Omit `<c8y-sv-details>` for a simple list view:
+ * ```html
+ * <c8y-sv>
+ *   <c8y-sv-list [title]="'Items'">
+ *     @for (item of items; track item.id) {
+ *       <c8y-li>{{ item.name }}</c8y-li>
+ *     }
+ *   </c8y-sv-list>
+ * </c8y-sv>
+ * ```
+ *
+ */
+class SplitViewComponent {
+    /**
+     * Configuration for resizable grid behavior.
+     *
+     * @property trackId - Unique ID for persisting column widths in localStorage
+     * @property leftColumnWidth - Initial width of left column (default: '50%')
+     * @property collapseThreshold - Width threshold (in px) for collapsing columns (default: 320)
+     * @property collapsible - Whether columns can collapse below threshold (default: true)
+     *
+     * @example
+     * ```html
+     * <c8y-sv [resizableConfig]="{
+     *   trackId: 'device-list-view',
+     *   leftColumnWidth: '40%',
+     *   collapseThreshold: 320,
+     *   collapsible: false
+     * }">
+     * ```
+     */
+    set resizableConfig(config) {
+        this._resizableConfig = config ?? {};
+        this.updateMemoizedResizableConfig();
+    }
+    get resizableConfig() {
+        return this._resizableConfig;
+    }
+    constructor(selectionService) {
+        this.selectionService = selectionService;
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * Whether to show a default router outlet in right-view if no right-view slot content provided.
+         * @default true
+         */
+        this.showDefaultRouterOutlet = true;
+        /**
+         * Enable resizable grid functionality with draggable divider.
+         * When `true`, users can resize the split panes by dragging the divider.
+         * Above `resizableBreakpoint`, the resizable grid is active.
+         * Below `resizableBreakpoint`, falls back to CSS-based responsive layout.
+         * @default true
+         */
+        this.isResizable = true;
+        /**
+         * Minimum window width (in pixels) required for resizable grid to be active.
+         * Below this width, the component switches to a stacked mobile layout.
+         * @default 991
+         */
+        this.resizableBreakpoint = 991;
+        /**
+         * Emits when the selected item changes.
+         * The event emits the selected item or `null` when selection is cleared.
+         *
+         * @example
+         * ```html
+         * <c8y-sv (selectionChange)="onSelectionChange($event)">
+         * ```
+         *
+         * ```typescript
+         * onSelectionChange(item: Device | null) {
+         *   this.selectedItem = item || undefined;
+         * }
+         * ```
+         */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Internal flag to track if current viewport width allows resizable grid
+         */
+        this._isResizableAtCurrentWidth = true;
+        this._resizableConfig = {};
+        this._memoizedResizableConfig = {
+            collapseThreshold: DEFAULT_RESIZABLE_CONFIG.collapseThreshold,
+            leftColumnWidth: DEFAULT_RESIZABLE_CONFIG.leftColumnWidth,
+            trackId: DEFAULT_RESIZABLE_CONFIG.trackId,
+            collapsible: DEFAULT_RESIZABLE_CONFIG.collapsible
+        };
+        this._checkViewportWidth();
+    }
+    ngOnInit() {
+        // Subscribe to selection changes and emit them
+        // Ignore the initial BehaviorSubject emission (null) so consumers only see
+        // real selection changes triggered by user interaction or inputs.
+        this.selectionService.selectedItem$
+            .pipe(skip$1(1), takeUntilDestroyed(this.destroyRef))
+            .subscribe(item => {
+            this.selectionChange.emit(item);
+        });
+        // Set initial selection if provided
+        if (this.initialSelection) {
+            this.selectionService.select(this.initialSelection);
+        }
+        // Debounced resize listener to prevent excessive change detection
+        fromEvent(window, 'resize')
+            .pipe(debounceTime$1(200), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this._checkViewportWidth();
+        });
+    }
+    ngOnDestroy() {
+        this.selectionChange.complete();
+    }
+    /**
+     * Checks if a details component is projected.
+     *
+     * Returns `true` when `<c8y-sv-details>` is present in the template.
+     * Returns `false` when `<c8y-sv-details>` is not present.
+     *
+     * @internal Used by the template to determine layout mode
+     */
+    get hasProjectedDetails() {
+        return !!this._detailsComp;
+    }
+    /**
+     * Determines if the resizable grid should be active.
+     *
+     * Returns `true` when all conditions are met:
+     * - `isResizable` is `true`
+     * - Current viewport width is above `resizableBreakpoint`
+     * - Details component is projected
+     *
+     * When `false`, falls back to CSS-based responsive layout.
+     *
+     * @internal Used by the template to conditionally render resizable grid
+     */
+    get shouldUseResizableGrid() {
+        return this.isResizable && this._isResizableAtCurrentWidth && this.hasProjectedDetails;
+    }
+    /**
+     * Returns the effective resizable configuration with all defaults applied.
+     * The configuration is memoized and updated only when inputs change.
+     *
+     * @internal Used by the template to pass config to resizable-grid component
+     */
+    get effectiveResizableConfig() {
+        return this._memoizedResizableConfig;
+    }
+    /**
+     * Returns CSS classes for the split view container element.
+     *
+     * Always includes: `['card', 'content-fullpage', 'grid__row--1']`
+     *
+     * Conditionally adds `'split-view--5-7'` when:
+     * - Details component is projected
+     * - Resizable grid is not active (below breakpoint or disabled)
+     *
+     * @returns Array of CSS class names
+     */
+    getContainerClasses() {
+        const classes = ['card', 'content-fullpage', 'grid__row--1'];
+        if (this.hasProjectedDetails && (!this.isResizable || !this._isResizableAtCurrentWidth)) {
+            classes.push('split-view--5-7');
+        }
+        return classes;
+    }
+    _checkViewportWidth() {
+        this._isResizableAtCurrentWidth = window.innerWidth > this.resizableBreakpoint;
+    }
+    updateMemoizedResizableConfig() {
+        const collapseThreshold = this._resizableConfig.collapseThreshold ?? DEFAULT_RESIZABLE_CONFIG.collapseThreshold;
+        const leftColumnWidth = this._resizableConfig.leftColumnWidth ?? DEFAULT_RESIZABLE_CONFIG.leftColumnWidth;
+        const trackId = this._resizableConfig.trackId ?? DEFAULT_RESIZABLE_CONFIG.trackId;
+        const collapsible = this._resizableConfig.collapsible ?? DEFAULT_RESIZABLE_CONFIG.collapsible;
+        const current = this._memoizedResizableConfig;
+        if (current.collapseThreshold !== collapseThreshold ||
+            current.leftColumnWidth !== leftColumnWidth ||
+            current.trackId !== trackId ||
+            current.collapsible !== collapsible) {
+            this._memoizedResizableConfig = { collapseThreshold, leftColumnWidth, trackId, collapsible };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewComponent, deps: [{ token: SplitViewSelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SplitViewComponent, isStandalone: true, selector: "c8y-sv", inputs: { showDefaultRouterOutlet: "showDefaultRouterOutlet", isResizable: "isResizable", initialSelection: "initialSelection", resizableBreakpoint: "resizableBreakpoint", resizableConfig: "resizableConfig" }, outputs: { selectionChange: "selectionChange" }, providers: [SplitViewSelectionService], queries: [{ propertyName: "_detailsComp", first: true, predicate: SplitViewDetailsComponent, descendants: true }], ngImport: i0, template: "<div\n  [attr.aria-label]=\"'Split view interface' | translate\"\n  tabindex=\"-1\"\n  role=\"main\"\n  [ngClass]=\"getContainerClasses()\"\n  data-cy=\"c8y-sv\"\n>\n  @if (shouldUseResizableGrid) {\n    <c8y-resizable-grid\n      [collapseThreshold]=\"effectiveResizableConfig.collapseThreshold\"\n      [collapsible]=\"effectiveResizableConfig.collapsible\"\n      [leftColumnWidth]=\"effectiveResizableConfig.leftColumnWidth\"\n      [trackId]=\"effectiveResizableConfig.trackId\"\n    >\n      <div left-pane>\n        <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n      </div>\n      <div right-pane>\n        <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n      </div>\n    </c8y-resizable-grid>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n    @if (showDefaultRouterOutlet && !hasProjectedDetails) {\n      <router-outlet class=\"d-contents\"></router-outlet>\n    }\n  }\n\n  <ng-template #listContent>\n    <ng-content select=\":not(c8y-sv-details)\"></ng-content>\n  </ng-template>\n\n  <ng-template #detailsContent>\n    @if (hasProjectedDetails) {\n      <ng-content select=\"c8y-sv-details\"></ng-content>\n    }\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-sv', standalone: true, imports: [CommonModule$1, RouterOutlet, C8yTranslatePipe, ResizableGridComponent], providers: [SplitViewSelectionService], template: "<div\n  [attr.aria-label]=\"'Split view interface' | translate\"\n  tabindex=\"-1\"\n  role=\"main\"\n  [ngClass]=\"getContainerClasses()\"\n  data-cy=\"c8y-sv\"\n>\n  @if (shouldUseResizableGrid) {\n    <c8y-resizable-grid\n      [collapseThreshold]=\"effectiveResizableConfig.collapseThreshold\"\n      [collapsible]=\"effectiveResizableConfig.collapsible\"\n      [leftColumnWidth]=\"effectiveResizableConfig.leftColumnWidth\"\n      [trackId]=\"effectiveResizableConfig.trackId\"\n    >\n      <div left-pane>\n        <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n      </div>\n      <div right-pane>\n        <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n      </div>\n    </c8y-resizable-grid>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"detailsContent\"></ng-container>\n    @if (showDefaultRouterOutlet && !hasProjectedDetails) {\n      <router-outlet class=\"d-contents\"></router-outlet>\n    }\n  }\n\n  <ng-template #listContent>\n    <ng-content select=\":not(c8y-sv-details)\"></ng-content>\n  </ng-template>\n\n  <ng-template #detailsContent>\n    @if (hasProjectedDetails) {\n      <ng-content select=\"c8y-sv-details\"></ng-content>\n    }\n  </ng-template>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: SplitViewSelectionService }], propDecorators: { showDefaultRouterOutlet: [{
+                type: Input
+            }], isResizable: [{
+                type: Input
+            }], initialSelection: [{
+                type: Input
+            }], resizableBreakpoint: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], resizableConfig: [{
+                type: Input
+            }], _detailsComp: [{
+                type: ContentChild,
+                args: [SplitViewDetailsComponent]
+            }] } });
+
+/**
+ * Marker component for alert content in split-view lists.
+ * Provides a named slot for displaying alerts above the list items.
+ *
+ * The parent split-view-list component detects this component via @ContentChild
+ * and conditionally renders the alert section when present.
+ *
+ * This is a purely structural component with no logic or styling - all content
+ * is projected and styled by the consumer.
+ *
+ * @example
+ * ```html
+ * <c8y-sv-list [title]="'Alarms'">
+ *   <c8y-sv-alerts>
+ *     @if (hasWarning) {
+ *       <div class="alert alert-warning" role="alert">
+ *         The selected item is not currently in the list.
+ *       </div>
+ *     }
+ *   </c8y-sv-alerts>
+ *   <!-- list items -->
+ *   @for (item of items; track item.id) {
+ *     <c8y-li>{{ item.name }}</c8y-li>
+ *   }
+ * </c8y-sv-list>
+ * ```
+ *
+ * @example Multiple alerts
+ * ```html
+ * <c8y-sv-list [title]="'Items'">
+ *   <c8y-sv-alerts>
+ *     @if (hasInfo) {
+ *       <div class="alert alert-info" role="alert">
+ *         Information message
+ *       </div>
+ *     }
+ *     @if (hasWarning) {
+ *       <div class="alert alert-warning" role="alert">
+ *         Warning message
+ *       </div>
+ *     }
+ *   </c8y-sv-alerts>
+ *   <!-- list content -->
+ * </c8y-sv-list>
+ * ```
+ */
+class SplitViewAlertsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SplitViewAlertsComponent, isStandalone: true, selector: "c8y-sv-alerts", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewAlertsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-sv-alerts',
+                    template: `<ng-content></ng-content>`,
+                    standalone: true
+                }]
+        }] });
+
+class SplitViewListComponent {
+    constructor() {
+        /**
+         * Optional parent split view component.
+         * Used to determine if a details panel is present for automatic background styling.
+         */
+        this.parentSplitView = inject(SplitViewComponent, { optional: true });
+        /**
+         * Title for the list section.
+         * Also used as aria-label if provided.
+         */
+        this.title = gettext$1('Split view list');
+        /**
+         * Whether the list is currently loading
+         */
+        this.loading = false;
+        /**
+         * Whether to show empty state
+         */
+        this.showEmptyState = true;
+        /**
+         * Custom empty state icon
+         */
+        this.emptyStateIcon = 'c8y-alert-idle';
+        /**
+         * Custom empty state title
+         */
+        this.emptyStateTitle = gettext$1('No items to display.');
+        /**
+         * Opacity for the list content (CSS opacity: 0-1 scale).
+         *
+         * Use this to dim the list during loading states while showing a loading indicator.
+         * Defaults to 1 (fully opaque).
+         *
+         * @example
+         * ```html
+         * <!-- Dim list to 20% opacity during initial load -->
+         * <c8y-sv-list [listOpacity]="isLoading ? 0.2 : 1">
+         * ```
+         */
+        this.listOpacity = 1;
+    }
+    get hasAlerts() {
+        return !!this.alertsComp;
+    }
+    /**
+     * Computed property that determines if the title should be shown.
+     * Uses the explicit `showTitle` input if provided, otherwise falls back to automatic detection.
+     *
+     * Automatic detection logic:
+     * - Inside `<c8y-sv>`: shows the title (full page context)
+     * - Outside `<c8y-sv>`: hides the title (widget context where widget provides its own title bar)
+     */
+    get shouldShowTitle() {
+        return this.showTitle !== undefined ? this.showTitle : !!this.parentSplitView;
+    }
+    /**
+     * Determines if split view layout styles should be applied based on the presence of a details panel.
+     *
+     * When a details panel (`<c8y-sv-details>`) is present alongside the list:
+     * - Returns `true` → applies `split-view__list bg-level-1` classes (lighter background for contrast)
+     *
+     * When no details panel is present (single column or widget usage):
+     * - Returns `false` → applies `bg-component` class (standard component background)
+     *
+     * This detection is automatic and based on the actual layout structure.
+     */
+    get isSplitView() {
+        return !!this.parentSplitView?.hasProjectedDetails;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SplitViewListComponent, isStandalone: true, selector: "c8y-sv-list", inputs: { title: "title", loading: "loading", showEmptyState: "showEmptyState", emptyStateIcon: "emptyStateIcon", emptyStateTitle: "emptyStateTitle", emptyStateSubtitle: "emptyStateSubtitle", docsUrl: "docsUrl", showTitle: "showTitle", listOpacity: "listOpacity" }, host: { classAttribute: "d-contents" }, queries: [{ propertyName: "alertsComp", first: true, predicate: SplitViewAlertsComponent, descendants: true }], viewQueries: [{ propertyName: "innerScrollDiv", first: true, predicate: ["innerScrollDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"inner-scroll fit-h\"\n  [attr.aria-label]=\"title | translate\"\n  role=\"region\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }\"\n  data-cy=\"c8y-sv-list\"\n  #innerScrollDiv\n>\n  @if (title || hasAlerts) {\n    <div\n      class=\"flex-wrap flex-no-shrink sticky-top gap-8\"\n      [ngClass]=\"{\n        'card-header separator': title && shouldShowTitle\n      }\"\n    >\n      @if (title && shouldShowTitle) {\n        <h4 class=\"card-title\">\n          {{ title | translate }}\n        </h4>\n      }\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasAlerts) {\n        <ng-content select=\"c8y-sv-alerts\"></ng-content>\n      }\n    </div>\n  }\n  <div data-cy=\"c8y-sv-list--group\">\n    @if (loading && !showEmptyState) {\n      <div class=\"p-absolute fit-w overflow-hidden p-b-4\">\n        <c8y-loading\n          [layout]=\"'page'\"\n          data-cy=\"c8y-sv-list--loading\"\n        ></c8y-loading>\n      </div>\n    }\n    <ng-content></ng-content>\n\n    @if (showEmptyState) {\n      <div class=\"p-relative p-l-24\">\n        <c8y-ui-empty-state\n          [icon]=\"emptyStateIcon\"\n          [title]=\"emptyStateTitle\"\n          [subtitle]=\"emptyStateSubtitle\"\n          data-cy=\"c8y-sv-list--empty-state\"\n        >\n          @if (docsUrl) {\n            <p>\n              <small\n                c8y-guide-docs\n                translate\n                [translateParams]=\"{ docsUrl }\"\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"{{ docsUrl }}\">user documentation</a>\n                .\n              </small>\n            </p>\n          }\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </div>\n\n  <ng-content select=\"c8y-sv-footer\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-sv-list', host: { class: 'd-contents' }, standalone: true, imports: [
+                        NgClass,
+                        LoadingComponent,
+                        EmptyStateComponent,
+                        C8yTranslatePipe,
+                        C8yTranslateDirective,
+                        GuideDocsComponent,
+                        GuideHrefDirective
+                    ], template: "<div\n  class=\"inner-scroll fit-h\"\n  [attr.aria-label]=\"title | translate\"\n  role=\"region\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }\"\n  data-cy=\"c8y-sv-list\"\n  #innerScrollDiv\n>\n  @if (title || hasAlerts) {\n    <div\n      class=\"flex-wrap flex-no-shrink sticky-top gap-8\"\n      [ngClass]=\"{\n        'card-header separator': title && shouldShowTitle\n      }\"\n    >\n      @if (title && shouldShowTitle) {\n        <h4 class=\"card-title\">\n          {{ title | translate }}\n        </h4>\n      }\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasAlerts) {\n        <ng-content select=\"c8y-sv-alerts\"></ng-content>\n      }\n    </div>\n  }\n  <div data-cy=\"c8y-sv-list--group\">\n    @if (loading && !showEmptyState) {\n      <div class=\"p-absolute fit-w overflow-hidden p-b-4\">\n        <c8y-loading\n          [layout]=\"'page'\"\n          data-cy=\"c8y-sv-list--loading\"\n        ></c8y-loading>\n      </div>\n    }\n    <ng-content></ng-content>\n\n    @if (showEmptyState) {\n      <div class=\"p-relative p-l-24\">\n        <c8y-ui-empty-state\n          [icon]=\"emptyStateIcon\"\n          [title]=\"emptyStateTitle\"\n          [subtitle]=\"emptyStateSubtitle\"\n          data-cy=\"c8y-sv-list--empty-state\"\n        >\n          @if (docsUrl) {\n            <p>\n              <small\n                c8y-guide-docs\n                translate\n                [translateParams]=\"{ docsUrl }\"\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"{{ docsUrl }}\">user documentation</a>\n                .\n              </small>\n            </p>\n          }\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </div>\n\n  <ng-content select=\"c8y-sv-footer\"></ng-content>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], showEmptyState: [{
+                type: Input
+            }], emptyStateIcon: [{
+                type: Input
+            }], emptyStateTitle: [{
+                type: Input
+            }], emptyStateSubtitle: [{
+                type: Input
+            }], docsUrl: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], listOpacity: [{
+                type: Input
+            }], innerScrollDiv: [{
+                type: ViewChild,
+                args: ['innerScrollDiv']
+            }], alertsComp: [{
+                type: ContentChild,
+                args: [SplitViewAlertsComponent]
+            }] } });
+
+class SplitViewHeaderActionsComponent {
+    constructor() {
+        /**
+         * Parent list component reference to automatically detect if title is shown.
+         * This allows automatic adjustment of spacing based on parent's showTitle setting.
+         */
+        this.parentList = inject(SplitViewListComponent);
+    }
+    /**
+     * Whether the parent list shows a title.
+     * Automatically inherited from parent, used to adjust spacing.
+     */
+    get showTitle() {
+        return this.parentList.shouldShowTitle;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewHeaderActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SplitViewHeaderActionsComponent, isStandalone: true, selector: "c8y-sv-header-actions", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'd-flex a-i-center fit-w': !showTitle, 'm-l-auto': showTitle }\"\n  data-cy=\"c8y-sv-header-actions\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewHeaderActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-sv-header-actions', host: { class: 'd-contents' }, standalone: true, imports: [NgClass], template: "<div\n  [ngClass]=\"{ 'd-flex a-i-center fit-w': !showTitle, 'm-l-auto': showTitle }\"\n  data-cy=\"c8y-sv-header-actions\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+/**
+ * Directive to handle item selection in split-view list.
+ * Automatically selects the item on click and applies the 'active' class.
+ *
+ * Usage:
+ * ```html
+ * @for (device of devices; track device.id) {
+ *   <c8y-li [c8ySvListItem]="device">
+ *     {{ device.name }}
+ *   </c8y-li>
+ * }
+ * ```
+ */
+class SplitViewListItemDirective {
+    constructor(selectionService) {
+        this.selectionService = selectionService;
+    }
+    get isActive() {
+        return !!(this.item && this.selectionService?.isSelected(this.item));
+    }
+    get role() {
+        return 'button';
+    }
+    onClick() {
+        if (this.item && this.selectionService) {
+            this.selectionService.select(this.item);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewListItemDirective, deps: [{ token: SplitViewSelectionService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SplitViewListItemDirective, isStandalone: true, selector: "[c8ySvListItem]", inputs: { item: ["c8ySvListItem", "item"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.isActive", "attr.role": "this.role" }, classAttribute: "pointer" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SplitViewListItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c8ySvListItem]',
+                    standalone: true,
+                    host: { class: 'pointer' }
+                }]
+        }], ctorParameters: () => [{ type: SplitViewSelectionService, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { item: [{
+                type: Input,
+                args: [{ alias: 'c8ySvListItem' }]
+            }], isActive: [{
+                type: HostBinding,
+                args: ['class.active']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 /**
  * Barrel to export /core
  */
@@ -38131,5 +39172,5 @@ function colorValidator(allowedModes) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetHierarchyService, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslationCache, C8yTranslationLoader, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, CustomTranslateService, CustomTranslateStore, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DatapointSyncService, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterByPipe, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, MOChunkLoaderService, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SimplifiedAuthService, SkipLinkDirective, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetTimeContextMediatorService, WidgetsDashboardComponent, WidgetsDashboardEventService, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, provideCommonPipes, provideCommonServices, provideDefaultOptionsAppInitializer, provideI18n, provideLanguageSelectorAppInitializer, providePluginsLoaderServiceAppInitializer, provideTranslationServiceInstance, ratiosByColumnTypes, removeContextIndicators, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
+export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetHierarchyService, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslationCache, C8yTranslationLoader, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, CustomTranslateService, CustomTranslateStore, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DatapointSyncService, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterByPipe, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IconPanelComponent, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, MOChunkLoaderService, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SimplifiedAuthService, SkipLinkDirective, SplitViewAlertsComponent, SplitViewComponent, SplitViewDetailsActionsComponent, SplitViewDetailsComponent, SplitViewExtraHeaderComponent, SplitViewFooterComponent, SplitViewHeaderActionsComponent, SplitViewListComponent, SplitViewListItemDirective, SplitViewSelectionService, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, StripHtmlPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetTimeContextMediatorService, WidgetsDashboardComponent, WidgetsDashboardEventService, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, provideCommonPipes, provideCommonServices, provideDefaultOptionsAppInitializer, provideI18n, provideLanguageSelectorAppInitializer, providePluginsLoaderServiceAppInitializer, provideTranslationServiceInstance, ratiosByColumnTypes, removeContextIndicators, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
 //# sourceMappingURL=c8y-ngx-components.mjs.map