@ptcwebops/ptcw-design 3.2.2 → 3.2.3

package/dist/collection/components/ptc-back-to-top/ptc-back-to-top.js

@@ -1,97 +1,97 @@
-import { Host, h } from '@stencil/core';
-export class PtcBackToTop {
-  constructor() {
-    this.handleScroll = () => {
-      const scrollY = window.pageYOffset || document.documentElement.scrollTop;
-      const containerHeight = document.querySelector('.ptc-container-relative');
-      this.showButton = scrollY > window.innerHeight * 1;
-      if (containerHeight) {
-        if (this.showButton && scrollY <= (containerHeight.clientHeight - window.innerHeight)) {
-          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
-          if (btnelement) {
-            if (!btnelement.classList.contains('back-to-top-button-fixed')) {
-              btnelement.classList.add('back-to-top-button-fixed');
-            }
-            if (btnelement.classList.contains('back-to-top-button-absolute')) {
-              btnelement.classList.remove('back-to-top-button-absolute');
-            }
-          }
-        }
-        else if (this.showButton && scrollY > (containerHeight.clientHeight - window.innerHeight)) {
-          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
-          if (btnelement) {
-            if (btnelement.classList.contains('back-to-top-button-fixed')) {
-              btnelement.classList.remove('back-to-top-button-fixed');
-            }
-            if (!btnelement.classList.contains('back-to-top-button-absolute')) {
-              btnelement.classList.add('back-to-top-button-absolute');
-            }
-          }
-        }
-      }
-      else {
-        if (this.showButton) {
-          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
-          if (btnelement) {
-            if (!btnelement.classList.contains('back-to-top-button-fixed')) {
-              btnelement.classList.add('back-to-top-button-fixed');
-            }
-          }
-        }
-      }
-    };
-    this.showButton = false;
-  }
-  componentDidLoad() {
-    window.addEventListener('scroll', this.handleScroll);
-  }
-  disconnectedCallback() {
-    window.removeEventListener('scroll', this.handleScroll);
-  }
-  handleClick() {
-    this.scrollToTop();
-  }
-  scrollToTop() {
-    if ('scrollBehavior' in document.documentElement.style) {
-      // Smooth scrolling is supported
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-    else {
-      // Fallback for browsers that do not support smooth scrolling
-      window.scrollTo(0, 0);
-    }
-  }
-  render() {
-    return (h(Host, null, this.showButton && (h("button", { class: 'back-to-top-button', title: "Back to Top" }, h("span", { class: 'arrow' }, h("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M15.5248 11.625L8.9998 5.1L2.4748 11.625L0.112305 9.2625L8.9998 0.375L17.8873 9.2625L15.5248 11.625Z", fill: "#323B42" }))), h("span", { class: 'text' }, "Back to Top")))));
-  }
-  static get is() { return "ptc-back-to-top"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-back-to-top.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-back-to-top.css"]
-    };
-  }
-  static get states() {
-    return {
-      "showButton": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcBackToTop {
+  constructor() {
+    this.handleScroll = () => {
+      const scrollY = window.pageYOffset || document.documentElement.scrollTop;
+      const containerHeight = document.querySelector('.ptc-container-relative');
+      this.showButton = scrollY > window.innerHeight * 1;
+      if (containerHeight) {
+        if (this.showButton && scrollY <= (containerHeight.clientHeight - window.innerHeight)) {
+          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
+          if (btnelement) {
+            if (!btnelement.classList.contains('back-to-top-button-fixed')) {
+              btnelement.classList.add('back-to-top-button-fixed');
+            }
+            if (btnelement.classList.contains('back-to-top-button-absolute')) {
+              btnelement.classList.remove('back-to-top-button-absolute');
+            }
+          }
+        }
+        else if (this.showButton && scrollY > (containerHeight.clientHeight - window.innerHeight)) {
+          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
+          if (btnelement) {
+            if (btnelement.classList.contains('back-to-top-button-fixed')) {
+              btnelement.classList.remove('back-to-top-button-fixed');
+            }
+            if (!btnelement.classList.contains('back-to-top-button-absolute')) {
+              btnelement.classList.add('back-to-top-button-absolute');
+            }
+          }
+        }
+      }
+      else {
+        if (this.showButton) {
+          const btnelement = this.el.shadowRoot.querySelector('.back-to-top-button');
+          if (btnelement) {
+            if (!btnelement.classList.contains('back-to-top-button-fixed')) {
+              btnelement.classList.add('back-to-top-button-fixed');
+            }
+          }
+        }
+      }
+    };
+    this.showButton = false;
+  }
+  componentDidLoad() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+  handleClick() {
+    this.scrollToTop();
+  }
+  scrollToTop() {
+    if ('scrollBehavior' in document.documentElement.style) {
+      // Smooth scrolling is supported
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+    else {
+      // Fallback for browsers that do not support smooth scrolling
+      window.scrollTo(0, 0);
+    }
+  }
+  render() {
+    return (h(Host, null, this.showButton && (h("button", { class: 'back-to-top-button', title: "Back to Top" }, h("span", { class: 'arrow' }, h("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M15.5248 11.625L8.9998 5.1L2.4748 11.625L0.112305 9.2625L8.9998 0.375L17.8873 9.2625L15.5248 11.625Z", fill: "#323B42" }))), h("span", { class: 'text' }, "Back to Top")))));
+  }
+  static get is() { return "ptc-back-to-top"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-back-to-top.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-back-to-top.css"]
+    };
+  }
+  static get states() {
+    return {
+      "showButton": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -1,200 +1,200 @@
-import { Host, h } from '@stencil/core';
-export class PtcBackgroundVideo {
-  constructor() {
-    this.videoSrc = undefined;
-    this.posterSrc = undefined;
-    this.overlay = true;
-    this.playButtonTitle = undefined;
-    this.pauseButtonTitle = undefined;
-    this.paused = undefined;
-    this.type = 'default';
-    this.isIframe = false;
-  }
-  // componentDidLoad() {
-  //   if(this.isIframe){
-  //     const iframe:HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
-  //     const iframeDoc = iframe.contentDocument
-  //     const iframeVideo = iframeDoc.querySelector('video');
-  //     console.log("iframe ele: " + iframeDoc.querySelectorAll('video'));
-  //     iframeVideo.style.objectFit = 'cover';
-  //   }
-  // }
-  // @Method()
-  // async toggleVideo() {
-  //   // show a prompt
-  //   this.paused = !this.paused;
-  //   let video = this.el.shadowRoot.querySelector('video') as HTMLVideoElement;
-  //   if (video) {
-  //     if (this.paused) {
-  //       video.pause();
-  //     } else {
-  //       video.play().catch(z => console.error(z));
-  //     }
-  //   }
-  //   console.log('Hello, I am a publish method from ptc-background-video!');
-  // }
-  componentWillLoad() {
-    this.paused = false;
-  }
-  render() {
-    const videoContent = this.isIframe ? (h("div", { class: "iframe-wrapper" }, h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "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 }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", { class: "play-button" }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }" }, h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e) }, h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h("div", { class: "video-overlay" }) : '', this.type == 'default' ? h("slot", null) : ''));
-  }
-  toggleVideoPlay(e) {
-    e.preventDefault();
-    this.paused = !this.paused;
-    let video = this.el.shadowRoot.querySelector('video');
-    if (video) {
-      if (this.paused) {
-        video.pause();
-      }
-      else {
-        video.play().catch(z => console.error(z));
-      }
-    }
-  }
-  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"
-      },
-      "playButtonTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Play Button Title"
-        },
-        "attribute": "play-button-title",
-        "reflect": false
-      },
-      "pauseButtonTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Pause Button Title"
-        },
-        "attribute": "pause-button-title",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'default' | 'legacy'",
-          "resolved": "\"default\" | \"legacy\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Video implementation type:\n default: Content need to add in tag\n     Ex: <ptc-background-video>Content  </ptc-background-video>\n legacy: Add the blank tag in any other setcon having relative parent.\n     Ex: <div class=\"section\" style=\"position: relative;\">\n            <ptc-background-video></ptc-background-video>\n            Content\n         </div>"
-        },
-        "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"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "paused": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+export class PtcBackgroundVideo {
+  constructor() {
+    this.videoSrc = undefined;
+    this.posterSrc = undefined;
+    this.overlay = true;
+    this.playButtonTitle = undefined;
+    this.pauseButtonTitle = undefined;
+    this.paused = undefined;
+    this.type = 'default';
+    this.isIframe = false;
+  }
+  // componentDidLoad() {
+  //   if(this.isIframe){
+  //     const iframe:HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
+  //     const iframeDoc = iframe.contentDocument
+  //     const iframeVideo = iframeDoc.querySelector('video');
+  //     console.log("iframe ele: " + iframeDoc.querySelectorAll('video'));
+  //     iframeVideo.style.objectFit = 'cover';
+  //   }
+  // }
+  // @Method()
+  // async toggleVideo() {
+  //   // show a prompt
+  //   this.paused = !this.paused;
+  //   let video = this.el.shadowRoot.querySelector('video') as HTMLVideoElement;
+  //   if (video) {
+  //     if (this.paused) {
+  //       video.pause();
+  //     } else {
+  //       video.play().catch(z => console.error(z));
+  //     }
+  //   }
+  //   console.log('Hello, I am a publish method from ptc-background-video!');
+  // }
+  componentWillLoad() {
+    this.paused = false;
+  }
+  render() {
+    const videoContent = this.isIframe ? (h("div", { class: "iframe-wrapper" }, h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "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 }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", { class: "play-button" }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }" }, h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e) }, h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h("div", { class: "video-overlay" }) : '', this.type == 'default' ? h("slot", null) : ''));
+  }
+  toggleVideoPlay(e) {
+    e.preventDefault();
+    this.paused = !this.paused;
+    let video = this.el.shadowRoot.querySelector('video');
+    if (video) {
+      if (this.paused) {
+        video.pause();
+      }
+      else {
+        video.play().catch(z => console.error(z));
+      }
+    }
+  }
+  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"
+      },
+      "playButtonTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Play Button Title"
+        },
+        "attribute": "play-button-title",
+        "reflect": false
+      },
+      "pauseButtonTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Pause Button Title"
+        },
+        "attribute": "pause-button-title",
+        "reflect": false
+      },
+      "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'"
+      },
+      "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"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "paused": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}