@ptcwebops/ptcw-design 0.0.15 → 0.1.1

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

@@ -1,25 +0,0 @@
-import { Component, Host, h } from '@stencil/core';
-export class PtcFooter {
-  render() {
-    return (h(Host, null,
-      h("footer", { class: "footer-style" },
-        h("div", { class: "footer-image" },
-          h("slot", { name: "footer-image" })),
-        h("div", { class: "footer-link-left" },
-          h("slot", { name: "footer-link-left" })),
-        h("div", { class: "footer-link-right" },
-          h("slot", { name: "footer-link-right" })),
-        h("div", { class: "footer-share" },
-          h("slot", { name: "footer-share" })),
-        h("div", { class: "footer-copyright" },
-          h("slot", { name: "footer-copyright" })))));
-  }
-  static get is() { return "ptc-footer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-footer.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-footer.css"]
-  }; }
-}

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

@@ -1,4 +0,0 @@
-img {
-  width: 100%;
-  height: auto;
-}

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

@@ -1,92 +0,0 @@
-import { Component, Prop, h, Element, State } from '@stencil/core';
-export class PtcImage {
-  componentDidLoad() {
-    this.addIntersectionObserver();
-  }
-  componentWillUpdate() {
-    if (this.src !== this.oldSrc) {
-      this.addIntersectionObserver();
-    }
-    this.oldSrc = this.src;
-  }
-  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 = image.dataset.src;
-            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 = image.dataset.src;
-        image.onload = () => {
-          image.removeAttribute('data-src');
-          console.log('loaded fallback');
-        };
-      }, 5000);
-    }
-  }
-  render() {
-    return h("img", { "data-src": this.src, alt: this.alt });
-  }
-  static get is() { return "ptc-image"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-image.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-image.css"]
-  }; }
-  static get properties() { return {
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image Render Src"
-      },
-      "attribute": "src",
-      "reflect": false
-    },
-    "alt": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image alt"
-      },
-      "attribute": "alt",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "oldSrc": {}
-  }; }
-  static get elementRef() { return "el"; }
-}

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

@@ -1,65 +0,0 @@
-.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);
-}
-
-/* XS */
-/* max-width: $screen-xs-max */
-@media (max-width: 767px) {
-  .hidden-xs {
-    display: none !important;
-  }
-}
-/* SM */
-/* min-width: $screen-sm-min) and (max-width: $screen-sm-max */
-@media (min-width: 768px) and (max-width: 991px) {
-  .hidden-sm {
-    display: none !important;
-  }
-}
-/* MD */
-/* min-width: $screen-md-min) and (max-width: $screen-md-max */
-@media (min-width: 992px) and (max-width: 1199px) {
-  .hidden-md {
-    display: none !important;
-  }
-}
-/* LG */
-/* min-width: $screen-lg-min */
-@media (min-width: 1200px) {
-  .hidden-lg {
-    display: none !important;
-  }
-}

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

@@ -1,318 +0,0 @@
-import { Component, Host, h, Prop, Listen, Element } from '@stencil/core';
-import { ResponsiveBgVariables } from '../../utils/interfaces';
-export class PtcImg {
-  constructor() {
-    /**
-     * 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';
-  }
-  WindowResize() {
-    this.setResponsiveBg();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null,
-      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}` })));
-  }
-  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(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);
-      });
-    }
-    else {
-      // fall back to setTimeout for Safari and IE
-      // setTimeout(() => {
-      //   const image: HTMLImageElement = this.el.shadowRoot.querySelector('img');
-      //       image.src = image.dataset.src;
-      //       image.onload = () => {
-      //         image.removeAttribute('data-src');
-      //         console.log('loaded fallback');
-      //       };
-      // }, 5000);
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.imageType]: true,
-      'ptc-img': true,
-      [this.borderRadius]: true,
-      [this.loadMode]: 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 = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
-      env = 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 if (window.matchMedia('(min-width: 575.5px)').matches) {
-      return 'xs';
-    }
-    else {
-      return 'Unknown breakpoint';
-    }
-  }
-  static get is() { return "ptc-img"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-img.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-img.css"]
-  }; }
-  static get properties() { return {
-    "sizeXs": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image size for smallest screen\n<=767px"
-      },
-      "attribute": "size-xs",
-      "reflect": false,
-      "defaultValue": "'510x340'"
-    },
-    "sizeSm": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image size for small screen\n>=768px and <=991px"
-      },
-      "attribute": "size-sm",
-      "reflect": false,
-      "defaultValue": "'1240x496'"
-    },
-    "sizeMd": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image size for medium screen\n>=992px and <=1199px"
-      },
-      "attribute": "size-md",
-      "reflect": false,
-      "defaultValue": "'1366x500'"
-    },
-    "sizeLg": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image solution for large screen\n>=1200px"
-      },
-      "attribute": "size-lg",
-      "reflect": false,
-      "defaultValue": "'1920x1080'"
-    },
-    "imgUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image Src"
-      },
-      "attribute": "img-url",
-      "reflect": false
-    },
-    "imageType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'smart-bg' | 'smart-img'",
-        "resolved": "\"smart-bg\" | \"smart-img\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image type"
-      },
-      "attribute": "image-type",
-      "reflect": false,
-      "defaultValue": "'smart-bg'"
-    },
-    "borderRadius": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | ''",
-        "resolved": "\"\" | \"radius-lg\" | \"radius-md\" | \"radius-sm\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Image border shape"
-      },
-      "attribute": "border-radius",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "loadMode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'lazy-bg' | 'eager-bg'",
-        "resolved": "\"eager-bg\" | \"lazy-bg\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Lazy loading option"
-      },
-      "attribute": "load-mode",
-      "reflect": false,
-      "defaultValue": "'lazy-bg'"
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "WindowResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
-}

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

@@ -1,168 +0,0 @@
-.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);
-  margin-bottom: var(--ptc-element-spacing-01);
-  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);
-}
-
-icon-asset {
-  position: absolute;
-  right: -25px;
-  transition: transform var(--ptc-transition-fast) var(--ptc-standard-ease);
-}
-icon-asset svg {
-  fill: var(--color-primary-green) !important;
-}
-
-.ptc-link:hover.arrow icon-asset {
-  transform: translateX(var(--ptc-element-spacing-04));
-}
-
-.nav-title {
-  font-size: 17px;
-  line-height: var(--ptc-line-height-dense);
-  letter-spacing: var(--ptc-element-spacing-01);
-  color: #cac8c8;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-  font-weight: var(--ptc-font-weight-semibold);
-}
-
-.primary-nav-link {
-  display: inline-block;
-  position: relative;
-  font-size: var(--ptc-font-size-small);
-  line-height: var(--ptc-line-height-normal);
-  font-weight: var(--ptc-font-weight-bold);
-  color: var(--color-white);
-  transition: color var(--ptc-transition-slow) ease;
-  padding: var(--ptc-element-spacing-04) 50px;
-  background-color: transparent;
-  text-decoration: none;
-  outline: none;
-}
-.primary-nav-link:hover {
-  color: var(--color-secondary-turtlegreen);
-  text-decoration: none;
-  outline: none;
-  background-color: transparent;
-}
-
-.nav-title-link {
-  font-family: var(--ptc-font-secondary-latin);
-  font-size: var(--ptc-font-size-medium);
-  font-weight: var(--ptc-font-weight-bold);
-  line-height: 1.56;
-  color: var(--color-white);
-  text-decoration: none;
-  outline: none;
-  background-color: transparent;
-  transition: color var(--ptc-transition-medium) var(--ptc-decelerated-ease);
-  border-bottom: 1.5px solid transparent;
-}
-.nav-title-link:hover {
-  color: var(--color-white);
-  border-bottom: 1.5px solid var(--color-secondary-turtlegreen);
-}
-
-.secondary-nav-link {
-  display: inline-block;
-  position: relative;
-  font-size: var(--ptc-font-size-x-small);
-  line-height: 20px;
-  font-weight: var(--ptc-font-weight-light);
-  color: var(--color-white);
-  transition: color var(--ptc-transition-slow) ease;
-  padding: 10px 15px;
-  background-color: transparent;
-  text-decoration: none;
-  outline: none;
-}
-.secondary-nav-link:hover {
-  color: var(--color-secondary-turtlegreen);
-  text-decoration: none;
-  outline: none;
-  background-color: transparent;
-}
-
-.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;
-}