lit-litelements 2.0.0 → 2.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lit-litelements",
-  "version": "2.0.0",
-  "description": "My LitElement component build for loading spinner with 10 types, and chart-display",
+  "version": "2.0.2",
+  "description": "My LitElement component build for loading spinner with 10 types, and chart-display fix error hover",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "types": "dist/main.d.js",

package/readme.md

@@ -13,5 +13,51 @@
     3. backgroundColor: the color background of the spinner
     4. center: to make the spinner in the center of page or not
 
-## display stock chart
-    using chart.js to build reuse char
+    - ex:
+          <loading-spinner-element center name="spinner11" style="color: red;"></loading-spinner-element>
+          <loading-spinner-element center name="spinner11" style="color: red;" size="100px"></loading-spinner-element>
+          <loading-spinner-element center name="spinner11" style="color: red;" size="100px" backgroundColor="white"></loading-spinner-element>
+
+## stock-chart-display
+  stock-chart-display take the prop as array
+
+      dataArray=[
+          {
+            "volume": 2431872,
+            "open": 10.15,
+            "close": 9.52,
+            "high": 10.44,
+            "low": 9.32,
+            "date": "2024-10-23T04:00:00.000Z",
+            "MA20": 10.06,
+            "MA50": 10.29,
+            "MA200": 18.62,
+            "RSI": 63.85793018983466,
+            "MACDLine": 0.024551282051284318,
+            "SignalLine": -0.2835965963696013,
+            "MACDHistogram": 0.3081478784208856
+          },
+      ]
+      <stock-chart-display stockData=dataArray>
+## Integrate 
+
+### angular
+    add to angular.json
+    "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            ...
+            ],
+            "styles": [
+            ],
+            "scripts": [
+
+              "./node_modules/lit-litelements/dist/main.js"
+            ]
+          }
+        }
+    }
+
+### html
+    <script type="module" src="./node_modules/lit-litelements/dist/main.js"></script>

package/dist/component/icon.lit.d.ts

@@ -1,17 +0,0 @@
-import { LitElement } from "lit";
-declare class MyElement extends LitElement {
-    firstName: string;
-    lastName: string;
-    iconSize: string;
-    textSize: string;
-    backgroundColor: string;
-    static styles: import("lit").CSSResult;
-    updated(changedProperties: any): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "icon-element": MyElement;
-    }
-}
-export {};

package/dist/component/icon.lit.js

@@ -1,75 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-let MyElement = class MyElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.firstName = "L";
-        this.lastName = "L";
-        this.iconSize = "64px";
-        this.textSize = "16px";
-        this.backgroundColor = "red";
-    }
-    updated(changedProperties) {
-        if (changedProperties.has("iconSize")) {
-            this.style.setProperty("--lds-dual-ring-size", this.iconSize);
-        }
-        if (changedProperties.has("textSize")) {
-            this.style.setProperty("--textSize", this.textSize);
-        }
-        if (changedProperties.has("backgroundColor")) {
-            this.style.setProperty("--lds-backgroundColor", this.backgroundColor);
-        }
-    }
-    render() {
-        return html `
-      <div class="icon">${this.firstName.charAt(0).toUpperCase()}${this.lastName.charAt(0).toUpperCase()}</div>
-    `;
-    }
-};
-MyElement.styles = css `
-  .icon {
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: 500;
-    line-height: 150%;
-    width: var(--lds-dual-ring-size, 64px);
-    height: var(--lds-dual-ring-size, 64px);
-    font-size: var(--textSize, 16px);
-    background-color: var(--backgroundColor, rgb(153, 153, 153)); 
-    color: black;
-}
-  `;
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], MyElement.prototype, "firstName", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], MyElement.prototype, "lastName", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], MyElement.prototype, "iconSize", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], MyElement.prototype, "textSize", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], MyElement.prototype, "backgroundColor", void 0);
-MyElement = __decorate([
-    customElement("icon-element")
-], MyElement);