lit-litelements 2.2.2 → 2.2.3
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/package.json +1 -1
- package/readme.md +158 -62
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lit-litelements",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.3",
|
|
4
4
|
"description": "My LitElement component build for loading spinner with 10 types, and chart-display fix error hover hidden: true for some line async update",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"module": "dist/main.js",
|
package/readme.md
CHANGED
|
@@ -1,65 +1,161 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
1
|
+
# Lit Web Components — Loading Spinner & Stock Chart Display
|
|
2
|
+
|
|
3
|
+
This package includes **two** customizable web components built with Lit:
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 🚀 Loading Spinner Component
|
|
8
|
+
|
|
9
|
+
You can integrate customizable loading spinners using the `<loading-spinner-element>` component, combining designs from:
|
|
10
|
+
|
|
11
|
+
* [CSS Loaders](https://cssloaders.github.io/)
|
|
12
|
+
* [Loading.io](https://loading.io/css/)
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
### 🔧 Usage
|
|
17
|
+
|
|
18
|
+
```html
|
|
19
|
+
<loading-spinner-element></loading-spinner-element>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 🧩 Available Properties
|
|
23
|
+
|
|
24
|
+
| Property | Type | Default | Description |
|
|
25
|
+
| ----------------- | ------- | ---------- | -------------------------------------------------------- |
|
|
26
|
+
| `name` | string | `spinner1` | Choose a spinner from `spinner1` to `spinner11`. |
|
|
27
|
+
| `size` | string | `64px` | Optional. Set the size of the spinner. |
|
|
28
|
+
| `backgroundColor` | string | — | Optional. Background color behind the spinner animation. |
|
|
29
|
+
| `center` | boolean | `false` | If present, the spinner is centered on the page. |
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
### 💡 Examples
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<!-- Default spinner | spinner1 | `lds-dual-ring` -->
|
|
37
|
+
<loading-spinner-element></loading-spinner-element>
|
|
38
|
+
|
|
39
|
+
<!-- Centered loader-sent-email -->
|
|
40
|
+
<loading-spinner-element center name="spinner11" ></loading-spinner-element>
|
|
41
|
+
|
|
42
|
+
<!-- Centered red spinner with custom size -->
|
|
43
|
+
<loading-spinner-element center name="spinner10" style="color: red;" size="100px"></loading-spinner-element>
|
|
44
|
+
|
|
45
|
+
<!-- Full config with white background -->
|
|
46
|
+
<loading-spinner-element center name="spinner11" style="color: red;" size="100px" backgroundColor="white"></loading-spinner-element>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
### 🎨 Spinner Options
|
|
52
|
+
|
|
53
|
+
| Name | Class Name |
|
|
54
|
+
| --------- | ---------------------- |
|
|
55
|
+
| spinner1 | `lds-dual-ring` |
|
|
56
|
+
| spinner2 | `lds-circle` |
|
|
57
|
+
| spinner3 | `loader` |
|
|
58
|
+
| spinner4 | `lds-hourglass` |
|
|
59
|
+
| spinner5 | `loader-3rd` |
|
|
60
|
+
| spinner6 | `loader-ying-yang` |
|
|
61
|
+
| spinner7 | `loader-in-out-circle` |
|
|
62
|
+
| spinner8 | `loader-arrow` |
|
|
63
|
+
| spinner9 | `loader-jump-stair` |
|
|
64
|
+
| spinner10 | `loader-yin-yang-2` |
|
|
65
|
+
| spinner11 | `loader-sent-email` |
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 📊 `stock-chart-display` v2.2.2
|
|
71
|
+
|
|
72
|
+
The `<stock-chart-display>` component renders technical stock charts using a data array of candlestick and indicator values.
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
### 🔢 Input: `stockData` Prop
|
|
77
|
+
|
|
78
|
+
Pass an array of objects to the `stockData` prop. Each object should contain the following structure:
|
|
79
|
+
|
|
80
|
+
```ts
|
|
81
|
+
const dataArray = [
|
|
82
|
+
{
|
|
83
|
+
volume: 12394766,
|
|
84
|
+
open: 7.73,
|
|
85
|
+
close: 6.69,
|
|
86
|
+
high: 7.73,
|
|
87
|
+
low: 6.3,
|
|
88
|
+
date: "2024-10-24T04:00:00.000Z",
|
|
89
|
+
MA5: 9.9,
|
|
90
|
+
MA10: 9.9,
|
|
91
|
+
MA20: 9.9,
|
|
92
|
+
MA50: 10.24,
|
|
93
|
+
MA100: 11.54,
|
|
94
|
+
MA200: 18.52,
|
|
95
|
+
RSI: 24.150554856423767,
|
|
96
|
+
MACDLine: -0.11134615384615287,
|
|
97
|
+
SignalLine: -0.30238750431044953,
|
|
98
|
+
MACDHistogram: 0.19104135046429666
|
|
99
|
+
},
|
|
100
|
+
// ... more data points
|
|
101
|
+
];
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### 📦 Usage
|
|
105
|
+
|
|
106
|
+
```html
|
|
107
|
+
<stock-chart-display stockData="dataArray"></stock-chart-display>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## 🔌 Integration Guide
|
|
113
|
+
|
|
114
|
+
### ✅ Angular Integration
|
|
115
|
+
|
|
116
|
+
1. **Register the Web Component in `angular.json`:**
|
|
117
|
+
|
|
118
|
+
In your `angular.json`, add the script under `scripts`:
|
|
119
|
+
|
|
120
|
+
```json
|
|
121
|
+
"architect": {
|
|
122
|
+
"build": {
|
|
123
|
+
"builder": "@angular-devkit/build-angular:browser",
|
|
124
|
+
"options": {
|
|
125
|
+
"styles": [],
|
|
126
|
+
"scripts": [
|
|
127
|
+
"./node_modules/lit-litelements/dist/main.js"
|
|
43
128
|
]
|
|
44
|
-
<stock-chart-display stockData=dataArray>
|
|
45
|
-
## Integrate
|
|
46
|
-
|
|
47
|
-
### angular
|
|
48
|
-
add to angular.json
|
|
49
|
-
"architect": {
|
|
50
|
-
"build": {
|
|
51
|
-
"builder": "@angular-devkit/build-angular:browser",
|
|
52
|
-
"options": {
|
|
53
|
-
...
|
|
54
|
-
"styles": [
|
|
55
|
-
],
|
|
56
|
-
"scripts": [
|
|
57
|
-
|
|
58
|
-
"./node_modules/lit-litelements/dist/main.js"
|
|
59
|
-
]
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
129
|
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
2. **Enable Custom Elements in your Angular module:**
|
|
135
|
+
|
|
136
|
+
In the module where you want to use the web component (e.g., `app.module.ts`), import `CUSTOM_ELEMENTS_SCHEMA` and add it to the `schemas` array:
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
140
|
+
|
|
141
|
+
@NgModule({
|
|
142
|
+
declarations: [
|
|
143
|
+
// your components
|
|
144
|
+
],
|
|
145
|
+
imports: [
|
|
146
|
+
// your modules
|
|
147
|
+
],
|
|
148
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
|
149
|
+
})
|
|
150
|
+
export class AppModule { }
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
---
|
|
154
|
+
|
|
155
|
+
### ✅ HTML Integration (Vanilla)
|
|
156
|
+
|
|
157
|
+
Include the component script directly:
|
|
63
158
|
|
|
64
|
-
|
|
65
|
-
|
|
159
|
+
```html
|
|
160
|
+
<script type="module" src="./node_modules/lit-litelements/dist/main.js"></script>
|
|
161
|
+
```
|