@ptcwebops/ptcw-design 0.5.8 → 0.6.0

package/dist/cjs/ptc-filter-tag.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+
+const CloseIcon = `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.88956 3.99986L8.00002 0.888695L7.11135 -0.000183105L4.00089 3.11099L0.890644 2.34688e-05L0.00197005 0.888902L3.11222 3.99986L0.00195312 7.11084L0.890627 7.99972L4.00089 4.88874L7.11136 7.99993L8.00003 7.11105L4.88956 3.99986Z" fill="#9AA6AD"/>
+</svg>
+`;
+
+const ptcFilterTagCss = ".ptc-filter-tag{display:block;cursor:pointer;position:relative;margin:0.25rem}.ptc-filter-tag.bubble{display:inline-block;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;align-items:center;transition:border-color ease-out 250ms;border:1px solid var(--color-gray-05);border-radius:999px;padding:0.375rem 1.875rem 0.375rem 0.875rem;background:var(--color-white)}.ptc-filter-tag.bubble:hover{border:1px solid var(--color-gray-12)}.ptc-filter-tag.bubble .cls{display:block;position:absolute;top:0.35rem;right:0.8rem}.ptc-filter-tag.link,.ptc-filter-tag.link-lg{display:inline-block;font-family:Raleway;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:right;border-bottom:1px solid transparent;background:var(--color-white)}.ptc-filter-tag.link:hover,.ptc-filter-tag.link-lg:hover{text-decoration:underline}.ptc-filter-tag.link .cls,.ptc-filter-tag.link-lg .cls{display:none}.ptc-filter-tag.link-lg{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold)}.ptc-filter-tag.button{background:var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);padding:0.625rem 1rem;font-family:\"Raleway\";font-style:normal;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);color:var(--color-white)}.ptc-filter-tag.button:hover{background-color:var(--color-gray-12)}.ptc-filter-tag.button:active{background-color:var(--color-black)}.ptc-filter-tag.button .cls{display:none}";
+
+let PtcFilterTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clicked = index.createEvent(this, "clicked", 7);
+    /**
+     * Theme
+     */
+    this.theme = 'bubble';
+    this.handleClick = () => {
+      this.clicked.emit(this);
+    };
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, index.h("span", { class: classMap, onClick: () => this.handleClick() }, index.h("slot", null), index.h("span", { class: "cls", innerHTML: CloseIcon }))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-filter-tag']: true,
+      [this.theme]: true
+    };
+  }
+};
+PtcFilterTag.style = ptcFilterTagCss;
+
+exports.ptc_filter_tag = PtcFilterTag;

package/dist/cjs/ptc-hero-footer-cta.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcHeroFooterCtaCss = ".sc-ptc-hero-footer-cta-h{display:block}.hero-footer-cta.sc-ptc-hero-footer-cta{position:relative;padding:var(--ptc-layout-spacing-05) 0;background-position:50%;background-size:cover;background-repeat:no-repeat;position:relative}.hero-footer-cta.sc-ptc-hero-footer-cta .is-grid.sc-ptc-hero-footer-cta{align-items:center;position:relative;z-index:10;margin:auto}.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta,.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{color:var(--color-white);text-shadow:1px 1px 20px rgba(0, 0, 0, 0.5);font-stretch:normal;font-style:normal;text-align:left;color:var(--color-white)}.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-black);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-xxxx-large);font-weight:var(--ptc-font-weight-extrabold)}}.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{max-width:70%}}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser)}}.hero-footer-cta.sc-ptc-hero-footer-cta .cta-overlay.sc-ptc-hero-footer-cta{position:absolute;top:0;bottom:0;right:0;left:0;background:rgba(0, 0, 0, 0.35)}.hero-footer-cta.sc-ptc-hero-footer-cta .btm-cta-cut.sc-ptc-hero-footer-cta{position:absolute;top:-1px;right:0;fill:var(--color-white);z-index:100;transform:scaleY(-1)}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta .cta-left-padding.sc-ptc-hero-footer-cta{padding-left:var(--ptc-element-spacing-08)}}";
 
-let PtcHeroFooterCta = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } }, index.h("svg", { class: "btm-cta-cut", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), index.h("div", { class: "cta-overlay" }), index.h("div", { class: "ptc-container is-grid has-p-lg" }, index.h("div", { class: "is-col-8-lg cta-left-padding" }, index.h("h2", null, this.ctaTitle), index.h("p", null, this.description)), index.h("div", { class: "is-col-4-lg cta-section" }, index.h("slot", { name: "cta" }))))));
-  }
-};
+let PtcHeroFooterCta = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } }, index.h("svg", { class: "btm-cta-cut", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), index.h("div", { class: "cta-overlay" }), index.h("div", { class: "ptc-container is-grid has-p-lg" }, index.h("div", { class: "is-col-8-lg cta-left-padding" }, index.h("h2", null, this.ctaTitle), index.h("p", null, this.description)), index.h("div", { class: "is-col-4-lg cta-section" }, index.h("slot", { name: "cta" }))))));
+  }
+};
 PtcHeroFooterCta.style = ptcHeroFooterCtaCss;
 
 exports.ptc_hero_footer_cta = PtcHeroFooterCta;

package/dist/cjs/ptc-hero.cjs.entry.js

@@ -6,24 +6,24 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcHeroCss = ":host{display:block;position:relative}:host(.jumbotron) .ptc-hero-wrapper,:host(.footer-cta) .ptc-hero-wrapper{position:relative}:host(.footer-cta) .ptc-hero-wrapper div>*{text-align:center}";
 
-let PtcHero = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Hero Background Image URL
-     */
-    this.bgUrl = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, index.h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }), this.heroType == 'jumbotron' ? ([index.h("ptc-overlay", { "filter-color": "black-1" }), index.h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.heroType]: this.heroType ? true : false,
-    };
-  }
-};
+let PtcHero = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Hero Background Image URL
+     */
+    this.bgUrl = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, index.h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }), this.heroType == 'jumbotron' ? ([index.h("ptc-overlay", { "filter-color": "black-1" }), index.h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+    };
+  }
+};
 PtcHero.style = ptcHeroCss;
 
 exports.ptc_hero = PtcHero;

package/dist/cjs/ptc-icon-list.cjs.entry.js

@@ -4,40 +4,40 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3adcf9f4.js');
 
-const ptcIconListCss = ":host{display:block;padding-bottom:var(--ptc-element-spacing-03)}:host .ptc-icon-list{display:flex;align-items:center}:host .ptc-icon-list .value-text{font-size:var(--ptc-font-size-small)}:host .ptc-icon-list .ptc-numbered-values{margin-left:var(--ptc-element-spacing-03);font-family:var(--ptc-font-secondary-latin)}:host .ptc-icon-list .ptc-numbered-subtitle{margin:0;font-size:var(--ptc-font-size-medium);font-family:var(--ptc-font-secondary-latin)}@media only screen and (min-width: 992px){:host .ptc-icon-list .ptc-numbered-subtitle{font-size:var(--ptc-font-size-large)}}:host .ptc-icon-list .ptc-content{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-dense);letter-spacing:normal;text-align:left;color:var(--color-gray-10);margin:0 0 0 var(--ptc-element-spacing-03);line-height:var(--ptc-line-height-densest)}:host .ptc-icon-list .ptc-content-simple{margin:0 0 0 var(--ptc-element-spacing-03);font-size:var(--ptc-font-size-small);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-dense);letter-spacing:normal;text-align:left;color:var(--color-gray-10);line-height:var(--ptc-line-height-densest)}:host ::slotted(icon-asset){display:flex;align-self:center}:host(.last-item){margin-bottom:var(--ptc-layout-spacing-03)}";
+const ptcIconListCss = ":host{display:block;padding-bottom:var(--ptc-element-spacing-03)}:host .ptc-icon-list{display:flex;align-items:center}:host .ptc-icon-list .value-text{font-size:var(--ptc-font-size-small)}:host .ptc-icon-list .ptc-numbered-values{margin-left:var(--ptc-element-spacing-03);font-family:var(--ptc-font-secondary-latin)}:host .ptc-icon-list .ptc-numbered-subtitle{margin:0;font-size:var(--ptc-font-size-medium);font-family:var(--ptc-font-secondary-latin)}@media only screen and (min-width: 992px){:host .ptc-icon-list .ptc-numbered-subtitle{font-size:var(--ptc-font-size-large)}}:host .ptc-icon-list .ptc-content{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-dense);letter-spacing:normal;text-align:left;color:var(--color-gray-10);margin:0 0 0 var(--ptc-element-spacing-03);line-height:var(--ptc-line-height-densest)}:host .ptc-icon-list .ptc-content-simple{margin:0 0 0 var(--ptc-element-spacing-03);font-size:var(--ptc-font-size-small);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-dense);letter-spacing:normal;text-align:left;color:var(--color-gray-10);line-height:var(--ptc-line-height-densest)}:host ::slotted(icon-asset){display:flex;align-self:center}:host(.icon-top-align-list) ::slotted(icon-asset){display:flex;align-self:flex-start;transform:translateY(40%)}:host(.last-item){margin-bottom:var(--ptc-layout-spacing-03)}";
 
-let PtcIconList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-  * List item type
-  */
-    this.listType = 'simple-icon-list';
-    /**
-   * List value with unit Example: 60%
-   */
-    this.valueWithUnit = '';
-    /**
-   * List value text Example: up to
-   */
-    this.valueText = '';
-    /**
-   * List value with unit Example: Increase in Operator Productivity
-   */
-    this.listContent = '';
-    this.isLastItem = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, this.listType == "stat-icon-list" ? (index.h("div", { class: "ptc-icon-list" }, index.h("slot", { name: "icon" }), index.h("div", { class: "ptc-numbered-values" }, index.h("span", { class: "value-text" }, this.valueText, "\u00A0"), index.h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), index.h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (index.h("div", { class: "ptc-icon-list" }, index.h("slot", { name: "icon" }), index.h("p", { class: "ptc-content-simple" }, this.listContent, " ")))));
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listType ? true : false,
-      ['last-item']: this.isLastItem ? true : false
-    };
-  }
-};
+let PtcIconList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+  * List item type
+  */
+    this.listType = 'simple-icon-list';
+    /**
+   * List value with unit Example: 60%
+   */
+    this.valueWithUnit = '';
+    /**
+   * List value text Example: up to
+   */
+    this.valueText = '';
+    /**
+   * List value with unit Example: Increase in Operator Productivity
+   */
+    this.listContent = '';
+    this.isLastItem = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, this.listType == "stat-icon-list" ? (index.h("div", { class: "ptc-icon-list" }, index.h("slot", { name: "icon" }), index.h("div", { class: "ptc-numbered-values" }, index.h("span", { class: "value-text" }, this.valueText, "\u00A0"), index.h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), index.h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (index.h("div", { class: "ptc-icon-list" }, index.h("slot", { name: "icon" }), index.h("p", { class: "ptc-content-simple" }, this.listContent, " ")))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listType ? true : false,
+      ['last-item']: this.isLastItem ? true : false
+    };
+  }
+};
 PtcIconList.style = ptcIconListCss;
 
 exports.ptc_icon_list = PtcIconList;

package/dist/cjs/ptc-icon-minimize.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+
+const ptcIconMinimizeCss = ".content{transition:max-height ease-out 250ms;overflow:hidden;max-height:0}.ptc-icon-minimize .header{display:flex;justify-content:space-between;align-items:center;align-content:center}.ptc-icon-minimize .header .title{color:var(--color-gray-10);font-family:\"Raleway\";font-style:normal;font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-normal)}.ptc-icon-minimize .header .icon{cursor:pointer;border:1px solid var(--color-gray-10);border-radius:2px;transition:background-color ease-out 250ms;background-color:transparent;vertical-align:middle;height:1.25rem;width:1.25rem;text-align:center}.ptc-icon-minimize .header .icon:hover{background-color:var(--color-gray-02)}.ptc-icon-minimize .header .icon icon-asset{position:relative}";
+
+let PtcIconMinimize = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.opened = true;
+  }
+  componentDidLoad() {
+    let content = this.host.shadowRoot.querySelector('.content');
+    if (this.opened && !content.style.maxHeight) {
+      content.style.maxHeight = content.scrollHeight + "px";
+    }
+  }
+  dropdownToggle() {
+    this.opened = !this.opened;
+  }
+  getScrollHeight() {
+    let result = undefined;
+    let content = this.host.shadowRoot.querySelector('.content');
+    if (this.opened && content) {
+      result = { 'max-height': content.scrollHeight + "px" };
+    }
+    else if (this.opened) {
+      result = { 'max-height': 350 + "px" };
+    }
+    else if (content && content.style.maxHeight) {
+      content.style.removeProperty('max-height');
+    }
+    return result;
+  }
+  render() {
+    let scrollHeight = this.getScrollHeight();
+    let icon = this.opened ? 'minus' : 'plus';
+    return (index.h("div", { class: "ptc-icon-minimize" }, index.h("div", { class: "header" }, index.h("div", { class: "title" }, this.heading), index.h("div", { class: "icon", onClick: () => this.dropdownToggle() }, index.h("icon-asset", { type: "solid", size: "xxx-small", name: icon }))), index.h("div", { class: "content", style: scrollHeight }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+PtcIconMinimize.style = ptcIconMinimizeCss;
+
+exports.ptc_icon_minimize = PtcIconMinimize;

package/dist/cjs/ptc-img_2.cjs.entry.js

@@ -3,182 +3,182 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3adcf9f4.js');
-const interfaces = require('./interfaces-574e6df7.js');
+const interfaces = require('./interfaces-0ecd8027.js');
 
 const ptcImgCss = ".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}@media only screen and (min-width: 768px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (min-width: 768px){.hidden-lg{display:none !important}}";
 
-let PtcImg = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * 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.imageType = 'smart-bg';
-    /**
-     * Image border shape
-     */
-    this.borderRadius = '';
-    /**
-     * Lazy loading option
-     */
-    this.loadMode = 'lazy-bg';
-  }
-  /**
-   * Image Z Index
-   */
-  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
-  WindowResize() {
-    this.setResponsiveBg();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.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' ? index.h("slot", null) : null)));
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-    this.setResponsiveBg();
-  }
-  componentWillUpdate() {
-    // console.log('componentWillUpdate!');
-    this.addIntersectionObserver();
-    this.setResponsiveBg();
-  }
-  //responsive image
-  setResponsiveBg() {
-    // Define local variables
-    let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    // console.log('current breakpoint: ' + currentBreakpoint);
-    // Loop through all target elements
-    for (var i = 0, len = backgrounds.length; i < len; i++) {
-      // Set current variables
-      el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
-      // If the data attribute exists, set the background
-      if (elData !== null) {
-        el.style.backgroundImage = "url('" + elData + "')";
-      }
-      else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
-        }
-      }
-    }
-  }
-  //lazy loading
-  addIntersectionObserver() {
-    if (!this.imgUrl) {
-      console.log('no image!');
-      return;
-    }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
-      let bgObserver = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const image = entry.target;
-            image.classList.remove('lazy-bg');
-            // console.log('loaded');
-            bgObserver.unobserve(image);
-          }
-        });
-      });
-      lazyLoadBgs.forEach(image => {
-        bgObserver.observe(image);
-      });
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.imageType]: true,
-      'ptc-img': true,
-      [this.borderRadius]: true,
-      [this.loadMode]: true,
-      // [this.imageZIndex] : true
-    };
-  }
-  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 = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
-      env = interfaces.ResponsiveBgVariables.envs[i];
-      // Add classes
-      temp.className = 'hidden-' + env;
-      // Found breakpoint
-      if (temp.offsetParent === null) {
-        // Remove our test node
-        doc.body.removeChild(temp);
-        console.log('remove test node');
-        // 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';
-    }
-  }
-  get el() { return index.getElement(this); }
-};
+let PtcImg = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * 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.imageType = 'smart-bg';
+    /**
+     * Image border shape
+     */
+    this.borderRadius = '';
+    /**
+     * Lazy loading option
+     */
+    this.loadMode = 'lazy-bg';
+  }
+  /**
+   * Image Z Index
+   */
+  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
+  WindowResize() {
+    this.setResponsiveBg();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, index.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' ? index.h("slot", null) : null)));
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  componentWillUpdate() {
+    // console.log('componentWillUpdate!');
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    // console.log('current breakpoint: ' + currentBreakpoint);
+    // Loop through all target elements
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      // If the data attribute exists, set the background
+      if (elData !== null) {
+        el.style.backgroundImage = "url('" + elData + "')";
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  //lazy loading
+  addIntersectionObserver() {
+    if (!this.imgUrl) {
+      console.log('no image!');
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
+      let bgObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = entry.target;
+            image.classList.remove('lazy-bg');
+            // console.log('loaded');
+            bgObserver.unobserve(image);
+          }
+        });
+      });
+      lazyLoadBgs.forEach(image => {
+        bgObserver.observe(image);
+      });
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.imageType]: true,
+      'ptc-img': true,
+      [this.borderRadius]: true,
+      [this.loadMode]: true,
+      // [this.imageZIndex] : true
+    };
+  }
+  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 = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
+      env = interfaces.ResponsiveBgVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        console.log('remove test node');
+        // 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';
+    }
+  }
+  get el() { return index.getElement(this); }
+};
 PtcImg.style = ptcImgCss;
 
 const ptcOverlayCss = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, var(--color-blue-07) 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, var(--color-red-07) 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, var(--color-orange-07) 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, var(--color-green-07) 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}@media only screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}}:host(.black-3){background:linear-gradient(180deg, var(--color-gray-12) 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, var(--color-gray-07) 100%)}:host(.radius-standard){border-radius:var(--ptc-border-radius-standard)}:host(.radius-large){border-radius:var(--ptc-border-radius-large)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
 
-let PtcOverlay = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Overlay z-index
-     */
-    this.overlayZIndex = 'z-index-auto';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return index.h(index.Host, { class: classMap });
-  }
-  getCssClassMap() {
-    return {
-      [this.filterColor]: !!this.filterColor ? true : false,
-      [this.borderRadius]: !!this.borderRadius ? true : false,
-      [this.overlayZIndex]: true
-    };
-  }
-};
+let PtcOverlay = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Overlay z-index
+     */
+    this.overlayZIndex = 'z-index-auto';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return index.h(index.Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.filterColor]: !!this.filterColor ? true : false,
+      [this.borderRadius]: !!this.borderRadius ? true : false,
+      [this.overlayZIndex]: true
+    };
+  }
+};
 PtcOverlay.style = ptcOverlayCss;
 
 exports.ptc_img = PtcImg;