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

package/agent/Infotext.md

@@ -0,0 +1,41 @@
+
+
+# Infotext Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBInfotext } from "../index";
+
+@Component({
+  selector: "infotext",
+  standalone: true,
+  imports: [CommonModule, DBInfotext],
+  template: `<ng-container
+    ><h1>DBInfotext Documentation Examples</h1>
+    <h2>1. Default Infotext</h2>
+    <db-infotext>Default Infotext</db-infotext>
+    <h2>2. Semantic Variants</h2>
+    <db-infotext semantic="adaptive">Adaptive</db-infotext>
+    <db-infotext semantic="neutral">Neutral</db-infotext>
+    <db-infotext semantic="critical">Critical</db-infotext>
+    <db-infotext semantic="informational">Informational</db-infotext>
+    <db-infotext semantic="warning">Warning</db-infotext>
+    <db-infotext semantic="successful">Successful</db-infotext>
+    <h2>3. Sizes</h2>
+    <db-infotext size="small">Small</db-infotext>
+    <db-infotext size="medium">Medium</db-infotext>
+    <h2>4. Icon Visibility</h2>
+    <db-infotext icon="info" [showIcon]="false"> Icon Hidden </db-infotext>
+    <h2>5. Custom Class</h2>
+    <db-infotext className="my-custom-class"
+      >Custom Class</db-infotext
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Infotext {
+  constructor() {}
+}
+```

package/agent/Input.md

@@ -0,0 +1,58 @@
+
+
+# Input Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBInput } from "../index";
+
+@Component({
+  selector: "input",
+  standalone: true,
+  imports: [CommonModule, DBInput],
+  template: `<ng-container
+    ><h1>DBInput Documentation Examples</h1>
+    <h2>1. Default Input</h2>
+    <db-input label="Enter text here"></db-input>
+    <h2>2. Input Types</h2>
+    <db-input type="text" label="Text Input"></db-input>
+    <db-input type="email" label="Email Input"></db-input>
+    <db-input type="password" label="Password Input"></db-input>
+    <db-input type="number" label="Number Input"></db-input>
+    <h2>3. Sizes</h2>
+    <db-input size="small" label="Small Input"></db-input>
+    <db-input size="medium" label="Medium Input"></db-input>
+    <h2>4. Icon Support</h2>
+    <db-input icon="search" label="Search Input"></db-input>
+    <db-input iconLeading="user" label="Leading Icon"></db-input>
+    <db-input iconTrailing="check" label="Trailing Icon"></db-input>
+    <h2>5. Validation States</h2>
+    <db-input validation="valid" label="Valid Input"></db-input>
+    <db-input validation="invalid" label="Invalid Input"></db-input>
+    <db-input validation="no-validation" label="No Validation"></db-input>
+    <h2>6. Disabled State</h2>
+    <db-input label="Disabled Input" [disabled]="true"></db-input>
+    <h2>7. Custom Class</h2>
+    <db-input className="my-custom-class" label="Custom Class"></db-input>
+    <h2>8. Placeholder Examples</h2>
+    <db-input placeholder="Enter text here" label="With Placeholder"></db-input>
+    <db-input placeholder="Search here" label="Search Placeholder"></db-input>
+    <h2>9. Input Event Example</h2>
+    <db-input
+      label="Input Event"
+      (input)="console.log('Input event:', $event.target.value)"
+    ></db-input>
+    <h2>10. Message Property Example</h2>
+    <db-input
+      label="Input with Message"
+      message="This is a helper message."
+    ></db-input
+  ></ng-container> `,
+  styles: `:host { display: contents; }`,
+})
+export class Input {
+  constructor() {}
+}
+```

package/agent/Link.md

@@ -0,0 +1,60 @@
+
+
+# Link Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBLink } from "../index";
+
+@Component({
+  selector: "link",
+  standalone: true,
+  imports: [CommonModule, DBLink],
+  template: `<ng-container
+    ><h1>DBLink Documentation Examples</h1>
+    <h2>1. Default Link</h2>
+    <db-link href="https://example.com">Default Link</db-link>
+    <h2>2. Disabled Link</h2>
+    <db-link href="https://example.com" [disabled]="true">
+      Disabled Link
+    </db-link>
+    <h2>3. Target Variants</h2>
+    <db-link href="https://example.com" target="_self"> Self Target </db-link>
+    <db-link href="https://example.com" target="_blank"> Blank Target </db-link>
+    <h2>4. Custom Class</h2>
+    <db-link href="https://example.com" className="my-custom-class">
+      Custom Class
+    </db-link>
+    <h2>5. Rel Attribute</h2>
+    <db-link href="https://example.com" rel="noopener noreferrer">
+      No Referrer
+    </db-link>
+    <h2>6. Link Variants</h2>
+    <db-link href="https://example.com" variant="adaptive">
+      Adaptive Variant
+    </db-link>
+    <db-link href="https://example.com" variant="brand">
+      Brand Variant
+    </db-link>
+    <db-link href="https://example.com" variant="inline">
+      Inline Variant
+    </db-link>
+    <h2>7. Link Sizes</h2>
+    <db-link href="https://example.com" size="medium"> Medium Size </db-link>
+    <db-link href="https://example.com" size="small"> Small Size </db-link>
+    <h2>8. Link Content</h2>
+    <db-link href="https://example.com" content="external">
+      External Content
+    </db-link>
+    <db-link href="https://example.com" content="internal">
+      Internal Content
+    </db-link></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Link {
+  constructor() {}
+}
+```

package/agent/Navigation.md

@@ -0,0 +1,34 @@
+
+
+# Navigation Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBNavigationItem } from "../../navigation-item/index";
+import { DBNavigation } from "../index";
+
+@Component({
+  selector: "navigation",
+  standalone: true,
+  imports: [CommonModule, DBNavigation, DBNavigationItem],
+  template: `<ng-container
+    ><h1>DBNavigation Documentation Examples</h1>
+    <h2>1. Default Navigation</h2>
+    <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
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Navigation {
+  constructor() {}
+}
+```

package/agent/NavigationItem.md

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

package/agent/Notification.md

@@ -0,0 +1,52 @@
+
+
+# Notification Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBNotification } from "../index";
+
+@Component({
+  selector: "notification",
+  standalone: true,
+  imports: [CommonModule, DBNotification],
+  template: `<ng-container
+    ><h1>DBNotification Documentation Examples</h1>
+    <h2>1. Default Notification</h2>
+    <db-notification>Default Notification</db-notification>
+    <h2>2. Semantic Variants</h2>
+    <db-notification semantic="adaptive">Adaptive</db-notification>
+    <db-notification semantic="neutral">Neutral</db-notification>
+    <db-notification semantic="critical">Critical</db-notification>
+    <db-notification semantic="informational"> Informational </db-notification>
+    <db-notification semantic="warning">Warning</db-notification>
+    <db-notification semantic="successful">Successful</db-notification>
+    <h2>3. Variants</h2>
+    <db-notification variant="docked">Docked</db-notification>
+    <db-notification variant="standalone">Standalone</db-notification>
+    <db-notification variant="overlay">Overlay</db-notification>
+    <h2>4. Closeable</h2>
+    <db-notification [closeable]="true">Closeable Notification</db-notification>
+    <h2>5. Headline</h2>
+    <db-notification headline="Important Update">
+      Notification with Headline
+    </db-notification>
+    <h2>6. Timestamp</h2>
+    <db-notification timestamp="10:30 AM">
+      Notification with Timestamp
+    </db-notification>
+    <h2>7. Icon Support</h2>
+    <db-notification icon="info">Notification with Icon</db-notification>
+    <h2>8. Custom Class</h2>
+    <db-notification className="my-custom-class">
+      Custom Class
+    </db-notification></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Notification {
+  constructor() {}
+}
+```

package/agent/Page.md

@@ -0,0 +1,45 @@
+
+
+# Page Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBPage } from "../index";
+
+@Component({
+  selector: "page",
+  standalone: true,
+  imports: [CommonModule, DBPage],
+  template: `<ng-container
+    ><h1>DBPage Documentation Examples</h1>
+    <h2>1. Default Page</h2>
+    <db-page><db-header header>Header Content</db-header>
+ Main Page</db-page>
+    <h2>2. Document Overflow Variants</h2>
+    <db-page documentOverflow="hidden">
+      <db-header header>Header Content</db-header>
+ Main Page with Hidden Overflow
+    </db-page>
+    <db-page documentOverflow="auto">
+      <db-header header>Header Content</db-header>
+ Main Page with Auto Overflow
+    </db-page>
+    <h2>3. Fade-In Effect</h2>
+    <db-page [fadeIn]="true"><db-header header>Header Content</db-header>
+ Main Page with Fade-In</db-page>
+    <h2>4. Variant Examples</h2>
+    <db-page variant="auto"><db-header header>Header Content</db-header>
+ Page with Auto Variant</db-page>
+    <db-page variant="fixed"
+      ><db-header header>Header Content</db-header>
+ Page with Fixed Variant</db-page
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Page {
+  constructor() {}
+}
+```

package/agent/Popover.md

@@ -0,0 +1,69 @@
+
+
+# Popover Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBButton } from "../../button/index";
+import { DBPopover } from "../index";
+
+@Component({
+  selector: "popover",
+  standalone: true,
+  imports: [CommonModule, DBPopover, DBButton],
+  template: `<ng-container
+    ><h1>DBPopover Documentation Examples</h1>
+    <h2>1. Default Popover</h2>
+    <db-popover [trigger]="<DBButton>Hover on me to open Popover</DBButton>">
+      Use any HTML code here like e.g. a
+      <code>button</code>
+      :
+
+      <button type="button">Test</button></db-popover
+    >
+    <h2>2. Placement Variants</h2>
+    <db-popover placement="top" [trigger]="<DBButton>Top Placement</DBButton>">
+      Popover with top placement
+    </db-popover>
+    <db-popover
+      placement="bottom"
+      [trigger]="<DBButton>Bottom Placement</DBButton>"
+    >
+      Popover with bottom placement
+    </db-popover>
+    <h2>3. Delay Variants</h2>
+    <db-popover delay="fast" [trigger]="<DBButton>Fast Delay</DBButton>">
+      Popover with fast delay
+    </db-popover>
+    <db-popover delay="slow" [trigger]="<DBButton>Slow Delay</DBButton>">
+      Popover with slow delay
+    </db-popover>
+    <h2>4. Animation</h2>
+    <db-popover
+      [trigger]="<DBButton>With Animation</DBButton>"
+      [animation]="true"
+    >
+      Popover with animation
+    </db-popover>
+    <db-popover
+      [trigger]="<DBButton>No Animation</DBButton>"
+      [animation]="false"
+    >
+      Popover without animation
+    </db-popover>
+    <h2>5. Width Variants</h2>
+    <db-popover width="auto" [trigger]="<DBButton>Auto Width</DBButton>">
+      Popover with auto width
+    </db-popover>
+    <db-popover width="fixed" [trigger]="<DBButton>Fixed Width</DBButton>">
+      Popover with fixed width
+    </db-popover></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Popover {
+  constructor() {}
+}
+```

package/agent/Radio.md

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

package/agent/Section.md

@@ -0,0 +1,39 @@
+
+
+# Section Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBSection } from "../index";
+
+@Component({
+  selector: "section",
+  standalone: true,
+  imports: [CommonModule, DBSection],
+  template: `<ng-container
+    ><h1>DBSection Documentation Examples</h1>
+    <h2>1. Default Section</h2>
+    <db-section>Default Section</db-section>
+    <h2>2. Spacing Variants</h2>
+    <db-section spacing="medium">Medium Spacing</db-section>
+    <db-section spacing="small">Small Spacing</db-section>
+    <db-section spacing="large">Large Spacing</db-section>
+    <db-section spacing="none">No Spacing</db-section>
+    <h2>3. Container Width</h2>
+    <db-section width="full">Full Width</db-section>
+    <db-section width="medium">Medium Width</db-section>
+    <db-section width="large">Large Width</db-section>
+    <db-section width="small">Small Width</db-section>
+    <h2>4. Custom Class</h2>
+    <db-section className="my-custom-class"
+      >Custom Class</db-section
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Section {
+  constructor() {}
+}
+```

package/agent/Select.md

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

package/agent/Stack.md

@@ -0,0 +1,51 @@
+
+
+# Stack Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBStack } from "../index";
+
+@Component({
+  selector: "stack",
+  standalone: true,
+  imports: [CommonModule, DBStack],
+  template: `<ng-container
+    ><h1>DBStack Documentation Examples</h1>
+    <h2>1. Default Stack</h2>
+    <db-stack>Default Stack</db-stack>
+    <h2>2. Variants</h2>
+    <db-stack variant="simple">Simple Variant</db-stack>
+    <db-stack variant="divider">Divider Variant</db-stack>
+    <h2>3. Directions</h2>
+    <db-stack direction="row">Row Direction</db-stack>
+    <db-stack direction="column">Column Direction</db-stack>
+    <h2>4. Alignment</h2>
+    <db-stack alignment="stretch">Stretch Alignment</db-stack>
+    <db-stack alignment="start">Start Alignment</db-stack>
+    <db-stack alignment="end">End Alignment</db-stack>
+    <db-stack alignment="center">Center Alignment</db-stack>
+    <h2>5. Justify Content</h2>
+    <db-stack justifyContent="space-between">Space Between</db-stack>
+    <db-stack justifyContent="start">Start Justify</db-stack>
+    <db-stack justifyContent="end">End Justify</db-stack>
+    <db-stack justifyContent="center">Center Justify</db-stack>
+    <h2>6. Gap Spacing</h2>
+    <db-stack gap="medium">Medium Gap</db-stack>
+    <db-stack gap="small">Small Gap</db-stack>
+    <db-stack gap="large">Large Gap</db-stack>
+    <db-stack gap="none">No Gap</db-stack>
+    <h2>7. Wrap</h2>
+    <db-stack [wrap]="true">Wrap Enabled</db-stack>
+    <db-stack [wrap]="false">Wrap Disabled</db-stack>
+    <h2>8. Custom Class</h2>
+    <db-stack className="my-custom-class">Custom Class</db-stack></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Stack {
+  constructor() {}
+}
+```

package/agent/Switch.md

@@ -0,0 +1,55 @@
+
+
+# Switch Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBSwitch } from "../index";
+
+@Component({
+  selector: "switch",
+  standalone: true,
+  imports: [CommonModule, DBSwitch],
+  template: `<ng-container
+    ><h1>DBSwitch Documentation Examples</h1>
+    <h2>1. Default Switch</h2>
+    <db-switch label="Default Switch"></db-switch>
+    <h2>2. Visual Aid</h2>
+    <db-switch label="Switch with Visual Aid" [visualAid]="true"></db-switch>
+    <db-switch
+      label="Switch without Visual Aid"
+      [visualAid]="false"
+    ></db-switch>
+    <h2>3. Sizes</h2>
+    <db-switch size="small" label="Small Switch"></db-switch>
+    <db-switch size="medium" label="Medium Switch"></db-switch>
+    <h2>4. Validation States</h2>
+    <db-switch validation="valid" label="Valid Switch"></db-switch>
+    <db-switch validation="invalid" label="Invalid Switch"></db-switch>
+    <db-switch
+      validation="no-validation"
+      label="No Validation Switch"
+    ></db-switch>
+    <h2>5. Disabled State</h2>
+    <db-switch label="Disabled Switch" [disabled]="true"></db-switch>
+    <h2>6. Icon Support</h2>
+    <db-switch icon="check" label="Switch with Icon"></db-switch>
+    <db-switch iconLeading="user" label="Switch with Leading Icon"></db-switch>
+    <db-switch
+      iconTrailing="arrow"
+      label="Switch with Trailing Icon"
+    ></db-switch>
+    <h2>7. Change Event Example</h2>
+    <db-switch
+      label="Change Event"
+      (change)="console.log('Change event:', $event.target.checked)"
+    ></db-switch
+  ></ng-container> `,
+  styles: `:host { display: contents; }`,
+})
+export class Switch {
+  constructor() {}
+}
+```