@ptcwebops/ptcw-design 6.2.31-beta → 6.2.32-beta

package/dist/cjs/ptc-img.cjs.entry.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-63ddc79c.js');
+const interfaces = require('./interfaces-574e6df7.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}}";
+
+const PtcImg = class {
+  constructor(hostRef) {
+    index.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;
+  }
+  /**
+   * Image Z Index
+   */
+  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
+  WindowResize() {
+    this.setResponsiveBg();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("div", { class: classMap, "data-xs": `${this.imgUrl}`, "data-sm": `${this.imgUrl}`, "data-md": `${this.imgUrl}`, "data-lg": `${this.imgUrl}` }, this.imageType == 'smart-bg' ? index.h("slot", null) : null)));
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  componentWillUpdate() {
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el || document).querySelectorAll(interfaces.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) {
+      console.log('no image!');
+      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);
+          }
+        });
+      });
+      lazyLoadBgs.forEach(image => {
+        bgObserver.observe(image);
+      });
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.imageType]: true,
+      'ptc-img': true,
+      [this.borderRadius]: true,
+      [this.loadMode]: 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 = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
+      env = interfaces.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 index.getElement(this); }
+};
+PtcImg.style = ptcImgCss;
+
+exports.ptc_img = PtcImg;

package/dist/cjs/ptc-jumbotron.cjs.entry.js

@@ -0,0 +1,151 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-63ddc79c.js');
+
+const ptcJumbotronCss = "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}}.ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid{width:100%}.u-para-sm{font-size:var(--ptc-font-size-small) !important}.u-para-md{font-size:var(--ptc-font-size-medium) !important}.u-para-lg{font-size:var(--ptc-font-size-large) !important}.u-para-xl{font-size:var(--ptc-font-size-x-large) !important}.u-para-xxl{font-size:var(--ptc-font-size-xx-large) !important}.u-para-xxxl{font-size:var(--ptc-font-size-xxx-large) !important}@media only screen and (min-width: 768px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.05vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.05vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.05vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.05vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.05vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.05vw) !important}}@media only screen and (min-width: 992px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.1vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.1vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.1vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.1vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.1vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.1vw) !important}}@media only screen and (min-width: 1200px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.15vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.15vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.15vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.15vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.15vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.15vw) !important}}@media only screen and (min-width: 1440px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.2vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.2vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.2vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.2vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.2vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.2vw) !important}}@media only screen and (min-width: 1600px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.25vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.25vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.25vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.25vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.25vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.25vw) !important}}@media only screen and (min-width: 1980px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.3vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.3vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.3vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.3vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.3vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.3vw) !important}}@media only screen and (min-width: 2600px){.u-para-sm{font-size:calc(var(--ptc-font-size-small) + 0.35vw) !important}.u-para-md{font-size:calc(var(--ptc-font-size-medium) + 0.35vw) !important}.u-para-lg{font-size:calc(var(--ptc-font-size-large) + 0.35vw) !important}.u-para-xl{font-size:calc(var(--ptc-font-size-x-large) + 0.35vw) !important}.u-para-xxl{font-size:calc(var(--ptc-font-size-xx-large) + 0.35vw) !important}.u-para-xxxl{font-size:calc(var(--ptc-font-size-xxx-large) + 0.35vw) !important}}.u-para-body{font-size:var(--ptc-font-size-medium) !important}.u-color-white{color:var(--color-white) !important}.u-uppercase{text-transform:uppercase !important}.u-margin-flush{margin:0 !important}.u-marginTop-flush{margin-top:0 !important}.u-marginLeft-flush{margin-left:0 !important}.u-marginRight-flush{margin-right:0 !important}.u-marginBottom-flush{margin-bottom:0 !important}.u-padding-flush{padding:0 !important}.u-paddingTop-flush{padding-top:0 !important}.u-paddingLeft-flush{padding-left:0 !important}.u-paddingRight-flush{padding-right:0 !important}.u-paddingBottom-flush{padding-bottom:0 !important}.u-margin-xs{margin:var(--ptc-element-spacing-01) !important}.u-marginTop-xs{margin-top:var(--ptc-element-spacing-01) !important}.u-marginLeft-xs{margin-left:var(--ptc-element-spacing-01) !important}.u-marginRight-xs{margin-right:var(--ptc-element-spacing-01) !important}.u-marginBottom-xs{margin-bottom:var(--ptc-element-spacing-01) !important}.u-margin-sm{margin:var(--ptc-element-spacing-02) !important}.u-marginTop-sm{margin-top:var(--ptc-element-spacing-02) !important}.u-marginLeft-sm{margin-left:var(--ptc-element-spacing-02) !important}.u-marginRight-sm{margin-right:var(--ptc-element-spacing-02) !important}.u-marginBottom-sm{margin-bottom:var(--ptc-element-spacing-02) !important}.u-margin-md{margin:var(--ptc-element-spacing-03) !important}.u-marginTop-md{margin-top:var(--ptc-element-spacing-03) !important}.u-marginLeft-md{margin-left:var(--ptc-element-spacing-03) !important}.u-marginRight-md{margin-right:var(--ptc-element-spacing-03) !important}.u-marginBottom-md{margin-bottom:var(--ptc-element-spacing-03) !important}.u-margin-lg{margin:var(--ptc-element-spacing-04) !important}.u-marginTop-lg{margin-top:var(--ptc-element-spacing-04) !important}.u-marginLeft-lg{margin-left:var(--ptc-element-spacing-04) !important}.u-marginRight-lg{margin-right:var(--ptc-element-spacing-04) !important}.u-marginBottom-lg{margin-bottom:var(--ptc-element-spacing-04) !important}.u-margin-xl{margin:var(--ptc-element-spacing-05) !important}.u-marginTop-xl{margin-top:var(--ptc-element-spacing-05) !important}.u-marginLeft-xl{margin-left:var(--ptc-element-spacing-05) !important}.u-marginRight-xl{margin-right:var(--ptc-element-spacing-05) !important}.u-marginBottom-xl{margin-bottom:var(--ptc-element-spacing-05) !important}.u-margin-xxl{margin:var(--ptc-element-spacing-06) !important}.u-marginTop-xxl{margin-top:var(--ptc-element-spacing-06) !important}.u-marginLeft-xxl{margin-left:var(--ptc-element-spacing-06) !important}.u-marginRight-xxl{margin-right:var(--ptc-element-spacing-06) !important}.u-marginBottom-xxl{margin-bottom:var(--ptc-element-spacing-06) !important}.u-margin-xxxl{margin:var(--ptc-element-spacing-07) !important}.u-marginTop-xxxl{margin-top:var(--ptc-element-spacing-07) !important}.u-marginLeft-xxxl{margin-left:var(--ptc-element-spacing-07) !important}.u-marginRight-xxxl{margin-right:var(--ptc-element-spacing-07) !important}.u-marginBottom-xxxl{margin-bottom:var(--ptc-element-spacing-07) !important}.u-margin-4xl{margin:var(--ptc-element-spacing-08) !important}.u-marginTop-4xl{margin-top:var(--ptc-element-spacing-08) !important}.u-marginLeft-4xl{margin-left:var(--ptc-element-spacing-08) !important}.u-marginRight-4xl{margin-right:var(--ptc-element-spacing-08) !important}.u-marginBottom-4xl{margin-bottom:var(--ptc-element-spacing-08) !important}.u-textAlign-ctr{text-align:center !important}.u-textAlign-right{text-align:right !important}.u-textAlign-left{text-align:left !important}.u-textWhite{color:var(--color-white) !important}.u-textGreen1{color:var(--color-green-07) !important}.u-textGreen2{color:var(--color-green-06) !important}.u-text-nowrap{white-space:nowrap}.u-text-medium{font-weight:var(--ptc-font-weight-medium)}.u-text-semibold{font-weight:var(--ptc-font-weight-semibold)}.u-text-bold{font-weight:var(--ptc-font-weight-bold)}.u-text-thin{font-weight:var(--ptc-font-weight-thin)}.u-textStyle-normal{font-style:normal !important}.u-no-scroll{overflow:hidden}.u-background-white{background-color:var(--color-white)}.u-background-reset{background-color:transparent !important}.u-white-overylay{background:rgba(242, 242, 242, 0.9)}.u-cursor-pointer{cursor:pointer}.u-clear{clear:both}.u-border-radius-standard{border-radius:var(--ptc-border-radius-standard)}.u-border-radius-large{border-radius:var(--ptc-border-radius-large)}.u-border-radius-pill{border-radius:var(--ptc-border-radius-pill)}.u-border-radius-circle{border-radius:var(--ptc-border-radius-circle)}.u-border-none{border:none}.u-shadow-x-small{box-shadow:var(--ptc-shadow-x-small)}.u-shadow-small{box-shadow:var(--ptc-shadow-small)}.u-shadow-medium{box-shadow:var(--ptc-shadow-medium)}.u-shadow-large{box-shadow:var(--ptc-shadow-large)}.u-shadow-x-large{box-shadow:var(--ptc-shadow-x-large)}@media only screen and (min-width: 768px){.u-hero-width{width:525px}.u-margin-center{margin:0 auto}.u-justify-self-end{justify-self:flex-end}}.u-hero-pushup{transform:translateY(-120px)}@media only screen and (min-width: 768px){.u-hero-pushup{transform:translateY(-144px)}}@media only screen and (min-width: 768px){.grid-order-1-md{order:1}.grid-order-2-md{order:2}.grid-order-3-md{order:3}}@media only screen and (min-width: 992px){.grid-order-1-lg{order:1}.grid-order-2-lg{order:2}.grid-order-3-lg{order:3}}.standard-list{list-style:none;margin-left:0;margin-bottom:20px;padding:0}.is-spaced-between{justify-content:space-between}.h-100{height:100%}.w-100{width:100%}.grid-large-col-gap-md{column-gap:0}@media only screen and (min-width: 992px){.grid-large-col-gap-md{column-gap:3rem}}.grid-large-col-gap-sm{column-gap:0}@media only screen and (min-width: 768px){.grid-large-col-gap-sm{column-gap:3rem}}.grid-x-large-col-gap-md{column-gap:0}@media only screen and (min-width: 992px){.grid-x-large-col-gap-md{column-gap:4rem}}.grid-x-large-col-gap-sm{column-gap:0}@media only screen and (min-width: 768px){.grid-x-large-col-gap-sm{column-gap:4rem}}.grid-medium-col-gap-md{column-gap:0}@media only screen and (min-width: 992px){.grid-medium-col-gap-md{column-gap:2rem}}.grid-medium-col-gap-sm{column-gap:0}@media only screen and (min-width: 768px){.grid-medium-col-gap-sm{column-gap:2rem}}.is-float-left{float:left}.is-float-right{float:right}.is-mobile{display:block}.is-desktop{display:none}@media only screen and (min-width: 992px){.is-mobile{display:none}.is-desktop{display:block}}.ptc-section{padding-top:3rem;padding-bottom:3rem}.ptc-section-standard{padding-top:3rem;padding-bottom:3rem}.ptc-section-half{padding-top:1.5rem;padding-bottom:1.5rem}.ptc-section-large{padding-top:2.25rem;padding-bottom:2.25rem}@media only screen and (min-width: 992px){.ptc-section-large{padding-top:3.5rem;padding-bottom:3.5rem}}.ptc-section-hp{padding-bottom:calc(2.25rem - 32px)}@media only screen and (min-width: 992px){.ptc-section-hp{padding-bottom:calc(3.5rem - 32px)}}.u-flex{display:flex}@media only screen and (min-width: 480px){.u-flex-xs{display:flex}}@media only screen and (min-width: 768px){.u-flex-sm{display:flex}}@media only screen and (min-width: 992px){.u-flex-md{display:flex}}@media only screen and (min-width: 1200px){.u-flex-lg{display:flex}}@media only screen and (min-width: 1440px){.u-flex-xl{display:flex}}@media only screen and (min-width: 1600px){.u-flex-xxl{display:flex}}@media only screen and (min-width: 1980px){.u-flex-2k{display:flex}}@media only screen and (min-width: 2600px){.u-flex-4k{display:flex}}.u-align-center{margin:auto;align-self:center}.u-align-left{margin-right:auto;align-self:center}.u-align-right{margin-left:auto;align-self:center}.u-align-x-center{margin-right:auto;margin-left:auto}.u-align-x-left{margin-right:auto}.u-align-x-right{margin-left:auto}.u-align-y-center{align-self:center}.u-align-y-top{align-self:flex-start}.u-align-y-bottom{align-self:flex-end}.is-flex-column{flex-direction:column}.flex-align-items{align-items:flex-end}.flex-align-items-center{align-items:center}.u-flex-nowrap{flex-wrap:nowrap}.u-flex-wrap{flex-wrap:wrap}.u-align-self-start{align-self:start}.u-align-self-center{align-self:center}.u-align-self-stretch{align-self:stretch}.u-justify-self-start{justify-self:start}.u-justify-self-center{justify-self:center}.u-justify-self-stretch{justify-self:stretch}.u-flex-justify-center{justify-content:center}.u-flex-justify-flexend{justify-content:flex-end}.u-section-heading-wrapper{max-width:768px;margin-left:auto;margin-right:auto}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}@media only screen and (min-width: 768px){.is-grid.grid-large-col-gap-xs-0{row-gap:0}}.max-content{max-width:90%;margin:auto}@media only screen and (min-width: 480px){.max-content{max-width:80%}}.u-justify-space-between{justify-content:space-between}.all-product-banner{padding:50px 0 44px 0px}@media only screen and (min-width: 992px){.all-product-banner{padding:50px 0 72px 0px;display:flex;min-height:300px;justify-content:center;align-items:center}}.all-product-gradient{background:linear-gradient(180deg, #f3f3f3 2.6%, rgba(225, 241, 226, 0.2) 40.63%, #f3f3f3 82.29%), linear-gradient(0deg, #f3f3f3, #f3f3f3)}.menu-right ptc-nav-submenu{position:relative}.media-thumb-feature{display:block}@media only screen and (min-width: 992px){.media-thumb-feature{display:flex;justify-content:space-between}}.media-thumb-feature .media-thumb{width:100%;margin-bottom:2rem}@media only screen and (min-width: 992px){.media-thumb-feature .media-thumb{width:340px;flex:0 0 340px}}.media-thumb-feature .media-thumb>ptc-picture:not(:last-of-type),.media-thumb-feature .media-thumb>img:not(:last-of-type){margin-bottom:1.5rem}.media-thumb-feature .media-feature{width:100%;margin-bottom:2rem}@media only screen and (min-width: 992px){.media-thumb-feature .media-feature{width:auto;flex:1 1 auto}}.partner-card-desc h5.description{font-family:var(--ptc-font-latin);color:var(--color-gray-10);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);letter-spacing:var(--ptc-letter-spacing-normal);line-height:var(--ptc-line-height-medium);margin:0 0 10px 0}.partner-card-desc .tags{margin-bottom:0.75rem}.partner-card-desc .tags .tag:not(:first-child){border-left:2px solid var(--color-green-07);padding:0 8px}.partner-card-desc .tags .tag:first-child{padding:0 8px 0 0}.partner-card-desc .tags .tag{color:var(--color-gray-10);display:inline;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-loose);margin:0 0 10px 0;padding:0 8px}.u-3-col-grid{width:100%;display:flex;flex-wrap:wrap;grid-row-gap:1rem;grid-column-gap:1rem}.u-3-col-grid .u-3-col{width:100%}@media only screen and (min-width: 768px){.u-3-col-grid .u-3-col{width:calc(50% - 10.66666666px)}}@media only screen and (min-width: 992px){.u-3-col-grid .u-3-col{width:calc(33.3333333333% - 10.66666666px)}}.u-3-col-grid.u-col-space-lg{grid-row-gap:2rem;grid-column-gap:2rem}.u-3-col-grid.u-col-space-lg .u-3-col{width:100%}@media only screen and (min-width: 768px){.u-3-col-grid.u-col-space-lg .u-3-col{width:calc(50% - 21.3333333px)}}@media only screen and (min-width: 992px){.u-3-col-grid.u-col-space-lg .u-3-col{width:calc(33.3333333333% - 21.3333333px)}}.u-display-none{display:none}ptc-preloader-section.min-height{min-height:150vh}@media only screen and (min-width: 1200px){.ms-mobile-select{display:none}}.ms-mobile-select.ms-show{position:fixed}.light-font{color:var(--color-white)}.light-font *{color:var(--color-white)}ptc-nav-submenu{margin-top:6px;border-left:2px solid transparent;border-right:2px solid transparent;border-bottom:2px solid transparent}ptc-nav-submenu:focus-visible,ptc-nav-submenu:focus{margin-top:4px;border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}a{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);text-decoration-line:underline;color:var(--color-hyperlink);transition:color var(--ptc-transition-medium) var(--ptc-ease-out);font-weight:var(--ptc-font-weight-bold)}a:visited{color:var(--color-blue-10)}a:active,a:visited:active{transition:none;color:var(--color-blue-09)}a:hover,a:visited:hover{color:var(--color-blue-08)}a.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}a:focus-visible{outline:5px solid #003DD6 !important;outline-offset:0px !important;border-radius:var(--ptc-border-radius-standard)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section 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,.podcast-cta-section 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,.podcast-cta-section a,.vjs-social-share-links 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,.podcast-cta-section 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,.podcast-cta-section 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,.podcast-cta-section a,.vjs-social-share-links 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,.podcast-cta-section a,.vjs-social-share-links a):active,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section 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,.podcast-cta-section a,.vjs-social-share-links a):active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section 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,.podcast-cta-section a,.vjs-social-share-links a):active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links 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,.podcast-cta-section a,.vjs-social-share-links a):hover,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section 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,.podcast-cta-section a,.vjs-social-share-links a):hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section 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,.podcast-cta-section a,.vjs-social-share-links a):hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links 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,.podcast-cta-section 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,.podcast-cta-section 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,.podcast-cta-section a,.vjs-social-share-links 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,.podcast-cta-section 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,.podcast-cta-section 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,.podcast-cta-section a,.vjs-social-share-links 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)}.light-links .podcast-cta-section a,.background-grey-10 .podcast-cta-section a,.background-plm-grey .podcast-cta-section a{border:2px solid transparent}.light-links .podcast-cta-section a:focus-visible,.background-grey-10 .podcast-cta-section a:focus-visible,.background-plm-grey .podcast-cta-section a:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.ptc-link{color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link:hover{color:var(--color-green-06)}.ptc-link:visited{color:var(--color-gray-10)}.ptc-link:active,.ptc-link:visited:active{transition:none;color:var(--color-green-06)}.ptc-link:hover,.ptc-link:visited:hover{color:var(--color-green-06)}.ptc-link-dark{color:var(--color-white);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link-dark:hover{color:var(--color-green-06)}.ptc-link-dark:visited{color:var(--color-white)}.ptc-link-dark:active,.ptc-link-dark:visited:active{transition:none;color:var(--color-green-06)}.ptc-link-dark:hover,.ptc-link-dark:visited:hover{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}@media only screen and (min-width: 992px){:host(:not(.png-jumbotron):not(.text-jumbotron):not(.gif-jumbotron):not(.blog-jumbotron)) .content-container{padding-top:20px;padding-bottom:16px}}.parent{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-column-gap:0px;grid-row-gap:0px;position:relative;z-index:1}.hp-adjustments{background-color:var(--color-black);height:auto;min-height:640px !important;max-height:-webkit-fill-available}@media (min-height: 640px){.hp-adjustments{min-height:72vh !important}}.hp-adjustments .div1{grid-area:1/1/3/2;min-height:300px}.hp-adjustments .div1.hidden{display:none}.hp-adjustments .div2{display:flex}.hp-adjustments .bg-overlay{background:linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 20%), linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%) !important}@media only screen and (min-width: 992px){.hp-adjustments .div1{grid-area:1/1/2/2;min-height:unset}.hp-adjustments .bg-overlay{background:linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 20%), linear-gradient(90deg, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%) !important}}.hp-adjustments .div1,.hp-adjustments .main-content-items{transition:opacity ease-out 250ms;opacity:1}.hp-adjustments.transitioning .div1,.hp-adjustments.transitioning .main-content-items{opacity:0}.div1{grid-area:1/1/2/2;min-height:300px}.div1.hidden{display:none}.mobile-media-image{display:flex;justify-content:center;align-items:center}@media only screen and (min-width: 992px){.mobile-media-image{display:none}}.gif-bg{background-color:#F3F3F3}.gif-bg img{width:100%;height:auto}@media only screen and (min-width: 768px){.gif-bg img{width:auto}}.video-ratio{position:relative;overflow:hidden;height:100%}.div2{grid-area:2/1/3/2;position:relative}.bg-overlay{position:absolute;width:100%;height:100%;top:0;left:0}.content-layout{display:flex;flex-direction:column}@media only screen and (min-width: 992px){.content-layout{flex-direction:row}}.content-layout.hp-container{width:100%;margin-top:120px;margin-bottom:120px}@media screen and (min-width: 768px) and (max-width: 992px){.content-layout.hp-container{max-width:720px;margin-left:unset;margin-top:160px;margin-bottom:160px}}@media only screen and (min-width: 1200px){.content-layout.hp-container{width:1136px}}@media only screen and (min-width: 1440px){.content-layout.hp-container{width:1200px}}.content-layout.hp-container .gap-adjustment{margin-bottom:unset}.content-layout.blog-container{padding-bottom:48px}@media only screen and (min-width: 768px){.content-layout.blog-container{padding-bottom:100px}}@media only screen and (min-width: 992px){.content-layout.blog-container{gap:43px;padding-top:75px}.content-layout.blog-container max-width-container{width:50%}.content-layout.blog-container div.desktop-media-image{width:50%}}.content-layout.blog-container .gap-adjustment{gap:var(--ptc-element-spacing-07);margin-bottom:unset}.gap-adjustment{gap:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-07)}@media only screen and (min-width: 992px){.gap-adjustment{gap:var(--ptc-element-spacing-07)}}.text-adjustment{justify-content:center}.desktop-media-image{width:40%;display:none}@media only screen and (min-width: 992px){.desktop-media-image{display:block}}.desk-gif-adjustment{z-index:3;display:none;justify-content:center;align-items:center}@media only screen and (min-width: 992px){.desk-gif-adjustment{display:flex}}.desk-gif-adjustment img{width:100%}@media only screen and (min-width: 992px){.parent{grid-template-columns:1fr;grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;min-height:500px;position:relative}.div1{grid-area:1/1/2/2;min-height:unset}.div2{grid-area:1/1/2/2;align-self:center;position:unset}}:host(.text-jumbotron) .parent{min-height:120px;padding:48px 0 24px 0}:host(.text-jumbotron) .parent .text-adjustment{margin-bottom:0;margin-top:20px}:host(.png-jumbotron) .desktop-media-image,:host(.png-jumbotron) .mobile-media-image{position:relative}:host(.png-jumbotron) .desktop-media-image .media-image-wrapper,:host(.png-jumbotron) .mobile-media-image .media-image-wrapper{height:100%;width:100%;display:flex;align-items:center;justify-content:center}:host(.png-jumbotron) ::slotted(ptc-svg-btn){position:absolute;left:50% !important;top:50% !important;transform:translate(-50%, -50%) !important}@media only screen and (min-width: 992px){:host(.png-jumbotron) max-width-container{box-sizing:border-box;padding-right:2rem}}:host(.blog-jumbotron) #header-blog-author{display:flex;align-items:center;gap:12px;margin-bottom:var(--ptc-layout-spacing-04)}:host(.blog-jumbotron) #header-blog-author .image{width:48px;height:48px;border-radius:var(--ptc-border-radius-circle)}:host(.blog-jumbotron) #header-blog-author .image img{width:100%;height:100%;border-radius:var(--ptc-border-radius-circle);object-fit:cover;object-position:center}:host(.blog-jumbotron) .blog-author-name{color:inherit;text-decoration:none;font-size:inherit;font-weight:inherit;position:relative}:host(.blog-jumbotron) .blog-author-name:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:16px;margin:-16px}:host(.blog-jumbotron) .blog-author-name:hover{color:inherit;cursor:pointer;text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:var(--color-green-07);text-decoration-thickness:2px;text-underline-offset:4px}:host(.blog-jumbotron) .blog-author-name:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}:host(.blog-jumbotron) .image-container{background:white}@media only screen and (min-width: 992px){:host(.blog-jumbotron) .image-container{display:none}}:host(.blog-jumbotron) .desktop-media-image,:host(.blog-jumbotron) .mobile-media-image{position:relative}:host(.blog-jumbotron) .desktop-media-image .media-image-wrapper,:host(.blog-jumbotron) .mobile-media-image .media-image-wrapper{height:100%;max-height:360px;width:100%;display:flex;align-items:center;justify-content:center}:host(.blog-jumbotron) .desktop-media-image .media-image-wrapper ptc-picture,:host(.blog-jumbotron) .mobile-media-image .media-image-wrapper ptc-picture{width:100%;border-radius:var(--ptc-border-radius-standard)}:host(.blog-jumbotron) .desktop-media-image{display:none}:host(.blog-jumbotron) .desktop-media-image ptc-picture{height:100%;max-height:360px}@media only screen and (min-width: 992px){:host(.blog-jumbotron) .desktop-media-image{display:flex;align-items:center}}:host(.blog-jumbotron) .mobile-media-image{margin:75px 24px 32px 24px;display:flex}:host(.blog-jumbotron) .mobile-media-image ptc-picture{height:360px}@media only screen and (min-width: 992px){:host(.blog-jumbotron) .mobile-media-image{display:none}}.dl-img-wrap{position:relative;width:100%;height:100%}:host(.dark-video-jumbotron) .mobile-modal-play-btn ::slotted(ptc-svg-btn),:host(.light-video-jumbotron) .mobile-modal-play-btn ::slotted(ptc-svg-btn),:host(.light-jumbotron) .mobile-modal-play-btn ::slotted(ptc-svg-btn),:host(.dark-jumbotron) .mobile-modal-play-btn ::slotted(ptc-svg-btn){left:50% !important;top:50% !important;transform:translate(-50%, -50%) !important}ptc-info-tile:focus-visible{outline:3px solid var(--color-blue-07);outline-offset:2px}";
+
+const PtcJumbotron = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.jumbotronType = 'light';
+    this.hasPopupVideo = false;
+    this.mainTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur';
+    this.subTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet';
+    this.pngSrc = undefined;
+    this.pngImgStyles = "";
+    this.gifSrc = undefined;
+    this.bgVideoSrc = undefined;
+    this.bgVideoPosterSrc = undefined;
+    this.bgSrc = undefined;
+    this.isIframe = false;
+    this.isHomepage = false;
+    this.playButtonTitle = undefined;
+    this.pauseButtonTitle = undefined;
+    this.buttonLocation = undefined;
+    this.buttonTabIndex = 0;
+    this.contentBackground = undefined;
+    this.contentColor = undefined;
+    this.textAlign = 'left';
+    this.isMobile = undefined;
+    this.isTransitioning = undefined;
+    this.blogAuthorImage = "";
+    this.blogAuthorImageAlt = "";
+    this.blogAuthorName = "";
+    this.blogAuthorQueryHref = "";
+    this.blogAuthorQueryTarget = "";
+    this.hasCountdown = false;
+    this.styles = undefined;
+    this.defer = undefined;
+    this.hasCtaSlot = undefined;
+  }
+  componentWillLoad() {
+    this.hasCtaSlot = !!this.el.querySelector('[slot="j-cta"]');
+  }
+  handleResize() {
+    this.getContentBackground();
+    //this.adjustJumbotronHeight();
+  }
+  connectedCallback() {
+    this.getContentBackground();
+  }
+  componentDidLoad() {
+    //this.adjustJumbotronHeight();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    let mediaElement;
+    switch (this.jumbotronType) {
+      case 'png':
+        mediaElement = (index.h("div", { class: "mobile-media-image" }, index.h("div", { class: "media-image-wrapper" }, index.h("ptc-picture", { src: this.pngSrc }), this.hasPopupVideo && this.isMobile ? index.h("slot", { name: "video" }) : null)));
+        break;
+      case 'blog':
+        mediaElement = (index.h("div", { class: "mobile-media-image" }, index.h("div", { class: "media-image-wrapper" }, index.h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" }))));
+        break;
+      case 'gif':
+        mediaElement = (index.h("div", { class: "mobile-media-image gif-bg" }, index.h("img", { src: this.gifSrc })));
+        break;
+      case 'dark-video':
+      case 'light-video':
+        mediaElement = (index.h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex, defer: this.defer, posterSrc: this.bgVideoPosterSrc }, ' ', this.hasPopupVideo && this.isMobile ? (index.h("div", { class: "mobile-modal-play-btn" }, ' ', index.h("slot", { name: "video" }))) : null));
+        break;
+      case 'dark':
+      case 'light':
+        mediaElement = (index.h("div", { class: 'dl-img-wrap' }, index.h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" }), this.hasPopupVideo && this.isMobile ? (index.h("div", { class: "mobile-modal-play-btn" }, ' ', index.h("slot", { name: "video" }))) : null));
+        break;
+      default:
+        mediaElement = index.h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
+    }
+    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, index.h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), index.h("div", { class: "div2 content-container" }, index.h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), index.h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage, 'blog-container': (this.jumbotronType === "blog") } }, index.h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, index.h("slot", { name: "breadcrumb" }), index.h("span", { class: "main-content-items" }, index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("slot", { name: "main-title" }), index.h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (index.h("div", null, index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (index.h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' || this.jumbotronType === 'blog' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left', "seo-compatibility-mode": true }, index.h("p", { innerHTML: this.subTitle, style: { margin: '0' } }), index.h("p", { style: { margin: '0' } }, index.h("slot", { name: "blog-date" })), this.jumbotronType === 'blog' && index.h("div", null, index.h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), index.h("ptc-spacer", { breakpoint: 'small', size: 'small' }), index.h("div", { id: "header-blog-author", slot: "blog-author" }, index.h("div", { class: "image" }, index.h("img", { alt: this.blogAuthorImageAlt, src: this.blogAuthorImage })), index.h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, index.h("a", { class: "blog-author-name mf-listen", tabindex: "0", href: this.blogAuthorQueryHref, target: this.blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this.blogAuthorName)))))), this.hasCtaSlot && (index.h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, index.h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? index.h("slot", { name: "video" }) : null, this.hasCountdown ? index.h("slot", { name: "countdown" }) : null, this.jumbotronType === 'png' ? (index.h("div", { class: "desktop-media-image" }, index.h("div", { class: "media-image-wrapper" }, index.h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? index.h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (index.h("div", { class: "desktop-media-image desk-gif-adjustment" }, index.h("img", { src: this.gifSrc }))) : null, this.jumbotronType === 'blog' ? (index.h("div", { class: "desktop-media-image" }, index.h("div", { class: "media-image-wrapper" }, index.h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
+  }
+  getCssClassMap() {
+    return {
+      // [this.imageZIndex] : true
+      'text-jumbotron': this.jumbotronType === 'text' ? true : false,
+      'png-jumbotron': this.jumbotronType === 'png' ? true : false,
+      'blog-jumbotron': this.jumbotronType === 'blog' ? true : false,
+      'gif-jumbotron': this.jumbotronType === 'gif' ? true : false,
+      'dark-video-jumbotron light-links': this.jumbotronType === 'dark-video' ? true : false,
+      'light-video-jumbotron': this.jumbotronType === 'light-video' ? true : false,
+      'dark-jumbotron light-links': this.jumbotronType === 'dark' ? true : false,
+      'light-jumbotron': this.jumbotronType === 'light' ? true : false,
+    };
+  }
+  getContentBackground() {
+    if (window.innerWidth < 992) {
+      switch (this.jumbotronType) {
+        case 'light':
+        case 'light-video':
+        case 'png':
+          this.contentBackground = 'var(--color-white)';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'var(--color-gray-09)';
+          this.contentColor = 'var(--color-gray-01)';
+          break;
+        case 'blog':
+          this.contentBackground = 'white';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        default:
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
+      }
+      this.isMobile = true;
+    }
+    else {
+      switch (this.jumbotronType) {
+        case 'light':
+        case 'light-video':
+        case 'png':
+          this.contentBackground = 'linear-gradient(90.19deg, rgba(255, 255, 255, 0.9) 62.55%, rgba(228, 231, 233, 0) 99.86%)';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'linear-gradient(90deg, rgba(0, 0, 0, 0.63) 52.42%, rgba(40, 47, 53, 0) 100%)';
+          this.contentColor = 'var(--color-gray-01)';
+          break;
+        case 'gif':
+          this.contentBackground = '#F3F3F3';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        case 'blog':
+          this.contentBackground = 'white';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        default:
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
+      }
+      this.isMobile = false;
+    }
+  }
+  get el() { return index.getElement(this); }
+};
+PtcJumbotron.style = ptcJumbotronCss;
+
+exports.ptc_jumbotron = PtcJumbotron;

package/dist/cjs/ptc-para.cjs.entry.js

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-63ddc79c.js');
+const utils = require('./utils-ad441b07.js');
+
+const ptcParaCss = "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{position:relative;z-index:1}:host .tooltip-enabled{position:relative}:host(.white){color:var(--color-white)}:host(.z-1){z-index:1}:host(.z-2){z-index:2}:host(.z-3){z-index:3}:host(.z-99){z-index:99}:host(.z-999){z-index:999}:host(.z-auto){z-index:auto}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.primary-green{color:var(--color-green-06)}p.gray-darker{color:var(--color-gray-11)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.htmlquote-para{font-size:var(--ptc-font-size-small)}@media only screen and (min-width: 992px){p.htmlquote-para{font-size:var(--ptc-font-size-large)}}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-8 ::slotted(a){font-weight:var(--ptc-font-weight-extrabold) !important}p.w-9{font-weight:var(--ptc-font-weight-black)}p.w-9 ::slotted(a){font-weight:var(--ptc-font-weight-black) !important}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-p{line-height:var(--ptc-line-height-p)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.left{text-align:left}p.right{text-align:right}p.center{text-align:center}p.justify{text-align:justify}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}p.ellipsis-boxing{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}p.line-clamp-title{display:-webkit-box !important;-webkit-box-orient:vertical;overflow:hidden}@media (max-width: 768px){:host(.hide-tooltip-on-mobile) .line-clamp-title{-webkit-line-clamp:initial !important}}";
+
+const PtcPara = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fontSize = 'x-small';
+    this.fontWeight = 'w-4';
+    this.paraStyle = 'default';
+    this.paraColor = 'primary-grey';
+    this.paraLineH = 'line-height-normal';
+    this.paraMargin = undefined;
+    this.paraAlign = undefined;
+    this.ellipsisLineCutoff = undefined;
+    this.paraZIndex = undefined;
+    this.styles = undefined;
+    this.seoCompatibilityMode = false;
+    this.tooltipZIndex = 'auto';
+    this.tooltipPosition = 'bottom';
+    this.tooltipTheme = 'standard';
+    this.enableTooltip = false;
+    this.maxChars = undefined;
+    this.maxLines = undefined;
+    this.hideTooltipOnMobile = false;
+    this.ismob = undefined;
+    this.noOverflow = false;
+    this.tooltipWidth = 'default';
+  }
+  // Tooltip Properties ends
+  render() {
+    if (this.seoCompatibilityMode) {
+      utils.seoSlotReset(this.el);
+    }
+    return this.standardRender();
+  }
+  //tooltip code
+  getSortedText(content) {
+    if (!this.enableTooltip)
+      return;
+    const trimmedContent = content.trim();
+    const shouldTruncate = (trimmedContent.length > this.maxChars) && !this.maxLines;
+    return shouldTruncate ? `${trimmedContent.slice(0, this.maxChars).trimEnd()}\u00A0\u2026` : trimmedContent;
+  }
+  componentDidLoad() {
+    if (this.hideTooltipOnMobile) {
+      this.el.classList.add('hide-tooltip-on-mobile');
+    }
+    this.el.addEventListener('mouseenter', () => { this.toggleTitleTooltip(true); });
+    this.el.addEventListener('mouseleave', () => { this.toggleTitleTooltip(false); });
+    if (this.enableTooltip) {
+      let paraContent = this.el.innerText || this.el.textContent;
+      this.tooltipText = paraContent.trim();
+      this.el.innerText = this.getSortedText(paraContent);
+    }
+  }
+  toggleTitleTooltip(show) {
+    const tooltipClass = 'tooltip-box';
+    const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
+    const text = this.el.shadowRoot.querySelectorAll('.line-clamp-title');
+    let maxLinesShowCheck = false;
+    if (text) {
+      text.forEach(t => {
+        maxLinesShowCheck = t.scrollHeight > t.clientHeight;
+      });
+    }
+    const ifCharExceeds = this.maxChars ? (this.tooltipText.length > this.maxChars) && !this.maxLines : false;
+    const ifLinesExceeds = this.maxLines && maxLinesShowCheck;
+    if (show && this.enableTooltip) {
+      if (((!existingTooltip && ifCharExceeds) || (!existingTooltip && ifLinesExceeds)) && !this.noOverflow) {
+        const tooltipMarkup = document.createElement('div');
+        tooltipMarkup.className = tooltipClass;
+        tooltipMarkup.innerText = this.tooltipText;
+        tooltipMarkup.style.zIndex = String(this.tooltipZIndex); // Ensures zIndex is a string
+        tooltipMarkup.classList.add(this.tooltipPosition, this.tooltipTheme, this.tooltipWidth);
+        if (this.hideTooltipOnMobile) {
+          tooltipMarkup.classList.add('hide-tooltip-mobile');
+        }
+        this.el.appendChild(tooltipMarkup);
+      }
+    }
+    else {
+      existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
+    }
+  }
+  //tooltip code ends
+  standardRender() {
+    const classMap = this.getCssClassMap();
+    const colorClass = this.addWhiteClass();
+    const cutOff = this.getLineCuttoff();
+    return (index.h(index.Host, { class: `${colorClass} ${this.paraZIndex} trunc-text` }, this.styles && index.h("style", null, this.styles), index.h("p", { class: classMap, part: "part-para", style: cutOff }, index.h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.fontSize]: true,
+      [this.fontWeight]: true,
+      [this.paraStyle]: true,
+      [this.paraMargin]: !!this.paraMargin ? true : false,
+      [this.paraColor]: true,
+      [this.paraLineH]: true,
+      [this.paraAlign]: !!this.paraAlign ? true : false,
+      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+      ['line-clamp-title']: this.maxLines && this.maxLines > 0, //tooltip code,
+    };
+  }
+  //WEB-2392
+  addWhiteClass() {
+    if (this.paraColor == 'white') {
+      return {
+        [this.paraColor]: true,
+      };
+    }
+  }
+  getLineCuttoff() {
+    const lineClamp = this.ellipsisLineCutoff > 0 ? this.ellipsisLineCutoff : this.maxLines;
+    return lineClamp > 0 ? { '-webkit-line-clamp': `${lineClamp}` } : {};
+  }
+  get el() { return index.getElement(this); }
+};
+PtcPara.style = ptcParaCss;
+
+exports.ptc_para = PtcPara;

package/dist/cjs/ptc-picture.cjs.entry.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-63ddc79c.js');
+const interfaces = require('./interfaces-574e6df7.js');
+
+const ptcPictureCss = "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;overflow:hidden}:host .inline{display:inline}:host .inline-block{display:inline-block}:host .block{display:block}:host(.relative){position:relative}:host(.static){position:static}:host(.absoltue){position:absolute}img{max-width:100%}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-pill{border-radius:var(--ptc-border-radius-pill)}.radius-circle{border-radius:var(--ptc-border-radius-circle)}.is-full-height{height:100%}.is-full-width{width:100%}:host(.left){text-align:left}:host(.right){text-align:right}:host(.center){text-align:center}";
+
+const PtcPicture = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.src = undefined;
+    this.alt = 'image';
+    this.sizeXs = '510x340';
+    this.sizeSm = '1240x496';
+    this.sizeMd = '1366x500';
+    this.sizeLg = '1920x1080';
+    this.disableResize = false;
+    this.oldSrc = undefined;
+    this.imagePosition = 'static';
+    this.borderRadius = undefined;
+    this.height = undefined;
+    this.width = undefined;
+    this.objectFit = 'cover';
+    this.isFullHeight = false;
+    this.isFullWidth = false;
+    this.styles = undefined;
+    this.imageAlignment = 'left';
+    this.maxWidth = undefined;
+    this.displayImage = 'block';
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentWillLoad() {
+    if (this.disableResize) {
+      this.sizeXs = undefined;
+      this.sizeSm = undefined;
+      this.sizeMd = undefined;
+      this.sizeLg = undefined;
+    }
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+  //lazy-loading
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadImages = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = this.el.shadowRoot.querySelector('img');
+            image.src = this.setResponsiveBg();
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      let tempImg = this.el.shadowRoot.querySelector('img');
+      if (tempImg) {
+        lazyLoadImages.observe(tempImg);
+      }
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => {
+        const image = this.el.shadowRoot.querySelector('img');
+        image.src = this.setResponsiveBg();
+        image.onload = () => {
+          image.removeAttribute('data-src');
+          console.log('loaded fallback');
+        };
+      }, 5000);
+    }
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      if (elData !== null) {
+        return elData;
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const classMapHost = this.getCssClassMapHost();
+    return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), index.h("slot", null)));
+  }
+  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 = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
+      env = interfaces.ResponsivePictureVariables.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';
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.borderRadius]: this.borderRadius ? true : false,
+      [this.objectFit]: true,
+      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
+      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true,
+      [this.displayImage]: true
+    };
+  }
+  getCssClassMapHost() {
+    return {
+      [this.imagePosition]: true,
+      [this.imageAlignment]: true,
+    };
+  }
+  get el() { return index.getElement(this); }
+};
+PtcPicture.style = ptcPictureCss;
+
+exports.ptc_picture = PtcPicture;