@ptcwebops/ptcw-design 6.4.31-beta → 6.4.33-beta

package/dist/collection/components/ptc-blue-pill-announcement-bar/ptc-blue-pill-announcement-bar.css

@@ -71,8 +71,6 @@ ptc-footer {
   border-radius: 30px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: var(--blue-7-base-color, #197bc0);
-  /* Drop Shadow (X-Large) */
-  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.24);
   color: var(--color-white);
   font-family: var(--ptc-font-latin);
   font-size: var(--ptc-font-size-x-small);
@@ -83,6 +81,10 @@ ptc-footer {
 :host .blue-pill-announcement-bar-wrapper svg {
   min-width: 16px;
 }
+:host .blue-pill-announcement-bar-wrapper.has-shadow {
+  /* Drop Shadow (X-Large) */
+  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.24);
+}
 :host ::slotted(p) {
   margin-bottom: 0 !important;
   color: var(--color-white) !important;

package/dist/collection/components/ptc-blue-pill-announcement-bar/ptc-blue-pill-announcement-bar.js

@@ -1,7 +1,13 @@
 import { Host, h } from "@stencil/core";
 export class PtcBluePillAnnouncementBar {
+  constructor() {
+    this.isBoxShadow = false;
+  }
   render() {
-    return (h(Host, null, h("div", { class: "blue-pill-announcement-bar-wrapper" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("g", { "clip-path": "url(#clip0_96_14879)" }, h("path", { d: "M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1Z", fill: "white" }), h("rect", { x: "7.5", y: "6.5", width: "1", height: "6", fill: "white", stroke: "white" }), h("circle", { cx: "8", cy: "4", r: "0.5", fill: "white", stroke: "white" })), h("defs", null, h("clipPath", { id: "clip0_96_14879" }, h("rect", { width: "16", height: "16", fill: "white" })))), h("div", null, h("slot", null)))));
+    return (h(Host, null, h("div", { class: {
+        "blue-pill-announcement-bar-wrapper": true,
+        "has-shadow": this.isBoxShadow,
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("g", { "clip-path": "url(#clip0_96_14879)" }, h("path", { d: "M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1Z", fill: "white" }), h("rect", { x: "7.5", y: "6.5", width: "1", height: "6", fill: "white", stroke: "white" }), h("circle", { cx: "8", cy: "4", r: "0.5", fill: "white", stroke: "white" })), h("defs", null, h("clipPath", { id: "clip0_96_14879" }, h("rect", { width: "16", height: "16", fill: "white" })))), h("div", null, h("slot", null)))));
   }
   static get is() { return "ptc-blue-pill-announcement-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -15,4 +21,26 @@ export class PtcBluePillAnnouncementBar {
       "$": ["ptc-blue-pill-announcement-bar.css"]
     };
   }
+  static get properties() {
+    return {
+      "isBoxShadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-box-shadow",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
 }

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

@@ -3599,16 +3599,13 @@ ptc-footer {
   margin: 0 5px;
 }
 
-.preloader-store-detail-page .jumbotron {
-  margin-bottom: 48px;
-}
 .preloader-store-detail-page .jumbotron .jumbotron-bg {
-  height: 262px;
+  height: 228px;
   background-color: var(--color-gray-03);
   position: relative;
 }
 .preloader-store-detail-page .div-body {
-  top: -172px;
+  top: -53px;
   position: relative;
 }
 @media only screen and (min-width: 768px) {
@@ -3616,6 +3613,16 @@ ptc-footer {
     text-align: -webkit-center;
   }
 }
+@media only screen and (min-width: 480px) {
+  .preloader-store-detail-page .div-body {
+    top: -95px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-store-detail-page .div-body {
+    top: -116px;
+  }
+}
 .preloader-store-detail-page .div-body .div-grid-block {
   position: relative;
   z-index: 3;
@@ -3680,12 +3687,17 @@ ptc-footer {
 }
 .preloader-store-detail-page .div-content {
   top: -172px;
-  margin-top: 56px;
+  margin-top: 180px;
   position: relative;
   border-radius: 4px;
   background: #fff;
   padding: 40px;
 }
+@media only screen and (min-width: 480px) {
+  .preloader-store-detail-page .div-content {
+    margin-top: 128px;
+  }
+}
 .preloader-store-detail-page .div-content .border-line {
   margin: 40px 10px;
   border: 1px solid var(--color-gray-02);

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

@@ -72,7 +72,7 @@ ptc-footer {
   position: relative;
 }
 :host .content-container {
-  padding: 16px;
+  padding: 24px;
   color: var(--color-gray-10);
   display: flex;
   flex-direction: column;

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

@@ -998,6 +998,10 @@ ptc-store-card-list {
   display: block;
   position: relative;
   overflow: hidden;
+  padding-left: 24px;
+  padding-right: 24px;
+  margin-left: -24px;
+  margin-right: -24px;
 }
 @media only screen and (min-width: 768px) {
   ptc-store-card-list {
@@ -1061,18 +1065,18 @@ ptc-store-card-list .swiper-container {
 ptc-store-card-list .swiper-slide {
   height: auto;
   display: flex;
-  max-width: 344px;
+  width: 288px;
 }
 @media only screen and (min-width: 768px) {
   ptc-store-card-list .swiper-slide {
+    width: 100%;
     max-width: 100%;
   }
 }
 ptc-store-card-list .swiper-scrollbar.swiper-scrollbar-horizontal {
   position: absolute;
   left: 50%;
-  bottom: 20px !important;
-  transform: translateX(-50%);
+  transform: translate(-50%, -13px);
   z-index: 50;
   width: 161px;
   height: 8px;
@@ -1083,22 +1087,77 @@ ptc-store-card-list .swiper-scrollbar-drag {
   height: 8px;
   border-radius: 999px;
   background: var(--color-gray-10);
+  transform: translateX(-16px);
+}
+ptc-store-card-list .swiper-button-prev:after,
+ptc-store-card-list .swiper-button-next:after {
+  content: none;
+}
+ptc-store-card-list .swiper-button-prev img,
+ptc-store-card-list .swiper-button-next img {
+  background-color: #ffffff;
 }
 ptc-store-card-list .swiper-button-prev,
-ptc-store-card-list .swiper-button-next {
+ptc-store-card-list .swiper-rtl .swiper-button-next {
   top: auto;
-  bottom: 5px;
+  bottom: 0px;
+  left: auto;
+  right: calc(50% + 116.5px);
   height: 40px;
   width: 40px;
   border-radius: 4px;
 }
-ptc-store-card-list .swiper-button-prev::after,
-ptc-store-card-list .swiper-button-next::after {
-  content: none;
-}
 ptc-store-card-list .swiper-button-prev:hover,
-ptc-store-card-list .swiper-button-next:hover {
+ptc-store-card-list .swiper-rtl .swiper-button-next:hover {
+  outline: none;
+  outline-offset: 0;
+  text-decoration: none;
+  background-color: #e4e7e9;
+  transition: var(--ptc-transition-slow) linear;
+}
+ptc-store-card-list .swiper-button-prev:focus, ptc-store-card-list .swiper-button-prev:active,
+ptc-store-card-list .swiper-rtl .swiper-button-next:focus,
+ptc-store-card-list .swiper-rtl .swiper-button-next:active {
+  outline: none;
+  outline-offset: 0;
+  text-decoration: none;
+  background-color: #bec6ca;
+}
+ptc-store-card-list .swiper-button-prev svg,
+ptc-store-card-list .swiper-rtl .swiper-button-next svg {
+  height: 14px;
+  width: 9px;
+}
+ptc-store-card-list .swiper-button-next,
+ptc-store-card-list .swiper-rtl .swiper-button-prev {
+  top: auto;
+  bottom: 0px;
+  right: auto;
+  left: calc(50% + 116.5px);
+  height: 40px;
+  width: 40px;
+  border-radius: 4px;
+}
+ptc-store-card-list .swiper-button-next:hover,
+ptc-store-card-list .swiper-rtl .swiper-button-prev:hover {
+  outline: none;
+  outline-offset: 0;
+  text-decoration: none;
   background-color: #e4e7e9;
+  transition: var(--ptc-transition-slow) linear;
+}
+ptc-store-card-list .swiper-button-next:focus, ptc-store-card-list .swiper-button-next:active,
+ptc-store-card-list .swiper-rtl .swiper-button-prev:focus,
+ptc-store-card-list .swiper-rtl .swiper-button-prev:active {
+  outline: none;
+  outline-offset: 0;
+  text-decoration: none;
+  background-color: #bec6ca;
+}
+ptc-store-card-list .swiper-button-next svg,
+ptc-store-card-list .swiper-rtl .swiper-button-prev svg {
+  height: 14px;
+  width: 9px;
 }
 @media only screen and (min-width: 768px) {
   ptc-store-card-list .swiper-wrapper {
@@ -1133,8 +1192,14 @@ ptc-store-card-list .swiper-button-next {
 }
 .store-modal-card .store-modal-content {
   padding: 48px 24px 48px 24px;
+  position: relative;
 }
-@media only screen and (min-width: 480px) {
+.store-modal-card .store-modal-content .store-modal-close-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+@media only screen and (min-width: 768px) {
   .store-modal-card .store-modal-content {
     padding: 32px 48px 48px 48px;
   }
@@ -1160,9 +1225,9 @@ ptc-store-card-list .swiper-button-next {
 .store-modal-card .store-modal-footer {
   padding: 8px 24px 24px 24px;
 }
-@media only screen and (min-width: 480px) {
+@media only screen and (min-width: 768px) {
   .store-modal-card .store-modal-footer {
-    padding: 8px 32px 24px 32px;
+    padding: 8px 48px 24px 48px;
   }
 }
 .store-modal-card .store-modal-footer-buttons {
@@ -1170,4 +1235,12 @@ ptc-store-card-list .swiper-button-next {
   flex-wrap: wrap;
   gap: 16px;
   justify-content: center;
+}
+.store-modal-card .store-modal-footer-buttons ptc-button {
+  width: 100%;
+}
+@media only screen and (min-width: 768px) {
+  .store-modal-card .store-modal-footer-buttons ptc-button {
+    width: auto;
+  }
 }

package/dist/collection/components/ptc-store-card-list/ptc-store-card-list.js

@@ -57,7 +57,7 @@ export class PtcStoreCardList {
     if (swiperContainer) {
       this.swiperInstance = new Swiper(swiperContainer, {
         modules: [Navigation, Scrollbar, Pagination],
-        slidesPerView: 1.1,
+        slidesPerView: "auto",
         spaceBetween: 24,
         scrollbar: {
           el: this.swiperScrollbarRef,
@@ -67,11 +67,6 @@ export class PtcStoreCardList {
           nextEl: this.swiperButtonNextRef,
           prevEl: this.swiperButtonPrevRef,
         },
-        breakpoints: {
-          480: {
-            slidesPerView: 1.3,
-          },
-        },
       });
     }
   }