@ptcwebops/ptcw-design 1.2.0 → 1.2.1

package/dist/esm/max-width-container_5.entry.js

@@ -0,0 +1,444 @@
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-4afc9d28.js';
+import { a as ResponsiveBgVariables } from './interfaces-c1c73092.js';
+
+const maxWidthContainerCss = ":host{display:block}:host(.left){margin:auto auto auto 0}:host(.right){margin:auto 0 auto auto}:host(.center){margin:0 auto}";
+
+const MaxWidthContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.maxWidth = undefined;
+    this.breakpoint = 768;
+    this.contentAlign = 'center';
+  }
+  componentDidLoad() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.contentAlign]: true,
+    };
+  }
+  handleResize() {
+    // const selectedContainer = this.el.querySelector('.max-width-container');
+    if (this.el) {
+      if (window.innerWidth >= this.breakpoint) {
+        this.el.style.maxWidth = `${this.maxWidth}px`;
+      }
+      else {
+        this.el.style.maxWidth = 'initial';
+      }
+    }
+  }
+  get el() { return getElement(this); }
+};
+MaxWidthContainer.style = maxWidthContainerCss;
+
+const ptcBackgroundVideoCss = ":host{display:block;position:relative}:host video{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100;object-fit:cover}:host .video-overlay{z-index:1;display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0.8;background-image:linear-gradient(270deg, rgba(30, 38, 38, 0) 26%, #1e2626)}:host(.legacy){display:block;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host(.legacy) video{object-fit:cover;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden}";
+
+const PtcBackgroundVideo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.videoSrc = undefined;
+    this.posterSrc = undefined;
+    this.overlay = true;
+    this.type = 'default';
+  }
+  render() {
+    return (h(Host, { class: this.type }, h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }), this.overlay
+      ? h("div", { class: "video-overlay" })
+      : "", this.type == 'default'
+      ? h("slot", null)
+      : ""));
+  }
+};
+PtcBackgroundVideo.style = ptcBackgroundVideoCss;
+
+const ptcImgCss = ".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-large{border-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) {
+    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';
+  }
+  /**
+   * 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 (h(Host, null, h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? 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(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 = 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;
+
+const ptcModalCss = ":host{display:block}.wrapper{position:absolute;width:100vw;height:100%;top:0;left:0;z-index:3000;display:none}.wrapper.fixed{position:fixed}.wrapper .modal-popup{margin:7.5rem auto 1rem;background-color:var(--color-white);box-shadow:var(--ptc-shadow-large);max-width:22.5625rem;width:80%;display:flex;flex-direction:column;align-items:flex-end;align-content:flex-end;z-index:3020;transform:translateY(-100%)}@media only screen and (min-width: 992px){.wrapper .modal-popup{max-width:29.125rem}}.wrapper .modal-popup.md{max-width:44.125rem}.wrapper .modal-popup.lg{max-width:56.25rem}.wrapper .modal-popup.xl{max-width:64.0625rem}.wrapper .modal-popup .modal-body{width:100%}.wrapper .modal-popup .modal-body iframe{opacity:0;overflow:hidden;width:100%;border:0;transition:opacity var(--ptc-ease-inout) var(--ptc-transition-medium)}.wrapper .modal-popup .modal-body iframe.ready{opacity:1}.wrapper .modal-popup .modal-body.frame{overflow:hidden}.wrapper .modal-popup .modal-body.html{overflow:hidden}.wrapper .modal-popup .close{margin-right:var(--ptc-element-spacing-03);margin-top:var(--ptc-element-spacing-03)}.wrapper .modal-popup.shadow-scroller{max-height:756px}.wrapper .modal-popup.shadow-scroller .modal-header{transition:box-shadow ease-in-out 250ms;position:relative;min-height:57px;border-bottom:1px solid var(--color-gray-02);width:100%}.wrapper .modal-popup.shadow-scroller .modal-header .close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);margin:0}.wrapper .modal-popup.shadow-scroller .modal-body{min-height:200px;overflow-x:hidden;overflow-y:auto}.wrapper .modal-popup.shadow-scroller .modal-footer{transition:box-shadow ease-in-out 250ms;width:100%;min-height:72px;border-top:1px solid var(--color-gray-02);padding-top:1rem}.wrapper .modal-popup.shadow-scroller.scroll-top .modal-header{box-shadow:0px 4px 12px rgba(0, 0, 0, 0.12)}.wrapper .modal-popup.shadow-scroller.scroll-bottom .modal-footer{box-shadow:0px -8px 12px rgba(0, 0, 0, 0.12)}.wrapper.show{display:flex;align-items:flex-start}.wrapper.show .modal-popup{transform:translateY(0)}.wrapper.show .modal-popup.rounded{border-radius:var(--ptc-border-radius-standard)}.overlay{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:3010;display:block;background-color:rgba(0, 0, 0, 0.6)}";
+
+const PtcModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closed = createEvent(this, "closed", 7);
+    this.opened = createEvent(this, "opened", 7);
+    this.iframeUrl = undefined;
+    this.size = 'sm';
+    this.show = false;
+    this.overlay = true;
+    this.fixed = false;
+    this.closeOnBlur = false;
+    this.rounded = false;
+    this.showHeaderFooter = false;
+    this.overlayHeight = undefined;
+    this.bodyOverflowSetting = undefined;
+  }
+  fireOnClosed(modal) {
+    this.closed.emit(modal);
+  }
+  fireOnOpened(modal) {
+    this.opened.emit(modal);
+  }
+  componentWillLoad() {
+    let body = document.querySelector('body');
+    this.bodyOverflowSetting = {
+      //overflow: body.style['overflow'],
+      overflowY: body.style['overflowY'],
+      overflowX: body.style['overflowX'],
+    };
+  }
+  componentWillRender() {
+    let body = document.querySelector('body');
+    if (body) {
+      if (this.show) {
+        //body.style['overflow'] = 'hidden';
+        body.style['overflowY'] = 'scroll';
+        body.style['overflowX'] = 'hidden';
+      }
+      else {
+        //body.style['overflow'] = this.bodyOverflowSetting.overflow;
+        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
+        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
+      }
+    }
+  }
+  componentDidLoad() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    if (this.showHeaderFooter) {
+      this.handleScroll();
+    }
+  }
+  componentDidUpdate() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    else {
+      this.fireOnClosed(this);
+    }
+  }
+  resizeIframe(e) {
+    let iFrame = e.target;
+    setTimeout(() => {
+      try {
+        if (iFrame.contentDocument) {
+          iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
+        }
+        else {
+          iFrame.height = '616px'; //default
+          iFrame.removeAttribute('scrolling');
+        }
+      }
+      catch (error) {
+        console.log(error);
+        iFrame.height = '616px'; //default
+        iFrame.removeAttribute('scrolling');
+      }
+      iFrame.classList.add('ready');
+    }, 50);
+  }
+  handleScroll() {
+    let modal = this.el.shadowRoot.querySelector('.shadow-scroller');
+    if (modal) {
+      let body = modal.querySelector('.modal-body');
+      var height = body.clientHeight;
+      var scrollHeight = body.scrollHeight;
+      var scrollTop = body.scrollTop;
+      var offset = body.offsetHeight;
+      if (height < scrollHeight) { //has scrollbar
+        if (scrollTop > 0) { //can scroll up
+          modal.classList.add('scroll-top');
+        }
+        else {
+          modal.classList.remove('scroll-top');
+        }
+        if (offset + scrollTop < scrollHeight) { //can scroll down
+          modal.classList.add('scroll-bottom');
+        }
+        else {
+          modal.classList.remove('scroll-bottom');
+        }
+      }
+    }
+  }
+  close() {
+    this.show = false;
+  }
+  render() {
+    let content;
+    let overlay;
+    let type = this.iframeUrl ? 'frame' : 'html';
+    let closebtn = (h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => { e.preventDefault(); this.close(); } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { d: "M1 1L13 13", stroke: "black" }), h("path", { d: "M13 1L1 13", stroke: "black" })))));
+    if (this.iframeUrl) {
+      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
+    }
+    else {
+      if (this.showHeaderFooter) {
+        content = (h("slot", { name: "body" }));
+      }
+      else {
+        content = (h("slot", null));
+      }
+    }
+    if (this.overlay) {
+      if (this.closeOnBlur) {
+        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
+      }
+      else {
+        overlay = h("div", { class: "overlay" });
+      }
+    }
+    return (h(Host, null, h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
+      h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
+      h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
+      h("div", { class: "modal-footer" }, h("slot", { name: "footer" }))
+    ] : [
+      closebtn,
+      h("div", { class: "modal-body" }, content)
+    ]))));
+  }
+  get el() { return getElement(this); }
+};
+PtcModal.style = ptcModalCss;
+
+const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
+    <g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">
+        <path id="Line_446" d="M0 0v39.486" class="cls-1" data-name="Line 446"></path>
+        <path id="Line_447" d="M0 0h40" class="cls-1" data-name="Line 447"></path>
+        <path id="Line_448" d="M0 33.592V0" class="cls-1" data-name="Line 448"></path>
+        <path id="Line_449" d="M23.994 0H0" class="cls-1" data-name="Line 449"></path>
+        <path id="Line_450" d="M0 0l17.596 17.596" class="cls-2" data-name="Line 450" transform="translate(187.229 147.226)"></path>
+        <path id="Line_451" d="M0 7.198L7.199 0" class="cls-2" data-name="Line 451" transform="translate(197.55 147.312)"></path>
+        <path id="Path_114" d="M0 7.2L7.2 0" class="cls-2" data-name="Path 114" transform="translate(187.313 157.549)"></path>
+    </g>
+</svg>`;
+
+const arrowSvgLeft = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_494_37)">
+<circle cx="24" cy="22" r="20" fill="white"/>
+<path d="M23.1444 16L23.1444 20.5762L31 20.5762L31 23.4239L23.1444 23.4239L23.1444 28L17 21.9669L23.1444 16Z" class="arrow"/>
+</g>
+<defs>
+<filter id="filter0_d_494_37" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_37"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_37" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+
+const arrowSvgRight = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_494_34)">
+<circle cx="24" cy="22" r="20" fill="white"/>
+<path d="M24.8556 16L24.8556 20.5762L17 20.5762L17 23.4239L24.8556 23.4239L24.8556 28L31 21.9669L24.8556 16Z" class="arrow"/>
+</g>
+<defs>
+<filter id="filter0_d_494_34" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_34"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_34" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+
+const backarrow = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 311 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M251.762,512L311,452.638,114.774,256,311,59.362,251.762,0,0,252.29Z"/>
+</svg>
+`;
+
+const play = `<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_241_171)">
+<circle cx="42" cy="38" r="36" fill="#1F2024"/>
+<circle cx="42" cy="38" r="35" stroke="#33A13C" stroke-width="2"/>
+</g>
+<path d="M58 38L34 51.8564L34 24.1436L58 38Z" fill="white"/>
+<defs>
+<filter id="filter0_d_241_171" x="0" y="0" width="84" height="84" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_241_171"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.270588 0 0 0 0 0.313726 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_241_171"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_241_171" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+
+const ptcSvgBtnCss = ":host{cursor:pointer}:host(.block){display:block}:host(.inline){display:inline}:host(.inline-block){display:inline-block}:host(.flex){display:flex}:host(:focus-visible){outline:none}:host(.backarrow){margin:8px 8px 0px -2px}:focus-visible{outline:none}.svg-close svg .cls-1,.svg-close svg .cls-2{fill:none;stroke-width:2px}.svg-close svg .cls-1{stroke:var(--color-gray-10);stroke-linecap:square}.svg-close svg .cls-2{stroke:var(--color-gray-10)}.svg-close svg path{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}.svg-close svg .cls-1:first-child{-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close svg .cls-1:nth-child(2){-webkit-transform:translate(175.5px, 174.985px);-ms-transform:translate(175.5px, 174.985px);transform:translate(175.5px, 174.985px)}.svg-close svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 141.393px);-ms-transform:translate(215.5px, 141.393px);transform:translate(215.5px, 141.393px)}.svg-close svg .cls-1:nth-child(4){-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close:hover svg .cls-1:first-child{-webkit-transform:translate(175.5px, 162px);-ms-transform:translate(175.5px, 162px);transform:translate(175.5px, 162px)}.svg-close:hover svg .cls-1:nth-child(2){-webkit-transform:translate(149px, 174.985px);-ms-transform:translate(149px, 174.985px);transform:translate(149px, 174.985px)}.svg-close:hover svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 174px);-ms-transform:translate(215.5px, 174px);transform:translate(215.5px, 174px)}.svg-close:hover svg .cls-1:nth-child(4){-webkit-transform:translate(152.5px, 135.5px);-ms-transform:translate(152.5px, 135.5px);transform:translate(152.5px, 135.5px)}.svg-close.svg-close-white .cls-1{stroke:var(--color-white)}.slider-left,.slider-right{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}.slider-left svg .arrow,.slider-right svg .arrow{fill:var(--color-gray-10)}.slider-left:hover svg .arrow,.slider-right:hover svg .arrow{fill:var(--color-green-06)}.back-arrow{display:inline-block;fill:none;stroke-width:30px;stroke:var(--color-gray-10);stroke-linecap:square;height:10px;width:20px;position:relative;top:1px;text-align:center}@media only screen and (max-width: 1024px) and (min-width: 576px){:host(.back-arrow){margin:8px 8px 16px -2px}}";
+
+const PtcSvgBtn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.svgName = 'close';
+    this.display = 'block';
+    this.zIndex = undefined;
+    this.styles = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, Object.assign({ class: classMap }, (this.zIndex !== undefined ? { style: { zIndex: this.zIndex } } : null)), this.styles && h("style", null, this.styles), !!this.svgName && this.svgName === 'close' ? h("div", { class: "svg-close", innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: "slider-left", innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: "slider-right", innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: "back-arrow", innerHTML: backarrow }) : null, !!this.svgName && this.svgName === 'play' ? h("div", { class: "play", innerHTML: play }) : null));
+  }
+  getCssClassMap() {
+    return {
+      [this.display]: true,
+    };
+  }
+};
+PtcSvgBtn.style = ptcSvgBtnCss;
+
+export { MaxWidthContainer as max_width_container, PtcBackgroundVideo as ptc_background_video, PtcImg as ptc_img, PtcModal as ptc_modal, PtcSvgBtn as ptc_svg_btn };

package/dist/esm/my-component.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8e63c32d.js';
+import { r as registerInstance, h } from './index-4afc9d28.js';
 import { f as format } from './utils-f937097d.js';
 
 const myComponentCss = ":host{display:block}";

package/dist/esm/ptc-accordion-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8e63c32d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4afc9d28.js';
 
 const hasSlot = (parentEl, slotName) => {
   return !!parentEl.querySelector(':scope > [slot="' + slotName + '"'); // cast boolean

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-8e63c32d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4afc9d28.js';
 
 const ptcAccordionCss = ":host{--ptc-accordion-item-body-max-height:100vh}";
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-8e63c32d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-4afc9d28.js';
 
 const ptcAnnouncementCss = ":host{display:block}.announcement{width:100%;position:relative;background-color:var(--color-gray-02);z-index:860;background-size:cover;background-repeat:repeat-x;border-top:3px solid var(--color-green-07);box-shadow:var(--ptc-shadow-medium);z-index:999;display:none}.visible{display:block}.content-wrapper{display:flex;padding:var(--ptc-element-spacing-03) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-05);margin:0 auto;align-items:center;justify-content:space-between;max-width:1200px}@media only screen and (min-width: 768px){.content-wrapper{padding:var(--ptc-element-spacing-03) var(--ptc-element-spacing-06)}}@media only screen and (min-width: 1200px){.content-wrapper{padding:var(--ptc-element-spacing-03) 15px var(--ptc-element-spacing-03) 15px;max-width:1170px;box-sizing:border-box}}@media screen and (min-width: 1400px){.content-wrapper{padding:var(--ptc-element-spacing-03) 0px var(--ptc-element-spacing-03) 0px;max-width:1200px}}.left-content{max-width:calc(100% - 76px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative}.title{font-family:Raleway;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);letter-spacing:var(--ptc-letter-spacing-dense);text-align:left;color:var(--color-gray-10);margin-bottom:var(--ptc-element-spacing-02);max-width:100%}.description{font-family:Raleway;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-regular);line-height:var(--ptc-line-height-densest);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;color:var(--color-gray-10);max-width:100%}.description div{display:inline-block;padding-right:var(--ptc-element-spacing-01);vertical-align:middle}.cta-link{color:var(--color-blue-07);font-size:var(--ptc-font-size-x-small);-webkit-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);-o-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);font-weight:var(--ptc-font-weight-bold);text-decoration:underline;display:inline-block;vertical-align:middle;cursor:pointer}.cta-link::before{content:\"\";position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1}.cta-link:link{color:var(--color-blue-07)}.cta-link:hover{color:var(--color-blue-08)}.cta-link:active{color:var(--color-gray-09)}.cta-link:focus{outline:2px solid var(--color-blue-07);outline-offset:0.25rem}.bar-close{max-width:36px;cursor:pointer;margin-left:var(--ptc-element-spacing-08);position:relative}.bar-close::before{content:\"\";position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1}@media only screen and (min-width: 992px){.left-content{flex-direction:row;max-width:calc(100% - 58px);flex:1 1 1032px}.bar-close{max-width:18px}.bar-close::before{width:34px;height:34px}.title{margin-right:var(--ptc-element-spacing-04);margin-bottom:0;flex:0 1 auto;max-width:248px}.title.max-title{max-width:unset !important;flex:2 1 560px}.description{flex:1 1 768px}}";
 

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

@@ -0,0 +1,133 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4afc9d28.js';
+
+const ptcBreadcrumbCss = ":host{display:block;margin-top:var(--ptc-element-spacing-05)}::slotted(*){transform:translate(-2px, -2px)}:host(.left){display:flex;justify-content:flex-start}:host(.center){display:flex;justify-content:center}:host(.right){display:flex;justify-content:flex-end}:host(.remove-top-margin){margin-top:0px !important}";
+
+const PtcBreadcrumb = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.position = undefined;
+    this.removeTopMargin = false;
+    this.color = 'white';
+    this.styles = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("list-item", { listType: "breadcrumb", flushBefore: true, "link-href": "https://www.ptc.com" }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: this.color })), h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.position]: !!this.position && this.position !== undefined ? true : false,
+      ['remove-top-margin']: this.removeTopMargin ? true : false,
+    };
+  }
+};
+PtcBreadcrumb.style = ptcBreadcrumbCss;
+
+const ptcJumbotronCss = ".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-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-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-reset{background-color:transparent !important}.u-white-overylay{background:rgba(242, 242, 242, 0.9)}.u-cursor-pointer{cursor:pointer}.u-clear{clear:both}@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}}.standard-list{list-style:none;margin-left:0;margin-bottom:20px;padding:0}.is-spaced-between{justify-content:space-between}.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:2rem;padding-bottom:2rem}@media only screen and (min-width: 992px){.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}.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}.u-flex-nowrap{flex-wrap:nowrap}.u-flex-wrap{flex-wrap:wrap}.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}.fef-two-column-two-media .has-col-gap-lg{grid-column-gap:var(--spacing-md)}@media only screen and (min-width: 992px){.fef-two-column-two-media .has-col-gap-lg{grid-column-gap:var(--spacing-lg)}}.fef-two-column-two-media .is-col-6-md{padding-bottom:3rem}.fef-two-column-two-media .is-col-6-md:last-child{padding-bottom:0rem}@media only screen and (min-width: 768px){.fef-two-column-two-media .is-col-6-md{padding-bottom:0rem}}ptc-icon-list.icon-top-align-list a{text-decoration:none;transition:color 0.3s ease;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-font-size-x-large);border-bottom:0.094rem solid var(--color-green-06);color:var(--color-gray-10)}ptc-icon-list.icon-top-align-list a:hover{color:var(--color-green-06)}@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%}}.product-tab ptc-title h3{font-size:20px !important;font-weight:900}@media only screen and (min-width: 1200px){.product-tab ptc-title h3{font-size:15px !important;font-weight:800}}.product-tab .is-grid{grid-column-gap:20px;grid-row-gap:12px}:host{display:block}.parent{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-column-gap:0px;grid-row-gap:0px;position:unset}.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}.video-ratio{position:relative;overflow:hidden;height:0;padding-bottom:100%}@media only screen and (min-width: 768px){.video-ratio{padding-bottom:75%}}@media only screen and (min-width: 992px){.video-ratio{padding-bottom:59.37%;max-height:500px}}@media only screen and (min-width: 1200px){.video-ratio{padding-bottom:39.67%}}@media only screen and (min-width: 1440px){.video-ratio{padding-bottom:33%}}.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}}.gap-adjustment{gap:var(--ptc-element-spacing-05)}.text-adjustment{justify-content:flex-start}@media only screen and (min-width: 992px){.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}@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}}ptc-svg-btn{position:absolute;left:50%;bottom:150%;transform:translate(-50%, 50%)}@media only screen and (min-width: 992px){ptc-svg-btn{left:70%;bottom:50%;transform:translate(0%, 50%)}}";
+
+const PtcJumbotron = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.jumbotronType = 'light';
+    this.popupVideo = undefined;
+    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.gifSrc = undefined;
+    this.bgVideoSrc = undefined;
+    this.bgSrc = undefined;
+    this.contentBackground = undefined;
+    this.contentColor = undefined;
+    this.textAlign = 'left';
+  }
+  handleResize() {
+    this.getContentBackground();
+  }
+  connectedCallback() {
+    this.getContentBackground();
+  }
+  componentDidLoad() {
+    if (!!this.popupVideo) {
+      const selectedBtn = this.el.shadowRoot.querySelector('#j-modal-btn');
+      const PtcModal = this.el.shadowRoot.querySelector('#j-modal');
+      console.log('selected btn: ' + selectedBtn + '; selected Modal: ' + PtcModal);
+      selectedBtn.addEventListener('click', () => {
+        PtcModal.show = true;
+      });
+    }
+  }
+  render() {
+    console.log('render');
+    const classMap = this.getCssClassMap();
+    let mediaElement;
+    switch (this.jumbotronType) {
+      case 'png':
+        mediaElement = (h("div", { class: "mobile-media-image" }, h("ptc-picture", { src: this.pngSrc })));
+        break;
+      case 'gif':
+        mediaElement = (h("div", { class: "mobile-media-image gif-bg" }, h("img", { src: this.gifSrc })));
+        break;
+      case 'dark-video':
+      case 'light-video':
+        mediaElement = h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc });
+        break;
+      default:
+        mediaElement = h("ptc-img", { "img-url": this.bgSrc });
+    }
+    return (h(Host, { class: classMap }, h("div", { class: "parent" }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: "ptc-container content-layout" }, h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-title", { type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "title-lines": "3", description: this.mainTitle, position: "bottom", styles: `.text-ellipsis{color: ${this.contentColor};}` })), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "7", description: this.subTitle, position: "bottom", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))), !!this.popupVideo
+      ? [
+        h("ptc-modal", { id: "j-modal", show: false, size: "lg", "iframe-url": this.popupVideo }),
+        h("ptc-svg-btn", { id: "j-modal-btn", "svg-name": "play", display: "block", "z-index": 2 }),
+      ]
+      : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
+  }
+  getCssClassMap() {
+    return {
+    // [this.imageZIndex] : true
+    };
+  }
+  getContentBackground() {
+    if (window.innerWidth < 992) {
+      switch (this.jumbotronType) {
+        case 'light':
+        case 'light-video':
+          this.contentBackground = '#F3F3F3';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'var(--color-gray-09)';
+          this.contentColor = 'var(--color-white)';
+          break;
+        default:
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
+      }
+    }
+    else {
+      switch (this.jumbotronType) {
+        case 'light':
+        case 'light-video':
+          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-white)';
+          break;
+        case 'gif':
+          this.contentBackground = '#F3F3F3';
+          this.contentColor = 'var(--color-gray-10)';
+          break;
+        default:
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
+      }
+    }
+  }
+  get el() { return getElement(this); }
+};
+PtcJumbotron.style = ptcJumbotronCss;
+
+export { PtcBreadcrumb as ptc_breadcrumb, PtcJumbotron as ptc_jumbotron };