pm-fuel 20.0.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 +72 -0
- package/fesm2022/pm-fuel.mjs +14577 -0
- package/fesm2022/pm-fuel.mjs.map +1 -0
- package/index.d.ts +3356 -0
- package/package.json +27 -0
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# pm-fuel
|
|
2
|
+
|
|
3
|
+
Unified library containing UI components, utilities, pipes, directives, and styles for Payment Hub applications.
|
|
4
|
+
|
|
5
|
+
[**Storybook Demo**](https://pablomarzoa.github.io/?path=/docs/introduction--docs)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install pm-fuel
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
### UI Components
|
|
16
|
+
A comprehensive set of UI components:
|
|
17
|
+
|
|
18
|
+
#### Structural & Inputs
|
|
19
|
+
- **Buttons**: `PmdsCdkButtonComponent`, `PmdsCdkRadioButtonsComponent`
|
|
20
|
+
- **Inputs**: `PmdsCdkPhoneInputComponent`, `PmdsCdkCheckboxComponent`, `PmdsCdkTextComponent`
|
|
21
|
+
- **Navigation**: `PmdsCdkMenuAndSubmenuComponent`, `PmdsCdkSidebarEmbeddedComponent`
|
|
22
|
+
|
|
23
|
+
#### Data Display
|
|
24
|
+
- **Table**: `PmdsCdkTableComponent` - Feature-rich data tables.
|
|
25
|
+
- **Cards**: `PmdsCdkDynamicCardComponent`, `PmdsCdkCardsSelectorComponent`
|
|
26
|
+
|
|
27
|
+
#### Visualization (Graphs)
|
|
28
|
+
- `PmdsCdkGraphsLineChartComponent`
|
|
29
|
+
- `PmdsCdkGraphsSequentialBarChartComponent`
|
|
30
|
+
- `PmdsCdkGraphsPieChartComponent`
|
|
31
|
+
|
|
32
|
+
#### Utilities
|
|
33
|
+
- `PmdsCdkLoaderComponent`
|
|
34
|
+
- `PmdsCdkCopyClipboardComponent`
|
|
35
|
+
|
|
36
|
+
### Core & Common Utilities
|
|
37
|
+
|
|
38
|
+
#### Pipes
|
|
39
|
+
- `PmdsPipeAmountFormat`
|
|
40
|
+
- `PmdsPipeAccountFormat`
|
|
41
|
+
- `PmdsPipeDateTime`
|
|
42
|
+
- `PmdsPipeTruncateEllipsis`
|
|
43
|
+
|
|
44
|
+
#### Directives
|
|
45
|
+
- `PmdsDirectiveTooltip`
|
|
46
|
+
- `PmdsDirectiveNoLeadingSpacesInput`
|
|
47
|
+
- `PmdsDirectiveTitle`
|
|
48
|
+
|
|
49
|
+
#### Core Services
|
|
50
|
+
- **Validators**: `PmdsUtilValidators`
|
|
51
|
+
- **Storage**: `PmdsCoreStorageService`
|
|
52
|
+
- **Cache**: `PmdsCoreCacheService`
|
|
53
|
+
|
|
54
|
+
### Styles
|
|
55
|
+
Includes core design tokens:
|
|
56
|
+
- **Fonts**: `@use 'pm-fuel/src/lib/utils/pmds-util-styles/src/assets/styles/fonts.scss';`
|
|
57
|
+
- **Icons**: `@use 'pm-fuel/src/lib/utils/pmds-util-styles/src/assets/styles/icons.scss';`
|
|
58
|
+
- **Colors**: `@use 'pm-fuel/src/lib/utils/pmds-util-styles/src/assets/styles/pm-colors.scss';`
|
|
59
|
+
|
|
60
|
+
## Usage
|
|
61
|
+
|
|
62
|
+
import { PmdsCdkButtonComponent, PmdsPipeAmountFormat } from 'pm-fuel';
|
|
63
|
+
|
|
64
|
+
@Component({
|
|
65
|
+
imports: [PmdsCdkButtonComponent, PmdsPipeAmountFormat],
|
|
66
|
+
template: `
|
|
67
|
+
<pmds-cdk-button label="Click Me" (buttonClick)="onClick()"></pmds-cdk-button>
|
|
68
|
+
<p>{{ value | pmdsPipeAmountFormat }}</p>
|
|
69
|
+
`
|
|
70
|
+
})
|
|
71
|
+
export class MyComponent {}
|
|
72
|
+
```
|