@zambon-dev/framework 1.2.1 → 1.3.1

package/CHANGELOG.md

@@ -23,6 +23,83 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### ⚠ Breaking Changes / Migration
 
+## [1.3.1] - 2026-09-10
+
+### Fixed
+
+- **Returning to an already-open tab no longer crashes with `Maximum call stack size exceeded`.**
+  It affected any screen whose route nests two empty-path levels — the shape every list screen uses:
+  `path: ''` with `DefaultTabViewComponent`, and a child `path: ''` with the list component.
+
+  `CustomReuseStrategy` keyed its detached-view cache on `route.component.name`, and a production
+  build renames every class: esbuild wraps each component as `X = (() => { class i { } return i; })()`,
+  so the name is one mangled letter that the whole chunk shares. An empty path contributes no URL
+  segment, so both levels also resolved to the same URL — which left the two cache keys identical.
+  Storing one handle overwrote the other, both route levels were then handed the same detached view,
+  and Angular blew the stack building a router state whose node was its own descendant.
+
+  The key is now built from the component's **identity** and the route's depth rather than its name.
+  Applications need to change nothing. Worth knowing when reading old reports of this crash: it only
+  ever reproduced in a minified build — `ng serve` keeps real class names — and only on the screens
+  whose chunk happened to mangle to the same letter as the framework's, so a rebuild could move the
+  symptom from one screen to another.
+
+## [1.3.0] - 2026-07-30
+
+### Added
+
+- `framework-button-export` now accepts a **`defaultOption` `@Input()`** — the index into `options`
+  exported when the main button itself is clicked, defaulting to `0` (Excel). This mirrors the input
+  `framework-button-save` already had; `-1` means "no default" and makes the button only toggle its
+  dropdown. See **Changed** below for the behaviour this changes by default.
+
+### Changed
+
+- **`framework-button-export` now exports on a single click**, to Excel by default, instead of only
+  opening its format menu. `RibbonButtonComponent` treats a `defaultOption` of -1 as "no default" and
+  merely toggles the dropdown; Export never set one, so the common case took two clicks while
+  `framework-button-save` (which sets 0) took one. Export now sets 0 as well, through the new
+  `defaultOption` `@Input()`. The format menu is unchanged and still reachable from the button's
+  dropdown caret, so every format remains available.
+
+### Fixed
+
+- **Routed list views now fill the available height automatically.** `DefaultTabViewComponent` gave its
+  routed child no layout and `lib-data-grid` has no `flex-grow` of its own, so a grid collapsed to its
+  `rowsToDisplay × rowHeight` minimum with empty space beneath it, and every consuming list component
+  had to repeat the same `:host { flex; flex-grow; overflow: hidden }` + `lib-data-grid { flex-grow }`
+  stylesheet to compensate. `TabViewList` now carries a `framework-view-list` host class — inherited by
+  every subclass — which `DefaultTabViewComponent` styles, so **consuming apps can delete those
+  per-component stylesheets**. Routed screens that do not extend `TabViewList` (forms, dashboards) are
+  unaffected.
+
+- `framework-default-tab-view` and `framework-default-details-tab-view` no longer log
+  `NG0100: ExpressionChangedAfterItHasBeenCheckedError` on every render in development mode.
+  Both views assigned a placeholder ribbon template from `ngAfterViewInit` — after Angular had
+  already checked the ribbon's `*ngTemplateOutlet` binding — which tripped the dev-mode change
+  detection check one to three times per load. The placeholder rendered no content, so it has
+  been removed and the outlet is now left empty until a view publishes its own `#ribbon`
+  template. The rendered output is unchanged, and ribbon buttons still appear immediately for
+  list and detail screens.
+
+### ⚠ Breaking Changes / Migration
+
+None — nothing has to change for your app to compile against this release. Two behaviour changes to
+check, and one optional cleanup:
+
+- **Absolutely-positioned content inside a routed list view is now clipped.** The full-height layout
+  applied to `framework-view-list` includes `overflow: hidden`, so a popover, dropdown or tooltip that
+  a list screen renders with `position: absolute` inside its own host is now cut off at the host's
+  edges. Apps that had already written the equivalent `:host { overflow: hidden }` stylesheet by hand
+  are unaffected — the clipping was already in place there. Only list screens that had no such
+  stylesheet change. Fix by portaling the content out of the host (CDK Overlay, as `lib-catalog-select`
+  does) rather than relying on `position: absolute`.
+- If you relied on `framework-button-export`'s first click opening the format menu rather than
+  exporting, set `[defaultOption]="-1"` to restore that behaviour.
+- *Optional cleanup:* components extending `TabViewList` can now delete their
+  `:host { display: flex; flex-grow: 1; overflow: hidden }` / `lib-data-grid { flex-grow: 1 }`
+  stylesheets — `DefaultTabViewComponent` styles the inherited `framework-view-list` host class.
+
 ## [1.2.1] - 2026-07-29
 
 ### Fixed
@@ -65,7 +142,9 @@ None.
   available via [GitHub Releases](https://github.com/RicardoZambon/ZLibraries/releases) and the
   `framework-v*` tags.
 
-[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/framework-v1.2.1...HEAD
+[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/framework-v1.3.1...HEAD
+[1.3.1]: https://github.com/RicardoZambon/ZLibraries/releases/tag/framework-v1.3.1
+[1.3.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/framework-v1.3.0
 [1.2.1]: https://github.com/RicardoZambon/ZLibraries/releases/tag/framework-v1.2.1
 [1.2.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/framework-v1.2.0
 [1.1.1]: https://github.com/RicardoZambon/ZLibraries/releases/tag/framework-v1.1.1

package/fesm2022/zambon-dev-framework.mjs

@@ -121,6 +121,8 @@ let CustomReuseStrategy = class CustomReuseStrategy {
     tabService;
     applicationRef = inject(ApplicationRef);
     cachedHandles = {};
+    componentIDs = new WeakMap();
+    nextComponentID = 1;
     //#endregion
     //#region Properties
     //#endregion
@@ -193,8 +195,39 @@ let CustomReuseStrategy = class CustomReuseStrategy {
         if (this.clones[url]) {
             url = this.clones[url];
         }
-        const componentName = route.component?.name ?? '';
-        return `${url}-${componentName}`;
+        // The component is identified by identity, never by name. A production build renames every
+        // class: esbuild wraps each component as `X = (() => { class i { } return i; })()`, so
+        // `component.name` is a single mangled letter that the whole chunk shares. Nested empty-path
+        // routes already resolve to the same URL, because an empty path contributes no segment, so a
+        // key built from the name collapsed a screen's tab view and its list into one entry: storing
+        // one overwrote the other, both levels were then handed the same detached view, and Angular
+        // blew the stack building a router state whose node was its own descendant. That reproduced
+        // only in a minified build, and only on the screens whose chunk happened to mangle to the
+        // same letter as the framework's.
+        //
+        // The depth is part of the key too, so two sibling routes sharing a component type under one
+        // URL cannot collide either.
+        return `${url}-${this.getRouteDepth(route)}-${this.getComponentID(route.component)}`;
+    }
+    getComponentID(component) {
+        if (typeof component !== 'function') {
+            return 0;
+        }
+        let componentID = this.componentIDs.get(component);
+        if (componentID === undefined) {
+            componentID = this.nextComponentID++;
+            this.componentIDs.set(component, componentID);
+        }
+        return componentID;
+    }
+    getRouteDepth(route) {
+        let depth = 0;
+        let current = route.parent;
+        while (current) {
+            depth++;
+            current = current.parent;
+        }
+        return depth;
     }
     getUrlFromRoute(route) {
         const segments = [];
@@ -1263,6 +1296,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 const MaxExportRows = 50000;
 class ButtonExportComponent extends BaseButton {
     //#region ViewChilds, Inputs, Outputs
+    /**
+     * Index into `options` exported when the main button is clicked, defaulting to Excel.
+     * `RibbonButtonComponent` treats -1 as "no default" and merely toggles the dropdown, which left
+     * Export needing two clicks for the common case while Save (which sets 0) needed one. Set -1 to
+     * restore the dropdown-only behaviour.
+     */
+    defaultOption = 0;
     fileBaseName = 'export';
     //#endregion
     //#region Variables
@@ -1337,15 +1377,17 @@ class ButtonExportComponent extends BaseButton {
         URL.revokeObjectURL(url);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ButtonExportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: ButtonExportComponent, isStandalone: true, selector: "framework-button-export", inputs: { fileBaseName: "fileBaseName" }, providers: [{ provide: RibbonGroupChild, useExisting: forwardRef(() => ButtonExportComponent) }], usesInheritance: true, ngImport: i0, template: "<lib-ribbon-button *ngIf=\"visible\"\nlabel=\"Button-Export\"\nicon=\"fa-file-export\"\n[disabled]=\"isButtonDisabled\"\n[loading]=\"loading\"\n[iconSize]=\"iconSize\"\n[options]=\"options\"\n[tooltip]=\"tooltip\"\n(action)=\"onButtonClicked($event)\">\n</lib-ribbon-button>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RibbonButtonComponent, selector: "lib-ribbon-button", inputs: ["color", "defaultOption", "disabled", "icon", "iconSize", "label", "loading", "options", "tooltip"], outputs: ["action"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: ButtonExportComponent, isStandalone: true, selector: "framework-button-export", inputs: { defaultOption: "defaultOption", fileBaseName: "fileBaseName" }, providers: [{ provide: RibbonGroupChild, useExisting: forwardRef(() => ButtonExportComponent) }], usesInheritance: true, ngImport: i0, template: "<lib-ribbon-button *ngIf=\"visible\"\nlabel=\"Button-Export\"\nicon=\"fa-file-export\"\n[defaultOption]=\"defaultOption\"\n[disabled]=\"isButtonDisabled\"\n[loading]=\"loading\"\n[iconSize]=\"iconSize\"\n[options]=\"options\"\n[tooltip]=\"tooltip\"\n(action)=\"onButtonClicked($event)\">\n</lib-ribbon-button>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RibbonButtonComponent, selector: "lib-ribbon-button", inputs: ["color", "defaultOption", "disabled", "icon", "iconSize", "label", "loading", "options", "tooltip"], outputs: ["action"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ButtonExportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'framework-button-export', imports: [
                         NgIf,
                         RibbonButtonComponent,
-                    ], providers: [{ provide: RibbonGroupChild, useExisting: forwardRef(() => ButtonExportComponent) }], template: "<lib-ribbon-button *ngIf=\"visible\"\nlabel=\"Button-Export\"\nicon=\"fa-file-export\"\n[disabled]=\"isButtonDisabled\"\n[loading]=\"loading\"\n[iconSize]=\"iconSize\"\n[options]=\"options\"\n[tooltip]=\"tooltip\"\n(action)=\"onButtonClicked($event)\">\n</lib-ribbon-button>\n" }]
-        }], ctorParameters: () => [], propDecorators: { fileBaseName: [{
+                    ], providers: [{ provide: RibbonGroupChild, useExisting: forwardRef(() => ButtonExportComponent) }], template: "<lib-ribbon-button *ngIf=\"visible\"\nlabel=\"Button-Export\"\nicon=\"fa-file-export\"\n[defaultOption]=\"defaultOption\"\n[disabled]=\"isButtonDisabled\"\n[loading]=\"loading\"\n[iconSize]=\"iconSize\"\n[options]=\"options\"\n[tooltip]=\"tooltip\"\n(action)=\"onButtonClicked($event)\">\n</lib-ribbon-button>\n" }]
+        }], ctorParameters: () => [], propDecorators: { defaultOption: [{
+                type: Input
+            }], fileBaseName: [{
                 type: Input
             }] } });
 
@@ -2541,6 +2583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             args: [{ template: '' }]
         }], ctorParameters: () => [{ type: i1$2.DataGridDataset }, { type: i2.ActivatedRoute }, { type: TabService }] });
 
+// The host class is inherited by every subclass (Angular merges hostAttrs from a base component
+// definition), which is what lets DefaultTabViewComponent give routed list screens a full-height
+// layout without each one declaring its own stylesheet. Plain class name, NOT Tailwind utilities:
+// library SCSS resolves @apply at library-build time, whereas a utility class named here would
+// have to be generated by each consumer's own Tailwind build.
 class TabViewList extends TabViewBase {
     //#region ViewChilds, Inputs, Outputs
     //#endregion
@@ -2593,11 +2640,11 @@ class TabViewList extends TabViewBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: TabViewList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: TabViewList, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: TabViewList, isStandalone: true, selector: "ng-component", host: { classAttribute: "framework-view-list" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: TabViewList, decorators: [{
             type: Component,
-            args: [{ template: '' }]
+            args: [{ host: { class: 'framework-view-list' }, template: '' }]
         }], ctorParameters: () => [] });
 
 class ListView extends TabViewList {
@@ -3206,7 +3253,6 @@ class DefaultTabViewComponent {
     changeDetectorRef;
     tabViewService;
     //#region ViewChilds, Inputs, Outputs
-    emptyRibbonTemplate;
     //#endregion
     //#region Variables
     destroy$ = new Subject();
@@ -3220,12 +3266,6 @@ class DefaultTabViewComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.tabViewService = tabViewService;
     }
-    ngAfterViewInit() {
-        if (!this.ribbonTemplate) {
-            // If there are no template assigned to the ribbon, we use the empty template.
-            this.updateRibbonTemplate();
-        }
-    }
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.complete();
@@ -3249,26 +3289,26 @@ class DefaultTabViewComponent {
     //#region Public methods
     //#endregion
     //#region Private methods
-    updateRibbonTemplate(template = undefined) {
-        const isRealTemplate = !!template;
-        if (!template) {
-            template = this.emptyRibbonTemplate;
-        }
+    updateRibbonTemplate(template) {
         this.ribbonTemplate = template;
-        if (isRealTemplate) {
+        if (template) {
             // Real template from a child view — render immediately so buttons appear
             // without waiting for the next change detection cycle (user interaction).
             this.changeDetectorRef.detectChanges();
         }
         else {
-            // Empty/fallback template — defer rendering to avoid briefly flashing
-            // an empty ribbon during component creation (the child view will push
-            // the real template moments later in the same initialization cycle).
+            // No template for this view — defer clearing the ribbon to avoid tearing down
+            // an already rendered one for a frame while switching views (the incoming view
+            // pushes its real template moments later in the same initialization cycle).
+            //
+            // Never assign the ribbon template from a lifecycle hook that runs after the first
+            // change detection pass (e.g. ngAfterViewInit): the outlet below has already been
+            // checked by then, so mutating it there trips NG0100 in dev mode.
             this.changeDetectorRef.markForCheck();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DefaultTabViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TabViewService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: DefaultTabViewComponent, isStandalone: true, selector: "framework-default-tab-view", providers: [{ provide: TabViewService }], viewQueries: [{ propertyName: "emptyRibbonTemplate", first: true, predicate: ["emptyRibbon"], descendants: true }], ngImport: i0, template: "<lib-ribbon>\n    <ng-container *ngTemplateOutlet=\"ribbonTemplate\"></ng-container>\n\n    <ng-template #emptyRibbon>\n    </ng-template>\n</lib-ribbon>\n\n<router-outlet>\n</router-outlet>", styles: [":host-context{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RibbonComponent, selector: "lib-ribbon" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: DefaultTabViewComponent, isStandalone: true, selector: "framework-default-tab-view", providers: [{ provide: TabViewService }], ngImport: i0, template: "<lib-ribbon>\n    <ng-container *ngTemplateOutlet=\"ribbonTemplate ?? null\"></ng-container>\n</lib-ribbon>\n\n<router-outlet>\n</router-outlet>\n", styles: ["@charset \"UTF-8\";:host-context{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden}:host ::ng-deep .framework-view-list{display:flex;flex-grow:1;flex-direction:column;overflow:hidden;min-height:0}:host ::ng-deep .framework-view-list lib-data-grid{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RibbonComponent, selector: "lib-ribbon" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DefaultTabViewComponent, decorators: [{
             type: Component,
@@ -3276,11 +3316,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgTemplateOutlet,
                         RibbonComponent,
                         RouterModule,
-                    ], providers: [{ provide: TabViewService }], template: "<lib-ribbon>\n    <ng-container *ngTemplateOutlet=\"ribbonTemplate\"></ng-container>\n\n    <ng-template #emptyRibbon>\n    </ng-template>\n</lib-ribbon>\n\n<router-outlet>\n</router-outlet>", styles: [":host-context{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TabViewService }], propDecorators: { emptyRibbonTemplate: [{
-                type: ViewChild,
-                args: ['emptyRibbon']
-            }] } });
+                    ], providers: [{ provide: TabViewService }], template: "<lib-ribbon>\n    <ng-container *ngTemplateOutlet=\"ribbonTemplate ?? null\"></ng-container>\n</lib-ribbon>\n\n<router-outlet>\n</router-outlet>\n", styles: ["@charset \"UTF-8\";:host-context{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden}:host ::ng-deep .framework-view-list{display:flex;flex-grow:1;flex-direction:column;overflow:hidden;min-height:0}:host ::ng-deep .framework-view-list lib-data-grid{flex-grow:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TabViewService }] });
 
 function dataProviderFactory(route) {
     return route.snapshot.data['dataProvider']();
@@ -3372,7 +3409,7 @@ class DefaultDetailsTabViewComponent extends DefaultTabViewComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: DefaultDetailsTabViewComponent, isStandalone: true, selector: "framework-default-details-tab-view", providers: [
             { provide: TabViewService },
             { provide: DataProviderService, useFactory: dataProviderFactory, deps: [ActivatedRoute] },
-        ], viewQueries: [{ propertyName: "errorModal", first: true, predicate: ErrorModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-ribbon>\n    <ng-container *ngTemplateOutlet=\"ribbonTemplate\"></ng-container>\n\n    <ng-template #emptyRibbon>\n    </ng-template>\n\n    <div right>\n        <lib-ribbon-group [label]=\"'RibbonGroup-Page' | translate\">\n            <framework-button-views [detailsViewRoute]=\"detailsViewRoute\">\n            </framework-button-views>\n        </lib-ribbon-group>\n    </div>\n</lib-ribbon>\n\n<lib-group-container\n[icon]=\"containerIcon\"\n[title]=\"containerTitle\">\n    <router-outlet>\n    </router-outlet>\n</lib-group-container>\n\n<framework-error-modal (closed)=\"onErrorModalClosed()\"></framework-error-modal>", styles: [":host-context{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden}router-outlet{display:none}\n"], dependencies: [{ kind: "component", type: ButtonViewsComponent, selector: "framework-button-views", inputs: ["detailsViewRoute"] }, { kind: "component", type: ErrorModalComponent, selector: "framework-error-modal", inputs: ["errorMessage", "size", "subtitle", "title"], outputs: ["closed"] }, { kind: "component", type: GroupContainerComponent, selector: "lib-group-container", inputs: ["title", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RibbonComponent, selector: "lib-ribbon" }, { kind: "component", type: RibbonGroupComponent, selector: "lib-ribbon-group", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "errorModal", first: true, predicate: ErrorModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-ribbon>\n    <ng-container *ngTemplateOutlet=\"ribbonTemplate ?? null\"></ng-container>\n\n    <div right>\n        <lib-ribbon-group [label]=\"'RibbonGroup-Page' | translate\">\n            <framework-button-views [detailsViewRoute]=\"detailsViewRoute\">\n            </framework-button-views>\n        </lib-ribbon-group>\n    </div>\n</lib-ribbon>\n\n<lib-group-container\n[icon]=\"containerIcon\"\n[title]=\"containerTitle\">\n    <router-outlet>\n    </router-outlet>\n</lib-group-container>\n\n<framework-error-modal (closed)=\"onErrorModalClosed()\"></framework-error-modal>", styles: [":host-context{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden}router-outlet{display:none}\n"], dependencies: [{ kind: "component", type: ButtonViewsComponent, selector: "framework-button-views", inputs: ["detailsViewRoute"] }, { kind: "component", type: ErrorModalComponent, selector: "framework-error-modal", inputs: ["errorMessage", "size", "subtitle", "title"], outputs: ["closed"] }, { kind: "component", type: GroupContainerComponent, selector: "lib-group-container", inputs: ["title", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RibbonComponent, selector: "lib-ribbon" }, { kind: "component", type: RibbonGroupComponent, selector: "lib-ribbon-group", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DefaultDetailsTabViewComponent, decorators: [{
             type: Component,
@@ -3388,7 +3425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                     ], providers: [
                         { provide: TabViewService },
                         { provide: DataProviderService, useFactory: dataProviderFactory, deps: [ActivatedRoute] },
-                    ], template: "<lib-ribbon>\n    <ng-container *ngTemplateOutlet=\"ribbonTemplate\"></ng-container>\n\n    <ng-template #emptyRibbon>\n    </ng-template>\n\n    <div right>\n        <lib-ribbon-group [label]=\"'RibbonGroup-Page' | translate\">\n            <framework-button-views [detailsViewRoute]=\"detailsViewRoute\">\n            </framework-button-views>\n        </lib-ribbon-group>\n    </div>\n</lib-ribbon>\n\n<lib-group-container\n[icon]=\"containerIcon\"\n[title]=\"containerTitle\">\n    <router-outlet>\n    </router-outlet>\n</lib-group-container>\n\n<framework-error-modal (closed)=\"onErrorModalClosed()\"></framework-error-modal>", styles: [":host-context{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden}router-outlet{display:none}\n"] }]
+                    ], template: "<lib-ribbon>\n    <ng-container *ngTemplateOutlet=\"ribbonTemplate ?? null\"></ng-container>\n\n    <div right>\n        <lib-ribbon-group [label]=\"'RibbonGroup-Page' | translate\">\n            <framework-button-views [detailsViewRoute]=\"detailsViewRoute\">\n            </framework-button-views>\n        </lib-ribbon-group>\n    </div>\n</lib-ribbon>\n\n<lib-group-container\n[icon]=\"containerIcon\"\n[title]=\"containerTitle\">\n    <router-outlet>\n    </router-outlet>\n</lib-group-container>\n\n<framework-error-modal (closed)=\"onErrorModalClosed()\"></framework-error-modal>", styles: [":host-context{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden}router-outlet{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { errorModal: [{
                 type: ViewChild,
                 args: [ErrorModalComponent]