@ptcwebops/ptcw-design 0.8.4 → 0.8.7

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.css

@@ -1,6 +1,7 @@
 :host {
   display: block;
   position: relative;
+  width: 100%;
   padding: var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);
   color: var(--color-white);
 }
@@ -24,8 +25,6 @@
 }
 :host .tcb-top-slit {
   fill: #f3f3f3;
-  -webkit-transform: scaleX(-1);
-  -ms-transform: scaleX(-1);
   transform: scale(1.5, -1);
   position: absolute;
   top: -1px;
@@ -99,4 +98,156 @@
   :host(.tab-cta-with-background) .copy-bg-overlay-layer {
     background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%);
   }
+}
+
+:host(.bottom-right) .tcb-top-slit {
+  top: auto;
+  bottom: 0;
+  transform: scale(1.5, 1.5);
+}
+
+:host(.case-studies) {
+  min-height: 25rem;
+  height: auto;
+  margin-bottom: 10rem;
+  display: flex;
+  align-items: center;
+}
+@media only screen and (min-width: 768px) {
+  :host(.case-studies) {
+    min-height: 33.75rem;
+    height: auto;
+    margin-bottom: 0;
+    padding-top: var(--ptc-layout-spacing-06);
+  }
+}
+:host(.case-studies) .card-wrap {
+  position: relative;
+  border: 1px solid transparent;
+  width: 100%;
+  height: 100%;
+  max-width: 540px;
+  bottom: -13rem;
+}
+@media only screen and (min-width: 768px) {
+  :host(.case-studies) .card-wrap {
+    bottom: auto;
+  }
+}
+:host(.case-studies) .card-wrap::after {
+  position: absolute;
+  width: 0;
+  height: 1px;
+  content: "";
+  background: #fff;
+  top: 0px;
+  left: 0px;
+  animation: widthAnimate 0.2s linear 0.2s 1 forwards;
+}
+:host(.case-studies) .card-wrap::before {
+  position: absolute;
+  width: 1px;
+  height: 0;
+  content: "";
+  background: #fff;
+  top: 0px;
+  right: 0px;
+  animation: heightAnimate 0.2s linear 0.4s 1 forwards;
+}
+:host(.case-studies) .card-wrap .card-animated-border {
+  border: 1px solid transparent;
+  position: absolute;
+  left: -1px;
+  right: 0;
+  bottom: 0px;
+  top: -1px;
+  width: 100%;
+  height: 100%;
+  box-shadow: var(--ptc-shadow-x-small);
+}
+:host(.case-studies) .card-wrap .card-animated-border::after {
+  position: absolute;
+  width: 0;
+  height: 1px;
+  content: "";
+  background: #fff;
+  bottom: 0px;
+  right: 0px;
+  animation: widthAnimate 0.2s linear 0.6s 1 forwards;
+}
+:host(.case-studies) .card-wrap .card-animated-border::before {
+  position: absolute;
+  width: 1px;
+  height: 0;
+  content: "";
+  background: #fff;
+  bottom: 0px;
+  left: 0px;
+  animation: heightAnimate 0.2s linear 0.8s 1 forwards;
+}
+:host(.case-studies) .card-wrap .card-content {
+  opacity: 0;
+  animation: fadeIn 0.5s ease-in 0.9s 1 forwards;
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+}
+:host(.case-studies) .card-wrap .card-content .card-layout {
+  padding: var(--ptc-layout-spacing-04);
+  background-color: #fff;
+}
+@keyframes widthAnimate {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes heightAnimate {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: 100%;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+:host(.case-studies) .ptc-container-lg {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media only screen and (min-width: 480px) {
+  :host(.case-studies) .ptc-container-lg {
+    padding-left: var(--ptc-layout-spacing-03);
+    padding-right: var(--ptc-layout-spacing-03);
+  }
+}
+@media only screen and (min-width: 768px) {
+  :host(.case-studies) .ptc-container-lg {
+    padding-left: var(--ptc-layout-spacing-04);
+    padding-right: var(--ptc-layout-spacing-04);
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host(.case-studies) .ptc-container-lg {
+    padding-left: var(--ptc-element-spacing-08);
+    padding-right: var(--ptc-element-spacing-08);
+  }
+}
+@media only screen and (min-width: 1980px) {
+  :host(.case-studies) .ptc-container-lg {
+    padding-left: 0;
+    padding-right: 0;
+    max-width: 1900px;
+  }
 }

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js

@@ -5,16 +5,21 @@ export class PtcTextCopyWithBackground {
     this.backgroundImage = undefined;
     this.ImageAltText = undefined;
     this.topSlitBackgroundColor = undefined;
+    this.slitPosition = 'top-right';
     this.isBackgroundBlur = false;
+    this.overlay = true;
   }
   render() {
     const classMap = this.getCssClassMap();
     return (h(Host, { class: classMap }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur &&
-      h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })), h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, h("slot", null))));
+      h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })), this.overlay &&
+      h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" &&
+      h("div", { class: "ptc-container-lg" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: 'card-content' }))))), h("slot", null))));
   }
   getCssClassMap() {
     return {
-      [this.type]: true
+      [this.type]: true,
+      [this.slitPosition]: true
     };
   }
   static get is() { return "ptc-text-copy-with-background"; }
@@ -35,8 +40,8 @@ export class PtcTextCopyWithBackground {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background'",
-          "resolved": "\"hero-footer-cta\" | \"tab-cta-with-background\" | \"text-copy-with-background\"",
+          "original": "'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background' | 'case-studies'",
+          "resolved": "\"case-studies\" | \"hero-footer-cta\" | \"tab-cta-with-background\" | \"text-copy-with-background\"",
           "references": {}
         },
         "required": false,
@@ -100,6 +105,24 @@ export class PtcTextCopyWithBackground {
         "attribute": "top-slit-background-color",
         "reflect": false
       },
+      "slitPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",
+          "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) topSlitPosition: It will decide the position of ."
+        },
+        "attribute": "slit-position",
+        "reflect": false,
+        "defaultValue": "'top-right'"
+      },
       "isBackgroundBlur": {
         "type": "boolean",
         "mutable": false,
@@ -117,6 +140,24 @@ export class PtcTextCopyWithBackground {
         "attribute": "is-background-blur",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "overlay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) overlay: If true,it will add black overlay with 0.55 opacity"
+        },
+        "attribute": "overlay",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -48,6 +48,14 @@ div.dotted h6::before {
   display: block;
   border-top: 3px dashed var(--color-green-07);
 }
+div.solid h1,
+div.solid h2,
+div.solid h3,
+div.solid h4,
+div.solid h5,
+div.solid h6 {
+  padding-top: 4px;
+}
 div.solid h1::before,
 div.solid h2::before,
 div.solid h3::before,
@@ -58,7 +66,7 @@ div.solid h6::before {
   position: absolute;
   width: 100%;
   height: 0.7px;
-  background-color: var(--color-gray-07);
+  background-color: var(--color-gray-03);
   opacity: 0.9;
   left: 0px;
 }
@@ -70,10 +78,10 @@ div.solid h5::after,
 div.solid h6::after {
   content: "";
   position: absolute;
-  width: 20%;
+  width: 56px;
   height: 2px;
   background-color: var(--color-green-07);
-  top: -2px;
+  top: 2px;
   left: 0px;
 }
 div.is-standard h1,
@@ -262,14 +270,9 @@ div.xxxx-large h1, div.xxxx-large h2, div.xxxx-large h3, div.xxxx-large h4, div.
     font-size: var(--ptc-font-size-xxxx-large);
   }
 }
-div.xxxx-large-2 h1, div.xxxx-large-2 h2, div.xxxx-large-2 h3, div.xxxx-large-2 h4, div.xxxx-large-2 h5, div.xxxx-large-2 h6 {
+div.xx-large-allbp h1, div.xx-large-allbp h2, div.xx-large-allbp h3, div.xx-large-allbp h4, div.xx-large-allbp h5, div.xx-large-allbp h6 {
   font-size: var(--ptc-font-size-xx-large);
 }
-@media only screen and (min-width: 768px) {
-  div.xxxx-large-2 h1, div.xxxx-large-2 h2, div.xxxx-large-2 h3, div.xxxx-large-2 h4, div.xxxx-large-2 h5, div.xxxx-large-2 h6 {
-    font-size: var(--ptc-font-size-xxxx-large);
-  }
-}
 div.xxxx-large-allbp h1, div.xxxx-large-allbp h2, div.xxxx-large-allbp h3, div.xxxx-large-allbp h4, div.xxxx-large-allbp h5, div.xxxx-large-allbp h6 {
   font-size: var(--ptc-font-size-xxxx-large);
 }
@@ -311,4 +314,7 @@ div.ellipsis-boxing h1, div.ellipsis-boxing h2, div.ellipsis-boxing h3, div.elli
   text-overflow: ellipsis;
   overflow-wrap: break-word;
   padding-bottom: 0;
+}
+div.block h1, div.block h2, div.block h3, div.block h4, div.block h5, div.block h6 {
+  display: block;
 }

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

@@ -13,6 +13,7 @@ export class PtcTitle {
     this.titleHeight = 'paragraph';
     this.styles = undefined;
     this.ellipsisLineCutoff = undefined;
+    this.titleDisplay = 'inline-block';
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -37,7 +38,6 @@ export class PtcTitle {
       default:
         TagType = 'h2';
     }
-    ;
     return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { style: cutOff }, h("slot", null)))));
   }
   getCssClassMap() {
@@ -51,14 +51,15 @@ export class PtcTitle {
       [this.titleSize]: !!this.titleSize ? true : false,
       [this.titleHeight]: !!this.titleHeight ? true : false,
       [this.titleColor]: !!this.titleColor ? true : false,
-      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0
+      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+      [this.titleDisplay]: !!this.titleDisplay ? true : false,
     };
   }
   getLineCuttoff() {
     let result;
     if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
       result = {
-        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`
+        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
       };
     }
     return result;
@@ -221,8 +222,8 @@ export class PtcTitle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'xxxx-large-allbp' | 'xxxx-large-2'",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\" | \"xxxx-large-2\" | \"xxxx-large-allbp\"",
+          "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'xxxx-large-allbp' | 'xx-large-allbp'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-large-allbp\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\" | \"xxxx-large-allbp\"",
           "references": {}
         },
         "required": false,
@@ -285,6 +286,24 @@ export class PtcTitle {
         },
         "attribute": "ellipsis-line-cutoff",
         "reflect": false
+      },
+      "titleDisplay": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'block' | 'inline-block'",
+          "resolved": "\"block\" | \"inline-block\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title heading display : To show line above heading full width or title width"
+        },
+        "attribute": "title-display",
+        "reflect": false,
+        "defaultValue": "'inline-block'"
       }
     };
   }

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

@@ -109,4 +109,14 @@
 .tooltip::after {
   content: "";
   position: absolute;
+}
+
+.ellipsis-by-line-boxing {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  padding-bottom: 0;
 }

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

@@ -3,29 +3,51 @@ export class PtcTooltip {
   constructor() {
     this.textDisplay = 'inline';
     this.maxLength = 45;
+    this.textLines = undefined;
     this.description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ';
     this.zIndex = 'z-auto';
     this.position = 'bottom';
     this.styles = undefined;
   }
+  addTruncatedClass() {
+    const appRoot = this.el.shadowRoot;
+    const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
+    text.forEach(t => {
+      t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
+    });
+  }
+  componentDidLoad() {
+    this.addTruncatedClass();
+  }
   render() {
     const classMap = this.getCssClassMap();
+    const cutOff = this.getLineCuttoff();
     let truncatedText = this.description.substring(0, this.maxLength);
     if (this.description.length > this.maxLength) {
       const lastSpace = truncatedText.lastIndexOf(' ');
       truncatedText = truncatedText.substring(0, lastSpace);
       truncatedText += '... ';
+      "";
     }
-    return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: classMap }, truncatedText), h("div", { class: `tooltip ${this.position}` }, this.description)));
+    return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), this.textLines > 0 && !!this.textLines ? h("div", { class: "ellipsis-by-line-boxing", style: cutOff }, this.description) : h("div", { class: classMap }, truncatedText), h("div", { class: `tooltip ${this.position}` }, this.description)));
   }
   getCssClassMap() {
     return {
-      // [this.textLines]: true,
+      // ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
       ['text-ellipsis']: true,
       [this.zIndex]: this.description.length > this.maxLength ? true : false,
-      ['truncated']: this.description.length > this.maxLength ? true : false
+      ['truncated']: this.description.length > this.maxLength && !this.textLines ? true : false,
     };
   }
+  getLineCuttoff() {
+    let result;
+    if (this.textLines && this.textLines > 0) {
+      result = {
+        ['-webkit-line-clamp']: `${this.textLines}`,
+      };
+    }
+    return result;
+  }
   static get is() { return "ptc-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -76,6 +98,26 @@ export class PtcTooltip {
         "reflect": false,
         "defaultValue": "45"
       },
+      "textLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "returns",
+              "text": "string"
+            }],
+          "text": "Ellipsis apply to X lines"
+        },
+        "attribute": "text-lines",
+        "reflect": false
+      },
       "description": {
         "type": "string",
         "mutable": false,
@@ -150,4 +192,13 @@ export class PtcTooltip {
     };
   }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "addTruncatedClass",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

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

@@ -20,6 +20,12 @@ export const ListItem: {
   new (): ListItem;
 };
 
+interface MaxWidthContainer extends Components.MaxWidthContainer, HTMLElement {}
+export const MaxWidthContainer: {
+  prototype: MaxWidthContainer;
+  new (): MaxWidthContainer;
+};
+
 interface MyComponent extends Components.MyComponent, HTMLElement {}
 export const MyComponent: {
   prototype: MyComponent;
@@ -44,6 +50,12 @@ export const PtcAnnouncement: {
   new (): PtcAnnouncement;
 };
 
+interface PtcBackgroundVideo extends Components.PtcBackgroundVideo, HTMLElement {}
+export const PtcBackgroundVideo: {
+  prototype: PtcBackgroundVideo;
+  new (): PtcBackgroundVideo;
+};
+
 interface PtcBreadcrumb extends Components.PtcBreadcrumb, HTMLElement {}
 export const PtcBreadcrumb: {
   prototype: PtcBreadcrumb;