@ptcwebops/ptcw-design 6.2.22-beta → 6.2.23-beta

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

@@ -1,6 +1,14 @@
 import { Host, h } from '@stencil/core';
 export class PtcModal {
   constructor() {
+    this.handleKeyPress = (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        this.openedByKeyboard = true;
+      }
+    };
+    this.handleMouseDown = () => {
+      this.openedByKeyboard = false;
+    };
     this.iframeUrl = undefined;
     this.size = 'sm';
     this.customClass = undefined;
@@ -22,6 +30,8 @@ export class PtcModal {
     this.headerOnlyText1 = undefined;
     this.headerOnlyText2 = undefined;
     this.bottomCloseBtn = undefined;
+    this.initialFocus = true;
+    this.openedByKeyboard = false;
     this.bodyOverflowSetting = undefined;
   }
   fireOnClosed(modal) {
@@ -34,9 +44,23 @@ export class PtcModal {
       const wrapperEle = this.el.shadowRoot.querySelector('.wrapper');
       wrapperEle && wrapperEle.focus();
     }, 100);
-    setTimeout(() => {
-      this.setInitialFocus();
-    }, 150);
+    if (this.openedByKeyboard) {
+      this.initialFocus &&
+        setTimeout(() => {
+          this.setInitialFocus();
+        }, 150);
+    }
+    else {
+      this.openedByKeyboard = false;
+    }
+  }
+  connectedCallback() {
+    document.addEventListener('keydown', this.handleKeyPress);
+    document.addEventListener('mousedown', this.handleMouseDown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this.handleKeyPress);
+    document.removeEventListener('mousedown', this.handleMouseDown);
   }
   componentWillLoad() {
     let body = document.querySelector('body');
@@ -111,14 +135,17 @@ export class PtcModal {
       var scrollHeight = body.scrollHeight;
       var scrollTop = body.scrollTop;
       var offset = body.offsetHeight;
-      if (height < scrollHeight) { //has scrollbar
-        if (scrollTop > 0) { //can scroll up
+      if (height < scrollHeight) {
+        //has scrollbar
+        if (scrollTop > 0) {
+          //can scroll up
           modal.classList.add('scroll-top');
         }
         else {
           modal.classList.remove('scroll-top');
         }
-        if (offset + scrollTop < scrollHeight) { //can scroll down
+        if (offset + scrollTop < scrollHeight) {
+          //can scroll down
           modal.classList.add('scroll-bottom');
         }
         else {
@@ -136,11 +163,9 @@ export class PtcModal {
     const closeIcon = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ptc-close-icon');
     const closeSvg = (_c = closeIcon === null || closeIcon === void 0 ? void 0 : closeIcon.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('svg');
     if (closeSvg) {
-      console.log('close svg found');
       closeSvg.focus();
     }
     else if (firstFocusableElement) {
-      console.log('first focus ele found!');
       firstFocusableElement.focus();
     }
   }
@@ -148,48 +173,59 @@ export class PtcModal {
     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) => { e.preventDefault(); this.close(); }, onKeyPress: (e) => { e.preventDefault(); this.close(); } })));
-    let bottomCloseBtnEle = (h("div", { class: "bottom-close", id: "modal-bottom-close", onClick: (e) => { e.preventDefault(); this.close(); }, onKeyPress: (e) => { e.preventDefault(); this.close(); } }, h("span", null, this.bottomCloseBtn)));
+    let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: e => {
+        e.preventDefault();
+        this.close();
+      }, onKeyPress: e => {
+        e.preventDefault();
+        this.close();
+      } })));
+    let bottomCloseBtnEle = (h("div", { class: "bottom-close", id: "modal-bottom-close", onClick: e => {
+        e.preventDefault();
+        this.close();
+      }, onKeyPress: e => {
+        e.preventDefault();
+        this.close();
+      } }, 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) {
-        content = (h("slot", { name: "body" }));
+        content = h("slot", { name: "body" });
       }
       else {
-        content = (h("slot", null));
+        content = h("slot", null);
       }
     }
     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' : ''} ` }, 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 : "")))
-    ] : null, this.showHeaderFooter ? [
-      h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
-      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))));
+    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' : ''} ` }, 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 : ''))),
+      ]
+      : null, this.showHeaderFooter
+      ? [
+        h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
+        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))));
   }
   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() {
@@ -575,12 +611,31 @@ export class PtcModal {
         },
         "attribute": "bottom-close-btn",
         "reflect": false
+      },
+      "initialFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initial-focus",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
   static get states() {
     return {
       "overlayHeight": {},
+      "openedByKeyboard": {},
       "bodyOverflowSetting": {}
     };
   }

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -2661,6 +2661,71 @@ ptc-link, ptc-square-card,
   }
 }
 
+.preloader-search-results {
+  position: relative;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+}
+.preloader-search-results .content-container {
+  z-index: 3;
+  position: relative;
+}
+.preloader-search-results .content-container .content-container-child {
+  top: 80px;
+  margin-bottom: 70px;
+  background-color: --color-standard-gray;
+  position: relative;
+}
+.preloader-search-results .content-container .grid-top {
+  margin-bottom: 30px;
+}
+.preloader-search-results .content-container .row-margin-btm {
+  margin-bottom: 10px;
+}
+.preloader-search-results .content-container .grid-mrgn {
+  margin: 0;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-search-results .content-container .grid-mrgn {
+    margin: 0 18px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-search-results .content-container .grid-mrgn {
+    margin: 0 26px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-search-results .content-container .grid-mrgn {
+    margin: 0 29px;
+  }
+}
+.preloader-search-results .content-container .grid-top-2 {
+  margin-bottom: 20px;
+}
+.preloader-search-results .content-container .block-1 {
+  height: 527px;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block {
+  margin-bottom: 6px;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.longer {
+  width: 75%;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.longest {
+  width: 97%;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.medium {
+  width: 45%;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.thin {
+  height: 16px;
+}
+.preloader-search-results .content-container .skeleton .skeleton-block.bold {
+  height: 26px;
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js

@@ -78,6 +78,9 @@ export class PtcPreloaderSection {
       case 'ppc-skeleton': {
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ppc-skeleton-preloader" }, h("div", { class: "ptc-container " }, h("div", { class: "dots-loader" })))));
       }
+      case 'search-results': {
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-search-results" }, h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "skeleton" }, h("div", { class: "grid-mrgn" }, h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin longer" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
+      }
       default:
         return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
     }

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -1095,18 +1095,6 @@ ptc-preloader-section.min-height {
   color: var(--color-white);
 }
 
-ptc-nav-submenu {
-  border-left: 2px solid transparent;
-  border-right: 2px solid transparent;
-}
-ptc-nav-submenu:focus-visible, ptc-nav-submenu:focus {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
 :host {
   display: block;
   color: var(--color-gray-10);

package/dist/collection/components/ptc-sticky-title/ptc-sticky-title.js

@@ -17,9 +17,9 @@ export class PtcStickyTitle {
   }
   componentDidLoad() {
     const shareicon = this.hostEl.querySelectorAll('ptc-social-share');
-    shareicon.forEach((icon) => {
+    shareicon.forEach((icon, i) => {
       icon.addEventListener('focus', () => {
-        if (window.scrollY === 0) {
+        if ((window.scrollY === 0 && i == 0) || (i == shareicon.length - 1)) {
           window.scrollBy(0, 262);
         }
         this.isSticky = true;

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.css

@@ -146,12 +146,6 @@ ptc-link, ptc-square-card,
 :host a:focus svg path {
   fill: var(--color-white);
 }
-:host a:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-  padding: 20px 10px;
-}
 :host ::slotted(icon-asset) {
   margin-top: 4px;
   margin-right: 8px;

package/dist/collection/components/subnav/ptc-nav-slider/ptc-nav-slider.css

@@ -68,7 +68,6 @@ ptc-link, ptc-square-card,
     display: flex;
     flex-wrap: nowrap;
     overflow-x: auto;
-    overflow-y: hidden;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
@@ -122,13 +121,6 @@ ptc-link, ptc-square-card,
 :host button#nextBtn:hover {
   background: var(--color-gray-12);
 }
-:host button#prevBtn:focus-visible, :host button#prevBtn:focus,
-:host button#nextBtn:focus-visible,
-:host button#nextBtn:focus {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-}
 :host .btn-wrap-left {
   margin-right: 0;
 }

package/dist/collection/components/subnav/ptc-nav-slider/ptc-nav-slider.js

@@ -11,9 +11,6 @@ export class PtcNavSlider {
     const { shadowRoot } = document.querySelector(`#${this.sliderId}`);
     const boxWrap = shadowRoot.querySelector('.box-wrap');
     boxWrap.addEventListener('scroll', this.updateSlider.bind(this));
-    boxWrap.addEventListener('focus', () => {
-      console.log(boxWrap.children);
-    });
     setTimeout(() => {
       this.updateSlider(this);
     }, 3100);

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.js

@@ -29,16 +29,8 @@ export class PtcNavSubmenu {
       this.dropdownClickEvent.emit(event);
     }, 100);
   }
-  handleKeyUp(event, self) {
-    if (event && event.key === "Enter") {
-      this.calculateOffset();
-      setTimeout(() => {
-        this.dropdownClickEvent.emit(self);
-      }, 100);
-    }
-  }
   render() {
-    return (h(Host, { class: `dropdown`, onKeyUp: (e) => this.handleKeyUp(e, this) }, h("div", { id: this.backBtnTrackerId, class: "tracker-div" }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back")), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName &&
+    return (h(Host, { class: `dropdown` }, h("div", { id: this.backBtnTrackerId, class: "tracker-div" }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back")), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName &&
       h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" }), h("div", { id: this.labelTrackerId, class: "tracker-div" }, this.label), h("div", { id: this.dropdownTrackerId, class: "tracker-div" }, this.iconSrc &&
       h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" }), !this.iconSrc &&
       h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" })))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));