@ptcwebops/ptcw-design 0.1.1 → 0.1.3

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

@@ -0,0 +1,309 @@
+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(() => {};
+      // }, 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 {
+      return 'xs';
+    }
+  }
+  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

@@ -0,0 +1,168 @@
+.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;
+}

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

@@ -0,0 +1,197 @@
+import { Component, h, Prop, Host } from '@stencil/core';
+export class PtcLink {
+  constructor() {
+    /**
+     * 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 (h(Host, null,
+      h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle },
+        this.theme == 'arrow' ? h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '',
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-link']: true,
+      [this.theme]: true,
+      ['uppercase']: this.uppercase,
+      ['disabled']: this.disabled,
+      [this.fontSize]: true,
+    };
+  }
+  static get is() { return "ptc-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-link.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-link.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disabled link"
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "external": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Rxternal link"
+      },
+      "attribute": "external",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "href"
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Target"
+      },
+      "attribute": "target",
+      "reflect": false,
+      "defaultValue": "'_self'"
+    },
+    "linkTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title"
+      },
+      "attribute": "link-title",
+      "reflect": false
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'simple' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link'",
+        "resolved": "\"arrow\" | \"copyright-link\" | \"footer-nav-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"secondary-nav-link\" | \"simple\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "'simple'"
+    },
+    "uppercase": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Uppercase"
+      },
+      "attribute": "uppercase",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "fontSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Font Size"
+      },
+      "attribute": "font-size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    }
+  }; }
+}

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

@@ -0,0 +1,24 @@
+ptc-list .link-primary li {
+  font-size: var(--ptc-font-size-medium);
+  line-height: var(--ptc-line-height-normal);
+  letter-spacing: var(--ptc-letter-spacing-normal);
+  list-style: none;
+}
+ptc-list .link-primary li:not(:last-child) {
+  margin-bottom: 0.625rem;
+}
+ptc-list .link-primary li a {
+  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);
+}
+ptc-list .link-primary li a:hover {
+  color: var(--color-white);
+  border-bottom: 1.5px solid var(--color-primary-green);
+}