@ptcwebops/ptcw-design 2.2.9 → 2.3.2

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

@@ -0,0 +1,215 @@
+:host {
+  display: block;
+}
+@media only screen and (min-width: 360px) {
+  :host .quiz-slide-container {
+    position: relative;
+    width: 100%;
+    border: 1px solid var(--color-gray-12);
+  }
+  :host .quiz-slide-container .quiz-slide-text-container {
+    max-width: calc(24 * var(--ptc-element-spacing-07));
+  }
+  :host .quiz-slide-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url("https://www.ptc.com/-/media/Development/Embedded-Vuforia-Quiz/vuforia-background-guide-01.svg");
+    background-size: cover;
+    background-position: center;
+    opacity: 0.25;
+    z-index: -1;
+  }
+  :host .quiz-slide-initial {
+    padding: var(--ptc-element-spacing-08);
+    display: flex;
+    justify-content: center;
+  }
+  :host .quiz-slide-initial #initial-quiz-p {
+    padding: 0 0 calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04)) 0;
+  }
+  :host .quiz-slide-result .cta-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  :host .quiz-slide-result .cta-container ptc-button {
+    flex: 1 0 100%;
+    margin: 0 0 var(--ptc-element-spacing-05) 0;
+  }
+  :host .right-button-container {
+    display: flex;
+    justify-content: right;
+  }
+  :host .right-button-container .restart-quiz-button {
+    display: flex;
+    margin: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) 0 0;
+    transition: var(--ptc-transition-slow);
+  }
+  :host .right-button-container .restart-quiz-button #restart-arrow {
+    display: flex;
+    align-items: center;
+  }
+  :host .right-button-container .restart-quiz-button #restart-arrow svg {
+    margin-right: var(--ptc-element-spacing-03);
+  }
+  :host .right-button-container .restart-quiz-button:hover {
+    cursor: pointer;
+  }
+  :host .right-button-container .restart-quiz-button:hover #restart-arrow svg {
+    transform: rotate(270deg);
+  }
+  :host .right-button-container .restart-quiz-button:hover ptc-para {
+    opacity: 0.7;
+  }
+  :host .center-button-container {
+    display: flex;
+    justify-content: center;
+  }
+  :host .previous-slide-button {
+    display: flex;
+    align-items: center;
+    margin: 0 0 var(--ptc-element-spacing-06) 0;
+    transition: var(--ptc-transition-slow);
+  }
+  :host .previous-slide-button icon-asset {
+    display: flex;
+    align-items: center;
+    margin-right: var(--ptc-element-spacing-03);
+  }
+  :host .previous-slide-button:hover {
+    cursor: pointer;
+  }
+  :host .previous-slide-button:hover icon-asset svg {
+    transform: translateX(-8px);
+  }
+  :host .previous-slide-button:hover ptc-para {
+    opacity: 0.7;
+  }
+  :host .quiz-slide-dual-layout .image-container {
+    padding-top: var(--ptc-element-spacing-06);
+    display: flex;
+    justify-content: center;
+    height: calc(4 * var(--ptc-element-spacing-08));
+    width: 100%;
+  }
+  :host .quiz-slide-dual-layout .image-container img {
+    height: 100%;
+    width: 100%;
+  }
+  :host .quiz-slide-dual-layout .content-container {
+    margin: var(--ptc-element-spacing-06) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08);
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container {
+    padding-left: var(--ptc-element-spacing-05);
+    display: flex;
+    flex-wrap: wrap;
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input {
+    flex: 1 0 100%;
+    margin-bottom: var(--ptc-element-spacing-06);
+    display: flex;
+    align-items: start;
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input input[type=radio] {
+    width: 16px;
+    height: 16px;
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input input[type=radio]:hover {
+    cursor: pointer;
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input input[type=radio]:hover:before {
+    box-shadow: 0px 0px 0px 2px var(--color-gray-05);
+    border-radius: 50%;
+    opacity: 0.7;
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input input[type=radio]:before {
+    content: "";
+    display: block;
+    width: 60%;
+    height: 60%;
+    margin: 10%;
+    padding: 10%;
+    border-radius: 50%;
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input input[type=radio]:checked:before {
+    background: inherit;
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input .option-label {
+    padding: 0 var(--ptc-element-spacing-02) 0 var(--ptc-element-spacing-03);
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input .option-label:hover {
+    cursor: pointer;
+  }
+}
+@media only screen and (min-width: 768px) {
+  :host .quiz-slide-initial #initial-quiz-p {
+    padding: 0 0 calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04)) 0;
+  }
+  :host .quiz-slide-dual-layout {
+    margin: 0 var(--ptc-element-spacing-06) 0 var(--ptc-element-spacing-06);
+  }
+  :host .quiz-slide-dual-layout .image-container {
+    height: calc(9 * var(--ptc-element-spacing-06));
+    width: 100%;
+  }
+  :host .quiz-slide-dual-layout .image-container img {
+    height: 100%;
+    width: auto;
+  }
+  :host .quiz-slide-dual-layout .content-container {
+    margin: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-08) var(--ptc-element-spacing-06);
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input {
+    flex: 1 0 48%;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host .quiz-slide-initial #initial-quiz-p {
+    padding: 0 0 calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04)) 0;
+  }
+  :host .quiz-slide-dual-layout .image-container {
+    height: calc(8 * var(--ptc-element-spacing-07));
+    width: auto;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  :host .quiz-slide-initial #initial-quiz-p {
+    padding: 0 0 calc(var(--ptc-element-spacing-01) + var(--ptc-element-spacing-06)) 0;
+  }
+  :host .quiz-slide-result .cta-container {
+    flex-direction: row;
+  }
+  :host .quiz-slide-result .cta-container ptc-button {
+    flex: none;
+    margin: 0 var(--ptc-element-spacing-05) 0 0;
+  }
+  :host .quiz-slide-dual-layout {
+    display: flex;
+    margin-bottom: var(--ptc-element-spacing-08);
+  }
+  :host .quiz-slide-dual-layout .image-container {
+    display: flex;
+    align-items: center;
+    height: calc(7 * var(--ptc-element-spacing-07));
+    width: calc(15 * var(--ptc-element-spacing-07));
+  }
+  :host .quiz-slide-dual-layout .image-container img {
+    height: 100%;
+    max-height: calc(7 * var(--ptc-element-spacing-07));
+    max-width: calc(15 * var(--ptc-element-spacing-07));
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container {
+    padding-left: 0;
+  }
+  :host .quiz-slide-dual-layout .content-container .options-container .radio-input:nth-of-type(odd) {
+    margin-right: 4%;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  :host .quiz-slide-initial #initial-quiz-p {
+    padding: 0 0 var(--ptc-element-spacing-07) 0;
+  }
+}

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

@@ -0,0 +1,92 @@
+import { Host, h, Fragment } from '@stencil/core';
+export class PtcQuiz {
+  constructor() {
+    this.quiz = window.GetQuiz && window.GetQuiz();
+    this.additionalOptionOnClick = window.AdditionalOptionOnClick && window.AdditionalOptionOnClick();
+    this.slide = this.quiz;
+    this.traversal = [];
+  }
+  handleStartButtonClick() {
+    this.slide = this.slide["next"];
+    this.traversal.push("next");
+  }
+  handleRestartButtonClick() {
+    this.slide = this.quiz;
+    this.traversal = [];
+  }
+  handlePreviousButtonClick() {
+    let previousSlide = this.quiz;
+    for (let step of this.traversal.slice(0, this.traversal.length - 3)) {
+      previousSlide = previousSlide[step];
+    }
+    this.slide = previousSlide;
+    this.traversal = this.traversal.slice(0, this.traversal.length - 3);
+  }
+  handleQuestionOptionClick(dataModelId) {
+    let [option, optionInd] = [null, null];
+    let currentSlideOptions = this.slide["options"];
+    for (let ind in currentSlideOptions) {
+      if (currentSlideOptions[ind]["data-model-id"] === dataModelId) {
+        option = currentSlideOptions[ind];
+        optionInd = ind;
+        break;
+      }
+    }
+    this.additionalOptionOnClick(dataModelId);
+    this.traversal = [...this.traversal, "options", optionInd, "next"];
+    let nextImage = new Image();
+    nextImage.src = option["next"]["image"];
+    nextImage.onload = () => {
+      this.slide = option["next"];
+    };
+  }
+  render() {
+    const QuizSlideRestartButton = () => {
+      return h("div", { class: "right-button-container" }, h("div", { class: "restart-quiz-button", onClick: () => this.handleRestartButtonClick() }, h("icon-asset", { id: "restart-arrow", type: "ptc", size: "small", name: "quiz-arrow-restart" }), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Restart")));
+    };
+    const QuizSlidePreviousButton = () => {
+      return h("div", { class: "center-button-container" }, h("div", { class: "previous-slide-button", onClick: () => this.handlePreviousButtonClick() }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "medium", name: "quiz-arrow-left", onClick: () => { } }), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Previous")));
+    };
+    const QuizInitialSlide = () => {
+      return (h("div", { class: "quiz-slide-initial" }, h("div", { class: "quiz-slide-content" }, h("div", { id: "initial-quiz-h2", class: "quiz-slide-text-container" }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-8", "is-plm-hub": "false" }, this.slide["h2"])), h("ptc-spacer", { size: 'medium', breakpoint: 'small' }), h("ptc-spacer", { size: 'large', breakpoint: 'x-small' }), h("div", { id: "initial-quiz-h3", class: "quiz-slide-text-container" }, h("ptc-title", { type: "h3", "text-align": "center", "title-size": "medium", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, this.slide["h3"])), h("ptc-spacer", { size: 'x-large', breakpoint: 'small' }), h("ptc-spacer", { size: 'xx-large', breakpoint: 'x-small' }), h("div", { id: "initial-quiz-p", class: "quiz-slide-text-container" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-5", "para-align": "center", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["p"])), h("div", { class: "center-button-container" }, h("div", { id: "quiz-start-button", onClick: () => this.handleStartButtonClick() }, h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": "", target: "_blank" }, "Start"))))));
+    };
+    const QuizQuestionSlide = () => {
+      return (h("div", { class: "quiz-slide-question" }, h("div", { class: "quiz-slide-content" }, h("div", { class: "quiz-slide-dual-layout" }, h("div", { class: "image-container" }, h("img", { alt: "", src: this.slide["image"] })), h("div", { class: "content-container" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "medium", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-denser", "para-margin": "margin-bottom-6", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["question"]), h("div", { class: "options-container" }, this.slide["options"].map(option => {
+        return h("div", { class: "radio-input" }, h("input", { type: "radio", name: "test", id: `${option["data-value"]}`, onClick: () => this.handleQuestionOptionClick(option["data-model-id"]), "data-model-id": `${option["data-model-id"]}` }), h("label", { class: "option-label", htmlFor: `${option["data-value"]}` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, option["data-value"])));
+      })))))));
+    };
+    const QuizResultSlide = () => {
+      return (h("div", { class: "quiz-slide-result" }, h("div", { class: "quiz-slide-content" }, h("div", { class: "quiz-slide-dual-layout" }, h("div", { class: "image-container" }, h("img", { alt: "", src: this.slide["image"] })), h("div", { class: "content-container" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "medium", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-denser", "para-margin": "margin-bottom-6", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["title"]), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-5", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-bottom-6", "para-style": "", "para-z-index": "z-1", styles: "" }, this.slide["description"]), h("div", { class: "cta-container" }, this.slide["cta-quaternary"] && h("ptc-button", { type: "link", color: "ptc-quaternary", "link-href": this.slide["cta-quaternary"]["href"], target: "_blank" }, this.slide["cta-quaternary"]["text"]), this.slide["cta-tertiary"] && h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.slide["cta-tertiary"]["href"], target: "_blank" }, this.slide["cta-tertiary"]["text"])))))));
+    };
+    const getQuizSlide = () => {
+      switch (this.slide["slide-type"]) {
+        case "initial": return h(QuizInitialSlide, null);
+        case "question": return h(Fragment, null, h(QuizSlideRestartButton, null), h(QuizQuestionSlide, null), (this.traversal.length > 1) ? h(QuizSlidePreviousButton, null) : null);
+        case "result": return h(Fragment, null, h(QuizSlideRestartButton, null), h(QuizResultSlide, null), h(QuizSlidePreviousButton, null));
+        default: return null;
+      }
+    };
+    return (h(Host, null, h("div", { class: "quiz-slide-container" }, h("div", { class: "quiz-slide-background" }), getQuizSlide())));
+  }
+  static get is() { return "ptc-quiz"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-quiz.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-quiz.css"]
+    };
+  }
+  static get states() {
+    return {
+      "quiz": {},
+      "additionalOptionOnClick": {},
+      "slide": {},
+      "traversal": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -1,144 +1,144 @@
-import { Host, h } from '@stencil/core';
-import QuotationMark from '../../media/svg-imgs/quotation-mark.svg';
-export class PtcQuote {
-  constructor() {
-    this.quoteType = "image-quote";
-    this.quoteName = 'John Smith';
-    this.ctaText = undefined;
-    this.ctaUrl = undefined;
-    this.imgSrc = undefined;
-    this.imgTitle = undefined;
-  }
-  getImageTitle() {
-    return (h("div", { class: "our-leadership" }, h("div", { class: "line" }, h("div", { class: "green-line" }), h("div", { class: "grey-line" })), h("p", null, this.imgTitle)));
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.quoteType]: true
-    };
-  }
-  static get is() { return "ptc-quote"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-quote.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-quote.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "quoteType": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "\"image-quote\" | \"plain-quote\"",
-          "resolved": "\"image-quote\" | \"plain-quote\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Quote Type"
-        },
-        "attribute": "quote-type",
-        "reflect": false,
-        "defaultValue": "\"image-quote\""
-      },
-      "quoteName": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Quote Name"
-        },
-        "attribute": "quote-name",
-        "reflect": false,
-        "defaultValue": "'John Smith'"
-      },
-      "ctaText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Button CTA Text"
-        },
-        "attribute": "cta-text",
-        "reflect": false
-      },
-      "ctaUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "CTA Url"
-        },
-        "attribute": "cta-url",
-        "reflect": false
-      },
-      "imgSrc": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Image Src"
-        },
-        "attribute": "img-src",
-        "reflect": false
-      },
-      "imgTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Image Title"
-        },
-        "attribute": "img-title",
-        "reflect": false
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+import QuotationMark from '../../media/svg-imgs/quotation-mark.svg';
+export class PtcQuote {
+  constructor() {
+    this.quoteType = "image-quote";
+    this.quoteName = 'John Smith';
+    this.ctaText = undefined;
+    this.ctaUrl = undefined;
+    this.imgSrc = undefined;
+    this.imgTitle = undefined;
+  }
+  getImageTitle() {
+    return (h("div", { class: "our-leadership" }, h("div", { class: "line" }, h("div", { class: "green-line" }), h("div", { class: "grey-line" })), h("p", null, this.imgTitle)));
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.quoteType]: true
+    };
+  }
+  static get is() { return "ptc-quote"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-quote.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-quote.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "quoteType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"image-quote\" | \"plain-quote\"",
+          "resolved": "\"image-quote\" | \"plain-quote\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quote Type"
+        },
+        "attribute": "quote-type",
+        "reflect": false,
+        "defaultValue": "\"image-quote\""
+      },
+      "quoteName": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quote Name"
+        },
+        "attribute": "quote-name",
+        "reflect": false,
+        "defaultValue": "'John Smith'"
+      },
+      "ctaText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Button CTA Text"
+        },
+        "attribute": "cta-text",
+        "reflect": false
+      },
+      "ctaUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "CTA Url"
+        },
+        "attribute": "cta-url",
+        "reflect": false
+      },
+      "imgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Image Src"
+        },
+        "attribute": "img-src",
+        "reflect": false
+      },
+      "imgTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Image Title"
+        },
+        "attribute": "img-title",
+        "reflect": false
+      }
+    };
+  }
+}