@ptcwebops/ptcw-design 3.6.7 → 3.6.8

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

@@ -6,121 +6,121 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcModalQuizCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}: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) {
-    index.registerInstance(this, hostRef);
-    this.emailReportClick = index.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 index.h("div", { class: "dot-progress-bar" }, [...Array(this.totalQuestions).keys()].map(questionNumber => {
-        return index.h("div", null, index.h("div", { class: `dot-progress-circle ${(questionNumber === (this.currentQuestion - 1)) ? "active" : ""}` }), (questionNumber < (this.totalQuestions - 1)) ?
-          index.h("div", { class: "dot-progress-dash" }, index.h("div", { class: "dashed-line" })) : null);
-      }));
-    };
-    const PriorityOptions = () => {
-      return index.h("div", { class: "options-container" }, index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Low) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1` }), index.h("label", { class: "option-label", htmlFor: `1` }, index.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: "" }, index.h("slot", { name: "low-level-label" })))), index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Medium) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2` }), index.h("label", { class: "option-label", htmlFor: `2` }, index.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: "" }, index.h("slot", { name: "medium-level-label" })))), index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.High) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3` }), index.h("label", { class: "option-label", htmlFor: `3` }, index.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: "" }, index.h("slot", { name: "high-level-label" })))));
-    };
-    return (index.h(index.Host, null, index.h("div", { class: "modal-quiz-container" }, index.h("div", null, index.h("div", null, index.h("div", { class: "modal-quiz-progress" }, index.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: "" }, index.h("slot", { name: "question-text" }), " ", this.currentQuestion, " ", index.h("slot", { name: "of-text" }), " ", this.totalQuestions), index.h(ProgressDots, null)), index.h("div", { class: "modal-quiz-content" }, index.h("div", { class: "content" }, index.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" }, index.h("slot", { name: `question-${this.currentQuestion}-title` })), index.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: "" }, index.h("slot", { name: `question-${this.currentQuestion}-subtitle` })), index.h(PriorityOptions, null), index.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) ? index.h("slot", { name: this.getPriorityAnswerSlotName() }) : null), index.h("div", { class: "modal-quiz-ctas" }, index.h("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1), styles: "button{margin-bottom:20px;}" }, index.h("slot", { name: "previous-ques-text" })), index.h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
-      index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null, styles: "button{margin-bottom:20px;}" }, index.h("slot", { name: "email-results-text" })) :
-      index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null, styles: "button{margin-bottom:20px;}" }, index.h("slot", { name: "next-ques-text" })))), index.h("div", { class: "image" }, index.h("slot", { name: `question-${this.currentQuestion}-image` })))))), index.h("slot", { name: "script" })));
-  }
-  get el() { return index.getElement(this); }
-};
+var Priority;
+(function (Priority) {
+  Priority["Low"] = "low";
+  Priority["Medium"] = "medium";
+  Priority["High"] = "high";
+})(Priority || (Priority = {}));
+const PtcModalQuiz = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.emailReportClick = index.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 index.h("div", { class: "dot-progress-bar" }, [...Array(this.totalQuestions).keys()].map(questionNumber => {
+        return index.h("div", null, index.h("div", { class: `dot-progress-circle ${(questionNumber === (this.currentQuestion - 1)) ? "active" : ""}` }), (questionNumber < (this.totalQuestions - 1)) ?
+          index.h("div", { class: "dot-progress-dash" }, index.h("div", { class: "dashed-line" })) : null);
+      }));
+    };
+    const PriorityOptions = () => {
+      return index.h("div", { class: "options-container" }, index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Low) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `1` }), index.h("label", { class: "option-label", htmlFor: `1` }, index.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: "" }, index.h("slot", { name: "low-level-label" })))), index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.Medium) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `2` }), index.h("label", { class: "option-label", htmlFor: `2` }, index.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: "" }, index.h("slot", { name: "medium-level-label" })))), index.h("div", { class: "radio-input", onClick: e => this.handlePriorityOptionClick(e, Priority.High) }, index.h("input", { type: "radio", name: `modal-quiz-${this.currentQuestion}`, id: `3` }), index.h("label", { class: "option-label", htmlFor: `3` }, index.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: "" }, index.h("slot", { name: "high-level-label" })))));
+    };
+    return (index.h(index.Host, null, index.h("div", { class: "modal-quiz-container" }, index.h("div", null, index.h("div", null, index.h("div", { class: "modal-quiz-progress" }, index.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: "" }, index.h("slot", { name: "question-text" }), " ", this.currentQuestion, " ", index.h("slot", { name: "of-text" }), " ", this.totalQuestions), index.h(ProgressDots, null)), index.h("div", { class: "modal-quiz-content" }, index.h("div", { class: "content" }, index.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" }, index.h("slot", { name: `question-${this.currentQuestion}-title` })), index.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: "" }, index.h("slot", { name: `question-${this.currentQuestion}-subtitle` })), index.h(PriorityOptions, null), index.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) ? index.h("slot", { name: this.getPriorityAnswerSlotName() }) : null), index.h("div", { class: "modal-quiz-ctas" }, index.h("ptc-button", { type: "link", color: "ptc-tertiary", onClick: () => this.handlePreviousClick(), disabled: (this.currentQuestion === 1), styles: "button{margin-bottom:20px;}" }, index.h("slot", { name: "previous-ques-text" })), index.h("ptc-spacer", { size: "large", breakpoint: "x-small" }), (this.currentQuestion === this.totalQuestions) ?
+      index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleEmailReportClick(e), disabled: this.currentSelectedPriority == null, styles: "button{margin-bottom:20px;}" }, index.h("slot", { name: "email-results-text" })) :
+      index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: e => this.handleNextClick(e), disabled: this.currentSelectedPriority == null, styles: "button{margin-bottom:20px;}" }, index.h("slot", { name: "next-ques-text" })))), index.h("div", { class: "image" }, index.h("slot", { name: `question-${this.currentQuestion}-image` })))))), index.h("slot", { name: "script" })));
+  }
+  get el() { return index.getElement(this); }
+};
 PtcModalQuiz.style = ptcModalQuizCss;
 
 exports.ptc_modal_quiz = PtcModalQuiz;

package/dist/cjs/ptc-nav-card.cjs.entry.js

@@ -6,42 +6,42 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcNavCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:flex;height:100%;width:100%;position:relative}:host .nav-card-wrap{display:flex;align-items:center;width:100%;border-radius:var(--ptc-border-radius-standard);background-color:var(--color-gray-12)}:host .nav-card-wrap:hover{background-color:var(--color-gray-08)}@media only screen and (min-width: 1200px){:host .nav-card-wrap{background-color:var(--color-gray-10)}:host .nav-card-wrap:hover{background-color:var(--color-gray-08)}}:host .nav-card-wrap h4,:host .nav-card-wrap p,:host .nav-card-wrap a{color:var(--color-white);margin:0;text-decoration:none}:host .nav-card-wrap .media-card-wrap{padding:1rem 1.5rem 1.125rem 1.5rem;width:100%;height:100%;display:flex;align-items:center}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap{padding:1rem}}:host .nav-card-wrap .media-card-wrap h4{margin-bottom:0.25rem;font-weight:800;display:flex;align-items:center;font-size:var(--ptc-font-size-medium);word-break:break-word}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap h4{font-size:var(--ptc-font-size-xxx-small)}}:host .nav-card-wrap .media-card-wrap p{font-size:var(--ptc-font-size-x-small)}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap p{font-size:var(--ptc-font-size-xxx-small)}}:host .nav-card-wrap .media-card-wrap .card-logo{padding-right:1.5rem}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap .card-logo{padding-right:1rem}}:host .nav-card-wrap .media-card-wrap .card-logo img{width:100%;max-width:2rem;min-width:2rem}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap .card-logo img{max-width:1.5rem;min-width:1.5rem}}:host(.media-card) .nav-card-wrap{min-height:99px;box-sizing:border-box}@media only screen and (min-width: 1200px){:host(.media-card) .nav-card-wrap{min-height:80px}}:host(.cta-card) .nav-card-wrap{border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-gray-09);min-height:99px;box-sizing:border-box}@media only screen and (min-width: 1200px){:host(.cta-card) .nav-card-wrap{min-height:80px;background-color:transparent}}:host(.cta-card) .nav-card-wrap:hover{background-color:var(--color-gray-08)}:host(.cta-card) .nav-card-wrap .card-content{margin:auto}:host(.cta-card) .nav-card-wrap .card-content h4{margin:0}:host(.cta-card) .nav-card-wrap .card-content svg{vertical-align:middle;margin-left:0.375rem}:host(.links-card) .nav-card-wrap{background-color:transparent;align-items:flex-start;padding:1rem 1.5rem 1.5rem 1.5rem;border-bottom:1px solid var(--color-gray-07);border-radius:0;margin:0 -1.5rem}@media only screen and (min-width: 1200px){:host(.links-card) .nav-card-wrap{margin:0;padding:1.5rem;border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard)}}:host(.links-card) .nav-card-wrap:hover{background-color:transparent}:host(.links-card) .nav-card-wrap h3{margin:0 0 8px 0;display:inline-block;font-weight:800;font-size:20px;color:var(--color-white)}@media only screen and (min-width: 1200px){:host(.links-card) .nav-card-wrap h3{font-size:15px;margin:0 0 10px 0}}:host(.links-card) .nav-card-wrap h3 svg{margin-left:0.375rem;vertical-align:middle}:host(.links-card) .nav-card-wrap h3 a{border-bottom:1.5px solid transparent}:host(.links-card) .nav-card-wrap h3 a:hover{border-color:var(--color-green-06)}:host(.links-card) ::slotted(ptc-link){padding:8px 0;line-height:14px}@media only screen and (min-width: 1200px){:host(.links-card) ::slotted(ptc-link){padding:6px 0}}";
 
-const PtcNavCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardType = undefined;
-    this.cardHref = undefined;
-    this.logoAlt = undefined;
-    this.target = '_self';
-    this.rel = undefined;
-    this.linkTitle = undefined;
-    this.cardLogo = undefined;
-    this.heading = undefined;
-    this.description = undefined;
-    this.windowSize = 'mobile';
-  }
-  handleResize() {
-    if (window.innerWidth < 992) {
-      this.windowSize = 'mobile';
-    }
-    else {
-      this.windowSize = 'desktop';
-    }
-  }
-  componentWillLoad() {
-    this.handleResize();
-  }
-  render() {
-    return (index.h(index.Host, { class: this.cardType }, index.h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
-      index.h("div", { class: "links-card-wrap" }, index.h("h3", null, (this.cardHref && !(this.cardHref.startsWith('#'))) ?
-        (index.h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, index.h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), index.h("slot", null))
-      :
-        index.h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
-          index.h("div", { class: "card-logo" }, index.h("img", { src: this.cardLogo, alt: this.logoAlt })), index.h("div", { class: "card-content" }, index.h("h4", null, this.heading, this.cardType == "cta-card" &&
-          index.h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
-          index.h("p", null, this.description))))));
-  }
-};
+const PtcNavCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardType = undefined;
+    this.cardHref = undefined;
+    this.logoAlt = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.linkTitle = undefined;
+    this.cardLogo = undefined;
+    this.heading = undefined;
+    this.description = undefined;
+    this.windowSize = 'mobile';
+  }
+  handleResize() {
+    if (window.innerWidth < 992) {
+      this.windowSize = 'mobile';
+    }
+    else {
+      this.windowSize = 'desktop';
+    }
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    return (index.h(index.Host, { class: this.cardType }, index.h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
+      index.h("div", { class: "links-card-wrap" }, index.h("h3", null, (this.cardHref && !(this.cardHref.startsWith('#'))) ?
+        (index.h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, index.h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), index.h("slot", null))
+      :
+        index.h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
+          index.h("div", { class: "card-logo" }, index.h("img", { src: this.cardLogo, alt: this.logoAlt })), index.h("div", { class: "card-content" }, index.h("h4", null, this.heading, this.cardType == "cta-card" &&
+          index.h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
+          index.h("p", null, this.description))))));
+  }
+};
 PtcNavCard.style = ptcNavCardCss;
 
 exports.ptc_nav_card = PtcNavCard;

package/dist/cjs/ptc-nav-link.cjs.entry.js

@@ -6,42 +6,42 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcNavLinkCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-03);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{padding:22px var(--ptc-element-spacing-03);margin-left:0;display:flex;align-items:center;white-space:nowrap;position:relative}:host a::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white)}@media only screen and (min-width: 1200px){:host a:hover::after,:host a:focus::after{border-color:var(--color-white)}}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
 
-const PtcNavLink = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.navLinkClicked = index.createEvent(this, "navLinkClicked", 7);
-    this.href = undefined;
-    this.isOutsideLink = false;
-    this.titleText = '';
-  }
-  handleClick(event) {
-    // Prevent the event from propagating to the underlying <a> element
-    event.stopPropagation();
-    // Check if the href starts with #
-    if (this.href && this.href.startsWith('#')) {
-      // Find the corresponding section
-      const section = document.querySelector(this.href);
-      section.scrollIntoView({
-        behavior: 'smooth',
-      });
-      this.navLinkClicked.emit();
-    }
-  }
-  trimString(inputString, maxLength) {
-    if (inputString.length > maxLength) {
-      return inputString.slice(0, maxLength) + '...';
-    }
-    else {
-      return inputString;
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: event => {
-        this.handleClick(event);
-      } }, index.h("slot", null), !this.href.startsWith('#') && (index.h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, index.h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" }))))));
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcNavLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.navLinkClicked = index.createEvent(this, "navLinkClicked", 7);
+    this.href = undefined;
+    this.isOutsideLink = false;
+    this.titleText = '';
+  }
+  handleClick(event) {
+    // Prevent the event from propagating to the underlying <a> element
+    event.stopPropagation();
+    // Check if the href starts with #
+    if (this.href && this.href.startsWith('#')) {
+      // Find the corresponding section
+      const section = document.querySelector(this.href);
+      section.scrollIntoView({
+        behavior: 'smooth',
+      });
+      this.navLinkClicked.emit();
+    }
+  }
+  trimString(inputString, maxLength) {
+    if (inputString.length > maxLength) {
+      return inputString.slice(0, maxLength) + '...';
+    }
+    else {
+      return inputString;
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: event => {
+        this.handleClick(event);
+      } }, index.h("slot", null), !this.href.startsWith('#') && (index.h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, index.h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" }))))));
+  }
+  get el() { return index.getElement(this); }
+};
 PtcNavLink.style = ptcNavLinkCss;
 
 exports.ptc_nav_link = PtcNavLink;

package/dist/cjs/ptc-nav-pills.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcNavPillsCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;text-align:center;margin:12px 0}:host ::slotted(a){display:inline-block;padding:10px 24px;background-color:var(--color-gray-02);border-radius:var(--ptc-border-radius-pill);color:var(--color-gray-10) !important;font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);text-decoration:none !important;margin:12px;max-width:205px;vertical-align:middle;line-height:var(--ptc-line-height-densest)}:host ::slotted(a):last-child{margin-right:0}:host ::slotted(a:hover){background-color:var(--color-gray-04)}";
 
-const PtcNavPills = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-};
+const PtcNavPills = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
 PtcNavPills.style = ptcNavPillsCss;
 
 exports.ptc_nav_pills = PtcNavPills;