@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

package/dist/esm/ptc-tab-list.entry.js

@@ -18,90 +18,87 @@ const PtcTabList = class {
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
-    this.isMobileTabWithBanner =
-      window.innerWidth < 992 || screen.width < 992;
+    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
   }
   componentDidLoad() {
     this.createGroup();
     this.calculateHeaderTabsRendering();
     /*const [group] = this.tabGroup;
     this.selectGroup(group);*/
-    this.ellipsisDropdown = this.host.querySelector("ptc-ellipsis-dropdown");
-    this.ellipsisDropdown.addEventListener("keydown", this.onKeydown.bind(this));
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll("tab-header"));
+    this.ellipsisDropdown = this.host.querySelector('ptc-ellipsis-dropdown');
+    this.ellipsisDropdown.addEventListener('keydown', this.onKeydown.bind(this));
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
     tabsHeaderEl.forEach((tab, i) => {
-      if (tabsHeaderEl.length - this.dropdownItemsCount == i + 1) {
+      if ((tabsHeaderEl.length - this.dropdownItemsCount) == (i + 1)) {
         this.lastVisibleTab = tab;
       }
     });
   }
   onSelectedTab(event) {
     let self = this;
-    this.tabGroup.forEach((group) => {
-      event.detail.then((res) => {
+    this.tabGroup.forEach(group => {
+      event.detail.then(res => {
         if (group.header.name === res.name) {
           self.selectGroup(group);
           // Set the selected tab's tabindex to 0
-          group.header.el.setAttribute("tabindex", "0");
+          group.header.el.setAttribute('tabindex', '0');
           // Focus the selected tab
           group.header.el.focus();
         }
         else {
           // Set other tabs' tabindex to -1
-          group.header.el.setAttribute("tabindex", "-1");
+          group.header.el.setAttribute('tabindex', '-1');
         }
       });
     });
   }
   calculateHeaderTabsRendering() {
-    let header = this.host.querySelector(".tabs-header");
-    let dropdown = this.host.querySelector(".ellipsis-btn");
+    let header = this.host.querySelector('.tabs-header');
+    let dropdown = this.host.querySelector('.ellipsis-btn');
     let tabs = header.children;
     let activateDropDown = false;
     let hiddenTabs = [];
     this.isMobile = window.innerWidth < 768;
-    this.isMobileTabWithBanner =
-      window.innerWidth < 992 || screen.width < 992;
-    header.classList.remove("active");
+    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
+    header.classList.remove('active');
     for (let index = 0; index < tabs.length; index++) {
-      tabs[index].style.removeProperty("display");
+      tabs[index].style.removeProperty('display');
     }
     for (let index = tabs.length - 1; index >= 0; index--) {
       let tab = tabs[index];
-      let isSelectedTab = tab.getAttribute("name") === this.selectedValue;
-      if ((this.isMobile && this.type != "tab-with-banner") ||
-        (this.isMobileTabWithBanner && this.type === "tab-with-banner")) {
-        let text = tab.querySelector(".text-cont").textContent;
-        header.style.display = "none";
+      let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
+      if ((this.isMobile && this.type != 'tab-with-banner') || (this.isMobileTabWithBanner && this.type === 'tab-with-banner')) {
+        let text = tab.querySelector('.text-cont').textContent;
+        header.style.display = 'none';
         activateDropDown = true;
         hiddenTabs.push({
-          value: tab.getAttribute("name"),
+          value: tab.getAttribute('name'),
           text: text,
-          isSelected: isSelectedTab,
+          isSelected: isSelectedTab
         });
       }
       else {
-        header.style.display = "flex";
+        header.style.display = 'flex';
         if (header.scrollWidth > header.clientWidth) {
-          tab.style.display = "none";
-          let text = tab.querySelector(".text-cont").textContent;
+          tab.style.display = 'none';
+          let text = tab.querySelector('.text-cont').textContent;
           activateDropDown = true;
           hiddenTabs.push({
-            value: tab.getAttribute("name"),
+            value: tab.getAttribute('name'),
             text: text,
-            isSelected: isSelectedTab,
+            isSelected: isSelectedTab
           });
         }
       }
     }
-    header.classList.add("active");
+    header.classList.add('active');
     if (activateDropDown) {
-      dropdown.classList.add("active");
+      dropdown.classList.add('active');
       dropdown.dataItems = hiddenTabs.reverse();
       this.dropdownItemsCount = dropdown.dataItems.length;
     }
     else {
-      dropdown.classList.remove("active");
+      dropdown.classList.remove('active');
       dropdown.dataItems = [];
     }
   }
@@ -113,8 +110,8 @@ const PtcTabList = class {
     let contentCount = 0;
     let headerData = [];
     let contentData = [];
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll("tab-header"));
-    this.tabsHeader = tabsHeaderEl.map((el) => el.getChild().then((res) => {
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
+    this.tabsHeader = tabsHeaderEl.map(el => el.getChild().then(res => {
       headerCount++;
       if (headerCount === tabsHeaderEl.length) {
         headerComplete = true;
@@ -122,8 +119,8 @@ const PtcTabList = class {
       headerData.push(Object.assign(Object.assign({}, res), { el }));
     }));
     this.tabsHeader = headerData;
-    const tabsContentEl = Array.from(this.host.querySelectorAll("tab-content"));
-    this.tabsContent = tabsContentEl.map((el) => el.getChild().then((res) => {
+    const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
+    this.tabsContent = tabsContentEl.map(el => el.getChild().then(res => {
       contentCount++;
       if (contentCount === tabsContentEl.length) {
         contentComplete = true;
@@ -134,11 +131,11 @@ const PtcTabList = class {
     let myInterval = setInterval(() => {
       if (headerComplete && contentComplete) {
         clearInterval(myInterval);
-        self.tabGroup = self.tabsHeader.map((header) => {
-          const content = self.tabsContent.find((content) => content.name === header.name);
+        self.tabGroup = self.tabsHeader.map(header => {
+          const content = self.tabsContent.find(content => content.name === header.name);
           return {
             header: header,
-            content: content,
+            content: content
           };
         });
         const group = self.tabGroup[0];
@@ -146,30 +143,29 @@ const PtcTabList = class {
       }
     }, 3100); // Increased time interval from 100 to 3100 to fix the preload skeleton issue
     tabsHeaderEl.forEach((header, index) => {
-      header.setAttribute("id", "tab-" + (index + 1));
-      header.setAttribute("role", "tab");
-      header.setAttribute("aria-selected", index === 0 ? "true" : "false");
-      header.setAttribute("tabindex", index === 0 ? "0" : "-1"); // Set tabindex based on index
-      header.setAttribute("aria-controls", "tab-panel-" + (index + 1));
-      header.addEventListener("keydown", this.onKeydown.bind(this));
+      header.setAttribute('id', 'tab-' + (index + 1));
+      header.setAttribute('role', 'tab');
+      header.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
+      header.setAttribute('tabindex', index === 0 ? '0' : '-1'); // Set tabindex based on index
+      header.setAttribute('aria-controls', 'tab-panel-' + (index + 1));
+      header.addEventListener('keydown', this.onKeydown.bind(this));
       if (!this.firstTab) {
         this.firstTab = header;
       }
       this.lastTab = header;
     });
     tabsContentEl.forEach((panel, index) => {
-      panel.setAttribute("id", "tabpanel-" + (index + 1));
-      panel.setAttribute("role", "tabpanel");
-      panel.setAttribute("aria-labelledby", "tab-" + (index + 1));
+      panel.setAttribute('id', 'tabpanel-' + (index + 1));
+      panel.setAttribute('role', 'tabpanel');
+      panel.setAttribute('aria-labelledby', 'tab-' + (index + 1));
     });
   }
   moveFocusToTab(currentTab) {
     currentTab.focus();
   }
   moveFocusToPreviousTab(currentTab) {
-    if (currentTab === this.firstTab ||
-      currentTab == this.ellipsisDropdown) {
-      this.ellipsisDropdown.setAttribute("tabindex", "-1");
+    if (currentTab === this.firstTab || currentTab == this.ellipsisDropdown) {
+      this.ellipsisDropdown.setAttribute('tabindex', '-1');
       if (this.dropdownItemsCount == 0) {
         this.moveFocusToTab(this.lastTab);
       }
@@ -177,28 +173,28 @@ const PtcTabList = class {
         this.moveFocusToTab(this.lastVisibleTab);
       }
       else {
-        this.ellipsisDropdown.setAttribute("tabindex", "0");
+        this.ellipsisDropdown.setAttribute('tabindex', '0');
         this.ellipsisDropdown.focus();
       }
     }
     else {
-      const index = this.tabsHeader.findIndex((tab) => tab.el === currentTab);
+      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
       this.moveFocusToTab(this.tabsHeader[index - 1].el);
     }
   }
   moveFocusToNextTab(currentTab) {
-    this.ellipsisDropdown.setAttribute("tabindex", "-1");
+    this.ellipsisDropdown.setAttribute('tabindex', '-1');
     if (currentTab === this.lastTab || currentTab === this.lastVisibleTab) {
       if (this.dropdownItemsCount == 0) {
         this.moveFocusToTab(this.firstTab);
       }
       else {
-        this.ellipsisDropdown.setAttribute("tabindex", "0");
+        this.ellipsisDropdown.setAttribute('tabindex', '0');
         this.ellipsisDropdown.focus();
       }
     }
     else {
-      const index = this.tabsHeader.findIndex((tab) => tab.el === currentTab);
+      const index = this.tabsHeader.findIndex(tab => tab.el === currentTab);
       this.moveFocusToTab(this.tabsHeader[index + 1].el);
     }
   }
@@ -206,15 +202,15 @@ const PtcTabList = class {
     const currentTab = event.currentTarget;
     let flag = false;
     switch (event.key) {
-      case "ArrowLeft":
+      case 'ArrowLeft':
         this.moveFocusToPreviousTab(currentTab);
         flag = true;
         break;
-      case "ArrowRight":
+      case 'ArrowRight':
         this.moveFocusToNextTab(currentTab);
         flag = true;
         break;
-      case "Escape":
+      case 'Escape':
         this.closeDropdown();
         flag = true;
         break;
@@ -226,7 +222,7 @@ const PtcTabList = class {
   }
   async toggleTabGroup(name) {
     let self = this;
-    this.tabGroup.forEach((group) => {
+    this.tabGroup.forEach(group => {
       if (group.header.name === name) {
         self.selectGroup(group);
       }
@@ -234,7 +230,7 @@ const PtcTabList = class {
   }
   selectGroup(group) {
     let self = this;
-    self.tabGroup.forEach((_) => {
+    self.tabGroup.forEach(_ => {
       _.header.unselect();
       _.content.unselect();
     });
@@ -255,11 +251,7 @@ const PtcTabList = class {
     }
   }
   render() {
-    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == "tab-with-banner"
-        ? "ellipsis-btn tab-with-banner"
-        : "ellipsis-btn default", onItemSelected: (e) => {
-        this.onDropdownItemSelected(e.detail);
-      } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
+    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == 'tab-with-banner' ? "ellipsis-btn tab-with-banner" : "ellipsis-btn default", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/ptc-tab.entry.js

@@ -17,8 +17,8 @@ const Tab = class {
   }
   getCssClassMap() {
     return {
-      ["ptc-pricing-block"]: true,
-      ["active"]: this.active ? true : false,
+      ['ptc-pricing-block']: true,
+      ['active']: this.active ? true : false
     };
   }
 };

package/dist/esm/ptc-tabs.entry.js

@@ -10,9 +10,9 @@ const Tabs = class {
   }
   componentWillLoad() {
     // Grab tabs from this component
-    this.tabs = Array.from(this.el.querySelectorAll("ptc-tab"));
+    this.tabs = Array.from(this.el.querySelectorAll('ptc-tab'));
     if (this.tabs.length === 0) {
-      throw new Error("[ptc-tabs] Must have at least one tab");
+      throw new Error('[ptc-tabs] Must have at least one tab');
     }
   }
   async openTab(index) {
@@ -33,18 +33,18 @@ const Tabs = class {
     const classMap = this.getCssClassMap();
     return (h("div", { class: classMap }, this.tabs.map((tab, index) => {
       const tabClassMap = {
-        "tab-button": true,
-        active: tab.active,
+        'tab-button': true,
+        active: tab.active
       };
       return [
         // assigned properties
-        h("div", { role: "tab", class: tabClassMap, onClick: () => this.openTab(index) }, tab.label, tab.price, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "right-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" })))),
+        h("div", { role: "tab", class: tabClassMap, onClick: () => this.openTab(index) }, tab.label, tab.price, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "right-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" }))))
       ];
     })));
   }
   getCssClassMap() {
     return {
-      "tabs-list": true,
+      'tabs-list': true
     };
   }
   get el() { return getElement(this); }

package/dist/esm/ptc-text-copy-with-background.entry.js

@@ -1,41 +1,32 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
+import { r as registerInstance, h, H as Host } from './index-c83db688.js';
 
 const ptcTextCopyWithBackgroundCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative;width:100%;padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);color:var(--color-white)}@media only screen and (min-width: 768px){:host{padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-06) 0}}@media only screen and (min-width: 1200px){:host{padding:var(--ptc-layout-spacing-06) var(--ptc-layout-spacing-03)}}:host .content-wrap{position:relative}:host .tcb-top-slit{fill:#f3f3f3;transform:scale(1.5, -1);position:absolute;top:-1px;right:80px;z-index:99;display:none}@media only screen and (min-width: 992px){:host .tcb-top-slit{display:block}}:host .bg-img-filter{-webkit-filter:url(#blur);filter:url(#blur);-webkit-mask:-webkit-gradient(linear, left top, right top, color-stop(30%, var(--color-black)), to(rgba(0, 0, 0, 0)));-webkit-mask:linear-gradient(90deg, var(--color-black) 30%, rgba(0, 0, 0, 0));-webkit-filter:blur(7px)}:host .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover}@media only screen and (min-width: 992px){:host .copy-bg-image{display:block}}:host .copy-bg-overlay-layer{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--color-black);opacity:0.6}:host(.hero-footer-cta){padding:var(--ptc-layout-spacing-05) 0}@media only screen and (min-width: 768px){:host(.hero-footer-cta){padding:calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-01)) 0}}:host(.hero-footer-cta) .copy-bg-overlay-layer{opacity:0.6}:host(.tab-cta-with-background){min-height:300px;padding:var(--ptc-layout-spacing-02)}:host(.tab-cta-with-background) .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover;display:none;border-radius:4px}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){min-height:400px}:host(.tab-cta-with-background) .copy-bg-image{display:block}}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){display:flex;align-items:center;padding:var(--ptc-element-spacing-09)}}:host(.tab-cta-with-background) .copy-bg-overlay-layer{background:initial;opacity:1;background-image:linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.9) 63%, rgba(176, 188, 194, 0) 95%)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background) .copy-bg-overlay-layer{background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%)}}:host(.bottom-right) .tcb-top-slit{top:auto;bottom:-1px;transform:scale(1.5, 1)}:host(.bottom-left) .tcb-top-slit{top:auto;bottom:-1px;transform:scale(1.5, 1) scaleX(-1);left:80px;right:auto}:host(.top-left) .tcb-top-slit{top:-1px;bottom:auto;transform:scale(1.5, 1) rotate(180deg);left:80px;right:auto}:host(.case-studies){min-height:25rem;height:auto;margin-bottom:10rem;display:flex;align-items:center}@media only screen and (min-width: 768px){:host(.case-studies){min-height:33.75rem;height:auto;margin-bottom:0;padding-top:var(--ptc-layout-spacing-06)}}:host(.case-studies) .card-wrap{position:relative;border:1px solid transparent;width:100%;height:100%;max-width:540px;bottom:-13rem}@media only screen and (min-width: 768px){:host(.case-studies) .card-wrap{bottom:auto}}:host(.case-studies) .card-wrap::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;top:0px;left:0px;animation:widthAnimate 0.2s linear 0.2s 1 forwards}:host(.case-studies) .card-wrap::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;top:0px;right:0px;animation:heightAnimate 0.2s linear 0.4s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border{border:1px solid transparent;position:absolute;left:-1px;right:0;bottom:0px;top:-1px;width:100%;height:100%;box-shadow:var(--ptc-shadow-x-small)}:host(.case-studies) .card-wrap .card-animated-border::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;bottom:0px;right:0px;animation:widthAnimate 0.2s linear 0.6s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;bottom:0px;left:0px;animation:heightAnimate 0.2s linear 0.8s 1 forwards}:host(.case-studies) .card-wrap .card-content{opacity:0;animation:fadeIn 0.5s ease-in 0.9s 1 forwards;background-color:transparent;width:100%;height:100%}:host(.case-studies) .card-wrap .card-content .card-layout{padding:var(--ptc-layout-spacing-04);background-color:#fff}@keyframes widthAnimate{0%{width:0}100%{width:100%}}@keyframes heightAnimate{0%{height:0}100%{height:100%}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}:host(.case-studies) .content-wrap{width:100%}:host(.case-studies) .ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){:host(.case-studies) .ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){:host(.case-studies) .ptc-container{padding-left:0;padding-right:0;max-width:1200px}}:host(.bg-image-absent){padding:0rem}";
 
 const PtcTextCopyWithBackground = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.type = "text-copy-with-background";
+    this.type = 'text-copy-with-background';
     this.backgroundImage = undefined;
     this.ImageAltText = undefined;
     this.topSlitBackgroundColor = undefined;
-    this.slitPosition = "top-right";
+    this.slitPosition = 'top-right';
     this.isBackgroundBlur = false;
     this.overlay = true;
     this.disableLightLinks = false;
     this.styles = undefined;
   }
-  componentDidLoad() {
-    var _a;
-    // Run logic only if type is 'hero-footer-cta'
-    if (this.hostEle.getAttribute("type") === "hero-footer-cta") {
-      const centerWell = document.querySelector(".center-well");
-      if (centerWell) {
-        const sectionCount = centerWell.querySelectorAll(":scope > section").length;
-        // Add class only if more than one <section> inside .center-well
-        if (sectionCount > 1) {
-          (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add("text-copy-footer-cta");
-        }
-      }
-    }
-  }
   render() {
     const classMap = this.getCssClassMap();
     const slitFill = this.getSlitFillColor();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: slitFill } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), this.backgroundImage ? (h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur && (h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })))) : null, this.overlay && h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" && (h("div", { class: "ptc-container" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: "card-content" })))))), h("slot", null))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: slitFill } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), this.backgroundImage ?
+      h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur &&
+        h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage }))
+      : null, this.overlay &&
+      h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" &&
+      h("div", { class: "ptc-container" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: 'card-content' }))))), h("slot", null))));
   }
   getSlitFillColor() {
-    let slitFill = "#fff";
+    let slitFill = '#fff';
     if (this.topSlitBackgroundColor == "auto") {
       let style = getComputedStyle(document.body);
       if (style && style.backgroundColor) {
@@ -51,12 +42,10 @@ const PtcTextCopyWithBackground = class {
     return {
       [this.type]: true,
       [this.slitPosition]: true,
-      ["light-links"]: this.overlay && !this.disableLightLinks,
-      ["bg-image-absent"]: !this.backgroundImage &&
-        this.type == "text-copy-with-background",
+      ['light-links']: this.overlay && !this.disableLightLinks,
+      ['bg-image-absent']: !this.backgroundImage && this.type == "text-copy-with-background"
     };
   }
-  get hostEle() { return getElement(this); }
 };
 PtcTextCopyWithBackground.style = ptcTextCopyWithBackgroundCss;