@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

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,27 +42,21 @@ 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 {
@@ -83,9 +77,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 {
@@ -102,11 +96,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;
@@ -192,7 +186,7 @@ export class PtcMobileSelect {
         },
         "attribute": "selected-id",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "''"
       },
       "ensureBtnText": {
         "type": "string",
@@ -210,7 +204,7 @@ export class PtcMobileSelect {
         },
         "attribute": "ensure-btn-text",
         "reflect": false,
-        "defaultValue": "\"Confirm\""
+        "defaultValue": "'Confirm'"
       },
       "cancelBtnText": {
         "type": "string",
@@ -228,7 +222,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,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 */
@@ -86,6 +82,7 @@ ptc-footer {
   align-content: flex-end;
   z-index: 50020;
   transform: translateY(-100%);
+  position: relative;
 }
 @media only screen and (min-width: 992px) {
   .wrapper .modal-popup {
@@ -101,6 +98,9 @@ ptc-footer {
 .wrapper .modal-popup.xl {
   max-width: 64.0625rem;
 }
+.wrapper .modal-popup.fit-content {
+  max-width: fit-content;
+}
 .wrapper .modal-popup.max {
   width: calc(100% - 4rem);
   max-width: 75rem;

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

@@ -1,42 +1,28 @@
-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 = () => {
-      var _a, _b;
-      if (!this.lastFocusElement)
-        return;
-      // Try focusing the last focused element directly
-      if (this.lastFocusElement.tabIndex === 0) {
+      if (this.lastFocusElement instanceof HTMLElement) {
         this.lastFocusElement.focus();
-        return;
-      }
-      // If it's inside a shadow DOM, try finding a focusable child
-      const shadowRoot = this.lastFocusElement.shadowRoot;
-      if (shadowRoot) {
-        const focusableElementList = shadowRoot.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
-        if (focusableElementList) {
-          let focusableElement = focusableElementList[focusableElementList.length - 1];
-          focusableElement.focus();
-          return;
-        }
-      }
-      // As a fallback, try to find a focusable child within the element
-      const fallbackElement = (_b = (_a = this.lastFocusElement).querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, 'button, [tabindex]:not([tabindex="-1"])');
-      if (fallbackElement instanceof HTMLElement) {
-        fallbackElement.focus();
       }
     };
     this.handleKeyPress = (event) => {
-      if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
+      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
         this.openedByKeyboard = true;
+        // if (event.key === 'Enter') {
+        //   if (!this.show) {
+        //     const id= (event.target as HTMLElement).getAttribute('id');
+        //     localStorage.setItem('modalId', id);
+        //   }
+        // }
       }
     };
     this.handleMouseDown = () => {
       this.openedByKeyboard = false;
     };
     this.iframeUrl = undefined;
-    this.size = "sm";
+    this.size = 'sm';
     this.customClass = undefined;
     this.show = false;
     this.overlay = true;
@@ -47,10 +33,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;
@@ -62,7 +48,7 @@ export class PtcModal {
   }
   onShowChange(newValue) {
     if (newValue) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     else {
@@ -76,7 +62,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,15 +91,13 @@ 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 {
@@ -121,45 +105,45 @@ 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;
       }
     }
   }
   componentDidLoad() {
     if (this.show) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     if (this.showHeaderFooter) {
@@ -174,22 +158,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;
@@ -198,17 +182,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');
         }
       }
     }
@@ -220,8 +204,7 @@ 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);
@@ -229,22 +212,36 @@ 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();
         if (this.trap) {
           this.trap.deactivate();
         }
+        // // Code for returning the focus to the element which opened the modal
+        // const modalId = localStorage.getItem('modalId');
+        // if (!modalId) return;
+        // const focusItem = document.querySelector<HTMLElement>(`#${modalId}`);
+        // if (!focusItem || focusItem.id !== modalId) return;
+        // // Focus the host element
+        // focusItem.focus();
+        // // If it's a PTC-BUTTON, try focusing the internal native <button>
+        // if (focusItem.tagName === 'PTC-BUTTON' && focusItem.shadowRoot) {
+        //   const innerButton = focusItem.shadowRoot.querySelector<HTMLElement>('button');
+        //   innerButton?.focus();
+        // }
+        // // Clean up localStorage
+        // localStorage.removeItem('modalId');
       } })));
-    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();
@@ -253,7 +250,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) {
@@ -265,19 +262,15 @@ 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
       ? [
@@ -285,22 +278,16 @@ 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() {
@@ -314,7 +301,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;
       }
@@ -355,8 +342,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "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\"",
+          "original": "'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max' | 'sm-modal'",
+          "resolved": "\"fit-content\" | \"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
           "references": {}
         },
         "required": false,
@@ -367,13 +354,13 @@ export class PtcModal {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "\"sm\""
+        "defaultValue": "'sm'"
       },
       "customClass": {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "\"\"",
+          "original": "''",
           "resolved": "\"\"",
           "references": {}
         },
@@ -534,7 +521,7 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "| \"standard\"\r\n\t\t| \"large\"\r\n\t\t| \"pill\"\r\n\t\t| \"circle\"",
+          "original": "'standard' | 'large' | 'pill' | 'circle'",
           "resolved": "\"circle\" | \"large\" | \"pill\" | \"standard\"",
           "references": {}
         },
@@ -546,7 +533,7 @@ export class PtcModal {
         },
         "attribute": "border-radius",
         "reflect": false,
-        "defaultValue": "\"standard\""
+        "defaultValue": "'standard'"
       },
       "isBioModal": {
         "type": "boolean",
@@ -587,7 +574,7 @@ export class PtcModal {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"video-modal\"\r\n\t\t| \"default-modal\"\r\n\t\t| \"event-listing\"\r\n\t\t| \"thank-you\"",
+          "original": "'video-modal' | 'default-modal' | 'event-listing' | 'thank-you'",
           "resolved": "\"default-modal\" | \"event-listing\" | \"thank-you\" | \"video-modal\"",
           "references": {}
         },
@@ -599,7 +586,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,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 */