@ptcwebops/ptcw-design 2.1.2 → 2.1.4

package/dist/cjs/ptc-picture.cjs.entry.js

@@ -2,162 +2,162 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88135a6b.js');
-const interfaces = require('./interfaces-574e6df7.js');
+const index = require('./index-266d5edd.js');
+const interfaces = require('./interfaces-0ecd8027.js');
 
 const ptcPictureCss = ":host{display:block;overflow:hidden}:host .inline{display:inline}:host .inline-block{display:inline-block}:host .block{display:block}:host(.relative){position:relative}:host(.static){position:static}:host(.absoltue){position:absolute}img{max-width:100%}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.is-full-height{height:100%}.is-full-width{width:100%}:host(.left){text-align:left}:host(.right){text-align:right}:host(.center){text-align:center}";
 
-const PtcPicture = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.src = undefined;
-    this.alt = 'image';
-    this.sizeXs = '510x340';
-    this.sizeSm = '1240x496';
-    this.sizeMd = '1366x500';
-    this.sizeLg = '1920x1080';
-    this.disableResize = false;
-    this.oldSrc = undefined;
-    this.imagePosition = 'static';
-    this.borderRadius = undefined;
-    this.height = undefined;
-    this.width = undefined;
-    this.objectFit = 'cover';
-    this.isFullHeight = false;
-    this.isFullWidth = false;
-    this.styles = undefined;
-    this.imageAlignment = 'left';
-    this.maxWidth = undefined;
-    this.displayImage = 'block';
-  }
-  WindowResize() {
-    this.addIntersectionObserver();
-  }
-  componentWillLoad() {
-    if (this.disableResize) {
-      this.sizeXs = undefined;
-      this.sizeSm = undefined;
-      this.sizeMd = undefined;
-      this.sizeLg = undefined;
-    }
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-  }
-  componentWillUpdate() {
-    if (this.src !== this.oldSrc) {
-      this.addIntersectionObserver();
-    }
-    this.oldSrc = this.src;
-  }
-  //lazy-loading
-  addIntersectionObserver() {
-    if (!this.src) {
-      return;
-    }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadImages = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const image = this.el.shadowRoot.querySelector('img');
-            image.src = this.setResponsiveBg();
-            lazyLoadImages.unobserve(image);
-          }
-        });
-      });
-      let tempImg = this.el.shadowRoot.querySelector('img');
-      if (tempImg) {
-        lazyLoadImages.observe(tempImg);
-      }
-    }
-    else {
-      // fall back to setTimeout for Safari and IE
-      setTimeout(() => {
-        const image = this.el.shadowRoot.querySelector('img');
-        image.src = this.setResponsiveBg();
-        image.onload = () => {
-          image.removeAttribute('data-src');
-          console.log('loaded fallback');
-        };
-      }, 5000);
-    }
-  }
-  //responsive image
-  setResponsiveBg() {
-    // Define local variables
-    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    for (var i = 0, len = backgrounds.length; i < len; i++) {
-      // Set current variables
-      el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
-      if (elData !== null) {
-        return elData;
-      }
-      else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
-        }
-      }
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const classMapHost = this.getCssClassMapHost();
-    return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), index.h("slot", null)));
-  }
-  getCurrentBreakPoints() {
-    // Define local variables
-    let doc = window.document, temp = doc.createElement('div'), env;
-    // Append test node
-    doc.body.appendChild(temp);
-    // Loop through breakpoints
-    for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
-      env = interfaces.ResponsivePictureVariables.envs[i];
-      // Add classes
-      temp.className = 'hidden-' + env;
-      // Found breakpoint
-      if (temp.offsetParent === null) {
-        // Remove our test node
-        doc.body.removeChild(temp);
-        // Return current breakpoint
-        return env;
-      }
-    }
-    // Breakpoint not found, try fallback
-    doc.body.removeChild(temp);
-    return this.getFallbackBreakpoint();
-  }
-  getFallbackBreakpoint() {
-    if (window.matchMedia('(min-width: 992px)').matches) {
-      return 'lg';
-    }
-    else if (window.matchMedia('(min-width: 768px)').matches) {
-      return 'md';
-    }
-    else if (window.matchMedia('(min-width: 576px)').matches) {
-      return 'sm';
-    }
-    else {
-      return 'xs';
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.borderRadius]: this.borderRadius ? true : false,
-      [this.objectFit]: true,
-      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
-      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true,
-      [this.displayImage]: true
-    };
-  }
-  getCssClassMapHost() {
-    return {
-      [this.imagePosition]: true,
-      [this.imageAlignment]: true,
-    };
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcPicture = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.src = undefined;
+    this.alt = 'image';
+    this.sizeXs = '510x340';
+    this.sizeSm = '1240x496';
+    this.sizeMd = '1366x500';
+    this.sizeLg = '1920x1080';
+    this.disableResize = false;
+    this.oldSrc = undefined;
+    this.imagePosition = 'static';
+    this.borderRadius = undefined;
+    this.height = undefined;
+    this.width = undefined;
+    this.objectFit = 'cover';
+    this.isFullHeight = false;
+    this.isFullWidth = false;
+    this.styles = undefined;
+    this.imageAlignment = 'left';
+    this.maxWidth = undefined;
+    this.displayImage = 'block';
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentWillLoad() {
+    if (this.disableResize) {
+      this.sizeXs = undefined;
+      this.sizeSm = undefined;
+      this.sizeMd = undefined;
+      this.sizeLg = undefined;
+    }
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+  //lazy-loading
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadImages = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = this.el.shadowRoot.querySelector('img');
+            image.src = this.setResponsiveBg();
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      let tempImg = this.el.shadowRoot.querySelector('img');
+      if (tempImg) {
+        lazyLoadImages.observe(tempImg);
+      }
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => {
+        const image = this.el.shadowRoot.querySelector('img');
+        image.src = this.setResponsiveBg();
+        image.onload = () => {
+          image.removeAttribute('data-src');
+          console.log('loaded fallback');
+        };
+      }, 5000);
+    }
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      if (elData !== null) {
+        return elData;
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const classMapHost = this.getCssClassMapHost();
+    return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), index.h("slot", null)));
+  }
+  getCurrentBreakPoints() {
+    // Define local variables
+    let doc = window.document, temp = doc.createElement('div'), env;
+    // Append test node
+    doc.body.appendChild(temp);
+    // Loop through breakpoints
+    for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
+      env = interfaces.ResponsivePictureVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else {
+      return 'xs';
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.borderRadius]: this.borderRadius ? true : false,
+      [this.objectFit]: true,
+      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
+      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true,
+      [this.displayImage]: true
+    };
+  }
+  getCssClassMapHost() {
+    return {
+      [this.imagePosition]: true,
+      [this.imageAlignment]: true,
+    };
+  }
+  get el() { return index.getElement(this); }
+};
 PtcPicture.style = ptcPictureCss;
 
 exports.ptc_picture = PtcPicture;

package/dist/cjs/ptc-previous-url.cjs.entry.js

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88135a6b.js');
+const index = require('./index-266d5edd.js');
 
 const ptcPreviousUrlCss = ":host{display:block;margin-top:var(--ptc-element-spacing-03)}.back-to-videos{display:inline-block;font-family:var(--ptc-font-latin);font-style:normal;font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-dense)}.back-to-videos:hover{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}::slotted(*){transform:translate(-2px, -2px)}.backarrow:hover+.back-to-videos{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}";
 
-const PtcPreviousUrl = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.href = undefined;
-    this.text = undefined;
-    this.styles = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, index.h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), index.h("a", { class: "back-to-videos" }, this.text)), index.h("slot", null)));
-  }
-};
+const PtcPreviousUrl = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = undefined;
+    this.text = undefined;
+    this.styles = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, index.h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), index.h("a", { class: "back-to-videos" }, this.text)), index.h("slot", null)));
+  }
+};
 PtcPreviousUrl.style = ptcPreviousUrlCss;
 
 exports.ptc_previous_url = PtcPreviousUrl;

package/dist/cjs/ptc-pricing-block.cjs.entry.js

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88135a6b.js');
+const index = require('./index-266d5edd.js');
 
 const ptcPricingBlockCss = ":host{display:block;color:var(--color-gray-10);margin-top:var(--ptc-element-spacing-03)}:host .ptc-pricing-block{width:100%;background-color:var(--color-gray-02);border:1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);display:block;transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium), border-color var(--ptc-ease-inout) var(--ptc-transition-medium)}:host .ptc-pricing-block.active{background-color:var(--color-gray-12);border-color:var(--color-gray-12);color:var(--color-white)}:host .ptc-pricing-block:hover:not(.active){border-color:var(--color-gray-12)}@media (min-width: 400px){:host .ptc-pricing-block{display:flex;justify-content:space-between;align-items:center}}:host .right-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);text-align:left;margin:0px 20px 15px 15px;display:block}@media (min-width: 400px){:host .right-text{text-align:right;float:right;margin-top:15px}}:host .left-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-align:left;margin:15px 15px 0 20px;display:block}@media (min-width: 400px){:host .left-text{text-align:left;display:inline-block;margin-bottom:15px}}";
 
-const PtcPricingBlock = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.active = undefined;
-    this.optionClicked = undefined;
-  }
-  onContentChange(content) {
-    console.log(content);
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: this.active ? "is-active" : "" }, index.h("div", { class: classMap }, index.h("span", { class: "left-text" }, index.h("slot", { name: "left-text" })), index.h("span", { class: "right-text" }, index.h("slot", { name: "right-text" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-pricing-block']: true,
-      ['active']: this.active
-    };
-  }
-};
+const PtcPricingBlock = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.active = undefined;
+    this.optionClicked = undefined;
+  }
+  onContentChange(content) {
+    console.log(content);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: this.active ? "is-active" : "" }, index.h("div", { class: classMap }, index.h("span", { class: "left-text" }, index.h("slot", { name: "left-text" })), index.h("span", { class: "right-text" }, index.h("slot", { name: "right-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-pricing-block']: true,
+      ['active']: this.active
+    };
+  }
+};
 PtcPricingBlock.style = ptcPricingBlockCss;
 
 exports.ptc_pricing_block = PtcPricingBlock;