@ptcwebops/ptcw-design 0.7.5 → 0.7.7

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

@@ -1,473 +1,452 @@
-import { Component, Prop, h, Element, Listen, State, Host } from '@stencil/core';
-import { ResponsivePictureVariables } from '../../utils/interfaces';
-export class PtcPicture {
-  constructor() {
-    /**
-     * Image alt
-     */
-    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.imagePosition = 'static';
-    /**
-     * Object Fit
-     * Default: cover
-     */
-    this.objectFit = 'cover';
-    /**
-     * Stretch height to 100%?
-     */
-    this.isFullHeight = false;
-    /**
-     * Stretch width to 100%?
-     */
-    this.isFullWidth = false;
-    /**
-     * (optional) Image alignment
-     **/
-    this.imageAlignment = 'left';
-  }
-  WindowResize() {
-    this.addIntersectionObserver();
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-  }
-  componentWillUpdate() {
-    if (this.src !== this.oldSrc) {
-      this.addIntersectionObserver();
-    }
-    this.oldSrc = this.src;
-  }
-  //lazy-loading
-  addIntersectionObserver() {
-    if (!this.src) {
-      return;
-    }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadImages = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const image = this.el.shadowRoot.querySelector('img');
-            image.src = this.setResponsiveBg();
-            console.log('loaded');
-            lazyLoadImages.unobserve(image);
-          }
-        });
-      });
-      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
-    }
-    else {
-      // fall back to setTimeout for Safari and IE
-      setTimeout(() => {
-        const image = this.el.shadowRoot.querySelector('img');
-        image.src = this.setResponsiveBg();
-        image.onload = () => {
-          image.removeAttribute('data-src');
-          console.log('loaded fallback');
-        };
-      }, 5000);
-    }
-  }
-  //responsive image
-  setResponsiveBg() {
-    // Define local variables
-    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    for (var i = 0, len = backgrounds.length; i < len; i++) {
-      // Set current variables
-      el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
-      if (elData !== null) {
-        // console.log('img src= ' + elData);
-        return elData;
-      }
-      else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
-        }
-      }
-    }
-  }
-  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)));
-  }
-  getCurrentBreakPoints() {
-    // Define local variables
-    let doc = window.document, temp = doc.createElement('div'), env;
-    // Append test node
-    doc.body.appendChild(temp);
-    // Loop through breakpoints
-    for (let i = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
-      env = ResponsivePictureVariables.envs[i];
-      // Add classes
-      temp.className = 'hidden-' + env;
-      // Found breakpoint
-      if (temp.offsetParent === null) {
-        // Remove our test node
-        doc.body.removeChild(temp);
-        // Return current breakpoint
-        return env;
-      }
-    }
-    // Breakpoint not found, try fallback
-    doc.body.removeChild(temp);
-    return this.getFallbackBreakpoint();
-  }
-  getFallbackBreakpoint() {
-    if (window.matchMedia('(min-width: 992px)').matches) {
-      return 'lg';
-    }
-    else if (window.matchMedia('(min-width: 768px)').matches) {
-      return 'md';
-    }
-    else if (window.matchMedia('(min-width: 576px)').matches) {
-      return 'sm';
-    }
-    else {
-      return 'xs';
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.borderRadius]: this.borderRadius ? true : false,
-      [this.objectFit]: true,
-      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
-      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true
-    };
-  }
-  getCssClassMapHost() {
-    return {
-      [this.imagePosition]: true,
-      [this.imageAlignment]: true
-    };
-  }
-  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\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\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\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\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\nValue unit: pixles\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\nvalue unit: pixles\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\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\nvalue unit: pixles\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
-    }]; }
-}
+import { h, Host } from '@stencil/core';
+import { ResponsivePictureVariables } from '../../utils/interfaces';
+export class PtcPicture {
+  constructor() {
+    this.src = undefined;
+    this.alt = "image";
+    this.sizeXs = '510x340';
+    this.sizeSm = '1240x496';
+    this.sizeMd = '1366x500';
+    this.sizeLg = '1920x1080';
+    this.oldSrc = undefined;
+    this.imagePosition = 'static';
+    this.borderRadius = undefined;
+    this.height = undefined;
+    this.width = undefined;
+    this.objectFit = 'cover';
+    this.isFullHeight = false;
+    this.isFullWidth = false;
+    this.styles = undefined;
+    this.imageAlignment = 'left';
+    this.maxWidth = undefined;
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+  //lazy-loading
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadImages = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = this.el.shadowRoot.querySelector('img');
+            image.src = this.setResponsiveBg();
+            console.log('loaded');
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => {
+        const image = this.el.shadowRoot.querySelector('img');
+        image.src = this.setResponsiveBg();
+        image.onload = () => {
+          image.removeAttribute('data-src');
+          console.log('loaded fallback');
+        };
+      }, 5000);
+    }
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      if (elData !== null) {
+        // console.log('img src= ' + elData);
+        return elData;
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  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)));
+  }
+  getCurrentBreakPoints() {
+    // Define local variables
+    let doc = window.document, temp = doc.createElement('div'), env;
+    // Append test node
+    doc.body.appendChild(temp);
+    // Loop through breakpoints
+    for (let i = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
+      env = ResponsivePictureVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else {
+      return 'xs';
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.borderRadius]: this.borderRadius ? true : false,
+      [this.objectFit]: true,
+      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
+      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true
+    };
+  }
+  getCssClassMapHost() {
+    return {
+      [this.imagePosition]: true,
+      [this.imageAlignment]: true
+    };
+  }
+  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 elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "WindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}