@ptcwebops/ptcw-design 6.3.65-beta → 6.3.68-beta

package/dist/collection/components/ptc-media-card/ptc-media-card.js

@@ -1,20 +1,20 @@
-import { Host, h } from '@stencil/core';
-import { getFileExtension } from '../../utils/utils';
+import { Host, h } from "@stencil/core";
+import { getFileExtension } from "../../utils/utils";
 export class PtcMediaCard {
   constructor() {
     /**
      * ref video element
      */
     this.videoEle = undefined;
-    this.cardType = 'media-card';
+    this.cardType = "media-card";
     this.cardHref = undefined;
-    this.target = '_self';
+    this.target = "_self";
     this.rel = undefined;
     this.activeBackgroundImage = undefined;
     this.activeBackgroundImageAlt = undefined;
     this.hoverBackgroundImage = undefined;
     this.heading = undefined;
-    this.headingTransform = 'none';
+    this.headingTransform = "none";
     this.category = undefined;
     this.ariaLabel = undefined;
     this.iconImage = undefined;
@@ -29,14 +29,16 @@ export class PtcMediaCard {
     }
   }
   getCardText() {
-    if (this.cardType === 'media-card') {
+    if (this.cardType === "media-card") {
       return [
         h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("p", null, this.category, " "), h("h3", null, this.heading))),
       ];
     }
   }
   setTabNavigatedState() {
-    this.el.parentElement.tagName === 'DYNAMIC-PRODUCT-DRIVERS' ? this.isTabNavigated = false : this.isTabNavigated = true;
+    this.el.parentElement.tagName === "DYNAMIC-PRODUCT-DRIVERS"
+      ? (this.isTabNavigated = false)
+      : (this.isTabNavigated = true);
   }
   componentWillLoad() {
     this.setTabNavigatedState();
@@ -45,22 +47,38 @@ export class PtcMediaCard {
     this.ariaLabel = this.getLastStringAfterSlash(this.cardHref);
   }
   getLastStringAfterSlash(url) {
-    const parts = url.split('/');
+    const parts = url.split("/");
     return parts[parts.length - 1];
   }
   render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
+    const Tag = !!this.cardHref ? "a" : "div";
     const isVideoUrl = this.hoverBackgroundImage
-      ? getFileExtension(this.hoverBackgroundImage) === '.mp4' || this.hoverBackgroundImage.includes('.mp4')
+      ? getFileExtension(this.hoverBackgroundImage) === ".mp4" ||
+        this.hoverBackgroundImage.includes(".mp4")
         ? true
         : false
       : false;
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false), style: this.cardType != 'case-study-icon'
+    return (h(Host, { class: classMap, onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false), style: this.cardType != "case-study-icon"
         ? this.isHovered && this.hoverBackgroundImage
-          ? { backgroundImage: `url(${this.hoverBackgroundImage})` }
-          : { backgroundImage: `url(${this.activeBackgroundImage})` }
-        : {} }, h("slot", { name: "seo-content" }), this.cardType != 'case-study-icon' ? (h("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h(Tag, Object.assign({ class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel }, (this.isTabNavigated ? { tabindex: 0 } : { tabindex: -1 }), { "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }), isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' }, tabindex: "-1" }, 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()))) : null, this.cardType === 'case-study-icon' ? (h("div", { id: this.trackerId, class: "tracker-div" }, h("a", Object.assign({ class: "case-study-img-anchor mf-listen", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, (this.isTabNavigated ? { tabindex: 0 } : { tabindex: -1 })), h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage, alt: this.activeBackgroundImageAlt }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage, alt: this.iconImageAlt })))) : null));
+          ? {
+            backgroundImage: `url(${this.hoverBackgroundImage})`,
+          }
+          : {
+            backgroundImage: `url(${this.activeBackgroundImage})`,
+          }
+        : {} }, h("slot", { name: "seo-content" }), this.cardType != "case-study-icon" ? (h("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h(Tag, Object.assign({ class: "anchor-wrap", target: this.target, href: this.cardHref, rel: this.rel }, (this.isTabNavigated
+      ? { tabindex: 0 }
+      : { tabindex: -1 }), { "aria-label": this.cardHref
+        ? "Read more about " + this.ariaLabel
+        : undefined }), isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: (el) => (this.videoEle = el), style: this.isHovered
+        ? { display: "block" }
+        : { display: "none" }, tabindex: "-1" }, 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()))) : null, this.cardType === "case-study-icon" ? (h("div", { id: this.trackerId, class: "tracker-div" }, h("a", Object.assign({ class: "case-study-img-anchor mf-listen", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref
+        ? "Read more about " + this.ariaLabel
+        : undefined }, (this.isTabNavigated
+      ? { tabindex: 0 }
+      : { tabindex: -1 })), h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage, alt: this.activeBackgroundImageAlt }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage, alt: this.iconImageAlt })))) : null));
   }
   getCssClassMap() {
     return {
@@ -85,7 +103,7 @@ export class PtcMediaCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'media-card' | 'bureau-card' | 'case-study-icon'",
+          "original": "\"media-card\" | \"bureau-card\" | \"case-study-icon\"",
           "resolved": "\"bureau-card\" | \"case-study-icon\" | \"media-card\"",
           "references": {}
         },
@@ -97,7 +115,7 @@ export class PtcMediaCard {
         },
         "attribute": "card-type",
         "reflect": false,
-        "defaultValue": "'media-card'"
+        "defaultValue": "\"media-card\""
       },
       "cardHref": {
         "type": "string",
@@ -133,7 +151,7 @@ export class PtcMediaCard {
         },
         "attribute": "target",
         "reflect": false,
-        "defaultValue": "'_self'"
+        "defaultValue": "\"_self\""
       },
       "rel": {
         "type": "string",
@@ -225,7 +243,7 @@ export class PtcMediaCard {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'uppercase' | 'lowercase' | 'capitalize' | 'none'",
+          "original": "| \"uppercase\"\r\n\t\t| \"lowercase\"\r\n\t\t| \"capitalize\"\r\n\t\t| \"none\"",
           "resolved": "\"capitalize\" | \"lowercase\" | \"none\" | \"uppercase\"",
           "references": {}
         },
@@ -237,7 +255,7 @@ export class PtcMediaCard {
         },
         "attribute": "heading-transform",
         "reflect": false,
-        "defaultValue": "'none'"
+        "defaultValue": "\"none\""
       },
       "category": {
         "type": "string",

package/dist/collection/components/ptc-minimized-nav/ptc-minimized-nav.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-minimized-nav/ptc-minimized-nav.js

@@ -1,14 +1,14 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcMinimizedNav {
   constructor() {
-    this.linkUrl = '#';
-    this.imgSrc = '';
-    this.imgAlt = 'PTC';
-    this.navType = 'minimized-header';
+    this.linkUrl = "#";
+    this.imgSrc = "";
+    this.imgAlt = "PTC";
+    this.navType = "minimized-header";
     this.trackerId = undefined;
   }
   render() {
-    return (h(Host, null, this.navType == 'minimized-header' ? (h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "ptc-container" }, h("a", { class: "mini-navbar-logo mf-listen", href: this.linkUrl, tabindex: "0", id: this.trackerId }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == 'minimized-footer' ? (h("div", { 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))))) : null));
+    return (h(Host, null, this.navType == "minimized-header" ? (h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "ptc-container" }, h("a", { class: "mini-navbar-logo mf-listen", href: this.linkUrl, tabindex: "0", id: this.trackerId }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))) : null, this.navType == "minimized-footer" ? (h("div", { 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))))) : null));
   }
   static get is() { return "ptc-minimized-nav"; }
   static get encapsulation() { return "shadow"; }
@@ -40,7 +40,7 @@ export class PtcMinimizedNav {
         },
         "attribute": "link-url",
         "reflect": true,
-        "defaultValue": "'#'"
+        "defaultValue": "\"#\""
       },
       "imgSrc": {
         "type": "string",
@@ -58,7 +58,7 @@ export class PtcMinimizedNav {
         },
         "attribute": "img-src",
         "reflect": true,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "imgAlt": {
         "type": "string",
@@ -76,7 +76,7 @@ export class PtcMinimizedNav {
         },
         "attribute": "img-alt",
         "reflect": true,
-        "defaultValue": "'PTC'"
+        "defaultValue": "\"PTC\""
       },
       "navType": {
         "type": "string",
@@ -94,7 +94,7 @@ export class PtcMinimizedNav {
         },
         "attribute": "nav-type",
         "reflect": false,
-        "defaultValue": "'minimized-header'"
+        "defaultValue": "\"minimized-header\""
       },
       "trackerId": {
         "type": "string",

package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.css

@@ -174,8 +174,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -194,8 +196,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -256,7 +260,8 @@ ptc-link, ptc-square-card,
   font-size: var(--ptc-font-size-x-small);
   line-height: var(--ptc-line-height-densest);
 }
-.mobileSelect .content .btnBar .ensure, .mobileSelect .content .btnBar .cancel {
+.mobileSelect .content .btnBar .ensure,
+.mobileSelect .content .btnBar .cancel {
   transform: translateY(12.5px);
   width: 125px;
 }
@@ -276,6 +281,7 @@ ptc-responsive-wrapper.medium .mobile-select-wrapper, ptc-responsive-wrapper.lar
   display: none;
 }
 
-.ms-mobile-select.ms-show .ms-cancel, .ms-mobile-select.ms-show .ms-ensure {
+.ms-mobile-select.ms-show .ms-cancel,
+.ms-mobile-select.ms-show .ms-ensure {
   width: auto;
 }

package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import MobileSelect from './mobile-select';
+import { h } from "@stencil/core";
+import MobileSelect from "./mobile-select";
 class MobileSelectedItem {
 }
 export class PtcMobileSelect {
@@ -7,19 +7,19 @@ export class PtcMobileSelect {
     this.triggerName = undefined;
     this.selectedText = undefined;
     this.wheelData = undefined;
-    this.selectedId = '';
-    this.ensureBtnText = 'Confirm';
-    this.cancelBtnText = 'Cancel';
+    this.selectedId = "";
+    this.ensureBtnText = "Confirm";
+    this.cancelBtnText = "Cancel";
     this.listTitle = undefined;
     this.notFoundPopupProceedButton = undefined;
   }
   componentWillLoad() {
     this.notFoundPopupProceedButton = document.querySelector("#translation-popup-button");
     if (this.notFoundPopupProceedButton) {
-      this.notFoundPopupProceedButton.addEventListener('click', () => {
+      this.notFoundPopupProceedButton.addEventListener("click", () => {
         let footerNav = document.querySelector("footer-nav");
         if (footerNav) {
-          let currentLang = footerNav.getAttribute('ms-selected-text');
+          let currentLang = footerNav.getAttribute("ms-selected-text");
           let langText = document.querySelector("footer-nav #lang-ddl");
           if (langText && currentLang) {
             langText.innerHTML = currentLang;
@@ -42,21 +42,27 @@ export class PtcMobileSelect {
     }
   }
   render() {
-    return (h("div", { class: "mobile-select-wrapper", "aria-selectlanguage": "Select Language", tabindex: "0", onKeyPress: (e) => { this.wrapperClick(e); } }, h("div", { onClick: (e) => { this.wrapperClick(e); } }, h("span", { id: this.triggerName }, this.selectedText), h("icon-asset", { type: "ptc", size: "x-small", name: "lang-drop-arrow", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px); width: 13px !important;height: 10px !important;}" }))));
+    return (h("div", { class: "mobile-select-wrapper", "aria-selectlanguage": "Select Language", tabindex: "0", onKeyPress: (e) => {
+        this.wrapperClick(e);
+      } }, h("div", { onClick: (e) => {
+        this.wrapperClick(e);
+      } }, h("span", { id: this.triggerName }, this.selectedText), h("icon-asset", { type: "ptc", size: "x-small", name: "lang-drop-arrow", color: "white", "is-mobile-select": "true", "injected-style": "svg.ismobileselect{transform:translateX(10px); width: 13px !important;height: 10px !important;}" }))));
   }
   componentDidRender() {
     let that = this; //input current lang
     let storeIndex = 0;
     let mySelect = new MobileSelect({
       trigger: `#${this.triggerName}`,
-      title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2', 'test3'] }],
+      title: `${this.listTitle ? this.listTitle : ""}`,
+      wheels: this.wheelData
+        ? [{ data: this.wheelData }]
+        : [{ data: ["test1", "test2", "test3"] }],
       position: [0],
       ensureBtnText: this.ensureBtnText,
       cancelBtnText: this.cancelBtnText,
-      ensureBtnColor: 'var(--color-gray-12)',
-      cancelBtnColor: 'var(--color-gray-12)',
-      titleColor: 'var(--color-gray-12)',
+      ensureBtnColor: "var(--color-gray-12)",
+      cancelBtnColor: "var(--color-gray-12)",
+      titleColor: "var(--color-gray-12)",
       onShow: function (_1, _2, context) {
         if (that.selectedId) {
           try {
@@ -77,9 +83,9 @@ export class PtcMobileSelect {
         this.selectionChanged.emit({
           sender: context,
           index: indexArr && indexArr.length > 0 ? indexArr[0] : -1,
-          data: data && data.length > 0 ? data[0] : undefined
+          data: data && data.length > 0 ? data[0] : undefined,
         });
-        if (data && data[0] && data[0].id != '#') {
+        if (data && data[0] && data[0].id != "#") {
           window.location.href = data[0].id;
         }
         else {
@@ -96,11 +102,11 @@ export class PtcMobileSelect {
     mySelect.locatePosition(0, storeIndex);
   }
   getMobileSelectedItem(context) {
-    let result = new MobileSelectedItem;
+    let result = new MobileSelectedItem();
     result.id = this.selectedId;
-    let liEle = context.mobileSelect.querySelectorAll('[data-id]');
+    let liEle = context.mobileSelect.querySelectorAll("[data-id]");
     liEle.forEach((currentValue, currentIndex) => {
-      if (currentValue.getAttribute('data-id') == result.id) {
+      if (currentValue.getAttribute("data-id") == result.id) {
         result.index = currentIndex;
         result.value = currentValue.textContent;
         return;
@@ -186,7 +192,7 @@ export class PtcMobileSelect {
         },
         "attribute": "selected-id",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "ensureBtnText": {
         "type": "string",
@@ -204,7 +210,7 @@ export class PtcMobileSelect {
         },
         "attribute": "ensure-btn-text",
         "reflect": false,
-        "defaultValue": "'Confirm'"
+        "defaultValue": "\"Confirm\""
       },
       "cancelBtnText": {
         "type": "string",
@@ -222,7 +228,7 @@ export class PtcMobileSelect {
         },
         "attribute": "cancel-btn-text",
         "reflect": false,
-        "defaultValue": "'Cancel'"
+        "defaultValue": "\"Cancel\""
       },
       "listTitle": {
         "type": "string",

package/dist/collection/components/ptc-modal/ptc-modal.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */