@dreamworld/dw-chip-select - npm Package Compare versions

Comparing version 1.1.0-dw-chip-is-not-import-in-dw-chip-select.1 to 1.1.0-support-shimmer.1

demo/dw-chip-select-demo.js

@@ -27,2 +27,15 @@ import { ThemeStyle } from "@dreamworld/material-styles/theme.js";
   }
+
+  static get properties() {
+    return {
+      paymentTypes: { type: Array}
+    }
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.paymentTypes = PaymentTypes
+    }, 1000)
+  }
+
   render() {
@@ -33,3 +46,3 @@ return html`
         .valueExpression=${"name"}
-        .items=${PaymentTypes}
+        .items=${this.paymentTypes}
         .valueTextProvider=${(item) => item.label}
@@ -36,0 +49,0 @@ @change=${this._onChange}

dw-chip-select.js

 import { css, html, LitElement, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 
+// View Elements
+import "./dw-chip.js";
+
 // Styles
@@ -8,7 +11,7 @@ import * as TypographyLiterals from "@dreamworld/material-styles/typography-literals.js";
 // Utils
+import cloneDeep from "lodash-es/cloneDeep.js";
+import isEqual from "lodash-es/isEqual.js";
 import { ChipTypes, KeyCode } from "./utils";
-import isEqual from "lodash-es/isEqual.js";
-import cloneDeep from "lodash-es/cloneDeep.js";
 
-import "./dw-chip.js";
+const shimmerData = Array(3).fill({});
 
@@ -135,3 +138,7 @@ export class DwChipSelect extends LitElement {
   get _renderChipList() {
-    if (!this.items || this.items.length === 0) {
+    if (!this.items) {
+      return html`<div class="chip-wrapper">${repeat(shimmerData, () => html`<dw-chip shimmer></dw-chip>`)}</div>`;
+    }
+
+    if (this.items.length === 0) {
       return nothing;
@@ -161,3 +168,3 @@ }
     this.addEventListener("focusout", this._onFocusOut);
-    this.addEventListener('mousedown', this._onMouseDown)
+    this.addEventListener("mousedown", this._onMouseDown);
 
@@ -172,3 +179,3 @@ window.addEventListener("keydown", this._onKeyDown);
     this.removeEventListener("focusout", this._onFocusOut);
-    this.removeEventListener('mousedown', this._onMouseDown)
+    this.removeEventListener("mousedown", this._onMouseDown);
 
@@ -249,3 +256,3 @@ window.removeEventListener("keydown", this._onKeyDown);
   _onFocusIn() {
-    this.mouseDowned ? this.mouseDowned = false : this._activatedIndex = 0;
+    this.mouseDowned ? (this.mouseDowned = false) : (this._activatedIndex = 0);
     this.focused = true;
@@ -252,0 +259,0 @@ }

dw-chip.js

@@ -50,2 +50,10 @@ import "@dreamworld/dw-icon";
       }
+
+      .shimmer {
+        background: var(--dw-chip-select-shimmer-gradiant, linear-gradient(to right, #f1efef, #f9f8f8, #e7e5e5));
+        height: 20px;
+        width: 64px;
+        flex: 1;
+        border-radius: 4px;
+      }
     `;
@@ -88,2 +96,8 @@ }
       icon: { type: String },
+
+      /**
+       * Input property
+       * Whether to show shimmer view or not
+       */
+      shimmer: { type: Boolean },
     };
@@ -99,2 +113,5 @@ }
   render() {
+    if (this.shimmer) {
+      return html`<div class="shimmer"></div>`;
+    }
     return html`
@@ -101,0 +118,0 @@ <dw-ripple

package.json

 {
   "name": "@dreamworld/dw-chip-select",
-  "version": "1.1.0-dw-chip-is-not-import-in-dw-chip-select.1",
+  "version": "1.1.0-support-shimmer.1",
   "description": "Chips are compact elements that represent an input, attribute, or action.",
@@ -5,0 +5,0 @@ "main": "dw-chip-select.js",

No alert changes

Improved metrics

Total package byte prevSize

20044

increased by4.11%

Lines of code

522

increased by6.1%

No dependency changes