@db-ux/ngx-core-components 4.5.1 → 4.5.2-0-eff2227

package/agent/Tabs.md

@@ -0,0 +1,80 @@
+
+
+# Tabs Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBTabItem } from "../../tab-item/index";
+import { DBTabList } from "../../tab-list/index";
+import { DBTabPanel } from "../../tab-panel/index";
+import { DBTabs } from "../index";
+
+@Component({
+  selector: "tabs",
+  standalone: true,
+  imports: [CommonModule, DBTabs, DBTabList, DBTabItem, DBTabPanel],
+  template: `<ng-container
+    ><h1>DBTabs Documentation Examples</h1>
+    <h2>1. Default Tabs</h2>
+    <db-tabs
+      ><db-tab-list
+        ><db-tab-item>Tab 1</db-tab-item>
+        <db-tab-item>Tab 2</db-tab-item>
+        <db-tab-item>Tab 3</db-tab-item></db-tab-list
+      >
+      <db-tab-panel>Tab Panel 1</db-tab-panel>
+      <db-tab-panel>Tab Panel 2</db-tab-panel>
+      <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs
+    >
+    <h2>2. Behavior Variants</h2>
+    <db-tabs behavior="scrollbar"
+      ><db-tab-list
+        ><db-tab-item>Tab 1</db-tab-item>
+        <db-tab-item>Tab 2</db-tab-item>
+        <db-tab-item>Tab 3</db-tab-item></db-tab-list
+      >
+      <db-tab-panel>Tab Panel 1</db-tab-panel>
+      <db-tab-panel>Tab Panel 2</db-tab-panel>
+      <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs
+    >
+    <db-tabs behavior="arrows"
+      ><db-tab-list
+        ><db-tab-item>Tab 1</db-tab-item>
+        <db-tab-item>Tab 2</db-tab-item>
+        <db-tab-item>Tab 3</db-tab-item></db-tab-list
+      >
+      <db-tab-panel>Tab Panel 1</db-tab-panel>
+      <db-tab-panel>Tab Panel 2</db-tab-panel>
+      <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs
+    >
+    <h2>3. Initial Selected Index</h2>
+    <db-tabs [initialSelectedIndex]="1"
+      ><db-tab-list
+        ><db-tab-item>Tab 1</db-tab-item>
+        <db-tab-item>Tab 2</db-tab-item>
+        <db-tab-item>Tab 3</db-tab-item></db-tab-list
+      >
+      <db-tab-panel>Tab Panel 1</db-tab-panel>
+      <db-tab-panel>Tab Panel 2</db-tab-panel>
+      <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs
+    >
+    <h2>4. Initial Selected Mode</h2>
+    <db-tabs initialSelectedMode="manually"
+      ><db-tab-list
+        ><db-tab-item>Tab 1</db-tab-item>
+        <db-tab-item>Tab 2</db-tab-item>
+        <db-tab-item>Tab 3</db-tab-item></db-tab-list
+      >
+      <db-tab-panel>Tab Panel 1</db-tab-panel>
+      <db-tab-panel>Tab Panel 2</db-tab-panel>
+      <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Tabs {
+  constructor() {}
+}
+```

package/agent/Tag.md

@@ -0,0 +1,48 @@
+
+
+# Tag Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBButton } from "../../button";
+import { DBCheckbox } from "../../checkbox";
+import { DBLink } from "../../link";
+import { DBRadio } from "../../radio";
+import { DBTag } from "../index";
+
+@Component({
+  selector: "tag",
+  standalone: true,
+  imports: [CommonModule, DBTag, DBButton, DBLink, DBCheckbox, DBRadio],
+  template: `<ng-container
+    ><h1>DBTag Documentation Examples</h1>
+    <h2>1. Default Tags</h2>
+    <db-tag><db-button>Tag as Button</db-button></db-tag>
+    <db-tag><db-link>Tag as Link</db-link></db-tag>
+    <db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>
+    <db-tag><db-radio>Tag as Radio</db-radio></db-tag>
+    <db-tag>Static Tag</db-tag>
+    <h2>2. Overflow Example</h2>
+    <db-tag [overflow]="true"><span>Static Tag with overflow</span></db-tag>
+    <h2>3. Removable Tag</h2>
+    <db-tag behavior="removable" (remove)="console.log('Tag removed')">
+      Removable Tag
+    </db-tag>
+    <h2>4. Semantic Variants</h2>
+    <db-tag semantic="adaptive">Adaptive Tag</db-tag>
+    <db-tag semantic="neutral">Neutral Tag</db-tag>
+    <db-tag semantic="critical">Critical Tag</db-tag>
+    <db-tag semantic="informational">Informational Tag</db-tag>
+    <db-tag semantic="warning">Warning Tag</db-tag>
+    <db-tag semantic="successful">Successful Tag</db-tag>
+    <h2>5. Icon Support</h2>
+    <db-tag icon="user">Tag with Icon</db-tag></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Tag {
+  constructor() {}
+}
+```

package/agent/Textarea.md

@@ -0,0 +1,57 @@
+
+
+# Textarea Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBTextarea } from "../index";
+
+@Component({
+  selector: "textarea",
+  standalone: true,
+  imports: [CommonModule, DBTextarea],
+  template: `<ng-container
+    ><h1>DBTextarea Documentation Examples</h1>
+    <h2>1. Default Textarea</h2>
+    <db-textarea label="Default Textarea"></db-textarea>
+    <h2>2. Resizable Variants</h2>
+    <db-textarea resize="none" label="No Resize"></db-textarea>
+    <db-textarea resize="both" label="Resize Both"></db-textarea>
+    <db-textarea resize="horizontal" label="Resize Horizontal"></db-textarea>
+    <db-textarea resize="vertical" label="Resize Vertical"></db-textarea>
+    <h2>3. Rows and Columns</h2>
+    <db-textarea
+      label="Custom Rows and Columns"
+      [rows]="5"
+      [cols]="30"
+    ></db-textarea>
+    <h2>4. Wrap Variants</h2>
+    <db-textarea wrap="hard" label="Hard Wrap"></db-textarea>
+    <db-textarea wrap="soft" label="Soft Wrap"></db-textarea>
+    <db-textarea wrap="off" label="No Wrap"></db-textarea>
+    <h2>5. Disabled State</h2>
+    <db-textarea label="Disabled Textarea" [disabled]="true"></db-textarea>
+    <h2>6. Placeholder Examples</h2>
+    <db-textarea
+      placeholder="Enter text here"
+      label="With Placeholder"
+    ></db-textarea>
+    <h2>7. Message Property Example</h2>
+    <db-textarea
+      label="Textarea with Message"
+      message="This is a helper message."
+    ></db-textarea>
+    <h2>8. Input Event Example</h2>
+    <db-textarea
+      label="Input Event"
+      (input)="console.log('Input event:', $event.target.value)"
+    ></db-textarea
+  ></ng-container> `,
+  styles: `:host { display: contents; }`,
+})
+export class Textarea {
+  constructor() {}
+}
+```

package/agent/Tooltip.md

@@ -0,0 +1,64 @@
+
+
+# Tooltip Examples (angular)
+
+```ts
+import { Component, effect } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { DBButton } from "../../button";
+import { DBTooltip } from "../index";
+
+@Component({
+  selector: "tooltip",
+  standalone: true,
+  imports: [CommonModule, DBButton, DBTooltip],
+  template: `<ng-container
+    ><h1>DBTooltip Documentation Examples</h1>
+    <h2>1. Default Tooltip</h2>
+    <db-button>
+      Hover on me to open Tooltip
+
+      <db-tooltip>Tooltip</db-tooltip></db-button
+    >
+    <h2>2. Tooltip Variants</h2>
+    <db-button>
+      Description Tooltip
+
+      <db-tooltip variant="description">
+        Description Tooltip Content
+      </db-tooltip></db-button
+    >
+    <db-button>
+      Label Tooltip
+
+      <db-tooltip variant="label">Label Tooltip Content</db-tooltip></db-button
+    >
+    <h2>3. Tooltip with Arrow</h2>
+    <db-button>
+      Tooltip with Arrow
+
+      <db-tooltip [showArrow]="true">
+        Tooltip Content with Arrow
+      </db-tooltip></db-button
+    >
+    <h2>4. Placement Variants</h2>
+    <db-button>
+      Top Placement
+
+      <db-tooltip placement="top">Tooltip Content at Top</db-tooltip></db-button
+    >
+    <db-button>
+      Bottom Placement
+
+      <db-tooltip placement="bottom">
+        Tooltip Content at Bottom
+      </db-tooltip></db-button
+    ></ng-container
+  > `,
+  styles: `:host { display: contents; }`,
+})
+export class Tooltip {
+  constructor() {}
+}
+```

package/agent/_instructions.md

@@ -0,0 +1,31 @@
+- Use "@db-ux/ngx-core-components" as import for components:
+  - use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.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
+  - use for `DBTabs` or `Tabs` the file __agent-path__/agent/Tabs.md
+  - 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 `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
+  - use for `DBPopover` or `Popover` the file __agent-path__/agent/Popover.md
+  - use for `DBPage` or `Page` the file __agent-path__/agent/Page.md
+  - use for `DBNotification` or `Notification` the file __agent-path__/agent/Notification.md
+  - use for `DBNavigationItem` or `NavigationItem` the file __agent-path__/agent/NavigationItem.md
+  - use for `DBNavigation` or `Navigation` the file __agent-path__/agent/Navigation.md
+  - use for `DBLink` or `Link` the file __agent-path__/agent/Link.md
+  - use for `DBInput` or `Input` the file __agent-path__/agent/Input.md
+  - 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 `DBDivider` or `Divider` the file __agent-path__/agent/Divider.md
+  - use for `DBCustomSelect` or `CustomSelect` the file __agent-path__/agent/CustomSelect.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
+  - use for `DBBrand` or `Brand` the file __agent-path__/agent/Brand.md
+  - use for `DBBadge` or `Badge` the file __agent-path__/agent/Badge.md
+  - use for `DBAccordionItem` or `AccordionItem` the file __agent-path__/agent/AccordionItem.md
+  - use for `DBAccordion` or `Accordion` the file __agent-path__/agent/Accordion.md

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/ngx-core-components",
-  "version": "4.5.1",
+  "version": "4.5.2-0-eff2227",
   "description": "Angular components @db-ux/core-components",
   "type": "module",
   "repository": {
@@ -16,8 +16,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@db-ux/core-components": "4.5.1",
-    "@db-ux/core-foundations": "4.5.1",
+    "@db-ux/core-components": "4.5.2-0-eff2227",
+    "@db-ux/core-foundations": "4.5.2-0-eff2227",
     "tslib": "^2.3.0"
   },
   "typings": "index.d.ts",
@@ -31,4 +31,4 @@
     }
   },
   "sideEffects": false
-}
+}