@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import MobileSelect from './mobile-select';
+import { h } from "@stencil/core";
+import MobileSelect from "./mobile-select";
 class MobileSelectedItem {
 }
 export class PtcMobileSelect {
@@ -7,19 +7,19 @@ export class PtcMobileSelect {
     this.triggerName = undefined;
     this.selectedText = undefined;
     this.wheelData = undefined;
-    this.selectedId = '';
-    this.ensureBtnText = 'Confirm';
-    this.cancelBtnText = 'Cancel';
+    this.selectedId = "";
+    this.ensureBtnText = "Confirm";
+    this.cancelBtnText = "Cancel";
     this.listTitle = undefined;
     this.notFoundPopupProceedButton = undefined;
   }
   componentWillLoad() {
     this.notFoundPopupProceedButton = document.querySelector("#translation-popup-button");
     if (this.notFoundPopupProceedButton) {
-      this.notFoundPopupProceedButton.addEventListener('click', () => {
+      this.notFoundPopupProceedButton.addEventListener("click", () => {
         let footerNav = document.querySelector("footer-nav");
         if (footerNav) {
-          let currentLang = footerNav.getAttribute('ms-selected-text');
+          let currentLang = footerNav.getAttribute("ms-selected-text");
           let langText = document.querySelector("footer-nav #lang-ddl");
           if (langText && currentLang) {
             langText.innerHTML = currentLang;
@@ -42,21 +42,27 @@ export class PtcMobileSelect {
     }
   }
   render() {
-    return (h("div", { class: "mobile-select-wrapper", "aria-selectlanguage": "Select Language", tabindex: "0", onKeyPress: (e) => { this.wrapperClick(e); } }, h("div", { onClick: (e) => { this.wrapperClick(e); } }, h("span", { id: this.triggerName }, this.selectedText), h("icon-asset", { type: "ptc", size: "x-small", name: "lang-drop-arrow", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px); width: 13px !important;height: 10px !important;}" }))));
+    return (h("div", { class: "mobile-select-wrapper", "aria-selectlanguage": "Select Language", tabindex: "0", onKeyPress: (e) => {
+        this.wrapperClick(e);
+      } }, h("div", { onClick: (e) => {
+        this.wrapperClick(e);
+      } }, h("span", { id: this.triggerName }, this.selectedText), h("icon-asset", { type: "ptc", size: "x-small", name: "lang-drop-arrow", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px); width: 13px !important;height: 10px !important;}" }))));
   }
   componentDidRender() {
     let that = this; //input current lang
     let storeIndex = 0;
     let mySelect = new MobileSelect({
       trigger: `#${this.triggerName}`,
-      title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2', 'test3'] }],
+      title: `${this.listTitle ? this.listTitle : ""}`,
+      wheels: this.wheelData
+        ? [{ data: this.wheelData }]
+        : [{ data: ["test1", "test2", "test3"] }],
       position: [0],
       ensureBtnText: this.ensureBtnText,
       cancelBtnText: this.cancelBtnText,
-      ensureBtnColor: 'var(--color-gray-12)',
-      cancelBtnColor: 'var(--color-gray-12)',
-      titleColor: 'var(--color-gray-12)',
+      ensureBtnColor: "var(--color-gray-12)",
+      cancelBtnColor: "var(--color-gray-12)",
+      titleColor: "var(--color-gray-12)",
       onShow: function (_1, _2, context) {
         if (that.selectedId) {
           try {
@@ -77,9 +83,9 @@ export class PtcMobileSelect {
         this.selectionChanged.emit({
           sender: context,
           index: indexArr && indexArr.length > 0 ? indexArr[0] : -1,
-          data: data && data.length > 0 ? data[0] : undefined
+          data: data && data.length > 0 ? data[0] : undefined,
         });
-        if (data && data[0] && data[0].id != '#') {
+        if (data && data[0] && data[0].id != "#") {
           window.location.href = data[0].id;
         }
         else {
@@ -96,11 +102,11 @@ export class PtcMobileSelect {
     mySelect.locatePosition(0, storeIndex);
   }
   getMobileSelectedItem(context) {
-    let result = new MobileSelectedItem;
+    let result = new MobileSelectedItem();
     result.id = this.selectedId;
-    let liEle = context.mobileSelect.querySelectorAll('[data-id]');
+    let liEle = context.mobileSelect.querySelectorAll("[data-id]");
     liEle.forEach((currentValue, currentIndex) => {
-      if (currentValue.getAttribute('data-id') == result.id) {
+      if (currentValue.getAttribute("data-id") == result.id) {
         result.index = currentIndex;
         result.value = currentValue.textContent;
         return;
@@ -186,7 +192,7 @@ export class PtcMobileSelect {
         },
         "attribute": "selected-id",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "ensureBtnText": {
         "type": "string",
@@ -204,7 +210,7 @@ export class PtcMobileSelect {
         },
         "attribute": "ensure-btn-text",
         "reflect": false,
-        "defaultValue": "'Confirm'"
+        "defaultValue": "\"Confirm\""
       },
       "cancelBtnText": {
         "type": "string",
@@ -222,7 +228,7 @@ export class PtcMobileSelect {
         },
         "attribute": "cancel-btn-text",
         "reflect": false,
-        "defaultValue": "'Cancel'"
+        "defaultValue": "\"Cancel\""
       },
       "listTitle": {
         "type": "string",

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

@@ -9,8 +9,10 @@ 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;
@@ -29,8 +31,10 @@ 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-modal/ptc-modal.js

@@ -1,5 +1,5 @@
-import { Host, h } from '@stencil/core';
-import { createFocusTrap } from 'focus-trap';
+import { Host, h, } from "@stencil/core";
+import { createFocusTrap } from "focus-trap";
 export class PtcModal {
   constructor() {
     this.setReturnFocus = () => {
@@ -28,7 +28,7 @@ export class PtcModal {
       }
     };
     this.handleKeyPress = (event) => {
-      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
+      if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
         this.openedByKeyboard = true;
       }
     };
@@ -36,7 +36,7 @@ export class PtcModal {
       this.openedByKeyboard = false;
     };
     this.iframeUrl = undefined;
-    this.size = 'sm';
+    this.size = "sm";
     this.customClass = undefined;
     this.show = false;
     this.overlay = true;
@@ -47,10 +47,10 @@ export class PtcModal {
     this.hideContainer = false;
     this.showHeaderFooter = false;
     this.overlayHeight = undefined;
-    this.borderRadius = 'standard';
+    this.borderRadius = "standard";
     this.isBioModal = false;
     this.styles = undefined;
-    this.modalType = 'default-modal';
+    this.modalType = "default-modal";
     this.vhCenter = false;
     this.headerOnlyBg = undefined;
     this.headerOnlyText1 = undefined;
@@ -76,7 +76,7 @@ export class PtcModal {
   fireOnOpened(modal) {
     this.opened.emit(modal);
     setTimeout(() => {
-      const wrapperEle = this.el.shadowRoot.querySelector('.wrapper');
+      const wrapperEle = this.el.shadowRoot.querySelector(".wrapper");
       wrapperEle && wrapperEle.focus();
       this.scrollToTopIfNeeded();
     }, 100);
@@ -105,13 +105,15 @@ export class PtcModal {
     }, 200);
   }
   scrollToTopIfNeeded() {
-    if (this.el && this.modalType === 'event-listing') {
-      const modalRect = this.el.shadowRoot.querySelector('.modal-body').getBoundingClientRect();
+    if (this.el && this.modalType === "event-listing") {
+      const modalRect = this.el.shadowRoot
+        .querySelector(".modal-body")
+        .getBoundingClientRect();
       const modalTopPosition = modalRect.top + window.scrollY;
       const offset = 160; // Adjust the offset if necessary to account for fixed headers, etc.
       window.scrollTo({
         top: modalTopPosition - offset,
-        behavior: 'smooth',
+        behavior: "smooth",
       });
     }
     else {
@@ -119,39 +121,39 @@ export class PtcModal {
     }
   }
   connectedCallback() {
-    document.addEventListener('keydown', this.handleKeyPress, true);
-    document.addEventListener('mousedown', this.handleMouseDown, true);
+    document.addEventListener("keydown", this.handleKeyPress, true);
+    document.addEventListener("mousedown", this.handleMouseDown, true);
   }
   disconnectedCallback() {
-    document.removeEventListener('keydown', this.handleKeyPress, true);
-    document.removeEventListener('mousedown', this.handleMouseDown, true);
+    document.removeEventListener("keydown", this.handleKeyPress, true);
+    document.removeEventListener("mousedown", this.handleMouseDown, true);
   }
   componentWillLoad() {
-    let body = document.querySelector('body');
+    let body = document.querySelector("body");
     this.bodyOverflowSetting = {
       //overflow: body.style['overflow'],
-      overflowY: body.style['overflowY'],
-      overflowX: body.style['overflowX'],
+      overflowY: body.style["overflowY"],
+      overflowX: body.style["overflowX"],
     };
   }
   componentWillRender() {
-    let body = document.querySelector('body');
+    let body = document.querySelector("body");
     if (body) {
       if (this.show) {
         //body.style['overflow'] = 'hidden';
         if (this.fixed) {
-          body.style['overflowY'] = 'hidden';
-          body.style['overflowX'] = 'hidden';
+          body.style["overflowY"] = "hidden";
+          body.style["overflowX"] = "hidden";
         }
         else {
-          body.style['overflowY'] = 'scroll';
-          body.style['overflowX'] = 'hidden';
+          body.style["overflowY"] = "scroll";
+          body.style["overflowX"] = "hidden";
         }
       }
       else {
         //body.style['overflow'] = this.bodyOverflowSetting.overflow;
-        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
-        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
+        body.style["overflowY"] = this.bodyOverflowSetting.overflowY;
+        body.style["overflowX"] = this.bodyOverflowSetting.overflowX;
       }
     }
   }
@@ -172,22 +174,22 @@ export class PtcModal {
           iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
         }
         else {
-          iFrame.height = '616px'; //default
-          iFrame.removeAttribute('scrolling');
+          iFrame.height = "616px"; //default
+          iFrame.removeAttribute("scrolling");
         }
       }
       catch (error) {
         console.log(error);
-        iFrame.height = '616px'; //default
-        iFrame.removeAttribute('scrolling');
+        iFrame.height = "616px"; //default
+        iFrame.removeAttribute("scrolling");
       }
-      iFrame.classList.add('ready');
+      iFrame.classList.add("ready");
     }, 50);
   }
   handleScroll() {
-    let modal = this.el.shadowRoot.querySelector('.shadow-scroller');
+    let modal = this.el.shadowRoot.querySelector(".shadow-scroller");
     if (modal) {
-      let body = modal.querySelector('.modal-body');
+      let body = modal.querySelector(".modal-body");
       var height = body.clientHeight;
       var scrollHeight = body.scrollHeight;
       var scrollTop = body.scrollTop;
@@ -196,17 +198,17 @@ export class PtcModal {
         //has scrollbar
         if (scrollTop > 0) {
           //can scroll up
-          modal.classList.add('scroll-top');
+          modal.classList.add("scroll-top");
         }
         else {
-          modal.classList.remove('scroll-top');
+          modal.classList.remove("scroll-top");
         }
         if (offset + scrollTop < scrollHeight) {
           //can scroll down
-          modal.classList.add('scroll-bottom');
+          modal.classList.add("scroll-bottom");
         }
         else {
-          modal.classList.remove('scroll-bottom');
+          modal.classList.remove("scroll-bottom");
         }
       }
     }
@@ -218,7 +220,8 @@ export class PtcModal {
       if (this.focusBackElement) {
         (_a = this.focusBackElement) === null || _a === void 0 ? void 0 : _a.focus();
         if (this.focusBackElement.tagName === "PTC-BUTTON") {
-          (_b = this.focusBackElement.shadowRoot.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+          (_b = this.focusBackElement.shadowRoot
+            .querySelector("button")) === null || _b === void 0 ? void 0 : _b.focus();
         }
       }
     }, 100);
@@ -226,11 +229,11 @@ export class PtcModal {
   render() {
     let content;
     let overlay;
-    let type = this.iframeUrl ? 'frame' : 'html';
-    let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: e => {
+    let type = this.iframeUrl ? "frame" : "html";
+    let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: (e) => {
         e.preventDefault();
         this.close();
-      }, onKeyPress: e => {
+      }, onKeyPress: (e) => {
         e.preventDefault();
         this.close();
         this.setReturnFocus();
@@ -238,10 +241,10 @@ export class PtcModal {
           this.trap.deactivate();
         }
       } })));
-    let bottomCloseBtnEle = (h("div", { tabindex: "0", class: "bottom-close", id: "modal-bottom-close", onClick: e => {
+    let bottomCloseBtnEle = (h("div", { tabindex: "0", class: "bottom-close", id: "modal-bottom-close", onClick: (e) => {
         e.preventDefault();
         this.close();
-      }, onKeyPress: e => {
+      }, onKeyPress: (e) => {
         e.preventDefault();
         this.close();
         this.setReturnFocus();
@@ -250,7 +253,7 @@ export class PtcModal {
         }
       } }, h("span", null, this.bottomCloseBtn)));
     if (this.iframeUrl) {
-      content = h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: '100%', width: '100%', scrolling: "no", onLoad: this.resizeIframe });
+      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
     }
     else {
       if (this.showHeaderFooter) {
@@ -262,15 +265,19 @@ export class PtcModal {
     }
     if (this.overlay) {
       if (this.closeOnBlur) {
-        overlay = h("div", { class: "overlay", onClick: _ => this.close() });
+        overlay = (h("div", { class: "overlay", onClick: (_) => this.close() }));
       }
       else {
         overlay = h("div", { class: "overlay" });
       }
     }
-    return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? 'show' : 'hide'} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ''} ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} `, ref: el => (this.modalPopUpRef = el) }, this.modalType === 'event-listing' && this.headerOnlyBg
+    return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? "fixed" : ""} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ""} ${this.size} ${type} ${this.rounded ? "rounded" : ""} ${this.showHeaderFooter ? "shadow-scroller" : ""} `, ref: (el) => (this.modalPopUpRef = el) }, this.modalType === "event-listing" && this.headerOnlyBg
       ? [
-        h("div", { class: "event-list-header" }, h("ptc-img", { "img-url": this.headerOnlyBg, "image-type": "smart-img", styles: ".ptc-img{border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;}" }), h("div", { class: "text-wrapper" }, h("span", null, this.headerOnlyText1 ? this.headerOnlyText1 : ''), h("span", null, this.headerOnlyText2 ? this.headerOnlyText2 : ''))),
+        h("div", { class: "event-list-header" }, h("ptc-img", { "img-url": this.headerOnlyBg, "image-type": "smart-img", styles: ".ptc-img{border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;}" }), h("div", { class: "text-wrapper" }, h("span", null, this.headerOnlyText1
+          ? this.headerOnlyText1
+          : ""), h("span", null, this.headerOnlyText2
+          ? this.headerOnlyText2
+          : ""))),
       ]
       : null, this.showHeaderFooter
       ? [
@@ -278,16 +285,22 @@ export class PtcModal {
         h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
         h("div", { class: "modal-footer" }, h("slot", { name: "footer" })),
       ]
-      : [closebtn, h("div", { class: "modal-body" }, content)], this.modalType === 'event-listing' && this.bottomCloseBtn ? [bottomCloseBtnEle] : null))));
+      : [
+        closebtn,
+        h("div", { class: "modal-body" }, content),
+      ], this.modalType === "event-listing" &&
+      this.bottomCloseBtn
+      ? [bottomCloseBtnEle]
+      : null))));
   }
   getCssClassMap() {
     return {
-      ['no-container']: this.hideContainer,
-      ['bio-modal']: this.isBioModal,
-      ['enclose-modal']: !this.isBioModal && this.keepInViewport,
+      ["no-container"]: this.hideContainer,
+      ["bio-modal"]: this.isBioModal,
+      ["enclose-modal"]: !this.isBioModal && this.keepInViewport,
       [this.borderRadius]: true,
       [this.modalType]: true,
-      ['vh-center']: this.vhCenter,
+      ["vh-center"]: this.vhCenter,
     };
   }
   async showModal() {
@@ -301,7 +314,7 @@ export class PtcModal {
   }
   async reloadIframe() {
     if (this.iframeUrl) {
-      let iframe = this.el.shadowRoot.querySelector('iframe');
+      let iframe = this.el.shadowRoot.querySelector("iframe");
       if (iframe) {
         iframe.src = iframe.src;
       }
@@ -342,7 +355,7 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'sm' | 'md' | 'lg' | 'xl' | 'max' | 'sm-modal'",
+          "original": "| \"sm\"\r\n\t\t| \"md\"\r\n\t\t| \"lg\"\r\n\t\t| \"xl\"\r\n\t\t| \"max\"\r\n\t\t| \"sm-modal\"",
           "resolved": "\"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
           "references": {}
         },
@@ -354,13 +367,13 @@ export class PtcModal {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'sm'"
+        "defaultValue": "\"sm\""
       },
       "customClass": {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "''",
+          "original": "\"\"",
           "resolved": "\"\"",
           "references": {}
         },
@@ -521,7 +534,7 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'standard' | 'large' | 'pill' | 'circle'",
+          "original": "| \"standard\"\r\n\t\t| \"large\"\r\n\t\t| \"pill\"\r\n\t\t| \"circle\"",
           "resolved": "\"circle\" | \"large\" | \"pill\" | \"standard\"",
           "references": {}
         },
@@ -533,7 +546,7 @@ export class PtcModal {
         },
         "attribute": "border-radius",
         "reflect": false,
-        "defaultValue": "'standard'"
+        "defaultValue": "\"standard\""
       },
       "isBioModal": {
         "type": "boolean",
@@ -574,7 +587,7 @@ export class PtcModal {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'video-modal' | 'default-modal' | 'event-listing' | 'thank-you'",
+          "original": "| \"video-modal\"\r\n\t\t| \"default-modal\"\r\n\t\t| \"event-listing\"\r\n\t\t| \"thank-you\"",
           "resolved": "\"default-modal\" | \"event-listing\" | \"thank-you\" | \"video-modal\"",
           "references": {}
         },
@@ -586,7 +599,7 @@ export class PtcModal {
         },
         "attribute": "modal-type",
         "reflect": false,
-        "defaultValue": "'default-modal'"
+        "defaultValue": "\"default-modal\""
       },
       "vhCenter": {
         "type": "boolean",

package/dist/collection/components/ptc-modal-quiz/ptc-modal-quiz.css

@@ -9,8 +9,10 @@ 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;
@@ -29,8 +31,10 @@ 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 */