@ptcwebops/ptcw-design 2.2.9 → 2.3.2

package/dist/cjs/ptc-product-sidebar.cjs.entry.js

@@ -2,138 +2,138 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.js');
 
 const ptcProductSidebarCss = ":host{display:block;position:relative}:host .hide{display:none !important}:host .white-box{padding:12px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard)}:host .sort-wrap{display:block}@media only screen and (min-width: 768px){:host .sort-wrap{display:flex;justify-content:space-between}}@media only screen and (min-width: 992px){:host .sort-wrap{display:block}}:host .filter-result-wrap label{font-size:var(--ptc-font-size-xx-small);font-weight:600}@media only screen and (min-width: 992px){:host .filter-result-wrap label{font-size:var(--ptc-font-size-x-small)}}:host .filter-result-wrap .result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}@media only screen and (min-width: 992px){:host .filter-result-wrap .result-header{margin-bottom:26px}}:host .filter-result-wrap .result-header .clear-cta{cursor:pointer;display:none;color:var(--color-gray-07);font-size:var(--ptc-font-size-x-small);text-decoration:underline}:host .filter-result-wrap .result-header .clear-cta.show{display:block}:host .filter-result-wrap .typeahead-input{box-sizing:border-box;margin-bottom:14px;width:100%;margin-right:0}@media only screen and (min-width: 768px){:host .filter-result-wrap .typeahead-input{margin-right:40px}}@media only screen and (min-width: 992px){:host .filter-result-wrap .typeahead-input{margin-right:0}}:host .filter-result-wrap .typeahead-input .input-wrap{position:relative}:host .filter-result-wrap .typeahead-input .input-wrap svg{position:absolute;left:8px;top:8px}:host .filter-result-wrap .typeahead-input .input-wrap input{margin-top:4px;padding:8px 8px 8px 34px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--color-gray-03);font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap{position:relative;width:100%}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions{border:1px solid var(--color-gray-03);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);background-color:var(--color-white);position:absolute;z-index:105;top:0;margin:0;width:100%;box-sizing:border-box;padding:0;max-height:400px;overflow-y:auto}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar{width:5px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li{list-style:none;padding:10px 16px;cursor:pointer;display:block;font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child{padding-top:20px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:last-child{padding-bottom:20px}:host .filter-result-wrap .dropdwon-filter{margin-bottom:10px;width:100%}:host .product-list-wrap{display:none}@media only screen and (min-width: 992px){:host .product-list-wrap{display:block}}:host .product-list-wrap .category-list{display:block;padding:12px 4px;font-size:var(--ptc-font-size-x-small)}:host .product-list-wrap .category-list ptc-para{padding-bottom:4px;display:block}:host .product-list-wrap .category-list ul{padding-left:20px;margin:0}";
 
-const PtcProductSidebar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.selectedResult = index.createEvent(this, "selectedResult", 7);
-    this.clearsearch = index.createEvent(this, "clearsearch", 7);
-    this.inputChanged = index.createEvent(this, "inputChanged", 7);
-    this.emptyResult = index.createEvent(this, "emptyResult", 7);
-    this.searchTerm = '';
-    this.suggestions = [];
-    this.suggestionList = [];
-  }
-  componentWillLoad() {
-    this.getDomData();
-  }
-  componentDidLoad() {
-    this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
-    this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
-  }
-  // Getting category title and products list
-  getDomData() {
-    const categoryList = document.querySelectorAll('ptc-product-category');
-    categoryList.forEach(category => {
-      let categoryTitle = category.getAttribute('category-title');
-      let categoryObject = { categoryName: categoryTitle, products: [] };
-      this.suggestionList.push(categoryObject);
-      let productList = category.querySelectorAll('ptc-product-card');
-      productList.forEach(product => {
-        let productTitle = product.getAttribute('card-title');
-        categoryObject.products.push(productTitle);
-      });
-    });
-  }
-  handleInputChange(event) {
-    const inputElement = event.target;
-    this.searchTerm = inputElement.value.toLocaleLowerCase();
-    this.clearBtn.classList.add('show');
-    this.getSuggestions();
-    this.inputChanged.emit({
-      'sender': this,
-      'event': event,
-    });
-  }
-  getSuggestions() {
-    const searchTerm = this.searchTerm.toLowerCase();
-    const suggestions = this.suggestionList.reduce((acc, item) => {
-      if (item.categoryName.toLowerCase().includes(searchTerm)) {
-        acc.push(item.categoryName); // Include the category if it matches the search term
-      }
-      const matchedProducts = item.products.filter((product) => product.toLowerCase().includes(searchTerm));
-      if (matchedProducts.length > 0) {
-        acc.push(...matchedProducts); // Include the matching products
-      }
-      return acc;
-    }, []);
-    this.suggestions = suggestions;
-  }
-  handleSelectSuggestion(suggestion, event) {
-    this.searchTerm = suggestion;
-    this.productListWrap.classList.add('hide');
-    this.selectedResult.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.searchTerm
-    });
-  }
-  handleKeyUp(e) {
-    const inputElement = e.target;
-    this.searchTerm = inputElement.value.toLocaleLowerCase();
-    if (e.keyCode === 13 && this.suggestions.length == 0) {
-      this.emptyResult.emit({
-        'sender': this,
-        'event': e,
-      });
-    }
-  }
-  clearSearch(event) {
-    let input = this.hostElement.shadowRoot.querySelector('input');
-    this.productListWrap.classList.remove('hide');
-    this.clearBtn.classList.remove('show');
-    if (input) {
-      input.value = "";
-    }
-    this.suggestions = [];
-    this.clearsearch.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': input.value
-    });
-  }
-  handleDropdownTouched(event) {
-    const { sender, isOpen } = event.detail;
-    if (sender) {
-      if (isOpen) {
-        let input = this.hostElement.shadowRoot.querySelector('input');
-        if (input) {
-          input.value = "";
-        }
-      }
-    }
-  }
-  handleClick() {
-    this.suggestions = [];
-  }
-  handleclearCtaClicked(event) {
-    const { sender, event: mouseEvent, } = event.detail;
-    if (sender) {
-      this.clearSearch(mouseEvent);
-    }
-  }
-  handleSelectedValues(event) {
-    const { sender, selectedOptions } = event.detail;
-    if (sender) {
-      if (selectedOptions.length > 0) {
-        this.clearBtn.classList.add('show');
-        this.productListWrap.classList.add('hide');
-      }
-      else {
-        this.clearBtn.classList.remove('show');
-        this.productListWrap.classList.remove('hide');
-      }
-    }
-  }
-  render() {
-    return (index.h(index.Host, { class: 'search-box' }, index.h("div", { class: "filter-result-wrap white-box" }, index.h("div", { class: "result-header" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, "Filter Results"), index.h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, "Clear")), index.h("div", { class: "sort-wrap" }, index.h("div", { class: "typeahead-input" }, index.h("label", { htmlFor: "searchBox" }, "Filter"), index.h("div", { class: "input-wrap" }, index.h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), index.h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
-      index.h("div", { class: "suggestion-wrap" }, index.h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (index.h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), index.h("div", { class: "dropdwon-filter" }, index.h("label", { htmlFor: "tech-dropdown" }, "Technology"), index.h("ptc-product-dropdown", { placeholder: "Select a technology", id: "tech-dropdown" }, this.suggestionList.map((item) => (index.h("span", null, item.categoryName))))))), index.h("ptc-spacer", { size: "large" }), index.h("ptc-spacer", { size: "large" }), index.h("div", { class: "product-list-wrap white-box" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, "Jump to Product"), this.suggestionList.map((item) => (index.h("div", { class: "category-list" }, index.h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, index.h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, index.h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), index.h("div", { class: "product-list" }, index.h("ul", null, item.products.map((product) => (index.h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
+const PtcProductSidebar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectedResult = index.createEvent(this, "selectedResult", 7);
+    this.clearsearch = index.createEvent(this, "clearsearch", 7);
+    this.inputChanged = index.createEvent(this, "inputChanged", 7);
+    this.emptyResult = index.createEvent(this, "emptyResult", 7);
+    this.searchTerm = '';
+    this.suggestions = [];
+    this.suggestionList = [];
+  }
+  componentWillLoad() {
+    this.getDomData();
+  }
+  componentDidLoad() {
+    this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
+    this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
+  }
+  // Getting category title and products list
+  getDomData() {
+    const categoryList = document.querySelectorAll('ptc-product-category');
+    categoryList.forEach(category => {
+      let categoryTitle = category.getAttribute('category-title');
+      let categoryObject = { categoryName: categoryTitle, products: [] };
+      this.suggestionList.push(categoryObject);
+      let productList = category.querySelectorAll('ptc-product-card');
+      productList.forEach(product => {
+        let productTitle = product.getAttribute('card-title');
+        categoryObject.products.push(productTitle);
+      });
+    });
+  }
+  handleInputChange(event) {
+    const inputElement = event.target;
+    this.searchTerm = inputElement.value.toLocaleLowerCase();
+    this.clearBtn.classList.add('show');
+    this.getSuggestions();
+    this.inputChanged.emit({
+      'sender': this,
+      'event': event,
+    });
+  }
+  getSuggestions() {
+    const searchTerm = this.searchTerm.toLowerCase();
+    const suggestions = this.suggestionList.reduce((acc, item) => {
+      if (item.categoryName.toLowerCase().includes(searchTerm)) {
+        acc.push(item.categoryName); // Include the category if it matches the search term
+      }
+      const matchedProducts = item.products.filter((product) => product.toLowerCase().includes(searchTerm));
+      if (matchedProducts.length > 0) {
+        acc.push(...matchedProducts); // Include the matching products
+      }
+      return acc;
+    }, []);
+    this.suggestions = suggestions;
+  }
+  handleSelectSuggestion(suggestion, event) {
+    this.searchTerm = suggestion;
+    this.productListWrap.classList.add('hide');
+    this.selectedResult.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': this.searchTerm
+    });
+  }
+  handleKeyUp(e) {
+    const inputElement = e.target;
+    this.searchTerm = inputElement.value.toLocaleLowerCase();
+    if (e.keyCode === 13 && this.suggestions.length == 0) {
+      this.emptyResult.emit({
+        'sender': this,
+        'event': e,
+      });
+    }
+  }
+  clearSearch(event) {
+    let input = this.hostElement.shadowRoot.querySelector('input');
+    this.productListWrap.classList.remove('hide');
+    this.clearBtn.classList.remove('show');
+    if (input) {
+      input.value = "";
+    }
+    this.suggestions = [];
+    this.clearsearch.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': input.value
+    });
+  }
+  handleDropdownTouched(event) {
+    const { sender, isOpen } = event.detail;
+    if (sender) {
+      if (isOpen) {
+        let input = this.hostElement.shadowRoot.querySelector('input');
+        if (input) {
+          input.value = "";
+        }
+      }
+    }
+  }
+  handleClick() {
+    this.suggestions = [];
+  }
+  handleclearCtaClicked(event) {
+    const { sender, event: mouseEvent, } = event.detail;
+    if (sender) {
+      this.clearSearch(mouseEvent);
+    }
+  }
+  handleSelectedValues(event) {
+    const { sender, selectedOptions } = event.detail;
+    if (sender) {
+      if (selectedOptions.length > 0) {
+        this.clearBtn.classList.add('show');
+        this.productListWrap.classList.add('hide');
+      }
+      else {
+        this.clearBtn.classList.remove('show');
+        this.productListWrap.classList.remove('hide');
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: 'search-box' }, index.h("div", { class: "filter-result-wrap white-box" }, index.h("div", { class: "result-header" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, "Filter Results"), index.h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, "Clear")), index.h("div", { class: "sort-wrap" }, index.h("div", { class: "typeahead-input" }, index.h("label", { htmlFor: "searchBox" }, "Filter"), index.h("div", { class: "input-wrap" }, index.h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), index.h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
+      index.h("div", { class: "suggestion-wrap" }, index.h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (index.h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), index.h("div", { class: "dropdwon-filter" }, index.h("label", { htmlFor: "tech-dropdown" }, "Technology"), index.h("ptc-product-dropdown", { placeholder: "Select a technology", id: "tech-dropdown" }, this.suggestionList.map((item) => (index.h("span", null, item.categoryName))))))), index.h("ptc-spacer", { size: "large" }), index.h("ptc-spacer", { size: "large" }), index.h("div", { class: "product-list-wrap white-box" }, index.h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, "Jump to Product"), this.suggestionList.map((item) => (index.h("div", { class: "category-list" }, index.h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, index.h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, index.h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), index.h("div", { class: "product-list" }, index.h("ul", null, item.products.map((product) => (index.h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
 PtcProductSidebar.style = ptcProductSidebarCss;
 
 exports.ptc_product_sidebar = PtcProductSidebar;

package/dist/cjs/ptc-progress-bar.cjs.entry.js

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.js');
 
 const ptcProgressBarCss = ":host{display:block}:host .progress-bar-container{height:5px;background-color:linear-gradient(272deg, #3b4550, #1a1a1a);width:100%}:host .progress-bar{height:100%;background-image:linear-gradient(270deg, #4795cd, #33a13c);transition:width 0.3s ease-in-out}";
 
-const PtcProgressBar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.scrollPercentage = 0;
-  }
-  handleScroll() {
-    const scrollTop = document.documentElement.scrollTop;
-    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-    console.log('scrollTop: ' + scrollTop + '; scorllHeight: ' + scrollHeight);
-    const percentage = (scrollTop / scrollHeight) * 100;
-    this.scrollPercentage = percentage;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "progress-bar-container" }, index.h("div", { class: "progress-bar", style: { width: `${this.scrollPercentage}%` } }))));
-  }
-};
+const PtcProgressBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.scrollPercentage = 0;
+  }
+  handleScroll() {
+    const scrollTop = document.documentElement.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    console.log('scrollTop: ' + scrollTop + '; scorllHeight: ' + scrollHeight);
+    const percentage = (scrollTop / scrollHeight) * 100;
+    this.scrollPercentage = percentage;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "progress-bar-container" }, index.h("div", { class: "progress-bar", style: { width: `${this.scrollPercentage}%` } }))));
+  }
+};
 PtcProgressBar.style = ptcProgressBarCss;
 
 exports.ptc_progress_bar = PtcProgressBar;

package/dist/cjs/ptc-quiz.cjs.entry.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dddc2aea.js');
+
+const ptcQuizCss = ":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}}";
+
+const PtcQuiz = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 index.h("div", { class: "right-button-container" }, index.h("div", { class: "restart-quiz-button", onClick: () => this.handleRestartButtonClick() }, index.h("icon-asset", { id: "restart-arrow", type: "ptc", size: "small", name: "quiz-arrow-restart" }), index.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 index.h("div", { class: "center-button-container" }, index.h("div", { class: "previous-slide-button", onClick: () => this.handlePreviousButtonClick() }, index.h("icon-asset", { id: "left-arrow", type: "ptc", size: "medium", name: "quiz-arrow-left", onClick: () => { } }), index.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 (index.h("div", { class: "quiz-slide-initial" }, index.h("div", { class: "quiz-slide-content" }, index.h("div", { id: "initial-quiz-h2", class: "quiz-slide-text-container" }, index.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"])), index.h("ptc-spacer", { size: 'medium', breakpoint: 'small' }), index.h("ptc-spacer", { size: 'large', breakpoint: 'x-small' }), index.h("div", { id: "initial-quiz-h3", class: "quiz-slide-text-container" }, index.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"])), index.h("ptc-spacer", { size: 'x-large', breakpoint: 'small' }), index.h("ptc-spacer", { size: 'xx-large', breakpoint: 'x-small' }), index.h("div", { id: "initial-quiz-p", class: "quiz-slide-text-container" }, index.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"])), index.h("div", { class: "center-button-container" }, index.h("div", { id: "quiz-start-button", onClick: () => this.handleStartButtonClick() }, index.h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": "", target: "_blank" }, "Start"))))));
+    };
+    const QuizQuestionSlide = () => {
+      return (index.h("div", { class: "quiz-slide-question" }, index.h("div", { class: "quiz-slide-content" }, index.h("div", { class: "quiz-slide-dual-layout" }, index.h("div", { class: "image-container" }, index.h("img", { alt: "", src: this.slide["image"] })), index.h("div", { class: "content-container" }, index.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"]), index.h("div", { class: "options-container" }, this.slide["options"].map(option => {
+        return index.h("div", { class: "radio-input" }, index.h("input", { type: "radio", name: "test", id: `${option["data-value"]}`, onClick: () => this.handleQuestionOptionClick(option["data-model-id"]), "data-model-id": `${option["data-model-id"]}` }), index.h("label", { class: "option-label", htmlFor: `${option["data-value"]}` }, index.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 (index.h("div", { class: "quiz-slide-result" }, index.h("div", { class: "quiz-slide-content" }, index.h("div", { class: "quiz-slide-dual-layout" }, index.h("div", { class: "image-container" }, index.h("img", { alt: "", src: this.slide["image"] })), index.h("div", { class: "content-container" }, index.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"]), index.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"]), index.h("div", { class: "cta-container" }, this.slide["cta-quaternary"] && index.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"] && index.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 index.h(QuizInitialSlide, null);
+        case "question": return index.h(index.Fragment, null, index.h(QuizSlideRestartButton, null), index.h(QuizQuestionSlide, null), (this.traversal.length > 1) ? index.h(QuizSlidePreviousButton, null) : null);
+        case "result": return index.h(index.Fragment, null, index.h(QuizSlideRestartButton, null), index.h(QuizResultSlide, null), index.h(QuizSlidePreviousButton, null));
+        default: return null;
+      }
+    };
+    return (index.h(index.Host, null, index.h("div", { class: "quiz-slide-container" }, index.h("div", { class: "quiz-slide-background" }), getQuizSlide())));
+  }
+  get el() { return index.getElement(this); }
+};
+PtcQuiz.style = ptcQuizCss;
+
+exports.ptc_quiz = PtcQuiz;

package/dist/cjs/ptc-quote.cjs.entry.js

@@ -2,35 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.js');
 
 const QuotationMark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.12 32.76"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#cac8c8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><g class="cls-1"><path class="cls-2" d="M24,0,18,15.12h5.4L19.68,32.76H0l3.72-18L11.4,0ZM48.12,0l-6,15.12h5.4L43.8,32.76H24.12l3.72-18L35.52,0Z"/></g></g></g></g></svg>`;
 
 const ptcQuoteCss = ":host{display:flex;width:100%;position:relative;overflow:hidden;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start}:host(.image-quote) .quote-media{position:relative;flex-basis:auto}:host(.image-quote) .quote-media img{width:100%}:host(.image-quote) .quote-media .our-leadership{width:89%;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-04) var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);top:0px;margin:0px auto;display:flex;position:relative;box-shadow:var(--ptc-shadow-large);background-color:var(--color-white);transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-black);color:var(--color-gray-10);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-loose);margin-block-end:0;margin-block-start:0}:host(.image-quote) .quote-media .our-leadership .line{height:2px;width:82%;position:absolute;top:20%}:host(.image-quote) .quote-media .our-leadership .line .green-line{width:30%;height:2px;background-color:var(--color-green-05);display:inline-block;position:absolute}:host(.image-quote) .quote-media .our-leadership .line .grey-line{width:70%;height:1px;background-color:var(--color-gray-03);display:inline-block;position:absolute;left:30%}:host(.image-quote) .quote-content{flex-basis:auto;display:flex;flex-flow:column nowrap}:host(.image-quote) .quote-content .quotemarks{flex-basis:7%;width:15%;margin-bottom:var(--ptc-element-spacing-03);max-width:2.5rem}:host(.image-quote) .quote-content blockquote{flex-basis:93%;margin-block-start:calc(-1 * var(--ptc-element-spacing-04));margin-inline-start:0;margin-inline-end:0}:host(.image-quote) .quote-content blockquote p{font-weight:var(--ptc-font-weight-medium);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}:host(.image-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium)}@media only screen and (min-width: 768px){:host(.image-quote) .quote-media .our-leadership{width:65%;padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);transform:translateY(-25%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quotemarks{width:10%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}}@media only screen and (min-width: 992px){:host(.image-quote) .quote-content{margin-right:5%;margin-left:5%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-large)}}@media only screen and (min-width: 1200px){:host(.image-quote){flex-direction:row}:host(.image-quote) .quote-media{flex-basis:40%;padding:unset;margin:var(--ptc-layout-spacing-05) 0px 0px calc(var(--ptc-layout-spacing-06) * 2);padding-right:var(--ptc-element-spacing-08)}:host(.image-quote) .quote-media .our-leadership{width:78%;transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership .line{top:18%}:host(.image-quote) .quote-content{flex-basis:58%;flex-flow:row nowrap;margin-left:unset;margin-right:unset}:host(.image-quote) .quote-content .quotemarks{flex-basis:8%;margin-right:var(--ptc-element-spacing-03)}}:host(.plain-quote) blockquote{margin:0 auto;padding:0 0 var(--ptc-element-spacing-04) var(--ptc-element-spacing-04);border-left:5px solid var(--color-green-05)}:host(.plain-quote) blockquote p{font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.plain-quote) .quote-content{flex-basis:auto}:host(.plain-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small)}";
 
-const PtcQuote = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.quoteType = "image-quote";
-    this.quoteName = 'John Smith';
-    this.ctaText = undefined;
-    this.ctaUrl = undefined;
-    this.imgSrc = undefined;
-    this.imgTitle = undefined;
-  }
-  getImageTitle() {
-    return (index.h("div", { class: "our-leadership" }, index.h("div", { class: "line" }, index.h("div", { class: "green-line" }), index.h("div", { class: "grey-line" })), index.h("p", null, this.imgTitle)));
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, this.imgSrc ? (index.h("div", { class: "quote-media" }, this.imgSrc ? index.h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, index.h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? index.h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, index.h("blockquote", null, index.h("p", null, index.h("slot", null)), index.h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (index.h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.quoteType]: true
-    };
-  }
-};
+const PtcQuote = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.quoteType = "image-quote";
+    this.quoteName = 'John Smith';
+    this.ctaText = undefined;
+    this.ctaUrl = undefined;
+    this.imgSrc = undefined;
+    this.imgTitle = undefined;
+  }
+  getImageTitle() {
+    return (index.h("div", { class: "our-leadership" }, index.h("div", { class: "line" }, index.h("div", { class: "green-line" }), index.h("div", { class: "grey-line" })), index.h("p", null, this.imgTitle)));
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, this.imgSrc ? (index.h("div", { class: "quote-media" }, this.imgSrc ? index.h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, index.h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? index.h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, index.h("blockquote", null, index.h("p", null, index.h("slot", null)), index.h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (index.h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.quoteType]: true
+    };
+  }
+};
 PtcQuote.style = ptcQuoteCss;
 
 exports.ptc_quote = PtcQuote;

package/dist/cjs/ptc-readmore-char.cjs.entry.js

@@ -2,34 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.js');
 
 const ptcReadmoreCharCss = ":host{display:block}:host .description{display:inline}:host .truncated-label{cursor:pointer;color:var(--color-blue-07);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);text-decoration-line:underline;line-height:var(--ptc-line-height-densest)}:host .truncated-label::before{content:\"\";padding-left:8px}";
 
-const PtcReadmoreChar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.readMoreClicked = index.createEvent(this, "readMoreClicked", 7);
-    this.expanded = false;
-    this.maxCharacters = 100;
-    this.description = undefined;
-    this.readMoreText = "Read More";
-    this.readLessText = "Read Less";
-  }
-  toggleExpand() {
-    this.expanded = !this.expanded;
-    this.readMoreClicked.emit(this.expanded);
-  }
-  render() {
-    const contentText = this.description
-      ? this.description.trim()
-      : '';
-    const truncatedContent = contentText.length > this.maxCharacters ? contentText.substring(0, this.maxCharacters) + '...' : contentText;
-    const label = this.expanded ? this.readLessText : this.readMoreText;
-    return (index.h(index.Host, null, index.h("p", { class: "description" }, this.expanded ? (this.description) : (truncatedContent)), contentText.length > this.maxCharacters && (index.h("label", { class: "truncated-label", onClick: () => this.toggleExpand() }, label))));
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcReadmoreChar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.readMoreClicked = index.createEvent(this, "readMoreClicked", 7);
+    this.expanded = false;
+    this.maxCharacters = 100;
+    this.description = undefined;
+    this.readMoreText = "Read More";
+    this.readLessText = "Read Less";
+  }
+  toggleExpand() {
+    this.expanded = !this.expanded;
+    this.readMoreClicked.emit(this.expanded);
+  }
+  render() {
+    const contentText = this.description
+      ? this.description.trim()
+      : '';
+    const truncatedContent = contentText.length > this.maxCharacters ? contentText.substring(0, this.maxCharacters) + '...' : contentText;
+    const label = this.expanded ? this.readLessText : this.readMoreText;
+    return (index.h(index.Host, null, index.h("p", { class: "description" }, this.expanded ? (this.description) : (truncatedContent)), contentText.length > this.maxCharacters && (index.h("label", { class: "truncated-label", onClick: () => this.toggleExpand() }, label))));
+  }
+  get el() { return index.getElement(this); }
+};
 PtcReadmoreChar.style = ptcReadmoreCharCss;
 
 exports.ptc_readmore_char = PtcReadmoreChar;