@ptcwebops/ptcw-design 1.0.5 → 1.0.7

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h as h$1 } from './index-40bc29fc.js';
+import { r as registerInstance, h as h$1 } from './index-8e63c32d.js';
 
 /*
 * mobile-select v1.3.2
@@ -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-nav-card.entry.js

@@ -1,46 +1,46 @@
-import { r as registerInstance, h, H as Host } from './index-40bc29fc.js';
+import { r as registerInstance, h, H as Host } from './index-8e63c32d.js';
 
 const ptcNavCardCss = ":host{display:flex;height:100%;width:100%;position:relative}:host .nav-card-wrap{padding:1rem;display:flex;align-items:center;width:100%;border-radius:var(--ptc-border-radius-standard);background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .nav-card-wrap{background-color:var(--color-gray-10)}:host .nav-card-wrap:hover{background-color:var(--color-gray-08)}}:host .nav-card-wrap h4,:host .nav-card-wrap p,:host .nav-card-wrap a{color:var(--color-white);margin:0;text-decoration:none}:host .nav-card-wrap .media-card-wrap{width:100%;display:flex;align-items:center}:host .nav-card-wrap .media-card-wrap h4{margin-bottom:0.25rem;font-weight:600;display:flex;align-items:center;font-size:var(--ptc-font-size-medium)}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap h4{font-size:var(--ptc-font-size-xxx-small);font-weight:800}}:host .nav-card-wrap .media-card-wrap p{font-size:var(--ptc-font-size-x-small)}@media only screen and (min-width: 1200px){:host .nav-card-wrap .media-card-wrap p{font-size:var(--ptc-font-size-xxx-small)}}:host .nav-card-wrap .media-card-wrap .card-logo{padding-right:1rem}:host .nav-card-wrap .media-card-wrap .card-logo img{width:100%;max-width:1.5rem;min-width:1.5rem}:host(.cta-card) .nav-card-wrap{border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-gray-09)}@media only screen and (min-width: 1200px){:host(.cta-card) .nav-card-wrap{background-color:transparent}}:host(.cta-card) .nav-card-wrap:hover{background-color:var(--color-gray-08)}:host(.cta-card) .nav-card-wrap .card-content{margin:auto}:host(.cta-card) .nav-card-wrap .card-content svg{vertical-align:middle;margin-left:0.375rem}:host(.links-card) .nav-card-wrap{padding:2rem 0rem 0.75rem 0rem;border-radius:var(--ptc-border-radius-standard);background-color:transparent;border:1px solid var(--color-gray-07);border-left:none;border-right:none;border-bottom:none;border-radius:0;align-items:flex-start}@media only screen and (min-width: 992px){:host(.links-card) .nav-card-wrap{padding:1.5rem;border:1px solid var(--color-gray-07);border-radius:var(--ptc-border-radius-standard)}}@media only screen and (min-width: 1200px){:host(.links-card) .nav-card-wrap{border:1px solid var(--color-gray-10)}}:host(.links-card) .nav-card-wrap:hover{background-color:transparent}:host(.links-card) .nav-card-wrap h3{margin:0 0 0.75rem 0;border-bottom:1.5px solid transparent;display:inline-block;font-weight:800}:host(.links-card) .nav-card-wrap h3 svg{margin-left:0.375rem;display:none;vertical-align:middle}:host(.links-card) .nav-card-wrap h3:hover{border-color:var(--color-green-06)}:host(.links-card) .nav-card-wrap h3:hover svg{display:inline-block}:host(.links-card) .nav-card-wrap h3 a{font-size:var(--ptc-font-size-medium)}@media only screen and (min-width: 1200px){:host(.links-card) .nav-card-wrap h3 a{font-size:var(--ptc-font-size-x-small)}}:host(.links-card) ::slotted(ptc-link){padding:6px 0;line-height:14px}";
 
-const PtcNavCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cardType = undefined;
-    this.cardHref = undefined;
-    this.logoAlt = undefined;
-    this.target = '_self';
-    this.rel = undefined;
-    this.linkTitle = undefined;
-    this.cardLogo = undefined;
-    this.heading = undefined;
-    this.description = undefined;
-    this.windowSize = 'mobile';
-  }
-  handleResize() {
-    if (window.innerWidth < 992) {
-      this.windowSize = 'mobile';
-    }
-    else {
-      this.windowSize = 'desktop';
-    }
-  }
-  componentWillLoad() {
-    this.handleResize();
-  }
-  render() {
-    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
-      h("div", { class: "links-card-wrap" }, h("h3", null, h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))), h("slot", null))
-      :
-        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
-          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.windowSize === 'mobile'
-          ? this.heading
-          : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.heading, position: "bottom" }, this.heading), this.cardType == "cta-card" &&
-          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
-          h("p", null, this.windowSize === 'mobile'
-            ? this.description
-            : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.description, position: "bottom" }, this.description)))))));
-  }
-};
+const PtcNavCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cardType = undefined;
+    this.cardHref = undefined;
+    this.logoAlt = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.linkTitle = undefined;
+    this.cardLogo = undefined;
+    this.heading = undefined;
+    this.description = undefined;
+    this.windowSize = 'mobile';
+  }
+  handleResize() {
+    if (window.innerWidth < 992) {
+      this.windowSize = 'mobile';
+    }
+    else {
+      this.windowSize = 'desktop';
+    }
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
+      h("div", { class: "links-card-wrap" }, h("h3", null, h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))), h("slot", null))
+      :
+        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
+          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.windowSize === 'mobile'
+          ? this.heading
+          : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.heading, position: "bottom" }, this.heading), this.cardType == "cta-card" &&
+          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
+          h("p", null, this.windowSize === 'mobile'
+            ? this.description
+            : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.description, position: "bottom" }, this.description)))))));
+  }
+};
 PtcNavCard.style = ptcNavCardCss;
 
 export { PtcNavCard as ptc_nav_card };

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

@@ -1,30 +1,30 @@
-import { r as registerInstance, h, H as Host } from './index-40bc29fc.js';
+import { r as registerInstance, h, H as Host } from './index-8e63c32d.js';
 
 const ptcOverlayCss = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, var(--color-blue-07) 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, var(--color-red-07) 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, var(--color-orange-07) 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, var(--color-green-07) 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}:host(.black-4){background:rgba(0, 0, 0, 0.66)}:host(.black-5){background:rgba(0, 0, 0, 0.76)}@media only screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}}:host(.black-3){background:linear-gradient(180deg, var(--color-gray-12) 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, var(--color-gray-07) 100%)}:host(.bright-blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.72) 0%, rgba(25, 123, 192, 0.85) 69.27%, rgba(25, 123, 192, 0.4) 100%)}:host(.bright-red){background:linear-gradient(180deg, rgba(211, 62, 62, 0.72) 0%, rgba(211, 62, 62, 0.85) 69.27%, rgba(211, 62, 62, 0.4) 100%)}:host(.bright-orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.72) 0%, rgba(195, 119, 41, 0.85) 69.27%, rgba(195, 119, 41, 0.4) 100%)}:host(.bright-green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.72) 0%, rgba(0, 137, 11, 0.85) 69.27%, rgba(0, 137, 11, 0.4) 100%)}:host(.bright-slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.72) 0%, rgba(97, 116, 128, 0.85) 69.27%, rgba(97, 116, 128, 0.4) 100%)}:host(.radius-standard){border-radius:var(--ptc-border-radius-standard)}:host(.radius-large){border-radius:var(--ptc-border-radius-large)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
 
-const PtcOverlay = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.filterColor = undefined;
-    this.borderRadius = undefined;
-    this.overlayZIndex = 'z-index-auto';
-    this.styles = undefined;
-  }
-  async setOverlay(overlayName) {
-    this.filterColor = overlayName;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return h(Host, { class: classMap });
-  }
-  getCssClassMap() {
-    return {
-      [this.filterColor]: !!this.filterColor ? true : false,
-      [this.borderRadius]: !!this.borderRadius ? true : false,
-      [this.overlayZIndex]: true,
-    };
-  }
-};
+const PtcOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filterColor = undefined;
+    this.borderRadius = undefined;
+    this.overlayZIndex = 'z-index-auto';
+    this.styles = undefined;
+  }
+  async setOverlay(overlayName) {
+    this.filterColor = overlayName;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return h(Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.filterColor]: !!this.filterColor ? true : false,
+      [this.borderRadius]: !!this.borderRadius ? true : false,
+      [this.overlayZIndex]: true,
+    };
+  }
+};
 PtcOverlay.style = ptcOverlayCss;
 
 export { PtcOverlay as ptc_overlay };