@db-ux/ngx-core-components 4.9.0-1-c55de66 → 4.9.0-stencil-bundle-ad37ca4

package/CHANGELOG.md

@@ -189,7 +189,7 @@ _version bump_
 
 - fix: set DBTabItem internal state `_selected` correctly - [see commit f7625cb](https://github.com/db-ux-design-system/core-web/commit/f7625cbd9d64513527e826c9d2c1ef42b2734a4b):
 
-        - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
+          - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
 
 ## 4.2.1
 

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -190,13 +190,16 @@ class DBAccordionItem {
         if (this.toggle) {
             this.toggle.emit(newStateOpen);
         }
-        this._open.set(newStateOpen);
+        if (this.open() === undefined) {
+            this._open.set(newStateOpen);
+        }
     }
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.defaultOpen = input(...(ngDevMode ? [undefined, { debugName: "defaultOpen" }] : /* istanbul ignore next */ []));
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        this.open = input(...(ngDevMode ? [undefined, { debugName: "open" }] : /* istanbul ignore next */ []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
@@ -229,6 +232,16 @@ class DBAccordionItem {
             }, {
             // Enable writing to signals inside effects
             });
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.open();
+                // ---
+                if (this.open() !== undefined) {
+                    this._open.set(this.open());
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
         }
     }
     /**
@@ -278,7 +291,7 @@ class DBAccordionItem {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-accordion-item', className())"
   >
@@ -317,7 +330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
       <div>@if(text()){{{text()}}} <ng-content></ng-content></div>
     </details>
   </li> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$z = {};
 class DBAccordion {
@@ -359,7 +372,7 @@ class DBAccordion {
                 // ---
                 // If we have a single behavior we first check for
                 // props.name otherwise for state_id
-                if (this.initialized()) {
+                if (this.initialized() && this._ref()?.nativeElement) {
                     if (this.behavior() === "single") {
                         if (this.name()) {
                             if (this._name() !== this.name()) {
@@ -487,7 +500,7 @@ class DBAccordion {
       [text]="item.text"
     ></db-accordion-item>
     } }
-  </ul> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["defaultOpen", "name", "id", "propOverrides", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
+  </ul> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["defaultOpen", "name", "open", "id", "propOverrides", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DBAccordion, decorators: [{
             type: Component,
@@ -4784,8 +4797,8 @@ class DBDrawer {
     }
     handleDialogOpen() {
         if (this._ref()?.nativeElement) {
-            const open = Boolean(this.open());
-            if (open && !this._ref()?.nativeElement.open) {
+            const dialogOpen = getBoolean(this.open());
+            if (dialogOpen && !this._ref()?.nativeElement.open) {
                 if (this.dialogContainerRef()?.nativeElement) {
                     (this.dialogContainerRef()?.nativeElement).removeAttribute("data-transition");
                 }
@@ -4803,7 +4816,7 @@ class DBDrawer {
                     }
                 }, 1);
             }
-            if (!open && this._ref()?.nativeElement.open) {
+            if (!dialogOpen && this._ref()?.nativeElement.open) {
                 if (this.dialogContainerRef()?.nativeElement) {
                     (this.dialogContainerRef()?.nativeElement).dataset["transition"] = "close";
                 }
@@ -5179,17 +5192,17 @@ class DBHeader {
     }
     constructor() {
         this.cls = cls;
-        this.getBoolean = getBoolean;
         this.DEFAULT_BURGER_MENU = DEFAULT_BURGER_MENU;
+        this.getBoolean = getBoolean;
         this.forceMobile = input(...(ngDevMode ? [undefined, { debugName: "forceMobile" }] : /* istanbul ignore next */ []));
         this.drawerOpen = input(...(ngDevMode ? [undefined, { debugName: "drawerOpen" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        this.burgerMenuLabel = input(...(ngDevMode ? [undefined, { debugName: "burgerMenuLabel" }] : /* istanbul ignore next */ []));
         this.closeButtonId = input(...(ngDevMode ? [undefined, { debugName: "closeButtonId" }] : /* istanbul ignore next */ []));
         this.closeButtonText = input(...(ngDevMode ? [undefined, { debugName: "closeButtonText" }] : /* istanbul ignore next */ []));
-        this.burgerMenuLabel = input(...(ngDevMode ? [undefined, { debugName: "burgerMenuLabel" }] : /* istanbul ignore next */ []));
         this.toggle = output();
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
         this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
@@ -5260,35 +5273,13 @@ class DBHeader {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<header
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<header
     #_ref
     [class]="cls('db-header', className())"
     [attr.id]="id() ?? propOverrides()?.id"
     [attr.data-width]="width()"
     [attr.data-on-forcing-mobile]="forceMobile() && !forcedToMobile()"
   >
-    <db-drawer
-      spacing="small"
-      className="db-header-drawer"
-      [rounded]="true"
-      [closeButtonId]="closeButtonId()"
-      [closeButtonText]="closeButtonText()"
-      [open]="getBoolean(drawerOpen())"
-      (close)="handleToggle()"
-      ><div class="db-header-drawer-navigation">
-        <div
-          class="db-header-navigation"
-          (click)="handleNavigationItemClick($event)"
-        >
-          <ng-content *ngTemplateOutlet="dbNavigation"></ng-content>
-        </div>
-        <div class="db-header-meta-navigation">
-          <ng-content *ngTemplateOutlet="dbMetaNavigation"> </ng-content>
-        </div>
-      </div>
-      <div class="db-header-secondary-action">
-        <ng-content *ngTemplateOutlet="dbSecondaryAction"> </ng-content></div
-    ></db-drawer>
     <div class="db-header-meta-navigation">
       <ng-content *ngTemplateOutlet="dbMetaNavigation"> </ng-content>
     </div>
@@ -5317,17 +5308,6 @@ class DBHeader {
         </div>
       </div>
     </div>
-  </header> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "position", "backdrop", "variant", "id", "propOverrides", "direction", "className", "spacing", "width", "rounded", "closeButtonId", "closeButtonText"], outputs: ["close"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DBHeader, decorators: [{
-            type: Component,
-            args: [{ selector: "db-header", standalone: true, imports: [CommonModule, DBDrawer, DBButton], template: `<header
-    #_ref
-    [class]="cls('db-header', className())"
-    [attr.id]="id() ?? propOverrides()?.id"
-    [attr.data-width]="width()"
-    [attr.data-on-forcing-mobile]="forceMobile() && !forcedToMobile()"
-  >
     <db-drawer
       spacing="small"
       className="db-header-drawer"
@@ -5350,6 +5330,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
       <div class="db-header-secondary-action">
         <ng-content *ngTemplateOutlet="dbSecondaryAction"> </ng-content></div
     ></db-drawer>
+  </header> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "position", "backdrop", "variant", "id", "propOverrides", "direction", "className", "spacing", "width", "rounded", "closeButtonId", "closeButtonText"], outputs: ["close"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DBHeader, decorators: [{
+            type: Component,
+            args: [{ selector: "db-header", standalone: true, imports: [CommonModule, DBButton, DBDrawer], template: `<header
+    #_ref
+    [class]="cls('db-header', className())"
+    [attr.id]="id() ?? propOverrides()?.id"
+    [attr.data-width]="width()"
+    [attr.data-on-forcing-mobile]="forceMobile() && !forcedToMobile()"
+  >
     <div class="db-header-meta-navigation">
       <ng-content *ngTemplateOutlet="dbMetaNavigation"> </ng-content>
     </div>
@@ -5378,6 +5369,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         </div>
       </div>
     </div>
+    <db-drawer
+      spacing="small"
+      className="db-header-drawer"
+      [rounded]="true"
+      [closeButtonId]="closeButtonId()"
+      [closeButtonText]="closeButtonText()"
+      [open]="getBoolean(drawerOpen())"
+      (close)="handleToggle()"
+      ><div class="db-header-drawer-navigation">
+        <div
+          class="db-header-navigation"
+          (click)="handleNavigationItemClick($event)"
+        >
+          <ng-content *ngTemplateOutlet="dbNavigation"></ng-content>
+        </div>
+        <div class="db-header-meta-navigation">
+          <ng-content *ngTemplateOutlet="dbMetaNavigation"> </ng-content>
+        </div>
+      </div>
+      <div class="db-header-secondary-action">
+        <ng-content *ngTemplateOutlet="dbSecondaryAction"> </ng-content></div
+    ></db-drawer>
   </header> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dbNavigation: [{
                 type: ContentChild,
@@ -5388,7 +5401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             }], dbSecondaryAction: [{
                 type: ContentChild,
                 args: [SecondaryActionDirective, { read: TemplateRef }]
-            }], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+            }], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$g = {};
 class DBIcon {
@@ -5715,6 +5728,7 @@ class DBNavigationItem {
         this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
         this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : /* istanbul ignore next */ []));
         this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.hideSubNavigation = input(...(ngDevMode ? [undefined, { debugName: "hideSubNavigation" }] : /* istanbul ignore next */ []));
         this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
         this.backButtonId = input(...(ngDevMode ? [undefined, { debugName: "backButtonId" }] : /* istanbul ignore next */ []));
         this.backButtonText = input(...(ngDevMode ? [undefined, { debugName: "backButtonText" }] : /* istanbul ignore next */ []));
@@ -5810,7 +5824,7 @@ class DBNavigationItem {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideSubNavigation: { classPropertyName: "hideSubNavigation", publicName: "hideSubNavigation", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
     #_ref
     [attr.id]="id() ?? propOverrides()?.id"
     (mouseover)="navigationItemSafeTriangle()?.enableFollow()"
@@ -5824,9 +5838,8 @@ class DBNavigationItem {
     [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.aria-disabled]="getBooleanAsString(disabled())"
   >
-    @if(!hasSubNavigation()){ @if(text()){{{text()}}}@else{
-    <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
-    } } @if(hasSubNavigation()){
+    @if(!getBoolean(hideSubNavigation(), 'hideSubNavigation') &&
+    hasSubNavigation()){
     <button
       class="db-navigation-item-expand-button"
       [attr.id]="subNavigationToggleId()"
@@ -5859,7 +5872,9 @@ class DBNavigationItem {
       }
       <ng-content select="[sub-navigation]"> </ng-content
     ></menu>
-    }
+    }@else{ @if(text()){{{text()}}}@else{
+    <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
+    } }
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DBNavigationItem, decorators: [{
@@ -5878,9 +5893,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
     [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.aria-disabled]="getBooleanAsString(disabled())"
   >
-    @if(!hasSubNavigation()){ @if(text()){{{text()}}}@else{
-    <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
-    } } @if(hasSubNavigation()){
+    @if(!getBoolean(hideSubNavigation(), 'hideSubNavigation') &&
+    hasSubNavigation()){
     <button
       class="db-navigation-item-expand-button"
       [attr.id]="subNavigationToggleId()"
@@ -5913,12 +5927,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
       }
       <ng-content select="[sub-navigation]"> </ng-content
     ></menu>
-    }
+    }@else{ @if(text()){{{text()}}}@else{
+    <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
+    } }
   </li> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dbNavigationContent: [{
                 type: ContentChild,
                 args: [NavigationContentDirective, { read: TemplateRef }]
-            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], subNavigationExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "subNavigationExpanded", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], backButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonId", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], subNavigationExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "subNavigationExpanded", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideSubNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSubNavigation", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], backButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonId", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$c = {};
 class DBNotification {