@db-ux/ngx-core-components 4.14.0-shell-52d18db → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @db-ux/ngx-core-components
 
+## 5.0.0
+
+We're providing a [migration guide for all 4.x to 5.0.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v4.x.x-to-v5.0.0.md) changes.
+
+### Major Changes
+
+- refactor: DBDrawer with breaking changes - [see commit 9189f6c](https://github.com/db-ux-design-system/core-web/commit/9189f6c24cd3a64f072c2f60f8c8127d1ed68c55):
+
+        - The `DBDrawer` component now requires a `DBDrawerHeader` component to be passed in the `header` slot.
+        - The `spacing` property has been removed from `DBDrawer`.
+        - The default `direction` has changed from `right` to `to-left`.
+        - The `width` property has been renamed to `containerSize`.
+        - The `direction` values have been renamed from `right`/`left` to `to-left`/`to-right`.
+
+- refactor: remove default `margin-inline` from `[data-icon]` pseudo-elements in favor of `gap` - [see commit 635f4b7](https://github.com/db-ux-design-system/core-web/commit/635f4b7ff6ce2aa9341932cb0b8a9c8657ed1ade)
+
+- refactor: rework DBTabs and DBTabItem - [see commit c50e522](https://github.com/db-ux-design-system/core-web/commit/c50e5221a4c6f3357ff52451291bdc5772267178):
+
+        - **Breaking:** DBTabItem now renders a native `button` (`role="tab"`) instead of a radio `input`.
+        - **Breaking:** Removed `checked`, `noText` and `name` from DBTabItem.
+        - **Breaking:** Renamed DBTabs props `onTabSelect` → `onIndexChange`, `alignment` → `tabItemAlignment`, `width` → `tabItemWidth`.
+        - **Breaking:** Deep linking derives the tab id from the `id` prop instead of `label`.
+        - Added truncation tooltip for overflowing tab labels and fixed vertical layout, trailing icon and tooltip placement.
+
+### Patch Changes
+
+- fix: remove dead `z-index` and `position: relative` from table-row interactive children - [see commit 7edb77b](https://github.com/db-ux-design-system/core-web/commit/7edb77bb9f90d4a79f238ebab362074d12f02f0f)
+
 ## 4.14.0
 
 ### Minor Changes

package/agent/TabItem.md

@@ -30,8 +30,12 @@ import { DBTabItem } from "../index";
     </db-tab-item>
     <h2>5. Label Property</h2>
     <db-tab-item label="Tab Item Label">Tab Item with Label</db-tab-item>
-    <h2>6. No Text</h2>
-    <db-tab-item icon="user" [noText]="true"></db-tab-item
+    <h2>6. Tab with Icon and Label</h2>
+    <db-tab-item
+      label="User Profile"
+      icon="user"
+      [showIcon]="true"
+    ></db-tab-item
   ></ng-container> `,
   styles: `:host { display: contents; }`,
 })

package/agent/Tabs.md

@@ -20,56 +20,56 @@ import { DBTabs } from "../index";
     <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-item>Def Tab 1</db-tab-item>
+        <db-tab-item>Def Tab 2</db-tab-item>
+        <db-tab-item>Def 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-tab-panel>Def Panel 1</db-tab-panel>
+      <db-tab-panel>Def Panel 2</db-tab-panel>
+      <db-tab-panel>Def 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-item>Scroll Tab 1</db-tab-item>
+        <db-tab-item>Scroll Tab 2</db-tab-item>
+        <db-tab-item>Scroll 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-tab-panel>Scroll Panel 1</db-tab-panel>
+      <db-tab-panel>Scroll Panel 2</db-tab-panel>
+      <db-tab-panel>Scroll 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-item>Arrow Tab 1</db-tab-item>
+        <db-tab-item>Arrow Tab 2</db-tab-item>
+        <db-tab-item>Arrow 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-tab-panel>Arrow Panel 1</db-tab-panel>
+      <db-tab-panel>Arrow Panel 2</db-tab-panel>
+      <db-tab-panel>Arrow 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-item>InitIdx Tab 1</db-tab-item>
+        <db-tab-item>InitIdx Tab 2</db-tab-item>
+        <db-tab-item>InitIdx 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-tab-panel>InitIdx Panel 1</db-tab-panel>
+      <db-tab-panel>InitIdx Panel 2</db-tab-panel>
+      <db-tab-panel>InitIdx 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-item>Manually Tab 1</db-tab-item>
+        <db-tab-item>Manually Tab 2</db-tab-item>
+        <db-tab-item>Manually 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-tab-panel>Manually Panel 1</db-tab-panel>
+      <db-tab-panel>Manually Panel 2</db-tab-panel>
+      <db-tab-panel>Manually Panel 3</db-tab-panel></db-tabs
     ></ng-container
   > `,
   styles: `:host { display: contents; }`,

package/agent/_instructions.md

@@ -1,5 +1,4 @@
 - Use "@db-ux/ngx-core-components" as import for components:
-  - 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,7 +6,6 @@
   - 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
@@ -24,14 +22,6 @@
   - 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