@ptcwebops/ptcw-design 6.4.36-beta → 6.5.0-upgrade

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

@@ -1,262 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-li,
-ptc-subnav,
-ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
-  word-break: break-word;
-  hyphens: manual;
-  -webkit-hyphens: manual;
-  -moz-hyphens: manual;
-  -ms-hyphens: manual;
-}
-@supports (hyphenate-limit-chars: 12 3 3) {
-  h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-li,
-ptc-subnav,
-ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    /* For Safari */
-    -webkit-hyphenate-limit-after: 3;
-    /* For Safari */
-    hyphenate-limit-chars: 12 3 3;
-    hyphenate-limit-lines: 2;
-    hyphenate-limit-last: always;
-    hyphenate-limit-zone: 6%;
-    -webkit-hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-    -webkit-hyphenate-limit-chars: 12 3 3;
-    -webkit-hyphenate-limit-lines: 2;
-    -moz-hyphens: auto;
-    -moz-hyphenate-limit-chars: 12 3 3;
-    -moz-hyphenate-limit-lines: 2;
-    -ms-hyphens: auto;
-    -ms-hyphenate-limit-chars: 12 3 3;
-    -ms-hyphenate-limit-lines: 2;
-  }
-}
-
-: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;
-  -o-object-fit: cover;
-     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 .video-overlay.dark {
-  background-color: rgba(0, 0, 0, 0.6);
-}
-
-: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 {
-  -o-object-fit: cover;
-     object-fit: cover;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-:host .iframe-wrapper {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: -100;
-}
-:host .iframe-wrapper .background-video-embed {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-}
-:host .iframe-wrapper .player .vp-video-wrapper .vp-telecine-cover video {
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-
-:host .play-button {
-  position: absolute;
-  top: 1.5rem;
-  right: 1.5rem;
-  width: 34px;
-  height: 34px;
-  z-index: 99;
-}
-@media (min-width: 768px) {
-  :host .play-button.top-right {
-    top: 2rem;
-    right: 2rem;
-  }
-}
-:host .play-button.top-left {
-  right: unset;
-  top: 1.5rem;
-  left: 1.5rem;
-}
-@media (min-width: 768px) {
-  :host .play-button.top-left {
-    bottom: 3.75rem;
-    left: 2rem;
-  }
-}
-@media (min-width: 768px) {
-  :host .play-button.bottom-left {
-    top: unset;
-    right: unset;
-    bottom: 3.75rem;
-    left: 2rem;
-  }
-}
-@media (min-width: 768px) {
-  :host .play-button.bottom-right {
-    top: unset;
-    bottom: 3.75rem;
-    right: 2rem;
-  }
-}
-:host .play-button.allbp-bottom-right {
-  top: unset;
-  bottom: 4.75rem;
-  right: 2rem;
-}
-:host .play-button button {
-  display: inline-block;
-  padding: 5px;
-  position: relative;
-  top: -5px;
-  left: -5px;
-  cursor: pointer;
-}
-@media only screen and (min-width: 768px) {
-  :host .play-button button {
-    top: auto;
-    left: auto;
-  }
-}
-@media only screen and (min-width: 992px) {
-  :host .play-button button {
-    padding: 0;
-  }
-}
-:host .play-button button.bg-svg-play, :host .play-button button.bg-svg-pause {
-  background-repeat: no-repeat;
-  background-size: 18px 18px;
-  background-position: center;
-  background-color: var(--color-white);
-  width: 34px;
-  height: 34px;
-  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.24);
-  border-radius: 4px;
-  border: 2px solid var(--color-gray-10);
-}
-:host .play-button button.bg-svg-play:hover, :host .play-button button.bg-svg-pause:hover {
-  background-color: var(--color-gray-02);
-}
-:host .play-button button.bg-svg-play:active, :host .play-button button.bg-svg-pause:active {
-  transition: none;
-  background-color: var(--color-gray-03);
-}
-:host .play-button button.bg-svg-play.active:hover, :host .play-button button.bg-svg-pause.active:hover {
-  background-color: var(--color-gray-05);
-}
-:host .play-button button.bg-svg-play.active:active, :host .play-button button.bg-svg-pause.active:active {
-  transition: none;
-  background-color: var(--color-gray-03);
-}
-:host .play-button button.bg-svg-play:focus, :host .play-button button.bg-svg-pause:focus {
-  border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid var(--keyboard-nav-outline);
-}
-:host .play-button button.bg-svg-play {
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 18" id="play"><path d="M11.9625 9L0.0374756 0V18L11.9625 9Z"></path></svg>');
-}
-:host .play-button button.bg-svg-pause {
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 18" id="pause"><path id="rect28" d="M 0,0 H 4 V 18 H 0 Z"></path><path id="rect30" d="m 10,0 h 4 v 18 h -4 z"></path></svg>');
-}
-
-:host {
-  display: block;
-  position: relative;
-}
-:host .media {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-}
-:host .background-video,
-:host .bg-fallback {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-:host .bg-fallback {
-  display: block;
-}

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

@@ -1,411 +0,0 @@
-import { Host, h, } from "@stencil/core";
-import { nextUserInteractionEvent } from "../../utils/utils";
-import { isReducedMotion, onReducedMotionChange } from "../../utils/utils";
-export class PtcBackgroundVideo {
-  constructor() {
-    /** Ensure the first frame is painted and paused. */
-    this.showFirstFrame = (v) => {
-      v.preload = "auto";
-      v.removeAttribute("autoplay");
-      v.loop = false;
-      const paint = () => {
-        try {
-          //v.currentTime = 0;
-          // If a browser still paints black, try this tiny nudge:
-          v.currentTime = 0.1;
-        }
-        catch (_a) { }
-        v.pause();
-      };
-      if (v.readyState >= 2 /* HAVE_CURRENT_DATA, have enough data */) {
-        paint();
-      }
-      else {
-        const onLoaded = () => {
-          v.removeEventListener("loadeddata", onLoaded);
-          paint();
-        };
-        v.addEventListener("loadeddata", onLoaded, { once: true });
-        v.load();
-      }
-    };
-    this.videoSrc = undefined;
-    this.posterSrc = undefined;
-    this.overlay = true;
-    this.overlayType = "standard";
-    this.playButtonTitle = undefined;
-    this.pauseButtonTitle = undefined;
-    this.buttonLocation = "bottom-right";
-    this.buttonTabIndex = 0;
-    this.trackerId = undefined;
-    this.defer = undefined;
-    this.type = "default";
-    this.isIframe = false;
-    this.paused = undefined;
-    this.loadedTrue = false;
-    this.reducedMotion = false;
-  }
-  componentWillLoad() {
-    this.paused = false;
-    this.reducedMotion = isReducedMotion();
-  }
-  componentDidLoad() {
-    const afterMount = () => {
-      this.loadedTrue = true;
-      this.syncPlaybackWithPreference();
-    };
-    if (this.defer) {
-      nextUserInteractionEvent(this).then(afterMount);
-    }
-    else {
-      afterMount();
-    }
-    this.offMotionListener = onReducedMotionChange((reduced) => {
-      this.reducedMotion = reduced;
-      // Wait a tick for render to reflect state, then sync playback.
-      setTimeout(() => this.syncPlaybackWithPreference(), 0);
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.offMotionListener) === null || _a === void 0 ? void 0 : _a.call(this);
-  }
-  syncPlaybackWithPreference() {
-    if (this.isIframe) {
-      return;
-    }
-    const v = this.videoEl;
-    if (!v)
-      return;
-    if (this.reducedMotion) {
-      // Animations OFF, freeze first frame
-      this.showFirstFrame(v);
-      this.paused = true; //sync icon state
-    }
-    else {
-      // Animations ON, autoplay unless user paused
-      v.preload = "auto";
-      v.loop = true;
-      if (!this.paused) {
-        v.setAttribute("autoplay", "");
-        v.play().catch(() => { });
-        this.paused = false; //sync icon state
-      }
-      else {
-        v.pause();
-        this.paused = true; //sync icon state
-      }
-    }
-  }
-  // ------------ Render ------------
-  render() {
-    const canMountMedia = this.loadedTrue;
-    const videoNode = !this.isIframe && canMountMedia && (h("video", { class: "background-video", src: this.videoSrc, muted: true, playsinline: true, autoplay: !this.reducedMotion && !this.paused, loop: !this.reducedMotion, preload: "auto", "aria-hidden": "true", tabindex: "-1", ref: (el) => (this.videoEl = el) }));
-    const iframeNode = this.isIframe && canMountMedia && (h("div", { class: "iframe-wrapper" }, h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed", "aria-hidden": "true", tabindex: "-1" })));
-    return (h(Host, { class: this.type }, h("div", { class: "media" }, videoNode, iframeNode), !!this.videoSrc && this.playButtonTitle && (h("div", { class: `play-button ${this.buttonLocation}` }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: this.buttonLocation === "allbp-bottom-right"
-        ? "side-left"
-        : "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h("button", { class: "bg-svg-play", type: "button", tabindex: this.buttonTabIndex, onClick: (e) => this.toggleVideoPlay(e), "aria-label": "Video Play button" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: this.buttonLocation === "allbp-bottom-right"
-        ? "side-left"
-        : "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("div", { id: this.trackerId, class: "tracker-div mf-listen" }, h("button", { class: "bg-svg-pause", tabindex: this.buttonTabIndex, type: "button", onClick: (e) => this.toggleVideoPlay(e), "aria-label": "Video Pause button" })))))), this.overlay ? h("div", { class: `video-overlay ${this.overlayType}` }) : "", this.type === "default" ? h("slot", null) : ""));
-  }
-  toggleVideoPlay(e) {
-    e.preventDefault();
-    this.paused = !this.paused;
-    const v = this.videoEl;
-    if (!v)
-      return;
-    if (this.paused) {
-      v.pause();
-    }
-    else {
-      v.loop = true;
-      if (!this.reducedMotion)
-        v.setAttribute("autoplay", "");
-      v.play().catch((z) => console.error(z));
-    }
-  }
-  async pauseVideo() {
-    var _a;
-    this.paused = true;
-    (_a = this.videoEl) === null || _a === void 0 ? void 0 : _a.pause();
-  }
-  async playVideo() {
-    this.paused = false;
-    if (this.videoEl) {
-      this.videoEl.loop = true;
-      if (!this.reducedMotion)
-        this.videoEl.setAttribute("autoplay", "");
-      this.videoEl.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 or embed 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"
-        },
-        "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, default true)"
-        },
-        "attribute": "overlay",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "overlayType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"standard\" | \"dark\"",
-          "resolved": "\"dark\" | \"standard\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Overlay type"
-        },
-        "attribute": "overlay-type",
-        "reflect": false,
-        "defaultValue": "\"standard\""
-      },
-      "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
-      },
-      "buttonLocation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| \"top-left\"\r\n    | \"top-right\"\r\n    | \"bottom-left\"\r\n    | \"bottom-right\"\r\n    | \"allbp-bottom-right\"",
-          "resolved": "\"allbp-bottom-right\" | \"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Play/Pause Button Location"
-        },
-        "attribute": "button-location",
-        "reflect": false,
-        "defaultValue": "\"bottom-right\""
-      },
-      "buttonTabIndex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Play/Pause tab index"
-        },
-        "attribute": "button-tab-index",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "trackerId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Analytics tracker id"
-        },
-        "attribute": "tracker-id",
-        "reflect": false
-      },
-      "defer": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defer mounting until first user interaction"
-        },
-        "attribute": "defer",
-        "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": "Use iframe instead of <video>"
-        },
-        "attribute": "is-iframe",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "paused": {},
-      "loadedTrue": {},
-      "reducedMotion": {}
-    };
-  }
-  static get methods() {
-    return {
-      "pauseVideo": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "playVideo": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}