@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

package/dist/collection/components/organism-bundles/blog-detail-content/blog-detail-content.js

@@ -1,5 +1,5 @@
-import { Host, h } from "@stencil/core";
-import { PreloaderDependency } from "../../../utils/utils";
+import { Host, h } from '@stencil/core';
+import { PreloaderDependency } from '../../../utils/utils';
 export class BlogDetailContent {
   constructor() {
     this.setActiveStocItem = (dataStocItemNumber) => {
@@ -7,23 +7,23 @@ export class BlogDetailContent {
       let stocItems = Array.from((_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll(`li[data-stoc-item="${dataStocItemNumber}"`));
       if (stocItems && stocItems.length > 0) {
         if (this.currentActiveItems.length > 0) {
-          this.currentActiveItems.forEach((currentActiveItem) => {
-            currentActiveItem.classList.remove("active");
+          this.currentActiveItems.forEach(currentActiveItem => {
+            currentActiveItem.classList.remove('active');
           });
         }
         else {
-          let currentActiveItems = (_d = (_c = this.hostEle) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll("li.active");
-          currentActiveItems.forEach((currentActiveItem) => {
-            currentActiveItem.classList.remove("active");
+          let currentActiveItems = (_d = (_c = this.hostEle) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll('li.active');
+          currentActiveItems.forEach(currentActiveItem => {
+            currentActiveItem.classList.remove('active');
           });
         }
         stocItems.forEach((stocItem) => {
-          stocItem.classList.add("active");
+          stocItem.classList.add('active');
         });
         this.currentActiveItems = [...stocItems];
       }
     };
-    this.createItemSection = (ele, section, nextUntilSelector = "h2") => {
+    this.createItemSection = (ele, section, nextUntilSelector = 'h2') => {
       let siblings = [];
       ele = ele.nextElementSibling;
       while (ele) {
@@ -32,7 +32,7 @@ export class BlogDetailContent {
         siblings.push(ele);
         ele = ele.nextElementSibling;
       }
-      siblings.forEach((sibling) => section.insertAdjacentElement("beforeend", sibling));
+      siblings.forEach(sibling => section.insertAdjacentElement('beforeend', sibling));
     };
     this.contentIobCallback = (stocNumber, payload) => {
       if (!this.stocTriggeredScroll) {
@@ -49,14 +49,14 @@ export class BlogDetailContent {
       let contentContainer = this.hostEle;
       if (contentContainer) {
         this.tableOfContents = [];
-        const tableItems = contentContainer.querySelectorAll("h2");
+        const tableItems = contentContainer.querySelectorAll('h2');
         tableItems.forEach((item, idx) => {
-          let section = document.createElement("section");
-          section.classList.add("stoc-content-section");
+          let section = document.createElement('section');
+          section.classList.add('stoc-content-section');
           this.createItemSection(item, section);
-          item.insertAdjacentElement("afterend", section);
-          section.insertAdjacentElement("afterbegin", item);
-          let iob = new IntersectionObserver((e) => this.contentIobCallback(idx, e));
+          item.insertAdjacentElement('afterend', section);
+          section.insertAdjacentElement('afterbegin', item);
+          let iob = new IntersectionObserver(e => this.contentIobCallback(idx, e));
           iob.observe(section);
           this.tableOfContents.push({
             itemTitle: item.innerText,
@@ -68,71 +68,63 @@ export class BlogDetailContent {
     this.captureBigInlineCtas = () => {
       const contentContainer = this.hostEle;
       if (contentContainer) {
-        const bigInlineCtas = contentContainer.querySelectorAll("ptc-inline-cta");
+        const bigInlineCtas = contentContainer.querySelectorAll('ptc-inline-cta');
         bigInlineCtas.forEach((cta) => {
-          cta.setAttribute("container-selector", "blog-detail-content");
-          cta.setAttribute("container-is-shadow", "false");
+          cta.setAttribute('container-selector', 'blog-detail-content');
+          cta.setAttribute('container-is-shadow', 'false');
         });
       }
     };
     this.setDesktopTOCHeight = () => {
       var _a, _b, _c, _d, _e, _f;
-      const stocListItems = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll("li.stoc-list-item");
-      const listContainer = (_d = (_c = this.hostEle) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector(".stoc-desktop-list-container");
-      const scrollGradient = (_f = (_e = this.hostEle) === null || _e === void 0 ? void 0 : _e.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector("#stoc-desktop-scroll-gradient");
+      const stocListItems = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('li.stoc-list-item');
+      const listContainer = (_d = (_c = this.hostEle) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.stoc-desktop-list-container');
+      const scrollGradient = (_f = (_e = this.hostEle) === null || _e === void 0 ? void 0 : _e.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('#stoc-desktop-scroll-gradient');
       if (this.tableOfContents.length > this.desktopTocScrollMin) {
         if (stocListItems.length > this.desktopTocScrollMin) {
           let listContainerHeight = 0;
           for (let i = 0; i < this.desktopTocScrollMin; i++) {
             let computedStyle = window.getComputedStyle(stocListItems[i]);
-            listContainerHeight +=
-              parseFloat(computedStyle.height) +
-                parseFloat(computedStyle.marginBottom);
+            listContainerHeight += parseFloat(computedStyle.height) + parseFloat(computedStyle.marginBottom);
           }
-          listContainer.classList.add("scroll");
+          listContainer.classList.add('scroll');
           listContainer.style.height = `${listContainerHeight}px`;
           scrollGradient.style.top = `${listContainerHeight - 160}px`;
         }
       }
       else {
-        scrollGradient.style.display = "none";
+        scrollGradient.style.display = 'none';
       }
     };
     this.toggleStocScrollGradient = (container) => {
       var _a, _b;
       if (container) {
-        const stocDesktopScrollGradient = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("#stoc-desktop-scroll-gradient");
-        if (container.scrollHeight -
-          container.scrollTop -
-          container.clientHeight <
-          1) {
-          stocDesktopScrollGradient.style.background = "transparent";
+        const stocDesktopScrollGradient = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#stoc-desktop-scroll-gradient');
+        if (container.scrollHeight - container.scrollTop - container.clientHeight < 1) {
+          stocDesktopScrollGradient.style.background = 'transparent';
         }
         else {
-          stocDesktopScrollGradient.style.background =
-            "linear-gradient(180deg, rgba(243, 243, 243, 0.00) 0%, #F3F3F3 100%)";
+          stocDesktopScrollGradient.style.background = 'linear-gradient(180deg, rgba(243, 243, 243, 0.00) 0%, #F3F3F3 100%)';
         }
       }
     };
     this.handleToggleClick = () => {
-      this.mobileTocDropdownState = !this.mobileTocDropdownState;
+      this.mobileTocDropdownState = !(this.mobileTocDropdownState);
     };
     this.handleItemClick = (e, target) => {
       // TODO: Simplify this method
       let item = e.target;
       let dataStocItemNumber;
-      if (item.nodeName === "A") {
-        dataStocItemNumber = Number(item.getAttribute("data-stoc-item"));
+      if (item.nodeName === 'A') {
+        dataStocItemNumber = Number(item.getAttribute('data-stoc-item'));
         this.setActiveStocItem(dataStocItemNumber);
       }
       if (target) {
-        const y = target.getBoundingClientRect().top +
-          window.scrollY -
-          this.scrollIntoViewOffset;
+        const y = target.getBoundingClientRect().top + window.scrollY - this.scrollIntoViewOffset;
         this.stocTriggeredScroll = true;
         window.scrollTo({
           top: y,
-          behavior: "smooth",
+          behavior: 'smooth'
         });
         this.contentInViewport.clear();
         this.contentInViewport.add(dataStocItemNumber);
@@ -148,7 +140,7 @@ export class BlogDetailContent {
       console.log("Text:", window.getSelection().toString());
     };
     this.connectedCallback = () => {
-      const preloader = document.querySelector("ptc-preloader-section");
+      const preloader = document.querySelector('ptc-preloader-section');
       if (preloader) {
         this.preloaderDependency = new PreloaderDependency(preloader);
       }
@@ -163,16 +155,16 @@ export class BlogDetailContent {
     this.componentWillRender = () => {
       var _a, _b;
       this.setDesktopTOCHeight();
-      const stocDesktopListContainer = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".stoc-desktop-list-container");
+      const stocDesktopListContainer = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.stoc-desktop-list-container');
       if (stocDesktopListContainer) {
-        stocDesktopListContainer.addEventListener("scroll", () => this.toggleStocScrollGradient(stocDesktopListContainer));
+        stocDesktopListContainer.addEventListener('scroll', () => this.toggleStocScrollGradient(stocDesktopListContainer));
       }
     };
     this.disconnectedCallback = () => {
       var _a, _b;
-      const stocDesktopListContainer = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".stoc-desktop-list-container");
+      const stocDesktopListContainer = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.stoc-desktop-list-container');
       if (stocDesktopListContainer) {
-        stocDesktopListContainer.removeEventListener("scroll", () => this.toggleStocScrollGradient(stocDesktopListContainer));
+        stocDesktopListContainer.removeEventListener('scroll', () => this.toggleStocScrollGradient(stocDesktopListContainer));
       }
     };
     this.scrollIntoViewOffset = 85;
@@ -186,20 +178,19 @@ export class BlogDetailContent {
   }
   render() {
     const DesktopTOC = () => {
-      return (h("div", { class: "stoc desktop" }, h("div", { class: "stoc-desktop-sticky" }, h("div", { class: "stoc-desktop-list-container" }, h("ul", { class: "stoc-desktop-list" }, this.tableOfContents &&
-        this.tableOfContents.map((item, idx) => {
-          return (h("li", { class: `stoc-list-item ${idx === 0 ? "active" : ""}`, onClick: (e) => this.handleItemClick(e, item.itemRef), "data-stoc-item": idx }, h("a", { "data-stoc-item": idx, tabindex: "0", onKeyPress: (e) => this.handleItemClick(e, item.itemRef) }, item.itemTitle.length <= 70
-            ? item.itemTitle
-            : `${item.itemTitle.substring(0, 70)}...`)));
-        }))), h("div", { id: "stoc-desktop-scroll-gradient" }), h("div", { id: "stoc-desktop-social-share" }, h("ptc-para", { "font-size": "small", "font-weight": "w-7", "para-color": "primary-grey", "para-line-h": "line-height-densest", "para-margin": "margin-top-6" }, "Share"), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("ptc-social-icons", { "facebook-url": "https://www.facebook.com/", "linkedin-url": "https://www.linkedin.com/", "x-url": "https://x.com/", "email-to": "rsuresh@ptc.com" })))));
+      return h("div", { class: "stoc desktop" }, h("div", { class: "stoc-desktop-sticky" }, h("div", { class: "stoc-desktop-list-container" }, h("ul", { class: "stoc-desktop-list" }, this.tableOfContents && this.tableOfContents.map((item, idx) => {
+        return h("li", { class: `stoc-list-item ${(idx === 0) ? "active" : ""}`, onClick: (e) => this.handleItemClick(e, item.itemRef), "data-stoc-item": idx }, h("a", { "data-stoc-item": idx, tabindex: "0", onKeyPress: (e) => this.handleItemClick(e, item.itemRef) }, (item.itemTitle.length <= 70) ?
+          item.itemTitle :
+          `${item.itemTitle.substring(0, 70)}...`));
+      }))), h("div", { id: "stoc-desktop-scroll-gradient" }), h("div", { id: "stoc-desktop-social-share" }, h("ptc-para", { "font-size": "small", "font-weight": "w-7", "para-color": "primary-grey", "para-line-h": "line-height-densest", "para-margin": "margin-top-6" }, "Share"), h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-social-icons", { "facebook-url": "https://www.facebook.com/", "linkedin-url": "https://www.linkedin.com/", "x-url": "https://x.com/", "email-to": "rsuresh@ptc.com" }))));
     };
     const MobileTOC = () => {
       var _a;
-      return (h("div", { class: "stoc mobile" }, h("div", { class: `stoc-mobile-list-container ${this.mobileTocDropdownState ? "open" : "closed"}` }, h("button", { class: "dropdown-toggle", onClick: this.handleToggleClick }, h("ptc-para", { "ellipsis-line-cutoff": "1", "font-size": "small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, ((_a = this.currentActiveItems[0]) === null || _a === void 0 ? void 0 : _a.innerText) ||
-        this.tableOfContents[0].itemTitle), this.mobileTocDropdownState ? (h("icon-asset", { type: "solid", size: "xxx-small", name: "chevron-up", color: "ptc-green" })) : (h("icon-asset", { type: "solid", size: "xxx-small", name: "chevron-down", color: "ptc-green" }))), h("ul", { class: "stoc-mobile-list" }, this.tableOfContents &&
-        this.tableOfContents.map((item, idx) => {
-          return (h("li", { class: `stoc-list-item ${idx === 0 ? "active" : ""}`, onClick: (e) => this.handleItemClick(e, item.itemRef), "data-stoc-item": idx }, h("a", { "data-stoc-item": idx }, item.itemTitle)));
-        })))));
+      return h("div", { class: "stoc mobile" }, h("div", { class: `stoc-mobile-list-container ${this.mobileTocDropdownState ? "open" : "closed"}` }, h("button", { class: "dropdown-toggle", onClick: this.handleToggleClick }, h("ptc-para", { "ellipsis-line-cutoff": "1", "font-size": "small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, ((_a = this.currentActiveItems[0]) === null || _a === void 0 ? void 0 : _a.innerText) || this.tableOfContents[0].itemTitle), this.mobileTocDropdownState ?
+        h("icon-asset", { type: "solid", size: "xxx-small", name: "chevron-up", color: "ptc-green" }) :
+        h("icon-asset", { type: "solid", size: "xxx-small", name: "chevron-down", color: "ptc-green" })), h("ul", { class: "stoc-mobile-list" }, this.tableOfContents && this.tableOfContents.map((item, idx) => {
+        return h("li", { class: `stoc-list-item ${(idx === 0) ? "active" : ""}`, onClick: (e) => this.handleItemClick(e, item.itemRef), "data-stoc-item": idx }, h("a", { "data-stoc-item": idx }, item.itemTitle));
+      }))));
     };
     return (h(Host, null, h("div", { class: "is-grid has-col-12" }, h("div", { class: "is-col-12 is-col-4-lg is-col-3-xl" }, h(DesktopTOC, null)), h("div", { class: "is-col-12 is-col-7-lg is-col-7-xl" }, h(MobileTOC, null), h("div", { id: "blog-detail-content", onMouseUp: this.handleHighlight }, h("slot", null))), h("div", { class: "is-desktop is-col-1-lg is-col-2-xl" }))));
   }

package/dist/collection/components/organism-bundles/blog-detail-layout/blog-detail-layout.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/organism-bundles/blog-detail-layout/blog-detail-layout.js

@@ -1,34 +1,34 @@
-import { Host, h } from "@stencil/core";
-import { PreloaderDependency } from "../../../utils/utils";
+import { Host, h } from '@stencil/core';
+import { PreloaderDependency } from '../../../utils/utils';
 export class BlogDetailLayout {
   constructor() {
     this.toggleStickyBarView = () => {
       var _a;
-      const jumbotron = document.querySelector("ptc-jumbotron");
-      const blogHeaderStickyBar = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.querySelector("div#blog-header-sticky-bar");
+      const jumbotron = document.querySelector('ptc-jumbotron');
+      const blogHeaderStickyBar = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.querySelector('div#blog-header-sticky-bar');
       if (jumbotron && blogHeaderStickyBar) {
         let jumbotronBottom = jumbotron.getBoundingClientRect().bottom;
         if (jumbotronBottom === 0) {
-          blogHeaderStickyBar.style.opacity = "1";
-          blogHeaderStickyBar.style.zIndex = "2";
+          blogHeaderStickyBar.style.opacity = '1';
+          blogHeaderStickyBar.style.zIndex = '2';
         }
         else if (jumbotronBottom < 0) {
           if (jumbotronBottom >= -10) {
             blogHeaderStickyBar.style.opacity = `${-(jumbotronBottom / 10)}`;
           }
           else {
-            blogHeaderStickyBar.style.opacity = "1";
-            blogHeaderStickyBar.style.zIndex = "2";
+            blogHeaderStickyBar.style.opacity = '1';
+            blogHeaderStickyBar.style.zIndex = '2';
           }
         }
         else {
-          blogHeaderStickyBar.style.opacity = "0";
-          blogHeaderStickyBar.style.zIndex = "0";
+          blogHeaderStickyBar.style.opacity = '0';
+          blogHeaderStickyBar.style.zIndex = '0';
         }
       }
     };
     this.connectedCallback = () => {
-      const preloader = document.querySelector("ptc-preloader-section");
+      const preloader = document.querySelector('ptc-preloader-section');
       if (preloader) {
         this.preloaderDependency = new PreloaderDependency(preloader);
       }
@@ -37,12 +37,12 @@ export class BlogDetailLayout {
       }, 5000);
     };
     this.componentWillLoad = () => {
-      window.addEventListener("scroll", () => {
+      window.addEventListener('scroll', () => {
         this.toggleStickyBarView();
       });
     };
     this.disconnectedCallback = () => {
-      window.removeEventListener("scroll", () => {
+      window.removeEventListener('scroll', () => {
         this.toggleStickyBarView();
       });
     };
@@ -50,7 +50,7 @@ export class BlogDetailLayout {
   }
   render() {
     const StickyHeader = () => {
-      return (h("div", { id: "blog-header-sticky-bar-container" }, h("div", { id: "blog-header-sticky-bar" }, h("div", { class: "ptc-container" }, h("ptc-para", { "font-size": "small", "font-weight": "w-8", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush" }, h("ptc-readmore-v2", { "max-characters": "50", "read-less-text": "", "read-more-text": "" }, "The Key to Using AI to Enhance IoT Security")), h("div", { class: "button-container" }, h("ptc-button", { type: "link", color: "ptc-quaternary", "link-href": "https://www.ptc.com", target: "_blank", "tab-nav": "-1" }, "Request Free Trial"), h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": "https://www.ptc.com", target: "_blank", "tab-nav": "-1", styles: "\r\n\t\t\t\t\t\t\t\t\t.ptc-tertiary { \r\n\t\t\t\t\t\t\t\t\t\tborder: 2px solid var(--color-gray-08); \r\n\t\t\t\t\t\t\t\t\t\tmargin-left: var(--ptc-element-spacing-06);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t" }, "Speaking of Service Podcast"))))));
+      return h("div", { id: "blog-header-sticky-bar-container" }, h("div", { id: "blog-header-sticky-bar" }, h("div", { class: "ptc-container" }, h("ptc-para", { "font-size": "small", "font-weight": "w-8", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush" }, h("ptc-readmore-v2", { "max-characters": "50", "read-less-text": "", "read-more-text": "" }, "The Key to Using AI to Enhance IoT Security")), h("div", { class: "button-container" }, h("ptc-button", { type: "link", color: "ptc-quaternary", "link-href": "https://www.ptc.com", target: "_blank", "tab-nav": "-1" }, "Request Free Trial"), h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": "https://www.ptc.com", target: "_blank", "tab-nav": "-1", styles: "\r\n\t\t\t\t\t\t\t\t\t.ptc-tertiary { \r\n\t\t\t\t\t\t\t\t\t\tborder: 2px solid var(--color-gray-08); \r\n\t\t\t\t\t\t\t\t\t\tmargin-left: var(--ptc-element-spacing-06);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t" }, "Speaking of Service Podcast")))));
     };
     return (h(Host, null, h("div", { style: { position: "relative" }, class: "ptc-section" }, h(StickyHeader, null), h("div", { class: "ptc-container" }, h("blog-detail-content", null, h("div", null, h("slot", { name: "content" })))))));
   }

package/dist/collection/components/organism-bundles/blogs-search-section/blogs-search-section.css

@@ -11,10 +11,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -33,10 +31,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/organism-bundles/blogs-search-section/blogs-search-section.js

@@ -1,5 +1,5 @@
-import { Host, h, Fragment, } from "@stencil/core";
-import { PreloaderDependency } from "../../../utils/utils";
+import { Host, h, Fragment } from '@stencil/core';
+import { PreloaderDependency } from '../../../utils/utils';
 var FilterTagTypes;
 (function (FilterTagTypes) {
   FilterTagTypes["SEARCH"] = "search";
@@ -10,24 +10,21 @@ export class BlogsSearchSection {
     this.getCardsPerPage = () => {
       let innerWidth = window.innerWidth;
       switch (true) {
-        case 0 <= innerWidth && innerWidth < 480:
-          return 5;
-        case 480 <= innerWidth && innerWidth < 992:
-          return 10;
-        default:
-          return 15;
+        case (0 <= innerWidth && innerWidth < 480): return 5;
+        case (480 <= innerWidth && innerWidth < 992): return 10;
+        default: return 15;
       }
     };
     this.showPreload = (state) => {
       var _a;
-      const preload = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ptc-preloader-section");
+      const preload = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ptc-preloader-section');
       if (preload) {
         preload.showPreload(state);
       }
     };
     this.removeFilterTag = (tagValue) => {
       let filters = this.filters;
-      filters = filters.filter((value) => value !== tagValue);
+      filters = filters.filter(value => value !== tagValue);
       this.filters = [...filters];
     };
     this._runSearch = (search = "", filter = "", remove = false) => {
@@ -48,7 +45,7 @@ export class BlogsSearchSection {
     };
     this.handleRemoveSearchTag = () => {
       this.search = "";
-      const blogsSearchFields = this.el.querySelectorAll(".blogs-search-field");
+      const blogsSearchFields = this.el.querySelectorAll('.blogs-search-field');
       blogsSearchFields === null || blogsSearchFields === void 0 ? void 0 : blogsSearchFields.forEach((search) => {
         search.clearSearchValue();
       });
@@ -65,19 +62,18 @@ export class BlogsSearchSection {
     };
     this.connectedCallback = () => {
       var _a;
-      const blogsSearchFields = this.el.querySelectorAll(".blogs-search-field");
-      const desktopFilters = (_a = this.el
-        .querySelector("#desktop-filters")) === null || _a === void 0 ? void 0 : _a.querySelector("ptc-container");
-      const desktopFiltersCheckboxes = desktopFilters === null || desktopFilters === void 0 ? void 0 : desktopFilters.querySelectorAll("ptc-checkbox");
-      const desktopFiltersModalClearBtn = desktopFilters === null || desktopFilters === void 0 ? void 0 : desktopFilters.querySelector("ptc-filter-tag");
-      const mobileFiltersModalCta = document.querySelector(".mobile-filters-modal-cta");
-      const mobileFiltersModal = this.el.querySelector("#mobile-filters");
-      const mobileFiltersCheckboxes = mobileFiltersModal === null || mobileFiltersModal === void 0 ? void 0 : mobileFiltersModal.querySelectorAll("ptc-checkbox");
-      const mobileFiltersModalClearBtn = mobileFiltersModal === null || mobileFiltersModal === void 0 ? void 0 : mobileFiltersModal.querySelector(".modal-clear-btn");
-      const mobileFiltersModalApplyBtn = mobileFiltersModal === null || mobileFiltersModal === void 0 ? void 0 : mobileFiltersModal.querySelector(".modal-apply-btn");
+      const blogsSearchFields = this.el.querySelectorAll('.blogs-search-field');
+      const desktopFilters = (_a = this.el.querySelector('#desktop-filters')) === null || _a === void 0 ? void 0 : _a.querySelector('ptc-container');
+      const desktopFiltersCheckboxes = desktopFilters === null || desktopFilters === void 0 ? void 0 : desktopFilters.querySelectorAll('ptc-checkbox');
+      const desktopFiltersModalClearBtn = desktopFilters === null || desktopFilters === void 0 ? void 0 : desktopFilters.querySelector('ptc-filter-tag');
+      const mobileFiltersModalCta = document.querySelector('.mobile-filters-modal-cta');
+      const mobileFiltersModal = this.el.querySelector('#mobile-filters');
+      const mobileFiltersCheckboxes = mobileFiltersModal === null || mobileFiltersModal === void 0 ? void 0 : mobileFiltersModal.querySelectorAll('ptc-checkbox');
+      const mobileFiltersModalClearBtn = mobileFiltersModal === null || mobileFiltersModal === void 0 ? void 0 : mobileFiltersModal.querySelector('.modal-clear-btn');
+      const mobileFiltersModalApplyBtn = mobileFiltersModal === null || mobileFiltersModal === void 0 ? void 0 : mobileFiltersModal.querySelector('.modal-apply-btn');
       if (blogsSearchFields.length > 0) {
         blogsSearchFields.forEach((search) => {
-          search.addEventListener("clicked", (event) => {
+          search.addEventListener('clicked', (event) => {
             // search.clearSearchValue();
             let searchText = event.detail.searchTerm;
             if (searchText) {
@@ -90,8 +86,8 @@ export class BlogsSearchSection {
         });
       }
       if (desktopFiltersCheckboxes) {
-        desktopFiltersCheckboxes.forEach((checkbox) => {
-          checkbox.addEventListener("checkedChanged", (sender) => {
+        desktopFiltersCheckboxes.forEach(checkbox => {
+          checkbox.addEventListener('checkedChanged', (sender) => {
             let checked = sender.detail.checked;
             let value = sender.detail.value;
             if (checked === "checked") {
@@ -103,9 +99,9 @@ export class BlogsSearchSection {
           });
         });
       }
-      desktopFiltersModalClearBtn.addEventListener("clicked", () => {
-        desktopFiltersCheckboxes.forEach((checkbox) => {
-          checkbox.setAttribute("checked", "unchecked");
+      desktopFiltersModalClearBtn.addEventListener('clicked', () => {
+        desktopFiltersCheckboxes.forEach(checkbox => {
+          checkbox.setAttribute('checked', 'unchecked');
           let value = checkbox.value;
           this.removeFilterTag(value);
         });
@@ -113,17 +109,15 @@ export class BlogsSearchSection {
         // this.isLoading = true;
         this.getResults();
       });
-      mobileFiltersModalCta.addEventListener("clicked", () => {
-        mobileFiltersModal.setAttribute("show", "true");
+      mobileFiltersModalCta.addEventListener('clicked', () => {
+        mobileFiltersModal.setAttribute('show', 'true');
       });
-      mobileFiltersModal.addEventListener("opened", () => {
-        mobileFiltersModal
-          .querySelectorAll("ptc-icon-minimize")
-          .forEach((pim) => {
+      mobileFiltersModal.addEventListener('opened', () => {
+        mobileFiltersModal.querySelectorAll('ptc-icon-minimize').forEach(pim => {
           pim.Refresh();
         });
-        mobileFiltersCheckboxes.forEach((checkbox) => {
-          checkbox.addEventListener("checkedChanged", (sender) => {
+        mobileFiltersCheckboxes.forEach(checkbox => {
+          checkbox.addEventListener('checkedChanged', (sender) => {
             let checked = sender.detail.checked;
             let value = sender.detail.value;
             if (checked === "checked") {
@@ -135,16 +129,16 @@ export class BlogsSearchSection {
           });
         });
       });
-      mobileFiltersModalClearBtn.addEventListener("click", () => {
-        let mobileFiltersCheckboxes = mobileFiltersModal.querySelectorAll("ptc-checkbox");
-        mobileFiltersCheckboxes.forEach((checkbox) => {
-          checkbox.setAttribute("checked", "unchecked");
+      mobileFiltersModalClearBtn.addEventListener('click', () => {
+        let mobileFiltersCheckboxes = mobileFiltersModal.querySelectorAll('ptc-checkbox');
+        mobileFiltersCheckboxes.forEach(checkbox => {
+          checkbox.setAttribute('checked', 'unchecked');
           let value = checkbox.value;
           this.removeFilterTag(value);
         });
       });
-      mobileFiltersModalApplyBtn.addEventListener("click", () => {
-        mobileFiltersModal.setAttribute("show", "false");
+      mobileFiltersModalApplyBtn.addEventListener('click', () => {
+        mobileFiltersModal.setAttribute('show', 'false');
         this.showPreload(true);
         // this.isLoading = true;
         this.getResults();
@@ -156,14 +150,16 @@ export class BlogsSearchSection {
     };
     this.componentDidLoad = () => {
       this.getResults();
-      const preloader = this.el.shadowRoot.querySelector("ptc-preloader-section");
+      const preloader = this.el.shadowRoot.querySelector('ptc-preloader-section');
       if (preloader) {
         this.preloaderDependency = new PreloaderDependency(preloader);
       }
     };
     this.noResultH3 = "No Results Found";
-    this.noResultP = "Try changing or removing some of your filters";
-    this.noResultButton = "Clear Filters";
+    this.noResultP = "Try changing or removing some of your filters" //@("Try changing or removing some of your filters".GetSitecoreLocalizedStringOrDefault())
+    ;
+    this.noResultButton = "Clear Filters" //@("Clear Filters".GetSitecoreLocalizedStringOrDefault())
+    ;
     this.preloaderDependency = undefined;
     this.isLoading = false;
     this.data = [];
@@ -178,27 +174,23 @@ export class BlogsSearchSection {
     setTimeout(() => {
       this.preloaderDependency.resolve();
       // this.isLoading = false;
-      this.data = [
-        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
-        19, 20,
-      ];
+      this.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
     }, 5000);
   }
   render() {
     const NoResultSection = () => {
-      return (h("div", { class: "no-result-section" }, h("ptc-title", { "seo-compatibility-mode": true, "text-align": "center", upperline: "no-upperline", "title-margin": "margin-flush", "title-height": "densest", "title-size": "large", "title-weight": "w-7" }, h("h3", null, this.noResultH3)), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("ptc-para", { "seo-compatibility-mode": true, "para-align": "center", "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-line-h": "line-height-p" }, h("p", null, this.noResultP)), h("div", { class: "clear-button-container" }, h("ptc-button", { type: "button", class: "clear-btn", color: "ptc-quaternary", "title-weight": "w-7" }, this.noResultButton))));
+      return h("div", { class: "no-result-section" }, h("ptc-title", { "seo-compatibility-mode": true, "text-align": 'center', upperline: "no-upperline", "title-margin": "margin-flush", "title-height": "densest", "title-size": "large", "title-weight": "w-7" }, h("h3", null, this.noResultH3)), h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-para", { "seo-compatibility-mode": true, "para-align": "center", "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-line-h": "line-height-p" }, h("p", null, this.noResultP)), h("div", { class: "clear-button-container" }, h("ptc-button", { type: "button", class: "clear-btn", color: "ptc-quaternary", "title-weight": "w-7" }, this.noResultButton)));
     };
     const ResultSection = () => {
-      return (h("div", { class: "result-section" }, h("div", { class: "is-grid has-col-gap-lg has-row-gap-lg" }, this.data.map((_) => {
-        return (h("div", { class: "is-col-12 is-col-6-md is-col-4-xl" }, h("ptc-card", { "card-href": "http://www.google.com", "card-type": "case-studies-card", "has-image": "true", heading: "2022 SoCal RUG Event", "heading-transform": "none", target: "_blank" }, h("ptc-img", { slot: "slot-image", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway", "image-type": "smart-img", "load-mode": "lazy-bg" }), h("div", { slot: "slot-description" }, h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-line-h": "line-height-19" }, "Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality.")))));
-      }))));
+      return h("div", { class: "result-section" }, h("div", { class: "is-grid has-col-gap-lg has-row-gap-lg" }, this.data.map(_ => {
+        return h("div", { class: "is-col-12 is-col-6-md is-col-4-xl" }, h("ptc-card", { "card-href": "http://www.google.com", "card-type": "case-studies-card", "has-image": "true", heading: "2022 SoCal RUG Event", "heading-transform": "none", target: "_blank" }, h("ptc-img", { slot: "slot-image", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway", "image-type": "smart-img", "load-mode": "lazy-bg" }), h("div", { slot: "slot-description" }, h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-line-h": "line-height-19" }, "Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality."))));
+      })));
     };
-    return (h(Host, null, h("div", { class: "blogs-serach-section" }, h("slot", { name: "mobile-search-and-filter" }), h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-4-lg is-col-3-xl" }, h("slot", { name: "blogs-desktop-filters" })), h("div", { class: "is-col-12 is-col-8-lg is-col-9-xl" }, h("ptc-preloader-section", { id: "preload", "auto-show": "false", "section-type": "blogs-listing", "number-of-cards": "9" }, h("div", null, h("div", { class: `search-results-and-tags ${this.search || this.filters.length > 0 ? "show" : ""}` }, h("div", null, h("div", { class: "results-label" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main" }, this.data.length, " Results")), h("div", { class: "results-divider is-desktop" }), h("div", { class: "filter-list is-desktop" }, this.search && (h("ptc-filter-tag", { theme: "bubble", onClicked: this
-        .handleRemoveSearchTag, "data-type": FilterTagTypes.FILTER, "data-value": this.search }, `Search: "${this.search}"`)), this.filters.map((filter) => {
-      return (h("ptc-filter-tag", { theme: "bubble", onClicked: this
-          .handleRemoveFilterTag, "data-type": FilterTagTypes.SEARCH, "data-value": filter }, filter));
-    })))), this.data && this.data.length > 0 ? (h(Fragment, null, h(ResultSection, null), this.data.length >
-      this.getCardsPerPage() ? (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("ptc-pagenation", { "clicked-page-number": "1", "last-value": "Next", "next-arrow-img": "//www.ptc.com/dist/ptc/images/sidescroll-left-curved.svg", "number-of-items": this.getCardsPerPage(), "prev-arrow-img": "//www.ptc.com/dist/ptc/images/sidescroll-right-curved.svg", "previous-value": "Previous", theme: "standard", "total-count": this.data.length }))) : null)) : (h(NoResultSection, null)))))), h("slot", { name: "blogs-mobile-filters" }))));
+    return (h(Host, null, h("div", { class: "blogs-serach-section" }, h("slot", { name: "mobile-search-and-filter" }), h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-4-lg is-col-3-xl" }, h("slot", { name: "blogs-desktop-filters" })), h("div", { class: "is-col-12 is-col-8-lg is-col-9-xl" }, h("ptc-preloader-section", { id: "preload", "auto-show": "false", "section-type": "blogs-listing", "number-of-cards": "9" }, h("div", null, h("div", { class: `search-results-and-tags ${this.search || this.filters.length > 0 ? "show" : ""}` }, h("div", null, h("div", { class: "results-label" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main" }, this.data.length, " Results")), h("div", { class: "results-divider is-desktop" }), h("div", { class: "filter-list is-desktop" }, this.search && h("ptc-filter-tag", { theme: "bubble", onClicked: this.handleRemoveSearchTag, "data-type": FilterTagTypes.FILTER, "data-value": this.search }, `Search: "${this.search}"`), this.filters.map((filter) => {
+      return h("ptc-filter-tag", { theme: "bubble", onClicked: this.handleRemoveFilterTag, "data-type": FilterTagTypes.SEARCH, "data-value": filter }, filter);
+    })))), (this.data && this.data.length > 0) ?
+      h(Fragment, null, h(ResultSection, null), (this.data.length > this.getCardsPerPage()) ?
+        h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("ptc-pagenation", { "clicked-page-number": "1", "last-value": "Next", "next-arrow-img": "//www.ptc.com/dist/ptc/images/sidescroll-left-curved.svg", "number-of-items": this.getCardsPerPage(), "prev-arrow-img": "//www.ptc.com/dist/ptc/images/sidescroll-right-curved.svg", "previous-value": "Previous", theme: "standard", "total-count": this.data.length })) : null) : h(NoResultSection, null))))), h("slot", { name: "blogs-mobile-filters" }))));
   }
   static get is() { return "blogs-search-section"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/organism-bundles/bundle-example/bundle-example.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class BundleExample {
   constructor() {
     this.isLoading = true;
@@ -30,12 +30,11 @@ export class BundleExample {
     return (h(Host, null, h("div", { class: "is-grid has-col-2 has-col-2-sm has-col-3-md has-col-4-lg has-col-5-xl has-col-gap-md has-row-gap-md" }, h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), h("div", { class: "is-col-1" }, h("ptc-card-wrapper", { "card-type": "card-video", class: "is-col-4", "card-link": "https://www.ptc.com", "link-title": "ptc", "is-loading": this.isLoading }, h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), h("ptc-card-bottom", { "card-type": "card-video" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-19", "para-color": "white", "para-margin": "margin-top-3" }, h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))))));
   }
   updatePictureSize() {
-    const pictureComponents = this.el.shadowRoot.querySelectorAll("ptc-picture");
+    const pictureComponents = this.el.shadowRoot.querySelectorAll('ptc-picture');
     for (let i = 0; i < pictureComponents.length; i++) {
       const pictureComponent = pictureComponents[i];
       pictureComponent.isFullWidth = true;
-      pictureComponent.styles =
-        ":host{padding-bottom: 56.25%;overflow: hidden;margin:0;padding-top:56.25%;position: relative;} :host img{position:absolute;width:100%;height:100%;object-fit:cover;top:50%;left:50%;transform:translate(-50%,-50%);}";
+      pictureComponent.styles = ':host{padding-bottom: 56.25%;overflow: hidden;margin:0;padding-top:56.25%;position: relative;} :host img{position:absolute;width:100%;height:100%;object-fit:cover;top:50%;left:50%;transform:translate(-50%,-50%);}';
     }
   }
   static get is() { return "bundle-example"; }