@c8y/ngx-components 1023.14.8 → 1023.16.3

package/fesm2022/c8y-ngx-components.mjs

@@ -4,10 +4,10 @@ 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 { OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BasicAuth, CookieAuth, Realtime, FetchClient, BearerAuthFromSessionStorage, FeatureService, ApplicationAvailability, InventoryService, QueriesUtil, Client, PasswordStrength, AlarmService, TenantService, ApplicationService, UserService, aggregationType, Service, Paging } 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';
 import { __decorate, __metadata } from 'tslib';
 import * as i1$3 from '@angular/router';
 import { NavigationEnd, RouterModule as RouterModule$1, NavigationStart, RouterLink, RouterLinkActive, RouterOutlet, ActivationEnd, Router, ActivatedRoute, PRIMARY_OUTLET, ActivationStart, ChildActivationEnd, ROUTES, NavigationCancel, NavigationError } from '@angular/router';
@@ -8690,6 +8690,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Service for retrieving ancestor paths in the Cumulocity asset hierarchy.
+ *
+ * This service traverses upward through parent relationships (assetParents, deviceParents,
+ * additionParents) to find all possible paths from root ancestors down to a target asset.
+ *
+ * @example
+ * Given this hierarchy:
+ * ```
+ * Root1 -> Building1 -> Floor1 -> Device
+ * Root2 -> Building2 -> Floor1 -> Device
+ * ```
+ *
+ * Calling `getAncestorPaths('Device')` returns:
+ * ```
+ * [
+ *   [Root1, Building1, Floor1, Device],
+ *   [Root2, Building2, Floor1, Device]
+ * ]
+ * ```
+ */
+class AssetHierarchyService {
+    constructor() {
+        this.inventory = inject(InventoryService);
+        this.alertService = inject(AlertService);
+    }
+    /**
+     * Retrieves all ancestor paths from root nodes down to the specified asset.
+     *
+     * This method fetches the target asset and all its ancestors, then constructs
+     * all possible paths from root ancestors (objects with no parents) down to the
+     * target asset. Multiple paths may exist if the asset has multiple parent chains.
+     *
+     * @param assetId - The ID of the target asset
+     * @returns A promise that resolves to an array of paths, where each path is an
+     *          array of managed objects ordered from root to target asset.
+     *          Returns an empty array if the asset is not found or an error occurs.
+     */
+    async getAncestorPaths(assetId) {
+        if (!assetId) {
+            return [];
+        }
+        try {
+            const { data: asset } = await this.inventory.detail(assetId, {
+                withParents: true
+            });
+            const parentIdsOfAsset = this.getParentIds(asset).filter(id => id !== assetId); // Remove self-references to avoid fetching the asset twice in case of circular relations
+            // If asset has no parents, it's a root node itself
+            if (!parentIdsOfAsset || parentIdsOfAsset.length === 0) {
+                return [[asset]];
+            }
+            const { data: parents } = await this.inventory.list({
+                pageSize: 2000,
+                ids: parentIdsOfAsset.join(','),
+                withParents: true,
+                withChildren: true
+            });
+            // Deduplicate managed objects by ID to handle self-referencing parents and circular relationships
+            const allManagedObjects = [asset, ...parents];
+            const uniqueManagedObjectsMap = new Map(allManagedObjects.map(mo => [mo.id, mo]));
+            const parentsAndAsset = Array.from(uniqueManagedObjectsMap.values());
+            const roots = parentsAndAsset.filter(parent => this.getParentIds(parent).length === 0);
+            // Find all paths from each root to the target asset
+            const breadcrumbPaths = [];
+            roots.forEach(root => {
+                const paths = this.findAllPathsToAsset(root, assetId, parentsAndAsset);
+                breadcrumbPaths.push(...paths);
+            });
+            return breadcrumbPaths;
+        }
+        catch (e) {
+            this.alertService.addServerFailure(e);
+            return [];
+        }
+    }
+    /**
+     * Gets all parent IDs of a managed object.
+     */
+    getParentIds(managedObject) {
+        const assetParents = managedObject.assetParents?.references?.map(parent => parent.managedObject.id) ?? [];
+        const deviceParents = managedObject.deviceParents?.references?.map(parent => parent.managedObject.id) ?? [];
+        const additionParents = managedObject.additionParents?.references?.map(parent => parent.managedObject.id) ?? [];
+        return [...assetParents, ...deviceParents, ...additionParents];
+    }
+    /**
+     * Gets all child IDs of a managed object.
+     */
+    getChildrenIds(managedObject) {
+        const childAssets = managedObject.childAssets?.references?.map(child => child.managedObject.id) ?? [];
+        const childDevices = managedObject.childDevices?.references?.map(child => child.managedObject.id) ?? [];
+        const childAdditions = managedObject.childAdditions?.references?.map(child => child.managedObject.id) ?? [];
+        return [...childAssets, ...childDevices, ...childAdditions];
+    }
+    /**
+     * Recursively finds all paths from a root node to the target asset.
+     * Returns an array of paths, where each path is an array of managed objects.
+     */
+    findAllPathsToAsset(managedObject, targetAssetId, allManagedObjects, currentPath = []) {
+        // Check for cycles - if this node is already in the current path, stop traversal
+        if (currentPath.some(ancestor => ancestor.id === managedObject.id)) {
+            return [];
+        }
+        const newPath = [...currentPath, managedObject];
+        // If we found the target asset, return this path
+        if (managedObject.id === targetAssetId) {
+            return [newPath];
+        }
+        // Otherwise, continue searching in children
+        const childrenIds = this.getChildrenIds(managedObject);
+        const filteredChildren = allManagedObjects.filter(mo => childrenIds.includes(mo.id));
+        const allPaths = [];
+        filteredChildren.forEach(child => {
+            const paths = this.findAllPathsToAsset(child, targetAssetId, allManagedObjects, newPath);
+            allPaths.push(...paths);
+        });
+        return allPaths;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetHierarchyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetHierarchyService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetHierarchyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * 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';
@@ -13959,7 +14196,7 @@ class BreadcrumbService extends ExtensionPointForPlugins {
     }
     sortByPreferredPath(breadcrumbs) {
         if (this.preferredPath) {
-            return breadcrumbs.sort(bc => bc.items.find((item) => !!item.path.match(this.preferredPath)) ? -1 : 1);
+            return breadcrumbs.sort(bc => bc.items.find((item) => !!item.path?.match(this.preferredPath)) ? -1 : 1);
         }
         return breadcrumbs;
     }
@@ -14378,6 +14615,8 @@ class BreadcrumbOutletComponent {
     constructor() {
         this.showAll = false;
         this.breadcrumbs = [];
+        this.dropdownOpen = false;
+        this.GROUP_ICON = 'c8y-group';
     }
     /**
      * For upgrade only. Old angularjs routes start with hash, new ones not.
@@ -14385,23 +14624,27 @@ class BreadcrumbOutletComponent {
     normalizePath(path) {
         return path?.replace(/^#\/?/, '');
     }
+    ngOnChanges() {
+        this.dropdownOpen =
+            this.breadcrumbs?.length > 1 && this.breadcrumbs.some(b => b.forceDropdownOpen);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BreadcrumbOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BreadcrumbOutletComponent, isStandalone: true, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    type=\"button\"\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" [attr.role]=\"'navigation'\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n            [attr.aria-label]=\"'breadcrumb'\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: BreadcrumbOutletComponent, isStandalone: true, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs", dropdownOpen: "dropdownOpen" }, usesOnChanges: true, ngImport: i0, template: "@if (breadcrumbs && breadcrumbs.length > 0) {\n  <div class=\"breadcrumbs-container d-flex\">\n    @if (breadcrumbs.length > 1) {\n      <div\n        container=\"body\"\n        dropdown\n        #breadcrumbDropdown=\"bs-dropdown\"\n        [isOpen]=\"dropdownOpen\"\n      >\n        <button\n          class=\"btn-clean btn-xs btn p-l-4 p-r-4\"\n          title=\"{{ 'Show all paths' | translate }}\"\n          type=\"button\"\n          dropdownToggle\n        >\n          <i [c8yIcon]=\"breadcrumbDropdown.isOpen ? 'caret-down' : 'caret-right'\"></i>\n        </button>\n        <div\n          class=\"dropdown-menu\"\n          *dropdownMenu\n        >\n          @for (breadcrumb of breadcrumbs; track breadcrumb; let i = $index; let first = $first) {\n            <!-- in dropdown menu, show all breadcrumbs except the first one -->\n            @if (!first) {\n              <div class=\"p-t-8 p-r-8 p-b-8 p-l-16 separator-bottom\">\n                <ul class=\"breadcrumbs text-muted m-l-4\">\n                  @for (\n                    item of breadcrumb.items;\n                    track item;\n                    let isLast = $last;\n                    let isFirst = $first\n                  ) {\n                    <li class=\"text-muted\">\n                      @if (!isFirst) {\n                        <span><i [c8yIcon]=\"'forward'\"></i></span>\n                      }\n                      @if (!isLast) {\n                        <a\n                          class=\"word-break\"\n                          [routerLink]=\"item.path\"\n                        >\n                          @if (item.icon) {\n                            <i\n                              class=\"m-r-4\"\n                              [c8yIcon]=\"item.icon\"\n                            ></i>\n                          }\n                          <span>{{ item.label | translate }}</span>\n                        </a>\n                      } @else {\n                        @if (item.icon) {\n                          <i\n                            class=\"m-r-4\"\n                            [c8yIcon]=\"item.icon\"\n                          ></i>\n                        }\n                        <span>{{ item.label | translate }}</span>\n                      }\n                    </li>\n                  }\n                </ul>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n    <ul\n      class=\"breadcrumbs text-muted\"\n      [attr.role]=\"'navigation'\"\n    >\n      <!-- show only first breadcrumb- applicable both for single and multiple breadcrumb cases (for multiple breadcrumbs, rest are in dropdown) -->\n      @for (item of breadcrumbs[0].items; track item; let firstItem = $first) {\n        <li class=\"text-muted\">\n          @if (!firstItem) {\n            <span><i c8yIcon=\"forward\"></i></span>\n          }\n          <ng-container\n            *c8yOutlet=\"item.component || item.template; injector: breadcrumbs[0].injector\"\n          ></ng-container>\n          @if (item.label && item.path) {\n            <a\n              class=\"word-break\"\n              title=\"{{ item.label | translate }}\"\n              [attr.aria-label]=\"'breadcrumb'\"\n              [routerLink]=\"normalizePath(item.path)\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"item.icon\"\n              ></i>\n              <span>{{ item.label | translate }}</span>\n            </a>\n          }\n          @if (item.label && !item.path) {\n            <i\n              class=\"m-r-4\"\n              [c8yIcon]=\"item.icon\"\n            ></i>\n            <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n          }\n        </li>\n      }\n    </ul>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BreadcrumbOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-breadcrumb-outlet', standalone: true, imports: [
-                        NgIf,
-                        NgClass,
                         IconDirective,
                         TooltipModule,
-                        NgFor,
                         OutletDirective,
                         RouterLink,
-                        C8yTranslatePipe
-                    ], template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    type=\"button\"\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" [attr.role]=\"'navigation'\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n            [attr.aria-label]=\"'breadcrumb'\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n" }]
+                        C8yTranslatePipe,
+                        BsDropdownModule
+                    ], template: "@if (breadcrumbs && breadcrumbs.length > 0) {\n  <div class=\"breadcrumbs-container d-flex\">\n    @if (breadcrumbs.length > 1) {\n      <div\n        container=\"body\"\n        dropdown\n        #breadcrumbDropdown=\"bs-dropdown\"\n        [isOpen]=\"dropdownOpen\"\n      >\n        <button\n          class=\"btn-clean btn-xs btn p-l-4 p-r-4\"\n          title=\"{{ 'Show all paths' | translate }}\"\n          type=\"button\"\n          dropdownToggle\n        >\n          <i [c8yIcon]=\"breadcrumbDropdown.isOpen ? 'caret-down' : 'caret-right'\"></i>\n        </button>\n        <div\n          class=\"dropdown-menu\"\n          *dropdownMenu\n        >\n          @for (breadcrumb of breadcrumbs; track breadcrumb; let i = $index; let first = $first) {\n            <!-- in dropdown menu, show all breadcrumbs except the first one -->\n            @if (!first) {\n              <div class=\"p-t-8 p-r-8 p-b-8 p-l-16 separator-bottom\">\n                <ul class=\"breadcrumbs text-muted m-l-4\">\n                  @for (\n                    item of breadcrumb.items;\n                    track item;\n                    let isLast = $last;\n                    let isFirst = $first\n                  ) {\n                    <li class=\"text-muted\">\n                      @if (!isFirst) {\n                        <span><i [c8yIcon]=\"'forward'\"></i></span>\n                      }\n                      @if (!isLast) {\n                        <a\n                          class=\"word-break\"\n                          [routerLink]=\"item.path\"\n                        >\n                          @if (item.icon) {\n                            <i\n                              class=\"m-r-4\"\n                              [c8yIcon]=\"item.icon\"\n                            ></i>\n                          }\n                          <span>{{ item.label | translate }}</span>\n                        </a>\n                      } @else {\n                        @if (item.icon) {\n                          <i\n                            class=\"m-r-4\"\n                            [c8yIcon]=\"item.icon\"\n                          ></i>\n                        }\n                        <span>{{ item.label | translate }}</span>\n                      }\n                    </li>\n                  }\n                </ul>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n    <ul\n      class=\"breadcrumbs text-muted\"\n      [attr.role]=\"'navigation'\"\n    >\n      <!-- show only first breadcrumb- applicable both for single and multiple breadcrumb cases (for multiple breadcrumbs, rest are in dropdown) -->\n      @for (item of breadcrumbs[0].items; track item; let firstItem = $first) {\n        <li class=\"text-muted\">\n          @if (!firstItem) {\n            <span><i c8yIcon=\"forward\"></i></span>\n          }\n          <ng-container\n            *c8yOutlet=\"item.component || item.template; injector: breadcrumbs[0].injector\"\n          ></ng-container>\n          @if (item.label && item.path) {\n            <a\n              class=\"word-break\"\n              title=\"{{ item.label | translate }}\"\n              [attr.aria-label]=\"'breadcrumb'\"\n              [routerLink]=\"normalizePath(item.path)\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"item.icon\"\n              ></i>\n              <span>{{ item.label | translate }}</span>\n            </a>\n          }\n          @if (item.label && !item.path) {\n            <i\n              class=\"m-r-4\"\n              [c8yIcon]=\"item.icon\"\n            ></i>\n            <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n          }\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
+            }], dropdownOpen: [{
+                type: Input
             }] } });
 
 class SearchOutletComponent {
@@ -14492,13 +14735,12 @@ class HeaderBarComponent {
         this.headerService.closeRightDrawer();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HeaderBarComponent, deps: [{ token: HeaderService }, { token: ActionService }, { token: BreadcrumbService }, { token: SearchService }, { token: AppStateService }, { token: UserMenuService }, { token: DocsService }, { token: i4.ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HeaderBarComponent, isStandalone: true, selector: "c8y-header-bar", inputs: { simple: "simple" }, ngImport: i0, template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app?.name\"\n        [contextPath]=\"(appState$ | async).app?.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      data-cy=\"header-bar--toggle\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: TitleOutletComponent, selector: "c8y-title-outlet" }, { kind: "component", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: ["breadcrumbs"] }, { kind: "component", type: SearchOutletComponent, selector: "c8y-search-outlet", inputs: ["search"] }, { kind: "component", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: ["items"] }, { kind: "component", type: AppSwitcherComponent, selector: "c8y-app-switcher" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HeaderBarComponent, isStandalone: true, selector: "c8y-header-bar", inputs: { simple: "simple" }, ngImport: i0, template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    @if ((headerService.canToggleNavigator$ | async) && !simple) {\n      <button\n        class=\"navigator-toggle main-header-button\"\n        title=\"{{ 'Toggle navigation bar' | translate }}\"\n        [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n        [attr.aria-controls]=\"'navigator'\"\n        type=\"button\"\n        data-cy=\"header-bar--main-header-button\"\n        (click)=\"headerService.toggleNavigator()\"\n      >\n        @if (!(headerService.navigatorOpen$ | async)) {\n          <i [c8yIcon]=\"'outdent'\"></i>\n        }\n        @if (headerService.navigatorOpen$ | async) {\n          <i [c8yIcon]=\"'dedent-right'\"></i>\n        }\n      </button>\n    }\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app?.name\"\n        [contextPath]=\"(appState$ | async).app?.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        @if (!simple) {\n          <c8y-breadcrumb-outlet\n            class=\"app-breadcrumbs\"\n            [breadcrumbs]=\"breadcrumbService.items$ | async\"\n          ></c8y-breadcrumb-outlet>\n        }\n      </span>\n    </div>\n    @if (!simple) {\n      <c8y-search-outlet\n        class=\"main-header-item\"\n        [search]=\"searchService.items$ | async\"\n      ></c8y-search-outlet>\n    }\n    @if (!simple) {\n      <c8y-action-outlet [items]=\"actionService.items$ | async\"></c8y-action-outlet>\n    }\n    @if (appState.currentUser.value) {\n      <c8y-app-switcher\n        class=\"main-header-item\"\n        title=\"{{ 'Application switcher' | translate }}\"\n      ></c8y-app-switcher>\n    }\n    @if (showNotification$ | async) {\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        @if (appState.currentUser | async) {\n          <span\n            class=\"user-dot user-dot-notification\"\n            data-cy=\"header-bar--user-dot\"\n          >\n            {{ appState.currentUser | async | userNameInitials }}\n          </span>\n        }\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      @if (!(headerService.rightDrawerOpen$ | async)) {\n        <div class=\"p-relative a-s-stretch no-pointer\">\n          @if (showNotification$ | async) {\n            <span class=\"c8y-pulse c8y-pulse--md active\"></span>\n          }\n        </div>\n      }\n    } @else {\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        @if (appState.currentUser | async) {\n          <span\n            class=\"user-dot user-dot-notification\"\n            data-cy=\"header-bar--user-dot\"\n          >\n            {{ appState.currentUser | async | userNameInitials }}\n          </span>\n        }\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    }\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      data-cy=\"header-bar--toggle\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: TitleOutletComponent, selector: "c8y-title-outlet" }, { kind: "component", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: ["breadcrumbs", "dropdownOpen"] }, { kind: "component", type: SearchOutletComponent, selector: "c8y-search-outlet", inputs: ["search"] }, { kind: "component", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: ["items"] }, { kind: "component", type: AppSwitcherComponent, selector: "c8y-app-switcher" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HeaderBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-header-bar', standalone: true, imports: [
                         NgClass,
-                        NgIf,
                         IconDirective,
                         AppIconComponent,
                         TitleOutletComponent,
@@ -14512,7 +14754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AsyncPipe,
                         ShortenUserNamePipe,
                         UserNameInitialsPipe
-                    ], template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app?.name\"\n        [contextPath]=\"(appState$ | async).app?.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      data-cy=\"header-bar--toggle\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    @if ((headerService.canToggleNavigator$ | async) && !simple) {\n      <button\n        class=\"navigator-toggle main-header-button\"\n        title=\"{{ 'Toggle navigation bar' | translate }}\"\n        [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n        [attr.aria-controls]=\"'navigator'\"\n        type=\"button\"\n        data-cy=\"header-bar--main-header-button\"\n        (click)=\"headerService.toggleNavigator()\"\n      >\n        @if (!(headerService.navigatorOpen$ | async)) {\n          <i [c8yIcon]=\"'outdent'\"></i>\n        }\n        @if (headerService.navigatorOpen$ | async) {\n          <i [c8yIcon]=\"'dedent-right'\"></i>\n        }\n      </button>\n    }\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app?.name\"\n        [contextPath]=\"(appState$ | async).app?.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        @if (!simple) {\n          <c8y-breadcrumb-outlet\n            class=\"app-breadcrumbs\"\n            [breadcrumbs]=\"breadcrumbService.items$ | async\"\n          ></c8y-breadcrumb-outlet>\n        }\n      </span>\n    </div>\n    @if (!simple) {\n      <c8y-search-outlet\n        class=\"main-header-item\"\n        [search]=\"searchService.items$ | async\"\n      ></c8y-search-outlet>\n    }\n    @if (!simple) {\n      <c8y-action-outlet [items]=\"actionService.items$ | async\"></c8y-action-outlet>\n    }\n    @if (appState.currentUser.value) {\n      <c8y-app-switcher\n        class=\"main-header-item\"\n        title=\"{{ 'Application switcher' | translate }}\"\n      ></c8y-app-switcher>\n    }\n    @if (showNotification$ | async) {\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        @if (appState.currentUser | async) {\n          <span\n            class=\"user-dot user-dot-notification\"\n            data-cy=\"header-bar--user-dot\"\n          >\n            {{ appState.currentUser | async | userNameInitials }}\n          </span>\n        }\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      @if (!(headerService.rightDrawerOpen$ | async)) {\n        <div class=\"p-relative a-s-stretch no-pointer\">\n          @if (showNotification$ | async) {\n            <span class=\"c8y-pulse c8y-pulse--md active\"></span>\n          }\n        </div>\n      }\n    } @else {\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        @if (appState.currentUser | async) {\n          <span\n            class=\"user-dot user-dot-notification\"\n            data-cy=\"header-bar--user-dot\"\n          >\n            {{ appState.currentUser | async | userNameInitials }}\n          </span>\n        }\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    }\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      data-cy=\"header-bar--toggle\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: HeaderService }, { type: ActionService }, { type: BreadcrumbService }, { type: SearchService }, { type: AppStateService }, { type: UserMenuService }, { type: DocsService }, { type: i4.ApiService }], propDecorators: { simple: [{
                 type: Input
             }] } });
@@ -16091,8 +16333,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Navigator node renderer.
  */
 class NavigatorNodeComponent {
-    constructor(router) {
+    constructor(router, breadcrumbService) {
         this.router = router;
+        this.breadcrumbService = breadcrumbService;
         /**
          * Event emitter responsible for broadcasting one of the following events: "icon", "expander" or "link" as string value.
          *
@@ -16185,6 +16428,9 @@ class NavigatorNodeComponent {
                 break;
         }
         this.handleExpandCollapse(open, from, $event);
+        if (this.node.parents?.length === 1) {
+            this.breadcrumbService.selectPreferredByPath(this.node.parents[0].path);
+        }
         this.nodeClick.emit(from);
     }
     /**
@@ -16253,7 +16499,7 @@ class NavigatorNodeComponent {
             injector: this.node.injector
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavigatorNodeComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavigatorNodeComponent, deps: [{ token: i1$3.Router }, { token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NavigatorNodeComponent, isStandalone: true, selector: "c8y-navigator-node", inputs: { node: "node", isRoot: "isRoot" }, outputs: { nodeClick: "nodeClick" }, viewQueries: [{ propertyName: "iconSlot", first: true, predicate: ["icon"], descendants: true, read: ViewContainerRef }, { propertyName: "confirm", first: true, predicate: PopoverConfirmComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (node.component) {\n  <ng-container\n    *c8yComponentOutlet=\"node.component; environmentInjector: node.injector\"\n  ></ng-container>\n}\n\n@if (!node.component) {\n  <div\n    class=\"slot\"\n    [hidden]=\"node.hidden\"\n    (dragstart)=\"node.dragStart($event)\"\n    (dragend)=\"node.dragEnd($event)\"\n    (drop)=\"node.drop($event)\"\n    [draggable]=\"node.draggable\"\n    [ngClass]=\"{ dragged: node.dragged, disabled: node.loading }\"\n  >\n    <ng-container>\n      <div\n        class=\"link\"\n        tabindex=\"-1\"\n        [routerLink]=\"node.canNavigate ? node.path : undefined\"\n        [ngClass]=\"{\n          active: isActive$ | async,\n          'dragged-hover': node.draggedHover && !node.dragged\n        }\"\n        (dragover)=\"node.canDrop && $event.preventDefault()\"\n        (dragenter)=\"node.canDrop && node.dragEnter($event)\"\n        (dragleave)=\"node.canDrop && node.dragLeave($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"navicon\"></ng-container>\n        <button\n          class=\"btn-clean\"\n          title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n          [attr.aria-expanded]=\"node.hasChildren ? node.open : null\"\n          type=\"button\"\n          draggable=\"false\"\n          [attr.data-cy]=\"node.label\"\n          [attr.id]=\"isRoot ? node.id : undefined\"\n          (click)=\"click(node.canNavigate ? 'link' : 'expander', $event)\"\n          [ngClass]=\"{\n            'root-link': isRoot,\n            open: node.open && node.hasChildren,\n            parent: node.hasChildren\n          }\"\n        >\n          <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n        </button>\n      </div>\n    </ng-container>\n    @if (node.children.length) {\n      <div\n        class=\"children panel-expand expand\"\n        [collapse]=\"!node.open\"\n        [isAnimated]=\"true\"\n      >\n        @for (childNode of node.children; track childNode) {\n          <c8y-navigator-node\n            [node]=\"childNode\"\n            (nodeClick)=\"nodeClick.emit($event)\"\n          ></c8y-navigator-node>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- icon -->\n<ng-template #navicon>\n  <!-- loader -->\n  @if (node.loading && !isRoot) {\n    <i\n      class=\"icon-spin loadingIndicator\"\n      [c8yIcon]=\"'circle-o-notch'\"\n      [ngClass]=\"{ 'm-l-16': isRoot, 'm-l-8': !isRoot }\"\n    ></i>\n  }\n  <ng-container #icon></ng-container>\n</ng-template>\n\n<ng-template #inner>\n  <!--title  -->\n  <span>{{ node.translateLabel ? (node.label | translate) : node.label }}</span>\n\n  <!--expander  -->\n  @if (node.hasChildren) {\n    <i\n      class=\"expander\"\n      [c8yIcon]=\"'chevron-down'\"\n      [attr.aria-label]=\"expandTitle\"\n      role=\"button\"\n      (click)=\"click('expander', $event)\"\n      data-cy=\"c8y-navigator-node--expander\"\n    ></i>\n  }\n\n  <!--  Popover confirm  -->\n  <c8y-popover-confirm\n    triggers=\"focus\"\n    containerClass=\"navigator-popover\"\n  ></c8y-popover-confirm>\n</ng-template>\n", dependencies: [{ kind: "component", type: NavigatorNodeComponent, selector: "c8y-navigator-node", inputs: ["node", "isRoot"], outputs: ["nodeClick"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavigatorNodeComponent, decorators: [{
@@ -16269,7 +16515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         C8yTranslatePipe,
                         AsyncPipe
                     ], template: "@if (node.component) {\n  <ng-container\n    *c8yComponentOutlet=\"node.component; environmentInjector: node.injector\"\n  ></ng-container>\n}\n\n@if (!node.component) {\n  <div\n    class=\"slot\"\n    [hidden]=\"node.hidden\"\n    (dragstart)=\"node.dragStart($event)\"\n    (dragend)=\"node.dragEnd($event)\"\n    (drop)=\"node.drop($event)\"\n    [draggable]=\"node.draggable\"\n    [ngClass]=\"{ dragged: node.dragged, disabled: node.loading }\"\n  >\n    <ng-container>\n      <div\n        class=\"link\"\n        tabindex=\"-1\"\n        [routerLink]=\"node.canNavigate ? node.path : undefined\"\n        [ngClass]=\"{\n          active: isActive$ | async,\n          'dragged-hover': node.draggedHover && !node.dragged\n        }\"\n        (dragover)=\"node.canDrop && $event.preventDefault()\"\n        (dragenter)=\"node.canDrop && node.dragEnter($event)\"\n        (dragleave)=\"node.canDrop && node.dragLeave($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"navicon\"></ng-container>\n        <button\n          class=\"btn-clean\"\n          title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n          [attr.aria-expanded]=\"node.hasChildren ? node.open : null\"\n          type=\"button\"\n          draggable=\"false\"\n          [attr.data-cy]=\"node.label\"\n          [attr.id]=\"isRoot ? node.id : undefined\"\n          (click)=\"click(node.canNavigate ? 'link' : 'expander', $event)\"\n          [ngClass]=\"{\n            'root-link': isRoot,\n            open: node.open && node.hasChildren,\n            parent: node.hasChildren\n          }\"\n        >\n          <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n        </button>\n      </div>\n    </ng-container>\n    @if (node.children.length) {\n      <div\n        class=\"children panel-expand expand\"\n        [collapse]=\"!node.open\"\n        [isAnimated]=\"true\"\n      >\n        @for (childNode of node.children; track childNode) {\n          <c8y-navigator-node\n            [node]=\"childNode\"\n            (nodeClick)=\"nodeClick.emit($event)\"\n          ></c8y-navigator-node>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- icon -->\n<ng-template #navicon>\n  <!-- loader -->\n  @if (node.loading && !isRoot) {\n    <i\n      class=\"icon-spin loadingIndicator\"\n      [c8yIcon]=\"'circle-o-notch'\"\n      [ngClass]=\"{ 'm-l-16': isRoot, 'm-l-8': !isRoot }\"\n    ></i>\n  }\n  <ng-container #icon></ng-container>\n</ng-template>\n\n<ng-template #inner>\n  <!--title  -->\n  <span>{{ node.translateLabel ? (node.label | translate) : node.label }}</span>\n\n  <!--expander  -->\n  @if (node.hasChildren) {\n    <i\n      class=\"expander\"\n      [c8yIcon]=\"'chevron-down'\"\n      [attr.aria-label]=\"expandTitle\"\n      role=\"button\"\n      (click)=\"click('expander', $event)\"\n      data-cy=\"c8y-navigator-node--expander\"\n    ></i>\n  }\n\n  <!--  Popover confirm  -->\n  <c8y-popover-confirm\n    triggers=\"focus\"\n    containerClass=\"navigator-popover\"\n  ></c8y-popover-confirm>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.Router }], propDecorators: { iconSlot: [{
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: BreadcrumbService }], propDecorators: { iconSlot: [{
                 type: ViewChild,
                 args: ['icon', { read: ViewContainerRef, static: false }]
             }], node: [{
@@ -37470,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 {
     /**
@@ -37503,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.
          */
@@ -37689,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
@@ -37720,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);
                 }
             }
@@ -37759,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,
@@ -37770,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']
@@ -37999,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
  */
@@ -38007,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, 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