@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css

@@ -1040,10 +1040,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -1062,10 +1060,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -1107,7 +1103,7 @@ ptc-footer {
   position: absolute;
   width: calc(100% + 16px);
   height: calc(100% + 8px);
-  background: #fef3f3;
+  background: #FEF3F3;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1193,7 +1189,7 @@ ptc-footer {
 }
 .checkbox-helper-wrapper p {
   position: relative;
-  color: #af3231;
+  color: #AF3231;
   font-family: Raleway;
   font-size: var(--ptc-font-size-xx-small);
   font-style: normal;

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.js

@@ -1,8 +1,8 @@
-import { h, Host, } from "@stencil/core";
-import { MDCCheckbox } from "@material/checkbox";
-import { MDCFormField } from "@material/form-field";
-import { ValidationMessages } from "../../utils/validation-messages";
-import { getLanguageFromURL } from "../../utils/utils";
+import { h, Host } from '@stencil/core';
+import { MDCCheckbox } from '@material/checkbox';
+import { MDCFormField } from '@material/form-field';
+import { ValidationMessages } from '../../utils/validation-messages';
+import { getLanguageFromURL } from '../../utils/utils';
 export class PtcFormCheckbox {
   constructor() {
     this.checkboxId = undefined;
@@ -10,12 +10,12 @@ export class PtcFormCheckbox {
     this.isRequired = true;
     this.isChecked = false;
     this.name = undefined;
-    this.helpertext = "This field is required";
+    this.helpertext = 'This field is required';
     this.hideCheckbox = false;
     this.disabled = false;
     this.ptcDataEloquaName = undefined;
     this.hasError = false;
-    this.language = "en";
+    this.language = 'en';
     this.ignoreBlindSubmit = false;
   }
   handleChange(event) {
@@ -31,7 +31,7 @@ export class PtcFormCheckbox {
   }
   componentWillLoad() {
     this.language = getLanguageFromURL();
-    this.helpertext = this.getValidationMessage("required");
+    this.helpertext = this.getValidationMessage('required');
   }
   componentDidLoad() {
     this.mdcCheckboxComponent = MDCCheckbox.attachTo(this.mdcCheckbox);
@@ -44,14 +44,14 @@ export class PtcFormCheckbox {
     if (this.isRequired) {
       if (!this.isChecked) {
         this.hasError = true; // Set error state to true
-        if (!this.el.classList.contains("invalid-checkbox")) {
-          this.el.classList.add("invalid-checkbox");
+        if (!this.el.classList.contains('invalid-checkbox')) {
+          this.el.classList.add('invalid-checkbox');
         }
       }
       else {
         this.hasError = false; // Reset error state
-        if (this.el.classList.contains("invalid-checkbox")) {
-          this.el.classList.remove("invalid-checkbox");
+        if (this.el.classList.contains('invalid-checkbox')) {
+          this.el.classList.remove('invalid-checkbox');
         }
       }
     }
@@ -63,7 +63,7 @@ export class PtcFormCheckbox {
     if (this.disabled) {
       return;
     }
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       event.preventDefault();
       this.isChecked = !this.isChecked;
       this.checkboxChanged.emit(this.isChecked);
@@ -78,17 +78,13 @@ export class PtcFormCheckbox {
   }
   render() {
     return (h(Host, { class: "ptc-checkbox-field" }, [
-      h("div", { class: `mdc-form-field ${this.hideCheckbox ? "label-only" : ""}`, ref: (mdcFormfield) => {
+      h("div", { class: `mdc-form-field ${this.hideCheckbox ? 'label-only' : ''}`, ref: (mdcFormfield) => {
           this.mdcFormfield = mdcFormfield;
         }, "aria-labelledby": this.checkboxId }, h("div", { class: "mdc-checkbox", ref: (mdcCheckbox) => {
           this.mdcCheckbox = mdcCheckbox;
-        }, "aria-checked": this.isChecked ? "true" : "false", "aria-disabled": this.disabled ? "true" : "false" }, h("input", Object.assign({ id: this.checkboxId, ref: (checkboxInput) => {
+        }, "aria-checked": this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", Object.assign({ id: this.checkboxId, ref: checkboxInput => {
           this.checkboxInput = checkboxInput;
-        }, type: "checkbox" }, (this.isRequired
-        ? { required: true }
-        : { required: false }), (this.ignoreBlindSubmit
-        ? { ignoreBlindSubmit: true }
-        : null), { "data-eloqua-name": this.ptcDataEloquaName, class: "mdc-checkbox__native-control", onChange: this.handleChange.bind(this), onKeyDown: this.handleKeyDown.bind(this), checked: this.isChecked, disabled: this.disabled, "aria-invalid": this.hasError })), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" })), h("div", { class: "mdc-checkbox__ripple" })), h("label", { htmlFor: this.checkboxId, innerHTML: this.label })),
+        }, type: "checkbox" }, (this.isRequired ? { required: true } : { required: false }), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { "data-eloqua-name": this.ptcDataEloquaName, class: "mdc-checkbox__native-control", onChange: this.handleChange.bind(this), onKeyDown: this.handleKeyDown.bind(this), checked: this.isChecked, disabled: this.disabled, "aria-invalid": this.hasError })), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" })), h("div", { class: "mdc-checkbox__ripple" })), h("label", { htmlFor: this.checkboxId, innerHTML: this.label })),
       this.hasError ? (h("div", { class: "checkbox-helper-wrapper" }, h("p", { id: this.name }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext))) : null,
     ]));
   }
@@ -208,7 +204,7 @@ export class PtcFormCheckbox {
         },
         "attribute": "helpertext",
         "reflect": false,
-        "defaultValue": "\"This field is required\""
+        "defaultValue": "'This field is required'"
       },
       "hideCheckbox": {
         "type": "boolean",

package/dist/collection/components/ptc-form-radio-button/ptc-form-radio-button.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-form-radio-button/ptc-form-radio-button.js

@@ -1,16 +1,16 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcFormRadioButton {
   constructor() {
     this.radioButtonOnClick = (radioButton) => {
       if (!this.isDisabled) {
-        const svgCircle = radioButton.querySelector("svg");
+        const svgCircle = radioButton.querySelector('svg');
         if (svgCircle) {
           this.checked = !this.checked;
-          svgCircle.setAttribute("data-checked", String(this.checked));
+          svgCircle.setAttribute('data-checked', String(this.checked));
           this.checkedChanged.emit({
             el: this.el,
             name: this.name,
-            checked: this.checked,
+            checked: this.checked
           });
         }
       }
@@ -21,11 +21,11 @@ export class PtcFormRadioButton {
     this.checked = this.isChecked;
   }
   componentDidLoad() {
-    const svgCircle = this.el.shadowRoot.querySelector("svg");
-    svgCircle.setAttribute("data-checked", String(this.checked));
+    const svgCircle = this.el.shadowRoot.querySelector('svg');
+    svgCircle.setAttribute('data-checked', String(this.checked));
   }
   render() {
-    return (h(Host, null, h("div", { class: "ptc-form-radio-button", onClick: (e) => this.radioButtonOnClick(e.currentTarget), "data-disabled": this.isDisabled }, h("svg", { height: "14px", width: "14px", viewBox: "0 0 14 14" }, h("circle", { class: "outer-circle", cx: "7", cy: "7", r: "6", "stroke-width": "1", fill: "transparent" }), h("circle", { class: "inner-circle", cx: "7", cy: "7", r: "3", "stroke-width": "0", fill: "transparent" })), h("div", { class: "radio-label" }, h("ptc-para", { "font-size": "xx-small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("slot", null))))));
+    return (h(Host, null, h("div", { class: "ptc-form-radio-button", onClick: e => this.radioButtonOnClick(e.currentTarget), "data-disabled": this.isDisabled }, h("svg", { height: "14px", width: "14px", viewBox: "0 0 14 14" }, h("circle", { class: "outer-circle", cx: "7", cy: "7", r: "6", "stroke-width": "1", fill: "transparent" }), h("circle", { class: "inner-circle", cx: "7", cy: "7", r: "3", "stroke-width": "0", fill: "transparent" })), h("div", { class: "radio-label" }, h("ptc-para", { "font-size": "xx-small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("slot", null))))));
   }
   static get is() { return "ptc-form-radio-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-form-radio-group/ptc-form-radio-group.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-form-radio-group/ptc-form-radio-group.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcFormRadioGroup {
   constructor() {
     this.getGroupRadioButtons = () => {
@@ -6,14 +6,14 @@ export class PtcFormRadioGroup {
     };
     this.checkUnique = (name) => {
       for (let key in this.checkedStates) {
-        this.checkedStates[key] = name === key ? true : false;
+        this.checkedStates[key] = (name === key) ? true : false;
       }
       let radioButtons = this.getGroupRadioButtons();
       for (let button of radioButtons) {
-        let name = button.getAttribute("name");
-        button.setAttribute("is-checked", this.checkedStates[name]);
-        let buttonSvg = button.shadowRoot.querySelector("svg");
-        buttonSvg.setAttribute("data-checked", String(this.checkedStates[name]));
+        let name = button.getAttribute('name');
+        button.setAttribute('is-checked', this.checkedStates[name]);
+        let buttonSvg = button.shadowRoot.querySelector('svg');
+        buttonSvg.setAttribute('data-checked', String(this.checkedStates[name]));
       }
     };
     this.checkedChangeListener = (e) => {
@@ -28,8 +28,8 @@ export class PtcFormRadioGroup {
   componentDidLoad() {
     let radioButtons = this.getGroupRadioButtons();
     for (let button of radioButtons) {
-      let name = button.getAttribute("name");
-      let checked = button.getAttribute("is-checked") || false;
+      let name = button.getAttribute('name');
+      let checked = button.getAttribute('is-checked') || false;
       this.checkedStates[name] = Boolean(checked);
     }
     this.el.addEventListener("checkedChanged", this.checkedChangeListener);

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

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcHero {
   constructor() {
     this.heroType = undefined;
@@ -7,15 +7,12 @@ export class PtcHero {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, !!this.bgUrl ? (h("ptc-img", { "image-type": "smart-bg", "img-url": this.bgUrl, "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == "jumbotron" ? ([
-      h("ptc-overlay", { "filter-color": "black-1" }),
-      h("ptc-overlay", { "filter-color": "black-2" }),
-    ]) : this.heroType == "footer-cta" ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null))) : (h("slot", null)))));
+    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, !!this.bgUrl ? (h("ptc-img", { "image-type": "smart-bg", "img-url": this.bgUrl, "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null))) : (h("slot", null)))));
   }
   getCssClassMap() {
     return {
       [this.heroType]: this.heroType ? true : false,
-      [this.contentAlignment]: this.contentAlignment ? true : false,
+      [this.contentAlignment]: this.contentAlignment ? true : false
     };
   }
   static get is() { return "ptc-hero"; }
@@ -36,7 +33,7 @@ export class PtcHero {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"jumbotron\" | \"footer-cta\" | \"simple\"",
+          "original": "'jumbotron' | 'footer-cta' | 'simple'",
           "resolved": "\"footer-cta\" | \"jumbotron\" | \"simple\"",
           "references": {}
         },
@@ -71,7 +68,7 @@ export class PtcHero {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"left\" | \"right\" | \"center\"",
+          "original": "'left' | 'right' | 'center'",
           "resolved": "\"center\" | \"left\" | \"right\"",
           "references": {}
         },

package/dist/collection/components/ptc-hero-footer-cta/ptc-hero-footer-cta.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -76,8 +72,7 @@ ptc-footer {
   z-index: 10;
   margin: auto;
 }
-.hero-footer-cta h2,
-.hero-footer-cta p {
+.hero-footer-cta h2, .hero-footer-cta p {
   color: var(--color-white);
   text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
   font-stretch: normal;

package/dist/collection/components/ptc-hero-footer-cta/ptc-hero-footer-cta.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcHeroFooterCta {
   constructor() {
     this.ctaTitle = undefined;

package/dist/collection/components/ptc-homepage-image-feature/ptc-homepage-image-feature.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-homepage-image-feature/ptc-homepage-image-feature.js

@@ -1,11 +1,9 @@
-import { Host, h } from "@stencil/core";
-import { observeInView } from "../../utils/utils";
+import { Host, h } from '@stencil/core';
+import { observeInView } from '../../utils/utils';
 export class PtcHomepageImageFeature {
-  componentDidLoad() {
-    observeInView(this.hostEle, ".ptc-animate", true);
-  }
+  componentDidLoad() { observeInView(this.hostEle, '.ptc-animate', true); }
   render() {
-    return (h(Host, null, h("div", { class: "img-wrap ptc-animate" }, h("slot", { name: "featured-image" })), h("div", { class: "card-wrap ptc-animate" }, h("div", { class: "card" }, h("slot", { name: "card-title" }), h("slot", null)))));
+    return (h(Host, null, h("div", { class: 'img-wrap ptc-animate' }, h("slot", { name: 'featured-image' })), h("div", { class: 'card-wrap ptc-animate' }, h("div", { class: 'card' }, h("slot", { name: 'card-title' }), h("slot", null)))));
   }
   static get is() { return "ptc-homepage-image-feature"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -80,10 +76,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -102,10 +96,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */