@ptcwebops/ptcw-design 0.8.4 → 0.8.6

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

@@ -28,6 +28,9 @@
 .box .line5 {
   -webkit-line-clamp: 5;
 }
+.box .line10 {
+  -webkit-line-clamp: 10;
+}
 .box input ~ label {
   display: block;
   position: relative;
@@ -40,7 +43,7 @@
   text-decoration-line: underline;
   color: var(--color-blue-07);
   text-align: right;
-  transform: translateX(-36px);
+  margin-right: var(--ptc-element-spacing-07);
 }
 .box .z-auto {
   z-index: auto;
@@ -58,9 +61,61 @@
   z-index: 999;
 }
 .box input:checked + .read-more-text {
-  -webkit-line-clamp: unset;
+  -webkit-line-clamp: unset !important;
 }
-.box input:checked ~ label,
 .box .read-more-text:not(.truncated) ~ label {
   display: none;
+}
+.box .show-less-cta {
+  display: block !important;
+}
+
+:host .box.add-icon .read-more-cta-label span {
+  display: inline-block;
+  position: relative;
+  padding-right: var(--ptc-element-spacing-03);
+}
+:host .box.add-icon .read-more-cta-label span::after {
+  content: "";
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2300890B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  width: 10px;
+  height: 7px;
+  background-size: cover;
+  position: absolute;
+  right: -5px;
+  bottom: 7px;
+}
+:host .box.add-icon .read-more-cta-label.show-less-cta span::after {
+  transform: rotate(180deg);
+}
+:host .box.blue .read-more-cta-label {
+  color: var(--color-blue-07);
+}
+:host .box.gray .read-more-cta-label {
+  color: var(--color-gray-10);
+}
+:host .box.green .read-more-cta-label {
+  color: var(--color-green-07);
+}
+:host .box.initial .read-more-cta-label {
+  color: initial;
+}
+:host .box.small .read-more-cta-label {
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
+}
+:host .box.medium .read-more-cta-label {
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-p);
+}
+:host .box.large .read-more-cta-label {
+  font-size: var(--ptc-font-size-large);
+  line-height: var(--ptc-line-height-p);
+}
+:host .box.large.add-icon .read-more-cta-label span {
+  padding-right: var(--ptc-element-spacing-04);
+}
+:host .box.large.add-icon .read-more-cta-label span::after {
+  width: 15px;
+  height: 10px;
 }

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

@@ -2,9 +2,16 @@ import { Host, h } from '@stencil/core';
 export class PtcReadmore {
   constructor() {
     this.moreText = 'read more';
+    this.lessText = undefined;
+    this.readMorePosition = 'right';
     this.display = 'inline';
     this.visibleLines = 'line2';
+    this.visibleLinesCustom = undefined;
     this.zIndex = 'z-auto';
+    this.checked = false;
+    this.size = 'small';
+    this.isIcon = false;
+    this.color = 'blue';
   }
   addBtnTruncated() {
     const appRoot = this.el.shadowRoot;
@@ -16,13 +23,30 @@ export class PtcReadmore {
   componentDidLoad() {
     this.addBtnTruncated();
   }
+  // click event handler
+  handleClick(event) {
+    ;
+    this.addBtnTruncated();
+    // check if the input box is checked
+    this.checked = event.target.checked;
+    // Getting cta element
+    const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
+    // Updating the cta text 
+    this.checked
+      ? cta.innerHTML = `<span> ${this.lessText ? this.lessText : ''} </span>`
+      : cta.innerHTML = `<span> ${this.moreText ? this.moreText : ''}</span>`;
+    this.checked ? cta.classList.add('show-less-cta') : cta.classList.remove('show-less-cta');
+  }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded" }), h("p", { class: `read-more-text ${this.visibleLines}` }, h("slot", null)), h("label", { htmlFor: "expanded", role: "button", class: this.zIndex }, this.moreText))));
+    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e) }), h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, h("slot", null)), h("label", { htmlFor: "expanded", role: "button", class: `${this.zIndex} read-more-cta-label`, style: { textAlign: `${this.readMorePosition}` } }, h("span", null, this.moreText)))));
   }
   getCssClassMap() {
     return {
       ['box']: true,
+      [this.color]: true,
+      [this.size]: true,
+      ['add-icon']: this.isIcon
     };
   }
   static get is() { return "ptc-readmore"; }
@@ -41,14 +65,14 @@ export class PtcReadmore {
     return {
       "moreText": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "customize read more text"
@@ -57,6 +81,41 @@ export class PtcReadmore {
         "reflect": false,
         "defaultValue": "'read more'"
       },
+      "lessText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "customize less more text"
+        },
+        "attribute": "less-text",
+        "reflect": false
+      },
+      "readMorePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Read more text position: left or right"
+        },
+        "attribute": "read-more-position",
+        "reflect": false,
+        "defaultValue": "'right'"
+      },
       "display": {
         "type": "string",
         "mutable": false,
@@ -82,8 +141,8 @@ export class PtcReadmore {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'",
-          "resolved": "\"line1\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
+          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'  | 'line10'",
+          "resolved": "\"line1\" | \"line10\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
           "references": {}
         },
         "required": false,
@@ -96,6 +155,23 @@ export class PtcReadmore {
         "reflect": false,
         "defaultValue": "'line2'"
       },
+      "visibleLinesCustom": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "visible lines custom numebr"
+        },
+        "attribute": "visible-lines-custom",
+        "reflect": false
+      },
       "zIndex": {
         "type": "string",
         "mutable": false,
@@ -113,6 +189,78 @@ export class PtcReadmore {
         "attribute": "z-index",
         "reflect": false,
         "defaultValue": "'z-auto'"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Input element state"
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size: Font size of the read more text. Options small=16px | medium=18px | large=24px"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'small'"
+      },
+      "isIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon: if true show up/down icon besides text"
+        },
+        "attribute": "is-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'blue' | 'gray' | 'green' | 'initial'",
+          "resolved": "\"blue\" | \"gray\" | \"green\" | \"initial\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "color: Read more text color. Options: default is blue.  'blue' | 'gray' | 'green' | 'initial'"
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'blue'"
       }
     };
   }

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'"
       }
     };
   }