npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.38 → 6.3.40-beta - Mend

@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1058) hide show

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js CHANGED Viewed

@@ -1,16 +1,16 @@
-import { h } from "@stencil/core";
-import { createFocusTrap } from "focus-trap";
+import { h } from '@stencil/core';
+import { createFocusTrap } from 'focus-trap';
 export class EventJumbotronExample {
   constructor() {
     this.startX = 0;
     this.scrollLeft = 0;
     this.updateContainerClass = () => {
       if (this.isDesktop) {
-        this.sliderWrapper.classList.add("ptc-container", "u-paddingRight-flush", "u-paddingLeft-flush");
+        this.sliderWrapper.classList.add('ptc-container', 'u-paddingRight-flush', 'u-paddingLeft-flush');
         this.disableDragging();
       }
       else {
-        this.sliderWrapper.classList.remove("ptc-container", "u-paddingRight-flush", "u-paddingLeft-flush");
+        this.sliderWrapper.classList.remove('ptc-container', 'u-paddingRight-flush', 'u-paddingLeft-flush');
         this.enableDragging();
       }
     };
@@ -32,13 +32,13 @@ export class EventJumbotronExample {
       this.isMouseDown = false;
     };
     this.closeActiveModal = () => {
-      document.querySelectorAll("ptc-modal").forEach((modal) => {
+      document.querySelectorAll('ptc-modal').forEach(modal => {
         if (modal.show)
           modal.show = false;
       });
     };
     this.cards = [];
-    this.modalBtnCloseText = "Close";
+    this.modalBtnCloseText = 'Close';
     this.activePanel = null;
     this.activeCard = null;
     this.isDragging = false;
@@ -94,12 +94,12 @@ export class EventJumbotronExample {
   //Focus the ptc-button directly in the no content panel (tab navigation).
   setupTabNavigation(panel) {
     var _a;
-    if (panel.querySelector(".no-content-card")) {
-      const shadowButton = panel.querySelector("ptc-close-icon");
-      const closeButton = (_a = shadowButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".close-icon");
+    if (panel.querySelector('.no-content-card')) {
+      const shadowButton = panel.querySelector('ptc-close-icon');
+      const closeButton = (_a = shadowButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close-icon');
       if (closeButton) {
-        closeButton.addEventListener("keydown", (event) => {
-          if (event.key === "Tab" && !event.shiftKey) {
+        closeButton.addEventListener('keydown', (event) => {
+          if (event.key === 'Tab' && !event.shiftKey) {
             event.preventDefault();
             this.focusShadowDomElement(panel);
           }
@@ -111,11 +111,11 @@ export class EventJumbotronExample {
     }
   }
   focusShadowDomElement(panel) {
-    const card = panel.querySelector(".no-content-card");
+    const card = panel.querySelector('.no-content-card');
     if (card) {
-      const button = card.querySelector("ptc-button");
+      const button = card.querySelector('ptc-button');
       if (button) {
-        const link = button.shadowRoot.querySelector("a");
+        const link = button.shadowRoot.querySelector('a');
         if (link) {
           link.focus();
         }
@@ -126,19 +126,19 @@ export class EventJumbotronExample {
     if (this.activePanel)
       return;
     this.slider.style.transform = `translateX(-${card.offsetLeft}px)`;
-    Array.from(this.slider.children).forEach((c) => {
+    Array.from(this.slider.children).forEach(c => {
       if (c !== card)
-        c.classList.add("hidden");
+        c.classList.add('hidden');
     });
-    panel.style.display = "block";
+    panel.style.display = 'block';
     panel.style.width = `calc(100% - ${card.getBoundingClientRect().width}px`;
     card.style.height = `${panel.getBoundingClientRect().height}px`;
-    this.arrowButtons = document.querySelectorAll("ptc-scroll-button");
+    this.arrowButtons = document.querySelectorAll('ptc-scroll-button');
     setTimeout(() => {
       panel.style.transform = `translateX(${card.offsetWidth}px)`;
-      panel.classList.add("visible");
-      card.classList.add("active");
-      this.arrowButtons.forEach((button) => button.initVisibility());
+      panel.classList.add('visible');
+      card.classList.add('active');
+      this.arrowButtons.forEach(button => button.initVisibility());
       this.activePanel = panel.id;
       this.activeCard = card.id;
     }, 100);
@@ -146,21 +146,21 @@ export class EventJumbotronExample {
   closePanel(panelId) {
     const panel = document.getElementById(panelId);
     if (panel) {
-      panel.classList.remove("visible");
-      panel.addEventListener("transitionend", () => {
-        if (!panel.classList.contains("visible")) {
-          panel.style.display = "none";
+      panel.classList.remove('visible');
+      panel.addEventListener('transitionend', () => {
+        if (!panel.classList.contains('visible')) {
+          panel.style.display = 'none';
         }
       }, { once: true });
     }
     this.activePanel = null;
-    this.slider.style.transform = "translateX(0)";
-    Array.from(this.slider.children).forEach((card) => {
-      card.style.cssText = "";
+    this.slider.style.transform = 'translateX(0)';
+    Array.from(this.slider.children).forEach(card => {
+      card.style.cssText = '';
     });
     setTimeout(() => {
-      Array.from(this.slider.children).forEach((card) => {
-        card.classList.remove("hidden", "active");
+      Array.from(this.slider.children).forEach(card => {
+        card.classList.remove('hidden', 'active');
       });
     }, 300);
     if (this.trap) {
@@ -168,49 +168,42 @@ export class EventJumbotronExample {
     }
   }
   enableDragging() {
-    this.slider.addEventListener("mousedown", this.startDragging);
-    this.slider.addEventListener("mousemove", this.performDragging);
-    ["mouseup", "mouseleave"].forEach((event) => this.slider.addEventListener(event, this.stopDragging));
+    this.slider.addEventListener('mousedown', this.startDragging);
+    this.slider.addEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.slider.addEventListener(event, this.stopDragging));
   }
   disableDragging() {
-    this.slider.removeEventListener("mousedown", this.startDragging);
-    this.slider.removeEventListener("mousemove", this.performDragging);
-    ["mouseup", "mouseleave"].forEach((event) => this.slider.removeEventListener(event, this.stopDragging));
+    this.slider.removeEventListener('mousedown', this.startDragging);
+    this.slider.removeEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.slider.removeEventListener(event, this.stopDragging));
   }
   componentDidLoad() {
     // const cardOverlays = document.querySelectorAll('overlay');
-    this.sliderWrapper = document.querySelector(".jumbotron-cards-wrapper");
-    this.slider = document.querySelector(".jumbotron-cards");
+    this.sliderWrapper = document.querySelector('.jumbotron-cards-wrapper');
+    this.slider = document.querySelector('.jumbotron-cards');
     this.updateContainerClass();
-    window.addEventListener("resize", () => {
+    window.addEventListener('resize', () => {
       this.isDesktop = window.innerWidth >= 992;
       this.updateContainerClass();
-      this.activePanel &&
-        this.activeCard &&
-        this.closePanel(this.activePanel);
+      this.activePanel && this.activeCard && this.closePanel(this.activePanel);
     });
-    document.addEventListener("keydown", (event) => {
-      if (event.key === "Tab" ||
-        event.key === "Enter" ||
-        event.key === " ") {
+    document.addEventListener('keydown', event => {
+      if (event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') {
         this.openedWithKeyboard = true;
       }
     });
-    document.addEventListener("mousedown", () => {
+    document.addEventListener('mousedown', () => {
       this.openedWithKeyboard = false;
     });
     // cardOverlays.forEach( (ele=> {(ele as HTMLPtcOverlayElement).setOverlayColorValue('linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%)')}))
   }
   render() {
-    const modalContentSlots = Array.from(this.el.querySelectorAll("template"));
+    const modalContentSlots = Array.from(this.el.querySelectorAll('template'));
     return [
       h("div", { class: {
-          "event-jumbotron": true,
-          "ptc-container": this.isDesktop,
-        } }, h("div", { class: "jumbotron-cards-wrapper" }, h("div", { class: "jumbotron-cards" }, this.cards.map((card, index) => (h("div", { id: `card-${index}`, class: "card", onClick: () => this.handleCardClick(index), "data-panel": `panel-${index}`, onKeyPress: () => this.handleCardClick(index), tabindex: "0" }, h("ptc-img", { "border-radius": "radius-standard", "image-type": "smart-bg", "img-url": card.cardBg, "load-mode": "lazy-bg", styles: `ptc-img{position: absolute; width: 100%; height: 100%; z-index: 0} ${this.activePanel &&
-          "ptc-img div{border-top-right-radius:0px !important;border-bottom-right-radius:0px !important;"}` }), h("div", { class: "text-wrapper" }, h("h3", { class: "card-title" }, card.title, " ", h("span", null, card.description)), !this.activePanel && [
-        h("div", { innerHTML: card.panelContent }),
-      ]))))), this.cards.map((_, index) => (h("div", { id: `panel-${index}`, class: "panel" }, h("button", { tabindex: "-1", class: "close-panel", onClick: () => this.closePanel(`panel-${index}`), "aria-label": "Close panel" }, h("ptc-close-icon", null)), h("slot", { name: `panel-content-${index}` })))), !this.isDesktop &&
+          'event-jumbotron': true,
+          'ptc-container': this.isDesktop,
+        } }, h("div", { class: "jumbotron-cards-wrapper" }, h("div", { class: "jumbotron-cards" }, this.cards.map((card, index) => (h("div", { id: `card-${index}`, class: "card", onClick: () => this.handleCardClick(index), "data-panel": `panel-${index}`, onKeyPress: () => this.handleCardClick(index), tabindex: "0" }, h("ptc-img", { "border-radius": "radius-standard", "image-type": "smart-bg", "img-url": card.cardBg, "load-mode": "lazy-bg", styles: `ptc-img{position: absolute; width: 100%; height: 100%; z-index: 0} ${this.activePanel && 'ptc-img div{border-top-right-radius:0px !important;border-bottom-right-radius:0px !important;'}` }), h("div", { class: "text-wrapper" }, h("h3", { class: "card-title" }, card.title, " ", h("span", null, card.description)), !this.activePanel && [h("div", { innerHTML: card.panelContent })]))))), this.cards.map((_, index) => (h("div", { id: `panel-${index}`, class: "panel" }, h("button", { tabindex: "-1", class: "close-panel", onClick: () => this.closePanel(`panel-${index}`), "aria-label": "Close panel" }, h("ptc-close-icon", null)), h("slot", { name: `panel-content-${index}` })))), !this.isDesktop &&
         this.cards.map((_, index) => (h("ptc-modal", { id: `modal-${index}`, show: false, "close-on-blur": true, "modal-type": "event-listing", "custom-class": "event-mobile-modal", headerOnlyText1: this.cards[index].title, headerOnlyText2: this.cards[index].description, headerOnlyBg: this.cards[index].cardBg, bottomCloseBtn: this.modalBtnCloseText }, h("div", { innerHTML: modalContentSlots[index].innerHTML })))))),
       h("div", { class: "white-placeholder" }),
     ];
@@ -233,7 +226,7 @@ export class EventJumbotronExample {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "{\r\n\t\ttitle: string;\r\n\t\tdescription: string;\r\n\t\tpanelContent: string;\r\n\t\tcardBg: string;\r\n\t}[]",
+          "original": "{ title: string; description: string; panelContent: string; cardBg: string }[]",
           "resolved": "{ title: string; description: string; panelContent: string; cardBg: string; }[]",
           "references": {}
         },
@@ -261,7 +254,7 @@ export class EventJumbotronExample {
         },
         "attribute": "modal-btn-close-text",
         "reflect": false,
-        "defaultValue": "\"Close\""
+        "defaultValue": "'Close'"
       }
     };
   }

package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.css CHANGED Viewed

@@ -708,10 +708,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;
@@ -730,10 +728,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 */
@@ -1050,12 +1046,12 @@ homepage-case-study-cards {
   width: 161px;
   height: 8px;
   border-radius: 999px;
-  background: #e4e7e9;
+  background: #E4E7E9;
 }
 .swiper-homepage-cs .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
   height: 8px;
   border-radius: 999px;
-  background: #323b42;
+  background: #323B42;
   transform: translateX(-16px);
 }
 .swiper-homepage-cs .swiper-button-prev:after,
@@ -1081,7 +1077,7 @@ homepage-case-study-cards {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
-  background-color: #e4e7e9;
+  background-color: #E4E7E9;
   transition: var(--ptc-transition-slow) linear;
 }
 .swiper-homepage-cs .swiper-button-prev:focus, .swiper-homepage-cs .swiper-button-prev:active,
@@ -1090,7 +1086,7 @@ homepage-case-study-cards {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
-  background-color: #bec6ca;
+  background-color: #BEC6CA;
 }
 .swiper-homepage-cs .swiper-button-prev svg,
 .swiper-homepage-cs .swiper-rtl .swiper-button-next svg {
@@ -1112,7 +1108,7 @@ homepage-case-study-cards {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
-  background-color: #e4e7e9;
+  background-color: #E4E7E9;
   transition: var(--ptc-transition-slow) linear;
 }
 .swiper-homepage-cs .swiper-button-next:focus, .swiper-homepage-cs .swiper-button-next:active,
@@ -1121,7 +1117,7 @@ homepage-case-study-cards {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
-  background-color: #bec6ca;
+  background-color: #BEC6CA;
 }
 .swiper-homepage-cs .swiper-button-next svg,
 .swiper-homepage-cs .swiper-rtl .swiper-button-prev svg {

package/dist/collection/components/organism-bundles/event-podcast-slider-example/event-podcast-slider-example.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { Host, h } from "@stencil/core";
-import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from "swiper";
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
 export class EventPodcastSliderExample {
   componentDidLoad() {
     //const swiperContainer = this.el.querySelector('.swiper-container');
@@ -7,11 +7,11 @@ export class EventPodcastSliderExample {
     // Define a desktop breakpoint
     //const isDesktop = window.matchMedia('(min-width: 992px)').matches;
     setTimeout(() => {
-      let list = this.el.querySelector(".event-slider-cards");
+      let list = this.el.querySelector('.event-slider-cards');
       this.listSwp = new Swiper(list, {
         // Customize options here
         modules: [Navigation, Pagination, Scrollbar, Mousewheel],
-        slidesPerView: "auto",
+        slidesPerView: 'auto',
         spaceBetween: 24,
         //centeredSlides: true,
         centeredSlidesBounds: true,
@@ -46,7 +46,7 @@ export class EventPodcastSliderExample {
     }, 100);
   }
   render() {
-    return (h(Host, { class: "host-ele" }, h("div", { class: "event-slider-cards swiper-container" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: (el) => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: (el) => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: (el) => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+    return (h(Host, { class: "host-ele" }, h("div", { class: "event-slider-cards swiper-container" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
   }
   static get is() { return "event-podcast-slider-example"; }
   static get originalStyleUrls() {

package/dist/collection/components/organism-bundles/featured-events-slider-example/featured-events-slider-example.css CHANGED Viewed

@@ -708,10 +708,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;
@@ -730,10 +728,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/organism-bundles/featured-events-slider-example/featured-events-slider-example.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { Host, h } from "@stencil/core";
-import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from "swiper";
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
 export class FeaturedEventsSliderExample {
   componentDidLoad() {
-    let list = this.el.querySelector(".fe-slider");
+    let list = this.el.querySelector('.fe-slider');
     this.listSwp = new Swiper(list, {
       // Customize options here
       modules: [Navigation, Pagination, Scrollbar, Mousewheel],
@@ -28,19 +28,19 @@ export class FeaturedEventsSliderExample {
       breakpoints: {
         // when window width is >= 991px
         991: {
-          spaceBetween: 32,
-        },
-      },
+          spaceBetween: 32
+        }
+      }
     });
     setTimeout(() => {
-      const eventsSwiperWrapper = this.el.querySelector(".swiper-wrapper");
+      const eventsSwiperWrapper = this.el.querySelector('.swiper-wrapper');
       if (eventsSwiperWrapper) {
         eventsSwiperWrapper.style.transform = `translate3d(0px, 0px, 0px)`;
       }
     }, 500);
   }
   render() {
-    return (h(Host, null, h("div", { class: "fe-slider" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: (el) => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: (el) => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: (el) => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+    return (h(Host, null, h("div", { class: "fe-slider" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => this.swiperPaginationRef = el }), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
   }
   static get is() { return "featured-events-slider-example"; }
   static get originalStyleUrls() {

package/dist/collection/components/organism-bundles/form/academic-form/academic-form-test.css CHANGED Viewed

@@ -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 */
@@ -66,7 +62,7 @@ ptc-footer {
   width: 433px;
   display: flex;
   border-radius: 3px;
-  background: #fff;
+  background: #FFF;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
   flex-direction: column;
   align-items: center;

package/dist/collection/components/organism-bundles/form/academic-form/academic-form-test.js CHANGED Viewed

@@ -1,15 +1,15 @@
-import { Host, h } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class AcademicForm {
   constructor() {
     this.formData = {
-      email: "",
-      firstName: "",
-      lastName: "",
-      company: "",
-      country: "",
-      phone: "",
-      inquiryReason: "",
-      howhearselfreport: "",
+      email: '',
+      firstName: '',
+      lastName: '',
+      company: '',
+      country: '',
+      phone: '',
+      inquiryReason: '',
+      howhearselfreport: '',
       policyChecked: false,
     };
   }
@@ -17,8 +17,8 @@ export class AcademicForm {
   // private inquiryreasonEle: HTMLPtcTextfieldElement;
   // private howhearselfreport: HTMLPtcTextfieldElement;
   componentDidLoad() {
-    this.formButton = this.el.querySelector(".form-submit");
-    this.formButton.addEventListener("click", this.handleSubmit.bind(this));
+    this.formButton = this.el.querySelector('.form-submit');
+    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
     //get Email
     this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
     this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
@@ -40,32 +40,32 @@ export class AcademicForm {
     this.formData.company = this.companyEle.inputValue;
     this.formData.phone = this.phoneEle.inputValue;
     if (this.isValid()) {
-      const formSubmitEvent = new CustomEvent("formSubmit", {
+      const formSubmitEvent = new CustomEvent('formSubmit', {
         detail: this.formData,
         bubbles: true,
       });
       this.el.dispatchEvent(formSubmitEvent);
     }
     else {
-      console.log("Form validation failed");
+      console.log('Form validation failed');
     }
   }
   isValid() {
-    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked, } = this.formData;
-    const invalidLength = document.querySelectorAll(".invalid-field").length;
-    return (email !== "" &&
-      phone !== "" &&
-      firstName !== "" &&
-      lastName !== "" &&
-      company !== "" &&
-      country !== "" &&
-      inquiryReason !== "" &&
-      howhearselfreport != "" &&
+    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
+    const invalidLength = document.querySelectorAll('.invalid-field').length;
+    return (email !== '' &&
+      phone !== '' &&
+      firstName !== '' &&
+      lastName !== '' &&
+      company !== '' &&
+      country !== '' &&
+      inquiryReason !== '' &&
+      howhearselfreport != '' &&
       policyChecked &&
       invalidLength === 0);
   }
   render() {
-    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: (event) => this.handleSubmit(event) }, h("ptc-label", { class: "ptc-label" }, "Your Information"), h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "alert-text": "Minimum Age Required", "alert-text-content": "If you are under the age of 14 years old, you must use your parent/guardian email address.", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-textfield", { "field-id": "confirm-email", "label-text": "Confirm your Email*", type: "email", "ptc-data-eloqua-name": "emailconfirmation", "field-name": "confirm-email", "custom-validation": "Email addresses must match." }), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h("ptc-textfield", { "field-id": "contact-city", "label-text": "City*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), h("ptc-textfield", { "field-id": "contact-zipcode", "label-text": "Zip Code*", type: "text", "ptc-data-eloqua-name": "C_Zip_Postal", "field-name": "zipcode-field" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-label", { class: "ptc-label" }, "School Information"), h("ptc-textfield", { "field-id": "institution", "label-text": "School/Institution Name*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "institution" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "School Level*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Student Level*", type: "email", "ptc-data-eloqua-name": "gradeLevel1", "field-name": "email" }), h("ptc-select", { "field-id": "academic-description", label: "Role of User*", "ptc-data-eloqua-name": "description1", "field-name": "academic-description" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "K-12 educator")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Professor")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "K-12 student")))), h("ptc-textfield", { "field-id": "contact-city", "label-text": "Purpose of use*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), h("ptc-textfield", { "field-id": "academic-ofComputers", "label-text": "How many computers are you planning to install this software on?*", type: "text", "ptc-data-eloqua-name": "ofComputers1", "field-name": "academic-ofComputers" }), h("ptc-form-checkbox", { label: "I acknowledge that my personal details will be processed in accordance with PTC\u2019s privacy policy and that they may be shared with PTC Inc\u2019s subsidiaries for\r\n               the promotion of PTC\u2019s products and associated services. ", "checkbox-id": "test" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; float: right; width: fit-content;}" }, "Submit"))))));
+    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: event => this.handleSubmit(event) }, h("ptc-label", { class: "ptc-label" }, "Your Information"), h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "alert-text": "Minimum Age Required", "alert-text-content": "If you are under the age of 14 years old, you must use your parent/guardian email address.", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-textfield", { "field-id": "confirm-email", "label-text": "Confirm your Email*", type: "email", "ptc-data-eloqua-name": "emailconfirmation", "field-name": "confirm-email", "custom-validation": "Email addresses must match." }), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h("ptc-textfield", { "field-id": "contact-city", "label-text": "City*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), h("ptc-textfield", { "field-id": "contact-zipcode", "label-text": "Zip Code*", type: "text", "ptc-data-eloqua-name": "C_Zip_Postal", "field-name": "zipcode-field" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-label", { class: "ptc-label" }, "School Information"), h("ptc-textfield", { "field-id": "institution", "label-text": "School/Institution Name*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "institution" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "School Level*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Student Level*", type: "email", "ptc-data-eloqua-name": "gradeLevel1", "field-name": "email" }), h("ptc-select", { "field-id": "academic-description", label: "Role of User*", "ptc-data-eloqua-name": "description1", "field-name": "academic-description" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "K-12 educator")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Professor")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "K-12 student")))), h("ptc-textfield", { "field-id": "contact-city", "label-text": "Purpose of use*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), h("ptc-textfield", { "field-id": "academic-ofComputers", "label-text": "How many computers are you planning to install this software on?*", type: "text", "ptc-data-eloqua-name": "ofComputers1", "field-name": "academic-ofComputers" }), h("ptc-form-checkbox", { label: "I acknowledge that my personal details will be processed in accordance with PTC\u2019s privacy policy and that they may be shared with PTC Inc\u2019s subsidiaries for\r\n               the promotion of PTC\u2019s products and associated services. ", "checkbox-id": "test" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; float: right; width: fit-content;}" }, "Submit"))))));
   }
   static get is() { return "academic-form-test"; }
   static get originalStyleUrls() {

package/dist/collection/components/organism-bundles/form/embedded-form/embedded-form.css CHANGED Viewed

@@ -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 */
@@ -73,14 +69,14 @@ ptc-footer {
 }
 .embedded-form-container {
-  background-color: #142d48;
+  background-color: #142D48;
 }
 .ptc-embedded-form.form-wrapper {
   max-width: 361px;
   display: flex;
   border-radius: 3px;
-  background: #fff;
+  background: #FFF;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
   flex-direction: column;
   align-items: center;