@zambon-dev/library 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -23,6 +23,51 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### ⚠ Breaking Changes / Migration
 
+## [1.4.0] - 2026-09-08
+
+### Added
+
+- **Sidebar menu items can now open an external destination instead of an internal route.**
+  `SidebarMenu` gained an optional `openMode` (`SidebarMenuOpenMode`): `Internal` (the default),
+  `ExternalNewTab`, or `ExternalEmbedded`. Read it through the exported
+  `toSidebarMenuOpenMode(menu.openMode)` helper rather than comparing the field directly — the
+  value is deserialized straight from your menu endpoint, so the helper accepts the mode as a
+  camelCase string, as a case-insensitive variant of it, or as the enum ordinal an ASP.NET Core
+  enum property serializes to. Anything unrecognized — an omitted field from a backend that
+  predates this feature, `null`, or a mode a newer version adds — degrades to `Internal`, so a
+  menu you have not touched behaves exactly as it does today.
+
+- **`SidebarService.menuExternalUrlSelected`** — a separate output carrying the items whose mode
+  is not `Internal`. They are deliberately **not** announced on `menuUrlSelected`, which keeps its
+  existing contract: the URL it carries is always an Angular route. Acting on external items needs
+  `@zambon-dev/shared` (which opens the browser tab or the embedded view), or your own subscription
+  to the new output. Until then an external item highlights and does nothing, rather than sending
+  `https://…` to the router.
+
+- **`SidebarConfigs.externalLinkText`** — the tooltip on items that open in a new browser tab.
+  Defaults to `Opens in a new browser tab` and, like `errorText` and `loadingText`, is rendered
+  as-is rather than through the translate pipe, so pass an already-localized string.
+
+### Changed
+
+- **Selection now follows the open mode.** An item that opens in a new browser tab is treated as an
+  action rather than a destination: it takes no selection pill and, importantly, does not clear the
+  selection of the view the user is still looking at. Items that open embedded become real
+  application tabs and keep today’s selection behaviour exactly. A parent that also carries a URL
+  still expands, so it cannot become impossible to open.
+
+- **Items that open in a new browser tab show a trailing outbound glyph.** It sits in the same
+  absolutely-positioned slot as the parent chevron, so a long label still ellipsises inside the
+  anchor and the collapsed rail is unchanged, and it fades in with the sidebar like the other
+  affordances. Embedded items get no glyph — they stay inside the application. Items with no
+  `openMode`, or with `openMode: Internal`, render exactly as before.
+
+### ⚠ Breaking Changes / Migration
+
+None. `openMode` is optional, so a backend that does not send it produces today’s behaviour, and
+`menuUrlSelected` is unchanged for internal items. If you subscribe to `menuUrlSelected` yourself
+and want external items too, add a subscription to `menuExternalUrlSelected`.
+
 ## [1.3.2] - 2026-07-30
 
 ### Added
@@ -155,7 +200,8 @@ config options and the `getUserProfile()` method still exist but are no longer c
   available via [GitHub Releases](https://github.com/RicardoZambon/ZLibraries/releases) and the
   `library-v*` tags.
 
-[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/library-v1.3.2...HEAD
+[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/library-v1.4.0...HEAD
+[1.4.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.4.0
 [1.3.2]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.3.2
 [1.3.1]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.3.1
 [1.2.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.2.0

package/fesm2022/zambon-dev-library.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Component, inject, Injectable, EventEmitter, InjectionToken, Input, Output, KeyValueDiffers, ViewContainerRef, TemplateRef, ElementRef, HostListener, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, NgZone, Directive, ContentChildren, Pipe, NgModule } from '@angular/core';
-import { Subject, ReplaySubject, take, throwError, tap, map, takeUntil, filter, debounceTime, startWith, pairwise, Observable, forkJoin, switchMap, of, delay } from 'rxjs';
+import { Subject, ReplaySubject, take, throwError, tap, map, takeUntil, filter, debounceTime, startWith, pairwise, Observable, forkJoin, switchMap, of, delay, merge } from 'rxjs';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
@@ -974,6 +974,8 @@ const SIDEBAR_CONFIGS = new InjectionToken('', {
 });
 class SidebarConfigs {
     errorText = 'Error';
+    /** Tooltip for items that open in a new browser tab. Rendered as-is, like {@link errorText}. */
+    externalLinkText = 'Opens in a new browser tab';
     loadingText = 'Loading';
     logoCollapsedPath;
     logoExpandedPath;
@@ -990,6 +992,14 @@ class SidebarMenu {
     id = 0;
     label = '';
     isSelected = false;
+    /**
+     * How {@link url} is opened. An absent value means {@link SidebarMenuOpenMode.Internal}.
+     *
+     * Left optional and without an initializer on purpose: the constructor is an `Object.assign`,
+     * which would overwrite a default with the `null` a nullable backend column serializes to.
+     * Read it through `toSidebarMenuOpenMode(menu.openMode)` instead of comparing it directly.
+     */
+    openMode;
     parent = null;
     region;
     url;
@@ -998,11 +1008,62 @@ class SidebarMenu {
     }
 }
 
+/**
+ * How a {@link SidebarMenu}'s `url` is opened when the item is clicked.
+ *
+ * Read the value off a menu through {@link toSidebarMenuOpenMode} rather than comparing the
+ * field directly: it crosses HTTP, so it can arrive as a string, as a number, as `null`, or not
+ * at all.
+ */
+var SidebarMenuOpenMode;
+(function (SidebarMenuOpenMode) {
+    /** `url` is an internal Angular route and opens an application tab. The default. */
+    SidebarMenuOpenMode["Internal"] = "internal";
+    /** `url` is an absolute http(s) address and opens in a new browser tab. */
+    SidebarMenuOpenMode["ExternalNewTab"] = "externalNewTab";
+    /** `url` is an absolute http(s) address and opens embedded in an application tab. */
+    SidebarMenuOpenMode["ExternalEmbedded"] = "externalEmbedded";
+})(SidebarMenuOpenMode || (SidebarMenuOpenMode = {}));
+/** Ordinals matching the mode column stored by the backend, for a numeric payload. */
+const ORDINAL_MODES = [
+    SidebarMenuOpenMode.Internal,
+    SidebarMenuOpenMode.ExternalNewTab,
+    SidebarMenuOpenMode.ExternalEmbedded,
+];
+/**
+ * Parses the wire value of `SidebarMenu.openMode`.
+ *
+ * Deliberately a parser rather than a `?? Internal` fallback, because the field is deserialized
+ * straight from each application's menu endpoint and its shape is not guaranteed:
+ *
+ * - a **number** is read as the backend's enum ordinal, which is what an ASP.NET Core enum
+ *   property serializes to unless that backend registers a string converter;
+ * - a **string** is matched case-insensitively, so `'externalNewTab'` and `'ExternalNewTab'`
+ *   both work;
+ * - anything else — an omitted field from a backend that predates this feature, `null`, or a
+ *   mode introduced by a newer one — degrades to {@link SidebarMenuOpenMode.Internal}.
+ *
+ * Degrading to `Internal` keeps an unrecognized mode behaving the way menus behaved before
+ * external destinations existed, instead of producing an item that does nothing when clicked.
+ */
+function toSidebarMenuOpenMode(value) {
+    if (typeof value === 'number') {
+        return ORDINAL_MODES[value] ?? SidebarMenuOpenMode.Internal;
+    }
+    if (typeof value === 'string') {
+        const normalized = value.toLowerCase();
+        return ORDINAL_MODES.find((mode) => mode.toLowerCase() === normalized)
+            ?? SidebarMenuOpenMode.Internal;
+    }
+    return SidebarMenuOpenMode.Internal;
+}
+
 class SidebarService {
     //#region ViewChilds, Inputs, Outputs
     childrenFailed = new EventEmitter();
     childrenLoading = new EventEmitter();
     childrenInitialized = new EventEmitter();
+    menuExternalUrlSelected = new EventEmitter();
     menuUrlSelected = new EventEmitter();
     selectionChanged = new EventEmitter();
     //#endregion
@@ -1049,6 +1110,19 @@ class SidebarService {
             this.loadChildren(menu);
         }
         const hasUrl = (menu.url?.length ?? 0) > 0;
+        const openMode = toSidebarMenuOpenMode(menu.openMode);
+        const isExternal = hasUrl && openMode !== SidebarMenuOpenMode.Internal;
+        // External destinations are announced on their own emitter, so a consumer that only knows
+        // menuUrlSelected never receives an absolute URL it would hand to the Angular router.
+        const urlSelected = isExternal ? this.menuExternalUrlSelected : this.menuUrlSelected;
+        // Opening a new browser tab is an action, not a destination: the user stays on the view
+        // already on screen, so the item must neither take the selection nor clear that view's.
+        // Parents still fall through, so a parent that carries a URL keeps expanding instead of
+        // becoming impossible to open.
+        if (isExternal && openMode === SidebarMenuOpenMode.ExternalNewTab && menu.childCount === 0) {
+            urlSelected.emit(menu);
+            return;
+        }
         // In case we're deselecting the menu because a child was selected, we need to keep track of the original selection state.
         const isSelected = menu.isSelected;
         if (!!this.selectedMenu && this.selectedMenu !== menu) {
@@ -1058,12 +1132,12 @@ class SidebarService {
             this.selectedMenu = menu;
             this.selectMenu(menu);
             if (hasUrl) {
-                this.menuUrlSelected.emit(menu);
+                urlSelected.emit(menu);
             }
         }
         else if (hasUrl) {
             // Menu with a URL is already selected — navigate again instead of toggling off.
-            this.menuUrlSelected.emit(menu);
+            urlSelected.emit(menu);
         }
         else {
             this.selectedMenu = null;
@@ -3123,6 +3197,7 @@ class SidebarItemComponent extends BaseComponent {
     isSelected = false;
     _childHeight = 0;
     changeDetectorRef = inject(ChangeDetectorRef);
+    sidebarConfigs = inject(SIDEBAR_CONFIGS);
     sidebarService = inject(SidebarService);
     //#endregion
     //#region Properties
@@ -3132,6 +3207,9 @@ class SidebarItemComponent extends BaseComponent {
     get areChildrenLoaded() {
         return this.isParent && (this.menu.children?.length ?? 0) > 0;
     }
+    get externalLinkText() {
+        return this.sidebarConfigs.externalLinkText;
+    }
     get isActive() {
         return this.sidebarService.isActive;
     }
@@ -3141,6 +3219,10 @@ class SidebarItemComponent extends BaseComponent {
     get isParent() {
         return this.menu.childCount > 0;
     }
+    get opensInNewBrowserTab() {
+        return (this.menu.url?.length ?? 0) > 0
+            && toSidebarMenuOpenMode(this.menu.openMode) === SidebarMenuOpenMode.ExternalNewTab;
+    }
     get hasIcon() {
         return !!this.menu.icon && this.menu.icon.length > 0;
     }
@@ -3216,7 +3298,7 @@ class SidebarItemComponent extends BaseComponent {
         this._childHeight = this.getChildHeight(this.menu);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n    <div #menuContainer\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a>\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n    <div #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
@@ -3231,7 +3313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         '[class.first-level]': 'level === 0',
                         '[class.last-child]': 'isLast',
                         '[class.selected]': 'isSelected',
-                    }, template: "<li>\n    <div #menuContainer\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a>\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
+                    }, template: "<li>\n    <div #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuContainer: [{
                 type: ViewChild,
                 args: ['menuContainer']
@@ -3305,7 +3387,7 @@ class SidebarComponent extends BaseComponent {
         this.updateShouldActivate();
     }
     ngOnInit() {
-        this.sidebarService.menuUrlSelected
+        merge(this.sidebarService.menuUrlSelected, this.sidebarService.menuExternalUrlSelected)
             .pipe(takeUntil(this.destroy$))
             .subscribe((_menu) => this.deactivate());
         this.sidebarService.loadRoot()
@@ -3849,5 +3931,5 @@ class DateValidators {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseComponent, BaseDataset, CatalogSelectComponent, CatalogService, DataGridComponent, DataGridConfigsProvider, DataGridDataset, DataGridRowComponent, DataProviderService, DateHelpers, DateValidators, EnumTranslatePipe, FormGroupComponent, FormGroupService, FormInputComponent, FormInputGroupComponent, FormService, GridConfigsProvider, GridDataset, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, GuidHelper, LibraryModule, ModalComponent, MultiEditorComponent, MultiEditorDataset, MultiSelectComponent, MultiSelectResultDataset, MultiSelectResultGridComponent, ReplaceManyPipe, ReplacePipe, RibbonButtonComponent, RibbonComponent, RibbonGroupChild, RibbonGroupComponent, RouterFormatter, SIDEBAR_CONFIGS, ScrollSpyDirective, SidebarComponent, SidebarConfigs, SidebarMenu, SidebarService };
+export { BaseComponent, BaseDataset, CatalogSelectComponent, CatalogService, DataGridComponent, DataGridConfigsProvider, DataGridDataset, DataGridRowComponent, DataProviderService, DateHelpers, DateValidators, EnumTranslatePipe, FormGroupComponent, FormGroupService, FormInputComponent, FormInputGroupComponent, FormService, GridConfigsProvider, GridDataset, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, GuidHelper, LibraryModule, ModalComponent, MultiEditorComponent, MultiEditorDataset, MultiSelectComponent, MultiSelectResultDataset, MultiSelectResultGridComponent, ReplaceManyPipe, ReplacePipe, RibbonButtonComponent, RibbonComponent, RibbonGroupChild, RibbonGroupComponent, RouterFormatter, SIDEBAR_CONFIGS, ScrollSpyDirective, SidebarComponent, SidebarConfigs, SidebarMenu, SidebarMenuOpenMode, SidebarService, toSidebarMenuOpenMode };
 //# sourceMappingURL=zambon-dev-library.mjs.map