@ruc-lib/timeline 2.0.0 → 3.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 +176 -69
- package/esm2020/lib/ruclib-timeline/ruclib-timeline.component.mjs +3 -3
- package/esm2020/model/ruclib-timeline.model.mjs +1 -1
- package/fesm2015/ruc-lib-timeline.mjs +2 -2
- package/fesm2015/ruc-lib-timeline.mjs.map +1 -1
- package/fesm2020/ruc-lib-timeline.mjs +2 -2
- package/fesm2020/ruc-lib-timeline.mjs.map +1 -1
- package/model/ruclib-timeline.model.d.ts +87 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,90 +2,197 @@
|
|
|
2
2
|
|
|
3
3
|
A timeline visualizes a series of chained events. It's a way to display information, like data tables, in a format that's easy to scan, allowing users to identify patterns and insights.
|
|
4
4
|
|
|
5
|
-
# Features
|
|
6
|
-
- Configurable layout (vertical or horizontal).
|
|
7
|
-
- Customizable details and subdetails.
|
|
8
|
-
- Option for simple text or Material card display.
|
|
9
|
-
- Adjustable positioning (left, right, top, bottom, opposite).
|
|
10
|
-
- Support for Material icons, tooltips, and configurable font styles for titles and subtitles.
|
|
11
|
-
- Order configuration and text ellipsis for long content.
|
|
12
|
-
- Support for Material Card
|
|
13
|
-
|
|
14
5
|
# Installation guide
|
|
15
6
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
`npm install @uxpractice/ruc-lib`
|
|
19
|
-
|
|
20
|
-
# Install individual component
|
|
7
|
+
To use the timeline component, you can install the entire RUC library or just this specific component.
|
|
21
8
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
9
|
+
### Install the Entire Library
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uxpractice/ruc-lib
|
|
12
|
+
```
|
|
26
13
|
|
|
27
|
-
|
|
14
|
+
### Install Individual Component
|
|
28
15
|
|
|
29
|
-
|
|
30
|
-
|
|
16
|
+
If you only need the timeline component
|
|
17
|
+
```bash
|
|
18
|
+
npm install @ruc-lib/timeline
|
|
19
|
+
```
|
|
31
20
|
|
|
32
|
-
|
|
33
|
-
|
|
21
|
+
## Version Compatibility
|
|
22
|
+
|
|
23
|
+
Please ensure you install the correct version of `@ruc-lib/timeline` based on your Angular version.
|
|
24
|
+
|
|
25
|
+
| Angular Version | Compatible `@ruc-lib/timeline` Version |
|
|
26
|
+
|--------------------|---------------------------------------------|
|
|
27
|
+
| 15.x.x | `npm install @ruc-lib/timeline@^3.0.0` |
|
|
28
|
+
| 16.x.x | `npm install @ruc-lib/timeline@^3.0.0` |
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
### 1. Import the Module
|
|
33
|
+
In your Angular module file (e.g., `app.module.ts`), import the `RuclibTimelineModule`:
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
// For Complete Library
|
|
37
|
+
import { RuclibTimelineModule } from '@uxpractice/ruc-lib/timeline';
|
|
38
|
+
|
|
39
|
+
// For Individual Package
|
|
40
|
+
import { RuclibTimelineModule } from '@ruc-lib/timeline';
|
|
41
|
+
|
|
42
|
+
import { AppComponent } from './app.component';
|
|
43
|
+
import { NgModule } from '@angular/core';
|
|
44
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
45
|
+
|
|
46
|
+
@NgModule({
|
|
47
|
+
declarations: [AppComponent],
|
|
48
|
+
imports: [
|
|
49
|
+
BrowserModule,
|
|
50
|
+
RuclibTimelineModule
|
|
51
|
+
],
|
|
52
|
+
providers: [],
|
|
53
|
+
bootstrap: [AppComponent]
|
|
54
|
+
})
|
|
55
|
+
export class AppModule {}
|
|
56
|
+
```
|
|
34
57
|
|
|
35
|
-
|
|
58
|
+
### 2. Use the Component
|
|
59
|
+
In your component's template, use the `<uxp-ruclib-timeline>` selector and pass the configuration object to the `rucInputData` input.
|
|
36
60
|
|
|
37
|
-
```
|
|
38
|
-
<uxp-ruclib-timeline [rucInputData]="
|
|
61
|
+
```html
|
|
62
|
+
<uxp-ruclib-timeline [rucInputData]="timelineDataConfig" [customTheme]="customTheme"></uxp-ruclib-timeline>
|
|
39
63
|
```
|
|
40
64
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
65
|
+
## API Reference
|
|
66
|
+
|
|
67
|
+
### Component Inputs
|
|
68
|
+
|
|
69
|
+
| Input | Type | Description |
|
|
70
|
+
|-----------------|----------------------|----------------------------------------------------|
|
|
71
|
+
| `rucInputData` | `timelineDataConfig` | The main configuration object for the timeline. |
|
|
72
|
+
| `customTheme` | `string` | An optional CSS class for custom theming. |
|
|
73
|
+
|
|
74
|
+
### Component Outputs
|
|
75
|
+
|
|
76
|
+
| Output | Type | Description |
|
|
77
|
+
|-----------------|-----------|---------------------------------------------------|
|
|
78
|
+
|-----------------|-----------| User can see the UI with timeline data. |
|
|
79
|
+
|
|
80
|
+
### `timelineDataConfig`
|
|
81
|
+
This is the main configuration object for the timeline component.
|
|
82
|
+
|
|
83
|
+
| Property | Type | Description |
|
|
84
|
+
|---------------------------|---------------------------------------------------------|-----------------------------------------------------------------------|
|
|
85
|
+
| `layout` | `'vertical' \| 'horizontal'` | Type of timeline (e.g., 'vertical', 'horizontal'). |
|
|
86
|
+
| `position` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'alternate'` | Position of the timeline (e.g., use top, bottom and horizontal when layout is horizontal and when layout is vertical use left, right and alternate). |
|
|
87
|
+
| `titleFontColor` | `string` | configure color of the title text. |
|
|
88
|
+
| `subTitleFontColor` | `string` | configure color of the subtitle text. |
|
|
89
|
+
| `titleFontSize` | `string` | configure font size of the title text. |
|
|
90
|
+
| `subTitleFontSize` | `string` | configure font size of the subtitle text. |
|
|
91
|
+
| `titleBackgroundColor` | `string` | configure background color of the title. |
|
|
92
|
+
| `subTitleBackgroundColor` | `string` | configure background color of the subtitle. |
|
|
93
|
+
| `highlightColor` | `string` | configure color used to highlight an active or selected timeline item.|
|
|
94
|
+
| `iconColor` | `'primary' \| 'accent' \| 'warn'` | configure the theme color for the timeline item icons. |
|
|
95
|
+
| `maxTitleLength` | `number` | configure maximum number of characters to display for the title before truncating. |
|
|
96
|
+
| `maxSubTitleLength` | `number` | configure maximum number of characters to display for the subtitle before truncating. |
|
|
97
|
+
| `isInfo` | `boolean` | A flag to determine if the additional info sections for title and subtitle should be displayed.|
|
|
98
|
+
| `isTemplate` | `boolean` | A flag to indicate whether a custom template is being used for the timeline items instead of the default structure.|
|
|
99
|
+
| `data` | `timelineData` | The array of data objects that represent the items in the timeline. |
|
|
100
|
+
|
|
101
|
+
### `timelineData`
|
|
102
|
+
This array of objects defines the content for each step of the tour guide.
|
|
103
|
+
|
|
104
|
+
| Property | Type | Description |
|
|
105
|
+
|---------------------|-------------------|-------------------------------------------------------------------------------------------------------|
|
|
106
|
+
| `id` | `number` | to give the order. |
|
|
107
|
+
| `title` | `string` | content for main heading. |
|
|
108
|
+
| `subtitle` | `string` | content for sub heading. |
|
|
109
|
+
| `content` | `string` | The main content or description for the timeline item. |
|
|
110
|
+
| `icon` | `string` | provide material icon for timeline. |
|
|
111
|
+
| `iconAriaLabel` | `string` | Custom width for the popup of the current step. |
|
|
112
|
+
| `imageUrl` | `string` | provide url of image when isTemplate is true. |
|
|
113
|
+
| `imageAltText` | `string` | provide alternative text of image when isTemplate is true. |
|
|
114
|
+
| `titleInfo` | `string` | provide content for titile when isInfo is true. |
|
|
115
|
+
| `subTitleInfo` | `string` | provide content for subtitile when isInfo is true. |
|
|
116
|
+
| `iconTitle` | `string` | The name of the Material icon to be displayed next to the title info text. |
|
|
117
|
+
| `iconSubTitle` | `string` | The name of the Material icon to be displayed next to the subtitle info text. |
|
|
118
|
+
| `titleInfoIcon` | `string` | The name of the Material icon for the title's info section, often used for a tooltip or popover. |
|
|
119
|
+
| `subTitleInfoIcon` | `string` | The name of the Material icon for the subtitle's info section, often used for a tooltip or popover. |
|
|
120
|
+
|
|
121
|
+
## Example Configuration
|
|
122
|
+
|
|
123
|
+
Here's an example of how to configure the timeline component in your component's TypeScript file.
|
|
124
|
+
|
|
125
|
+
```typescript
|
|
126
|
+
import { Component } from '@angular/core';
|
|
127
|
+
|
|
128
|
+
// For Complete Library
|
|
129
|
+
import { RucTimelineInput, RucTimelineItemData } from '@uxpractice/ruc-lib/timeline';
|
|
130
|
+
|
|
131
|
+
// For Individual package
|
|
132
|
+
import { RucTimelineInput, RucTimelineItemData } from '@ruc-lib/timeline';
|
|
133
|
+
|
|
134
|
+
@Component({
|
|
135
|
+
selector: 'app-root',
|
|
136
|
+
templateUrl: './app.component.html',
|
|
137
|
+
})
|
|
138
|
+
export class AppComponent {
|
|
139
|
+
timelineDataConfig: RucTimelineInput = {
|
|
140
|
+
layout: 'vertical',
|
|
141
|
+
position: 'left',
|
|
142
|
+
data: timelineData,
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
timelineData: RucTimelineItemData[] = [
|
|
146
|
+
{
|
|
147
|
+
id: 1,
|
|
148
|
+
title: 'Ordered',
|
|
76
149
|
subtitle: 'sub-title',
|
|
77
150
|
},
|
|
78
|
-
{
|
|
79
|
-
id: 2,
|
|
80
|
-
title: 'Processing',
|
|
151
|
+
{
|
|
152
|
+
id: 2,
|
|
153
|
+
title: 'Processing',
|
|
81
154
|
subtitle: 'sub-title',
|
|
82
155
|
},
|
|
83
|
-
|
|
84
|
-
|
|
156
|
+
{
|
|
157
|
+
id: 3,
|
|
158
|
+
title: 'Shipped',
|
|
159
|
+
subtitle: 'sub-title',
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
id: 4,
|
|
163
|
+
title: 'Delivered',
|
|
164
|
+
subtitle: 'sub-title',
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
id: 5,
|
|
168
|
+
title: 'Introduction',
|
|
169
|
+
subtitle: "Established",
|
|
170
|
+
},
|
|
171
|
+
];
|
|
172
|
+
}
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**
|
|
176
|
+
|
|
177
|
+
When implementing **custom themes**, such as:
|
|
178
|
+
|
|
179
|
+
```scss
|
|
180
|
+
.custom-theme-1 {
|
|
181
|
+
@include angular-material-theme($custom-theme);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
|
|
185
|
+
.custom-theme-1 {
|
|
186
|
+
@include angular-material-theme($custom-theme);
|
|
187
|
+
@include mat.typography-level($theme-custom-typography-name, body-1);
|
|
188
|
+
}
|
|
85
189
|
```
|
|
86
190
|
|
|
87
|
-
|
|
191
|
+
|
|
192
|
+
## Contribution
|
|
193
|
+
|
|
88
194
|
Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
|
|
89
195
|
|
|
90
|
-
|
|
91
|
-
|
|
196
|
+
## Acknowledgements
|
|
197
|
+
|
|
198
|
+
Thank you for choosing the timeline component. If you have any feedback or suggestions, please let us know!
|