@ptcwebops/ptcw-design 0.0.4 → 0.0.5

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

@@ -0,0 +1,110 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcDate {
+  constructor() {
+    /**
+     * Year
+     */
+    this.year = 1900;
+    /**
+     * Month
+     * An integer between 0 (January) and 11 (December) representing the month.If omitted, defaults to 0.
+     */
+    this.month = 0;
+    /**
+     * Day
+     * An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
+     */
+    this.day = 1;
+    /**
+     * Country
+     * examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
+     */
+    this.country = "en-US";
+  }
+  render() {
+    const date = new Date(this.year, this.month, this.day);
+    return (h(Host, null,
+      h("span", null, date.toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
+  }
+  static get is() { return "ptc-date"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-date.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-date.css"]
+  }; }
+  static get properties() { return {
+    "year": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Year"
+      },
+      "attribute": "year",
+      "reflect": false,
+      "defaultValue": "1900"
+    },
+    "month": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Month\nAn integer between 0 (January) and 11 (December) representing the month.If omitted, defaults to 0."
+      },
+      "attribute": "month",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "day": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Day\nAn integer between 1 and 31 representing the day of the month. If omitted, defaults to 1."
+      },
+      "attribute": "day",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "country": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Country\nexamples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES"
+      },
+      "attribute": "country",
+      "reflect": false,
+      "defaultValue": "\"en-US\""
+    }
+  }; }
+}

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

@@ -0,0 +1,40 @@
+:host {
+  display: block;
+  background-color: #1c2126;
+}
+
+.footer-style {
+  position: relative;
+  bottom: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto auto auto;
+  grid-template-areas: "left lImage" "right right" "share share" "copyright copyright";
+}
+@media screen and (min-width: 992px) {
+  .footer-style {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr fit-content(26px);
+    grid-template-areas: "lImage left right share" "copyright copyright copyright copyright";
+  }
+}
+
+.footer-image {
+  grid-area: lImage;
+}
+
+.footer-link-left {
+  grid-area: left;
+}
+
+.footer-link-right {
+  grid-area: right;
+}
+
+.footer-share {
+  grid-area: share;
+}
+
+.footer-copyright {
+  grid-area: copyright;
+}

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

@@ -0,0 +1,25 @@
+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,3 +1,4 @@
-:host {
-  display: block;
+img {
+  width: 100%;
+  height: auto;
 }

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

@@ -19,10 +19,6 @@ export class PtcImage {
           if (entry.isIntersecting) {
             const image = this.el.shadowRoot.querySelector('img');
             image.src = image.dataset.src;
-            // image.onload = () => {
-            //   // image.removeAttribute('data-src');
-            //   console.log('loaded');
-            // };
             console.log('loaded');
             lazyLoadImages.unobserve(image);
           }

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

@@ -0,0 +1,48 @@
+.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%;
+}
+
+/* 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: 480px) 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

@@ -0,0 +1,192 @@
+import { Component, Host, h, Prop, Listen } from '@stencil/core';
+import { ResponsiveBgVariables } from '../../utils/interfaces';
+export class PtcImg {
+  constructor() {
+    this.sizeXs = '510x340';
+    this.sizeSm = '1240x496';
+    this.sizeMd = '1366x500';
+    this.sizeLg = '1920x1080';
+    this.imageType = 'smart-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.setResponsiveBg();
+  }
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = 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');
+        }
+      }
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.imageType]: true,
+      'ptc-img': 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 !== document.body) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found
+    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": ""
+      },
+      "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": ""
+      },
+      "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": ""
+      },
+      "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": ""
+      },
+      "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": ""
+      },
+      "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": ""
+      },
+      "attribute": "image-type",
+      "reflect": false,
+      "defaultValue": "'smart-bg'"
+    }
+  }; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "WindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -1,4 +1,4 @@
-a {
+ptc-link a.ptc-link {
   display: inline-block;
   color: var(--color-primary-uigrey);
   font-weight: var(--ptc-font-weight-black);
@@ -8,21 +8,23 @@ a {
   outline: none;
   text-decoration: none;
 }
-a.simple::after {
+ptc-link a.simple::after {
   content: "";
   position: absolute;
   width: 100%;
   left: 0px;
-  bottom: 0px;
-  transition: all var(--ptc-transition-fast) var(--ptc-standard-ease);
-}
-a:hover.simple::after {
+  bottom: 2px;
+  transition: opacity var(--ptc-transition-fast) var(--ptc-standard-ease);
   border-bottom: 2px solid var(--color-primary-green);
+  opacity: 0;
+}
+ptc-link a:hover.simple::after {
+  opacity: 1;
 }
-a.arrow {
+ptc-link a.arrow {
   margin-right: var(--ptc-element-spacing-01);
 }
-a.arrow::after {
+ptc-link a.arrow::after {
   position: absolute;
   display: block;
   content: "";
@@ -31,18 +33,26 @@ a.arrow::after {
   bottom: 1px;
   transition: width var(--ptc-transition-fast) var(--ptc-standard-ease);
 }
-a:hover.arrow::after {
+ptc-link a:hover.arrow::after {
   width: 100%;
 }
-a.uppercase {
+ptc-link a.uppercase {
   text-transform: uppercase;
 }
-a.small {
+ptc-link a.small {
   font-size: var(--ptc-font-size-small);
 }
-a.medium {
+ptc-link a.medium {
   font-size: var(--ptc-font-size-medium);
 }
-a.large {
+ptc-link a.large {
   font-size: var(--ptc-font-size-large);
+}
+ptc-link a icon-asset {
+  position: absolute;
+  right: -25px;
+  transition: transform var(--ptc-transition-fast) var(--ptc-standard-ease);
+}
+ptc-link a:hover.arrow icon-asset {
+  transform: translateX(var(--ptc-element-spacing-04));
 }

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

@@ -1,10 +1,14 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Prop, Host } from '@stencil/core';
 export class PtcLink {
   constructor() {
     /**
      * Rxternal link
      * */
     this.external = false;
+    /**
+     * Target
+     */
+    this.target = '_self';
     /**
      * Theme
      */
@@ -12,7 +16,7 @@ export class PtcLink {
     /**
      * Uppercase
      */
-    this.textTransform = '';
+    this.uppercase = false;
     /**
      * Font Size
      */
@@ -20,18 +24,20 @@ export class PtcLink {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h("a", { class: classMap, href: this.href, target: this.target, title: this.linkTitle },
-      h("slot", null)));
+    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,
-      [this.textTransform]: true,
+      ['uppercase']: this.uppercase,
       [this.fontSize]: true,
     };
   }
   static get is() { return "ptc-link"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["ptc-link.scss"]
   }; }
@@ -43,12 +49,12 @@ export class PtcLink {
       "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "boolean | undefined",
+        "original": "boolean",
         "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Rxternal link"
@@ -89,7 +95,8 @@ export class PtcLink {
         "text": "Target"
       },
       "attribute": "target",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'_self'"
     },
     "linkTitle": {
       "type": "string",
@@ -126,12 +133,12 @@ export class PtcLink {
       "reflect": false,
       "defaultValue": "'simple'"
     },
-    "textTransform": {
-      "type": "string",
+    "uppercase": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "'uppercase' | ''",
-        "resolved": "\"\" | \"uppercase\"",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
@@ -140,9 +147,9 @@ export class PtcLink {
         "tags": [],
         "text": "Uppercase"
       },
-      "attribute": "text-transform",
+      "attribute": "uppercase",
       "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "false"
     },
     "fontSize": {
       "type": "string",

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

@@ -1,3 +1,24 @@
-:host {
-  display: block;
+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);
+}