@ptcwebops/ptcw-design 6.3.66-beta → 6.3.68-beta

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

@@ -0,0 +1,147 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+}
+
+.skeleton {
+  display: flex;
+  flex-direction: column;
+}
+.skeleton.centered {
+  justify-content: center;
+}
+.skeleton.padding-left-sm {
+  padding-left: 14px;
+}
+
+.skeleton-block {
+  height: 24px;
+  background: linear-gradient(to right, #f6f6f6 25%, #e4e7e9 50%, #f6f6f6 75%);
+  background-size: 200% 100%;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  animation: loading 2.5s ease-in-out infinite;
+  width: 100%;
+}
+
+.skeleton-block {
+  /* &.medium-md {
+  	@include screen-md {
+  		width: 50%;
+  	}
+  } */
+}
+.skeleton-block.long {
+  width: 80%;
+}
+.skeleton-block.wide {
+  width: 70%;
+}
+.skeleton-block.wide-sm {
+  width: 60%;
+}
+.skeleton-block.medium {
+  width: 50%;
+}
+.skeleton-block.short {
+  width: 30%;
+}
+.skeleton-block.narrow {
+  width: 20%;
+}
+.skeleton-block.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.skeleton-block.left {
+  margin-right: auto;
+}
+.skeleton-block.right {
+  margin-left: auto;
+}
+.skeleton-block.caption {
+  height: 32px;
+}
+.skeleton-block.para {
+  height: 96px;
+}
+.skeleton-block.text-body {
+  height: 192px;
+}
+.skeleton-block.button {
+  height: 48px;
+}
+.skeleton-block.small-para {
+  height: 40px;
+}
+.skeleton-block.divider {
+  height: 1px;
+}
+.skeleton-block.multi-line {
+  height: 24px;
+}
+.skeleton-block.title {
+  height: 16px;
+}
+.skeleton-block.line {
+  height: 8px;
+}

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

@@ -0,0 +1,62 @@
+import { Host, h } from '@stencil/core';
+export class PtcPreloader {
+  constructor() {
+    this.type = "para";
+    this.width = undefined;
+  }
+  //Example: <ptc-preloader type="title" width="125px"></ptc-preloader>
+  render() {
+    return (h(Host, null, h("div", { class: "skeleton" }, h("div", { class: `skeleton-block ${this.type}`, style: { width: `${this.width}` } }))));
+  }
+  static get is() { return "ptc-preloader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-preloader.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-preloader.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | \"caption\" | \"text-body\" | \"button\" | \"title\" | \"divider\" | \"line\" | \"multi-line\" | \"small-para\"",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"para\""
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -11,8 +11,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;
@@ -31,8 +33,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 */
@@ -122,7 +126,8 @@ ptc-link, ptc-square-card,
   overflow: clip;
 }
 
-.preload-skeleton, .preload-child {
+.preload-skeleton,
+.preload-child {
   visibility: hidden;
   z-index: -10;
   position: absolute;
@@ -130,7 +135,8 @@ ptc-link, ptc-square-card,
   width: 100%;
   height: 100%;
 }
-.preload-skeleton.show, .preload-child.show {
+.preload-skeleton.show,
+.preload-child.show {
   visibility: visible;
   z-index: inherit;
   background: inherit;
@@ -226,7 +232,7 @@ ptc-link, ptc-square-card,
 
 .skeleton-block {
   height: 24px;
-  background: linear-gradient(to right, #F6F6F6 25%, #E4E7E9 50%, #F6F6F6 75%);
+  background: linear-gradient(to right, #f6f6f6 25%, #e4e7e9 50%, #f6f6f6 75%);
   background-size: 200% 100%;
   margin-bottom: 8px;
   border-radius: 4px;
@@ -290,7 +296,7 @@ ptc-link, ptc-square-card,
 .skeleton-long-image {
   width: 100%;
   height: 450px;
-  background: linear-gradient(to right, #F6F6F6 25%, #E4E7E9 50%, #F6F6F6 75%);
+  background: linear-gradient(to right, #f6f6f6 25%, #e4e7e9 50%, #f6f6f6 75%);
   background-size: 200% 100%;
   margin-bottom: var(--ptc-layout-spacing-06);
   border-radius: 4px;
@@ -323,10 +329,10 @@ ptc-link, ptc-square-card,
 
 .skeleton-home-page {
   width: 100%;
-  background-color: #FFF;
+  background-color: #fff;
 }
 .skeleton-home-page .skeleton-jumbo {
-  background-color: #F6F6F6;
+  background-color: #f6f6f6;
   padding-top: 2rem;
   margin-bottom: 0;
   min-height: 629px;
@@ -798,10 +804,10 @@ ptc-link, ptc-square-card,
 }
 
 .skeleton-on-demand {
-  background-color: #20262A;
+  background-color: #20262a;
 }
 .skeleton-on-demand .skeleton-block {
-  background: linear-gradient(to right, #32373B 25%, var(--color-gray-09) 50%, #32373B 75%);
+  background: linear-gradient(to right, #32373b 25%, var(--color-gray-09) 50%, #32373b 75%);
   background-size: 200% 100%;
   margin-bottom: 8px;
   border-radius: 4px;
@@ -2139,7 +2145,7 @@ ptc-link, ptc-square-card,
   position: absolute;
   height: 130px;
   width: 100%;
-  background-color: #F3F3F3;
+  background-color: #f3f3f3;
   bottom: -1px;
 }
 .preloader-events-listing .grid-2 {
@@ -2668,10 +2674,10 @@ ptc-link, ptc-square-card,
   right: 0;
   width: 100%;
   height: 100%;
-  background: #F3F3F3;
+  background: #f3f3f3;
 }
 .ppc-skeleton-preloader .dots-loader {
-  color: var(--Green-6, #33A13C);
+  color: var(--Green-6, #33a13c);
   width: 4px;
   aspect-ratio: 1;
   border-radius: 50%;
@@ -2900,7 +2906,7 @@ ptc-link, ptc-square-card,
 }
 
 .preloader-ppc-embedded-form {
-  background: var(--Gray-3, #BEC6CA);
+  background: var(--Gray-3, #bec6ca);
 }
 @media only screen and (max-width: 991.5px) {
   .preloader-ppc-embedded-form .is-grid {
@@ -2914,7 +2920,7 @@ ptc-link, ptc-square-card,
 }
 .preloader-ppc-embedded-form .form-block-2 {
   border-radius: 4px;
-  background: #FFF;
+  background: #fff;
   margin-bottom: 111px;
   height: 533px;
   width: 336px;
@@ -3363,7 +3369,7 @@ ptc-link, ptc-square-card,
   margin-bottom: 10px;
 }
 .preloader-store-listing-page .desktop-grid .search-filters .div-filter {
-  border-top: solid 1px #E4E7E9;
+  border-top: solid 1px #e4e7e9;
   padding: 20px 0;
 }
 .preloader-store-listing-page .desktop-grid .search-filters .div-filter .div-filter-top {
@@ -3417,7 +3423,7 @@ ptc-link, ptc-square-card,
   padding: 0px;
   padding-bottom: 10px;
   margin-bottom: 20px;
-  border-bottom: solid 2px #E4E7E9;
+  border-bottom: solid 2px #e4e7e9;
 }
 .preloader-store-listing-page .desktop-grid .desktop-cards-wrapper .div-top-lines .block-1 {
   width: 10%;
@@ -3443,7 +3449,7 @@ ptc-link, ptc-square-card,
   justify-content: space-between;
   padding: 0px;
   padding-bottom: 10px;
-  border-bottom: solid 2px #E4E7E9;
+  border-bottom: solid 2px #e4e7e9;
 }
 .preloader-store-listing-page .mobile-cards-wrapper .div-top-lines .block-1 {
   width: 49px;
@@ -3468,7 +3474,7 @@ ptc-link, ptc-square-card,
   }
 }
 .preloader-store-listing-page .cards-div {
-  border-bottom: solid 2px #E4E7E9;
+  border-bottom: solid 2px #e4e7e9;
 }
 .preloader-store-listing-page .cards-div .cards-div-block {
   padding-top: 27px;
@@ -3604,7 +3610,7 @@ ptc-link, ptc-square-card,
   position: relative;
   z-index: 3;
   border-radius: 4px;
-  background: #FFF;
+  background: #fff;
   padding: 40px;
 }
 @media only screen and (min-width: 768px) {
@@ -3667,7 +3673,7 @@ ptc-link, ptc-square-card,
   margin-top: 56px;
   position: relative;
   border-radius: 4px;
-  background: #FFF;
+  background: #fff;
   padding: 40px;
 }
 .preloader-store-detail-page .div-content .border-line {