@ptcwebops/ptcw-design 1.2.8 → 1.3.0

package/dist/collection/components/dynamic-box-bundle/dynamic-box-bundle.css

@@ -0,0 +1,53 @@
+:host {
+  display: block;
+}
+
+:host .d-box {
+  width: 100%;
+  height: 550px;
+  position: relative;
+}
+:host .d-box.hovering .top-image {
+  background-image: linear-gradient(0deg, rgba(242, 242, 242, 0), #f3f3f3);
+}
+:host .d-box.hovering .content {
+  height: 100%;
+}
+:host .top-image {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20%;
+  z-index: 99;
+}
+:host .top-image img {
+  width: 405px;
+  height: 40px;
+}
+@media only screen and (min-width: 992px) {
+  :host .top-image img {
+    height: 35px;
+  }
+}
+:host .content {
+  height: 80%;
+  box-shadow: 0 0 0 1px #f3f3f3;
+  width: 100%;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+}
+:host p {
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-p);
+  margin: 0px;
+  padding: 40px;
+  box-sizing: border-box;
+}
+@media only screen and (min-width: 1200px) {
+  :host p {
+    padding: 40px;
+  }
+}

package/dist/collection/components/dynamic-box-bundle/dynamic-box-bundle.js

@@ -0,0 +1,114 @@
+import { Host, h } from '@stencil/core';
+export class DynamicBoxBundle {
+  constructor() {
+    this.topImgSrc = 'https://www.ptc.com/-/media/Images/new-org/logos/PTC-logo.svg';
+    this.topImgAlt = 'image';
+    this.boxHeight = undefined;
+    this.isHovering = false;
+  }
+  handleMouseOver() {
+    if (window.innerWidth >= 1200) {
+      this.isHovering = true;
+      //this.el.style.height = `${this.el.offsetHeight + 50}px`;
+    }
+  }
+  handleMouseOut() {
+    if (window.innerWidth >= 1200) {
+      this.isHovering = false;
+      //this.el.style.height = '';
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `d-box ${this.isHovering && window.innerWidth >= 1200 ? 'hovering' : ''}` }, h("div", { class: "top-image" }, h("img", { src: this.topImgSrc, alt: this.topImgAlt })), h("div", { class: "content" }, h("slot", { name: "media" }))), h("p", null, h("slot", null))));
+  }
+  static get is() { return "dynamic-box-bundle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dynamic-box-bundle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dynamic-box-bundle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "topImgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "top-img-src",
+        "reflect": false,
+        "defaultValue": "'https://www.ptc.com/-/media/Images/new-org/logos/PTC-logo.svg'"
+      },
+      "topImgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "top-img-alt",
+        "reflect": false,
+        "defaultValue": "'image'"
+      },
+      "boxHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "box-height",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isHovering": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "mouseover",
+        "method": "handleMouseOver",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseout",
+        "method": "handleMouseOut",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/list-item/list-item.css

@@ -40,6 +40,25 @@
   outline: none;
 }
 
+:host(.list-green) {
+  display: block;
+  margin-bottom: 16px;
+}
+:host(.list-green) li a {
+  font-size: var(--ptc-font-size-xx-small);
+  color: var(--color-gray-10);
+  text-decoration: underline;
+  text-decoration-thickness: 1.5px;
+  text-decoration-color: var(--color-green-04);
+  font-weight: var(--ptc-font-weight-bold);
+  transition: color var(--ptc-transition-medium) var(--ptc-ease-inout);
+  line-height: var(--ptc-line-height-p);
+  text-underline-offset: 4px;
+}
+:host(.list-green) li a:hover {
+  color: var(--color-green-04);
+}
+
 :host(:not(.flush-before)) li::before {
   margin-right: 2px;
 }

package/dist/collection/components/list-item/list-item.js

@@ -37,8 +37,8 @@ export class ListItem {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'list-primary' | 'list-footer' | 'breadcrumb'",
-          "resolved": "\"breadcrumb\" | \"list-footer\" | \"list-primary\"",
+          "original": "'list-primary' | 'list-footer' | 'breadcrumb' | 'list-green'",
+          "resolved": "\"breadcrumb\" | \"list-footer\" | \"list-green\" | \"list-primary\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/organism-bundles/bundle-jumbotron-example/bundle-jumbotron-example.js

@@ -2,6 +2,7 @@ import { Host, h } from '@stencil/core';
 export class BundleJumbotronExample {
   constructor() {
     this.jumbotron = 'light';
+    this.isIframe = false;
   }
   render() {
     let $pngSrc;
@@ -15,6 +16,7 @@ export class BundleJumbotronExample {
     }
     else if (this.jumbotron === 'dark-video' || this.jumbotron === 'light-video') {
       $bgVideoSrc = "https://www.ptc.com/-/media/Videos/wind-turbine.mp4";
+      // if is iframe use src from iframe https://player.vimeo.com/video/749261406?h=5e6a60ffc5&muted=1&autoplay=1&loop=1&transparent=0&background=1&app_id=122963%22
     }
     else if (this.jumbotron === 'png') {
       $pngSrc = "https://images.unsplash.com/photo-1676883343977-5f8ecc36856c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzgyMjcxNDU&ixlib=rb-4.0.3&q=80&w=400";
@@ -27,7 +29,8 @@ export class BundleJumbotronExample {
     return (h(Host, null, h("ptc-jumbotron", Object.assign({ "jumbotron-type": this.jumbotron }, (!!$pngSrc && { pngSrc: $pngSrc }), (!!$gifSrc && { gifSrc: $gifSrc }), (!!$bgVideoSrc && { bgVideoSrc: $bgVideoSrc }), (!!$bgSrc && { bgSrc: $bgSrc }), (!!$popupVideo && { popupVideo: $popupVideo }), { "main-title": "Sed ut perspiciatis unde omnis iste natus" //bind main title data (multi-line)
       ,
       "sub-title": "totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." // bind sub title data (multi-line)
-    }), h("ptc-breadcrumb", Object.assign({ slot: "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'white' } : { color: 'primary-gray' }), (this.jumbotron === 'text' ? { position: 'center' } : {})), h("list-item", Object.assign({ "list-type": "breadcrumb", "link-href": "https://www.ptc.com/contact-us" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "PLM Video Hub"), h("list-item", Object.assign({ "list-type": "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "Current Page")), h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-primary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum dolor sit amet"), h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum"))));
+      ,
+      "is-iframe": this.isIframe }), h("ptc-breadcrumb", Object.assign({ slot: "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'white' } : { color: 'primary-gray' }), (this.jumbotron === 'text' ? { position: 'center' } : {})), h("list-item", Object.assign({ "list-type": "breadcrumb", "link-href": "https://www.ptc.com/contact-us" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "PLM Video Hub"), h("list-item", Object.assign({ "list-type": "breadcrumb" }, (this.jumbotron === 'dark' || this.jumbotron == 'dark-video' ? { color: 'light-gray' } : { color: 'primary-gray' })), "Current Page")), h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-primary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum dolor sit amet"), h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum"))));
   }
   static get is() { return "bundle-jumbotron-example"; }
   static get encapsulation() { return "shadow"; }
@@ -60,6 +63,24 @@ export class BundleJumbotronExample {
         "attribute": "jumbotron",
         "reflect": false,
         "defaultValue": "'light'"
+      },
+      "isIframe": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-iframe",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -77,11 +77,6 @@
   color: var(--color-gray-10);
   max-width: 100%;
 }
-.description div {
-  display: inline-block;
-  padding-right: var(--ptc-element-spacing-01);
-  vertical-align: middle;
-}
 
 .cta-link {
   color: var(--color-blue-07);

package/dist/collection/components/ptc-background-video/ptc-background-video.js

@@ -5,9 +5,11 @@ export class PtcBackgroundVideo {
     this.posterSrc = undefined;
     this.overlay = true;
     this.type = 'default';
+    this.isIframe = false;
   }
   render() {
-    return (h(Host, { class: this.type }, h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }), this.overlay
+    const videoConten = this.isIframe ? (h("iframe", { src: this.videoSrc, frameborder: 0, width: "100%", allow: "autoplay; fullscreen; picture-in-picture", class: "elementor-background-video-embed" })) : (h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
+    return (h(Host, { class: this.type }, videoConten, this.overlay
       ? h("div", { class: "video-overlay" })
       : "", this.type == 'default'
       ? h("slot", null)
@@ -96,6 +98,24 @@ export class PtcBackgroundVideo {
         "attribute": "type",
         "reflect": false,
         "defaultValue": "'default'"
+      },
+      "isIframe": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Is it a iframe?"
+        },
+        "attribute": "is-iframe",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -11,6 +11,7 @@ export class PtcCard {
     this.heading = undefined;
     this.headingTransform = 'none';
     this.cardDate = undefined;
+    this.country = undefined;
     this.styles = undefined;
     this.ribbonText = undefined;
     this.eventType = undefined;
@@ -31,7 +32,7 @@ export class PtcCard {
         h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading),
         h("slot", { name: "slot-after-heading" }),
       ]
-      : null, h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' ? (h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" })) : null, !!this.cardDate && this.cardType === 'hightlight-card' ? (h("ptc-date", { style: { marginBottom: "20px" }, "format-options": '{"year":"numeric","month":"long","day":"numeric"}', "date-string": `${this.cardDate}`, "date-styles": "span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}" })) : null)))));
+      : null, h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' ? (h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" })) : null, !!this.cardDate && this.cardType === 'hightlight-card' ? (h("ptc-date", { style: { marginBottom: "20px" }, "format-options": '{"year":"numeric","month":"long","day":"numeric"}', "date-string": `${this.cardDate}`, "date-styles": "span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}", country: this.country })) : null)))));
   }
   getCssClassMap() {
     return {
@@ -254,6 +255,23 @@ export class PtcCard {
         "attribute": "card-date",
         "reflect": false
       },
+      "country": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Date"
+        },
+        "attribute": "country",
+        "reflect": false
+      },
       "styles": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-container/ptc-container.js

@@ -5,10 +5,11 @@ export class PtcContainer {
     this.elevation = 'small';
     this.containerType = '';
     this.spacing = 'xxx-large';
+    this.styles = undefined;
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.getContainerClass() }, h("div", { class: classMap }, h("slot", null))));
+    return (h(Host, { class: this.getContainerClass() }, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h("slot", null))));
   }
   getContainerClass() {
     switch (this.containerType) {
@@ -114,6 +115,23 @@ export class PtcContainer {
         "attribute": "spacing",
         "reflect": false,
         "defaultValue": "'xxx-large'"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "styles",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.js

@@ -9,6 +9,7 @@ export class PtcJumbotron {
     this.gifSrc = undefined;
     this.bgVideoSrc = undefined;
     this.bgSrc = undefined;
+    this.isIframe = false;
     this.contentBackground = undefined;
     this.contentColor = undefined;
     this.textAlign = 'left';
@@ -43,7 +44,7 @@ export class PtcJumbotron {
         break;
       case 'dark-video':
       case 'light-video':
-        mediaElement = h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc });
+        mediaElement = h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe });
         break;
       default:
         mediaElement = h("ptc-img", { "img-url": this.bgSrc });
@@ -254,6 +255,24 @@ export class PtcJumbotron {
         },
         "attribute": "bg-src",
         "reflect": false
+      },
+      "isIframe": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-iframe",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -25,7 +25,8 @@
   bottom: 0;
   display: none;
 }
-:host .card-wrap {
+
+:host(.media-card) .card-wrap {
   display: flex;
   height: 100%;
   width: 100%;
@@ -34,14 +35,14 @@
   min-height: 329px;
   align-items: end;
 }
-:host .card-wrap .car-content {
+:host(.media-card) .card-wrap .car-content {
   padding: 20px 30px 30px 30px;
 }
-:host .card-wrap .car-content h4,
-:host .card-wrap .car-content h3 {
+:host(.media-card) .card-wrap .car-content h4,
+:host(.media-card) .card-wrap .car-content h3 {
   color: #fff;
 }
-:host .card-wrap .car-content h3 {
+:host(.media-card) .card-wrap .car-content h3 {
   position: relative;
   margin-bottom: 0;
   font-size: var(--ptc-font-size-large);
@@ -50,7 +51,7 @@
   display: inline;
   letter-spacing: 1.1px;
 }
-:host .card-wrap .car-content h3::before {
+:host(.media-card) .card-wrap .car-content h3::before {
   content: "";
   width: 100%;
   height: 3px;
@@ -60,7 +61,7 @@
   background-size: initial;
   top: -10px;
 }
-:host .card-wrap .car-content h4 {
+: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;
@@ -68,4 +69,9 @@
   font-style: normal;
   font-stretch: normal;
   letter-spacing: 0.6px;
+}
+
+:host(.bureau-card) {
+  height: 100%;
+  position: relative;
 }

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

@@ -2,6 +2,10 @@ 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.cardHref = undefined;
     this.target = '_self';
@@ -13,13 +17,40 @@ export class PtcMediaCard {
     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);
-    return (h(Host, { onmouseenter: () => (this.isHovered = true), onmouseleave: () => (this.isHovered = false), 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 == ".mp4" &&
-      h("video", { muted: true, autoPlay: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag.")), h("ptc-overlay", { "filter-color": "black-2" }), h("div", { class: "card-wrap" }, h("div", { class: "car-content" }, h("h4", null, this.category, " "), h("h3", null, this.heading))))));
+    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 is() { return "ptc-media-card"; }
   static get encapsulation() { return "shadow"; }
@@ -39,8 +70,8 @@ export class PtcMediaCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'media-card'",
-          "resolved": "\"media-card\"",
+          "original": "'media-card' | 'bureau-card'",
+          "resolved": "\"bureau-card\" | \"media-card\"",
           "references": {}
         },
         "required": false,
@@ -192,25 +223,18 @@ export class PtcMediaCard {
         },
         "attribute": "category",
         "reflect": false
-      },
-      "isHovered": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean variable for hover state"
-        },
-        "attribute": "is-hovered",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "isHovered": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "isHovered",
+        "methodName": "WatchStateHandler"
+      }];
+  }
 }

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

@@ -152,7 +152,7 @@
   min-width: 72px;
   max-width: 273px;
 }
-.wrapper-content slot:hover + .tooltip {
+.wrapper-content .slot-content:hover + .tooltip {
   visibility: visible;
   z-index: 9999;
 }

package/dist/collection/components/ptc-tooltip/ptc-tooltip.js

@@ -12,13 +12,13 @@ export class PtcTooltip {
     this.theme = 'standard';
   }
   addTruncatedClass() {
-    const appRoot = this.el.shadowRoot;
+    const appRoot = this.el;
     const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
     text.forEach(t => {
       t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
     });
   }
-  // Created this function to initialize the truncate function on specific elements like tabs 
+  // Created this function to initialize the truncate function on specific elements like tabs
   enableAddTruncatedClass(element) {
     const allTabHeaders = document.querySelectorAll(element);
     for (const element of Array.from(allTabHeaders)) {
@@ -33,18 +33,21 @@ export class PtcTooltip {
     }
   }
   componentDidLoad() {
-    this.addTruncatedClass();
+    //this.addTruncatedClass();
+    setTimeout(() => {
+      this.addTruncatedClass();
+    }, 1000);
     this.enableAddTruncatedClass('tab-header');
     this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
-    document.addEventListener("readystatechange", () => {
-      if (document.readyState === "complete") {
+    document.addEventListener('readystatechange', () => {
+      if (document.readyState === 'complete') {
         this.addTruncatedClass();
       }
     });
   }
   render() {
     if (this.mode == 'wrapper') {
-      return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: "wrapper-content" }, h("slot", null), h("div", { class: `tooltip ${this.position} ${this.theme}` }, h("slot", { name: "description" }), this.description))));
+      return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: "wrapper-content" }, h("div", { class: "slot-content" }, h("slot", null)), h("div", { class: `tooltip ${this.position} ${this.theme}` }, h("slot", { name: "description" }), this.description))));
     }
     else {
       const classMap = this.getCssClassMap();
@@ -55,7 +58,7 @@ export class PtcTooltip {
         truncatedText = truncatedText.substring(0, lastSpace);
         truncatedText += '... ';
       }
-      return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), this.textLines > 0 && !!this.textLines ? h("div", { class: "ellipsis-by-line-boxing", style: cutOff }, this.description) : h("div", { class: classMap }, truncatedText), h("div", { class: `tooltip ${this.position} ${this.theme}` }, this.description)));
+      return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), this.textLines > 0 && !!this.textLines ? (h("div", { class: "ellipsis-by-line-boxing", style: cutOff }, this.description)) : (h("div", { class: classMap }, truncatedText)), h("div", { class: `tooltip ${this.position} ${this.theme}` }, this.description)));
     }
   }
   getCssClassMap() {
@@ -76,7 +79,7 @@ export class PtcTooltip {
     return result;
   }
   static get is() { return "ptc-tooltip"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["ptc-tooltip.scss"]