@ptcwebops/ptcw-design 6.4.28-beta → 6.4.30-beta

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

@@ -32,6 +32,8 @@ export class PtcModal {
     this.rounded = false;
     this.hideContainer = false;
     this.showHeaderFooter = false;
+    this.hideHeader = false;
+    this.modernScrollbar = false;
     this.overlayHeight = undefined;
     this.borderRadius = "standard";
     this.isBioModal = false;
@@ -281,13 +283,18 @@ export class PtcModal {
       ]
       : null, this.showHeaderFooter
       ? [
-        h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
-        h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
+        !this.hideHeader && (h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn)),
+        this.hideHeader && closebtn,
+        h("div", { class: `modal-body ${this.modernScrollbar
+            ? "modern-scrollbar"
+            : ""}`, onScroll: () => this.handleScroll() }, content),
         h("div", { class: "modal-footer" }, h("slot", { name: "footer" })),
       ]
       : [
         closebtn,
-        h("div", { class: "modal-body" }, content),
+        h("div", { class: `modal-body ${this.modernScrollbar
+            ? "modern-scrollbar"
+            : ""}` }, content),
       ], this.modalType === "event-listing" &&
       this.bottomCloseBtn
       ? [bottomCloseBtnEle]
@@ -530,6 +537,42 @@ export class PtcModal {
         "reflect": false,
         "defaultValue": "false"
       },
+      "hideHeader": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets if popup should hide header"
+        },
+        "attribute": "hide-header",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "modernScrollbar": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Use modern scrollbar styling for the modal body."
+        },
+        "attribute": "modern-scrollbar",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "borderRadius": {
         "type": "string",
         "mutable": true,

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

@@ -169,6 +169,10 @@ ptc-footer {
   background: linear-gradient(180deg, transparent 0%, transparent 100%);
 }
 
+:host(.white-bottom) {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, #fff 100%);
+}
+
 :host(.radius-standard) {
   border-radius: var(--ptc-border-radius-standard);
 }

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

@@ -38,7 +38,7 @@ export class PtcOverlay {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"blue\"\r\n\t\t| \"red\"\r\n\t\t| \"orange\"\r\n\t\t| \"green\"\r\n\t\t| \"black-1\"\r\n\t\t| \"black-2\"\r\n\t\t| \"black-3\"\r\n\t\t| \"black-4\"\r\n\t\t| \"black-5\"\r\n\t\t| \"slate-grey\"\r\n\t\t| \"bright-blue\"\r\n\t\t| \"bright-red\"\r\n\t\t| \"bright-orange\"\r\n\t\t| \"bright-green\"\r\n\t\t| \"bright-slate-grey\"\r\n\t\t| \"solid-black-1\"\r\n\t\t| \"solid-black-2\"\r\n\t\t| \"hp-blue\"\r\n\t\t| \"hp-green\"\r\n\t\t| \"hp-red\"\r\n\t\t| \"hp-gray\"\r\n\t\t| \"hp-orange\"\r\n\t\t| \"transparent\"\r\n\t\t| string",
+          "original": "| \"blue\"\r\n\t\t| \"red\"\r\n\t\t| \"orange\"\r\n\t\t| \"green\"\r\n\t\t| \"black-1\"\r\n\t\t| \"black-2\"\r\n\t\t| \"black-3\"\r\n\t\t| \"black-4\"\r\n\t\t| \"black-5\"\r\n\t\t| \"slate-grey\"\r\n\t\t| \"bright-blue\"\r\n\t\t| \"bright-red\"\r\n\t\t| \"bright-orange\"\r\n\t\t| \"bright-green\"\r\n\t\t| \"bright-slate-grey\"\r\n\t\t| \"solid-black-1\"\r\n\t\t| \"solid-black-2\"\r\n\t\t| \"hp-blue\"\r\n\t\t| \"hp-green\"\r\n\t\t| \"hp-red\"\r\n\t\t| \"hp-gray\"\r\n\t\t| \"hp-orange\"\r\n\t\t| \"transparent\"\r\n\t\t| \"white-bottom\"\r\n\t\t| string",
           "resolved": "string",
           "references": {}
         },

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

@@ -5730,6 +5730,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

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

@@ -235,6 +235,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-product-category/ptc-product-category.css

@@ -235,6 +235,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

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

@@ -235,6 +235,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.css

@@ -235,6 +235,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css

@@ -235,6 +235,10 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
+.white-links a {
+  color: var(--color-white) !important;
+}
+
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

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

@@ -0,0 +1,100 @@
+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: flex;
+  flex-direction: column;
+  background-color: var(--color-white);
+  border-radius: var(--ptc-border-radius-standard);
+  /* Drop Shadow (X-Small) */
+  box-shadow: var(--ptc-shadow-x-small);
+  height: 100%;
+}
+:host .image-container {
+  height: 120px;
+  position: relative;
+}
+:host .content-container {
+  padding: 16px;
+  color: var(--color-gray-10);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  /* Paragraph Small */
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-p);
+}
+:host ::slotted(.store-card-logo) {
+  display: block;
+  max-height: 24px;
+  margin-bottom: 8px;
+}
+:host ::slotted(h4) {
+  margin: 0 0 var(--ptc-element-spacing-02) 0 !important;
+}
+:host ::slotted(a.store-card-title) {
+  display: block;
+  color: var(--color-gray-10);
+}
+:host ::slotted(p) {
+  margin-bottom: 0 !important;
+  font-size: var(--ptc-font-size-x-small) !important;
+}

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

@@ -0,0 +1,25 @@
+import { Host, h } from "@stencil/core";
+export class PtcStoreCard {
+  constructor() {
+    this.hasTopImage = false;
+  }
+  componentWillLoad() {
+    this.hasTopImage = !!this.el.querySelector('[slot="top-image"]');
+  }
+  render() {
+    return (h(Host, null, this.hasTopImage && (h("div", { class: "image-container" }, h("slot", { name: "top-image" }))), h("div", { class: "content-container" }, h("slot", null))));
+  }
+  static get is() { return "ptc-store-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-store-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-store-card.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+}