@db-ux/ngx-core-components 4.14.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/agent/Drawer.md +0 -8
- package/agent/TabItem.md +6 -2
- package/agent/Tabs.md +30 -30
- package/agent/_instructions.md +1 -1
- package/fesm2022/db-ux-ngx-core-components.mjs +1647 -766
- package/fesm2022/db-ux-ngx-core-components.mjs.map +1 -1
- package/package.json +3 -3
- package/types/db-ux-ngx-core-components.d.ts +318 -134
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# @db-ux/ngx-core-components
|
|
2
2
|
|
|
3
|
+
## 5.0.0
|
|
4
|
+
|
|
5
|
+
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.
|
|
6
|
+
|
|
7
|
+
### Major Changes
|
|
8
|
+
|
|
9
|
+
- refactor: DBDrawer with breaking changes - [see commit 9189f6c](https://github.com/db-ux-design-system/core-web/commit/9189f6c24cd3a64f072c2f60f8c8127d1ed68c55):
|
|
10
|
+
|
|
11
|
+
- The `DBDrawer` component now requires a `DBDrawerHeader` component to be passed in the `header` slot.
|
|
12
|
+
- The `spacing` property has been removed from `DBDrawer`.
|
|
13
|
+
- The default `direction` has changed from `right` to `to-left`.
|
|
14
|
+
- The `width` property has been renamed to `containerSize`.
|
|
15
|
+
- The `direction` values have been renamed from `right`/`left` to `to-left`/`to-right`.
|
|
16
|
+
|
|
17
|
+
- 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)
|
|
18
|
+
|
|
19
|
+
- refactor: rework DBTabs and DBTabItem - [see commit c50e522](https://github.com/db-ux-design-system/core-web/commit/c50e5221a4c6f3357ff52451291bdc5772267178):
|
|
20
|
+
|
|
21
|
+
- **Breaking:** DBTabItem now renders a native `button` (`role="tab"`) instead of a radio `input`.
|
|
22
|
+
- **Breaking:** Removed `checked`, `noText` and `name` from DBTabItem.
|
|
23
|
+
- **Breaking:** Renamed DBTabs props `onTabSelect` → `onIndexChange`, `alignment` → `tabItemAlignment`, `width` → `tabItemWidth`.
|
|
24
|
+
- **Breaking:** Deep linking derives the tab id from the `id` prop instead of `label`.
|
|
25
|
+
- Added truncation tooltip for overflowing tab labels and fixed vertical layout, trailing icon and tooltip placement.
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- 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)
|
|
30
|
+
|
|
3
31
|
## 4.14.0
|
|
4
32
|
|
|
5
33
|
### Minor Changes
|
package/agent/Drawer.md
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
## CSS Properties
|
|
2
|
-
|
|
3
|
-
| CSS Variable | Default | CSS Property | Description | Example |
|
|
4
|
-
| --- | --- | --- | --- | --- |
|
|
5
|
-
| `--db-drawer-max-height` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-block-size | Sets the maximum height of the drawer | — |
|
|
6
|
-
| `--db-drawer-header-padding-block-end` | `#{map.get($spacing, "block")}` | padding-block-end | Controls the bottom padding inside the drawer header | — |
|
|
7
|
-
| `--db-drawer-content-padding-inline` | `#{map.get($spacing, "inline")}` | padding-inline | Controls left/right padding inside the drawer content area | — |
|
|
8
|
-
| `--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><div class="db-drawer db-drawer-wide"><br><!-- wide drawer --><br></div><br></pre> |
|
|
9
1
|
|
|
10
2
|
|
|
11
3
|
# Drawer Examples (angular)
|
package/agent/TabItem.md
CHANGED
|
@@ -30,8 +30,12 @@ import { DBTabItem } from "../index";
|
|
|
30
30
|
</db-tab-item>
|
|
31
31
|
<h2>5. Label Property</h2>
|
|
32
32
|
<db-tab-item label="Tab Item Label">Tab Item with Label</db-tab-item>
|
|
33
|
-
<h2>6.
|
|
34
|
-
<db-tab-item
|
|
33
|
+
<h2>6. Tab with Icon and Label</h2>
|
|
34
|
+
<db-tab-item
|
|
35
|
+
label="User Profile"
|
|
36
|
+
icon="user"
|
|
37
|
+
[showIcon]="true"
|
|
38
|
+
></db-tab-item
|
|
35
39
|
></ng-container> `,
|
|
36
40
|
styles: `:host { display: contents; }`,
|
|
37
41
|
})
|
package/agent/Tabs.md
CHANGED
|
@@ -20,56 +20,56 @@ import { DBTabs } from "../index";
|
|
|
20
20
|
<h2>1. Default Tabs</h2>
|
|
21
21
|
<db-tabs
|
|
22
22
|
><db-tab-list
|
|
23
|
-
><db-tab-item>Tab 1</db-tab-item>
|
|
24
|
-
<db-tab-item>Tab 2</db-tab-item>
|
|
25
|
-
<db-tab-item>Tab 3</db-tab-item></db-tab-list
|
|
23
|
+
><db-tab-item>Def Tab 1</db-tab-item>
|
|
24
|
+
<db-tab-item>Def Tab 2</db-tab-item>
|
|
25
|
+
<db-tab-item>Def Tab 3</db-tab-item></db-tab-list
|
|
26
26
|
>
|
|
27
|
-
<db-tab-panel>
|
|
28
|
-
<db-tab-panel>
|
|
29
|
-
<db-tab-panel>
|
|
27
|
+
<db-tab-panel>Def Panel 1</db-tab-panel>
|
|
28
|
+
<db-tab-panel>Def Panel 2</db-tab-panel>
|
|
29
|
+
<db-tab-panel>Def Panel 3</db-tab-panel></db-tabs
|
|
30
30
|
>
|
|
31
31
|
<h2>2. Behavior Variants</h2>
|
|
32
32
|
<db-tabs behavior="scrollbar"
|
|
33
33
|
><db-tab-list
|
|
34
|
-
><db-tab-item>Tab 1</db-tab-item>
|
|
35
|
-
<db-tab-item>Tab 2</db-tab-item>
|
|
36
|
-
<db-tab-item>Tab 3</db-tab-item></db-tab-list
|
|
34
|
+
><db-tab-item>Scroll Tab 1</db-tab-item>
|
|
35
|
+
<db-tab-item>Scroll Tab 2</db-tab-item>
|
|
36
|
+
<db-tab-item>Scroll Tab 3</db-tab-item></db-tab-list
|
|
37
37
|
>
|
|
38
|
-
<db-tab-panel>
|
|
39
|
-
<db-tab-panel>
|
|
40
|
-
<db-tab-panel>
|
|
38
|
+
<db-tab-panel>Scroll Panel 1</db-tab-panel>
|
|
39
|
+
<db-tab-panel>Scroll Panel 2</db-tab-panel>
|
|
40
|
+
<db-tab-panel>Scroll Panel 3</db-tab-panel></db-tabs
|
|
41
41
|
>
|
|
42
42
|
<db-tabs behavior="arrows"
|
|
43
43
|
><db-tab-list
|
|
44
|
-
><db-tab-item>Tab 1</db-tab-item>
|
|
45
|
-
<db-tab-item>Tab 2</db-tab-item>
|
|
46
|
-
<db-tab-item>Tab 3</db-tab-item></db-tab-list
|
|
44
|
+
><db-tab-item>Arrow Tab 1</db-tab-item>
|
|
45
|
+
<db-tab-item>Arrow Tab 2</db-tab-item>
|
|
46
|
+
<db-tab-item>Arrow Tab 3</db-tab-item></db-tab-list
|
|
47
47
|
>
|
|
48
|
-
<db-tab-panel>
|
|
49
|
-
<db-tab-panel>
|
|
50
|
-
<db-tab-panel>
|
|
48
|
+
<db-tab-panel>Arrow Panel 1</db-tab-panel>
|
|
49
|
+
<db-tab-panel>Arrow Panel 2</db-tab-panel>
|
|
50
|
+
<db-tab-panel>Arrow Panel 3</db-tab-panel></db-tabs
|
|
51
51
|
>
|
|
52
52
|
<h2>3. Initial Selected Index</h2>
|
|
53
53
|
<db-tabs [initialSelectedIndex]="1"
|
|
54
54
|
><db-tab-list
|
|
55
|
-
><db-tab-item>Tab 1</db-tab-item>
|
|
56
|
-
<db-tab-item>Tab 2</db-tab-item>
|
|
57
|
-
<db-tab-item>Tab 3</db-tab-item></db-tab-list
|
|
55
|
+
><db-tab-item>InitIdx Tab 1</db-tab-item>
|
|
56
|
+
<db-tab-item>InitIdx Tab 2</db-tab-item>
|
|
57
|
+
<db-tab-item>InitIdx Tab 3</db-tab-item></db-tab-list
|
|
58
58
|
>
|
|
59
|
-
<db-tab-panel>
|
|
60
|
-
<db-tab-panel>
|
|
61
|
-
<db-tab-panel>
|
|
59
|
+
<db-tab-panel>InitIdx Panel 1</db-tab-panel>
|
|
60
|
+
<db-tab-panel>InitIdx Panel 2</db-tab-panel>
|
|
61
|
+
<db-tab-panel>InitIdx Panel 3</db-tab-panel></db-tabs
|
|
62
62
|
>
|
|
63
63
|
<h2>4. Initial Selected Mode</h2>
|
|
64
64
|
<db-tabs initialSelectedMode="manually"
|
|
65
65
|
><db-tab-list
|
|
66
|
-
><db-tab-item>Tab 1</db-tab-item>
|
|
67
|
-
<db-tab-item>Tab 2</db-tab-item>
|
|
68
|
-
<db-tab-item>Tab 3</db-tab-item></db-tab-list
|
|
66
|
+
><db-tab-item>Manually Tab 1</db-tab-item>
|
|
67
|
+
<db-tab-item>Manually Tab 2</db-tab-item>
|
|
68
|
+
<db-tab-item>Manually Tab 3</db-tab-item></db-tab-list
|
|
69
69
|
>
|
|
70
|
-
<db-tab-panel>
|
|
71
|
-
<db-tab-panel>
|
|
72
|
-
<db-tab-panel>
|
|
70
|
+
<db-tab-panel>Manually Panel 1</db-tab-panel>
|
|
71
|
+
<db-tab-panel>Manually Panel 2</db-tab-panel>
|
|
72
|
+
<db-tab-panel>Manually Panel 3</db-tab-panel></db-tabs
|
|
73
73
|
></ng-container
|
|
74
74
|
> `,
|
|
75
75
|
styles: `:host { display: contents; }`,
|
package/agent/_instructions.md
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
- Use "@db-ux/ngx-core-components" as import for components:
|
|
2
|
-
- use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
|
|
3
2
|
- use for `DBTooltip` or `Tooltip` the file __agent-path__/agent/Tooltip.md
|
|
4
3
|
- use for `DBTextarea` or `Textarea` the file __agent-path__/agent/Textarea.md
|
|
5
4
|
- use for `DBTag` or `Tag` the file __agent-path__/agent/Tag.md
|
|
@@ -20,6 +19,7 @@
|
|
|
20
19
|
- use for `DBInfotext` or `Infotext` the file __agent-path__/agent/Infotext.md
|
|
21
20
|
- use for `DBIcon` or `Icon` the file __agent-path__/agent/Icon.md
|
|
22
21
|
- use for `DBHeader` or `Header` the file __agent-path__/agent/Header.md
|
|
22
|
+
- use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
|
|
23
23
|
- use for `DBDivider` or `Divider` the file __agent-path__/agent/Divider.md
|
|
24
24
|
- use for `DBCustomSelect` or `CustomSelect` the file __agent-path__/agent/CustomSelect.md
|
|
25
25
|
- use for `DBCheckbox` or `Checkbox` the file __agent-path__/agent/Checkbox.md
|