@ptcwebops/ptcw-design 2.2.3 → 2.2.5

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

@@ -6,6 +6,7 @@ export class PtcCardPlm {
     this.linkTitle = undefined;
     this.linkTarget = '_self';
     this.isLoading = false;
+    this.styles = undefined;
   }
   handleResize() {
     this.checkScreenSize();
@@ -38,7 +39,7 @@ export class PtcCardPlm {
   render() {
     const classMap = this.getCssClassMap();
     const Tag = !!this.cardLink ? 'a' : 'div';
-    return (h(Host, Object.assign({ class: classMap }, (!this.isLoading ? { onMouseEnter: this.hoverEventHandler.bind(this) } : {}), (!this.isLoading ? { onMouseLeave: this.leaveEventHandler.bind(this) } : {})), h(Tag, Object.assign({}, (!!this.cardLink && !this.isLoading ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink && !this.isLoading ? { target: this.linkTarget } : {}), (!!this.cardLink && !this.isLoading ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), h("slot", null))));
+    return (h(Host, Object.assign({ class: classMap }, (!this.isLoading ? { onMouseEnter: this.hoverEventHandler.bind(this) } : {}), (!this.isLoading ? { onMouseLeave: this.leaveEventHandler.bind(this) } : {})), this.styles && h("style", null, this.styles), h(Tag, Object.assign({}, (!!this.cardLink && !this.isLoading ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink && !this.isLoading ? { target: this.linkTarget } : {}), (!!this.cardLink && !this.isLoading ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), h("slot", null))));
   }
   getCssClassMap() {
     return {
@@ -83,8 +84,8 @@ export class PtcCardPlm {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'card-video' | 'card-tall' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-2up' | 'extra-tall' | 'color-outlined' | 'result-box'",
-          "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"extra-tall\" | \"result-box\" | \"speed-bump\"",
+          "original": "'card-video' | 'card-tall' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-2up' | 'extra-tall' | 'color-outlined' | 'result-box' | 'simple-card'",
+          "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"extra-tall\" | \"result-box\" | \"simple-card\" | \"speed-bump\"",
           "references": {}
         },
         "required": false,
@@ -165,6 +166,23 @@ export class PtcCardPlm {
         "attribute": "is-loading",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS Styles"
+        },
+        "attribute": "styles",
+        "reflect": false
       }
     };
   }

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

@@ -19,6 +19,7 @@
   justify-content: flex-start;
   align-items: center;
   padding: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);
+  flex: 0 0 310px;
 }
 @media only screen and (min-width: 1440px) {
   :host(.sequential) .card-mobile ptc-card-content, :host(.sequential) .card-dt-open ptc-card-content {
@@ -29,7 +30,7 @@
   }
 }
 :host(.sequential) .card-mobile ptc-picture, :host(.sequential) .card-dt-open ptc-picture {
-  flex-basis: 62%;
+  flex: 0 1 auto;
 }
 :host(.sequential) .card-mobile .card-title h3, :host(.sequential) .card-dt-open .card-title h3 {
   color: var(--color-white);
@@ -95,7 +96,7 @@
 :host(.sequential) .card-dt-open {
   border-top: 5px solid var(--color-green-05);
   display: flex;
-  width: 45vw;
+  width: 100%;
   height: 480px;
   transition: width var(--ptc-transition-x-fast) var(--ptc-ease-out);
 }

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

@@ -0,0 +1,137 @@
+:host {
+  display: block;
+  /* 480px */
+  /* 768px */
+  /* 992px */
+  /* 1200px */
+  /* 1400px */
+  /* 1980px */
+  /* 2600px */
+}
+:host .card-rail-container {
+  position: fixed;
+  bottom: 132px;
+  left: 24px;
+  width: calc(100vw - 48px);
+  background: white;
+  border-radius: var(--ptc-border-radius-standard);
+  box-shadow: var(--ptc-shadow-small);
+  box-sizing: border-box;
+  z-index: 50;
+}
+:host .card-rail-header {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: var(--color-gray-02) solid 1px;
+}
+:host .card-rail-heading {
+  margin: 12px 0 12px 16px;
+}
+:host .card-rail-close {
+  padding: 15px;
+}
+:host .card-rail-content {
+  display: flex;
+  align-items: center;
+}
+:host .card-rail-content icon-asset {
+  position: absolute;
+  z-index: 55px;
+  padding: 13px;
+  /* Hit area */
+}
+:host .card-rail-content icon-asset#left-arrow {
+  left: 3px;
+  /* [Expected(16) - HitAreaPadding(13)] */
+}
+:host .card-rail-content icon-asset#right-arrow {
+  right: 3px;
+}
+:host .card-rail-content .content-container {
+  margin: 24px 50px 24px 50px;
+  /* [ArrowLeft(16) + ArrowWidth(18) + ArrowRight(16)] = 50 */
+  display: flex;
+  overflow-x: hidden;
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
+}
+:host .card-rail-content .content-container::-webkit-scrollbar {
+  display: none;
+}
+:host .card-rail-content .content-container .content {
+  width: 100%;
+  flex: 1 0 100%;
+  display: flex;
+}
+:host .card-rail-content .content-container .content:hover {
+  cursor: pointer;
+}
+:host .card-rail-content .content-container .content .content-image {
+  width: 130px;
+  height: 73px;
+  text-align: center;
+}
+:host .card-rail-content .content-container .content .content-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+:host .card-rail-content .content-container .content .content-text {
+  flex: 1;
+  padding-left: 12px;
+}
+@media only screen and (min-width: 768px) {
+  :host .card-rail-container .card-rail-content icon-asset#left-arrow {
+    left: 11px;
+  }
+  :host .card-rail-container .card-rail-content icon-asset#right-arrow {
+    right: 11px;
+  }
+  :host .card-rail-container .card-rail-content .content-container {
+    margin: 24px 66px 24px 66px;
+    /* [ArrowLeft(24) + ArrowWidth(18) + ArrowRight(24)] = 66 */
+  }
+  :host .card-rail-container .card-rail-content .content-container .content {
+    flex: 1 0 50%;
+  }
+  :host .card-rail-container .card-rail-content .content-container .content .content-text {
+    padding-right: 16px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host .card-rail-container .card-rail-content icon-asset#left-arrow {
+    left: 19px;
+    /* [Expected(32) - HitAreaPadding(13)] */
+  }
+  :host .card-rail-container .card-rail-content icon-asset#right-arrow {
+    right: 19px;
+  }
+  :host .card-rail-container .card-rail-content .content-container {
+    margin: 24px 82px 24px 82px;
+    /* [ArrowLeft(32) + ArrowWidth(18) + ArrowRight(32)] = 82 */
+  }
+}
+@media only screen and (min-width: 1200px) {
+  :host .card-rail-container {
+    left: 134px;
+    width: calc(100vw - 268px);
+  }
+}
+@media only screen and (min-width: 1440px) {
+  :host .card-rail-container {
+    left: 32px;
+    width: 932px;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  :host .card-rail-container {
+    left: 32px;
+    width: 1328px;
+  }
+  :host .card-rail-container .card-rail-content .content-container .content {
+    flex: 1 0 33.33%;
+  }
+}

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js

@@ -0,0 +1,190 @@
+import { Host, h } from '@stencil/core';
+export class PtcRelatedCardRail {
+  constructor() {
+    this.setScreenBasedProps = () => {
+      let windowWidth = window.innerWidth;
+      let props = {
+        contentContainerMargin: undefined,
+        contentCards: undefined,
+        parahFontSize: undefined
+      };
+      if (windowWidth >= 2600) {
+        props.contentCards = 3;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1980) {
+        props.contentCards = 3;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1440) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1200) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 992) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 768) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xxx-small';
+      }
+      else {
+        props.contentCards = 1;
+        props.parahFontSize = 'xxx-small';
+      }
+      this.screenBasedProps = Object.assign({}, props);
+    };
+    this.handlePrevClick = () => {
+      var _a, _b;
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      if (this.cardInView > 0) {
+        this.cardInView -= 1;
+        const content = contentCards[this.cardInView];
+        contentContainer.scrollTo({
+          left: content.offsetLeft - contentContainerMarginLeft,
+          behavior: "smooth"
+        });
+      }
+    };
+    this.handleNextClick = () => {
+      var _a, _b;
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
+        this.cardInView += 1;
+        const content = contentCards[this.cardInView];
+        contentContainer.scrollTo({
+          left: content.offsetLeft - contentContainerMarginLeft,
+          behavior: "smooth"
+        });
+      }
+    };
+    this.handleOnScrollBehaviour = () => {
+      if (!this.closed) {
+        let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
+        let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
+        let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
+        let trackLength = documentHeight - windowHeight;
+        let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
+        if (percentageSrolled >= 50) {
+          this.el.style.display = 'block';
+        }
+        else {
+          this.el.style.display = 'none';
+        }
+        let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
+        let pageFooter = document.querySelector(this.footerQuerySelector);
+        if (pageFooter) {
+          let pageFooterTop = pageFooter.getBoundingClientRect().top;
+          let windowBottom = window.innerHeight;
+          if (pageFooterTop <= windowBottom) {
+            let newBottom = 132 + (windowBottom - pageFooterTop);
+            cardRailContainer.style.bottom = `${newBottom}px`;
+          }
+        }
+      }
+    };
+    this.handleOnResizeBehaviour = () => {
+      var _a, _b;
+      this.setScreenBasedProps();
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      contentContainer.scrollTo({
+        left: contentCards[0].offsetLeft - contentContainerMarginLeft,
+      });
+      this.cardInView = 0;
+    };
+    this.footerQuerySelector = undefined;
+    this.closed = false;
+    this.cardInView = 0;
+    this.data = [];
+    this.screenBasedProps = {
+      contentContainerMargin: undefined,
+      contentCards: undefined,
+      parahFontSize: undefined
+    };
+  }
+  componentWillLoad() {
+    const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
+    for (let ind in relatedCards) {
+      let card = relatedCards[ind];
+      if (card.tagName === 'DIV') {
+        let cardData = {
+          image: undefined,
+          text: undefined,
+          href: undefined
+        };
+        let cardImage = card.querySelector('img');
+        let cardLink = card.querySelector('a');
+        cardData.image = cardImage.getAttribute('src');
+        cardData.text = cardLink.innerHTML;
+        cardData.href = cardLink.getAttribute('href');
+        this.data.push(cardData);
+        card.remove();
+      }
+    }
+    this.handleOnScrollBehaviour();
+  }
+  componentDidLoad() {
+    this.setScreenBasedProps();
+    window.addEventListener('scroll', this.handleOnScrollBehaviour);
+    window.addEventListener('resize', this.handleOnResizeBehaviour);
+  }
+  render() {
+    return (this.closed ? null :
+      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: "", src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
+  }
+  static get is() { return "ptc-related-card-rail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-related-card-rail.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-related-card-rail.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "footerQuerySelector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Query selector of page footer above which the related card rail will unstick"
+        },
+        "attribute": "footer-query-selector",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "closed": {},
+      "cardInView": {},
+      "data": {},
+      "screenBasedProps": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/custom-elements/index.d.ts

@@ -464,6 +464,12 @@ export const PtcReadmoreChar: {
   new (): PtcReadmoreChar;
 };
 
+interface PtcRelatedCardRail extends Components.PtcRelatedCardRail, HTMLElement {}
+export const PtcRelatedCardRail: {
+  prototype: PtcRelatedCardRail;
+  new (): PtcRelatedCardRail;
+};
+
 interface PtcResponsiveWrapper extends Components.PtcResponsiveWrapper, HTMLElement {}
 export const PtcResponsiveWrapper: {
   prototype: PtcResponsiveWrapper;