npm - @ptcwebops/ptcw-design - Versions diffs - 2.1.9 → 2.2.0 - Mend

@ptcwebops/ptcw-design 2.1.9 → 2.2.0

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

Files changed (621) hide show

package/dist/cjs/ptc-back-to-top.cjs.entry.js CHANGED Viewed

@@ -2,45 +2,45 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.js');
 const ptcBackToTopCss = ":host{display:block}:host .back-to-top-button{position:fixed;bottom:140px;right:24px;width:64px;height:58px;border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-white);color:var(--color-gray-10);font-size:12px;font-weight:var(--ptc-font-weight-semibold);outline:none;cursor:pointer;transition:opacity 0.3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--ptc-shadow-small)}:host .back-to-top-button:hover{opacity:1}:host .arrow{margin-bottom:5px}";
-const PtcBackToTop = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.handleScroll = () => {
-      const scrollY = window.pageYOffset || document.documentElement.scrollTop;
-      this.showButton = scrollY > window.innerHeight * 1;
-    };
-    this.showButton = false;
-  }
-  componentDidLoad() {
-    window.addEventListener('scroll', this.handleScroll);
-  }
-  disconnectedCallback() {
-    window.removeEventListener('scroll', this.handleScroll);
-  }
-  handleClick() {
-    this.scrollToTop();
-  }
-  scrollToTop() {
-    if ('scrollBehavior' in document.documentElement.style) {
-      // Smooth scrolling is supported
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-    else {
-      // Fallback for browsers that do not support smooth scrolling
-      window.scrollTo(0, 0);
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, this.showButton && (index.h("button", { class: 'back-to-top-button', title: "Back to Top" }, index.h("span", { class: 'arrow' }, index.h("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M15.5248 11.625L8.9998 5.1L2.4748 11.625L0.112305 9.2625L8.9998 0.375L17.8873 9.2625L15.5248 11.625Z", fill: "#323B42" }))), index.h("span", { class: 'text' }, "Back to Top")))));
-  }
-};
+const PtcBackToTop = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.handleScroll = () => {
+      const scrollY = window.pageYOffset || document.documentElement.scrollTop;
+      this.showButton = scrollY > window.innerHeight * 1;
+    };
+    this.showButton = false;
+  }
+  componentDidLoad() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+  handleClick() {
+    this.scrollToTop();
+  }
+  scrollToTop() {
+    if ('scrollBehavior' in document.documentElement.style) {
+      // Smooth scrolling is supported
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+    else {
+      // Fallback for browsers that do not support smooth scrolling
+      window.scrollTo(0, 0);
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, this.showButton && (index.h("button", { class: 'back-to-top-button', title: "Back to Top" }, index.h("span", { class: 'arrow' }, index.h("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M15.5248 11.625L8.9998 5.1L2.4748 11.625L0.112305 9.2625L8.9998 0.375L17.8873 9.2625L15.5248 11.625Z", fill: "#323B42" }))), index.h("span", { class: 'text' }, "Back to Top")))));
+  }
+};
 PtcBackToTop.style = ptcBackToTopCss;
 exports.ptc_back_to_top = PtcBackToTop;

package/dist/cjs/ptc-background-video_2.cjs.entry.js CHANGED Viewed

@@ -2,193 +2,193 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-1662de74.js');
-const interfaces = require('./interfaces-574e6df7.js');
+const index = require('./index-dddc2aea.js');
+const interfaces = require('./interfaces-0ecd8027.js');
 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}:host .iframe-wrapper{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host .iframe-wrapper .background-video-embed{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%}:host .iframe-wrapper .player .vp-video-wrapper .vp-telecine-cover video{object-fit:cover}:host .play-button{position:absolute;top:1.5rem;right:1.5rem;width:34px;height:34px;z-index:99}@media (min-width: 768px){:host .play-button{top:unset;bottom:3.75rem;right:2rem}}";
-const PtcBackgroundVideo = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.videoSrc = undefined;
-    this.posterSrc = undefined;
-    this.overlay = true;
-    this.playButtonTitle = undefined;
-    this.pauseButtonTitle = undefined;
-    this.paused = undefined;
-    this.type = 'default';
-    this.isIframe = false;
-  }
-  // componentDidLoad() {
-  //   if(this.isIframe){
-  //     const iframe:HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
-  //     const iframeDoc = iframe.contentDocument
-  //     const iframeVideo = iframeDoc.querySelector('video');
-  //     console.log("iframe ele: " + iframeDoc.querySelectorAll('video'));
-  //     iframeVideo.style.objectFit = 'cover';
-  //   }
-  // }
-  // @Method()
-  // async toggleVideo() {
-  //   // show a prompt
-  //   this.paused = !this.paused;
-  //   let video = this.el.shadowRoot.querySelector('video') as HTMLVideoElement;
-  //   if (video) {
-  //     if (this.paused) {
-  //       video.pause();
-  //     } else {
-  //       video.play().catch(z => console.error(z));
-  //     }
-  //   }
-  //   console.log('Hello, I am a publish method from ptc-background-video!');
-  // }
-  componentWillLoad() {
-    this.paused = false;
-  }
-  render() {
-    const videoContent = this.isIframe ? (index.h("div", { class: "iframe-wrapper" }, index.h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (index.h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
-    return (index.h(index.Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (index.h("div", { class: "play-button" }, this.paused && (index.h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, index.h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }" }, index.h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (index.h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, index.h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e) }, index.h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? index.h("div", { class: "video-overlay" }) : '', this.type == 'default' ? index.h("slot", null) : ''));
-  }
-  toggleVideoPlay(e) {
-    e.preventDefault();
-    this.paused = !this.paused;
-    let video = this.el.shadowRoot.querySelector('video');
-    if (video) {
-      if (this.paused) {
-        video.pause();
-      }
-      else {
-        video.play().catch(z => console.error(z));
-      }
-    }
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcBackgroundVideo = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.videoSrc = undefined;
+    this.posterSrc = undefined;
+    this.overlay = true;
+    this.playButtonTitle = undefined;
+    this.pauseButtonTitle = undefined;
+    this.paused = undefined;
+    this.type = 'default';
+    this.isIframe = false;
+  }
+  // componentDidLoad() {
+  //   if(this.isIframe){
+  //     const iframe:HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
+  //     const iframeDoc = iframe.contentDocument
+  //     const iframeVideo = iframeDoc.querySelector('video');
+  //     console.log("iframe ele: " + iframeDoc.querySelectorAll('video'));
+  //     iframeVideo.style.objectFit = 'cover';
+  //   }
+  // }
+  // @Method()
+  // async toggleVideo() {
+  //   // show a prompt
+  //   this.paused = !this.paused;
+  //   let video = this.el.shadowRoot.querySelector('video') as HTMLVideoElement;
+  //   if (video) {
+  //     if (this.paused) {
+  //       video.pause();
+  //     } else {
+  //       video.play().catch(z => console.error(z));
+  //     }
+  //   }
+  //   console.log('Hello, I am a publish method from ptc-background-video!');
+  // }
+  componentWillLoad() {
+    this.paused = false;
+  }
+  render() {
+    const videoContent = this.isIframe ? (index.h("div", { class: "iframe-wrapper" }, index.h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (index.h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
+    return (index.h(index.Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (index.h("div", { class: "play-button" }, this.paused && (index.h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, index.h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }" }, index.h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (index.h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, index.h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e) }, index.h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? index.h("div", { class: "video-overlay" }) : '', this.type == 'default' ? index.h("slot", null) : ''));
+  }
+  toggleVideoPlay(e) {
+    e.preventDefault();
+    this.paused = !this.paused;
+    let video = this.el.shadowRoot.querySelector('video');
+    if (video) {
+      if (this.paused) {
+        video.pause();
+      }
+      else {
+        video.play().catch(z => console.error(z));
+      }
+    }
+  }
+  get el() { return index.getElement(this); }
+};
 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-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}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, 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); }
-};
+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}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, 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_background_video = PtcBackgroundVideo;

package/dist/cjs/ptc-bio-card.cjs.entry.js CHANGED Viewed

@@ -2,34 +2,34 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-1662de74.js');
+const index = require('./index-dddc2aea.js');
 const ptcBioCardCss = ":host{display:block;color:var(--color-gray-10)}:host .bio-card{display:flex;box-shadow:var(--ptc-shadow-small);transition:box-shadow 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;background-color:var(--color-white)}:host .bio-card .bio-card__image{max-width:150px;min-width:100px}@media only screen and (min-width: 480px){:host .bio-card .bio-card__image{min-width:140px}}@media only screen and (min-width: 768px){:host .bio-card .bio-card__image{width:35%}}:host .bio-card .bio-card__image img{max-width:100%;display:block;max-height:150px}@media only screen and (min-width: 480px){:host .bio-card .bio-card__image img{max-height:200px;min-width:auto}}:host .bio-card .bio-card__content{padding:12px 12px 1px 12px;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;align-content:space-between}@media only screen and (min-width: 768px){:host .bio-card .bio-card__content{width:65%;padding:16px 16px 1px 16px}}:host .bio-card .bio-card__content .bio-card__name{display:inline-block;margin:0;font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-black);line-height:var(--ptc-line-height-denser);letter-spacing:0.031rem;border-bottom:1px solid transparent}@media only screen and (min-width: 992px){:host .bio-card .bio-card__content .bio-card__name{font-size:var(--ptc-font-size-xx-small)}}:host .bio-card .bio-card__content .bio-card__job-title{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-p);letter-spacing:0.031rem;margin:2px 0 0 0}@media only screen and (min-width: 480px){:host .bio-card .bio-card__content .bio-card__job-title{font-size:var(--ptc-font-size-x-small)}}@media only screen and (min-width: 992px){:host .bio-card .bio-card__content .bio-card__job-title{font-size:var(--ptc-font-size-xxx-small)}}:host .bio-card .bio-card__content .bio-card__social-links{border-top:1px solid var(--color-gray-03);padding-top:12px}:host .bio-card .bio-card__content .bio-card__social-links .social-icon{margin-right:20px;display:inline-block;line-height:var(--ptc-line-height-denser)}:host .bio-card .bio-card__content .bio-card__social-links .social-icon svg{max-width:27px;max-height:44px}:host .bio-card:hover{box-shadow:var(--ptc-shadow-x-large);cursor:pointer}:host .bio-card:hover .bio-card__name{border-bottom-color:var(--color-green-07)}:host .modal-wrap{display:flex;height:100%}@media only screen and (min-width: 768px){:host .modal-wrap{height:auto}}@media (max-height: 450px){:host .modal-wrap{height:100%}}:host .modal-wrap .bio-modal-left{width:140px;max-height:208px;display:none}:host .modal-wrap .bio-modal-left .bio-modal__image{margin-bottom:35px}:host .modal-wrap .bio-modal-left .bio-modal__image img{max-width:100%;display:block;min-width:140px}@media (max-height: 450px){:host .modal-wrap .bio-modal-left .bio-modal__image img{min-width:110px}}:host .modal-wrap .bio-modal-left .bio-card__social-links{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .modal-wrap .bio-modal-left .bio-card__social-links .social-icon{margin-bottom:10px}:host .modal-wrap .bio-modal-left .bio-card__social-links .social-icon:last-child{margin-bottom:0}@media only screen and (min-width: 768px){:host .modal-wrap .bio-modal-left{display:block}}:host .modal-wrap .bio-modal-right{padding-left:30px;padding-right:15px}:host .modal-wrap .bio-modal-right .bio-modal-header{position:relative;width:95%}@media only screen and (min-width: 992px){:host .modal-wrap .bio-modal-right .bio-modal-header::after{content:\"\";position:absolute;width:100%;height:100%;background-image:url(\"https://www.ptc.com/dist/ptc/images/Exec-Leadership/Card-Decoration.svg\");background-size:340px;transform:rotate(180deg);z-index:-1;background-repeat:no-repeat;top:-20px;right:5%;opacity:0.4}}:host .modal-wrap .bio-modal-right .bio-modal-header .bio-card__name{margin:0 0 4px 0;font-weight:var(--ptc-font-weight-black);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-denser)}:host .modal-wrap .bio-modal-right .bio-modal-header .bio-card__job-title{margin:0;font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium)}:host .modal-wrap .bio-modal-right .bio-modal-description{margin-top:40px;overflow-y:auto;padding-right:8%;max-height:calc(100% - 120px)}@media only screen and (min-width: 768px){:host .modal-wrap .bio-modal-right .bio-modal-description{max-height:500px}}@media (max-height: 450px){:host .modal-wrap .bio-modal-right .bio-modal-description{max-height:calc(100% - 110px)}}:host .modal-wrap .bio-modal-right .bio-modal-description::before{background:var(--color-white);background:linear-gradient(0deg, var(--color-white), rgba(255, 255, 255, 0));bottom:0;content:\"\";display:block;height:25%;left:0;position:absolute;right:1rem;width:100%;border-bottom-left-radius:var(--ptc-border-radius-large);border-bottom-right-radius:var(--ptc-border-radius-large)}:host .modal-wrap .bio-modal-right .bio-modal-description::after{content:\" \";width:10px;height:120px;display:block}:host .modal-wrap .bio-modal-right .bio-modal-description::-webkit-scrollbar{width:0.188rem}:host .modal-wrap .bio-modal-right .bio-modal-description::-webkit-scrollbar-track{background:var(--color-gray-03)}:host .modal-wrap .bio-modal-right .bio-modal-description::-webkit-scrollbar-thumb{background:var(--color-gray-10);border-radius:2rem}:host .social-icon .cls-1{transition:all ease-in 250ms}:host .social-icon .cls-3,:host .social-icon .cls-4{stroke:none}:host .social-icon .cls-4{transition:all ease-in 250ms;fill:var(--color-gray-03)}:host .social-icon:hover .cls-1{transition:all ease-in 250ms;fill:var(--color-white)}:host .social-icon:hover .cls-2{fill:var(--color-green-14)}:host .social-icon:hover .cls-4{fill:var(--color-green-14)}";
-const PtcBioCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.showModal = false;
-    this.name = undefined;
-    this.jobTitle = undefined;
-    this.image = undefined;
-    this.linkedin = undefined;
-    this.twitter = undefined;
-  }
-  openModal() {
-    this.showModal = true;
-  }
-  componentDidLoad() {
-    let PtcModal = this.el.shadowRoot.querySelector('#bio-modal');
-    PtcModal.addEventListener('closed', () => {
-      this.showModal = false;
-    });
-  }
-  render() {
-    return (index.h(index.Host, { onClick: () => { this.openModal(); }, type: "button" }, index.h("div", { class: "bio-card" }, index.h("div", { class: "bio-card__image" }, index.h("img", { src: this.image, alt: `${this.name} profile image` })), index.h("div", { class: "bio-card__content" }, index.h("div", null, index.h("h3", { class: "bio-card__name" }, this.name), index.h("p", { class: "bio-card__job-title" }, this.jobTitle)), (this.linkedin || this.twitter) && (index.h("div", { class: "bio-card__social-links" }, this.linkedin && (index.h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, index.h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, index.h("defs", null, index.h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, index.h("stop", { offset: "0", "stop-color": "#fff" }), index.h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), index.h("g", { class: "cls-1", "data-name": "Path 4255" }, index.h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), index.h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), index.h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (index.h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, index.h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, index.h("defs", null, index.h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, index.h("stop", { offset: "0", "stop-color": "#fff" }), index.h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), index.h("g", { class: "cls-1", "data-name": "Path 4255" }, index.h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), index.h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), index.h("g", { "data-name": "Group 3004", transform: "translate(9.205 13.034)" }, index.h("g", null, index.h("path", { d: "M-617.4 147a5.577 5.577 0 0 1-1.6.436 2.78 2.78 0 0 0 1.219-1.535 5.54 5.54 0 0 1-1.765.674 2.78 2.78 0 0 0-3.93-.118 2.782 2.782 0 0 0-.874 2.018 2.754 2.754 0 0 0 .072.632 7.9 7.9 0 0 1-5.73-2.9 2.784 2.784 0 0 0 .861 3.71 2.784 2.784 0 0 1-1.26-.346v.034a2.78 2.78 0 0 0 2.231 2.724 2.714 2.714 0 0 1-.734.1 2.774 2.774 0 0 1-.534-.049 2.776 2.776 0 0 0 2.6 1.93 5.619 5.619 0 0 1-4.1 1.151 7.874 7.874 0 0 0 4.259 1.249 7.844 7.844 0 0 0 7.9-7.9v-.376A5.652 5.652 0 0 0-617.4 147", class: "cls-2", "data-name": "Path 4252", transform: "translate(630.939 -145.697)" })))))))))), index.h("ptc-modal", { id: "bio-modal", show: this.showModal, size: "lg", "border-radius": 'large', "is-bio-modal": true, fixed: true }, index.h("div", { class: "modal-wrap" }, index.h("div", { class: "bio-modal-left" }, index.h("div", { class: "bio-modal__image" }, index.h("img", { src: this.image, alt: `${this.name} profile image` })), (this.linkedin || this.twitter) && (index.h("div", { class: "bio-card__social-links" }, this.linkedin && (index.h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, index.h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, index.h("defs", null, index.h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, index.h("stop", { offset: "0", "stop-color": "#fff" }), index.h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), index.h("g", { class: "cls-1", "data-name": "Path 4255" }, index.h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), index.h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), index.h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (index.h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, index.h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, index.h("defs", null, index.h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, index.h("stop", { offset: "0", "stop-color": "#fff" }), index.h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), index.h("g", { class: "cls-1", "data-name": "Path 4255" }, index.h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), index.h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), index.h("g", { "data-name": "Group 3004", transform: "translate(9.205 13.034)" }, index.h("g", null, index.h("path", { d: "M-617.4 147a5.577 5.577 0 0 1-1.6.436 2.78 2.78 0 0 0 1.219-1.535 5.54 5.54 0 0 1-1.765.674 2.78 2.78 0 0 0-3.93-.118 2.782 2.782 0 0 0-.874 2.018 2.754 2.754 0 0 0 .072.632 7.9 7.9 0 0 1-5.73-2.9 2.784 2.784 0 0 0 .861 3.71 2.784 2.784 0 0 1-1.26-.346v.034a2.78 2.78 0 0 0 2.231 2.724 2.714 2.714 0 0 1-.734.1 2.774 2.774 0 0 1-.534-.049 2.776 2.776 0 0 0 2.6 1.93 5.619 5.619 0 0 1-4.1 1.151 7.874 7.874 0 0 0 4.259 1.249 7.844 7.844 0 0 0 7.9-7.9v-.376A5.652 5.652 0 0 0-617.4 147", class: "cls-2", "data-name": "Path 4252", transform: "translate(630.939 -145.697)" }))))))))), index.h("div", { class: "bio-modal-right" }, index.h("div", { class: "bio-modal-header" }, index.h("h2", { class: "bio-card__name" }, this.name), index.h("p", { class: "bio-card__job-title" }, this.jobTitle)), index.h("div", { class: "bio-modal-description" }, index.h("slot", null)))))));
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcBioCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.showModal = false;
+    this.name = undefined;
+    this.jobTitle = undefined;
+    this.image = undefined;
+    this.linkedin = undefined;
+    this.twitter = undefined;
+  }
+  openModal() {
+    this.showModal = true;
+  }
+  componentDidLoad() {
+    let PtcModal = this.el.shadowRoot.querySelector('#bio-modal');
+    PtcModal.addEventListener('closed', () => {
+      this.showModal = false;
+    });
+  }
+  render() {
+    return (index.h(index.Host, { onClick: () => { this.openModal(); }, type: "button" }, index.h("div", { class: "bio-card" }, index.h("div", { class: "bio-card__image" }, index.h("img", { src: this.image, alt: `${this.name} profile image` })), index.h("div", { class: "bio-card__content" }, index.h("div", null, index.h("h3", { class: "bio-card__name" }, this.name), index.h("p", { class: "bio-card__job-title" }, this.jobTitle)), (this.linkedin || this.twitter) && (index.h("div", { class: "bio-card__social-links" }, this.linkedin && (index.h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, index.h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, index.h("defs", null, index.h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, index.h("stop", { offset: "0", "stop-color": "#fff" }), index.h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), index.h("g", { class: "cls-1", "data-name": "Path 4255" }, index.h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), index.h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), index.h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (index.h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, index.h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, index.h("defs", null, index.h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, index.h("stop", { offset: "0", "stop-color": "#fff" }), index.h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), index.h("g", { class: "cls-1", "data-name": "Path 4255" }, index.h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), index.h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), index.h("g", { "data-name": "Group 3004", transform: "translate(9.205 13.034)" }, index.h("g", null, index.h("path", { d: "M-617.4 147a5.577 5.577 0 0 1-1.6.436 2.78 2.78 0 0 0 1.219-1.535 5.54 5.54 0 0 1-1.765.674 2.78 2.78 0 0 0-3.93-.118 2.782 2.782 0 0 0-.874 2.018 2.754 2.754 0 0 0 .072.632 7.9 7.9 0 0 1-5.73-2.9 2.784 2.784 0 0 0 .861 3.71 2.784 2.784 0 0 1-1.26-.346v.034a2.78 2.78 0 0 0 2.231 2.724 2.714 2.714 0 0 1-.734.1 2.774 2.774 0 0 1-.534-.049 2.776 2.776 0 0 0 2.6 1.93 5.619 5.619 0 0 1-4.1 1.151 7.874 7.874 0 0 0 4.259 1.249 7.844 7.844 0 0 0 7.9-7.9v-.376A5.652 5.652 0 0 0-617.4 147", class: "cls-2", "data-name": "Path 4252", transform: "translate(630.939 -145.697)" })))))))))), index.h("ptc-modal", { id: "bio-modal", show: this.showModal, size: "lg", "border-radius": 'large', "is-bio-modal": true, fixed: true }, index.h("div", { class: "modal-wrap" }, index.h("div", { class: "bio-modal-left" }, index.h("div", { class: "bio-modal__image" }, index.h("img", { src: this.image, alt: `${this.name} profile image` })), (this.linkedin || this.twitter) && (index.h("div", { class: "bio-card__social-links" }, this.linkedin && (index.h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, index.h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, index.h("defs", null, index.h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, index.h("stop", { offset: "0", "stop-color": "#fff" }), index.h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), index.h("g", { class: "cls-1", "data-name": "Path 4255" }, index.h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), index.h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), index.h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (index.h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, index.h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, index.h("defs", null, index.h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, index.h("stop", { offset: "0", "stop-color": "#fff" }), index.h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), index.h("g", { class: "cls-1", "data-name": "Path 4255" }, index.h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), index.h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), index.h("g", { "data-name": "Group 3004", transform: "translate(9.205 13.034)" }, index.h("g", null, index.h("path", { d: "M-617.4 147a5.577 5.577 0 0 1-1.6.436 2.78 2.78 0 0 0 1.219-1.535 5.54 5.54 0 0 1-1.765.674 2.78 2.78 0 0 0-3.93-.118 2.782 2.782 0 0 0-.874 2.018 2.754 2.754 0 0 0 .072.632 7.9 7.9 0 0 1-5.73-2.9 2.784 2.784 0 0 0 .861 3.71 2.784 2.784 0 0 1-1.26-.346v.034a2.78 2.78 0 0 0 2.231 2.724 2.714 2.714 0 0 1-.734.1 2.774 2.774 0 0 1-.534-.049 2.776 2.776 0 0 0 2.6 1.93 5.619 5.619 0 0 1-4.1 1.151 7.874 7.874 0 0 0 4.259 1.249 7.844 7.844 0 0 0 7.9-7.9v-.376A5.652 5.652 0 0 0-617.4 147", class: "cls-2", "data-name": "Path 4252", transform: "translate(630.939 -145.697)" }))))))))), index.h("div", { class: "bio-modal-right" }, index.h("div", { class: "bio-modal-header" }, index.h("h2", { class: "bio-card__name" }, this.name), index.h("p", { class: "bio-card__job-title" }, this.jobTitle)), index.h("div", { class: "bio-modal-description" }, index.h("slot", null)))))));
+  }
+  get el() { return index.getElement(this); }
+};
 PtcBioCard.style = ptcBioCardCss;
 exports.ptc_bio_card = PtcBioCard;