@ptcwebops/ptcw-design 1.5.2 → 1.5.5

package/dist/esm/ptc-media-card.entry.js

@@ -1,65 +1,65 @@
 import { r as registerInstance, h, H as Host } from './index-8e63c32d.js';
-import { a as getFileExtension } from './utils-38decc43.js';
+import { a as getFileExtension } from './utils-f937097d.js';
 
 const ptcMediaCardCss = ":host{display:block;position:relative;width:100%;background-size:cover;background-position:50%;background-repeat:no-repeat}:host .anchor-wrap{height:100%;width:100%;display:block;text-decoration:none;position:relative}:host video{object-fit:cover;height:100%;width:100%;z-index:0;position:absolute;left:0;right:0;top:0;bottom:0;display:none}:host(.media-card) .card-wrap{display:flex;height:100%;width:100%;position:relative;z-index:1;min-height:329px;align-items:end}:host(.media-card) .card-wrap .car-content{padding:20px 30px 30px 30px}:host(.media-card) .card-wrap .car-content h4,:host(.media-card) .card-wrap .car-content h3{color:#fff}:host(.media-card) .card-wrap .car-content h3{position:relative;margin-bottom:0;font-size:var(--ptc-font-size-large);text-shadow:1px 3px 30px #000;line-height:var(--ptc-line-height-denser);display:inline;letter-spacing:1.1px}:host(.media-card) .card-wrap .car-content h3::before{content:\"\";width:100%;height:3px;background-image:url(\"data:image/svg+xml,%3Csvg width='60' height='1' viewBox='0 0 60 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='1' fill='%2333A13C'/%3E%3C/svg%3E\");background-repeat:repeat;position:absolute;background-size:initial;top:-10px}:host(.media-card) .card-wrap .car-content h4{text-shadow:1px 3px 30px var(--color-black);font-weight:var(--ptc-font-weight-semibold);display:block;font-size:var(--ptc-font-size-x-small);font-style:normal;font-stretch:normal;letter-spacing:0.6px}:host(.bureau-card){height:100%;position:relative}";
 
-const PtcMediaCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * ref video element
-     */
-    this.videoEle = undefined;
-    this.cardType = 'media-card';
-    this.cardHref = undefined;
-    this.target = '_self';
-    this.rel = undefined;
-    this.activeBackgroundImage = undefined;
-    this.hoverBackgroundImage = undefined;
-    this.heading = undefined;
-    this.headingTransform = 'none';
-    this.category = undefined;
-    this.isHovered = false;
-  }
-  WatchStateHandler(newValue) {
-    if (this.videoEle) {
-      newValue ? this.videoEle.play() : this.videoEle.pause();
-    }
-  }
-  getCardText() {
-    if (this.cardType === 'media-card') {
-      return [
-        h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))),
-      ];
-    }
-    // else if (this.cardType === 'bureau-card') {
-    //   return (
-    //     <div class="card-content">
-    //       <slot name="bureau-description"></slot>
-    //     </div>
-    //   );
-    // }
-  }
-  render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
-    const isVideoUrl = getFileExtension(this.hoverBackgroundImage) === '.mp4' ? true : false;
-    //console.log("isVideoUrl: " + isVideoUrl + " hoverBackgroundImage: " + this.hoverBackgroundImage);
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false),
-      // {...(!isVideoUrl
-      //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
-      //   : null)}
-      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
-  }
-  static get watchers() { return {
-    "isHovered": ["WatchStateHandler"]
-  }; }
-};
+const PtcMediaCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * ref video element
+     */
+    this.videoEle = undefined;
+    this.cardType = 'media-card';
+    this.cardHref = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.activeBackgroundImage = undefined;
+    this.hoverBackgroundImage = undefined;
+    this.heading = undefined;
+    this.headingTransform = 'none';
+    this.category = undefined;
+    this.isHovered = false;
+  }
+  WatchStateHandler(newValue) {
+    if (this.videoEle) {
+      newValue ? this.videoEle.play() : this.videoEle.pause();
+    }
+  }
+  getCardText() {
+    if (this.cardType === 'media-card') {
+      return [
+        h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))),
+      ];
+    }
+    // else if (this.cardType === 'bureau-card') {
+    //   return (
+    //     <div class="card-content">
+    //       <slot name="bureau-description"></slot>
+    //     </div>
+    //   );
+    // }
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    const isVideoUrl = getFileExtension(this.hoverBackgroundImage) === '.mp4' ? true : false;
+    //console.log("isVideoUrl: " + isVideoUrl + " hoverBackgroundImage: " + this.hoverBackgroundImage);
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false),
+      // {...(!isVideoUrl
+      //   ? { ...{ style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } } }
+      //   : null)}
+      style: this.isHovered ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` } }, h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  static get watchers() { return {
+    "isHovered": ["WatchStateHandler"]
+  }; }
+};
 PtcMediaCard.style = ptcMediaCardCss;
 
 export { PtcMediaCard as ptc_media_card };

package/dist/esm/ptc-minimized-footer.entry.js

@@ -2,14 +2,14 @@ import { r as registerInstance, h, H as Host } from './index-8e63c32d.js';
 
 const ptcMinimizedFooterCss = ":host{box-shadow:var(--ptc-shadow-medium);color:var(--color-white);position:relative;overflow:hidden;position:relative;z-index:1000;padding:0;height:60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--color-gray-10)}.min-footer-nav-list{margin:0;padding:0;list-style:none}.min-footer-copyright-wrapper{text-align:center;position:relative;z-index:20}.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0;display:flex;flex-direction:row}@media screen-sm{.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0}}";
 
-const PtcMinimizedFooter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null)))));
-  }
-};
+const PtcMinimizedFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null)))));
+  }
+};
 PtcMinimizedFooter.style = ptcMinimizedFooterCss;
 
 export { PtcMinimizedFooter as ptc_minimized_footer };

package/dist/esm/ptc-minimized-header.entry.js

@@ -2,17 +2,17 @@ import { r as registerInstance, h, H as Host } from './index-8e63c32d.js';
 
 const ptcMinimizedHeaderCss = ":host{display:block}.minimized-header .header{overflow:hidden;height:48px;background-color:var(--color-gray-10);display:flex;align-items:center;justify-content:center}.minimized-header .header a{float:left;color:var(--color-black);text-align:center;padding:0px 0;text-decoration:none;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p);border-radius:var(--ptc-border-radius-standard)}.minimized-header .header a.mini-navbar-logo{font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-bold)}.minimized-header .header a.mini-navbar-logo img{width:65px;vertical-align:middle;border:0;height:auto}.mini-navbar-logo{outline:3px solid transparent}.mini-navbar-logo:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}@media screen-xs{.minimized-header .header a{float:none;display:block;text-align:left}}";
 
-const PtcMinimizedHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.linkUrl = '#';
-    this.imgSrc = '';
-    this.imgAlt = 'PTC';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
-  }
-};
+const PtcMinimizedHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.linkUrl = '#';
+    this.imgSrc = '';
+    this.imgAlt = 'PTC';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
+  }
+};
 PtcMinimizedHeader.style = ptcMinimizedHeaderCss;
 
 export { PtcMinimizedHeader as ptc_minimized_header };

package/dist/esm/ptc-mobile-select.entry.js

@@ -422,59 +422,59 @@ h(y, "defaultConfig", {
 
 const ptcMobileSelectCss = ".ms-mobile-select{position:relative;z-index:0;opacity:0;visibility:hidden;-webkit-transition:opacity 0.4s, z-index 0.4s;transition:opacity 0.4s, z-index 0.4s}.ms-mobile-select *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.ms-mobile-select .ms-gray-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0, 0, 0, 0.7);z-index:888;display:block}.ms-mobile-select .ms-content{width:100%;display:block;position:fixed;z-index:889;color:black;-webkit-transition:all 0.4s;transition:all 0.4s;bottom:-350px;left:0;background:white}.ms-mobile-select .ms-fix-width{width:90%;margin:0 auto;position:relative}.ms-mobile-select .ms-fix-width:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-btn-bar{border-bottom:1px solid #dcdcdc;font-size:15px;height:45px;position:relative;text-align:center;line-height:45px}.ms-mobile-select .ms-cancel,.ms-mobile-select .ms-ensure{height:45px;width:55px;cursor:pointer;position:absolute;top:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-cancel{left:0;color:#666}.ms-mobile-select .ms-ensure{right:0;color:#1e83d3}.ms-mobile-select .ms-title{font-size:15px;padding:0 15%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ms-mobile-select .ms-panel:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.ms-mobile-select .ms-wheels{width:100%;height:200px;overflow:hidden}.ms-mobile-select .ms-wheel{position:relative;z-index:0;float:left;width:50%;height:200px;overflow:hidden;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.ms-mobile-select .ms-select-container{display:block;text-align:center}.ms-mobile-select .ms-select-container li{font-size:15px;display:block;height:40px;line-height:40px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.ms-mobile-select .ms-select-line{height:40px;width:100%;position:absolute;top:80px;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc}.ms-mobile-select .ms-shadow-mask{position:absolute;top:0;width:100%;height:200px;background:linear-gradient(to bottom, #fffffff5, #ffffffcc 25%, #ffffff00 49%, #ffffff00 51%, #ffffffcc 75%, #fffffff5);opacity:0.9;pointer-events:none}.ms-mobile-select.ms-show{opacity:1;z-index:10000;visibility:visible}.ms-mobile-select.ms-show .ms-content{bottom:0}.ms-default-trigger{min-height:1em;color:#888}body.ms-show{overflow-y:hidden}.mobile-select-wrapper{display:block}.mobile-select-wrapper div{display:inline;margin-right:var(--ptc-element-spacing-03);width:100%;font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);color:var(--color-white);height:18px}.mobileSelect .content{top:auto}.mobileSelect .content .btnBar{border-color:var(--color-gray-10)}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .title{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .cancel{transform:translateY(12.5px);width:125px}.mobileSelect .content .panel .wheel .selectContainer li{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);height:45px}ptc-responsive-wrapper.xsmall .mobile-select-wrapper,ptc-responsive-wrapper.small .mobile-select-wrapper{display:block}ptc-responsive-wrapper.medium .mobile-select-wrapper,ptc-responsive-wrapper.large .mobile-select-wrapper,ptc-responsive-wrapper.xlarge .mobile-select-wrapper,ptc-responsive-wrapper.xxlarge .mobile-select-wrapper,ptc-responsive-wrapper.large2k .mobile-select-wrapper,ptc-responsive-wrapper.large4k .mobile-select-wrapper{display:none}";
 
-const PtcMobileSelect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.triggerName = undefined;
-    this.selectedText = undefined;
-    this.wheelData = undefined;
-    this.selectedId = '';
-    this.ensureBtnText = 'Confirm';
-    this.cancelBtnText = 'Cancel';
-    this.listTitle = undefined;
-  }
-  render() {
-    return (h$1("div", { class: "mobile-select-wrapper" }, h$1("div", { id: this.triggerName }, this.selectedText, h$1("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px);}" }))));
-  }
-  componentDidRender() {
-    let currentId = this.selectedId; //input current lang
-    let storeIndex = 0;
-    new y({
-      trigger: `#${this.triggerName}`,
-      title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
-      position: [0],
-      ensureBtnText: this.ensureBtnText,
-      cancelBtnText: this.cancelBtnText,
-      ensureBtnColor: 'var(--color-gray-12)',
-      cancelBtnColor: 'var(--color-gray-12)',
-      titleColor: 'var(--color-gray-12)',
-      onShow: function (e) {
-        if (currentId) {
-          let liEle = document.querySelectorAll('.selectContainer li');
-          liEle.forEach((currentValue, currentIndex) => {
-            if (currentValue.getAttribute('data-id') == currentId) {
-              storeIndex = currentIndex;
-              return;
-            }
-          });
-          e.locatePosition(0, storeIndex);
-        }
-        else {
-          return;
-        }
-      },
-      callback: function (indexArr, data) {
-        if (data[0].id) {
-          window.location.href = data[0].id;
-        }
-        else {
-          console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
-        }
-      }.bind(this),
-    });
-  }
-};
+const PtcMobileSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.triggerName = undefined;
+    this.selectedText = undefined;
+    this.wheelData = undefined;
+    this.selectedId = '';
+    this.ensureBtnText = 'Confirm';
+    this.cancelBtnText = 'Cancel';
+    this.listTitle = undefined;
+  }
+  render() {
+    return (h$1("div", { class: "mobile-select-wrapper" }, h$1("div", { id: this.triggerName }, this.selectedText, h$1("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px);}" }))));
+  }
+  componentDidRender() {
+    let currentId = this.selectedId; //input current lang
+    let storeIndex = 0;
+    new y({
+      trigger: `#${this.triggerName}`,
+      title: `${this.listTitle ? this.listTitle : ''}`,
+      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
+      position: [0],
+      ensureBtnText: this.ensureBtnText,
+      cancelBtnText: this.cancelBtnText,
+      ensureBtnColor: 'var(--color-gray-12)',
+      cancelBtnColor: 'var(--color-gray-12)',
+      titleColor: 'var(--color-gray-12)',
+      onShow: function (e) {
+        if (currentId) {
+          let liEle = document.querySelectorAll('.selectContainer li');
+          liEle.forEach((currentValue, currentIndex) => {
+            if (currentValue.getAttribute('data-id') == currentId) {
+              storeIndex = currentIndex;
+              return;
+            }
+          });
+          e.locatePosition(0, storeIndex);
+        }
+        else {
+          return;
+        }
+      },
+      callback: function (indexArr, data) {
+        if (data[0].id) {
+          window.location.href = data[0].id;
+        }
+        else {
+          console.log('href: ' + data[0].id + '; indexArr: ' + indexArr);
+        }
+      }.bind(this),
+    });
+  }
+};
 PtcMobileSelect.style = ptcMobileSelectCss;
 
 export { PtcMobileSelect as ptc_mobile_select };

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

@@ -2,155 +2,155 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
 
 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:60px;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)}:host(.standard) .modal-popup{border-radius:var(--ptc-border-radius-standard)}:host(.large) .modal-popup{border-radius:var(--ptc-border-radius-large)}:host(.pill) .modal-popup{border-radius:var(--ptc-border-radius-pill)}:host(.circle) .modal-popup{border-radius:var(--ptc-border-radius-circle)}:host(.bio-modal) .modal-popup{padding:30px 15px 30px 0;max-width:1200px}@media only screen and (min-width: 1440px){:host(.bio-modal) .modal-popup{max-width:1400px}}:host(.bio-modal) .close{position:absolute;margin:0;right:15px;top:30px}:host(.bio-modal) .close svg .cls-1,:host(.bio-modal) .close svg .cls-2{fill:none;stroke-width:2px}:host(.bio-modal) .close svg .cls-1{stroke:#1c2439;stroke-linecap:square}:host(.bio-modal) .close svg .cls-2{stroke:#74c34d}:host(.bio-modal) .close svg path{transition:all ease-in-out 250ms}:host(.bio-modal) .close svg .cls-1:nth-child(1){transform:translate(175.5px, 135.5px)}:host(.bio-modal) .close svg .cls-1:nth-child(2){transform:translate(175.5px, 174.985px)}:host(.bio-modal) .close svg .cls-1:nth-child(3){transform:translate(215.5px, 141.393px)}:host(.bio-modal) .close svg .cls-1:nth-child(4){transform:translate(175.5px, 135.5px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(1){transform:translate(175.5px, 162px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(2){transform:translate(149px, 174.985px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(3){transform:translate(215.5px, 174px)}:host(.bio-modal) .close:hover svg .cls-1:nth-child(4){transform:translate(152.5px, 135.5px)}";
 
-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.borderRadius = 'standard';
-    this.isBioModal = false;
-    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(); } }, this.isBioModal
-      ?
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "42", height: "41.485", viewBox: "0 0 42 41.485" }, h("g", { "data-name": "Group 1042", transform: "rotate(180 108.25 87.993)" }, h("path", { d: "M0 0v39.486", class: "cls-1", "data-name": "Line 446" }), h("path", { d: "M0 0h40", class: "cls-1", "data-name": "Line 447" }), h("path", { d: "M0 33.592V0", class: "cls-1", "data-name": "Line 448" }), h("path", { d: "M23.994 0H0", class: "cls-1", "data-name": "Line 449" }), h("path", { d: "M0 0l17.596 17.596", class: "cls-2", "data-name": "Line 450", transform: "translate(187.229 147.226)" }), h("path", { d: "M0 7.198L7.199 0", class: "cls-2", "data-name": "Line 451", transform: "translate(197.55 147.312)" }), h("path", { d: "M0 7.2L7.2 0", class: "cls-2", "data-name": "Path 114", transform: "translate(187.313 157.549)" })))
-      :
-        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, { class: `${this.isBioModal ? "bio-modal" : ""} ${this.borderRadius}` }, 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); }
-};
+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.borderRadius = 'standard';
+    this.isBioModal = false;
+    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(); } }, this.isBioModal
+      ?
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "42", height: "41.485", viewBox: "0 0 42 41.485" }, h("g", { "data-name": "Group 1042", transform: "rotate(180 108.25 87.993)" }, h("path", { d: "M0 0v39.486", class: "cls-1", "data-name": "Line 446" }), h("path", { d: "M0 0h40", class: "cls-1", "data-name": "Line 447" }), h("path", { d: "M0 33.592V0", class: "cls-1", "data-name": "Line 448" }), h("path", { d: "M23.994 0H0", class: "cls-1", "data-name": "Line 449" }), h("path", { d: "M0 0l17.596 17.596", class: "cls-2", "data-name": "Line 450", transform: "translate(187.229 147.226)" }), h("path", { d: "M0 7.198L7.199 0", class: "cls-2", "data-name": "Line 451", transform: "translate(197.55 147.312)" }), h("path", { d: "M0 7.2L7.2 0", class: "cls-2", "data-name": "Path 114", transform: "translate(187.313 157.549)" })))
+      :
+        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, { class: `${this.isBioModal ? "bio-modal" : ""} ${this.borderRadius}` }, 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;
 
 export { PtcModal as ptc_modal };