@c8y/ngx-components 1024.14.1 → 1024.15.0

package/fesm2022/c8y-ngx-components.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, effect, Directive, Pipe, createEnvironmentInjector, InjectionToken, Optional, Inject, EventEmitter, NgModule, LOCALE_ID, NgModuleRef, createNgModule, isDevMode, inject, DOCUMENT, EnvironmentInjector, Injector, Input, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, signal, viewChild, ChangeDetectionStrategy, contentChildren, untracked, SecurityContext, TemplateRef, ElementRef, provideAppInitializer, Self, SkipSelf, Attribute, ContentChild, ContentChildren, ViewContainerRef, output, ChangeDetectorRef, ViewChildren, createComponent, runInInjectionContext, importProvidersFrom, SimpleChange, reflectComponentType, ViewEncapsulation, computed, Type } from '@angular/core';
+import { Injectable, input, effect, Directive, Pipe, createEnvironmentInjector, InjectionToken, Optional, Inject, EventEmitter, NgModule, LOCALE_ID, NgModuleRef, createNgModule, isDevMode, inject, DOCUMENT, EnvironmentInjector, Injector, Input, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, signal, viewChild, ChangeDetectionStrategy, contentChildren, untracked, SecurityContext, TemplateRef, ElementRef, provideAppInitializer, Self, SkipSelf, Attribute, ContentChild, computed, ContentChildren, ViewContainerRef, output, ChangeDetectorRef, ViewChildren, createComponent, runInInjectionContext, importProvidersFrom, SimpleChange, reflectComponentType, ViewEncapsulation, Type } from '@angular/core';
 import * as i1$2 from 'ngx-bootstrap/dropdown';
 import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i4$2 from '@angular/cdk/a11y';
 import { ConfigurableFocusTrapFactory, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { of, Observable, map, startWith, distinctUntilChanged, shareReplay, merge, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, ReplaySubject, firstValueFrom, lastValueFrom, NEVER, filter as filter$1, tap as tap$1, mergeMap, fromEvent, pipe, throwError, interval, take as take$1, takeUntil as takeUntil$1, concat, fromEventPattern, withLatestFrom, catchError as catchError$1, empty, timer, forkJoin, debounceTime as debounceTime$1, switchMap as switchMap$1, skip as skip$1 } from 'rxjs';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-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$2, find, negate, upperFirst, memoize as memoize$1, isEmpty, property, some, entries, omitBy, isDate, pick, flatMap, orderBy, filter as filter$2, snakeCase, matches, escape, escapeRegExp, assignWith, set, toNumber, isEqualWith, clone, omit, cloneDeep, uniqBy, has, transform, identity, unset, flow, findIndex as findIndex$1, isNil, chunk, values, union, without, indexOf, kebabCase, forOwn } from 'lodash-es';
+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$2, find, negate, upperFirst, memoize as memoize$1, isEmpty, property, some, entries, omitBy, isDate, pick, flatMap, orderBy, filter as filter$2, snakeCase, matches, isNil, escape, escapeRegExp, assignWith, set, toNumber, isEqualWith, clone, omit, cloneDeep, uniqBy, has, transform, identity, unset, flow, findIndex as findIndex$1, chunk, values, union, without, indexOf, kebabCase, forOwn } from 'lodash-es';
 import { map as map$1, distinctUntilChanged as distinctUntilChanged$1, filter, startWith as startWith$1, switchMap, shareReplay as shareReplay$1, take, scan, takeUntil, tap, catchError, debounceTime, share, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom as withLatestFrom$1, mergeMap as mergeMap$1, every as every$1, toArray, merge as merge$1, mapTo, skip, reduce, finalize, combineLatestWith } from 'rxjs/operators';
 import * as i1 from '@c8y/client';
 import { InventoryService, OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BasicAuth, CookieAuth, Realtime, FetchClient, BearerAuthFromSessionStorage, QueriesUtil, Client, PasswordStrength, ApplicationAvailability, AlarmService, TenantService, ApplicationService, UserService, aggregationType, Service, Paging, FeatureService } from '@c8y/client';
@@ -9257,30 +9257,74 @@ class AssetHierarchyService {
             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;
+            return await this.resolvePathsFromParents(asset, assetId, parentIdsOfAsset);
         }
         catch (e) {
             this.alertService.addServerFailure(e);
             return [];
         }
     }
+    /**
+     * Resolves ancestor paths only when the asset has at most one direct parent
+     * (the cheap, common single-path case). Returns null when the asset is directly
+     * assigned to multiple parents — the caller should keep the lazy click-to-load
+     * flow rather than auto-paying the full hierarchy traversal.
+     *
+     * Costs a single `inventory.detail` call to count direct parents; only proceeds
+     * to the heavier `inventory.list` traversal for single-parent assets.
+     *
+     * @param assetId - The ID of the target asset
+     * @returns Ancestor paths (root → asset) for single-parent assets, or `null`
+     *          when the asset has multiple direct parents.
+     */
+    async getAncestorPathsForSingleParent(assetId) {
+        if (!assetId) {
+            return [];
+        }
+        try {
+            const { data: asset } = await this.inventory.detail(assetId, {
+                withParents: true
+            });
+            const parentIdsOfAsset = this.getParentIds(asset).filter(id => id !== assetId);
+            if (parentIdsOfAsset.length === 0) {
+                return [[asset]];
+            }
+            if (parentIdsOfAsset.length > 1) {
+                return null;
+            }
+            return await this.resolvePathsFromParents(asset, assetId, parentIdsOfAsset);
+        }
+        catch {
+            // Eager auto-resolve is a background enhancement — on failure fall back to
+            // the lazy ellipsis flow instead of surfacing a danger alert for a crumb
+            // the user never asked to expand (e.g. the managed object no longer exists).
+            return null;
+        }
+    }
+    /**
+     * Fetches the given parents and walks every path from each root down to the
+     * target asset.
+     */
+    async resolvePathsFromParents(asset, assetId, parentIds) {
+        const { data: parents } = await this.inventory.list({
+            pageSize: 2000,
+            ids: parentIds.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;
+    }
     /**
      * Gets all parent IDs of a managed object.
      */
@@ -14153,7 +14197,7 @@ class BreadcrumbService extends ExtensionPointForPlugins {
         return this.state$.value;
     }
     /**
-     * Adds a new item to the action bar in the header.
+     * Adds a breadcrumb path to the breadcrumb trail.
      * @param item The item to add.
      */
     add(item) {
@@ -14161,7 +14205,7 @@ class BreadcrumbService extends ExtensionPointForPlugins {
         this.emitNewState();
     }
     /**
-     * Removes an action bar item from the header.
+     * Removes a breadcrumb path from the breadcrumb trail.
      * @param item The item to remove.
      */
     remove(item) {
@@ -14177,17 +14221,50 @@ class BreadcrumbService extends ExtensionPointForPlugins {
         this.refresh();
     }
     sortByPreferredPath(breadcrumbs) {
-        if (this.preferredPath) {
-            return breadcrumbs.sort(bc => bc.items.find((item) => !!item.path?.match(this.preferredPath)) ? -1 : 1);
+        if (!this.preferredPath) {
+            return breadcrumbs;
         }
-        return breadcrumbs;
+        // Stable partition: crumbs containing the preferred path move to the front,
+        // every other crumb keeps its original relative order. (A single-argument
+        // Array.sort comparator never inspects the second element, so it cannot do this.)
+        const matchesPreferred = (bc) => bc.items.some((item) => !!item.path?.match(this.preferredPath));
+        return [
+            ...breadcrumbs.filter(matchesPreferred),
+            ...breadcrumbs.filter(bc => !matchesPreferred(bc))
+        ];
     }
     setupItemsObservable() {
         return fromTrigger(this.router, this.refresh$, [
             getInjectedHooks(HOOK_BREADCRUMB, this.injectors),
             () => this.factories,
             stateToFactory(this.state$)
-        ]).pipe(distinctUntilChanged$1(), map$1(breadcrumbs => this.sortByPreferredPath(breadcrumbs)), shareReplay$1(1));
+        ]).pipe(distinctUntilChanged$1(), map$1(breadcrumbs => this.sortByPreferredPath(this.dedupeByContent(breadcrumbs))), shareReplay$1(1));
+    }
+    /**
+     * Removes breadcrumbs that resolve to the same crumbs. The same factory can be
+     * picked up from more than one injector (e.g. provided directly and via a plugin
+     * module), which would otherwise surface as duplicate paths in the dropdown.
+     * Genuinely distinct paths (a node reachable through different parents) are kept.
+     *
+     * Only fully label-based crumbs are de-duplicated. Crumbs carrying a `component`
+     * or `template` item are always kept: a `Type` or `TemplateRef` has no stable,
+     * comparable identity here (minified differently across bundles, or a fresh
+     * reference per render), so they cannot be reliably matched.
+     */
+    dedupeByContent(breadcrumbs) {
+        const seen = new Set();
+        return breadcrumbs.filter(breadcrumb => {
+            const items = breadcrumb.items ?? [];
+            if (!items.length || items.some(item => item.component || item.template)) {
+                return true;
+            }
+            const signature = items.map(item => `${item.label ?? ''}|${item.path ?? ''}`).join('>');
+            if (seen.has(signature)) {
+                return false;
+            }
+            seen.add(signature);
+            return true;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbService, deps: [{ token: i0.Injector }, { token: i1$3.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
@@ -14296,8 +14373,24 @@ class DocsService extends ExtensionPointWithoutStateForPlugins {
         this.DEFAULT_DOCS_BASE_URL = 'https://cumulocity.com';
         this.items$ = this.setupItemsObservable();
     }
+    /**
+     * Indicates whether documentation links should be displayed at all. Setting `docsBaseUrl` to
+     * `null` or to an empty string switches the links off, whereas `'/'` keeps them enabled and
+     * resolves to links relative to the host the application is served from.
+     */
+    isDocsEnabled() {
+        const docsBaseUrl = this.options.get('docsBaseUrl', this.DEFAULT_DOCS_BASE_URL);
+        return !isNil(docsBaseUrl) && docsBaseUrl !== '';
+    }
+    /**
+     * Returns the base URL for documentation links, or `null` if the links are switched off with
+     * `docsBaseUrl: null`.
+     */
     getBaseUrl(uiVersion) {
         const docsBaseUrl = this.options.get('docsBaseUrl', this.DEFAULT_DOCS_BASE_URL);
+        if (isNil(docsBaseUrl)) {
+            return null;
+        }
         return this.getUrlWithDocsVersion(docsBaseUrl, uiVersion);
     }
     /**
@@ -14318,11 +14411,15 @@ class DocsService extends ExtensionPointWithoutStateForPlugins {
     get templateStr() {
         return this.options.get('guideHrefTemplate', '${docsBaseUrl}${partialUrl}');
     }
+    /**
+     * Builds a link to a documentation page, or returns `null` if documentation links are switched
+     * off. Absolute links are returned as they are.
+     */
     getUserGuideLink(link) {
         if (/^https?:/.test(link)) {
             return link;
         }
-        if (this.getBaseUrl === null) {
+        if (!this.isDocsEnabled()) {
             return null;
         }
         return this.getLink(this.templateStr, link);
@@ -14339,7 +14436,7 @@ class DocsService extends ExtensionPointWithoutStateForPlugins {
             ? []
             : documentationItems
                 .map((item) => ({ ...item, url: this.getUserGuideLink(item.url) }))
-                .filter(({ url }) => !excludeDefault.some(e => new RegExp(e).test(url)));
+                .filter(({ url }) => !!url && !excludeDefault.some(e => new RegExp(e).test(url)));
         if (links) {
             // backwards compatibility
             links.map((lnk) => {
@@ -14602,39 +14699,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 
 class BreadcrumbOutletComponent {
     constructor() {
-        this.showAll = false;
-        this.breadcrumbs = [];
-        this.dropdownOpen = false;
+        this.breadcrumbs = input([], ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
         this.GROUP_ICON = 'c8y-group';
+        /**
+         * Breadcrumbs that represent a fully resolved path (every crumb has a label).
+         * The group breadcrumb factory also emits an un-resolved breadcrumb that carries
+         * a component placeholder (the "…" ellipsis) instead of labels; that one is not a
+         * real alternate path and must not count towards the dropdown.
+         */
+        this.resolvedBreadcrumbs = computed(() => (this.breadcrumbs() ?? []).filter(b => this.isResolvedPath(b)), ...(ngDevMode ? [{ debugName: "resolvedBreadcrumbs" }] : /* istanbul ignore next */ []));
+        /**
+         * The breadcrumb shown inline. Prefers a resolved path; falls back to the first
+         * breadcrumb (the ellipsis breadcrumb) while ancestors are not loaded yet.
+         */
+        this.inlineBreadcrumb = computed(() => this.resolvedBreadcrumbs()[0] ?? (this.breadcrumbs() ?? [])[0], ...(ngDevMode ? [{ debugName: "inlineBreadcrumb" }] : /* istanbul ignore next */ []));
+        /** Resolved breadcrumbs other than the inline one — these populate the dropdown. */
+        this.alternateBreadcrumbs = computed(() => this.resolvedBreadcrumbs().filter(b => b !== this.inlineBreadcrumb()), ...(ngDevMode ? [{ debugName: "alternateBreadcrumbs" }] : /* istanbul ignore next */ []));
+        /** The toggle is only relevant when the node belongs to more than one path. */
+        this.showToggle = computed(() => this.alternateBreadcrumbs().length > 0, ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
+        this.dropdownOpen = computed(() => this.showToggle() && this.resolvedBreadcrumbs().some(b => b.forceDropdownOpen), ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
     }
     /**
      * For upgrade only. Old angularjs routes start with hash, new ones not.
      */
     normalizePath(path) {
-        return path?.replace(/^#\/?/, '');
+        return path?.replace(/^#\/?/, '') ?? '';
     }
-    ngOnChanges() {
-        this.dropdownOpen =
-            this.breadcrumbs?.length > 1 && this.breadcrumbs.some(b => b.forceDropdownOpen);
+    isResolvedPath(breadcrumb) {
+        return !!breadcrumb?.items?.length && breadcrumb.items.every(item => item.label != null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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        class=\"l-h-1\"\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 p-t-0 p-b-0\"\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-16 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 class=\"l-h-1 a-s-stretch d-flex a-i-center\"><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$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$2.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BreadcrumbOutletComponent, isStandalone: true, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (breadcrumbs() && breadcrumbs().length > 0) {\n  <div class=\"breadcrumbs-container d-flex\">\n    @if (showToggle()) {\n      <div\n        class=\"l-h-1\"\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 p-t-0 p-b-0\"\n          title=\"{{ 'Show all paths' | translate }}\"\n          [attr.aria-label]=\"'Show all paths' | translate\"\n          type=\"button\"\n          dropdownToggle\n        >\n          <i\n            [c8yIcon]=\"breadcrumbDropdown.isOpen ? 'caret-down' : 'caret-right'\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n        <div\n          class=\"dropdown-menu\"\n          *dropdownMenu\n        >\n          @for (breadcrumb of alternateBreadcrumbs(); track breadcrumb) {\n            <div class=\"p-t-8 p-r-16 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\n                        ><i\n                          [c8yIcon]=\"'forward'\"\n                          aria-hidden=\"true\"\n                        ></i\n                      ></span>\n                    }\n                    @if (!isLast) {\n                      <a\n                        class=\"word-break dropdown-item\"\n                        [routerLink]=\"item.path\"\n                      >\n                        @if (item.icon) {\n                          <i\n                            class=\"m-r-4\"\n                            [c8yIcon]=\"item.icon\"\n                            aria-hidden=\"true\"\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                          aria-hidden=\"true\"\n                        ></i>\n                      }\n                      <span>{{ item.label | translate }}</span>\n                    }\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <ul\n      class=\"breadcrumbs text-muted\"\n      [attr.aria-label]=\"'Breadcrumb' | translate\"\n      [attr.role]=\"'navigation'\"\n    >\n      <!-- show only the inline breadcrumb; alternate paths (if any) live in the dropdown -->\n      @for (\n        item of inlineBreadcrumb().items;\n        track item;\n        let firstItem = $first;\n        let isLast = $last\n      ) {\n        <li class=\"text-muted\">\n          @if (!firstItem) {\n            <span class=\"l-h-1 a-s-stretch d-flex a-i-center\"\n              ><i\n                c8yIcon=\"forward\"\n                aria-hidden=\"true\"\n              ></i\n            ></span>\n          }\n          <ng-container\n            *c8yOutlet=\"item.component || item.template; injector: inlineBreadcrumb().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]=\"item.label | translate\"\n              [attr.aria-current]=\"isLast ? 'page' : null\"\n              [routerLink]=\"normalizePath(item.path)\"\n            >\n              @if (item.icon) {\n                <i\n                  class=\"m-r-4\"\n                  [c8yIcon]=\"item.icon\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n              <span>{{ item.label | translate }}</span>\n            </a>\n          }\n          @if (item.label && !item.path) {\n            @if (item.icon) {\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"item.icon\"\n                aria-hidden=\"true\"\n              ></i>\n            }\n            <span\n              title=\"{{ item.label | translate }}\"\n              [attr.aria-current]=\"isLast ? 'page' : null\"\n              >{{ item.label | translate }}</span\n            >\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$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$2.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-breadcrumb-outlet', standalone: true, imports: [
+            args: [{ selector: 'c8y-breadcrumb-outlet', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         IconDirective,
                         TooltipModule,
                         OutletDirective,
                         RouterLink,
                         C8yTranslatePipe,
                         BsDropdownModule
-                    ], template: "@if (breadcrumbs && breadcrumbs.length > 0) {\n  <div class=\"breadcrumbs-container d-flex\">\n    @if (breadcrumbs.length > 1) {\n      <div\n        class=\"l-h-1\"\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 p-t-0 p-b-0\"\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-16 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 class=\"l-h-1 a-s-stretch d-flex a-i-center\"><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
-            }] } });
+                    ], template: "@if (breadcrumbs() && breadcrumbs().length > 0) {\n  <div class=\"breadcrumbs-container d-flex\">\n    @if (showToggle()) {\n      <div\n        class=\"l-h-1\"\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 p-t-0 p-b-0\"\n          title=\"{{ 'Show all paths' | translate }}\"\n          [attr.aria-label]=\"'Show all paths' | translate\"\n          type=\"button\"\n          dropdownToggle\n        >\n          <i\n            [c8yIcon]=\"breadcrumbDropdown.isOpen ? 'caret-down' : 'caret-right'\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n        <div\n          class=\"dropdown-menu\"\n          *dropdownMenu\n        >\n          @for (breadcrumb of alternateBreadcrumbs(); track breadcrumb) {\n            <div class=\"p-t-8 p-r-16 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\n                        ><i\n                          [c8yIcon]=\"'forward'\"\n                          aria-hidden=\"true\"\n                        ></i\n                      ></span>\n                    }\n                    @if (!isLast) {\n                      <a\n                        class=\"word-break dropdown-item\"\n                        [routerLink]=\"item.path\"\n                      >\n                        @if (item.icon) {\n                          <i\n                            class=\"m-r-4\"\n                            [c8yIcon]=\"item.icon\"\n                            aria-hidden=\"true\"\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                          aria-hidden=\"true\"\n                        ></i>\n                      }\n                      <span>{{ item.label | translate }}</span>\n                    }\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <ul\n      class=\"breadcrumbs text-muted\"\n      [attr.aria-label]=\"'Breadcrumb' | translate\"\n      [attr.role]=\"'navigation'\"\n    >\n      <!-- show only the inline breadcrumb; alternate paths (if any) live in the dropdown -->\n      @for (\n        item of inlineBreadcrumb().items;\n        track item;\n        let firstItem = $first;\n        let isLast = $last\n      ) {\n        <li class=\"text-muted\">\n          @if (!firstItem) {\n            <span class=\"l-h-1 a-s-stretch d-flex a-i-center\"\n              ><i\n                c8yIcon=\"forward\"\n                aria-hidden=\"true\"\n              ></i\n            ></span>\n          }\n          <ng-container\n            *c8yOutlet=\"item.component || item.template; injector: inlineBreadcrumb().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]=\"item.label | translate\"\n              [attr.aria-current]=\"isLast ? 'page' : null\"\n              [routerLink]=\"normalizePath(item.path)\"\n            >\n              @if (item.icon) {\n                <i\n                  class=\"m-r-4\"\n                  [c8yIcon]=\"item.icon\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n              <span>{{ item.label | translate }}</span>\n            </a>\n          }\n          @if (item.label && !item.path) {\n            @if (item.icon) {\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"item.icon\"\n                aria-hidden=\"true\"\n              ></i>\n            }\n            <span\n              title=\"{{ item.label | translate }}\"\n              [attr.aria-current]=\"isLast ? 'page' : null\"\n              >{{ item.label | translate }}</span\n            >\n          }\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
+        }], propDecorators: { breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }] } });
 
 class SearchOutletComponent {
     constructor(alertService) {
@@ -14724,7 +14831,7 @@ class HeaderBarComponent {
         this.headerService.closeRightDrawer();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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: "17.0.0", version: "21.2.19", 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\n          class=\"p-relative a-s-stretch no-pointer\"\n          style=\"order: 4\"\n        >\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$4.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: "21.2.19", 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\n          class=\"p-relative a-s-stretch no-pointer\"\n          style=\"order: 4\"\n        >\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"] }, { 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$4.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: "21.2.19", ngImport: i0, type: HeaderBarComponent, decorators: [{
             type: Component,
@@ -16171,11 +16278,11 @@ class BreadcrumbItemComponent {
         this.injector = _injector;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbItemComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: BreadcrumbItemComponent, isStandalone: true, selector: "c8y-breadcrumb-item", inputs: { icon: "icon", translate: "translate", label: "label", path: "path", injector: "injector" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n  <ng-content></ng-content>\n</ng-template>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: BreadcrumbItemComponent, isStandalone: true, selector: "c8y-breadcrumb-item", inputs: { icon: "icon", translate: "translate", label: "label", path: "path", injector: "injector" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-breadcrumb-item', standalone: true, template: "<ng-template #template>\n  <ng-content></ng-content>\n</ng-template>" }]
+            args: [{ selector: 'c8y-breadcrumb-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }], propDecorators: { icon: [{
                 type: Input
             }], translate: [{
@@ -16204,11 +16311,11 @@ class BreadcrumbComponent {
         this.breadcrumbService.remove(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: BreadcrumbComponent, isStandalone: true, selector: "c8y-breadcrumb", queries: [{ propertyName: "contentChildItems", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: BreadcrumbComponent, isStandalone: true, selector: "c8y-breadcrumb", queries: [{ propertyName: "contentChildItems", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-breadcrumb', standalone: true, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>" }]
+            args: [{ selector: 'c8y-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: BreadcrumbService }], propDecorators: { contentChildItems: [{
                 type: ContentChildren,
                 args: [BreadcrumbItemComponent]
@@ -27246,19 +27353,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }], ctorParameters: () => [{ type: RouterService }] });
 
 class GuideHrefDirective {
-    set baseHref(href) {
-        this.htmlAnchor.href = `${href}/${this.c8yGuideHref}`;
-    }
-    constructor(elementRef) {
+    constructor(elementRef, docsService) {
         this.elementRef = elementRef;
+        this.docsService = docsService;
         this.htmlAnchor = this.elementRef.nativeElement;
         if (!this.htmlAnchor.hasAttribute('target')) {
             this.htmlAnchor.setAttribute('target', '_blank');
             this.htmlAnchor.setAttribute('rel', 'noopener noreferrer');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GuideHrefDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: GuideHrefDirective, isStandalone: true, selector: "[c8y-guide-href]", inputs: { c8yGuideHref: ["c8y-guide-href", "c8yGuideHref"] }, ngImport: i0 }); }
+    ngOnChanges() {
+        const guideHref = this.docsService.getUserGuideLink(this.c8yGuideHref);
+        if (!guideHref) {
+            // documentation links are switched off, or no link can be built from `guideHrefTemplate`
+            this.htmlAnchor.removeAttribute('href');
+            return;
+        }
+        this.htmlAnchor.href = guideHref;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GuideHrefDirective, deps: [{ token: i0.ElementRef }, { token: DocsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: GuideHrefDirective, isStandalone: true, selector: "[c8y-guide-href]", inputs: { c8yGuideHref: ["c8y-guide-href", "c8yGuideHref"] }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GuideHrefDirective, decorators: [{
             type: Directive,
@@ -27266,7 +27380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     selector: '[c8y-guide-href]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { c8yGuideHref: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DocsService }], propDecorators: { c8yGuideHref: [{
                 type: Input,
                 args: ['c8y-guide-href']
             }] } });
@@ -27285,12 +27399,14 @@ class GuideDocsComponent {
         this.docs = docs;
         this.el = el;
         this.renderer = renderer;
+        /**
+         * Whether the projected content should be displayed. It only becomes `true` once the anchor
+         * attributes have been resolved, and stays `false` if documentation links are switched off.
+         */
+        this.ready = false;
         this.destroyed$ = new ReplaySubject(1);
         this.translateDirective = translateDirective;
     }
-    ngOnInit() {
-        this.baseUrl = this.docs.getBaseUrl();
-    }
     /**
      * After content is initialized we subscribe for translation events, then we are able to modify
      * anchor just as C8yGuideHrefDirective does.
@@ -27308,9 +27424,7 @@ class GuideDocsComponent {
         else {
             this.replaceAnchorAttributes();
         }
-        this.links.forEach(guide => {
-            guide.baseHref = this.baseUrl;
-        });
+        this.ready = this.docs.isDocsEnabled();
     }
     /**
      * Find and modify anchor elements
@@ -27318,7 +27432,12 @@ class GuideDocsComponent {
     replaceAnchorAttributes() {
         const anchors = this.findGuideAnchors(this.el.nativeElement);
         anchors.forEach(a => {
-            const guideHref = `${this.baseUrl}/${a.getAttribute('c8y-guide-href')}`;
+            const guideHref = this.docs.getUserGuideLink(a.getAttribute('c8y-guide-href'));
+            if (!guideHref) {
+                // e.g. `guideHrefTemplate` is empty, so no link can be built: keep the text, drop the link
+                this.renderer.removeAttribute(a, 'href');
+                return;
+            }
             this.renderer.setAttribute(a, 'href', guideHref);
             if (!a.hasAttribute('target')) {
                 this.renderer.setAttribute(a, 'target', '_blank');
@@ -27352,17 +27471,14 @@ class GuideDocsComponent {
         this.destroyed$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GuideDocsComponent, deps: [{ token: DocsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: C8yTranslateDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GuideDocsComponent, isStandalone: true, selector: "[c8y-guide-docs]", queries: [{ propertyName: "translateDirective", first: true, predicate: C8yTranslateDirective, descendants: true, static: true }, { propertyName: "links", predicate: GuideHrefDirective, descendants: true }], ngImport: i0, template: "@if (!!baseUrl) {\n  <ng-content></ng-content>\n}\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GuideDocsComponent, isStandalone: true, selector: "[c8y-guide-docs]", queries: [{ propertyName: "translateDirective", first: true, predicate: C8yTranslateDirective, descendants: true, static: true }], ngImport: i0, template: "@if (ready) {\n  <ng-content></ng-content>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GuideDocsComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[c8y-guide-docs]', standalone: true, template: "@if (!!baseUrl) {\n  <ng-content></ng-content>\n}\n" }]
+            args: [{ selector: '[c8y-guide-docs]', standalone: true, template: "@if (ready) {\n  <ng-content></ng-content>\n}\n" }]
         }], ctorParameters: () => [{ type: DocsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: C8yTranslateDirective, decorators: [{
                     type: Optional
-                }] }], propDecorators: { links: [{
-                type: ContentChildren,
-                args: [GuideHrefDirective, { descendants: true }]
-            }], translateDirective: [{
+                }] }], propDecorators: { translateDirective: [{
                 type: ContentChild,
                 args: [C8yTranslateDirective, { static: true }]
             }] } });