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

package/utils/index.d.ts

@@ -0,0 +1,40 @@
+import { ClickEvent, GeneralKeyboardEvent } from '../shared/model';
+export declare const uuid: () => string;
+export declare const addAttributeToChildren: (element: Element, attribute: {
+    key: string;
+    value: string;
+}) => void;
+export type ClassNameArg = string | {
+    [key: string]: boolean | undefined;
+} | undefined;
+export declare const cls: (...args: ClassNameArg[]) => string;
+export declare const isArrayOfStrings: (value: unknown) => value is string[];
+export declare const hasVoiceOver: () => boolean;
+export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
+/**
+ * Some frameworks like stencil would not add "true" as value for a prop
+ * if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
+ * @param originBool Some boolean to convert to string
+ */
+export declare const getBooleanAsString: (originBool?: boolean | string) => any;
+export declare const getBoolean: (originBool?: boolean | string, propertyName?: string) => boolean | undefined;
+export declare const getNumber: (originNumber?: number | string, alternativeNumber?: number | string) => number | undefined;
+/**
+ * Retrieves the input value based on the provided value and input type.
+ *
+ * If the input type is "number" or "range", the value is processed as a number.
+ * Otherwise, the value is returned as-is.
+ *
+ * @param value - The input value, which can be a number, string, or undefined.
+ * @param inputType - The type of the input, such as "number", "range", or other string types.
+ * @returns The processed input value as a string, number, or undefined.
+ */
+export declare const getInputValue: (value?: number | string, inputType?: string) => string | number | undefined;
+export declare const getHideProp: (show?: boolean | string) => any;
+export declare const stringPropVisible: (givenString?: string, showString?: boolean | string) => boolean;
+export declare const getSearchInput: (element: HTMLElement) => HTMLInputElement | null;
+export declare const getOptionKey: (option: {
+    id?: string;
+    value?: string | number | string[] | undefined;
+}, prefix: string) => string;
+export declare const isKeyboardEvent: <T>(event?: ClickEvent<T> | GeneralKeyboardEvent<T>) => event is GeneralKeyboardEvent<T>;

package/utils/navigation.d.ts

@@ -0,0 +1,28 @@
+export type TriangleData = {
+    itemRect: DOMRect;
+    parentElementWidth: number;
+    subNavigationHeight: number;
+    padding: number;
+    outsideVX: 'left' | 'right' | undefined;
+    outsideVY: 'top' | 'bottom' | undefined;
+};
+export declare const isEventTargetNavigationItem: (event: unknown) => boolean;
+export declare class NavigationItemSafeTriangle {
+    private readonly element;
+    private readonly subNavigation;
+    private readonly parentSubNavigation;
+    private triangleData?;
+    private initialized;
+    private mouseX;
+    private mouseY;
+    constructor(element: HTMLElement | null, subNavigation: HTMLElement | null);
+    private init;
+    enableFollow(): void;
+    disableFollow(): void;
+    private getTriangleTipX;
+    private getTriangleTipY;
+    private hasMouseEnteredSubNavigation;
+    private getTriangleCoordinates;
+    followByMouseEvent(event: any): void;
+}
+export declare const handleSubNavigationPosition: (element: HTMLElement, level?: number) => void;

package/agent/Accordion.md

@@ -1,52 +0,0 @@
-
-
-# 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

@@ -1,45 +0,0 @@
-
-
-# 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

@@ -1,48 +0,0 @@
-
-
-# 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

@@ -1,29 +0,0 @@
-
-
-# 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

@@ -1,59 +0,0 @@
-
-
-# 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

@@ -1,39 +0,0 @@
-
-
-# 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

@@ -1,52 +0,0 @@
-
-
-# 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

@@ -1,89 +0,0 @@
-
-
-# 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

@@ -1,37 +0,0 @@
-
-
-# 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

@@ -1,90 +0,0 @@
-## 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

@@ -1,45 +0,0 @@
-
-
-# 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() {}
-}
-```