npm - @ptcwebops/ptcw-design - Versions diffs - 6.4.36-beta → 6.5.0-upgrade - Mend

@ptcwebops/ptcw-design 6.4.36-beta → 6.5.0-upgrade

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1423) hide show

package/dist/esm/ptc-img.entry.js DELETED Viewed

@@ -1,212 +0,0 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-0bf594c4.js';
-import { R as ResponsiveBgVariables } from './interfaces-4caedd26.js';
-const ptcImgCss = "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}}.smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-standard-top{border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-large-top{border-top-left-radius:var(--ptc-border-radius-large);border-top-right-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}@media only screen and (min-width: 768px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (min-width: 768px){.hidden-lg{display:none !important}}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}.ptc-img{position:relative;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center}img{width:100%;height:auto;display:block}.low-quality,.medium-quality,.high-quality{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:opacity 0.5s ease-in-out}.low-quality{z-index:1}.medium-quality{z-index:2;opacity:0}.high-quality{z-index:3;opacity:0}.ptc-img--lazy .lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}.ptc-img--lazy .low-quality,.ptc-img--lazy .medium-quality,.ptc-img--lazy .high-quality{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:opacity 0.5s ease-in-out}.ptc-img--lazy .low-quality{z-index:1}.ptc-img--lazy .medium-quality{z-index:2;opacity:0}.ptc-img--lazy .high-quality{z-index:3;opacity:0}";
-const PtcImg = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sizeXs = "510x340";
-    this.sizeSm = "1240x496";
-    this.sizeMd = "1366x500";
-    this.sizeLg = "1920x1080";
-    this.imgUrl = undefined;
-    this.imageType = "smart-bg";
-    this.borderRadius = "";
-    this.loadMode = "lazy-bg";
-    this.styles = undefined;
-    this.enableLazyLoad = false;
-    this.delay = 2000;
-    this.bgSrcLazy = undefined;
-    this.bgSrcMedium = undefined;
-    this.bgSrcHigh = undefined;
-    this.isInViewport = false;
-    this.isImageUpgraded = false;
-  }
-  WindowResize() {
-    this.setResponsiveBg();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    if (this.enableLazyLoad && this.imgUrl) {
-      // Lazy loading functionality
-      return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h("div", { class: "low-quality", style: {
-          backgroundImage: `url(${this.bgSrcLazy})`,
-          opacity: "1",
-          transition: "opacity 0.5s ease-in-out",
-        } }), h("div", { class: "medium-quality", style: {
-          opacity: "0",
-          transition: "opacity 0.5s ease-in-out",
-        } }), h("div", { class: "high-quality", style: {
-          opacity: "0",
-          transition: "opacity 0.5s ease-in-out",
-        } }), this.imageType == "smart-bg" ? h("slot", null) : null)));
-    }
-    else {
-      return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap, "data-xs": this.bgSrcLazy || this.imgUrl, "data-sm": this.bgSrcLazy || this.imgUrl, "data-md": this.bgSrcLazy || this.imgUrl, "data-lg": this.bgSrcLazy || this.imgUrl, style: {
-          backgroundImage: `url(${this.bgSrcLazy || this.imgUrl})`,
-        } }, this.imageType == "smart-bg" ? h("slot", null) : null)));
-    }
-  }
-  componentWillLoad() {
-    if (this.enableLazyLoad) {
-      this.isInViewport = false;
-    }
-    if (this.enableLazyLoad && this.imgUrl) {
-      this.bgSrcLazy = this.getImageUrl("lq");
-      this.bgSrcMedium = this.getImageUrl("mq");
-      this.bgSrcHigh = this.getImageUrl("hq");
-    }
-    else {
-      console.warn("Image URL is undefined or invalid.");
-      this.bgSrcLazy = "";
-      this.bgSrcMedium = "";
-      this.bgSrcHigh = "";
-    }
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-    this.setResponsiveBg();
-    if (this.enableLazyLoad && this.imgUrl) {
-      const that = this;
-      setTimeout(() => {
-        that.upgradeImageQuality();
-      }, that.delay);
-    }
-  }
-  componentWillUpdate() {
-    this.addIntersectionObserver();
-    this.setResponsiveBg();
-  }
-  upgradeImageQuality() {
-    if (this.isInViewport && !this.isImageUpgraded) {
-      console.log("Low-quality image is visible.");
-      this.isImageUpgraded = true;
-      setTimeout(() => {
-        const mediumLayer = this.el.querySelector(".medium-quality");
-        if (mediumLayer) {
-          mediumLayer.style.backgroundImage = `url(${this.bgSrcMedium})`;
-          mediumLayer.style.opacity = "1";
-          console.log("Medium-quality image is now visible.");
-        }
-        setTimeout(() => {
-          const highLayer = this.el.querySelector(".high-quality");
-          if (highLayer) {
-            highLayer.style.backgroundImage = `url(${this.bgSrcHigh})`;
-            highLayer.style.opacity = "1";
-            console.log("High-quality image is now visible.");
-          }
-          if (mediumLayer) {
-            mediumLayer.style.opacity = "0";
-            console.log("Medium-quality image is hidden.");
-          }
-        }, this.delay);
-      }, this.delay / 2);
-    }
-  }
-  //responsive image
-  setResponsiveBg() {
-    // Define local variables
-    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    // Loop through all target elements
-    for (var i = 0, len = backgrounds.length; i < len; i++) {
-      // Set current variables
-      el = backgrounds[i];
-      elData = el.getAttribute("data-" + currentBreakpoint);
-      // If the data attribute exists, set the background
-      if (elData !== null) {
-        el.style.backgroundImage = "url('" + elData + "')";
-      }
-      else {
-        if (typeof console == "object") {
-          console.warn("Data attribute: data-" +
-            currentBreakpoint +
-            " not found on element:\n\n" +
-            el.outerHTML +
-            "\n\n\n");
-        }
-      }
-    }
-  }
-  //lazy loading
-  addIntersectionObserver() {
-    if (!this.imgUrl) {
-      return;
-    }
-    if ("IntersectionObserver" in window) {
-      let lazyLoadBgs = (this.el || document).querySelectorAll(".lazy-bg");
-      let bgObserver = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const image = entry.target;
-            image.classList.remove("lazy-bg");
-            bgObserver.unobserve(image);
-            this.isInViewport = true;
-            this.upgradeImageQuality();
-          }
-        });
-      });
-      lazyLoadBgs.forEach((image) => {
-        bgObserver.observe(image);
-      });
-    }
-  }
-  getImageUrl(quality) {
-    if (this.imgUrl && this.imgUrl.includes("?")) {
-      return `${this.imgUrl}&t=ptcjumbdesk${quality}`;
-    }
-    else {
-      return `${this.imgUrl}?t=ptcjumbdesk${quality}`;
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.imageType]: true,
-      'ptc-img': true,
-      [this.borderRadius]: true,
-      [this.loadMode]: true,
-      [this.enableLazyLoad ? 'ptc-img--lazy' : '']: true,
-      // [this.imageZIndex] : true
-    };
-  }
-  getCurrentBreakPoints() {
-    // Define local variables
-    let doc = window.document, temp = doc.createElement("div"), env;
-    // Append test node
-    doc.body.appendChild(temp);
-    // Loop through breakpoints
-    for (let i = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
-      env = ResponsiveBgVariables.envs[i];
-      // Add classes
-      temp.className = "hidden-" + env;
-      // Found breakpoint
-      if (temp.offsetParent === null) {
-        // Remove our test node
-        doc.body.removeChild(temp);
-        // Return current breakpoint
-        return env;
-      }
-    }
-    // Breakpoint not found, try fallback
-    doc.body.removeChild(temp);
-    return this.getFallbackBreakpoint();
-  }
-  getFallbackBreakpoint() {
-    if (window.matchMedia("(min-width: 992px)").matches) {
-      return "lg";
-    }
-    else if (window.matchMedia("(min-width: 768px)").matches) {
-      return "md";
-    }
-    else if (window.matchMedia("(min-width: 576px)").matches) {
-      return "sm";
-    }
-    else {
-      return "xs";
-    }
-  }
-  get el() { return getElement(this); }
-};
-PtcImg.style = ptcImgCss;
-export { PtcImg as ptc_img };

package/dist/esm/ptc-info-tile.entry.js DELETED Viewed

@@ -1,46 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
-const ptcInfoTileCss = "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}@media screen and (min-width: 992px){:host{flex:1}}.tile{position:relative;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);overflow:hidden;cursor:pointer;transition:border 0.3s;max-width:360px;height:116px}.tile.image{width:299px;display:flex;flex-wrap:nowrap;flex-direction:row;align-items:stretch;margin:0 auto;box-shadow:var(--ptc-shadow-x-large);max-width:unset;height:100%;min-height:140px}@media screen and (min-width: 992px){.tile.image{width:unset;min-width:299px}}@media screen and (min-width: 1440px){.tile.image{min-height:116px}}.tile.image .tile-image{flex:0 0 120px;display:flex;align-items:center;overflow:hidden}.tile.image .tile-content{border-top:2px solid var(--color-white);border-bottom:2px solid var(--color-white);background:#fff;text-align:left;flex:1;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;transition:border var(--ptc-transition-medium) var(--ptc-ease-in)}.tile.image:hover .tile-content{border-bottom:2px solid var(--color-blue-06);background:var(--color-white)}.tile.image:focus .tile-content,.tile.image:active .tile-content{border-bottom:2px solid var(--color-blue-06);background:var(--color-gray-01)}.tile.text{background-color:var(--color-white);border:1px solid var(--color-gray-03);width:268px}.tile.text:hover{border:1px solid var(--color-gray-07)}.tile.text:active{background-color:var(--color-gray-01);border:1px solid var(--color-gray-07)}.tile.text:focus-visible{outline-offset:1px}@media only screen and (min-width: 992px){.tile.text{width:auto;height:auto}}.tile.text .tile-content{padding:20px}.tile .tile-title-span{margin:0}.tile .tile-title-desc{margin:4px 0 0}.tile .link-overlay{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:1}.tile .tile-content{padding:var(--ptc-element-spacing-06)}.tile .tile-content .tile-title-span{color:var(--color-blue-07);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium)}.tile .tile-content p{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p)}.tile:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}::slotted(img[slot=tile-image]){width:120px !important;height:100% !important;-o-object-fit:cover;object-fit:cover;display:block;max-height:100%;position:absolute}::slotted(span[slot=tile-title]),::slotted(p[slot=tile-title]){color:var(--color-blue-07) !important;font-family:var(--ptc-font-latin) !important;font-size:var(--ptc-font-size-xx-small) !important;font-weight:var(--ptc-font-weight-medium) !important;text-align:left !important;margin:0px !important}::slotted(p[slot=tile-description]),::slotted(h2[slot=tile-description]),::slotted(h3[slot=tile-description]){color:var(--color-gray-10) !important;font-family:var(--ptc-font-latin) !important;font-size:var(--ptc-font-size-x-small) !important;font-weight:var(--ptc-font-weight-bold) !important;line-height:var(--ptc-line-height-p) !important;text-align:left !important;margin-bottom:0px !important}::slotted(h2[slot=tile-description]),::slotted(h3[slot=tile-description]){margin-top:0px !important}::slotted(p[slot=tile-title]){margin-bottom:0px !important}";
-const PtcInfoTile = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tileClick = createEvent(this, "tileClick", 7);
-    this.link = undefined;
-    this.variant = undefined;
-    this.styles = undefined;
-    this.trackerId = undefined;
-    this.accessibilityIndex = 0;
-    this.target = "";
-  }
-  handleClick() {
-    this.tileClick.emit();
-  }
-  handleKeyPress(event) {
-    if (event.key === "Enter") {
-      if (this.link) {
-        const linkElement = this.el.shadowRoot.querySelector("a.link-press");
-        if (linkElement) {
-          linkElement.click();
-        }
-      }
-      else {
-        this.handleClick();
-      }
-    }
-  }
-  componentDidLoad() {
-    this.el.addEventListener("keydown", this.handleKeyPress.bind(this));
-  }
-  disconnectedCallback() {
-    this.el.removeEventListener("keydown", this.handleKeyPress.bind(this));
-  }
-  render() {
-    const content = (h("div", { class: "tile-content" }, h("span", { class: "tile-title-span" }, h("slot", { name: "tile-title" })), h("div", { class: "tile-title-desc" }, h("slot", { name: "tile-description" }))));
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: `tile ${this.variant}`, onClick: () => this.handleClick(), tabindex: this.accessibilityIndex }, this.variant === "image" && (h("div", { class: "tile-image" }, h("slot", { name: "tile-image" }))), content, this.link && (h("a", { href: this.link, class: "link-overlay link-press", tabindex: "-1", target: this.target })))));
-  }
-  get el() { return getElement(this); }
-};
-PtcInfoTile.style = ptcInfoTileCss;
-export { PtcInfoTile as ptc_info_tile };

package/dist/esm/ptc-inline-cta.entry.js DELETED Viewed

@@ -1,134 +0,0 @@
-import { r as registerInstance, h, F as Fragment, H as Host, a as getElement } from './index-0bf594c4.js';
-const ptcInlineCtaCss = "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}:host .small-inline-cta-container{width:100%;height:-moz-max-content;height:max-content;display:grid;position:relative;align-items:center}:host .small-inline-cta-container .cta-bg{display:none}:host .small-inline-cta-container .cta-content{width:100%;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--color-gray-08);border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-05);box-sizing:border-box}:host .small-inline-cta-container .cta-content .cta-image{width:100%;height:200px}:host .small-inline-cta-container .cta-content .cta-body{width:100%;margin-top:var(--ptc-element-spacing-05);padding:0}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:16px;margin:-16px}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:hover{outline:none;text-decoration:none}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:focus-visible{padding:2px;border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 768px){:host .small-inline-cta-container{margin-top:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));margin-bottom:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01))}:host .small-inline-cta-container .cta-bg{display:block;width:80%;height:calc(100% + 16px + 16px);position:absolute;right:0;z-index:-1;background-color:var(--color-gray-08);border-radius:var(--ptc-border-radius-standard)}:host .small-inline-cta-container .cta-content{flex-direction:row;align-items:center;background-color:transparent;border-radius:none;padding:0}:host .small-inline-cta-container .cta-content .cta-image{width:35%;height:164px}:host .small-inline-cta-container .cta-content .cta-body{width:65%;justify-self:right;display:flex;align-items:center;box-sizing:border-box;padding-right:var(--ptc-element-spacing-07);padding-left:var(--ptc-element-spacing-07);margin-top:0;margin-bottom:0}}:host .big-inline-cta-container{width:100%;height:-moz-max-content;height:max-content;display:grid;position:relative;align-items:center}:host .big-inline-cta-container .cta-bg{display:none}:host .big-inline-cta-container .cta-content{width:100%;display:flex;flex-direction:column;border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-05);box-sizing:border-box;background-color:var(--color-green-08)}:host .big-inline-cta-container .cta-content .cta-image{width:100%;height:300px}:host .big-inline-cta-container .cta-content .cta-body{width:100%;margin-top:var(--ptc-element-spacing-06)}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:24px;margin:-24px}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:hover{outline:none;text-decoration:none}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:focus-visible{padding:2px;border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 480px){:host .big-inline-cta-container .cta-content .cta-body{margin-top:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 768px){:host .big-inline-cta-container{margin-top:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));margin-bottom:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01))}:host .big-inline-cta-container .cta-bg{display:block;width:80%;height:calc(100% + 24px + 24px);position:absolute;right:0;z-index:-1;border-radius:var(--ptc-border-radius-standard);background-color:var(--color-green-08)}:host .big-inline-cta-container .cta-content{flex-direction:row;align-items:center;border-radius:none;padding:0;background-color:transparent}:host .big-inline-cta-container .cta-content .cta-image{width:40%;height:400px;justify-self:left}:host .big-inline-cta-container .cta-content .cta-body{width:60%;justify-self:right;display:flex;align-items:center;box-sizing:border-box;padding-top:calc(var(--ptc-element-spacing-07) + var(--ptc-element-spacing-05));padding-right:var(--ptc-element-spacing-07);padding-bottom:calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04));padding-left:var(--ptc-element-spacing-07);margin-top:0}}:host .big-inline-cta-container.green .cta-content{background-color:var(--color-green-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.green .cta-bg{background-color:var(--color-green-08)}:host .big-inline-cta-container.green .cta-content{background-color:transparent}}:host .big-inline-cta-container.blue .cta-content{background-color:var(--color-blue-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.blue .cta-bg{background-color:var(--color-blue-08)}:host .big-inline-cta-container.blue .cta-content{background-color:transparent}}:host .big-inline-cta-container.gray .cta-content{background-color:var(--color-gray-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.gray .cta-bg{background-color:var(--color-gray-08)}:host .big-inline-cta-container.gray .cta-content{background-color:transparent}}:host .bottom-inline-cta-container{background-color:#fff;padding:var(--ptc-element-spacing-06);display:flex;gap:var(--ptc-element-spacing-06);flex-direction:column;border-radius:var(--ptc-border-radius-standard)}:host .bottom-inline-cta-container .cta-image{flex:none;height:230px}:host .bottom-inline-cta-container .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .bottom-inline-cta-container .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:24px;margin:-24px}:host .bottom-inline-cta-container .link-wrapper:hover{outline:none;text-decoration:none}:host .bottom-inline-cta-container .link-wrapper:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 768px){:host .bottom-inline-cta-container{flex-direction:row;gap:0}:host .bottom-inline-cta-container .cta-image{height:inherit;width:50%;display:block;position:relative}:host .bottom-inline-cta-container .cta-image ptc-picture{position:absolute;top:0;right:12px;bottom:0;left:0}:host .bottom-inline-cta-container .cta-body{height:-moz-max-content;height:max-content;width:50%;display:block;padding-left:12px}}";
-const idxBgClassMapper = {
-  0: "green",
-  1: "blue",
-  2: "gray",
-};
-const PtcInlineCta = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.captureSlots = () => {
-      var _a, _b, _c, _d;
-      this.image =
-        (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="cta-image"]');
-      this.cta =
-        (_b = this.hostEle) === null || _b === void 0 ? void 0 : _b.querySelector('[slot="cta-link"]');
-      const heading = (_c = this.hostEle) === null || _c === void 0 ? void 0 : _c.querySelector('[slot="cta-heading"]');
-      const description = (_d = this.hostEle) === null || _d === void 0 ? void 0 : _d.querySelector('[slot="cta-description"]');
-      this.heading = (heading === null || heading === void 0 ? void 0 : heading.innerText) || "";
-      this.description = (description === null || description === void 0 ? void 0 : description.innerText) || "";
-    };
-    this.setBgColor = () => {
-      var _a;
-      let inlineCtas = null;
-      if (this.containerSelector) {
-        const container = document.querySelector(this.containerSelector);
-        if (this.containerIsShadow) {
-          inlineCtas =
-            (_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ptc-inline-cta");
-        }
-        else {
-          inlineCtas = container === null || container === void 0 ? void 0 : container.querySelectorAll("ptc-inline-cta");
-        }
-      }
-      else {
-        inlineCtas = document.querySelectorAll("ptc-inline-cta");
-      }
-      inlineCtas &&
-        inlineCtas.forEach((cta, idx) => {
-          var _a, _b;
-          if (cta == this.hostEle) {
-            const bgVariationCount = Object.keys(idxBgClassMapper).length;
-            const bgClass = idxBgClassMapper[idx % bgVariationCount];
-            const ctaContainer = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".big-inline-cta-container");
-            if (ctaContainer) {
-              ctaContainer.classList.add(bgClass);
-            }
-          }
-        });
-    };
-    this.truncate = (str, limit) => {
-      return str.length <= limit ? str : str.substring(0, limit) + "...";
-    };
-    this.handleFocus = (e, linkWrapper) => {
-      var _a, _b, _c, _d;
-      switch (this.type) {
-        case "small":
-          (_a = linkWrapper.querySelector("ptc-link")) === null || _a === void 0 ? void 0 : _a.focus();
-          break;
-        default:
-          if (e.relatedTarget.nodeName !== "PTC-BUTTON") {
-            (_d = (_c = (_b = linkWrapper
-              .querySelector("ptc-button")) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button")) === null || _d === void 0 ? void 0 : _d.focus();
-          }
-          break;
-      }
-    };
-    this.componentWillLoad = () => {
-      this.captureSlots();
-    };
-    this.componentWillRender = () => {
-      // const linkWrapper = this.hostEle?.shadowRoot?.querySelector<HTMLAnchorElement>('a.link-wrapper');
-      // if (linkWrapper) {
-      // 	linkWrapper.addEventListener('focus', e => this.handleFocus(e, linkWrapper));
-      // }
-      if (this.rte) {
-        this.captureSlots();
-      }
-    };
-    this.componentDidLoad = () => {
-      if (this.type === "big") {
-        this.setBgColor();
-      }
-    };
-    this.disconnectedCallback = () => {
-      // const linkWrapper = this.hostEle?.shadowRoot?.querySelector<HTMLAnchorElement>('a.link-wrapper');
-      // if (linkWrapper) {
-      // 	linkWrapper.removeEventListener('focus', e => this.handleFocus(e, linkWrapper));
-      // }
-    };
-    this.type = undefined;
-    this.containerSelector = "";
-    this.containerIsShadow = false;
-    this.trackerId = "";
-    this.rte = undefined;
-    this.image = undefined;
-    this.heading = "";
-    this.description = "";
-    this.cta = undefined;
-  }
-  render() {
-    const Small = () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return (h("div", { class: "small-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && (h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t" }))), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && (h("ptc-title", { type: "h4", "title-size": "medium", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: "no-upperline", "is-plm-hub": false }, this.truncate(this.heading, 70))), !!this.description && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 100)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("ptc-link", { disabled: false, "font-size": "small", theme: "d-green-underline", styles: ".d-green-underline {line-height: var(--ptc-line-height-p)}", "tab-nav": "-1", "link-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))))));
-    };
-    const Big = () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return (h("div", { class: "big-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && (h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t};\r\n\t\t\t\t\t\t\t" }))), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && (h("ptc-title", { type: "h3", "title-size": "large", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: "no-upperline", "is-plm-hub": false }, this.truncate(this.heading, 70))), !!this.description && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 200)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-button", { color: "ptc-tertiary", disabled: false, type: "button", styles: ".ptc-tertiary  {border: 2px solid #FFFFFF !important}", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))))));
-    };
-    const Bottom = () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return (h("div", { class: "bottom-inline-cta-container" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && (h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: ":host {height: 100%;}" }))), h("div", { id: this.trackerId, class: "cta-body" }, h("a", { class: "link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && (h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", "title-weight": "w-8", "title-line-h": "densest", "title-margin": "margin-flush", upperline: "no-upperline", "is-plm-hub": false }, h("h2", null, this.truncate(this.heading, 70)))), !!this.description && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-bottom-4" }, this.truncate(this.description, 100)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && (h("ptc-button", { color: "ptc-primary", disabled: false, type: "button", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
-    };
-    const InlineCta = () => {
-      switch (this.type) {
-        case "small":
-          return h(Small, null);
-        case "big":
-          return h(Big, null);
-        case "bottom":
-          return h(Bottom, null);
-        default:
-          return null;
-      }
-    };
-    return (h(Host, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("div", null, h(InlineCta, null)), this.type === "bottom" ? null : (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" })))));
-  }
-  get hostEle() { return getElement(this); }
-};
-PtcInlineCta.style = ptcInlineCtaCss;
-export { PtcInlineCta as ptc_inline_cta };