@zambon-dev/framework 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -23,6 +23,76 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### ⚠ Breaking Changes / Migration
 
+## [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
+
+- Lint configuration only: the library's ESLint selector rules now accept the `framework-` prefix
+  that every `@framework` component already uses. They previously still expected the Angular
+  scaffold's `lib` prefix, so the entire component surface reported
+  `@angular-eslint/component-selector` errors. No selector was renamed, and no published API or
+  runtime behavior changed — nothing to do on upgrade.
+
+### ⚠ Breaking Changes / Migration
+
+None.
+
 ## [1.2.0] - 2026-07-24
 
 ### Added
@@ -33,22 +103,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   Existing `new AppConfig(baseUrl)` calls continue to work unchanged (`notificationsEnabled`
   defaults to `false`, other new fields to empty strings).
 
+### ⚠ Breaking Changes / Migration
+
+None.
+
+## [1.1.1] - 2026-06-20
+
 ### Fixed
 
 - `framework-button-export` now forwards its `iconSize` input to the underlying ribbon button,
   so setting `iconSize` correctly resizes the export button's icon. Previously the input was
   ignored and the icon always rendered at the default size.
 
-### ⚠ Breaking Changes / Migration
-
-None.
-
 ## [1.1.0] - 2026-06-02
 
 - Baseline release: the changelog starts being tracked from this version. Earlier history is
   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.0...HEAD
+[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/framework-v1.3.0...HEAD
+[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
 [1.1.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/framework-v1.1.0

package/fesm2022/zambon-dev-framework.mjs

@@ -1263,6 +1263,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 +1344,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 +2550,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 +2607,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 +3220,6 @@ class DefaultTabViewComponent {
     changeDetectorRef;
     tabViewService;
     //#region ViewChilds, Inputs, Outputs
-    emptyRibbonTemplate;
     //#endregion
     //#region Variables
     destroy$ = new Subject();
@@ -3220,12 +3233,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 +3256,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 +3283,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 +3376,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 +3392,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]