@db-ux/ngx-core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0-shell-52d18db

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @db-ux/ngx-core-components
 
+## 4.14.0
+
+### Minor Changes
+
+- feat: support Angular Signal Forms starting with Angular 21 - [see commit e6be73f](https://github.com/db-ux-design-system/core-web/commit/e6be73fa3b104a324ac5d29ccda12f2857a6f807)
+
+- refactor: consolidate floating component listeners into shared abstractions - [see commit de676fe](https://github.com/db-ux-design-system/core-web/commit/de676fe17e8a8157acd2e574fcea28ab6022389c)
+
+### Patch Changes
+
+- fix: correct accordion variant backgrounds to match design (divider is transparent, card is level-1 including the open content area) - [see commit b611b84](https://github.com/db-ux-design-system/core-web/commit/b611b845e6aded8f50dd07f3727ebf5fdf902b69)
+
+- fix: `track` special attributes need to be unique - [see commit 63eb9d5](https://github.com/db-ux-design-system/core-web/commit/63eb9d596e83f196ca00aee1de26a5a2e33b4864)
+
+- fix: use inline-flex with align-items center for link components to vertically center text with fixed height across densities - [see commit 5ebdef8](https://github.com/db-ux-design-system/core-web/commit/5ebdef89b14d56d901630aa61e098213704ba603)
+
 ## 4.13.0
 
 ### Minor Changes

package/agent/ControlPanelBrand.md

@@ -0,0 +1,25 @@
+
+
+# ControlPanelBrand Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBControlPanelBrand } from "../index";
+
+@Component({
+  selector: "control-panel-brand",
+  standalone: true,
+  imports: [CommonModule, DBControlPanelBrand],
+  template: `<ng-container
+    ><h1>DBControlPanelBrand Documentation Examples</h1>
+    <h2>1. Default Control Panel Brand</h2>
+    <db-control-panel-brand></db-control-panel-brand
+  ></ng-container> `,
+  styles: `:host { display: contents; }`,
+})
+export class ControlPanelBrand {
+  constructor() {}
+}
+```

package/agent/ControlPanelDesktop.md

@@ -0,0 +1,65 @@
+
+
+# ControlPanelDesktop Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBControlPanelBrand } from "../../control-panel-brand";
+import { DBControlPanelNavigation } from "../../control-panel-navigation";
+import { DBControlPanelNavigationItem } from "../../control-panel-navigation-item";
+import { DBControlPanelDesktop } from "../index";
+
+@Component({
+  selector: "control-panel-desktop",
+  standalone: true,
+  imports: [
+    CommonModule,
+    DBControlPanelDesktop,
+    DBControlPanelNavigation,
+    DBControlPanelNavigationItem,
+    DBControlPanelBrand,
+  ],
+  template: `<ng-container
+    ><h1>DBControlPanelDesktop Documentation Examples</h1>
+    <h2>1. Default Control Panel Desktop</h2>
+    <db-control-panel-desktop
+      [brand]="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+      ><db-control-panel-navigation
+        ><db-control-panel-navigation-item icon="x_placeholder"
+          ><a href="#">Navi-Item 1</a></db-control-panel-navigation-item
+        >
+        <db-control-panel-navigation-item icon="x_placeholder" [disabled]="true"
+          ><a href="#">Navi-Item 2</a></db-control-panel-navigation-item
+        ></db-control-panel-navigation
+      ></db-control-panel-desktop
+    >
+    <h2>2. Vertical Orientation</h2>
+    <db-control-panel-desktop
+      orientation="vertical"
+      [brand]="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+      ><db-control-panel-navigation
+        ><db-control-panel-navigation-item icon="x_placeholder"
+          ><a href="#">Navi-Item 1</a></db-control-panel-navigation-item
+        ></db-control-panel-navigation
+      ></db-control-panel-desktop
+    >
+    <h2>3. Collapsed (expanded=false)</h2>
+    <db-control-panel-desktop
+      orientation="vertical"
+      [expanded]="false"
+      [brand]="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+      ><db-control-panel-navigation
+        ><db-control-panel-navigation-item icon="x_placeholder"
+          ><a href="#">Navi-Item 1</a></db-control-panel-navigation-item
+        ></db-control-panel-navigation
+      ></db-control-panel-desktop
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class ControlPanelDesktop {
+  constructor() {}
+}
+```

package/agent/ControlPanelMeta.md

@@ -0,0 +1,30 @@
+
+
+# ControlPanelMeta Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBLink } from "../../link";
+import { DBControlPanelMeta } from "../index";
+
+@Component({
+  selector: "control-panel-meta",
+  standalone: true,
+  imports: [CommonModule, DBControlPanelMeta, DBLink],
+  template: `<ng-container
+    ><h1>DBControlPanelMeta Documentation Examples</h1>
+    <h2>1. Default Meta</h2>
+    <db-control-panel-meta
+      ><db-link href="#">Imprint</db-link>
+      <db-link href="#">Help</db-link>
+      <db-link href="#">Privacy</db-link></db-control-panel-meta
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class ControlPanelMeta {
+  constructor() {}
+}
+```

package/agent/ControlPanelMobile.md

@@ -0,0 +1,57 @@
+
+
+# ControlPanelMobile Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBControlPanelBrand } from "../../control-panel-brand";
+import { DBControlPanelNavigation } from "../../control-panel-navigation";
+import { DBControlPanelNavigationItem } from "../../control-panel-navigation-item";
+import { DBControlPanelMobile } from "../index";
+
+@Component({
+  selector: "control-panel-mobile",
+  standalone: true,
+  imports: [
+    CommonModule,
+    DBControlPanelMobile,
+    DBControlPanelNavigation,
+    DBControlPanelNavigationItem,
+    DBControlPanelBrand,
+  ],
+  template: `<ng-container
+    ><h1>DBControlPanelMobile Documentation Examples</h1>
+    <h2>1. Default Control Panel Mobile (Drawer)</h2>
+    <db-control-panel-mobile
+      drawerHeaderText="Application Name"
+      [brand]="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+      ><db-control-panel-navigation
+        ><db-control-panel-navigation-item icon="x_placeholder"
+          ><a href="#">Navi-Item 1</a></db-control-panel-navigation-item
+        >
+        <db-control-panel-navigation-item icon="x_placeholder" [disabled]="true"
+          ><a href="#">Navi-Item 2</a></db-control-panel-navigation-item
+        ></db-control-panel-navigation
+      ></db-control-panel-mobile
+    >
+    <h2>2. Bottom Position + Flat Icon Variant</h2>
+    <db-control-panel-mobile
+      position="bottom"
+      variant="flat-icon"
+      drawerHeaderText="Application Name"
+      [brand]="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
+      ><db-control-panel-navigation
+        ><db-control-panel-navigation-item icon="x_placeholder"
+          ><a href="#">Navi-Item 1</a></db-control-panel-navigation-item
+        ></db-control-panel-navigation
+      ></db-control-panel-mobile
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class ControlPanelMobile {
+  constructor() {}
+}
+```

package/agent/ControlPanelNavigation.md

@@ -0,0 +1,40 @@
+
+
+# ControlPanelNavigation Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBControlPanelNavigationItem } from "../../control-panel-navigation-item/index";
+import { DBControlPanelNavigation } from "../index";
+
+@Component({
+  selector: "control-panel-navigation",
+  standalone: true,
+  imports: [
+    CommonModule,
+    DBControlPanelNavigation,
+    DBControlPanelNavigationItem,
+  ],
+  template: `<ng-container
+    ><h1>DBControlPanelNavigation Documentation Examples</h1>
+    <h2>1. Default Navigation</h2>
+    <db-control-panel-navigation
+      ><db-control-panel-navigation-item
+        ><a href="#">Navi-Item 1</a></db-control-panel-navigation-item
+      >
+      <db-control-panel-navigation-item icon="x_placeholder"
+        ><a href="#">Navi-Item 2</a></db-control-panel-navigation-item
+      >
+      <db-control-panel-navigation-item [disabled]="true"
+        ><a href="#">Navi-Item 3</a></db-control-panel-navigation-item
+      ></db-control-panel-navigation
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class ControlPanelNavigation {
+  constructor() {}
+}
+```

package/agent/ControlPanelNavigationItem.md

@@ -0,0 +1,49 @@
+
+
+# ControlPanelNavigationItem Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBControlPanelNavigationItem } from "../index";
+
+@Component({
+  selector: "control-panel-navigation-item",
+  standalone: true,
+  imports: [CommonModule, DBControlPanelNavigationItem],
+  template: `<ng-container
+    ><h1>DBControlPanelNavigationItem Documentation Examples</h1>
+    <h2>1. Default Navigation Item</h2>
+    <db-control-panel-navigation-item>
+      Default Navigation Item
+    </db-control-panel-navigation-item>
+    <h2>2. Active State</h2>
+    <db-control-panel-navigation-item [active]="true">
+      Active Navigation Item
+    </db-control-panel-navigation-item>
+    <h2>3. Disabled State</h2>
+    <db-control-panel-navigation-item [disabled]="true">
+      Disabled Navigation Item
+    </db-control-panel-navigation-item>
+    <h2>4. Sub-Navigation</h2>
+    <db-control-panel-navigation-item
+      [subNavigation]="<div>Sub Navigation Content</div>"
+    >
+      Navigation Item with Sub-Navigation
+    </db-control-panel-navigation-item>
+    <h2>5. Icon Support</h2>
+    <db-control-panel-navigation-item icon="user">
+      Navigation Item with Icon
+    </db-control-panel-navigation-item>
+    <h2>6. Custom Class</h2>
+    <db-control-panel-navigation-item className="custom-class">
+      Navigation Item with Custom Class
+    </db-control-panel-navigation-item></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class ControlPanelNavigationItem {
+  constructor() {}
+}
+```

package/agent/ControlPanelPrimaryActions.md

@@ -0,0 +1,30 @@
+
+
+# ControlPanelPrimaryActions Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBButton } from "../../button";
+import { DBControlPanelPrimaryActions } from "../index";
+
+@Component({
+  selector: "control-panel-primary-actions",
+  standalone: true,
+  imports: [CommonModule, DBControlPanelPrimaryActions, DBButton],
+  template: `<ng-container
+    ><h1>DBControlPanelPrimaryActions Documentation Examples</h1>
+    <h2>1. Default Primary Actions</h2>
+    <db-control-panel-primary-actions
+      ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">
+        Search
+      </db-button></db-control-panel-primary-actions
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class ControlPanelPrimaryActions {
+  constructor() {}
+}
+```

package/agent/ControlPanelSecondaryActions.md

@@ -0,0 +1,36 @@
+
+
+# ControlPanelSecondaryActions Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBButton } from "../../button";
+import { DBControlPanelSecondaryActions } from "../index";
+
+@Component({
+  selector: "control-panel-secondary-actions",
+  standalone: true,
+  imports: [CommonModule, DBControlPanelSecondaryActions, DBButton],
+  template: `<ng-container
+    ><h1>DBControlPanelSecondaryActions Documentation Examples</h1>
+    <h2>1. Default Secondary Actions</h2>
+    <db-control-panel-secondary-actions
+      ><db-button icon="x_placeholder" variant="ghost" [noText]="true">
+        Profile
+      </db-button>
+      <db-button icon="x_placeholder" variant="ghost" [noText]="true">
+        Notification
+      </db-button>
+      <db-button icon="x_placeholder" variant="ghost" [noText]="true">
+        Help
+      </db-button></db-control-panel-secondary-actions
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class ControlPanelSecondaryActions {
+  constructor() {}
+}
+```

package/agent/Drawer.md

@@ -1,11 +1,3 @@
-## CSS Properties
-
-| CSS Variable | Default | CSS Property | Description | Example |
-| --- | --- | --- | --- | --- |
-| `--db-drawer-max-height` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-block-size | Sets the maximum height of the drawer | — |
-| `--db-drawer-header-padding-block-end` | `#{map.get($spacing, "block")}` | padding-block-end | Controls the bottom padding inside the drawer header | — |
-| `--db-drawer-content-padding-inline` | `#{map.get($spacing, "inline")}` | padding-inline | Controls left/right padding inside the drawer content area | — |
-| `--db-drawer-max-width` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-inline-size | Sets the maximum width of the drawer and some default values for the drawer | <pre>css - Wide drawer<br>.db-drawer-wide {<br>--db-drawer-max-width: 800px;<br>}<br>&lt;div class="db-drawer db-drawer-wide"&gt;<br>&lt;!-- wide drawer --&gt;<br>&lt;/div&gt;<br></pre> |
 
 
 # Drawer Examples (angular)

package/agent/Shell.md

@@ -0,0 +1,45 @@
+
+
+# Shell Examples (angular)
+
+```ts
+import { Component, effect, VERSION } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBControlPanelNavigation } from "../../control-panel-navigation";
+import { DBControlPanelNavigationItem } from "../../control-panel-navigation-item";
+import { DBShell } from "../index";
+
+@Component({
+  selector: "shell",
+  standalone: true,
+  imports: [
+    CommonModule,
+    DBShell,
+    DBControlPanelNavigation,
+    DBControlPanelNavigationItem,
+  ],
+  template: `<ng-container
+    ><h1>DBShell Documentation Examples</h1>
+    <h2>1. Full Shell (Desktop + Mobile Control Panel)</h2>
+    <db-shell>
+      <db-control-panel-desktop controlPanelDesktop><db-control-panel-brand brand data-logo="db-systel"></db-control-panel-brand><db-control-panel-meta meta><db-link href="#">Imprint</db-link><db-link href="#">Help</db-link></db-control-panel-meta><db-control-panel-primary-actions primaryActions><db-button icon="magnifying_glass" variant="ghost" noText>Search</db-button></db-control-panel-primary-actions><db-control-panel-secondary-actions secondaryActions><db-button icon="x_placeholder" variant="ghost" noText>Profile</db-button><db-button icon="x_placeholder" variant="ghost" noText>Notification</db-button><db-button icon="x_placeholder" variant="ghost" noText>Help</db-button></db-control-panel-secondary-actions><db-control-panel-navigation><db-control-panel-navigation-item icon="x_placeholder"><a href="#">Navi-Item 1</a></db-control-panel-navigation-item><db-control-panel-navigation-item icon="x_placeholder" disabled><a href="#">Navi-Item 2</a></db-control-panel-navigation-item></db-control-panel-navigation></db-control-panel-desktop>
+<db-control-panel-mobile controlPanelMobile drawerHeaderText="Application Name"><db-control-panel-brand brand data-logo="db-systel"></db-control-panel-brand><db-control-panel-meta meta><db-link href="#">Imprint</db-link><db-link href="#">Help</db-link></db-control-panel-meta><db-control-panel-primary-actions primaryActions><db-button icon="magnifying_glass" variant="ghost" noText>Search</db-button></db-control-panel-primary-actions><db-control-panel-secondary-actions secondaryActions><db-button icon="x_placeholder" variant="ghost" noText>Profile</db-button><db-button icon="x_placeholder" variant="ghost" noText>Notification</db-button><db-button icon="x_placeholder" variant="ghost" noText>Help</db-button></db-control-panel-secondary-actions><db-control-panel-navigation><db-control-panel-navigation-item icon="x_placeholder"><a href="#">Navi-Item 1</a></db-control-panel-navigation-item><db-control-panel-navigation-item icon="x_placeholder" disabled><a href="#">Navi-Item 2</a></db-control-panel-navigation-item></db-control-panel-navigation></db-control-panel-mobile>
+
+
+      <db-control-panel-navigation
+        ><db-control-panel-navigation-item icon="x_placeholder"
+          ><a href="#">Navi-Item 1</a></db-control-panel-navigation-item
+        >
+        <db-control-panel-navigation-item icon="x_placeholder" [disabled]="true"
+          ><a href="#">Navi-Item 2</a></db-control-panel-navigation-item
+        ></db-control-panel-navigation
+      ></db-shell
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Shell {
+  constructor() {}
+}
+```

package/agent/ShellSubNavigation.md

@@ -0,0 +1,6 @@
+## CSS Properties
+
+| CSS Variable | Default | CSS Property | Description | Example |
+| --- | --- | --- | --- | --- |
+
+

package/agent/_instructions.md

@@ -1,5 +1,5 @@
 - Use "@db-ux/ngx-core-components" as import for components:
-  - use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
+  - use for `DBShellSubNavigation` or `ShellSubNavigation` the file __agent-path__/agent/ShellSubNavigation.md
   - use for `DBTooltip` or `Tooltip` the file __agent-path__/agent/Tooltip.md
   - use for `DBTextarea` or `Textarea` the file __agent-path__/agent/Textarea.md
   - use for `DBTag` or `Tag` the file __agent-path__/agent/Tag.md
@@ -7,6 +7,7 @@
   - use for `DBTabItem` or `TabItem` the file __agent-path__/agent/TabItem.md
   - use for `DBSwitch` or `Switch` the file __agent-path__/agent/Switch.md
   - use for `DBStack` or `Stack` the file __agent-path__/agent/Stack.md
+  - use for `DBShell` or `Shell` the file __agent-path__/agent/Shell.md
   - use for `DBSelect` or `Select` the file __agent-path__/agent/Select.md
   - use for `DBSection` or `Section` the file __agent-path__/agent/Section.md
   - use for `DBRadio` or `Radio` the file __agent-path__/agent/Radio.md
@@ -20,8 +21,17 @@
   - use for `DBInfotext` or `Infotext` the file __agent-path__/agent/Infotext.md
   - use for `DBIcon` or `Icon` the file __agent-path__/agent/Icon.md
   - use for `DBHeader` or `Header` the file __agent-path__/agent/Header.md
+  - use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
   - use for `DBDivider` or `Divider` the file __agent-path__/agent/Divider.md
   - use for `DBCustomSelect` or `CustomSelect` the file __agent-path__/agent/CustomSelect.md
+  - use for `DBControlPanelSecondaryActions` or `ControlPanelSecondaryActions` the file __agent-path__/agent/ControlPanelSecondaryActions.md
+  - use for `DBControlPanelPrimaryActions` or `ControlPanelPrimaryActions` the file __agent-path__/agent/ControlPanelPrimaryActions.md
+  - use for `DBControlPanelNavigationItem` or `ControlPanelNavigationItem` the file __agent-path__/agent/ControlPanelNavigationItem.md
+  - use for `DBControlPanelNavigation` or `ControlPanelNavigation` the file __agent-path__/agent/ControlPanelNavigation.md
+  - use for `DBControlPanelMobile` or `ControlPanelMobile` the file __agent-path__/agent/ControlPanelMobile.md
+  - use for `DBControlPanelMeta` or `ControlPanelMeta` the file __agent-path__/agent/ControlPanelMeta.md
+  - use for `DBControlPanelDesktop` or `ControlPanelDesktop` the file __agent-path__/agent/ControlPanelDesktop.md
+  - use for `DBControlPanelBrand` or `ControlPanelBrand` the file __agent-path__/agent/ControlPanelBrand.md
   - use for `DBCheckbox` or `Checkbox` the file __agent-path__/agent/Checkbox.md
   - use for `DBCard` or `Card` the file __agent-path__/agent/Card.md
   - use for `DBButton` or `Button` the file __agent-path__/agent/Button.md