@ptcwebops/ptcw-design 0.7.6 → 0.7.7

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

@@ -1,52 +1,24 @@
-import { Component, Prop, h, Element, Listen, State, Host } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { ResponsivePictureVariables } from '../../utils/interfaces';
 export class PtcPicture {
   constructor() {
-    /**
-     * Image alt
-     */
+    this.src = undefined;
     this.alt = "image";
-    /**
-     * 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 Position
-     */
+    this.oldSrc = undefined;
     this.imagePosition = 'static';
-    /**
-     * Object Fit
-     * Default: cover
-     */
+    this.borderRadius = undefined;
+    this.height = undefined;
+    this.width = undefined;
     this.objectFit = 'cover';
-    /**
-     * Stretch height to 100%?
-     */
     this.isFullHeight = false;
-    /**
-     * Stretch width to 100%?
-     */
     this.isFullWidth = false;
-    /**
-     * (optional) Image alignment
-     **/
+    this.styles = undefined;
     this.imageAlignment = 'left';
+    this.maxWidth = undefined;
   }
   WindowResize() {
     this.addIntersectionObserver();
@@ -112,10 +84,7 @@ export class PtcPicture {
   render() {
     const classMap = this.getCssClassMap();
     const classMapHost = this.getCssClassMapHost();
-    return (h(Host, { class: classMapHost },
-      this.styles && h("style", null, this.styles),
-      h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })),
-      h("slot", null)));
+    return (h(Host, { class: classMapHost }, this.styles && h("style", null, this.styles), h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), h("slot", null)));
   }
   getCurrentBreakPoints() {
     // Define local variables
@@ -169,305 +138,315 @@ export class PtcPicture {
   }
   static get is() { return "ptc-picture"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-picture.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-picture.css"]
-  }; }
-  static get properties() { return {
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image Render Src"
-      },
-      "attribute": "src",
-      "reflect": false
-    },
-    "alt": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image alt"
-      },
-      "attribute": "alt",
-      "reflect": false,
-      "defaultValue": "\"image\""
-    },
-    "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'"
-    },
-    "imagePosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'relative' | 'absolute' | 'static'",
-        "resolved": "\"absolute\" | \"relative\" | \"static\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image Position"
-      },
-      "attribute": "image-position",
-      "reflect": false,
-      "defaultValue": "'static'"
-    },
-    "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
-    },
-    "height": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Set height\r\nValue unit: pixles\r\nJust put numbers without unit"
-      },
-      "attribute": "height",
-      "reflect": false
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Set Width\r\nvalue unit: pixles\r\nJust put numbers without unit"
-      },
-      "attribute": "width",
-      "reflect": false
-    },
-    "objectFit": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'cover' | 'fill' | 'contain' | 'scale-down' | 'none' | 'initial' | 'inherit'",
-        "resolved": "\"contain\" | \"cover\" | \"fill\" | \"inherit\" | \"initial\" | \"none\" | \"scale-down\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Object Fit\r\nDefault: cover"
-      },
-      "attribute": "object-fit",
-      "reflect": false,
-      "defaultValue": "'cover'"
-    },
-    "isFullHeight": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Stretch height to 100%?"
-      },
-      "attribute": "is-full-height",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isFullWidth": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Stretch width to 100%?"
-      },
-      "attribute": "is-full-width",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "styles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) Injected CSS styles"
-      },
-      "attribute": "styles",
-      "reflect": false
-    },
-    "imageAlignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'left' | 'right' | 'center'",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) Image alignment"
-      },
-      "attribute": "image-alignment",
-      "reflect": false,
-      "defaultValue": "'left'"
-    },
-    "maxWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) Set max-width\r\nvalue unit: pixles\r\nJust put numbers without unit"
-      },
-      "attribute": "max-width",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "oldSrc": {}
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-picture.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-picture.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image Render Src"
+        },
+        "attribute": "src",
+        "reflect": false
+      },
+      "alt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image alt"
+        },
+        "attribute": "alt",
+        "reflect": false,
+        "defaultValue": "\"image\""
+      },
+      "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'"
+      },
+      "imagePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'relative' | 'absolute' | 'static'",
+          "resolved": "\"absolute\" | \"relative\" | \"static\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image Position"
+        },
+        "attribute": "image-position",
+        "reflect": false,
+        "defaultValue": "'static'"
+      },
+      "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
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set height\r\nValue unit: pixles\r\nJust put numbers without unit"
+        },
+        "attribute": "height",
+        "reflect": false
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set Width\r\nvalue unit: pixles\r\nJust put numbers without unit"
+        },
+        "attribute": "width",
+        "reflect": false
+      },
+      "objectFit": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'cover' | 'fill' | 'contain' | 'scale-down' | 'none' | 'initial' | 'inherit'",
+          "resolved": "\"contain\" | \"cover\" | \"fill\" | \"inherit\" | \"initial\" | \"none\" | \"scale-down\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Object Fit\r\nDefault: cover"
+        },
+        "attribute": "object-fit",
+        "reflect": false,
+        "defaultValue": "'cover'"
+      },
+      "isFullHeight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Stretch height to 100%?"
+        },
+        "attribute": "is-full-height",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isFullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Stretch width to 100%?"
+        },
+        "attribute": "is-full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS styles"
+        },
+        "attribute": "styles",
+        "reflect": false
+      },
+      "imageAlignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'center'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Image alignment"
+        },
+        "attribute": "image-alignment",
+        "reflect": false,
+        "defaultValue": "'left'"
+      },
+      "maxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Set max-width\r\nvalue unit: pixles\r\nJust put numbers without unit"
+        },
+        "attribute": "max-width",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "oldSrc": {}
+    };
+  }
   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
+      }];
+  }
 }