@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css

@@ -1,149 +1,158 @@
 a {
-    font-family: var(--ptc-font-latin);
-    font-style: var(--ptc-font-style-normal);
-    text-decoration-line: underline;
-    color: var(--color-hyperlink);
-    transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
-    font-weight: var(--ptc-font-weight-bold);
-
-    &:visited {
-        color: var(--color-blue-10);
-    }
-
-    &:active,
-    &:visited:active {
-        transition:none;
-        // pressed
-        color: var(--color-blue-09);
-    }
-
-    &:hover,
-    &:visited:hover {
-        color: var(--color-blue-08);
-    }
-
-    &.disabled {
-        color: var(--color-gray-04) !important;
-        cursor: not-allowed;
-    }
-    &:focus-visible {
-        outline: 5px solid #003DD6 !important;
-        outline-offset: 0px !important;
-        border-radius: var(--ptc-border-radius-standard);
-      }
-}
-
-.light-links,.background-grey-10,.background-plm-grey  {
-    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .vjs-social-share-links a), a.light-link {
-        color: var(--color-blue-04);
-        margin: -2px;
-        border: 2px solid transparent;
-
-        &:visited {
-            color: var(--color-blue-06);
-        }
-
-        &:active,
-        &:visited:active {
-            transition:none;
-            // pressed
-            color: var(--color-blue-07);
-        }
-
-        &:hover,
-        &:visited:hover {
-            color: var(--color-blue-05);
-        }
-
-        &.disabled {
-            color: var(--color-gray-04) !important;
-            cursor: not-allowed;
-        }
-
-        &:focus-visible {
-            border-radius: var(--ptc-border-radius-standard); 
-            border: 2px solid rgb(255, 255, 255);
-            outline: 5px solid var(--keyboard-nav-outline);
-        }
-    }
-
-    .podcast-cta-section a {
-        border: 2px solid transparent;
-
-        &:focus-visible {
-            border-radius: var(--ptc-border-radius-standard); 
-            border: 2px solid rgb(255, 255, 255);
-            outline: 5px solid var(--keyboard-nav-outline);
-        }
-    }
+	font-family: var(--ptc-font-latin);
+	font-style: var(--ptc-font-style-normal);
+	text-decoration-line: underline;
+	color: var(--color-hyperlink);
+	transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
+	font-weight: var(--ptc-font-weight-bold);
+
+	&:visited {
+		color: var(--color-blue-10);
+	}
+
+	&:active,
+	&:visited:active {
+		transition: none;
+		// pressed
+		color: var(--color-blue-09);
+	}
+
+	&:hover,
+	&:visited:hover {
+		color: var(--color-blue-08);
+	}
+
+	&.disabled {
+		color: var(--color-gray-04) !important;
+		cursor: not-allowed;
+	}
+	&:focus-visible {
+		outline: 5px solid #003dd6 !important;
+		outline-offset: 0px !important;
+		border-radius: var(--ptc-border-radius-standard);
+	}
+}
+
+.light-links,
+.background-grey-10,
+.background-plm-grey {
+	a:not(
+		.hero-footer-form-wrapper a,
+		ptc-modal inline-form a,
+		.vjs-social-share-links a
+	),
+	a.light-link {
+		color: var(--color-blue-04);
+		margin: -2px;
+		border: 2px solid transparent;
+
+		&:visited {
+			color: var(--color-blue-06);
+		}
+
+		&:active,
+		&:visited:active {
+			transition: none;
+			// pressed
+			color: var(--color-blue-07);
+		}
+
+		&:hover,
+		&:visited:hover {
+			color: var(--color-blue-05);
+		}
+
+		&.disabled {
+			color: var(--color-gray-04) !important;
+			cursor: not-allowed;
+		}
+
+		&:focus-visible {
+			border-radius: var(--ptc-border-radius-standard);
+			border: 2px solid rgb(255, 255, 255);
+			outline: 5px solid var(--keyboard-nav-outline);
+		}
+	}
+
+	.podcast-cta-section a {
+		border: 2px solid transparent;
+
+		&:focus-visible {
+			border-radius: var(--ptc-border-radius-standard);
+			border: 2px solid rgb(255, 255, 255);
+			outline: 5px solid var(--keyboard-nav-outline);
+		}
+	}
 }
 
 .ptc-link {
-    color: var(--color-gray-10);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-decoration-color: var(--color-green-06);
-    text-underline-offset: 5px;
-    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
-
-    &:hover {
-        color: var(--color-green-06);
-    }
-
-    &:visited {
-        color: var(--color-gray-10);
-    }
-
-    &:active,
-    &:visited:active {
-        transition:none;
-        // pressed
-        color: var(--color-green-06);
-    }
-
-    &:hover,
-    &:visited:hover {
-        color: var(--color-green-06);
-    }
+	color: var(--color-gray-10);
+	text-decoration: underline;
+	text-decoration-thickness: 2px;
+	text-decoration-color: var(--color-green-06);
+	text-underline-offset: 5px;
+	transition: text-decoration-color var(--ptc-transition-medium)
+		var(--ptc-ease-inout);
+
+	&:hover {
+		color: var(--color-green-06);
+	}
+
+	&:visited {
+		color: var(--color-gray-10);
+	}
+
+	&:active,
+	&:visited:active {
+		transition: none;
+		// pressed
+		color: var(--color-green-06);
+	}
+
+	&:hover,
+	&:visited:hover {
+		color: var(--color-green-06);
+	}
 }
 
 .ptc-link-dark {
-    color: var(--color-white);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-decoration-color: var(--color-green-06);
-    text-underline-offset: 5px;
-    transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
-
-    &:hover {
-        color: var(--color-green-06);
-    }
-
-    &:visited {
-        color: var(--color-white);
-    }
-
-    &:active,
-    &:visited:active {
-        transition:none;
-        // pressed
-        color: var(--color-green-06);
-    }
-
-    &:hover,
-    &:visited:hover {
-        color: var(--color-green-06);
-    }
-
-}
-.vjs-social-share-links{
-    a{
-        color: var(--color-white);
-        &:hover{
-            color: var(--color-white);
-        }
-    }
+	color: var(--color-white);
+	text-decoration: underline;
+	text-decoration-thickness: 2px;
+	text-decoration-color: var(--color-green-06);
+	text-underline-offset: 5px;
+	transition: text-decoration-color var(--ptc-transition-medium)
+		var(--ptc-ease-inout);
+
+	&:hover {
+		color: var(--color-green-06);
+	}
+
+	&:visited {
+		color: var(--color-white);
+	}
+
+	&:active,
+	&:visited:active {
+		transition: none;
+		// pressed
+		color: var(--color-green-06);
+	}
+
+	&:hover,
+	&:visited:hover {
+		color: var(--color-green-06);
+	}
+}
+.vjs-social-share-links {
+	a {
+		color: var(--color-white);
+		&:hover {
+			color: var(--color-white);
+		}
+	}
 }
+
  :host {
 	 display: block;
 	 box-sizing: border-box;

package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.js

@@ -1,8 +1,8 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class FeaturedList {
   constructor() {
     this.isMobile = undefined;
-    this.selectedTabGloble = 'tab-01';
+    this.selectedTabGloble = "tab-01";
   }
   handleResize() {
     this.isMobile = window.innerWidth < 992;
@@ -18,59 +18,69 @@ export class FeaturedList {
   holdTabOnResize(name) {
     const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
     const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
-    contentBlocks.forEach(content => {
+    contentBlocks.forEach((content) => {
       if (content.classList.contains("init-active")) {
         content.classList.remove("init-active");
       }
-      content.getAttribute('name-key') === name ? (content.setAttribute('selected', 'selected')) : (content.removeAttribute('selected'));
+      content.getAttribute("name-key") === name
+        ? content.setAttribute("selected", "selected")
+        : content.removeAttribute("selected");
     });
-    headerBlocks.forEach(header => {
+    headerBlocks.forEach((header) => {
       if (header.classList.contains("init-active")) {
         header.classList.remove("init-active");
       }
-      header.getAttribute('name-key') === name ? (header.setAttribute('selected', 'selected')) : (header.removeAttribute('selected'));
+      header.getAttribute("name-key") === name
+        ? header.setAttribute("selected", "selected")
+        : header.removeAttribute("selected");
     });
   }
   selectTab(name) {
     const featuredImages = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-image`);
     const contentBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-content`);
     const headerBlocks = this.hostElement.shadowRoot.querySelectorAll(`fl-tab-header`);
-    featuredImages.forEach(image => {
+    featuredImages.forEach((image) => {
       if (image.classList.contains("init-active")) {
         image.classList.remove("init-active");
       }
-      image.getAttribute('name-key') === name ? (image.setAttribute('selected', 'selected')) : (image.removeAttribute('selected'));
+      image.getAttribute("name-key") === name
+        ? image.setAttribute("selected", "selected")
+        : image.removeAttribute("selected");
     });
-    contentBlocks.forEach(content => {
+    contentBlocks.forEach((content) => {
       this.updateActiveTab(name, content);
       //  Added code to recall readmore for hidden tabs
-      if (content.getAttribute('name-key') === name) {
-        const readMoreComp = content.querySelector('ptc-readmore');
+      if (content.getAttribute("name-key") === name) {
+        const readMoreComp = content.querySelector("ptc-readmore");
         if (readMoreComp) {
           readMoreComp.updateReadmoreStatus();
         }
       }
     });
-    headerBlocks.forEach(header => {
+    headerBlocks.forEach((header) => {
       this.updateActiveTab(name, header);
     });
   }
   updateActiveTab(name, tabName) {
     if (this.isMobile) {
-      if (tabName.getAttribute('name-key') === name) {
+      if (tabName.getAttribute("name-key") === name) {
         if (tabName.classList.contains("init-active")) {
-          tabName.removeAttribute('selected');
+          tabName.removeAttribute("selected");
         }
         else {
-          tabName.getAttribute('selected') == 'selected' ? (tabName.removeAttribute('selected')) : (tabName.setAttribute('selected', 'selected'));
+          tabName.getAttribute("selected") == "selected"
+            ? tabName.removeAttribute("selected")
+            : tabName.setAttribute("selected", "selected");
         }
       }
       else {
-        tabName.removeAttribute('selected');
+        tabName.removeAttribute("selected");
       }
     }
     else {
-      tabName.getAttribute('name-key') === name ? (tabName.setAttribute('selected', 'selected')) : (tabName.removeAttribute('selected'));
+      tabName.getAttribute("name-key") === name
+        ? tabName.setAttribute("selected", "selected")
+        : tabName.removeAttribute("selected");
     }
     if (tabName.classList.contains("init-active")) {
       tabName.classList.remove("init-active");
@@ -79,11 +89,9 @@ export class FeaturedList {
   render() {
     return (h(Host, null, h("div", { class: "featured-image-wrap" }, h("fl-tab-image", { "name-key": "tab-01", class: "init-active" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" })), h("fl-tab-image", { "name-key": "tab-02" }, h("ptc-background-video", { overlay: false, "play-button-title": "Play", "pause-button-title": "Pause", "video-src": "https://www.ptc.com/en/www.ptc.com//-/media/Videos/BRAND-FILM-CAR-SECTION-short-1mb.mp4", "poster-src": "https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg" })), h("fl-tab-image", { "name-key": "tab-03" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/CIMC-1366x542.jpg?h=542&w=1366&la=en&hash=56AE14F73CFB62C24276D08E556B0949" })), h("fl-tab-image", { "name-key": "tab-04" }, h("ptc-img", { "image-type": "smart-bg", "image-alignment": "center", "img-url": "https://www.ptc.com/-/media/Images/new-org/1366x542/ThingWorx_IIOT_CaterpillarCS_Img_1366x542.jpg?h=542&w=1366&la=en&hash=627ED00C1F58E3677A06F50C0F3009D6" }))), this.isMobile ? (
     // Code for mobile only
-    h("div", { class: "mobile-wrapper" }, h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-content", { "name-key": "tab-02" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-content", { "name-key": "tab-03" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense"))), h("div", { class: 'acc-item' }, h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h("fl-tab-content", { "name-key": "tab-04" }, h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")))))
-      :
-        (
-        // Code for Desktop only
-        h("div", { class: "non-mobile-wrapper" }, h("div", { class: "header-list-wrap" }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Aerospace & Defense"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-02" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Automotive"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-03" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Electronics & High-Tech"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Deliver the future of transportation and mobility and gain competitive advantage. Explore automotive solutions for OEMs and suppliers so your team can help drive the future of transportation."), h("a", { href: '#' }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-04" }, h("ptc-title", { type: 'h3', "title-size": 'large', upperline: "no-upperline", "title-margin": 'margin-flush' }, "Retail & Consumer Products"), h("ptc-para", { "para-line-h": 'line-height-p', "font-size": "small", "para-margin": "margin-3" }, "Navigate supply chain disruption while maximizing revenue growth and sustainability. Explore how PTC\u2019s digital solutions can accelerate product innovation, supply chain collaboration, and more."), h("a", { href: '#' }, "See More about Aerospace & Defense")))))));
+    h("div", { class: "mobile-wrapper" }, h("div", { class: "acc-item" }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "#" }, "See More about Aerospace & Defense"))), h("div", { class: "acc-item" }, h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-content", { "name-key": "tab-02" }, h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "#" }, "See More about Aerospace & Defense"))), h("div", { class: "acc-item" }, h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-content", { "name-key": "tab-03" }, h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "#" }, "See More about Aerospace & Defense"))), h("div", { class: "acc-item" }, h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" }), h("fl-tab-content", { "name-key": "tab-04" }, h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "#" }, "See More about Aerospace & Defense"))))) : (
+    // Code for Desktop only
+    h("div", { class: "non-mobile-wrapper" }, h("div", { class: "header-list-wrap" }, h("fl-tab-header", { "name-key": "tab-01", "tab-title": "Aerospace & Defense", class: "init-active" }, " "), h("fl-tab-header", { "name-key": "tab-02", "tab-title": "Automotive" }), h("fl-tab-header", { "name-key": "tab-03", "tab-title": "Electronics & High-Tech" }), h("fl-tab-header", { "name-key": "tab-04", "tab-title": "Retail & Consumer Products" })), h("div", { class: "content-wrap" }, h("fl-tab-content", { "name-key": "tab-01", class: "init-active" }, h("ptc-title", { type: "h3", "title-size": "large", upperline: "no-upperline", "title-margin": "margin-flush" }, "Aerospace & Defense"), h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "#" }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-02" }, h("ptc-title", { type: "h3", "title-size": "large", upperline: "no-upperline", "title-margin": "margin-flush" }, "Automotive"), h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Adapt to ever-changing customer demands and increasing cost and competitive pressure. Explore digital solutions for driving engineering excellence, manufacturing efficiency, product innovation, and service optimization."), h("a", { href: "#" }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-03" }, h("ptc-title", { type: "h3", "title-size": "large", upperline: "no-upperline", "title-margin": "margin-flush" }, "Electronics & High-Tech"), h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Deliver the future of transportation and mobility and gain competitive advantage. Explore automotive solutions for OEMs and suppliers so your team can help drive the future of transportation."), h("a", { href: "#" }, "See More about Aerospace & Defense")), h("fl-tab-content", { "name-key": "tab-04" }, h("ptc-title", { type: "h3", "title-size": "large", upperline: "no-upperline", "title-margin": "margin-flush" }, "Retail & Consumer Products"), h("ptc-para", { "para-line-h": "line-height-p", "font-size": "small", "para-margin": "margin-3" }, "Navigate supply chain disruption while maximizing revenue growth and sustainability. Explore how PTC\u2019s digital solutions can accelerate product innovation, supply chain collaboration, and more."), h("a", { href: "#" }, "See More about Aerospace & Defense")))))));
   }
   static get is() { return "featured-list"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class BundleJumbotronExample {
   constructor() {
-    this.jumbotron = 'light';
+    this.jumbotron = "light";
     this.isIframe = false;
   }
   render() {
@@ -11,27 +11,40 @@ export class BundleJumbotronExample {
     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 (h(Host, null, h("ptc-jumbotron", Object.assign({ "jumbotron-type": this.jumbotron }, (!!$pngSrc && { pngSrc: $pngSrc }), (!!$gifSrc && { gifSrc: $gifSrc }), (!!$bgVideoSrc && { bgVideoSrc: $bgVideoSrc }), (!!$bgSrc && { bgSrc: $bgSrc }), (!!$popupVideo && { popupVideo: $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 }), h("ptc-breadcrumb", Object.assign({ slot: "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'white' } : { color: 'primary-gray' }), (this.jumbotron === 'text' ? { position: 'center' } : {})), 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"), h("list-item", Object.assign({ "list-type": "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "Current Page")), 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 }), h("ptc-breadcrumb", Object.assign({ slot: "breadcrumb" }, (this.jumbotron === "dark" ||
+      this.jumbotron == "dark-video"
+      ? { color: "white" }
+      : { color: "primary-gray" }), (this.jumbotron === "text"
+      ? { position: "center" }
+      : {})), 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"), h("list-item", Object.assign({ "list-type": "breadcrumb" }, (this.jumbotron === "dark" ||
+      this.jumbotron == "dark-video"
+      ? { color: "light-gray" }
+      : { color: "primary-gray" })), "Current Page")), 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"
     }, h("ptc-tooltip", { "text-lines": "3", description: "Sed ut perspiciatis unde omnis iste natus", position: "right" })), h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-primary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum dolor sit amet"), h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum"), h("div", { slot: "countdown-placeholder" }))));
@@ -66,7 +79,7 @@ export class BundleJumbotronExample {
         },
         "attribute": "jumbotron",
         "reflect": false,
-        "defaultValue": "'light'"
+        "defaultValue": "\"light\""
       },
       "isIframe": {
         "type": "boolean",

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css

@@ -9,8 +9,10 @@ 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;
@@ -29,8 +31,10 @@ 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 */
@@ -73,7 +77,7 @@ ptc-link, ptc-square-card,
   position: absolute;
   height: 130px;
   width: 100%;
-  background-color: #F3f3f3;
+  background-color: #f3f3f3;
   bottom: 0px;
 }