@ptcwebops/ptcw-design 3.2.2 → 3.2.3

package/dist/esm/ptc-minimized-nav.entry.js

@@ -2,18 +2,18 @@ import { r as registerInstance, h, H as Host } from './index-62587d0b.js';
 
 const ptcMinimizedNavCss = ":host{display:block}.minimized-header .header{overflow:hidden;height:48px;background-color:var(--color-gray-10);display:flex;align-items:center;justify-content:center}.minimized-header .header a{float:left;color:var(--color-black);text-align:center;padding:0px 0;text-decoration:none;border-radius:var(--ptc-border-radius-standard);position:relative}.minimized-header .header a.mini-navbar-logo{font-weight:var(--ptc-font-weight-bold)}.minimized-header .header a.mini-navbar-logo img{width:65px;vertical-align:middle;border:0;height:auto}.minimized-header .header a::before{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:48px;transform:translateY(-4px)}.mini-navbar-logo{outline:3px solid transparent}.mini-navbar-logo:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}.ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 768px){.ptc-container{margin-left:0}}@media only screen and (min-width: 1200px){.ptc-container{margin-left:auto;width:1136px}}@media only screen and (min-width: 1440px){.ptc-container{width:1200px}}.ptc-min-footer{box-shadow:var(--ptc-shadow-medium);color:var(--color-white);position:relative;overflow:hidden;position:relative;z-index:1000;padding:0;height:60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--color-gray-10)}.min-footer-nav-list{margin:0;padding:0;list-style:none}.min-footer-copyright-wrapper{text-align:center;position:relative;z-index:20}.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:center}@media screen-sm{.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0}}@media screen-xs{.minimized-header .header a{float:none;display:block;text-align:left}}";
 
-const PtcMinimizedNav = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.linkUrl = '#';
-    this.imgSrc = '';
-    this.imgAlt = 'PTC';
-    this.navType = 'minimized-header';
-  }
-  render() {
-    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "ptc-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null))))) : null));
-  }
-};
+const PtcMinimizedNav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.linkUrl = '#';
+    this.imgSrc = '';
+    this.imgAlt = 'PTC';
+    this.navType = 'minimized-header';
+  }
+  render() {
+    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "ptc-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null))))) : null));
+  }
+};
 PtcMinimizedNav.style = ptcMinimizedNavCss;
 
 export { PtcMinimizedNav as ptc_minimized_nav };

package/dist/esm/ptc-mobile-select.entry.js

@@ -422,68 +422,68 @@ h(y, "defaultConfig", {
 
 const ptcMobileSelectCss = ".ms-mobile-select{position:relative;z-index:0;opacity:0;visibility:hidden;-webkit-transition:opacity 0.4s, z-index 0.4s;transition:opacity 0.4s, z-index 0.4s}.ms-mobile-select *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.ms-mobile-select .ms-gray-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0, 0, 0, 0.7);z-index:888;display:block}.ms-mobile-select .ms-content{width:100%;display:block;position:fixed;z-index:889;color:black;-webkit-transition:all 0.4s;transition:all 0.4s;bottom:-350px;left:0;background:white}.ms-mobile-select .ms-fix-width{width:90%;margin:0 auto;position:relative}.ms-mobile-select .ms-fix-width:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-btn-bar{border-bottom:1px solid #dcdcdc;font-size:15px;height:45px;position:relative;text-align:center;line-height:45px}.ms-mobile-select .ms-cancel,.ms-mobile-select .ms-ensure{height:45px;width:55px;cursor:pointer;position:absolute;top:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-cancel{left:0;color:#666}.ms-mobile-select .ms-ensure{right:0;color:#1e83d3}.ms-mobile-select .ms-title{font-size:15px;padding:0 15%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ms-mobile-select .ms-panel:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-wheels{width:100%;height:200px;overflow:hidden}.ms-mobile-select .ms-wheel{position:relative;z-index:0;float:left;width:50%;height:200px;overflow:hidden;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.ms-mobile-select .ms-select-container{display:block;text-align:center}.ms-mobile-select .ms-select-container li{font-size:15px;display:block;height:40px;line-height:40px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-select-line{height:40px;width:100%;position:absolute;top:80px;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc}.ms-mobile-select .ms-shadow-mask{position:absolute;top:0;width:100%;height:200px;background:linear-gradient(to bottom, #fffffff5, #ffffffcc 25%, #ffffff00 49%, #ffffff00 51%, #ffffffcc 75%, #fffffff5);opacity:0.9;pointer-events:none}.ms-mobile-select.ms-show{opacity:1;z-index:10000;visibility:visible}.ms-mobile-select.ms-show .ms-content{bottom:0}.ms-default-trigger{min-height:1em;color:#888}body.ms-show{overflow-y:hidden}.mobile-select-wrapper{display:block}.mobile-select-wrapper div{display:inline;margin-right:var(--ptc-element-spacing-03);width:100%;font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);color:var(--color-white);height:18px}.mobileSelect .content{top:auto}.mobileSelect .content .btnBar{border-color:var(--color-gray-10)}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .title{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .cancel{transform:translateY(12.5px);width:125px}.mobileSelect .content .panel .wheel .selectContainer li{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);height:45px}ptc-responsive-wrapper.xsmall .mobile-select-wrapper,ptc-responsive-wrapper.small .mobile-select-wrapper{display:block}ptc-responsive-wrapper.medium .mobile-select-wrapper,ptc-responsive-wrapper.large .mobile-select-wrapper,ptc-responsive-wrapper.xlarge .mobile-select-wrapper,ptc-responsive-wrapper.xxlarge .mobile-select-wrapper,ptc-responsive-wrapper.large2k .mobile-select-wrapper,ptc-responsive-wrapper.large4k .mobile-select-wrapper{display:none}";
 
-const PtcMobileSelect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.triggerName = undefined;
-    this.selectedText = undefined;
-    this.wheelData = undefined;
-    this.selectedId = '';
-    this.ensureBtnText = 'Confirm';
-    this.cancelBtnText = 'Cancel';
-    this.listTitle = undefined;
-  }
-  render() {
-    return (h$1("div", { class: "mobile-select-wrapper" }, h$1("div", { id: this.triggerName }, this.selectedText, h$1("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px);}" }))));
-  }
-  componentDidRender() {
-    let currentId = this.selectedId; //input current lang
-    let storeIndex = 0;
-    let mySelect = new y({
-      trigger: `#${this.triggerName}`,
-      title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
-      position: [0],
-      ensureBtnText: this.ensureBtnText,
-      cancelBtnText: this.cancelBtnText,
-      ensureBtnColor: 'var(--color-gray-12)',
-      cancelBtnColor: 'var(--color-gray-12)',
-      titleColor: 'var(--color-gray-12)',
-      onShow: function (e) {
-        if (currentId) {
-          let liEle = document.querySelectorAll('.selectContainer li');
-          liEle.forEach((currentValue, currentIndex) => {
-            if (currentValue.getAttribute('data-id') == currentId) {
-              storeIndex = currentIndex;
-              return;
-            }
-          });
-          try {
-            e.locatePosition(0, storeIndex);
-            console.log("storeIndex: " + storeIndex);
-          }
-          catch (error) {
-            console.log(error);
-            // debugger
-          }
-          //e.locatePosition(0, storeIndex);
-        }
-        else {
-          return;
-        }
-      },
-      callback: function (indexArr, data) {
-        if (data[0].id) {
-          window.location.href = data[0].id;
-        }
-        else {
-          console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
-        }
-      }.bind(this),
-    });
-    mySelect.locatePosition(0, storeIndex);
-  }
-};
+const PtcMobileSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.triggerName = undefined;
+    this.selectedText = undefined;
+    this.wheelData = undefined;
+    this.selectedId = '';
+    this.ensureBtnText = 'Confirm';
+    this.cancelBtnText = 'Cancel';
+    this.listTitle = undefined;
+  }
+  render() {
+    return (h$1("div", { class: "mobile-select-wrapper" }, h$1("div", { id: this.triggerName }, this.selectedText, h$1("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px);}" }))));
+  }
+  componentDidRender() {
+    let currentId = this.selectedId; //input current lang
+    let storeIndex = 0;
+    let mySelect = new y({
+      trigger: `#${this.triggerName}`,
+      title: `${this.listTitle ? this.listTitle : ''}`,
+      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
+      position: [0],
+      ensureBtnText: this.ensureBtnText,
+      cancelBtnText: this.cancelBtnText,
+      ensureBtnColor: 'var(--color-gray-12)',
+      cancelBtnColor: 'var(--color-gray-12)',
+      titleColor: 'var(--color-gray-12)',
+      onShow: function (e) {
+        if (currentId) {
+          let liEle = document.querySelectorAll('.selectContainer li');
+          liEle.forEach((currentValue, currentIndex) => {
+            if (currentValue.getAttribute('data-id') == currentId) {
+              storeIndex = currentIndex;
+              return;
+            }
+          });
+          try {
+            e.locatePosition(0, storeIndex);
+            console.log("storeIndex: " + storeIndex);
+          }
+          catch (error) {
+            console.log(error);
+            // debugger
+          }
+          //e.locatePosition(0, storeIndex);
+        }
+        else {
+          return;
+        }
+      },
+      callback: function (indexArr, data) {
+        if (data[0].id) {
+          window.location.href = data[0].id;
+        }
+        else {
+          console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
+        }
+      }.bind(this),
+    });
+    mySelect.locatePosition(0, storeIndex);
+  }
+};
 PtcMobileSelect.style = ptcMobileSelectCss;
 
 export { PtcMobileSelect as ptc_mobile_select };

package/dist/esm/ptc-modal-quiz.entry.js

@@ -2,121 +2,121 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const ptcModalQuizCss = ":host{display:block}:host .modal-quiz-container{padding:0 var(--ptc-element-spacing-06) var(--ptc-element-spacing-08) var(--ptc-element-spacing-06);margin-top:var(--ptc-element-spacing-05);height:max-content;max-height:calc(80vh - 120px);overflow-y:auto}:host .modal-quiz-progress{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--ptc-element-spacing-04)}:host ptc-para{flex:0 0 100%}:host .dot-progress-bar{margin-top:var(--ptc-element-spacing-03);flex:0 0 100%;display:flex}:host .dot-progress-bar div{display:flex}:host .dot-progress-bar .dot-progress-circle{display:inline-block;width:12px;height:12px;border:var(--color-gray-10) solid 2px;border-radius:50%}:host .dot-progress-bar .dot-progress-circle.active{background-color:var(--color-gray-10)}:host .dot-progress-bar .dot-progress-dash{display:flex;align-items:center}:host .dot-progress-bar .dot-progress-dash .dashed-line{width:24px;height:2px;background:repeating-linear-gradient(90deg, var(--color-gray-10) 0 5px, #0000 0 7px);}:host .modal-quiz-content .content{padding-right:none;width:100%;word-break:break-word;overflow-wrap:break-word}:host .modal-quiz-content .image{display:none}:host .options-container{margin:var(--ptc-element-spacing-06) 0 var(--ptc-element-spacing-06) 0}:host .radio-input{flex:1 0 100%;margin-bottom:var(--ptc-element-spacing-04);display:flex;align-items:start;width:max-content}:host .radio-input input[type=radio]{width:16px;height:16px;margin-top:5px}:host .radio-input input[type=radio]:hover{cursor:pointer}:host .radio-input input[type=radio]:hover:before{box-shadow:0px 0px 0px 2px var(--color-gray-05);border-radius:50%;opacity:0.7}:host .radio-input input[type=radio]:before{content:\"\";display:block;width:60%;height:60%;margin:10%;padding:10%;border-radius:50%}:host .radio-input input[type=radio]:checked:before{background:inherit}:host .radio-input .option-label{padding:0 var(--ptc-element-spacing-02) 0 var(--ptc-element-spacing-03)}:host .radio-input .option-label:hover{cursor:pointer}:host .modal-quiz-ctas{margin-top:var(--ptc-element-spacing-08)}:host .modal-quiz-ctas ptc-button{margin-right:var(--ptc-element-spacing-05)}@media only screen and (min-width: 480px){:host .modal-quiz-container{padding:0 var(--ptc-element-spacing-08) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08)}}@media only screen and (min-width: 768px){:host .modal-quiz-progress{flex-wrap:none}:host ptc-para{flex:none}:host .dot-progress-bar{flex:none;margin-top:0;margin-left:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 992px){:host .modal-quiz-content{display:flex;width:100%}:host .modal-quiz-content .content{padding-right:var(--ptc-element-spacing-04);width:65%}:host .modal-quiz-content .image{width:35%;display:flex;justify-content:right;align-items:flex-start}}";
 
-var Priority;
-(function (Priority) {
-  Priority["Low"] = "low";
-  Priority["Medium"] = "medium";
-  Priority["High"] = "high";
-})(Priority || (Priority = {}));
-const PtcModalQuiz = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.emailReportClick = createEvent(this, "emailReportClick", 7);
-    this.getPriorityAnswerSlotName = () => {
-      return `question-${this.currentQuestion}-${this.currentSelectedPriority}-short-answer`;
-    };
-    this.resetQuiz = () => {
-      this.currentQuestion = 1;
-      this.currentSelectedPriority = null;
-      this.selectedPriorityRadio = null;
-      let inputs = this.el.shadowRoot.querySelectorAll('input');
-      for (let i = 0; i < inputs.length; i++) {
-        inputs[i].checked = false;
-      }
-      this.answers = {};
-      this.traversal = {};
-    };
-    this.handlePriorityOptionClick = (e, priority) => {
-      if (e.target.nodeName === "INPUT") {
-        this.selectedPriorityRadio = e.target;
-        this.currentSelectedPriority = priority;
-        this.selectedPriorityRadio.checked = true;
-        if (!this.traversal[this.currentQuestion]) {
-          this.traversal[this.currentQuestion] = {};
-        }
-        this.traversal[this.currentQuestion]["priority"] = this.currentSelectedPriority;
-        this.traversal[this.currentQuestion]["radio"] = this.selectedPriorityRadio;
-      }
-    };
-    this.handlePreviousClick = () => {
-      if (this.currentQuestion > 1) {
-        this.currentSelectedPriority = null;
-        this.selectedPriorityRadio.checked = false;
-        this.currentQuestion -= 1;
-        this.currentSelectedPriority = this.traversal[this.currentQuestion]["priority"];
-        this.traversal[this.currentQuestion]["radio"].checked = true;
-      }
-    };
-    this.handleNextClick = (e) => {
-      if (!e.target.disabled && this.currentQuestion < this.totalQuestions) {
-        this.answers[this.currentQuestion] = this.currentSelectedPriority;
-        this.currentQuestion += 1;
-        if (!this.traversal[this.currentQuestion]) {
-          this.currentSelectedPriority = null;
-          this.selectedPriorityRadio.checked = false;
-        }
-        else {
-          this.currentSelectedPriority = this.traversal[this.currentQuestion]["priority"];
-          this.selectedPriorityRadio = this.traversal[this.currentQuestion]["radio"];
-          this.selectedPriorityRadio.checked = true;
-        }
-        let modalQuizContainer = this.el.shadowRoot.querySelector('.modal-quiz-container');
-        if (modalQuizContainer) {
-          modalQuizContainer.scrollTo({
-            top: 0,
-            left: 0,
-            behavior: "smooth",
-          });
-        }
-      }
-    };
-    this.handleEmailReportClick = (e) => {
-      if (!e.target.disabled) {
-        this.answers[this.currentQuestion] = this.currentSelectedPriority;
-        this.emailReportClick.emit(this.answers);
-        this.resetQuiz();
-      }
-    };
-    this.totalQuestions = undefined;
-    this.modalId = undefined;
-    this.currentQuestion = 1;
-    this.currentSelectedPriority = undefined;
-    this.selectedPriorityRadio = undefined;
-    this.answers = {};
-    this.traversal = {};
-  }
-  componentDidLoad() {
-    const images = this.el.querySelectorAll('[slot$="-image"]');
-    for (let i = 0; i < this.totalQuestions; i++) {
-      images[i].style.borderRadius = "12px";
-      images[i].style.width = "100%";
-      images[i].style.objectFit = "contain";
-      images[i].style.marginLeft = "var(--ptc-element-spacing-04)";
-    }
-  }
-  componentDidRender() {
-    const modal = document.querySelector(`#${this.modalId}`);
-    const modalCloseButton = modal.shadowRoot.querySelector('.close');
-    modalCloseButton.addEventListener('click', () => {
-      this.resetQuiz();
-    });
-  }
-  render() {
-    const ProgressDots = () => {
-      return h("div", { class: "dot-progress-bar" }, [...Array(this.totalQuestions).keys()].map(questionNumber => {
-        return h("div", null, h("div", { class: `dot-progress-circle ${(questionNumber === (this.currentQuestion - 1)) ? "active" : ""}` }), (questionNumber < (this.totalQuestions - 1)) ?
-          h("div", { class: "dot-progress-dash" }, h("div", { class: "dashed-line" })) : null);
-      }));
-    };
-    const PriorityOptions = () => {
-      return h("div", { class: "options-container" }, h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Low) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1` }), h("label", { class: "option-label", htmlFor: `1` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "low-level-label" })))), h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Medium) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2` }), h("label", { class: "option-label", htmlFor: `2` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "medium-level-label" })))), h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.High) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3` }), h("label", { class: "option-label", htmlFor: `3` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "high-level-label" })))));
-    };
-    return (h(Host, null, h("div", { class: "modal-quiz-container" }, h("div", null, h("div", null, h("div", { class: "modal-quiz-progress" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "question-text" }), " ", this.currentQuestion, " ", h("slot", { name: "of-text" }), " ", this.totalQuestions), h(ProgressDots, null)), h("div", { class: "modal-quiz-content" }, h("div", { class: "content" }, h("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, h("slot", { name: `question-${this.currentQuestion}-title` })), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: `question-${this.currentQuestion}-subtitle` })), h(PriorityOptions, null), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? h("slot", { name: this.getPriorityAnswerSlotName() }) : null), h("div", { class: "modal-quiz-ctas" }, h("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1) }, h("slot", { name: "previous-ques-text" })), h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
-      h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null }, h("slot", { name: "email-results-text" })) :
-      h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null }, h("slot", { name: "next-ques-text" })))), h("div", { class: "image" }, h("slot", { name: `question-${this.currentQuestion}-image` })))))), h("slot", { name: "script" })));
-  }
-  get el() { return getElement(this); }
-};
+var Priority;
+(function (Priority) {
+  Priority["Low"] = "low";
+  Priority["Medium"] = "medium";
+  Priority["High"] = "high";
+})(Priority || (Priority = {}));
+const PtcModalQuiz = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.emailReportClick = createEvent(this, "emailReportClick", 7);
+    this.getPriorityAnswerSlotName = () => {
+      return `question-${this.currentQuestion}-${this.currentSelectedPriority}-short-answer`;
+    };
+    this.resetQuiz = () => {
+      this.currentQuestion = 1;
+      this.currentSelectedPriority = null;
+      this.selectedPriorityRadio = null;
+      let inputs = this.el.shadowRoot.querySelectorAll('input');
+      for (let i = 0; i < inputs.length; i++) {
+        inputs[i].checked = false;
+      }
+      this.answers = {};
+      this.traversal = {};
+    };
+    this.handlePriorityOptionClick = (e, priority) => {
+      if (e.target.nodeName === "INPUT") {
+        this.selectedPriorityRadio = e.target;
+        this.currentSelectedPriority = priority;
+        this.selectedPriorityRadio.checked = true;
+        if (!this.traversal[this.currentQuestion]) {
+          this.traversal[this.currentQuestion] = {};
+        }
+        this.traversal[this.currentQuestion]["priority"] = this.currentSelectedPriority;
+        this.traversal[this.currentQuestion]["radio"] = this.selectedPriorityRadio;
+      }
+    };
+    this.handlePreviousClick = () => {
+      if (this.currentQuestion > 1) {
+        this.currentSelectedPriority = null;
+        this.selectedPriorityRadio.checked = false;
+        this.currentQuestion -= 1;
+        this.currentSelectedPriority = this.traversal[this.currentQuestion]["priority"];
+        this.traversal[this.currentQuestion]["radio"].checked = true;
+      }
+    };
+    this.handleNextClick = (e) => {
+      if (!e.target.disabled && this.currentQuestion < this.totalQuestions) {
+        this.answers[this.currentQuestion] = this.currentSelectedPriority;
+        this.currentQuestion += 1;
+        if (!this.traversal[this.currentQuestion]) {
+          this.currentSelectedPriority = null;
+          this.selectedPriorityRadio.checked = false;
+        }
+        else {
+          this.currentSelectedPriority = this.traversal[this.currentQuestion]["priority"];
+          this.selectedPriorityRadio = this.traversal[this.currentQuestion]["radio"];
+          this.selectedPriorityRadio.checked = true;
+        }
+        let modalQuizContainer = this.el.shadowRoot.querySelector('.modal-quiz-container');
+        if (modalQuizContainer) {
+          modalQuizContainer.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+          });
+        }
+      }
+    };
+    this.handleEmailReportClick = (e) => {
+      if (!e.target.disabled) {
+        this.answers[this.currentQuestion] = this.currentSelectedPriority;
+        this.emailReportClick.emit(this.answers);
+        this.resetQuiz();
+      }
+    };
+    this.totalQuestions = undefined;
+    this.modalId = undefined;
+    this.currentQuestion = 1;
+    this.currentSelectedPriority = undefined;
+    this.selectedPriorityRadio = undefined;
+    this.answers = {};
+    this.traversal = {};
+  }
+  componentDidLoad() {
+    const images = this.el.querySelectorAll('[slot$="-image"]');
+    for (let i = 0; i < this.totalQuestions; i++) {
+      images[i].style.borderRadius = "12px";
+      images[i].style.width = "100%";
+      images[i].style.objectFit = "contain";
+      images[i].style.marginLeft = "var(--ptc-element-spacing-04)";
+    }
+  }
+  componentDidRender() {
+    const modal = document.querySelector(`#${this.modalId}`);
+    const modalCloseButton = modal.shadowRoot.querySelector('.close');
+    modalCloseButton.addEventListener('click', () => {
+      this.resetQuiz();
+    });
+  }
+  render() {
+    const ProgressDots = () => {
+      return h("div", { class: "dot-progress-bar" }, [...Array(this.totalQuestions).keys()].map(questionNumber => {
+        return h("div", null, h("div", { class: `dot-progress-circle ${(questionNumber === (this.currentQuestion - 1)) ? "active" : ""}` }), (questionNumber < (this.totalQuestions - 1)) ?
+          h("div", { class: "dot-progress-dash" }, h("div", { class: "dashed-line" })) : null);
+      }));
+    };
+    const PriorityOptions = () => {
+      return h("div", { class: "options-container" }, h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Low) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1` }), h("label", { class: "option-label", htmlFor: `1` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "low-level-label" })))), h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Medium) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2` }), h("label", { class: "option-label", htmlFor: `2` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "medium-level-label" })))), h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.High) }, h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3` }), h("label", { class: "option-label", htmlFor: `3` }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "high-level-label" })))));
+    };
+    return (h(Host, null, h("div", { class: "modal-quiz-container" }, h("div", null, h("div", null, h("div", { class: "modal-quiz-progress" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-4", "para-align": "justify", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: "question-text" }), " ", this.currentQuestion, " ", h("slot", { name: "of-text" }), " ", this.totalQuestions), h(ProgressDots, null)), h("div", { class: "modal-quiz-content" }, h("div", { class: "content" }, h("ptc-title", { type: "h2", "text-align": "left", "title-size": "xx-large", "title-color": "gray", upperline: "dotted", "title-display": "inline-block", "title-shadow": "", "title-height": "densest", "title-margin": "margin-1", "title-weight": "w-8", "is-plm-hub": "false" }, h("slot", { name: `question-${this.currentQuestion}-title` })), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, h("slot", { name: `question-${this.currentQuestion}-subtitle` })), h(PriorityOptions, null), h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, (this.currentSelectedPriority) ? h("slot", { name: this.getPriorityAnswerSlotName() }) : null), h("div", { class: "modal-quiz-ctas" }, h("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1) }, h("slot", { name: "previous-ques-text" })), h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
+      h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null }, h("slot", { name: "email-results-text" })) :
+      h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null }, h("slot", { name: "next-ques-text" })))), h("div", { class: "image" }, h("slot", { name: `question-${this.currentQuestion}-image` })))))), h("slot", { name: "script" })));
+  }
+  get el() { return getElement(this); }
+};
 PtcModalQuiz.style = ptcModalQuizCss;
 
 export { PtcModalQuiz as ptc_modal_quiz };