npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.38 → 6.3.40-beta - Mend

@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1058) hide show

package/dist/cjs/blog-detail-layout.cjs.entry.js CHANGED Viewed

@@ -12,31 +12,31 @@ const BlogDetailLayout = class {
     index.registerInstance(this, hostRef);
     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 utils.PreloaderDependency(preloader);
       }
@@ -45,12 +45,12 @@ const BlogDetailLayout = class {
       }, 5000);
     };
     this.componentWillLoad = () => {
-      window.addEventListener("scroll", () => {
+      window.addEventListener('scroll', () => {
         this.toggleStickyBarView();
       });
     };
     this.disconnectedCallback = () => {
-      window.removeEventListener("scroll", () => {
+      window.removeEventListener('scroll', () => {
         this.toggleStickyBarView();
       });
     };
@@ -58,7 +58,7 @@ const BlogDetailLayout = class {
   }
   render() {
     const StickyHeader = () => {
-      return (index.h("div", { id: "blog-header-sticky-bar-container" }, index.h("div", { id: "blog-header-sticky-bar" }, index.h("div", { class: "ptc-container" }, index.h("ptc-para", { "font-size": "small", "font-weight": "w-8", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush" }, index.h("ptc-readmore-v2", { "max-characters": "50", "read-less-text": "", "read-more-text": "" }, "The Key to Using AI to Enhance IoT Security")), index.h("div", { class: "button-container" }, index.h("ptc-button", { type: "link", color: "ptc-quaternary", "link-href": "https://www.ptc.com", target: "_blank", "tab-nav": "-1" }, "Request Free Trial"), index.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 index.h("div", { id: "blog-header-sticky-bar-container" }, index.h("div", { id: "blog-header-sticky-bar" }, index.h("div", { class: "ptc-container" }, index.h("ptc-para", { "font-size": "small", "font-weight": "w-8", "para-color": "white", "para-line-h": "line-height-densest", "para-margin": "margin-flush" }, index.h("ptc-readmore-v2", { "max-characters": "50", "read-less-text": "", "read-more-text": "" }, "The Key to Using AI to Enhance IoT Security")), index.h("div", { class: "button-container" }, index.h("ptc-button", { type: "link", color: "ptc-quaternary", "link-href": "https://www.ptc.com", target: "_blank", "tab-nav": "-1" }, "Request Free Trial"), index.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 (index.h(index.Host, null, index.h("div", { style: { position: "relative" }, class: "ptc-section" }, index.h(StickyHeader, null), index.h("div", { class: "ptc-container" }, index.h("blog-detail-content", null, index.h("div", null, index.h("slot", { name: "content" })))))));
   }

package/dist/cjs/blogs-search-section.cjs.entry.js CHANGED Viewed

@@ -18,24 +18,21 @@ const BlogsSearchSection = class {
     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) => {
@@ -56,7 +53,7 @@ const BlogsSearchSection = class {
     };
     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();
       });
@@ -73,19 +70,18 @@ const BlogsSearchSection = class {
     };
     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) {
@@ -98,8 +94,8 @@ const BlogsSearchSection = class {
         });
       }
       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") {
@@ -111,9 +107,9 @@ const BlogsSearchSection = class {
           });
         });
       }
-      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);
         });
@@ -121,17 +117,15 @@ const BlogsSearchSection = class {
         // 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") {
@@ -143,16 +137,16 @@ const BlogsSearchSection = class {
           });
         });
       });
-      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();
@@ -164,14 +158,16 @@ const BlogsSearchSection = class {
     };
     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 utils.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 = [];
@@ -186,27 +182,23 @@ const BlogsSearchSection = class {
     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 (index.h("div", { class: "no-result-section" }, index.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" }, index.h("h3", null, this.noResultH3)), index.h("ptc-spacer", { breakpoint: "x-small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "x-small" }), index.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" }, index.h("p", null, this.noResultP)), index.h("div", { class: "clear-button-container" }, index.h("ptc-button", { type: "button", class: "clear-btn", color: "ptc-quaternary", "title-weight": "w-7" }, this.noResultButton))));
+      return index.h("div", { class: "no-result-section" }, index.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" }, index.h("h3", null, this.noResultH3)), index.h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), index.h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), index.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" }, index.h("p", null, this.noResultP)), index.h("div", { class: "clear-button-container" }, index.h("ptc-button", { type: "button", class: "clear-btn", color: "ptc-quaternary", "title-weight": "w-7" }, this.noResultButton)));
     };
     const ResultSection = () => {
-      return (index.h("div", { class: "result-section" }, index.h("div", { class: "is-grid has-col-gap-lg has-row-gap-lg" }, this.data.map((_) => {
-        return (index.h("div", { class: "is-col-12 is-col-6-md is-col-4-xl" }, index.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" }, index.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" }), index.h("div", { slot: "slot-description" }, index.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 index.h("div", { class: "result-section" }, index.h("div", { class: "is-grid has-col-gap-lg has-row-gap-lg" }, this.data.map(_ => {
+        return index.h("div", { class: "is-col-12 is-col-6-md is-col-4-xl" }, index.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" }, index.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" }), index.h("div", { slot: "slot-description" }, index.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 (index.h(index.Host, null, index.h("div", { class: "blogs-serach-section" }, index.h("slot", { name: "mobile-search-and-filter" }), index.h("div", { class: "is-grid has-col-gap-lg" }, index.h("div", { class: "is-col-4-lg is-col-3-xl" }, index.h("slot", { name: "blogs-desktop-filters" })), index.h("div", { class: "is-col-12 is-col-8-lg is-col-9-xl" }, index.h("ptc-preloader-section", { id: "preload", "auto-show": "false", "section-type": "blogs-listing", "number-of-cards": "9" }, index.h("div", null, index.h("div", { class: `search-results-and-tags ${this.search || this.filters.length > 0 ? "show" : ""}` }, index.h("div", null, index.h("div", { class: "results-label" }, index.h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main" }, this.data.length, " Results")), index.h("div", { class: "results-divider is-desktop" }), index.h("div", { class: "filter-list is-desktop" }, this.search && (index.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 (index.h("ptc-filter-tag", { theme: "bubble", onClicked: this
-          .handleRemoveFilterTag, "data-type": FilterTagTypes.SEARCH, "data-value": filter }, filter));
-    })))), this.data && this.data.length > 0 ? (index.h(index.Fragment, null, index.h(ResultSection, null), this.data.length >
-      this.getCardsPerPage() ? (index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), index.h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), index.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)) : (index.h(NoResultSection, null)))))), index.h("slot", { name: "blogs-mobile-filters" }))));
+    return (index.h(index.Host, null, index.h("div", { class: "blogs-serach-section" }, index.h("slot", { name: "mobile-search-and-filter" }), index.h("div", { class: "is-grid has-col-gap-lg" }, index.h("div", { class: "is-col-4-lg is-col-3-xl" }, index.h("slot", { name: "blogs-desktop-filters" })), index.h("div", { class: "is-col-12 is-col-8-lg is-col-9-xl" }, index.h("ptc-preloader-section", { id: "preload", "auto-show": "false", "section-type": "blogs-listing", "number-of-cards": "9" }, index.h("div", null, index.h("div", { class: `search-results-and-tags ${this.search || this.filters.length > 0 ? "show" : ""}` }, index.h("div", null, index.h("div", { class: "results-label" }, index.h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main" }, this.data.length, " Results")), index.h("div", { class: "results-divider is-desktop" }), index.h("div", { class: "filter-list is-desktop" }, this.search && index.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 index.h("ptc-filter-tag", { theme: "bubble", onClicked: this.handleRemoveFilterTag, "data-type": FilterTagTypes.SEARCH, "data-value": filter }, filter);
+    })))), (this.data && this.data.length > 0) ?
+      index.h(index.Fragment, null, index.h(ResultSection, null), (this.data.length > this.getCardsPerPage()) ?
+        index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), index.h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), index.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) : index.h(NoResultSection, null))))), index.h("slot", { name: "blogs-mobile-filters" }))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/bundle-example.cjs.entry.js CHANGED Viewed

@@ -38,12 +38,11 @@ const BundleExample = class {
     return (index.h(index.Host, null, index.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" }, index.h("div", { class: "is-col-1" }, index.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 }, index.h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, index.h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), index.h("ptc-card-bottom", { "card-type": "card-video" }, index.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" }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), index.h("div", { class: "is-col-1" }, index.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 }, index.h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, index.h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), index.h("ptc-card-bottom", { "card-type": "card-video" }, index.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" }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), index.h("div", { class: "is-col-1" }, index.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 }, index.h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, index.h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), index.h("ptc-card-bottom", { "card-type": "card-video" }, index.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" }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), index.h("div", { class: "is-col-1" }, index.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 }, index.h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, index.h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), index.h("ptc-card-bottom", { "card-type": "card-video" }, index.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" }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), index.h("div", { class: "is-col-1" }, index.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 }, index.h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, index.h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), index.h("ptc-card-bottom", { "card-type": "card-video" }, index.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" }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true, width: "80%", "top-margin": "var(--ptc-element-spacing-01)" }))))), index.h("div", { class: "is-col-1" }, index.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 }, index.h("ptc-card-content", { "card-type": "card-video", "is-loading": this.isLoading }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, index.h("ptc-picture", { alt: "image-test", "border-radius": "radius-large", src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" }))), index.h("ptc-card-bottom", { "card-type": "card-video" }, index.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" }, index.h("ptc-skeleton", { "is-loading": this.isLoading, animated: true }, "3 Reasons Why Engineering and Manufacturing are Disjointed"), index.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%);}';
     }
   }
   get el() { return index.getElement(this); }

package/dist/cjs/bundle-jumbotron-example.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const bundleJumbotronExampleCss = ":host{display:block}";
 const BundleJumbotronExample = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.jumbotron = "light";
+    this.jumbotron = 'light';
     this.isIframe = false;
   }
   render() {
@@ -19,40 +19,27 @@ const BundleJumbotronExample = class {
     let $bgSrc;
     let $popupVideo;
     //replace dummy data
-    if (this.jumbotron === "light" || this.jumbotron === "dark") {
+    if (this.jumbotron === 'light' || this.jumbotron === 'dark') {
       $bgSrc =
-        "https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80";
+        'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80';
     }
-    else if (this.jumbotron === "dark-video" ||
-      this.jumbotron === "light-video") {
+    else if (this.jumbotron === 'dark-video' || this.jumbotron === 'light-video') {
       //$bgVideoSrc = "https://www.ptc.com/-/media/Videos/wind-turbine.mp4";
       // if is iframe use src from iframe
-      $bgVideoSrc =
-        "https://player.vimeo.com/video/749261406?h=5e6a60ffc5&muted=1&autoplay=1&loop=1&transparent=0&background=1&app_id=122963%22&controls=0";
+      $bgVideoSrc = 'https://player.vimeo.com/video/749261406?h=5e6a60ffc5&muted=1&autoplay=1&loop=1&transparent=0&background=1&app_id=122963%22&controls=0';
     }
-    else if (this.jumbotron === "png") {
+    else if (this.jumbotron === 'png') {
       $pngSrc =
-        "https://images.unsplash.com/photo-1676883343977-5f8ecc36856c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzgyMjcxNDU&ixlib=rb-4.0.3&q=80&w=400";
+        'https://images.unsplash.com/photo-1676883343977-5f8ecc36856c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzgyMjcxNDU&ixlib=rb-4.0.3&q=80&w=400';
     }
-    else if (this.jumbotron === "gif") {
-      $gifSrc = "https://media.giphy.com/media/TDQkojbHj3wTS/giphy.gif";
+    else if (this.jumbotron === 'gif') {
+      $gifSrc = 'https://media.giphy.com/media/TDQkojbHj3wTS/giphy.gif';
     }
     //Optional: set $popupVideo
     //$popupVideo = "https://www.youtube.com/embed/w0mJCtK9sDY";
     return (index.h(index.Host, null, index.h("ptc-jumbotron", Object.assign({ "jumbotron-type": this.jumbotron }, (!!$pngSrc && { pngSrc: $pngSrc }), (!!$gifSrc && { gifSrc: $gifSrc }), (!!$bgVideoSrc && { bgVideoSrc: $bgVideoSrc }), (!!$bgSrc && { bgSrc: $bgSrc }), (!!$popupVideo ), { "sub-title": "totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." // bind sub title data (multi-line)
       ,
-      "is-iframe": this.isIframe }), index.h("ptc-breadcrumb", Object.assign({ slot: "breadcrumb" }, (this.jumbotron === "dark" ||
-      this.jumbotron == "dark-video"
-      ? { color: "white" }
-      : { color: "primary-gray" }), (this.jumbotron === "text"
-      ? { position: "center" }
-      : {})), index.h("list-item", Object.assign({ "list-type": "breadcrumb", "link-href": "https://www.ptc.com/contact-us" }, (this.jumbotron === "dark" ||
-      this.jumbotron == "dark-video"
-      ? { color: "light-gray" }
-      : { color: "primary-gray" })), "PLM Video Hub"), index.h("list-item", Object.assign({ "list-type": "breadcrumb" }, (this.jumbotron === "dark" ||
-      this.jumbotron == "dark-video"
-      ? { color: "light-gray" }
-      : { color: "primary-gray" })), "Current Page")), index.h("ptc-title", { slot: "main-title", type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": "left" // if type=text, text-align=center, otherwise left
+      "is-iframe": this.isIframe }), index.h("ptc-breadcrumb", Object.assign({ slot: "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'white' } : { color: 'primary-gray' }), (this.jumbotron === 'text' ? { position: 'center' } : {})), index.h("list-item", Object.assign({ "list-type": "breadcrumb", "link-href": "https://www.ptc.com/contact-us" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "PLM Video Hub"), index.h("list-item", Object.assign({ "list-type": "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "Current Page")), index.h("ptc-title", { slot: "main-title", type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": "left" // if type=text, text-align=center, otherwise left
       ,
       "title-color": "gray" //if dark, dark-video then "gray-1"
     }, index.h("ptc-tooltip", { "text-lines": "3", description: "Sed ut perspiciatis unde omnis iste natus", position: "right" })), index.h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-primary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum dolor sit amet"), index.h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum"), index.h("div", { slot: "countdown-placeholder" }))));