@ptcwebops/ptcw-design 0.8.4 → 0.8.7

package/dist/collection/collection-manifest.json

@@ -3,10 +3,12 @@
     "./components/dropdown-item/dropdown-item.js",
     "./components/icon-asset/icon-asset.js",
     "./components/list-item/list-item.js",
+    "./components/max-width-container/max-width-container.js",
     "./components/my-component/my-component.js",
     "./components/ptc-accordion/ptc-accordion.js",
     "./components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.js",
     "./components/ptc-announcement/ptc-announcement.js",
+    "./components/ptc-background-video/ptc-background-video.js",
     "./components/ptc-breadcrumb/ptc-breadcrumb.js",
     "./components/ptc-button/ptc-button.js",
     "./components/ptc-card/ptc-card.js",
@@ -59,8 +61,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "2.22.1",
+    "typescriptVersion": "4.9.4"
   },
   "collections": [
     {

package/dist/collection/components/icon-asset/icon-asset.css

@@ -11,8 +11,8 @@ svg {
   transition: all var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
 svg.micro {
-  width: calc(var(--ptc-font-size-x-small)/2);
-  height: calc(var(--ptc-font-size-x-small)/2);
+  width: calc(var(--ptc-font-size-x-small) / 2);
+  height: calc(var(--ptc-font-size-x-small) / 2);
 }
 svg.xxx-small {
   width: var(--ptc-font-size-xxx-small);

package/dist/collection/components/max-width-container/max-width-container.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+:host(.max-width-container)
+{
+  margin: 0 auto;
+}

package/dist/collection/components/max-width-container/max-width-container.js

@@ -0,0 +1,80 @@
+import { h, Host } from '@stencil/core';
+export class MaxWidthContainer {
+  constructor() {
+    this.maxWidth = undefined;
+    this.breakpoint = 768;
+  }
+  componentDidLoad() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+  render() {
+    return (h(Host, { class: "max-width-container" }, h("slot", null)));
+  }
+  handleResize() {
+    // const selectedContainer = this.el.querySelector('.max-width-container');
+    if (this.el) {
+      if (window.innerWidth >= this.breakpoint) {
+        this.el.style.maxWidth = `${this.maxWidth}px`;
+      }
+      else {
+        this.el.style.maxWidth = 'initial';
+      }
+    }
+  }
+  static get is() { return "max-width-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["max-width-container.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["max-width-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "maxWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
+      "breakpoint": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "breakpoint",
+        "reflect": false,
+        "defaultValue": "768"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -23,7 +23,6 @@ export class PtcAnnouncement {
     this.windowSize = 'mobile';
   }
   handleResize() {
-    //console.log('window width:', window.innerWidth);
     if (window.innerWidth < 992) {
       this.windowSize = 'mobile';
     }

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

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+  position: relative;
+}
+:host video {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -100;
+  object-fit: cover;
+}
+:host .video-overlay {
+  z-index: 1;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0.8;
+  background-image: linear-gradient(270deg, rgba(30, 38, 38, 0) 26%, #1e2626);
+}
+
+:host(.legacy) {
+  display: block;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -100;
+}
+:host(.legacy) video {
+  object-fit: cover;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

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

@@ -0,0 +1,102 @@
+import { Host, h } from '@stencil/core';
+export class PtcBackgroundVideo {
+  constructor() {
+    this.videoSrc = undefined;
+    this.posterSrc = undefined;
+    this.overlay = true;
+    this.type = 'default';
+  }
+  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
+      ? h("div", { class: "video-overlay" })
+      : "", this.type == 'default'
+      ? h("slot", null)
+      : ""));
+  }
+  static get is() { return "ptc-background-video"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-background-video.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-background-video.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "videoSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Video url"
+        },
+        "attribute": "video-src",
+        "reflect": false
+      },
+      "posterSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Poster url(Placeholder image till the video get the loaded)"
+        },
+        "attribute": "poster-src",
+        "reflect": false
+      },
+      "overlay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Overlay(Optional, By default is true)"
+        },
+        "attribute": "overlay",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'legacy'",
+          "resolved": "\"default\" | \"legacy\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Video implementation type:\r\n default: Content need to add in tag \r\n     Ex: <ptc-background-video>Content  </ptc-background-video>\r\n legacy: Add the blank tag in any other setcon having relative parent.\r\n     Ex: <div class=\"section\" style=\"position: relative;\">\r\n            <ptc-background-video></ptc-background-video>\r\n            Content \r\n         </div>"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'default'"
+      }
+    };
+  }
+}

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

@@ -15,7 +15,6 @@ export class PtcButton {
   }
   clickEventHandler() {
     this.clickEvent.emit();
-    //console.log('click!');
   }
   render() {
     const classMap = this.getCssClassMap();

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

@@ -131,7 +131,7 @@
   border-radius: var(--ptc-border-radius-standard);
 }
 :host(.clip-edge-card) .card-body {
-  transform: translateY(calc((-1) * var(--ptc-element-spacing-04)));
+  transform: translateY(calc(-1 * var(--ptc-element-spacing-04)));
   overflow: hidden;
   width: calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-04));
   font-size: var(--ptc-font-size-xx-small);

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

@@ -28,8 +28,13 @@
   cursor: pointer;
 }
 
-:host(.extra-tall) .ptc-card-bottom-wrapper {
+:host(.extra-tall) {
   position: absolute;
+  top: 0;
+  left: 0;
+}
+:host(.extra-tall) .ptc-card-bottom-wrapper {
+  position: relative;
   top: 0px;
   left: 0px;
   bottom: 0px;
@@ -48,6 +53,11 @@
   }
 }
 @media only screen and (min-width: 992px) {
+  :host(.extra-tall) .ptc-card-bottom-wrapper {
+    padding-top: var(--ptc-layout-spacing-05);
+  }
+}
+@media only screen and (min-width: 1200px) {
   :host(.extra-tall) .ptc-card-bottom-wrapper {
     padding-top: calc(var(--ptc-layout-spacing-04) + var(--ptc-layout-spacing-05));
   }

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

@@ -203,10 +203,10 @@
 }
 
 :host(.extra-tall) .ptc-card-content-wrapper {
-  height: 435px;
+  height: auto;
 }
 :host(.extra-tall) .ptc-card-content-wrapper ::slotted(*) {
-  height: 435px;
+  height: auto;
 }
 
 :host(.color-outlined) {
@@ -220,6 +220,14 @@
   height: 235px;
 }
 
+@media only screen and (min-width: 480px) {
+  :host(.extra-tall) .ptc-card-content-wrapper {
+    height: 435px;
+  }
+  :host(.extra-tall) .ptc-card-content-wrapper ::slotted(*) {
+    height: 435px;
+  }
+}
 @media only screen and (min-width: 768px) {
   :host(.card-tall) .ptc-card-content-wrapper {
     height: 325px;

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

@@ -23,6 +23,16 @@ export class PtcCardContent {
       }
     }
   }
+  async setHeight(height) {
+    this.el.style.height = height + 'px';
+    const image = this.el.querySelector('ptc-picture');
+    image.style.height = height + 'px';
+  }
+  async removeInlineHeight() {
+    this.el.style.removeProperty('height');
+    const image = this.el.querySelector('ptc-picture');
+    image.style.removeProperty('height');
+  }
   render() {
     const classMap = this.getCssClassMap();
     return (h(Host, { part: "card-content", class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-content-wrapper" }, h("slot", null))));
@@ -133,5 +143,44 @@ export class PtcCardContent {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setHeight": {
+        "complexType": {
+          "signature": "(height: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "removeInlineHeight": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -6,18 +6,35 @@ export class PtcCardPlm {
     this.linkTitle = undefined;
     this.linkTarget = '_self';
   }
+  /** Internal Screen Size State */
+  // @State() mql: MediaQueryList;
+  handleResize() {
+    this.checkScreenSize();
+  }
   hoverEventHandler() {
     if (this.el.classList.contains('extra-tall')) {
       this.hoverEvent.emit();
       this.el.classList.add('extraT-overlay');
     }
+    if (this.el.classList.contains('color-outlined')) {
+      this.hoverEvent.emit();
+      const cardOverlay = this.el.querySelector('ptc-overlay');
+      cardOverlay.setOverlay('black-5');
+    }
   }
   leaveEventHandler() {
     if (this.el.classList.contains('extra-tall')) {
       this.hoverEvent.emit();
-      console.log(this.el.classList);
       this.el.classList.remove('extraT-overlay');
     }
+    if (this.el.classList.contains('color-outlined')) {
+      this.hoverEvent.emit();
+      const cardOverlay = this.el.querySelector('ptc-overlay');
+      cardOverlay.setOverlay('black-4');
+    }
+  }
+  componentDidLoad() {
+    this.checkScreenSize();
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -29,6 +46,22 @@ export class PtcCardPlm {
       [this.cardType]: this.cardType ? true : false,
     };
   }
+  getBtmContentHeight() {
+    const bottomContent = this.el.querySelector('ptc-card-bottom');
+    return bottomContent.offsetHeight;
+  }
+  checkScreenSize() {
+    if (window.innerWidth < 768) {
+      if (this.cardType === 'extra-tall') {
+        const cardContent = this.el.querySelector('ptc-card-content');
+        cardContent.setHeight(this.getBtmContentHeight());
+      }
+    }
+    else {
+      const cardContent = this.el.querySelector('ptc-card-content');
+      cardContent.removeInlineHeight();
+    }
+  }
   static get is() { return "ptc-card-wrapper"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -148,4 +181,13 @@ export class PtcCardPlm {
       }];
   }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

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

@@ -32,7 +32,6 @@ export class PtcDynamicCard {
     };
   }
   handleResize() {
-    //console.log('window width:', window.innerWidth);
     if (window.innerWidth < 1200) {
       this.cardStatus = 'mobile';
     }

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

@@ -27,7 +27,6 @@ export class PtcImg {
     this.setResponsiveBg();
   }
   componentWillUpdate() {
-    // console.log('componentWillUpdate!');
     this.addIntersectionObserver();
     this.setResponsiveBg();
   }
@@ -35,7 +34,6 @@ export class PtcImg {
   setResponsiveBg() {
     // Define local variables
     let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    // console.log('current breakpoint: ' + currentBreakpoint);
     // Loop through all target elements
     for (var i = 0, len = backgrounds.length; i < len; i++) {
       // Set current variables
@@ -65,7 +63,6 @@ export class PtcImg {
           if (entry.isIntersecting) {
             const image = entry.target;
             image.classList.remove('lazy-bg');
-            // console.log('loaded');
             bgObserver.unobserve(image);
           }
         });

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

@@ -37,7 +37,6 @@ export class PtcList {
         i.type = item.getAttribute('link-type');
         result.push(i);
       });
-      console.log();
     }
     return result;
   }