@ptcwebops/ptcw-design 4.6.0 → 4.6.2

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

@@ -0,0 +1,286 @@
+import { Host, h, Fragment } from '@stencil/core';
+var FilterTagTypes;
+(function (FilterTagTypes) {
+  FilterTagTypes["SEARCH"] = "search";
+  FilterTagTypes["FILTER"] = "filter";
+})(FilterTagTypes || (FilterTagTypes = {}));
+export class BlogsSearchSection {
+  constructor() {
+    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;
+      }
+    };
+    this.removeFilterTag = (tagValue) => {
+      let filters = this.filters;
+      filters = filters.filter(value => value !== tagValue);
+      this.filters = [...filters];
+    };
+    this._runSearch = (search = "", filter = "", remove = false) => {
+      if (filter) {
+        if (remove) {
+          this.removeFilterTag(filter);
+        }
+        else {
+          this.filters.push(filter);
+        }
+      }
+      else {
+        this.search = search;
+      }
+      this.isLoading = true;
+      this.getResults();
+    };
+    this.handleRemoveSearchTag = () => {
+      this.search = "";
+      const blogsSearchFields = this.el.querySelectorAll('.blogs-search-field');
+      blogsSearchFields === null || blogsSearchFields === void 0 ? void 0 : blogsSearchFields.forEach((search) => {
+        search.clearSearchValue();
+      });
+      this.isLoading = true;
+      this.getResults();
+    };
+    this.handleRemoveFilterTag = (e) => {
+      let dataValue = e.target.getAttribute("data-value");
+      this.removeFilterTag(dataValue);
+      this.isLoading = true;
+      this.getResults();
+    };
+    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');
+      if (blogsSearchFields.length > 0) {
+        blogsSearchFields.forEach((search) => {
+          search.addEventListener('clicked', (event) => {
+            // search.clearSearchValue();
+            let searchText = event.detail.searchTerm;
+            if (searchText) {
+              this._runSearch(event.detail.searchTerm, "", false);
+            }
+            else {
+              this._runSearch("", "", true);
+            }
+          });
+        });
+      }
+      if (desktopFiltersCheckboxes) {
+        desktopFiltersCheckboxes.forEach(checkbox => {
+          checkbox.addEventListener('checkedChanged', (sender) => {
+            let checked = sender.detail.checked;
+            let value = sender.detail.value;
+            if (checked === "checked") {
+              this.runSearch("", value, false);
+            }
+            else {
+              this.runSearch("", value, true);
+            }
+          });
+        });
+      }
+      desktopFiltersModalClearBtn.addEventListener('clicked', () => {
+        desktopFiltersCheckboxes.forEach(checkbox => {
+          checkbox.setAttribute('checked', 'unchecked');
+          let value = checkbox.value;
+          this.removeFilterTag(value);
+        });
+        this.isLoading = true;
+        this.getResults();
+      });
+      mobileFiltersModalCta.addEventListener('clicked', () => {
+        console.log("Modal open");
+        mobileFiltersModal.setAttribute('show', 'true');
+      });
+      mobileFiltersModal.addEventListener('opened', () => {
+        mobileFiltersModal.querySelectorAll('ptc-icon-minimize').forEach(pim => {
+          pim.Refresh();
+        });
+        mobileFiltersCheckboxes.forEach(checkbox => {
+          checkbox.addEventListener('checkedChanged', (sender) => {
+            let checked = sender.detail.checked;
+            let value = sender.detail.value;
+            if (checked === "checked") {
+              this.filters.push(value);
+            }
+            else {
+              this.removeFilterTag(value);
+            }
+          });
+        });
+      });
+      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');
+        this.isLoading = true;
+        this.getResults();
+      });
+    };
+    this.componentWillLoad = () => {
+      this.isLoading = true;
+    };
+    this.componentDidLoad = () => {
+      this.getResults();
+    };
+    this.noResultH3 = "No Results Found";
+    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.isLoading = false;
+    this.data = [];
+    this.search = "";
+    this.filters = [];
+  }
+  // Methods
+  async runSearch(search = "", filter = "", remove) {
+    this._runSearch(search, filter, remove);
+  }
+  getResults() {
+    setTimeout(() => {
+      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];
+    }, 1000);
+  }
+  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)));
+    };
+    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": "listing-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" }, this.isLoading ?
+      h("ptc-preloader-section", { "section-type": "cards", "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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["blogs-search-section.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["blogs-search-section.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "noResultH3": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-result-h-3",
+        "reflect": false,
+        "defaultValue": "\"No Results Found\""
+      },
+      "noResultP": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-result-p",
+        "reflect": false,
+        "defaultValue": "\"Try changing or removing some of your filters\""
+      },
+      "noResultButton": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-result-button",
+        "reflect": false,
+        "defaultValue": "\"Clear Filters\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isLoading": {},
+      "data": {},
+      "search": {},
+      "filters": {}
+    };
+  }
+  static get methods() {
+    return {
+      "runSearch": {
+        "complexType": {
+          "signature": "(search: string, filter: string, remove: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.css

@@ -761,15 +761,6 @@ ptc-link, ptc-square-card,
   overflow: hidden;
 }
 
-ptc-jumbotron {
-  height: fit-content;
-}
-@media screen and (min-width: 992px) {
-  ptc-jumbotron {
-    height: 86vh;
-  }
-}
-
 .hp-sub-title {
   color: var(--color-white);
   /* Paragraph Large */
@@ -792,23 +783,52 @@ ptc-jumbotron {
   z-index: 999;
   width: 100%;
   height: 100%;
-  transform: translateY(-20px);
-  max-width: 1200px;
+  transform: translateY(-24px);
+  top: 0px;
+  padding-right: 24px;
+  padding-left: 24px;
   margin: 0 auto;
 }
 
-@media screen and (min-width: 1200px) {
-  .swiper-wrapper {
-    justify-content: center;
-  }
-}
-
 .swiper-slide {
   display: flex;
-  justify-content: center;
+  width: unset;
+  justify-content: flex-start;
   align-items: center;
+  margin-right: 24px;
+}
+.swiper-slide:last-of-type {
+  margin-right: 0px;
 }
 
+@media screen and (min-width: 1200px) {
+  .swiper-container {
+    max-width: 1136px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .swiper-slide {
+    margin-right: 28px;
+  }
+  .swiper-slide:last-of-type {
+    margin-right: 0px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .swiper-container {
+    max-width: 1200px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .swiper-slide {
+    margin-right: 60px;
+  }
+  .swiper-slide:last-of-type {
+    margin-right: 0px;
+  }
+}
 .swiper-button-next,
 .swiper-button-prev {
   color: transparent;

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.js

@@ -27,9 +27,9 @@ export class HomepageJumbotron {
   initSlider() {
     if (this.swiperContainerRef) {
       this.mySwiper = new Swiper(this.swiperContainerRef, {
-        slidesPerView: 1,
-        //spaceBetween: 2,
+        slidesPerView: "auto",
         initialSlide: 0,
+        spaceBetween: 0,
         loop: false,
         pagination: {
           el: '.swiper-pagination',
@@ -38,11 +38,14 @@ export class HomepageJumbotron {
         breakpoints: {
           768: {
             initialSlide: 0,
-            slidesPerView: 2,
+            slidesPerView: 'auto',
+            spaceBetween: 0,
           },
           1200: {
+            width: 1080,
             initialSlide: 1,
             slidesPerView: 3,
+            spaceBetween: 0,
           },
         },
       });
@@ -82,7 +85,7 @@ export class HomepageJumbotron {
     this.activeButton = activeButtonElement ? activeButtonElement.innerHTML : '';
     //this.tileCount = this.el.querySelectorAll(`[slot^="jumbotron-tile-image-${this.activeTab}"]`).length;
     //console.log('sub tile counts: ' + this.tileCount + '; this active tab: ' + this.activeTab);
-    this.updateTileElements();
+    //this.updateTileElements();
   }
   updateTileElements() {
     const tiles = Array.from(this.el.querySelectorAll(`[slot^="jumbotron-tile-${this.activeTab}"]`));
@@ -97,7 +100,7 @@ export class HomepageJumbotron {
     }, 250);
   }
   render() {
-    return (h(Host, null, h("ptc-jumbotron", Object.assign({ "jumbotron-type": this.jumbotron }, (!!this.activeBgVideoSrc && { bgVideoSrc: this.activeBgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
+    return (h(Host, null, h("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:700px; max-height:1000px;}", "jumbotron-type": this.jumbotron }, (!!this.activeBgVideoSrc && { bgVideoSrc: this.activeBgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
       ,
       "play-button-title": this.playBtnText, "pause-button-title": this.pauseBtnText, "button-location": "allbp-bottom-right" }), h("slot", { name: "breadcrumb" }), h("h1", { slot: "main-title", class: "hp-h1" }, this.activeMainTitle), h("p", { slot: "hp-sub-title", class: "hp-sub-title" }, this.activeSubTitle), h("div", { slot: "j-cta", innerHTML: this.activeButton })), h("div", { class: "swiper-container", ref: el => (this.swiperContainerRef = el) }, h("div", { class: "swiper-wrapper" }, this.tileElements.map((tile, index) => (h("div", { class: "swiper-slide", key: index, innerHTML: tile.outerHTML })))), h("div", { class: "swiper-pagination" }))));
   }

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.css

@@ -55,25 +55,41 @@ ptc-link, ptc-square-card,
 }
 
 ::slotted(.title) {
-  color: var(--color-gray-10);
-  font-family: Raleway;
-  font-size: 32px;
-  font-style: normal;
-  font-weight: 800;
-  line-height: 40px;
+  color: var(--color-gray-10) !important;
+  font-family: Raleway !important;
+  font-size: 24px !important;
+  font-style: normal !important;
+  font-weight: 700 !important;
+  line-height: 30px !important;
+  margin-top: 0px !important;
+  margin-bottom: 16px !important;
   /* 125% */
 }
 
 ::slotted(.description) {
-  color: var(--color-gray-10);
-  font-family: Raleway;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 27px;
+  color: var(--color-gray-10) !important;
+  font-family: Raleway !important;
+  font-size: 18px !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 27px !important;
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
   /* 150% */
 }
 
+::slotted(.tab-slot-image) {
+  height: 500px;
+  width: auto;
+  margin-bottom: 32px;
+}
+@media screen and (min-width: 992px) {
+  ::slotted(.tab-slot-image) {
+    margin-bottom: unset;
+    height: auto;
+  }
+}
+
 .header {
   text-align: center;
   margin-bottom: 20px;
@@ -88,6 +104,8 @@ ptc-link, ptc-square-card,
   display: flex;
   justify-content: center;
   margin-bottom: 64px;
+  position: relative;
+  z-index: 99;
 }
 
 .tabs-desktop {
@@ -191,12 +209,18 @@ ptc-link, ptc-square-card,
 }
 
 .tab-content {
-  display: flex;
+  display: none;
+  opacity: 0;
   flex-direction: column;
+  width: 100%;
+  animation: fadeIn var(--ptc-transition-medium) ease-in-out forwards;
+}
+.tab-content.active-tab {
+  display: flex;
+  opacity: 1;
 }
 @media only screen and (min-width: 992px) {
   .tab-content {
-    display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
     width: 100%;
@@ -245,6 +269,94 @@ ptc-link, ptc-square-card,
 .info-card-wrapper {
   margin-top: 72px;
   display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.card-section {
+  display: flex;
+  position: relative;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  transition: box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);
+  justify-content: flex-start;
+}
+.card-section::-webkit-scrollbar {
+  display: none;
+}
+.card-section .card-link {
+  display: inline-flex;
+  position: relative;
+  text-decoration: none;
+  z-index: 10;
+  align-items: center;
+  gap: 16px;
+  margin-right: 24px;
+}
+.card-section .card-link .link-text {
+  display: block;
+  inline-size: 190px;
+  white-space: break-spaces;
+}
+.card-section:before {
+  position: absolute;
+  width: 32px;
+  background: linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);
+  top: 16px;
+  right: 0;
+  bottom: 0;
+  z-index: 12;
+}
+.card-section.scroll-st {
+  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3);
+}
+.card-section.scroll-ed {
+  box-shadow: inset -2px 0px 0px rgba(255, 255, 255, 0.3);
+}
+.card-section.scroll-ed.scroll-st {
+  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3);
+}
+@media only screen and (min-width: 1200px) {
+  .card-section {
+    align-items: flex-start;
+    justify-content: flex-start;
+    align-content: flex-start;
+  }
+  .card-section.scroll-st, .card-section.scroll-ed, .card-section.scroll-ed.scroll-st {
+    box-shadow: unset;
+  }
+  .card-section .card-link {
+    flex: unset;
+  }
+  .card-section .card-link:first-child {
+    margin-left: 0;
+  }
+  .card-section .card-link:last-child {
+    margin-right: 0;
+  }
+}
+.card-section {
+  overflow: inherit;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  animation-duration: 0ms;
+  animation-delay: 1000ms;
+  animation-fill-mode: forwards;
+}
+@media only screen and (min-width: 1200px) {
+  .card-section {
+    overflow-x: scroll;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }