@ptcwebops/ptcw-design 0.7.6 → 0.7.8

package/dist/collection/components/ptc-img/ptc-img.js

@@ -1,38 +1,14 @@
-import { Component, Host, h, Prop, Listen, Element } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { ResponsiveBgVariables } from '../../utils/interfaces';
 export class PtcImg {
   constructor() {
-    /**
-     * Image size for smallest screen
-     * <=767px
-     */
     this.sizeXs = '510x340';
-    /**
-     * Image size for small screen
-     * >=768px and <=991px
-     */
     this.sizeSm = '1240x496';
-    /**
-     * Image size for medium screen
-     * >=992px and <=1199px
-     */
     this.sizeMd = '1366x500';
-    /**
-     * Image solution for large screen
-     * >=1200px
-     */
     this.sizeLg = '1920x1080';
-    /**
-     * Image type
-     */
+    this.imgUrl = undefined;
     this.imageType = 'smart-bg';
-    /**
-     * Image border shape
-     */
     this.borderRadius = '';
-    /**
-     * Lazy loading option
-     */
     this.loadMode = 'lazy-bg';
   }
   /**
@@ -44,8 +20,7 @@ export class PtcImg {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, null,
-      h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
+    return (h(Host, null, h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
   }
   componentDidLoad() {
     this.addIntersectionObserver();
@@ -151,163 +126,171 @@ export class PtcImg {
     }
   }
   static get is() { return "ptc-img"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-img.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-img.css"]
-  }; }
-  static get properties() { return {
-    "sizeXs": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image size for smallest screen\r\n<=767px"
-      },
-      "attribute": "size-xs",
-      "reflect": false,
-      "defaultValue": "'510x340'"
-    },
-    "sizeSm": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image size for small screen\r\n>=768px and <=991px"
-      },
-      "attribute": "size-sm",
-      "reflect": false,
-      "defaultValue": "'1240x496'"
-    },
-    "sizeMd": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image size for medium screen\r\n>=992px and <=1199px"
-      },
-      "attribute": "size-md",
-      "reflect": false,
-      "defaultValue": "'1366x500'"
-    },
-    "sizeLg": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image solution for large screen\r\n>=1200px"
-      },
-      "attribute": "size-lg",
-      "reflect": false,
-      "defaultValue": "'1920x1080'"
-    },
-    "imgUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image Src"
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-img.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-img.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sizeXs": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image size for smallest screen\r\n<=767px"
+        },
+        "attribute": "size-xs",
+        "reflect": false,
+        "defaultValue": "'510x340'"
       },
-      "attribute": "img-url",
-      "reflect": false
-    },
-    "imageType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'smart-bg' | 'smart-img'",
-        "resolved": "\"smart-bg\" | \"smart-img\"",
-        "references": {}
+      "sizeSm": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image size for small screen\r\n>=768px and <=991px"
+        },
+        "attribute": "size-sm",
+        "reflect": false,
+        "defaultValue": "'1240x496'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image type"
+      "sizeMd": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image size for medium screen\r\n>=992px and <=1199px"
+        },
+        "attribute": "size-md",
+        "reflect": false,
+        "defaultValue": "'1366x500'"
       },
-      "attribute": "image-type",
-      "reflect": false,
-      "defaultValue": "'smart-bg'"
-    },
-    "borderRadius": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'radius-standard' | 'radius-large' | ''",
-        "resolved": "\"\" | \"radius-large\" | \"radius-standard\"",
-        "references": {}
+      "sizeLg": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image solution for large screen\r\n>=1200px"
+        },
+        "attribute": "size-lg",
+        "reflect": false,
+        "defaultValue": "'1920x1080'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image border shape"
+      "imgUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image Src"
+        },
+        "attribute": "img-url",
+        "reflect": false
       },
-      "attribute": "border-radius",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "loadMode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'lazy-bg' | 'eager-bg'",
-        "resolved": "\"eager-bg\" | \"lazy-bg\"",
-        "references": {}
+      "imageType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'smart-bg' | 'smart-img'",
+          "resolved": "\"smart-bg\" | \"smart-img\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image type"
+        },
+        "attribute": "image-type",
+        "reflect": false,
+        "defaultValue": "'smart-bg'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Lazy loading option"
+      "borderRadius": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'radius-standard' | 'radius-large' | ''",
+          "resolved": "\"\" | \"radius-large\" | \"radius-standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image border shape"
+        },
+        "attribute": "border-radius",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "load-mode",
-      "reflect": false,
-      "defaultValue": "'lazy-bg'"
-    }
-  }; }
+      "loadMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'lazy-bg' | 'eager-bg'",
+          "resolved": "\"eager-bg\" | \"lazy-bg\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lazy loading option"
+        },
+        "attribute": "load-mode",
+        "reflect": false,
+        "defaultValue": "'lazy-bg'"
+      }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "WindowResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "WindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }