@db-ux/ngx-core-components 3.0.1 → 3.0.2-copilot2-e7bf98b

package/README.md

@@ -113,6 +113,17 @@ There are 3 ways to use Events in Angular:
 ></db-input>
 ```
 
+## Documentation for AI Agents
+
+We provide a documentation for every component in the DB UX Design System via `docs` folder.
+To consume those documentation for AI Agents the best way is to copy the `docs` folder into your project.
+
+We provide a CLI tool to do this automatically, which you can run with:
+
+```shell
+npx @db-ux/agent-cli
+```
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.

package/agent/Accordion.md

@@ -0,0 +1,52 @@
+
+
+# Accordion Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBAccordion } from "../index";
+
+@Component({
+  selector: "accordion",
+  standalone: true,
+  imports: [CommonModule, DBAccordion],
+  template: `<ng-container
+    ><h1>DBAccordion Documentation Examples</h1>
+    <h2>1. Default Accordion</h2>
+    <db-accordion>Default Accordion</db-accordion>
+    <h2>2. Behavior Variants</h2>
+    <db-accordion behavior="multiple">Multiple Behavior</db-accordion>
+    <db-accordion behavior="single">Single Behavior</db-accordion>
+    <h2>3. Initial Open Index</h2>
+    <db-accordion [initOpenIndex]="[0, 1]">Initial Open Index</db-accordion>
+    <h2>4. Items</h2>
+    <db-accordion [items]="getItems()">Accordion with Items</db-accordion>
+    <h2>5. Name Attribute</h2>
+    <db-accordion name="accordion-name">With Name</db-accordion>
+    <h2>6. Variant Types</h2>
+    <db-accordion variant="divider">Divider Variant</db-accordion>
+    <db-accordion variant="card">Card Variant</db-accordion></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Accordion {
+  getItems() {
+    return [
+      {
+        text: "Item 1 Content",
+        headlinePlain: "Item 1",
+        disabled: false,
+      },
+      {
+        text: "Item 2 Content",
+        headlinePlain: "Item 2",
+        disabled: true,
+      },
+    ];
+  }
+
+  constructor() {}
+}
+```

package/agent/AccordionItem.md

@@ -0,0 +1,45 @@
+
+
+# AccordionItem Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBAccordionItem } from "../index";
+
+@Component({
+  selector: "accordion-item",
+  standalone: true,
+  imports: [CommonModule, DBAccordionItem],
+  template: `<ng-container
+    ><h1>DBAccordionItem Documentation Examples</h1>
+    <h2>1. Default Accordion Item</h2>
+    <db-accordion-item>Default Accordion Item</db-accordion-item>
+    <h2>2. Initial State</h2>
+    <db-accordion-item [defaultOpen]="true">Initially Open</db-accordion-item>
+    <db-accordion-item [defaultOpen]="false">
+      Initially Closed
+    </db-accordion-item>
+    <h2>3. Disabled State</h2>
+    <db-accordion-item [disabled]="true">
+      Disabled Accordion Item
+    </db-accordion-item>
+    <h2>4. Headline Variants</h2>
+    <db-accordion-item [headline]="<strong>Custom Headline</strong>">
+      With Custom Headline
+    </db-accordion-item>
+    <db-accordion-item headlinePlain="Plain Headline">
+      With Plain Headline
+    </db-accordion-item>
+    <h2>5. Toggle Event</h2>
+    <db-accordion-item (toggle)="console.log('Toggled:', $event)">
+      With Toggle Event
+    </db-accordion-item></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class AccordionItem {
+  constructor() {}
+}
+```

package/agent/Badge.md

@@ -0,0 +1,48 @@
+
+
+# Badge Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBBadge } from "../index";
+
+@Component({
+  selector: "badge",
+  standalone: true,
+  imports: [CommonModule, DBBadge],
+  template: `<ng-container
+    ><h1>DBBadge Documentation Examples</h1>
+    <h2>1. Default Badge</h2>
+    <db-badge>Default Badge</db-badge>
+    <h2>2. Semantic Variants</h2>
+    <db-badge semantic="adaptive">Adaptive</db-badge>
+    <db-badge semantic="neutral">Neutral</db-badge>
+    <db-badge semantic="critical">Critical</db-badge>
+    <db-badge semantic="informational">Informational</db-badge>
+    <db-badge semantic="warning">Warning</db-badge>
+    <db-badge semantic="successful">Successful</db-badge>
+    <h2>3. Sizes</h2>
+    <db-badge size="small">Small</db-badge>
+    <db-badge size="medium">Medium</db-badge>
+    <h2>4. Emphasis Variants</h2>
+    <db-badge emphasis="weak">Weak Emphasis</db-badge>
+    <db-badge emphasis="strong">Strong Emphasis</db-badge>
+    <h2>5. Placement Variants</h2>
+    <db-badge placement="inline">Inline</db-badge>
+    <db-badge placement="corner-top-left">Corner Top Left</db-badge>
+    <db-badge placement="corner-top-right">Corner Top Right</db-badge>
+    <db-badge placement="corner-center-left">Corner Center Left</db-badge>
+    <db-badge placement="corner-center-right"> Corner Center Right </db-badge>
+    <db-badge placement="corner-bottom-left">Corner Bottom Left</db-badge>
+    <db-badge placement="corner-bottom-right"> Corner Bottom Right </db-badge>
+    <h2>6. Custom Label</h2>
+    <db-badge label="Custom Label">With Custom Label</db-badge></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Badge {
+  constructor() {}
+}
+```

package/agent/Brand.md

@@ -0,0 +1,29 @@
+
+
+# Brand Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBBrand } from "../index";
+
+@Component({
+  selector: "brand",
+  standalone: true,
+  imports: [CommonModule, DBBrand],
+  template: `<ng-container
+    ><h1>DBBrand Documentation Examples</h1>
+    <h2>1. Default Brand</h2>
+    <db-brand>Default Brand</db-brand>
+    <h2>2. Icon Visibility</h2>
+    <db-brand [showIcon]="false">Icon Hidden</db-brand>
+    <h2>3. Custom Text</h2>
+    <db-brand text="Custom Brand Text">With Custom Text</db-brand></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Brand {
+  constructor() {}
+}
+```

package/agent/Button.md

@@ -0,0 +1,59 @@
+
+
+# Button Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBButton } from "../index";
+
+@Component({
+  selector: "button",
+  standalone: true,
+  imports: [CommonModule, DBButton],
+  template: `<ng-container
+    ><h1>DBButton Documentation Examples</h1>
+    <h2>1. Default Button</h2>
+    <db-button>Button</db-button>
+    <h2>2. Variants</h2>
+    <db-button variant="filled">Filled</db-button>
+    <db-button variant="outlined">Outlined</db-button>
+    <db-button variant="ghost">Ghost</db-button>
+    <db-button variant="brand">Brand</db-button>
+    <h2>3. Sizes</h2>
+    <db-button size="small">Small</db-button>
+    <db-button size="medium">Medium</db-button>
+    <h2>4. Icon Only</h2>
+    <db-button icon="check" [noText]="true"></db-button>
+    <h2>5. Disabled</h2>
+    <db-button [disabled]="true">Disabled</db-button>
+    <h2>6. Button Types</h2>
+    <db-button type="button">Type=button</db-button>
+    <db-button type="submit">Type=submit</db-button>
+    <db-button type="reset">Type=reset</db-button>
+    <h2>7. Form Association</h2>
+    <form id="example-form">
+      <input name="exampleInput" placeholder="Example input" />
+    </form>
+    <db-button form="example-form" type="submit"> Submit Form </db-button>
+    <h2>8. Name &amp; Value</h2>
+    <db-button name="testName" value="testValue"> Name/Value </db-button>
+    <h2>9. Width</h2>
+    <db-button width="full">Full width</db-button>
+    <db-button width="auto">Auto width</db-button>
+    <h2>10. Icon Visibility</h2>
+    <db-button icon="check" [showIcon]="false"> Icon Hidden </db-button>
+    <h2>11. Custom Class</h2>
+    <db-button className="my-custom-class">Custom Class</db-button>
+    <h2>12. Click Event</h2>
+    <db-button (click)="alert('Button clicked!')">
+      Click Me
+    </db-button></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Button {
+  constructor() {}
+}
+```

package/agent/Card.md

@@ -0,0 +1,39 @@
+
+
+# Card Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBCard } from "../index";
+
+@Component({
+  selector: "card",
+  standalone: true,
+  imports: [CommonModule, DBCard],
+  template: `<ng-container
+    ><h1>DBCard Documentation Examples</h1>
+    <h2>1. Default Card</h2>
+    <db-card>Default Card</db-card>
+    <h2>2. Behaviors</h2>
+    <db-card behavior="static">Static</db-card>
+    <db-card behavior="interactive">Interactive</db-card>
+    <h2>3. Elevation Levels</h2>
+    <db-card elevationLevel="1">Elevation Level 1</db-card>
+    <db-card elevationLevel="2">Elevation Level 2</db-card>
+    <db-card elevationLevel="3">Elevation Level 3</db-card>
+    <h2>4. Custom Class</h2>
+    <db-card className="my-custom-class">Custom Class</db-card>
+    <h2>5. Spacing</h2>
+    <db-card spacing="medium">Medium Spacing</db-card>
+    <db-card spacing="small">Small Spacing</db-card>
+    <db-card spacing="large">Large Spacing</db-card>
+    <db-card spacing="none">No Spacing</db-card></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Card {
+  constructor() {}
+}
+```

package/agent/Checkbox.md

@@ -0,0 +1,52 @@
+
+
+# Checkbox Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBCheckbox } from "../index";
+
+@Component({
+  selector: "checkbox",
+  standalone: true,
+  imports: [CommonModule, DBCheckbox],
+  template: `<ng-container
+    ><h1>DBCheckbox Documentation Examples</h1>
+    <h2>1. Default Checkbox</h2>
+    <db-checkbox label="Default Checkbox"></db-checkbox>
+    <h2>2. Indeterminate State</h2>
+    <db-checkbox
+      label="Indeterminate Checkbox"
+      [indeterminate]="true"
+    ></db-checkbox>
+    <h2>3. Sizes</h2>
+    <db-checkbox size="small" label="Small Checkbox"></db-checkbox>
+    <db-checkbox size="medium" label="Medium Checkbox"></db-checkbox>
+    <h2>4. Validation States</h2>
+    <db-checkbox validation="valid" label="Valid Checkbox"></db-checkbox>
+    <db-checkbox validation="invalid" label="Invalid Checkbox"></db-checkbox>
+    <db-checkbox
+      validation="no-validation"
+      label="No Validation Checkbox"
+    ></db-checkbox>
+    <h2>5. Disabled State</h2>
+    <db-checkbox label="Disabled Checkbox" [disabled]="true"></db-checkbox>
+    <h2>6. Message Property Example</h2>
+    <db-checkbox
+      label="Checkbox with Message"
+      message="This is a helper message."
+    ></db-checkbox>
+    <h2>7. Change Event Example</h2>
+    <db-checkbox
+      label="Change Event"
+      (change)="console.log('Change event:', $event.target.checked)"
+    ></db-checkbox
+  ></ng-container> `,
+  styles: `:host { display: contents; }`,
+})
+export class Checkbox {
+  constructor() {}
+}
+```

package/agent/CustomSelect.md

@@ -0,0 +1,89 @@
+
+
+# CustomSelect Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBCustomSelect } from "../index";
+
+@Component({
+  selector: "custom-select",
+  standalone: true,
+  imports: [CommonModule, DBCustomSelect],
+  template: `<ng-container
+    ><h1>DBCustomSelect Documentation Examples</h1>
+    <h2>1. Default Custom Select</h2>
+    <db-custom-select
+      label="Default Custom Select"
+      [options]="getOptions()"
+    ></db-custom-select>
+    <h2>3. Multiple Select</h2>
+    <db-custom-select
+      label="Multiple Custom Select"
+      [multiple]="true"
+      [options]="getOptions()"
+    ></db-custom-select>
+    <h2>4. Disabled State</h2>
+    <db-custom-select
+      label="Disabled Custom Select"
+      [disabled]="true"
+      [options]="getOptions()"
+    ></db-custom-select>
+    <h2>5. Validation States</h2>
+    <db-custom-select
+      validMessage="This is a valid selection"
+      validation="valid"
+      label="Valid Custom Select"
+      [options]="getOptions()"
+    ></db-custom-select>
+    <db-custom-select
+      invalidMessage="This is an invalid selection"
+      validation="invalid"
+      label="Invalid Custom Select"
+      [options]="getOptions()"
+    ></db-custom-select>
+    <db-custom-select
+      validation="no-validation"
+      label="No Validation Custom Select"
+      [options]="getOptions()"
+    ></db-custom-select>
+    <h2>6. Change Event Example</h2>
+    <db-custom-select
+      label="Change Event"
+      (change)="console.log('Change event:', $event.target.value)"
+      [options]="getOptions()"
+    ></db-custom-select>
+    <h2>7. Placeholder Example</h2>
+    <db-custom-select
+      label="Custom Select with Placeholder"
+      placeholder="Select an option"
+      [options]="getOptions()"
+    ></db-custom-select
+  ></ng-container> `,
+  styles: `:host { display: contents; }`,
+})
+export class CustomSelect {
+  getOptions() {
+    return [
+      {
+        value: "1",
+        label: "Option 1",
+        selected: false,
+      },
+      {
+        value: "2",
+        label: "Option 2",
+        disabled: true,
+      },
+      {
+        value: "3",
+        label: "Option 3",
+      },
+    ];
+  }
+
+  constructor() {}
+}
+```

package/agent/Divider.md

@@ -0,0 +1,37 @@
+
+
+# Divider Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBDivider } from "../index";
+
+@Component({
+  selector: "divider",
+  standalone: true,
+  imports: [CommonModule, DBDivider],
+  template: `<ng-container
+    ><h1>DBDivider Documentation Examples</h1>
+    <h2>1. Default Divider</h2>
+    <db-divider></db-divider>
+    <h2>2. Margin Variants</h2>
+    <db-divider margin="none"></db-divider>
+    <db-divider margin="_"></db-divider>
+    <h2>3. Orientation Variants</h2>
+    <db-divider variant="horizontal"></db-divider>
+    <db-divider variant="vertical"></db-divider>
+    <h2>4. Emphasis Variants</h2>
+    <db-divider emphasis="weak"></db-divider>
+    <db-divider emphasis="strong"></db-divider>
+    <h2>5. Width Variants</h2>
+    <db-divider width="full"></db-divider>
+    <db-divider width="auto"></db-divider
+  ></ng-container> `,
+  styles: `:host { display: contents; }`,
+})
+export class Divider {
+  constructor() {}
+}
+```

package/agent/Drawer.md

@@ -0,0 +1,90 @@
+## 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)
+
+```ts
+import { Component, effect, signal } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBButton } from "../../button";
+import { DBDrawer } from "../index";
+
+@Component({
+  selector: "drawer",
+  standalone: true,
+  imports: [CommonModule, DBButton, DBDrawer],
+  template: `<ng-container
+    ><h1>DBDrawer Documentation Examples</h1>
+    <h2>1. Default Drawer</h2>
+    <div>
+      <db-button
+        (click)="{
+          open.set(true);
+        }"
+      >
+        Open Me
+      </db-button>
+      <db-drawer
+        [open]="open()"
+        (close)="{
+          open.set(false);
+        }"
+        [drawerHeader]="<header>Optional drawer header</header>"
+      >
+        My Drawer content
+      </db-drawer>
+    </div>
+    <h2>2. Drawer Variants</h2>
+    <div>
+      <db-button
+        (click)="{
+          open.set(true);
+        }"
+      >
+        Open Modal Drawer
+      </db-button>
+      <db-drawer
+        variant="modal"
+        [open]="open()"
+        (close)="{
+          open.set(false);
+        }"
+      >
+        Modal Drawer content
+      </db-drawer>
+    </div>
+    <div>
+      <db-button
+        (click)="{
+          open.set(true);
+        }"
+      >
+        Open Inside Drawer
+      </db-button>
+      <db-drawer
+        variant="inside"
+        [open]="open()"
+        (close)="{
+          open.set(false);
+        }"
+      >
+        Inside Drawer content
+      </db-drawer>
+    </div></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Drawer {
+  open = signal<boolean>(false);
+
+  constructor() {}
+}
+```

package/agent/Header.md

@@ -0,0 +1,45 @@
+
+
+# Header Examples (angular)
+
+```ts
+import { Component, effect, signal } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBNavigation } from "../../navigation";
+import { DBNavigationItem } from "../../navigation-item";
+import { DBHeader } from "../index";
+
+@Component({
+  selector: "header",
+  standalone: true,
+  imports: [CommonModule, DBHeader, DBNavigation, DBNavigationItem],
+  template: `<ng-container
+    ><h1>DBHeader Documentation Examples</h1>
+    <h2>1. Default Header</h2>
+    <db-header [drawerOpen]="drawerOpen()" (toggle)="drawerOpen.set($event)">
+      <db-brand brand>My Awesome App</db-header>
+<ng-container *dbMetaNavigation><db-link href="#">Imprint</db-link><db-link href="#">Help</db-link></ng-container>
+<ng-container primary-action><db-button icon="magnifying_glass" variant="ghost" noText>Search</db-button></ng-container>
+<ng-container *secondaryAction><db-button icon="x_placeholder" variant="ghost" noText>Profile</db-button><db-button icon="alert" variant="ghost" noText>Notification</db-button><db-button icon="help" variant="ghost" noText>Help</db-button></ng-container>
+
+
+      <db-navigation
+        ><db-navigation-item><a href="#">Navi-Item 1</a></db-navigation-item>
+        <db-navigation-item icon="x_placeholder"
+          ><a href="#">Navi-Item 2</a></db-navigation-item
+        >
+        <db-navigation-item [disabled]="true"
+          ><a href="#">Navi-Item 3</a></db-navigation-item
+        ></db-navigation
+      ></db-header
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Header {
+  drawerOpen = signal<boolean>(false);
+
+  constructor() {}
+}
+```

package/agent/Icon.md

@@ -0,0 +1,36 @@
+
+
+# Icon Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBIcon } from "../index";
+
+@Component({
+  selector: "icon",
+  standalone: true,
+  imports: [CommonModule, DBIcon],
+  template: `<ng-container
+    ><h1>DBIcon Documentation Examples</h1>
+    <h2>1. Default Icon</h2>
+    <db-icon>Default Icon</db-icon>
+    <h2>2. Icon Variants</h2>
+    <db-icon icon="user">User Icon</db-icon>
+    <db-icon icon="settings">Settings Icon</db-icon>
+    <h2>3. Icon Weights</h2>
+    <db-icon weight="16">16px Icon</db-icon>
+    <db-icon weight="24">24px Icon</db-icon>
+    <db-icon weight="32">32px Icon</db-icon>
+    <h2>4. Custom Class</h2>
+    <db-icon className="my-custom-class">Custom Class Icon</db-icon>
+    <h2>5. Text Content</h2>
+    <db-icon text="Icon with Text">Icon with Text</db-icon></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Icon {
+  constructor() {}
+}
+```