@ptcwebops/ptcw-design 6.2.23 → 6.2.24-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,6 +44,23 @@ export class PtcModal {
       const wrapperEle = this.el.shadowRoot.querySelector('.wrapper');
       wrapperEle && wrapperEle.focus();
     }, 100);
+    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');
@@ -108,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 {
@@ -127,52 +157,75 @@ export class PtcModal {
   close() {
     this.show = false;
   }
+  setInitialFocus() {
+    var _a, _b, _c;
+    const firstFocusableElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]), ptc-close-icon');
+    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) {
+      closeSvg.focus();
+    }
+    else if (firstFocusableElement) {
+      firstFocusableElement.focus();
+    }
+  }
   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) => { 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() {
@@ -227,8 +280,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'sm' | 'md' | 'lg' | 'xl' | 'max'| '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,
@@ -558,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-news/ptc-news.css

@@ -83,9 +83,4 @@ ptc-link, ptc-square-card,
   :host ptc-sticky-icons {
     display: block;
   }
-}
-
-ptc-news .news-date {
-  font-size: var(--ptc-font-size-small);
-  color: var(--color-gray-10);
 }

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

@@ -2,12 +2,13 @@ import { Host, h } from '@stencil/core';
 export class PtcNews {
   constructor() {
     this.newsTag = undefined;
+    this.newsDate = undefined;
     this.newsImage = undefined;
     this.newsImageAlt = undefined;
     this.newsDownloadUrl = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && h("span", { class: "news-tag" }, this.newsTag), h("slot", { name: "news-title" }), h("slot", { name: "news-secondary-title" }), h("slot", { name: "news-date" }), h("slot", { name: "news-summary" }), this.getArticleImage(), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
+    return (h(Host, null, h("div", { class: "news-container" }, this.newsTag && h("span", { class: "news-tag" }, this.newsTag), h("slot", { name: "news-title" }), h("slot", { name: "news-secondary-title" }), this.newsDate && h("span", { class: "news-date" }, this.newsDate), h("slot", { name: "news-summary" }), this.getArticleImage(), h("div", { class: "news-content" }, h("slot", { name: "share-icons" }), h("slot", null)))));
   }
   getArticleImage() {
     if (this.newsImage && this.newsDownloadUrl) {
@@ -48,6 +49,23 @@ export class PtcNews {
         "attribute": "news-tag",
         "reflect": false
       },
+      "newsDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "News Date"
+        },
+        "attribute": "news-date",
+        "reflect": false
+      },
       "newsImage": {
         "type": "string",
         "mutable": false,

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

@@ -165,19 +165,6 @@ export class PtcPagenation {
       this.setupEventPresets();
     }
   }
-  componentDidLoad() {
-    const filterContainer = this.el.shadowRoot.querySelector(".standard-filter");
-    if (!filterContainer)
-      return;
-    filterContainer.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
-        const target = event.target;
-        if (target.tagName === "A") {
-          this.paginationItemKeydown.emit();
-        }
-      }
-    });
-  }
   setupStandardPresets() {
     if (this.clickedPageNumber < 1) {
       this.clickedPageNumber == 1;
@@ -558,21 +545,6 @@ export class PtcPagenation {
   }
   static get events() {
     return [{
-        "method": "paginationItemKeydown",
-        "name": "paginationItemKeydown",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }, {
         "method": "pageClicked",
         "name": "pageClicked",
         "bubbles": true,
@@ -589,7 +561,6 @@ export class PtcPagenation {
         }
       }];
   }
-  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "resize",

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

@@ -104,6 +104,9 @@ p.main {
 p.primary-grey {
   color: var(--color-gray-10);
 }
+p.primary-green {
+  color: var(--color-green-06);
+}
 p.gray-darker {
   color: var(--color-gray-11);
 }

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

@@ -185,8 +185,8 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary-grey' | 'white' | 'gray-darker'",
-          "resolved": "\"gray-darker\" | \"primary-grey\" | \"white\"",
+          "original": "'primary-grey' | 'primary-green' | 'white' | 'gray-darker'",
+          "resolved": "\"gray-darker\" | \"primary-green\" | \"primary-grey\" | \"white\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css

@@ -5602,26 +5602,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
@@ -5679,13 +5679,6 @@ a:focus-visible {
   color: var(--color-green-06);
 }
 
-.vjs-social-share-links a {
-  color: var(--color-white);
-}
-.vjs-social-share-links a:hover {
-  color: var(--color-white);
-}
-
 :host {
   display: block;
   padding: 2rem 0;

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

@@ -246,11 +246,6 @@ ptc-link, ptc-square-card,
 .skeleton-block.medium {
   width: 50%;
 }
-@media only screen and (min-width: 992px) {
-  .skeleton-block.medium-md {
-    width: 50%;
-  }
-}
 .skeleton-block.short {
   width: 30%;
 }
@@ -481,18 +476,18 @@ ptc-link, ptc-square-card,
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
-  column-gap: 40px;
 }
 .skeleton-home-page .slide-container .skeleton-slides .slide {
   background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
   background-size: 200% 100%;
   animation: loading 2.5s linear infinite;
   border-radius: 4px;
-  width: 100%;
+  width: 296px;
   height: 140px;
 }
 @media only screen and (min-width: 992px) {
   .skeleton-home-page .slide-container .skeleton-slides .slide {
+    width: 356px;
     height: 116px;
   }
 }
@@ -2688,84 +2683,19 @@ ptc-link, ptc-square-card,
   }
 }
 
-.news-skeleton-preloader .thick-on-mobile {
-  height: 94px;
-}
-@media only screen and (min-width: 768px) {
-  .news-skeleton-preloader .thick-on-mobile {
-    height: 48px;
-  }
-}
-.news-skeleton-preloader .big-block {
-  height: 700px;
-}
-@media only screen and (min-width: 992px) {
-  .news-skeleton-preloader .big-block {
-    height: 547px;
-  }
-}
-.news-skeleton-preloader .card-block {
-  height: 500px;
-}
-.news-skeleton-preloader .big-card-block {
-  height: calc(100% - 8px);
-  display: none;
-}
-@media only screen and (min-width: 992px) {
-  .news-skeleton-preloader .big-card-block {
-    display: block;
-  }
-}
-
-.resource-center-skeleton-preloader .skeleton-jumbotron {
-  background-color: var(--color-gray-02);
-  padding-top: 24px;
-  padding-bottom: 24px;
-  margin-bottom: 24px;
-}
-@media only screen and (min-width: 992px) {
-  .resource-center-skeleton-preloader .skeleton-jumbotron {
-    background-color: var(--color-gray-01);
-    padding-top: 106px;
-    padding-bottom: 106px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .resource-center-skeleton-preloader .skeleton-jumbotron {
-    margin-bottom: 48px;
-  }
-}
-.resource-center-skeleton-preloader .jumbo-image-mobile {
-  display: block;
-  background-color: var(--color-gray-01);
-  height: 300px;
-}
-@media only screen and (min-width: 992px) {
-  .resource-center-skeleton-preloader .jumbo-image-mobile {
-    display: none;
-  }
-}
-.resource-center-skeleton-preloader .card-block {
-  width: 100%;
-  height: 347px;
-  margin: 0;
-}
-
 .preloader-search-results {
   position: relative;
   width: 100%;
   top: 0px;
   left: 0px;
 }
-.preloader-search-results .ptc-container {
-  padding-right: 0px;
-  padding-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;
 }
@@ -2775,126 +2705,45 @@ ptc-link, ptc-square-card,
 .preloader-search-results .content-container .row-margin-btm {
   margin-bottom: 10px;
 }
-.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 {
-  padding: 4px 0 0 0;
-}
-.preloader-search-results .content-container .skeleton .skeleton-block {
-  margin-bottom: 6px;
-}
-.preloader-search-results .content-container .skeleton .skeleton-block.longer {
-  width: 568px;
-}
-@media only screen and (min-width: 360px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 199px;
-  }
-}
-@media only screen and (min-width: 480px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 275px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 459px;
-  }
+.preloader-search-results .content-container .grid-mrgn {
+  margin: 0;
 }
 @media only screen and (min-width: 992px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 393px;
+  .preloader-search-results .content-container .grid-mrgn {
+    margin: 0 18px;
   }
 }
 @media only screen and (min-width: 1200px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 538px;
+  .preloader-search-results .content-container .grid-mrgn {
+    margin: 0 26px;
   }
 }
 @media only screen and (min-width: 1440px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longer {
-    width: 568px;
-  }
-}
-.preloader-search-results .content-container .skeleton .skeleton-block.longest {
-  width: 754px;
-}
-@media only screen and (min-width: 360px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 264px;
+  .preloader-search-results .content-container .grid-mrgn {
+    margin: 0 29px;
   }
 }
-@media only screen and (min-width: 480px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 366px;
-  }
+.preloader-search-results .content-container .grid-top-2 {
+  margin-bottom: 20px;
 }
-@media only screen and (min-width: 768px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 611px;
-  }
+.preloader-search-results .content-container .block-1 {
+  height: 527px;
 }
-@media only screen and (min-width: 992px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 523px;
-  }
+.preloader-search-results .content-container .skeleton .skeleton-block {
+  margin-bottom: 6px;
 }
-@media only screen and (min-width: 1200px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 714px;
-  }
+.preloader-search-results .content-container .skeleton .skeleton-block.longer {
+  width: 75%;
 }
-@media only screen and (min-width: 1440px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.longest {
-    width: 754px;
-  }
+.preloader-search-results .content-container .skeleton .skeleton-block.longest {
+  width: 97%;
 }
 .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-  width: 366px;
-}
-@media only screen and (min-width: 360px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 129px;
-  }
-}
-@media only screen and (min-width: 480px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 179px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 297px;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 254px;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 347px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .preloader-search-results .content-container .skeleton .skeleton-block.medium {
-    width: 366px;
-  }
-}
-.preloader-search-results .content-container .skeleton .skeleton-block.small {
-  width: 100%;
+  width: 45%;
 }
 .preloader-search-results .content-container .skeleton .skeleton-block.thin {
   height: 16px;
 }
-.preloader-search-results .content-container .skeleton .skeleton-block.thinner {
-  height: 1px;
-}
 .preloader-search-results .content-container .skeleton .skeleton-block.bold {
   height: 26px;
 }