@ptcwebops/ptcw-design 6.2.28-beta → 6.2.29-beta

package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.js

@@ -1,47 +1,67 @@
 import { Host, h } from '@stencil/core';
 import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
 export class EventPodcastSliderExample {
-  constructor() {
-    this.sliderType = 'event-slider-cards';
-  }
   componentDidLoad() {
+    const swiperContainer = this.el.querySelector('.swiper-container');
+    const slides = swiperContainer.querySelectorAll('.swiper-slide');
+    // Define a desktop breakpoint
+    const isDesktop = window.matchMedia('(min-width: 992px)').matches;
     setTimeout(() => {
       let list = this.el.querySelector('.event-slider-cards');
-      this.listSwp = new Swiper(list, {
-        // Customize options here
-        modules: [Navigation, Pagination, Scrollbar, Mousewheel],
-        slidesPerView: 'auto',
-        spaceBetween: 24,
-        centeredSlides: true,
-        centeredSlidesBounds: true,
-        initialSlide: 0,
-        centerInsufficientSlides: true,
-        freeMode: true,
-        scrollbar: {
-          el: this.swiperPaginationRef,
-          draggable: true,
-        },
-        navigation: {
-          nextEl: this.swiperButtonNextRef,
-          prevEl: this.swiperButtonPrevRef,
-        },
-        mousewheel: {
-          forceToAxis: true,
-          sensitivity: 100,
-        },
-        breakpoints: {
-          1200: {
-            spaceBetween: 32,
+      if (!isDesktop || slides.length >= 4) {
+        this.listSwp = new Swiper(list, {
+          // Customize options here
+          modules: [Navigation, Pagination, Scrollbar, Mousewheel],
+          slidesPerView: 'auto',
+          spaceBetween: 24,
+          //centeredSlides: true,
+          centeredSlidesBounds: true,
+          initialSlide: 0,
+          centerInsufficientSlides: false,
+          freeMode: true,
+          scrollbar: {
+            el: this.swiperPaginationRef,
+            draggable: true,
+          },
+          navigation: {
+            nextEl: this.swiperButtonNextRef,
+            prevEl: this.swiperButtonPrevRef,
+          },
+          mousewheel: {
+            forceToAxis: true,
+            sensitivity: 100,
           },
-          1400: {
-            spaceBetween: 40,
-          }
+          breakpoints: {
+            992: {
+              slidesPerView: 4,
+            },
+            1200: {
+              spaceBetween: 32,
+            },
+            1400: {
+              spaceBetween: 40,
+            },
+          },
+        });
+      }
+      else {
+        const nextBtn = this.el.querySelector('.swiper-button-next');
+        const prevBtn = this.el.querySelector('.swiper-button-prev');
+        const scrollbar = this.el.querySelector('.swiper-scrollbar');
+        if (nextBtn) {
+          nextBtn.setAttribute('style', 'display: none;');
+        }
+        if (prevBtn) {
+          prevBtn.setAttribute('style', 'display: none;');
         }
-      });
+        if (scrollbar) {
+          scrollbar.setAttribute('style', 'display: none;');
+        }
+      }
     }, 100);
   }
   render() {
-    return (h(Host, null, h("div", { class: "event-slider-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+    return (h(Host, { class: "host-ele" }, h("div", { class: "event-slider-cards swiper-container" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
   }
   static get is() { return "event-podcast-slider-example"; }
   static get originalStyleUrls() {
@@ -54,27 +74,5 @@ export class EventPodcastSliderExample {
       "$": ["event-podcast-slider-example.css"]
     };
   }
-  static get properties() {
-    return {
-      "sliderType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'homepage-case-study-cards' | 'event-slider-cards'",
-          "resolved": "\"event-slider-cards\" | \"homepage-case-study-cards\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "slider-type",
-        "reflect": false,
-        "defaultValue": "'event-slider-cards'"
-      }
-    };
-  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/ptc-card/ptc-card.css

@@ -366,6 +366,7 @@ ptc-link, ptc-square-card,
 }
 :host(.horizontal-card) .card-layout {
   position: relative;
+  display: block;
 }
 @media only screen and (min-width: 768px) {
   :host(.horizontal-card) .card-layout {

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -2778,7 +2778,7 @@ ptc-link, ptc-square-card,
   height: 527px;
 }
 .preloader-search-results .content-container .skeleton {
-  padding-top: 4px;
+  padding: 4px 0 0 0;
 }
 .preloader-search-results .content-container .skeleton .skeleton-block {
   margin-bottom: 6px;
@@ -2786,100 +2786,100 @@ ptc-link, ptc-square-card,
 .preloader-search-results .content-container .skeleton .skeleton-block.longer {
   width: 568px;
 }
-@media only screen and (min-width: 1600px) {
+@media only screen and (min-width: 360px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 568px;
+    width: 199px;
   }
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 538px;
+    width: 275px;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: 768px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 393px;
+    width: 459px;
   }
 }
 @media only screen and (min-width: 992px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 459px;
+    width: 393px;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1200px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 275px;
+    width: 538px;
   }
 }
-@media only screen and (min-width: 480px) {
+@media only screen and (min-width: 1440px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 199px;
+    width: 568px;
   }
 }
 .preloader-search-results .content-container .skeleton .skeleton-block.longest {
   width: 754px;
 }
-@media only screen and (min-width: 1600px) {
+@media only screen and (min-width: 360px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 754px;
+    width: 264px;
   }
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 714px;
+    width: 366px;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: 768px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 523px;
+    width: 611px;
   }
 }
 @media only screen and (min-width: 992px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 611px;
+    width: 523px;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1200px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 366px;
+    width: 714px;
   }
 }
-@media only screen and (min-width: 480px) {
+@media only screen and (min-width: 1440px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 264px;
+    width: 754px;
   }
 }
 .preloader-search-results .content-container .skeleton .skeleton-block.medium {
   width: 366px;
 }
-@media only screen and (min-width: 1600px) {
+@media only screen and (min-width: 360px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 366px;
+    width: 129px;
   }
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 347px;
+    width: 179px;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: 768px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 254px;
+    width: 297px;
   }
 }
 @media only screen and (min-width: 992px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 297px;
+    width: 254px;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1200px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 179px;
+    width: 347px;
   }
 }
-@media only screen and (min-width: 480px) {
+@media only screen and (min-width: 1440px) {
   .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 129px;
+    width: 366px;
   }
 }
 .preloader-search-results .content-container .skeleton .skeleton-block.small {

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js

@@ -79,7 +79,7 @@ export class PtcPreloaderSection {
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ppc-skeleton-preloader" }, h("div", { class: "ptc-container " }, h("div", { class: "dots-loader" })))));
       }
       case 'search-results': {
-        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-search-results" }, h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-search-results" }, h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thinner small" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
       }
       case 'news': {
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "news-skeleton-preloader" }, h("div", { class: "ptc-container ptc-section-standard" }, h("ptc-spacer", { breakpoint: "large", size: "medium" }), h("div", { class: "is-grid has-row-gap-md" }, h("div", { class: "is-col-6-lg skeleton-block thick thick-on-mobile" }), h("div", { class: "is-col-6-lg skeleton-block thick medium-md right" })), h("ptc-spacer", { size: "xxx-large" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block narrow thick center" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block short thin center" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block big-block" }), h("ptc-spacer", { size: "xxx-large" }), h("div", { class: "skeleton-block bold medium" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "is-grid has-row-gap-md  has-col-gap-lg" }, h("div", { class: "is-col-6-lg" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }))), h("div", { class: "is-col-6-lg skeleton-block big-card-block" })), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block cta thick center" }), h("ptc-spacer", { size: "xxx-large" }), h("div", { class: "skeleton-block bold medium" }), h("ptc-spacer", { size: "medium" }), h("div", { class: "is-grid has-row-gap-md  has-col-gap-lg" }, h("div", { class: "is-col-6-lg" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }), h("div", { class: "is-col-6-md skeleton-block card-block" }))), h("div", { class: "is-col-6-lg skeleton-block big-card-block" })), h("ptc-spacer", { size: "medium" }), h("div", { class: "skeleton-block cta thick center" })))));