@ptcwebops/ptcw-design 3.2.2 → 3.2.3

package/dist/esm/ptc-nav-slider.entry.js

@@ -2,96 +2,96 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-62
 
 const ptcNavSliderCss = "@media only screen and (min-width: 1200px){:host{max-width:746px;padding:0px 0px;display:flex;align-items:center;margin-left:-23px}:host .box-wrap{width:100%;height:auto;display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host .box-wrap::-webkit-scrollbar{display:none}}@media only screen and (min-width: 1440px){:host{margin-left:-46px}}:host .navArrows{display:inline-block}:host .navArrows svg{vertical-align:middle}:host .btn-wrap-left,:host .btn-wrap-right{display:none}@media only screen and (min-width: 1200px){:host .btn-wrap-left,:host .btn-wrap-right{display:inline-block;width:32px;height:32px;position:relative}}@media (max-width: 1199px){:host .btn-wrap-left,:host .btn-wrap-right{display:none !important}}:host button#prevBtn,:host button#nextBtn{background:transparent;border-radius:var(--ptc-border-radius-standard);border:none;width:32px;height:32px}:host button#prevBtn:hover,:host button#nextBtn:hover{background:var(--color-gray-12)}:host .btn-wrap-left{margin-right:14px}:host .btn-wrap-right{margin-left:14px}";
 
-const PtcNavSlider = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sliderId = `ptc-nav-slider-${Math.floor(Math.random() * 1000000)}`;
-  }
-  componentDidLoad() {
-    // use the ID to select elements within the component's shadow root
-    this.updateSlider(undefined);
-    const { shadowRoot } = document.querySelector(`#${this.sliderId}`);
-    const boxWrap = shadowRoot.querySelector('.box-wrap');
-    boxWrap.addEventListener('scroll', this.updateSlider.bind(this));
-  }
-  handledropdownClickEvent(element) {
-    const sliderId = element.target.querySelector('.nav-slider').id;
-    const boxWrap = element.target.querySelector('.nav-slider').shadowRoot.querySelector('.box-wrap');
-    const prevBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#prevBtn');
-    const nextBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#nextBtn');
-    let notDropdown = element.target.tagName.toLowerCase() != 'ptc-nav-submenu';
-    console.log(element.target.tagName);
-    this.updateArrows(boxWrap, prevBtn, nextBtn, notDropdown);
-  }
-  updateArrows(boxWrap, prevBtn, nextBtn, isNotDropdown) {
-    // let offsetWidth = boxWrap.offsetWidth;
-    // let scrollWidth = boxWrap.scrollWidth;
-    // let scrollLeft = boxWrap.scrollLeft;
-    // let combine = offsetWidth + scrollLeft;
-    // console.log("offsetWidth " + offsetWidth);
-    // console.log("scrollWidth " + scrollWidth);
-    // console.log("scrollLeft " + scrollLeft);
-    // console.log("offsetWidth +  scrollLeft " + combine);
-    if ((boxWrap.offsetWidth) == boxWrap.scrollWidth) {
-      prevBtn.style.visibility = "hidden";
-      nextBtn.style.visibility = "hidden";
-      if (isNotDropdown)
-        prevBtn.closest('.btn-wrap-left').style.display = 'none';
-    }
-    else if ((boxWrap.scrollLeft + boxWrap.offsetWidth) <= boxWrap.scrollWidth) {
-      if (isNotDropdown)
-        prevBtn.closest('.btn-wrap-left').style.display = '';
-      if (boxWrap.scrollLeft > 0) {
-        if ((boxWrap.scrollLeft + boxWrap.offsetWidth) == boxWrap.scrollWidth) {
-          nextBtn.style.visibility = "hidden";
-          prevBtn.style.visibility = "visible";
-        }
-        else {
-          prevBtn.style.visibility = "visible";
-          nextBtn.style.visibility = "visible";
-        }
-      }
-      else {
-        prevBtn.style.visibility = "hidden";
-        nextBtn.style.visibility = "visible";
-      }
-    }
-    else {
-      prevBtn.style.visibility = "visible";
-      nextBtn.style.visibility = "hidden";
-    }
-  }
-  updateSlider(event) {
-    const boxWrap = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('.box-wrap');
-    const prevBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#prevBtn');
-    const nextBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#nextBtn');
-    if (event !== undefined) {
-      let notDropdown = !event.target.closest('.dropdown-content');
-      this.updateArrows(event.target, prevBtn, nextBtn, notDropdown);
-    }
-    else {
-      this.updateArrows(boxWrap, prevBtn, nextBtn, false);
-    }
-  }
-  leftScroll(ele) {
-    const sliderId = ele.sliderId;
-    const left = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
-    if (left.scrollLeft > 0) {
-      left.scrollBy(-200, 0);
-    }
-  }
-  rightScroll(ele) {
-    const sliderId = ele.sliderId;
-    const right = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
-    if (right.scrollLeft + right.offsetWidth < right.scrollWidth) {
-      right.scrollBy(200, 0);
-    }
-  }
-  render() {
-    return (h(Host, { class: `nav-slider`, id: this.sliderId }, h("div", { class: "btn-wrap-left" }, h("button", { id: "prevBtn", class: "navArrows", onClick: () => this.leftScroll(this) }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.166 13.2375L4.39723 7.5L10.166 1.7625L8.39004 0L0.832683 7.5L8.39004 15L10.166 13.2375Z", fill: "white" })))), h("div", { class: "box-wrap" }, h("slot", null)), h("div", { class: "btn-wrap-right" }, h("button", { id: "nextBtn", class: "navArrows ", onClick: () => this.rightScroll(this) }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.833984 1.7625L6.60277 7.5L0.833984 13.2375L2.60996 15L10.1673 7.5L2.60996 0L0.833984 1.7625Z", fill: "white" }))))));
-  }
-  get el() { return getElement(this); }
-};
+const PtcNavSlider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sliderId = `ptc-nav-slider-${Math.floor(Math.random() * 1000000)}`;
+  }
+  componentDidLoad() {
+    // use the ID to select elements within the component's shadow root
+    this.updateSlider(undefined);
+    const { shadowRoot } = document.querySelector(`#${this.sliderId}`);
+    const boxWrap = shadowRoot.querySelector('.box-wrap');
+    boxWrap.addEventListener('scroll', this.updateSlider.bind(this));
+  }
+  handledropdownClickEvent(element) {
+    const sliderId = element.target.querySelector('.nav-slider').id;
+    const boxWrap = element.target.querySelector('.nav-slider').shadowRoot.querySelector('.box-wrap');
+    const prevBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#prevBtn');
+    const nextBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#nextBtn');
+    let notDropdown = element.target.tagName.toLowerCase() != 'ptc-nav-submenu';
+    console.log(element.target.tagName);
+    this.updateArrows(boxWrap, prevBtn, nextBtn, notDropdown);
+  }
+  updateArrows(boxWrap, prevBtn, nextBtn, isNotDropdown) {
+    // let offsetWidth = boxWrap.offsetWidth;
+    // let scrollWidth = boxWrap.scrollWidth;
+    // let scrollLeft = boxWrap.scrollLeft;
+    // let combine = offsetWidth + scrollLeft;
+    // console.log("offsetWidth " + offsetWidth);
+    // console.log("scrollWidth " + scrollWidth);
+    // console.log("scrollLeft " + scrollLeft);
+    // console.log("offsetWidth +  scrollLeft " + combine);
+    if ((boxWrap.offsetWidth) == boxWrap.scrollWidth) {
+      prevBtn.style.visibility = "hidden";
+      nextBtn.style.visibility = "hidden";
+      if (isNotDropdown)
+        prevBtn.closest('.btn-wrap-left').style.display = 'none';
+    }
+    else if ((boxWrap.scrollLeft + boxWrap.offsetWidth) <= boxWrap.scrollWidth) {
+      if (isNotDropdown)
+        prevBtn.closest('.btn-wrap-left').style.display = '';
+      if (boxWrap.scrollLeft > 0) {
+        if ((boxWrap.scrollLeft + boxWrap.offsetWidth) == boxWrap.scrollWidth) {
+          nextBtn.style.visibility = "hidden";
+          prevBtn.style.visibility = "visible";
+        }
+        else {
+          prevBtn.style.visibility = "visible";
+          nextBtn.style.visibility = "visible";
+        }
+      }
+      else {
+        prevBtn.style.visibility = "hidden";
+        nextBtn.style.visibility = "visible";
+      }
+    }
+    else {
+      prevBtn.style.visibility = "visible";
+      nextBtn.style.visibility = "hidden";
+    }
+  }
+  updateSlider(event) {
+    const boxWrap = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('.box-wrap');
+    const prevBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#prevBtn');
+    const nextBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#nextBtn');
+    if (event !== undefined) {
+      let notDropdown = !event.target.closest('.dropdown-content');
+      this.updateArrows(event.target, prevBtn, nextBtn, notDropdown);
+    }
+    else {
+      this.updateArrows(boxWrap, prevBtn, nextBtn, false);
+    }
+  }
+  leftScroll(ele) {
+    const sliderId = ele.sliderId;
+    const left = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
+    if (left.scrollLeft > 0) {
+      left.scrollBy(-200, 0);
+    }
+  }
+  rightScroll(ele) {
+    const sliderId = ele.sliderId;
+    const right = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
+    if (right.scrollLeft + right.offsetWidth < right.scrollWidth) {
+      right.scrollBy(200, 0);
+    }
+  }
+  render() {
+    return (h(Host, { class: `nav-slider`, id: this.sliderId }, h("div", { class: "btn-wrap-left" }, h("button", { id: "prevBtn", class: "navArrows", onClick: () => this.leftScroll(this) }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.166 13.2375L4.39723 7.5L10.166 1.7625L8.39004 0L0.832683 7.5L8.39004 15L10.166 13.2375Z", fill: "white" })))), h("div", { class: "box-wrap" }, h("slot", null)), h("div", { class: "btn-wrap-right" }, h("button", { id: "nextBtn", class: "navArrows ", onClick: () => this.rightScroll(this) }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.833984 1.7625L6.60277 7.5L0.833984 13.2375L2.60996 15L10.1673 7.5L2.60996 0L0.833984 1.7625Z", fill: "white" }))))));
+  }
+  get el() { return getElement(this); }
+};
 PtcNavSlider.style = ptcNavSliderCss;
 
 export { PtcNavSlider as ptc_nav_slider };

package/dist/esm/ptc-nav-submenu.entry.js

@@ -2,43 +2,43 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const ptcNavSubmenuCss = ":host{display:block;position:relative;cursor:pointer}:host .back-btn{display:none;position:absolute;left:30px;top:22px;color:var(--color-white);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle;width:12px;height:12px}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;color:var(--color-gray-03);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-03);margin-left:34%;position:relative}:host .submenu-toggle::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:14px}@media only screen and (min-width: 1200px){:host .submenu-toggle::after{bottom:20px}}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{padding:22px var(--ptc-element-spacing-03);margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle;width:12px;height:12px}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white)}:host .submenu-toggle:hover::after{border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:64px;z-index:10}}:host .submenu-container .submenu-container-lg{max-width:1200px;margin:auto}@media only screen and (min-width: 992px){:host .submenu-container .submenu-container-lg{padding:0 32px}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
 
-const PtcNavSubmenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dropdownClickEvent = createEvent(this, "dropdownClickEvent", 7);
-    this.label = undefined;
-    this.iconAssetName = undefined;
-    this.iconSrc = undefined;
-  }
-  calculateOffset() {
-    var dropdown = this.el.shadowRoot.querySelector('.submenu-container');
-    var container = this.el.closest('ptc-subnav');
-    if (dropdown && container) {
-      if (window.innerWidth >= 1200) {
-        let height = container.clientHeight;
-        if (height > 0) {
-          dropdown.style.top = `${height}px`;
-        }
-      }
-      else {
-        dropdown.style.top = '';
-      }
-    }
-  }
-  handleClick(event) {
-    this.calculateOffset();
-    setTimeout(() => {
-      this.dropdownClickEvent.emit(event);
-    }, 100);
-  }
-  render() {
-    return (h(Host, { class: `dropdown` }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back"), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName &&
-      h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" }), this.label, this.iconSrc &&
-      h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" }), !this.iconSrc &&
-      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-};
+const PtcNavSubmenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dropdownClickEvent = createEvent(this, "dropdownClickEvent", 7);
+    this.label = undefined;
+    this.iconAssetName = undefined;
+    this.iconSrc = undefined;
+  }
+  calculateOffset() {
+    var dropdown = this.el.shadowRoot.querySelector('.submenu-container');
+    var container = this.el.closest('ptc-subnav');
+    if (dropdown && container) {
+      if (window.innerWidth >= 1200) {
+        let height = container.clientHeight;
+        if (height > 0) {
+          dropdown.style.top = `${height}px`;
+        }
+      }
+      else {
+        dropdown.style.top = '';
+      }
+    }
+  }
+  handleClick(event) {
+    this.calculateOffset();
+    setTimeout(() => {
+      this.dropdownClickEvent.emit(event);
+    }, 100);
+  }
+  render() {
+    return (h(Host, { class: `dropdown` }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back"), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName &&
+      h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" }), this.label, this.iconSrc &&
+      h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" }), !this.iconSrc &&
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
 PtcNavSubmenu.style = ptcNavSubmenuCss;
 
 export { PtcNavSubmenu as ptc_nav_submenu };

package/dist/esm/ptc-news.entry.js

@@ -2,30 +2,30 @@ import { r as registerInstance, h, H as Host } from './index-62587d0b.js';
 
 const ptcNewsCss = ":host{display:block}:host .news-container{max-width:990px;padding:30px 0;margin:auto}:host .news-tag{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);display:inline-block}:host .news-title>div{margin-bottom:12px !important}:host .news-title h1{margin:0}:host .news-secondary-title{margin:0 0 20px 0;font-size:var(--ptc-font-size-medium);color:var(--color-gray-10)}@media only screen and (min-width: 768px){:host .news-secondary-title{font-size:var(--ptc-font-size-large)}}:host .news-date{margin-bottom:20px;display:inline-block;font-size:var(--ptc-font-size-small)}:host .news-summary{font-size:var(--ptc-font-size-medium);color:var(--color-gray-10);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-normal);margin:0 0 20px 0}:host .news-content{padding-top:var(--ptc-element-spacing-08)}:host ptc-sticky-icons{display:none}@media only screen and (min-width: 992px){:host ptc-sticky-icons{display:block}}";
 
-const PtcNews = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.newsTag = undefined;
-    this.newsTitle = undefined;
-    this.newsSecondaryTitle = undefined;
-    this.newsDate = undefined;
-    this.newsSummary = undefined;
-    this.newsImage = undefined;
-    this.newsImageAlt = undefined;
-    this.newsDownloadUrl = undefined;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && h("span", { class: "news-tag" }, this.newsTag), this.newsTitle && h("ptc-title", { type: 'h1', upperline: "no-upperline", "title-margin": "margin-5", class: "news-title" }, this.newsTitle), this.newsSecondaryTitle && h("h2", { class: "news-secondary-title", innerHTML: this.newsSecondaryTitle }), this.newsDate && h("span", { class: "news-date" }, this.newsDate), this.newsSummary && h("h2", { class: "news-summary", innerHTML: this.newsSummary }), this.getArticleImage(), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
-  }
-  getArticleImage() {
-    if (this.newsImage && this.newsDownloadUrl) {
-      return (h("ptc-image-download-strip", { "download-url": this.newsDownloadUrl }, h("ptc-picture", { alt: this.newsImageAlt, src: this.newsImage, "is-full-width": "true" })));
-    }
-    else if (this.newsImage && !this.newsDownloadUrl) {
-      return (h("ptc-picture", { alt: this.newsImageAlt, src: this.newsImage, "is-full-width": "true" }));
-    }
-  }
-};
+const PtcNews = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.newsTag = undefined;
+    this.newsTitle = undefined;
+    this.newsSecondaryTitle = undefined;
+    this.newsDate = undefined;
+    this.newsSummary = undefined;
+    this.newsImage = undefined;
+    this.newsImageAlt = undefined;
+    this.newsDownloadUrl = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && h("span", { class: "news-tag" }, this.newsTag), this.newsTitle && h("ptc-title", { type: 'h1', upperline: "no-upperline", "title-margin": "margin-5", class: "news-title" }, this.newsTitle), this.newsSecondaryTitle && h("h2", { class: "news-secondary-title", innerHTML: this.newsSecondaryTitle }), this.newsDate && h("span", { class: "news-date" }, this.newsDate), this.newsSummary && h("h2", { class: "news-summary", innerHTML: this.newsSummary }), this.getArticleImage(), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
+  }
+  getArticleImage() {
+    if (this.newsImage && this.newsDownloadUrl) {
+      return (h("ptc-image-download-strip", { "download-url": this.newsDownloadUrl }, h("ptc-picture", { alt: this.newsImageAlt, src: this.newsImage, "is-full-width": "true" })));
+    }
+    else if (this.newsImage && !this.newsDownloadUrl) {
+      return (h("ptc-picture", { alt: this.newsImageAlt, src: this.newsImage, "is-full-width": "true" }));
+    }
+  }
+};
 PtcNews.style = ptcNewsCss;
 
 export { PtcNews as ptc_news };

package/dist/esm/ptc-overlay.entry.js

@@ -2,29 +2,29 @@ import { r as registerInstance, h, H as Host } from './index-62587d0b.js';
 
 const ptcOverlayCss = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}: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%)}:host(.black-4){background:rgba(0, 0, 0, 0.66)}:host(.black-5){background:rgba(0, 0, 0, 0.76)}@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(.bright-blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.72) 0%, rgba(25, 123, 192, 0.85) 69.27%, rgba(25, 123, 192, 0.4) 100%)}:host(.bright-red){background:linear-gradient(180deg, rgba(211, 62, 62, 0.72) 0%, rgba(211, 62, 62, 0.85) 69.27%, rgba(211, 62, 62, 0.4) 100%)}:host(.bright-orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.72) 0%, rgba(195, 119, 41, 0.85) 69.27%, rgba(195, 119, 41, 0.4) 100%)}:host(.bright-green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.72) 0%, rgba(0, 137, 11, 0.85) 69.27%, rgba(0, 137, 11, 0.4) 100%)}:host(.bright-slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.72) 0%, rgba(97, 116, 128, 0.85) 69.27%, rgba(97, 116, 128, 0.4) 100%)}:host(.solid-black-1){background:rgba(16, 19, 20, 0.85)}:host(.solid-black-2){background:rgba(16, 19, 20, 0.7)}: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}";
 
-const PtcOverlay = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.filterColor = undefined;
-    this.borderRadius = undefined;
-    this.overlayZIndex = 'z-index-auto';
-    this.styles = undefined;
-  }
-  async setOverlay(overlayName) {
-    this.filterColor = overlayName;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return h(Host, { class: classMap });
-  }
-  getCssClassMap() {
-    return {
-      [this.filterColor]: !!this.filterColor ? true : false,
-      [this.borderRadius]: !!this.borderRadius ? true : false,
-      [this.overlayZIndex]: true,
-    };
-  }
-};
+const PtcOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filterColor = undefined;
+    this.borderRadius = undefined;
+    this.overlayZIndex = 'z-index-auto';
+    this.styles = undefined;
+  }
+  async setOverlay(overlayName) {
+    this.filterColor = overlayName;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return h(Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.filterColor]: !!this.filterColor ? true : false,
+      [this.borderRadius]: !!this.borderRadius ? true : false,
+      [this.overlayZIndex]: true,
+    };
+  }
+};
 PtcOverlay.style = ptcOverlayCss;
 
 export { PtcOverlay as ptc_overlay };