b2b-tools 0.1.0 → 0.1.1
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/README.md +108 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
# 📦 b2b-tools
|
|
2
|
-
|
|
3
1
|
[](https://angular.io/)
|
|
4
2
|
[](LICENSE)
|
|
5
3
|
[](https://www.npmjs.com/package/b2b-tools)
|
|
@@ -23,50 +21,134 @@ The source code for this library is hosted on GitHub:
|
|
|
23
21
|
|
|
24
22
|
- Angular 21
|
|
25
23
|
- Standalone Components
|
|
26
|
-
- CSS styling
|
|
27
24
|
- Signals-based state management
|
|
28
|
-
- Strict TypeScript
|
|
25
|
+
- Strict TypeScript
|
|
26
|
+
- CSS variable theming
|
|
29
27
|
|
|
30
28
|
---
|
|
31
29
|
|
|
32
|
-
|
|
30
|
+
# 📚 Index
|
|
33
31
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
- [Components](#-components)
|
|
33
|
+
- [AdvancedTableComponent](#-advancedtablecomponent)
|
|
34
|
+
- [AdvancedCardComponent](#-advancedcardcomponent)
|
|
35
|
+
- [Theming](#-theming)
|
|
36
|
+
- [Design Principles](#-design-principles)
|
|
37
|
+
- [Future Enhancements](#-future-enhancements)
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
# 🧩 Components
|
|
42
|
+
|
|
43
|
+
The library currently provides the following core components:
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## 🔹 AdvancedTableComponent
|
|
37
48
|
|
|
38
|
-
|
|
49
|
+
A modular and extensible data table component designed for structured
|
|
50
|
+
data visualization.
|
|
51
|
+
|
|
52
|
+
### Features
|
|
53
|
+
|
|
54
|
+
- Strongly typed column configuration
|
|
55
|
+
- Sorting support
|
|
56
|
+
- Pagination support
|
|
57
|
+
- Flexible cell rendering
|
|
58
|
+
- Standalone usage
|
|
59
|
+
- Domain-agnostic design
|
|
60
|
+
|
|
61
|
+
### Basic Usage
|
|
39
62
|
|
|
40
63
|
```ts
|
|
41
64
|
import { AdvancedTableComponent } from 'b2b-tools';
|
|
42
65
|
```
|
|
43
66
|
|
|
67
|
+
```html
|
|
68
|
+
<advanced-table [columns]="columns" [rows]="rows"></advanced-table>
|
|
69
|
+
```
|
|
70
|
+
|
|
44
71
|
---
|
|
45
72
|
|
|
46
|
-
##
|
|
73
|
+
## 🔹 AdvancedCardComponent
|
|
74
|
+
|
|
75
|
+
A highly configurable, domain-agnostic card component designed to
|
|
76
|
+
display summary information and expandable detailed content.
|
|
77
|
+
|
|
78
|
+
### Features
|
|
79
|
+
|
|
80
|
+
- Compact and expanded modes
|
|
81
|
+
- Inline / Drawer / Modal expansion
|
|
82
|
+
- Highlight metrics
|
|
83
|
+
- Summary blocks
|
|
84
|
+
- Header actions
|
|
85
|
+
- Tab system
|
|
86
|
+
- Template projection
|
|
87
|
+
- CSS variable theming
|
|
88
|
+
- Signals-based internal state
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
### Basic Usage
|
|
47
93
|
|
|
48
94
|
```ts
|
|
49
|
-
import {
|
|
50
|
-
|
|
95
|
+
import { AdvancedCardComponent } from 'b2b-tools';
|
|
96
|
+
```
|
|
51
97
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
98
|
+
```html
|
|
99
|
+
<advanced-card
|
|
100
|
+
[config]="cardConfig"
|
|
101
|
+
(action)="onHeaderAction($event)"
|
|
102
|
+
(tabChanged)="onTabChanged($event)"
|
|
103
|
+
(tabAction)="onTabAction($event)"
|
|
104
|
+
>
|
|
105
|
+
<ng-template advancedCardTemplate="example" let-cardId="cardId" let-tabId="tabId">
|
|
106
|
+
<div>Example content for {{ cardId }} (tab: {{ tabId }})</div>
|
|
107
|
+
</ng-template>
|
|
108
|
+
</advanced-card>
|
|
58
109
|
```
|
|
59
110
|
|
|
60
111
|
---
|
|
61
112
|
|
|
62
|
-
|
|
113
|
+
# 🎨 Theming
|
|
63
114
|
|
|
64
|
-
|
|
115
|
+
Both components support CSS variables for styling customization.
|
|
65
116
|
|
|
66
|
-
|
|
117
|
+
Example:
|
|
67
118
|
|
|
68
|
-
|
|
69
|
-
-
|
|
70
|
-
|
|
71
|
-
-
|
|
72
|
-
-
|
|
119
|
+
```html
|
|
120
|
+
<advanced-card
|
|
121
|
+
[config]="cardConfig"
|
|
122
|
+
style="--ac-primary: #f58026; --ac-radius: 18px; --ac-overlay: rgba(0,0,0,.55)"
|
|
123
|
+
></advanced-card>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Common tokens:
|
|
127
|
+
|
|
128
|
+
- --ac-primary
|
|
129
|
+
- --ac-radius
|
|
130
|
+
- --ac-overlay
|
|
131
|
+
- --ac-surface
|
|
132
|
+
- --ac-border
|
|
133
|
+
- --ac-text
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
# 📐 Design Principles
|
|
138
|
+
|
|
139
|
+
- Domain-agnostic
|
|
140
|
+
- Strongly typed configuration
|
|
141
|
+
- Projection-based extensibility
|
|
142
|
+
- Composable architecture
|
|
143
|
+
- Enterprise-ready scalability
|
|
144
|
+
- Minimal coupling
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
# 🔮 Future Enhancements
|
|
149
|
+
|
|
150
|
+
- Animation support
|
|
151
|
+
- Accessibility improvements
|
|
152
|
+
- Storybook documentation
|
|
153
|
+
- Public API documentation
|
|
154
|
+
- Context generics support
|