@ptcwebops/ptcw-design 2.2.9 → 2.3.2

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

@@ -1,500 +1,500 @@
-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.disableResize = false;
-    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;
-    this.displayImage = 'block';
-  }
-  WindowResize() {
-    this.addIntersectionObserver();
-  }
-  componentWillLoad() {
-    if (this.disableResize) {
-      this.sizeXs = undefined;
-      this.sizeSm = undefined;
-      this.sizeMd = undefined;
-      this.sizeLg = undefined;
-    }
-  }
-  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();
-            lazyLoadImages.unobserve(image);
-          }
-        });
-      });
-      let tempImg = this.el.shadowRoot.querySelector('img');
-      if (tempImg) {
-        lazyLoadImages.observe(tempImg);
-      }
-    }
-    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) {
-        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,
-      [this.displayImage]: 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'"
-      },
-      "disableResize": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disable Image resizing solution"
-        },
-        "attribute": "disable-resize",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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
-      },
-      "displayImage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'inline' | 'inline-block' | 'block'",
-          "resolved": "\"block\" | \"inline\" | \"inline-block\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Display image: inline, inline-block, block"
-        },
-        "attribute": "display-image",
-        "reflect": false,
-        "defaultValue": "'block'"
-      }
-    };
-  }
-  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.disableResize = false;
+    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;
+    this.displayImage = 'block';
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentWillLoad() {
+    if (this.disableResize) {
+      this.sizeXs = undefined;
+      this.sizeSm = undefined;
+      this.sizeMd = undefined;
+      this.sizeLg = undefined;
+    }
+  }
+  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();
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      let tempImg = this.el.shadowRoot.querySelector('img');
+      if (tempImg) {
+        lazyLoadImages.observe(tempImg);
+      }
+    }
+    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) {
+        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,
+      [this.displayImage]: 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'"
+      },
+      "disableResize": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable Image resizing solution"
+        },
+        "attribute": "disable-resize",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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
+      },
+      "displayImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inline' | 'inline-block' | 'block'",
+          "resolved": "\"block\" | \"inline\" | \"inline-block\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Display image: inline, inline-block, block"
+        },
+        "attribute": "display-image",
+        "reflect": false,
+        "defaultValue": "'block'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "oldSrc": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "WindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}