@sankhyalabs/ezui 6.0.2 → 6.1.0-dev.10

package/dist/collection/components/ez-skeleton/ez-skeleton.css

@@ -1,114 +1,156 @@
 .skeleton {
-	background: var(--skeleton-background, #eff1f6) no-repeat;
-
-	border-radius: var(--skeleton-border-radius, 4px);
-	width: var(--skeleton-width, 100%);
-	height: var(--skeleton-height, 20px);
-	display: inline-block;
-	margin-bottom: var(--skeleton-margin-bottom, 0px);	
-	box-sizing: border-box;
-	outline: none;
-	overflow: hidden;
-	position: relative;
-	-webkit-will-change: transform;
+  background: var(--skeleton-background, #f0f3f7) no-repeat;
+  border-radius: var(--skeleton-border-radius, 12px);
+  width: var(--skeleton-width, 100%);
+  height: var(--skeleton-height, 20px);
+  display: inline-block;
+  margin-bottom: var(--skeleton-margin-bottom, 0px);
+	margin-top: var(--skeleton-margin-top, 0px);
+	margin-right: var(--skeleton-margin-right, 0px);
+	margin-left: var(--skeleton-margin-left, 0px);
+  box-sizing: border-box;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  -webkit-will-change: transform;
   -moz-will-change: transform;
-	will-change: transform;
+  will-change: transform;
 
-	&:after,
-	&:before {
-		box-sizing: border-box;
-	}
+  &:after,
+  &:before {
+    box-sizing: border-box;
+  }
 
-	&.circle {
-		width: var(--skeleton-width, 40px);
-		height: var(--skeleton-height, 40px);
-		margin-bottom: var(--skeleton-margin-bottom, 5px);
-		border-radius: var(--skeleton-border-radius, 50%);
-	}
+  &.circle {
+    width: var(--skeleton-width, 40px);
+    height: var(--skeleton-height, 40px);
+    margin-bottom: var(--skeleton-margin-bottom, 0px);
+    border-radius: var(--skeleton-border-radius, 50%);
+  }
 
-	&.rect {
-		border-radius: var(--skeleton-border-radius, 0px);
-	}
+  &.rect {
+    border-radius: var(--skeleton-border-radius, 0px);
+  }
 
-	&.progress,
-	&.progress-dark {
-		-webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  &.progress,
+  &.progress-dark {
+    -webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     -moz-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     -ms-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-		animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-		background-size: 200px 100%;
-	}
+    animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    background-size: 200px 100%;
+  }
 
-	&.progress {
-		background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-	}
+  &.progress {
+    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));
+    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));
+    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));
+    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));
+  }
 
-	&.progress-dark {
-		background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
+  &.progress-dark {
+    background-image: -webkit-linear-gradient(90deg, transparent, hsla(0, 0%, 0%, 0.2), transparent);
     background-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
-    background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);    
-		background-image: linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.2),transparent);
-	}
+    background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
+    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
+  }
 
-	&.pulse {
-		-webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  &.pulse {
+    -webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     -moz-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     -ms-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-		animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-		animation-delay: 0.5s;
-	}
+    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    animation-delay: 0.5s;
+  }
 
-	@media (prefers-reduced-motion: reduce) {
-		&.pulse,
-		&.progress-dark,
-		&.progress {
-			animation: none;
-		}
+  @media (prefers-reduced-motion: reduce) {
+    &.pulse,
+    &.progress-dark,
+    &.progress {
+      animation: none;
+    }
 
-		&.progress,
-		&.progress-dark {
-			background-image: none;
-		}
-	}
+    &.progress,
+    &.progress-dark {
+      background-image: none;
+    }
+  }
 }
 
 @-webkit-keyframes progress {
-  0% { background-position: -200px 0; }
-  100% { background-position: calc(200px + 100%) 0; }
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
 }
 @-moz-keyframes progress {
-  0% { background-position: -200px 0; }
-  100% { background-position: calc(200px + 100%) 0; }
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
 }
 @-ms-keyframes progress {
-  0% { background-position: -200px 0; }
-  100% { background-position: calc(200px + 100%) 0; }
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
 }
 @keyframes progress {
-	0% { background-position: -200px 0; }
-	100% { background-position: calc(200px + 100%) 0; }
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
 }
 
 @-webkit-keyframes pulse {
-  0% { opacity: 1; }
-  50% { opacity: 0.4; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 @-moz-keyframes pulse {
-  0% { opacity: 1; }
-  50% { opacity: 0.4; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 @-ms-keyframes pulse {
-  0% { opacity: 1; }
-  50% { opacity: 0.4; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 @keyframes pulse {
-	0% { opacity: 1; }
-	50% { opacity: 0.4; }
-	100% { opacity: 1; }
-}
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/collection/components/ez-skeleton/ez-skeleton.js

@@ -1,56 +1,114 @@
-import { h } from "@stencil/core";
-import { ALLOWED_ANIMATIONS } from './ez-skeleton.constants';
+import { h } from '@stencil/core';
+import { ALLOWED_ANIMATIONS, ALLOWED_VARIANTS, DEFAULT_VALUES, SKELETON_ARIA, VARIANT_TYPES, ANIMATION_TYPES, } from './ez-skeleton.constants';
 export class EzSkeleton {
   constructor() {
     this.items = [];
-    this.count = 1;
-    this.variant = 'text';
+    this.template = undefined;
+    this.count = DEFAULT_VALUES.COUNT;
+    this.variant = DEFAULT_VALUES.VARIANT;
     this.width = null;
     this.height = null;
+    this.marginTop = null;
+    this.marginRight = null;
     this.marginBottom = null;
-    this.animation = 'progress';
+    this.marginLeft = null;
+    this.animation = DEFAULT_VALUES.ANIMATION;
   }
   componentWillLoad() {
-    this.init();
+    this.initializeItems();
   }
   componentWillUpdate() {
-    this.init();
+    this.initializeItems();
   }
-  init() {
-    this.items.length = this.count;
-    this.items.fill(1);
-    if (!ALLOWED_ANIMATIONS.includes(this.animation)) {
-      this.animation = 'progress';
-    }
+  initializeItems() {
+    this.items = Array(this.count).fill(1);
   }
-  get style() {
-    let dimenssionsStyles = {
-      width: null,
-      height: null,
-      marginBottom: null
-    };
-    if (this.width) {
-      dimenssionsStyles.width = this.width;
+  getSkeletonConfig(props) {
+    if (!props)
+      return;
+    if ((props === null || props === void 0 ? void 0 : props.variant) == VARIANT_TYPES.CIRCLE) {
+      props.width = props.width || 'var(--skeleton-width, 40px)';
+      props.height = props.height || 'var(--skeleton-height, 40px)';
     }
-    if (this.height) {
-      dimenssionsStyles.height = this.height;
+    else {
+      props.width = props.width || 'var(--skeleton-width, 100%)';
     }
-    if (this.marginBottom) {
-      dimenssionsStyles.marginBottom = this.marginBottom;
+    const width = (props.marginRight || props.marginLeft) && props.width && props.variant != VARIANT_TYPES.CIRCLE
+      ? `calc(${props.width} ${props.marginRight ? `- ${props.marginRight}` : ''} ${props.marginLeft ? `- ${props.marginLeft}` : ''})`
+      : props.width;
+    return {
+      skeletonClasses: {
+        skeleton: true,
+        circle: props.variant === VARIANT_TYPES.CIRCLE,
+        rect: props.variant === VARIANT_TYPES.RECT,
+        progress: props.animation === ANIMATION_TYPES.PROGRESS,
+        pulse: props.animation === ANIMATION_TYPES.PULSE,
+      },
+      styles: {
+        width,
+        height: props.height,
+        marginTop: props.marginTop,
+        marginRight: props.marginRight,
+        marginBottom: props.marginBottom,
+        marginLeft: props.marginLeft,
+      },
+    };
+  }
+  validateVariant(variant) {
+    return ALLOWED_VARIANTS.includes(variant) ? variant : DEFAULT_VALUES.VARIANT;
+  }
+  validateAnimation(animation) {
+    return ALLOWED_ANIMATIONS.includes(animation) ? animation : DEFAULT_VALUES.ANIMATION;
+  }
+  renderSkeletonTemplate(templateContent) {
+    var _a;
+    const innerHTMLTemp = ((_a = templateContent['$attrs']) === null || _a === void 0 ? void 0 : _a.innerHTML) || templateContent;
+    if (typeof innerHTMLTemp === 'string') {
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = innerHTMLTemp;
+      const elements = (tempDiv === null || tempDiv === void 0 ? void 0 : tempDiv.querySelectorAll(':not(.skeleton) > *')) || [];
+      return Array.from(elements).map(element => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if ((_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains('skeleton')) {
+          const skeletonConfig = this.getSkeletonConfig({
+            variant: this.validateVariant(((_b = element.getAttribute('variant')) === null || _b === void 0 ? void 0 : _b.replace(/[{}]/g, '')) || this.variant),
+            width: ((_c = element.getAttribute('width')) === null || _c === void 0 ? void 0 : _c.replace(/[{}]/g, '')) || this.width,
+            height: ((_d = element.getAttribute('height')) === null || _d === void 0 ? void 0 : _d.replace(/[{}]/g, '')) || this.height,
+            marginTop: ((_e = element.getAttribute('marginTop')) === null || _e === void 0 ? void 0 : _e.replace(/[{}]/g, '')) || this.marginTop,
+            marginLeft: ((_f = element.getAttribute('marginLeft')) === null || _f === void 0 ? void 0 : _f.replace(/[{}]/g, '')) || this.marginLeft,
+            marginRight: ((_g = element.getAttribute('marginRight')) === null || _g === void 0 ? void 0 : _g.replace(/[{}]/g, '')) || this.marginRight,
+            marginBottom: ((_h = element.getAttribute('marginBottom')) === null || _h === void 0 ? void 0 : _h.replace(/[{}]/g, '')) || this.marginBottom,
+            animation: this.validateAnimation(((_j = element.getAttribute('animation')) === null || _j === void 0 ? void 0 : _j.replace(/[{}]/g, '')) || this.animation),
+          });
+          const count = Number((_k = element.getAttribute('count')) === null || _k === void 0 ? void 0 : _k.replace(/[{}]/g, '')) || 1;
+          return Array(count)
+            .fill(1)
+            .map((_, index) => this.renderSkeletonItem(index, skeletonConfig));
+        }
+        return h("div", { innerHTML: element.outerHTML });
+      });
     }
-    return dimenssionsStyles;
+    return templateContent;
+  }
+  renderSkeletonItem(index, skeletonConfig) {
+    const config = skeletonConfig ||
+      this.getSkeletonConfig({
+        variant: this.validateVariant(this.variant),
+        animation: this.validateAnimation(this.animation),
+        width: this.width,
+        height: this.height,
+        marginTop: this.marginTop,
+        marginRight: this.marginRight,
+        marginBottom: this.marginBottom,
+        marginLeft: this.marginLeft,
+      });
+    return this.renderSkeletonSpan(index, config);
+  }
+  renderSkeletonSpan(index, config) {
+    return (h("span", { key: index, class: config === null || config === void 0 ? void 0 : config.skeletonClasses, style: config === null || config === void 0 ? void 0 : config.styles, "data-busy": SKELETON_ARIA.DATA_BUSY, "data-valuemin": SKELETON_ARIA.DATA_VALUEMIN, "data-valuemax": SKELETON_ARIA.DATA_VALUEMAX, "data-valuetext": SKELETON_ARIA.DATA_VALUETEXT, role: SKELETON_ARIA.ROLE, tabindex: SKELETON_ARIA.TABINDEX }));
   }
   render() {
-    return this.items.map((_, index) => {
-      return (h("span", { key: index, class: {
-          circle: this.variant === 'circle',
-          rect: this.variant === 'rect',
-          progress: this.animation === 'progress',
-          'progress-dark': this.animation === 'progress-dark',
-          pulse: this.animation === 'pulse',
-          skeleton: true
-        }, "data-busy": "true", "data-valuemin": "0", "data-valuemax": "100", "data-valuetext": "Loading...", role: "progressbar", tabindex: "0", style: this.style }));
-    });
+    return !this.template ? this.items.map((_, index) => this.renderSkeletonItem(index)) : this.renderSkeletonTemplate(this.template);
   }
   static get is() { return "ez-skeleton"; }
   static get originalStyleUrls() {
@@ -65,6 +123,30 @@ export class EzSkeleton {
   }
   static get properties() {
     return {
+      "template": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement | string",
+          "resolved": "HTMLElement | string",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "prop",
+              "text": "{HTMLElement | string} template - The template to be used for the skeleton."
+            }],
+          "text": "The template to be used for the skeleton. Can be an HTMLElement or a string."
+        },
+        "attribute": "template",
+        "reflect": false
+      },
       "count": {
         "type": "number",
         "mutable": false,
@@ -84,22 +166,27 @@ export class EzSkeleton {
         },
         "attribute": "count",
         "reflect": false,
-        "defaultValue": "1"
+        "defaultValue": "DEFAULT_VALUES.COUNT"
       },
       "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'circle' | 'rect' | 'text'",
+          "original": "SkeletonVariant",
           "resolved": "\"circle\" | \"rect\" | \"text\"",
-          "references": {}
+          "references": {
+            "SkeletonVariant": {
+              "location": "import",
+              "path": "./ez-skeleton.constants"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [{
               "name": "type",
-              "text": "{('circle' | '')}"
+              "text": "{('circle' , 'rect', 'text')}"
             }, {
               "name": "memberof",
               "text": "Skeleton"
@@ -108,7 +195,7 @@ export class EzSkeleton {
         },
         "attribute": "variant",
         "reflect": false,
-        "defaultValue": "'text'"
+        "defaultValue": "DEFAULT_VALUES.VARIANT"
       },
       "width": {
         "type": "string",
@@ -158,6 +245,54 @@ export class EzSkeleton {
         "reflect": false,
         "defaultValue": "null"
       },
+      "marginTop": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{string}"
+            }, {
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "MarginTop of the skeleton ex. 10px, 0 etc."
+        },
+        "attribute": "margin-top",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "marginRight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{string}"
+            }, {
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "MarginRight of the skeleton ex. 10px, 0 etc."
+        },
+        "attribute": "margin-right",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "marginBottom": {
         "type": "string",
         "mutable": false,
@@ -182,12 +317,12 @@ export class EzSkeleton {
         "reflect": false,
         "defaultValue": "null"
       },
-      "animation": {
+      "marginLeft": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'progress' | 'progress-dark' | 'pulse' | 'false'",
-          "resolved": "\"false\" | \"progress\" | \"progress-dark\" | \"pulse\"",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -195,7 +330,36 @@ export class EzSkeleton {
         "docs": {
           "tags": [{
               "name": "type",
-              "text": "{('progress' | 'progress-dark' | 'pulse' | 'false')}"
+              "text": "{string}"
+            }, {
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "MarginLeft of the skeleton ex. 10px, 0 etc."
+        },
+        "attribute": "margin-left",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "animation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SkeletonAnimation",
+          "resolved": "\"false\" | \"progress\" | \"pulse\"",
+          "references": {
+            "SkeletonAnimation": {
+              "location": "import",
+              "path": "./ez-skeleton.constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{('progress' | 'pulse' | 'false')}"
             }, {
               "name": "memberof",
               "text": "Skeleton"
@@ -204,7 +368,7 @@ export class EzSkeleton {
         },
         "attribute": "animation",
         "reflect": false,
-        "defaultValue": "'progress'"
+        "defaultValue": "DEFAULT_VALUES.ANIMATION"
       }
     };
   }