@ptcwebops/ptcw-design 0.4.2 → 0.4.4

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

@@ -0,0 +1,185 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+const interfaces = require('./interfaces-0ecd8027.js');
+
+const ptcImgCss = ".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-sm{border-radius:var(--ptc-border-radius-small)}.radius-md{border-radius:var(--ptc-border-radius-medium)}.radius-lg{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-primary-lightgrey)}@media (max-width: 767px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media (min-width: 1200px){.hidden-lg{display:none !important}}";
+
+let PtcImg = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Image size for smallest screen
+     * <=767px
+     */
+    this.sizeXs = '510x340';
+    /**
+     * Image size for small screen
+     * >=768px and <=991px
+     */
+    this.sizeSm = '1240x496';
+    /**
+     * Image size for medium screen
+     * >=992px and <=1199px
+     */
+    this.sizeMd = '1366x500';
+    /**
+     * Image solution for large screen
+     * >=1200px
+     */
+    this.sizeLg = '1920x1080';
+    /**
+     * Image type
+     */
+    this.imageType = 'smart-bg';
+    /**
+     * Image border shape
+     */
+    this.borderRadius = '';
+    /**
+     * Lazy loading option
+     */
+    this.loadMode = 'lazy-bg';
+  }
+  /**
+   * Image Z Index
+   */
+  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
+  WindowResize() {
+    this.setResponsiveBg();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, index.h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? index.h("slot", null) : null)));
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  componentWillUpdate() {
+    // console.log('componentWillUpdate!');
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el || document).querySelectorAll(interfaces.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
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      // If the data attribute exists, set the background
+      if (elData !== null) {
+        el.style.backgroundImage = "url('" + elData + "')";
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  //lazy loading
+  addIntersectionObserver() {
+    if (!this.imgUrl) {
+      console.log('no image!');
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
+      let bgObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = entry.target;
+            image.classList.remove('lazy-bg');
+            // console.log('loaded');
+            bgObserver.unobserve(image);
+          }
+        });
+      });
+      lazyLoadBgs.forEach(image => {
+        bgObserver.observe(image);
+      });
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.imageType]: true,
+      'ptc-img': true,
+      [this.borderRadius]: true,
+      [this.loadMode]: true,
+      // [this.imageZIndex] : true
+    };
+  }
+  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.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
+      env = interfaces.ResponsiveBgVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        console.log('remove test node');
+        // 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';
+    }
+  }
+  get el() { return index.getElement(this); }
+};
+PtcImg.style = ptcImgCss;
+
+const ptcOverlayCss = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, #197BC0 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, #D12C3A 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, #C37729 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, #00890B 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, #20262A 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%)}@media screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, #20262A 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%)}}:host(.black-3){background:linear-gradient(180deg, #20262A 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, #617480 100%)}:host(.radius-sm){border-radius:var(--ptc-border-radius-small)}:host(.radius-md){border-radius:var(--ptc-border-radius-medium)}:host(.radius-lg){border-radius:var(--ptc-border-radius-large)}:host(.radius-x-lg){border-radius:var(--ptc-border-radius-x-large)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
+
+let PtcOverlay = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Overlay z-index
+     */
+    this.overlayZIndex = 'z-index-auto';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return index.h(index.Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.filterColor]: !!this.filterColor ? true : false,
+      [this.borderRadius]: !!this.borderRadius ? true : false,
+      [this.overlayZIndex]: true
+    };
+  }
+};
+PtcOverlay.style = ptcOverlayCss;
+
+exports.ptc_img = PtcImg;
+exports.ptc_overlay = PtcOverlay;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 const ptcInputCss = ".sc-ptc-input-h{display:block}.form-group.sc-ptc-input{position:relative}.ptc-input.sc-ptc-input{width:-webkit-fill-available;width:-moz-available;width:stretch;display:block;padding:6px 12px;border:none;border-bottom:1px solid #3b4550;padding-left:20px;box-shadow:1px 1px 25px 0 rgba(0, 0, 0, 0.16);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;font-size:16px;color:#707070;padding-top:14px;background:#fff}.floating-label.sc-ptc-input{position:absolute;left:0;bottom:0;transform:translate(20px, -10px);font-family:Raleway;font-size:16px;font-weight:500;line-height:1.07;text-align:left;transition:all 0.4s ease-in-out}.focused.sc-ptc-input+.floating-label.sc-ptc-input{font-size:10px;font-weight:700;line-height:1.5;transform:translate(20px, -24px)}";
 

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

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+
+const ptcLinkCss = ":host{display:block}.disabled{pointer-events:none;cursor:default;text-decoration:none}.ptc-link{display:inline-block;color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal);outline:none;text-decoration:none}.simple::after{content:\"\";position:absolute;width:100%;left:0px;bottom:2px;transition:opacity var(--ptc-transition-fast) var(--ptc-standard-ease);border-bottom:2px solid var(--color-primary-green);opacity:0}.simple:hover.simple::after{opacity:1}.arrow{margin-right:var(--ptc-element-spacing-01)}.arrow::after{position:absolute;display:block;content:\"\";width:var(--ptc-element-spacing-06);border-bottom:2px solid var(--color-primary-green);bottom:1px;transition:width var(--ptc-transition-fast) var(--ptc-standard-ease)}.arrow:hover.arrow::after{width:100%}.uppercase{text-transform:uppercase}.small{font-size:var(--ptc-font-size-small)}.medium{font-size:var(--ptc-font-size-medium)}.large{font-size:var(--ptc-font-size-large)}.ptc-link.arrow icon-asset{position:absolute;right:-25px;transition:transform var(--ptc-transition-fast) var(--ptc-standard-ease)}.ptc-link.arrow icon-asset svg{fill:var(--color-primary-green) !important}.ptc-link.arrow-plm icon-asset{position:absolute;right:-6.75px;transform:translate(100%, 8%)}.ptc-link.arrow-plm svg{fill:#3DAB49 !important}.ptc-link:hover.arrow icon-asset{transform:translateX(var(--ptc-element-spacing-04))}.nav-title:focus,.nav-title-link:focus,.primary-nav-link:focus,.secondary-nav-link:focus,.footer-nav-link:focus,.copyright-link:focus{outline:3px solid #0092d1;outline-offset:2px}.nav-title{box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.15px;line-height:25.05px;list-style:none;margin-bottom:10px;text-align:left}.primary-nav-link{background-color:transparent;box-sizing:border-box;color:#f3f3f4;display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.3px;line-height:25.95px;list-style:none;margin:var(--ptc-element-spacing-01) var(--ptc-element-spacing-03);padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-05);padding-bottom:7px;position:relative;text-decoration:none;transition:background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.primary-nav-link:hover{border-radius:4px;background-color:#20262a;text-decoration:none;outline:none}.nav-title-link{background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);line-height:15px;list-style:none;text-align:left;text-decoration-color:var(--color-white);text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;display:inline-block}.nav-title-link:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-secondary-turtlegreen)}.secondary-nav-link{display:inline-block;background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-style:normal;font-weight:var(--ptc-font-weight-semibold);letter-spacing:0.12px;line-height:14.4px;list-style:none;margin-bottom:12px;text-align:left;text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;white-space:nowrap}.secondary-nav-link:hover{color:var(--color-white);border-bottom:1.5px solid #74c34d;border-radius:0;text-decoration:none}.footer-nav-link{color:var(--color-white);transition:border var(--ptc-transition-medium) var(--ptc-standard-ease), color var(--ptc-transition-medium) var(--ptc-standard-ease);border-bottom:1px solid transparent;outline:none;text-decoration:none;font-weight:var(--ptc-font-weight-semibold);line-height:1.73;letter-spacing:1.13px;text-align:left;font-size:15px}.footer-nav-link:hover{outline:none;text-decoration:none;border-bottom:0.1rem solid var(--color-secondary-turtlegreen);color:var(--color-secondary-turtlegreen)}.copyright-link{color:var(--color-white);font-size:13px;font-weight:var(--ptc-font-weight-normal);line-height:2;display:inline-block}.arrow-plm{color:var(--color-white);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-19);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-acceletated-ease)}.arrow-plm:hover{text-decoration-color:#3DAB49}";
+
+let PtcLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Disabled link
+     */
+    this.disabled = false;
+    /**
+     * Rxternal link
+     * */
+    this.external = false;
+    /**
+     * Target
+     */
+    this.target = '_self';
+    /**
+     * Theme
+     */
+    this.theme = 'simple';
+    /**
+     * Uppercase
+     */
+    this.uppercase = false;
+    /**
+     * Font Size
+     */
+    this.fontSize = 'medium';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, index.h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? index.h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '', this.theme == 'arrow-plm' ? index.h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '', index.h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-link']: true,
+      [this.theme]: true,
+      ['uppercase']: this.uppercase,
+      ['disabled']: this.disabled,
+      [this.fontSize]: true,
+    };
+  }
+};
+PtcLink.style = ptcLinkCss;
+
+exports.ptc_link = PtcLink;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 const ptcListCss = ".sc-ptc-list-h{display:block}.list-primary.sc-ptc-list-h li.sc-ptc-list{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-normal);letter-spacing:var(--ptc-letter-spacing-normal);list-style:none}.list-primary.sc-ptc-list-h li.sc-ptc-list:not(:last-child){margin-bottom:0.625rem}.list-primary.sc-ptc-list-h li.sc-ptc-list a.sc-ptc-list{color:var(--color-white);outline:none;text-decoration:none;font-family:Rajdhani;font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-normal);text-transform:uppercase;letter-spacing:var(--ptc-letter-spacing-normal)}.list-primary.sc-ptc-list-h li.sc-ptc-list a.sc-ptc-list:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-primary-green)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 const ptcLottieCss = ":host{display:block;width:100%;height:auto}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 const ptcModalCss = ":host{display:block}.wrapper{position:absolute;width:100vw;height:100%;top:0;left:0;z-index:3000;display:none}.wrapper .modal-popup{margin:7.5rem auto 1rem;background-color:var(--color-white);box-shadow:0px 8px 12px rgba(0, 0, 0, 0.36);max-width:22.5625rem;width:80%;display:flex;flex-direction:column;align-items:flex-end;align-content:flex-end;z-index:3020;transform:translateY(-100%)}@media screen and (min-width: 992px){.wrapper .modal-popup{max-width:29.125rem}}.wrapper .modal-popup.md{max-width:44.125rem}.wrapper .modal-popup.lg{max-width:56.25rem}.wrapper .modal-popup.xl{max-width:64.0625rem}.wrapper .modal-popup .modal-body{width:100%}.wrapper .modal-popup .modal-body iframe{opacity:0;overflow:hidden;width:100%;border:0;transition:opacity ease-out 250ms}.wrapper .modal-popup .modal-body iframe.ready{opacity:1}.wrapper .modal-popup .modal-body.frame{overflow:hidden}.wrapper .modal-popup .modal-body.html{overflow:hidden}.wrapper .modal-popup .close{margin-right:0.75rem;margin-top:0.75rem}.wrapper.show{display:flex;align-items:flex-start}.wrapper.show .modal-popup{transform:translateY(0)}.overlay{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:3010;display:block;background-color:rgba(0, 0, 0, 0.6)}";
 

package/dist/cjs/ptc-nav-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 const ptcNavItemCss = ":host{display:block;width:100%}@media screen and (min-width: 992px){:host{width:auto}}:host([depth=\"2\"]) a{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);margin-bottom:var(--ptc-element-spacing-03);padding-left:50px}@media screen and (min-width: 992px){:host([depth=\"2\"]) a{padding-left:0px}}:host([depth=\"1\"]) a{font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);padding:20px 25px}:host([nav-type=secondary-nav]) a{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-thin)}:host([nav-type=language-nav]) a{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-thin)}@media only screen and (min-width: 992px){.primary-nav~.ptc-nav-children{position:absolute;left:0}.primary-nav~.ptc-nav-children ::slotted(.nav-tab){background-color:#1c2126;display:flex;width:100vw}.language-nav~.ptc-nav-children{position:absolute;background-color:#1c2126}}a[aria-expanded=true]~.ptc-nav-children{padding-top:var(--ptc-element-spacing-04);max-height:2000px}@media screen and (min-width: 992px){a[aria-expanded=true]~.ptc-nav-children{padding-top:0}}.ptc-nav-children{overflow:hidden;max-height:0;transition:max-height 0.25s ease-in-out, padding-top 0.25s ease-in-out}a{color:var(--color-white);text-transform:uppercase;display:block;outline:none;text-decoration:none}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 const ptcNavCss = ":host{display:block}.nav-style{background-color:#1c2126;display:block}@media only screen and (min-width: 992px){.nav-style{display:grid;grid-template-columns:auto fit-content(76px);grid-template-rows:fit-content(22px) 1fr;grid-template-areas:\"secondary secondary\" \"primary language\"}.primary-nav{grid-area:primary}.secondary-nav{grid-area:secondary}.language-nav{grid-area:language}}";
 

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

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+
+const ptcParaCss = ":host{z-index:1}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-primary-grey)}p.primary-grey{color:var(--color-primary-grey)}p.white{color:var(--color-white)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.font-size-15{font-size:var(--ptc-font-size-15)}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-17{line-height:var(--ptc-line-height-17)}p.line-height-18{line-height:var(--ptc-line-height-18)}p.line-height-19{line-height:var(--ptc-line-height-19)}p.line-height-23{line-height:23px}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-secondary-grey);line-height:var(--ptc-line-height-looser);letter-spacing:1px}@media screen and (min-width: 992px){p.font-size-15{font-size:var(--ptc-font-size-medium)}}";
+
+let PtcPara = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Paragraph font size
+     **/
+    this.fontSize = "medium";
+    /**
+     * Paragraph font weight
+     **/
+    this.fontWeight = 'w-4';
+    /**
+     * Paragraph Style
+     **/
+    this.paraStyle = 'default';
+    /**
+     * Paragraph Color
+     */
+    this.paraColor = 'primary-grey';
+    /**
+     * line height
+     */
+    this.paraLineH = 'line-height-normal';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h("p", { class: classMap, part: "part-para" }, index.h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.fontSize]: true,
+      [this.fontWeight]: true,
+      [this.paraStyle]: true,
+      [this.paraMargin]: !!this.paraMargin ? true : false,
+      [this.paraColor]: true,
+      [this.paraLineH]: true
+    };
+  }
+};
+PtcPara.style = ptcParaCss;
+
+exports.ptc_para = PtcPara;

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

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+const interfaces = require('./interfaces-0ecd8027.js');
+
+const ptcPictureCss = ":host{display:block;overflow:hidden}: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-sm{border-radius:var(--ptc-border-radius-small)}.radius-md{border-radius:var(--ptc-border-radius-medium)}.radius-lg{border-radius:var(--ptc-border-radius-large)}.radius-x-lg{border-radius:var(--ptc-border-radius-x-large)}.is-full-height{height:100%}.is-full-width{width:100%}";
+
+let PtcPicture = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Image alt
+     */
+    this.alt = "image";
+    /**
+     * Image size for smallest screen
+     * <=767px
+     */
+    this.sizeXs = '510x340';
+    /**
+     * Image size for small screen
+     * >=768px and <=991px
+     */
+    this.sizeSm = '1240x496';
+    /**
+     * Image size for medium screen
+     * >=992px and <=1199px
+     */
+    this.sizeMd = '1366x500';
+    /**
+     * Image solution for large screen
+     * >=1200px
+     */
+    this.sizeLg = '1920x1080';
+    /**
+     * Image Position
+     */
+    this.imagePosition = 'static';
+    /**
+     * Object Fit
+     * Default: cover
+     */
+    this.objectFit = 'cover';
+    /**
+     * Stretch height to 100%?
+     */
+    this.isFullHeight = false;
+    /**
+     * Stretch width to 100%?
+     */
+    this.isFullWidth = false;
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  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();
+            console.log('loaded');
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
+    }
+    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) {
+        // console.log('img src= ' + elData);
+        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();
+    return (index.h(index.Host, { class: this.imagePosition }, 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 })), 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);
+        console.log('remove test node');
+        // 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
+    };
+  }
+  get el() { return index.getElement(this); }
+};
+PtcPicture.style = ptcPictureCss;
+
+exports.ptc_picture = PtcPicture;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 const ptcSelectCss = ".sc-ptc-select-h{display:block}.ptc-select.sc-ptc-select{display:block;width:100%;padding:6px 12px;border:none;border-bottom:1px solid #3b4550;padding-left:20px;-webkit-box-shadow:1px 1px 25px 0 rgba(0, 0, 0, 0.16);box-shadow:1px 1px 25px 0 rgba(0, 0, 0, 0.16);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;font-size:16px;color:#707070;padding-top:14px;background:#fff}";
 

package/dist/cjs/ptc-social-share.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 const ptcSocialShareCss = ":host(.inline-block){display:inline-block}:host(.block){display:block}:host(.inline){display:inline}:host(.flex){display:flex}:host(.ptc-social-share){cursor:pointer}@media screen and (min-width: 1200px){:host(.ptc-social-m-left){margin-left:19px}}";
 

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

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+
+const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.ptc-spacer-xx-large){display:block}}";
+
+let PtcSpacer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Breakpoint
+     */
+    this.breakpoint = '';
+    /**
+     * Spacing Size
+     */
+    this.size = 'medium';
+    /**
+     * Direction
+     */
+    this.direction = 'vertical';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }));
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
+      ['ptc-spacer-vertical']: this.direction === 'vertical',
+      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
+      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
+      ['ptc-spacer-small']: this.breakpoint === 'small',
+      ['ptc-spacer-medium']: this.breakpoint === 'medium',
+      ['ptc-spacer-large']: this.breakpoint === 'large',
+      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
+      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
+    };
+  }
+};
+PtcSpacer.style = ptcSpacerCss;
+
+exports.ptc_spacer = PtcSpacer;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+
+const ptcSpanCss = ":host{z-index:1}:host span{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}:host(.link-style) span{color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal)}:host(.nav-style) span{display:block;color:#cac8c8;font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-transform:capitalize;padding-left:var(--ptc-element-spacing-05);font-size:17px;padding-bottom:var(--ptc-element-spacing-03)}:host(.tag-style) span{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-dense);font-weight:var(--ptc-font-weight-regular);color:var(--color-primary-grey)}:host(.plm-hub-style) span{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-19);font-weight:var(--ptc-font-weight-medium);color:var(--color-white)}:host(.inline) span{display:inline}:host(.block) span{display:block}:host(.inline-block) span{display:inline-block}:host(.white) span{color:var(--color-white)}:host(.primary-grey) span{color:var(--color-primary-grey)}";
+
+let PtcSpan = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Span Style
+     */
+    this.spanStyle = 'tag-style';
+    /**
+     * Display
+     */
+    this.display = 'inline';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("span", { part: "part-ptc-span" }, index.h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.spanStyle]: true,
+      [this.display]: true,
+    };
+  }
+};
+PtcSpan.style = ptcSpanCss;
+
+exports.ptc_span = PtcSpan;