@ptcwebops/ptcw-design 0.1.1 → 0.1.2

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

@@ -0,0 +1,260 @@
+import { Component, Prop, Host, h } from '@stencil/core';
+export class PtcCard {
+  constructor() {
+    /**
+     * Card Type
+     * Specify Card Type, default to simple card
+     */
+    this.cardType = 'custom-card';
+    /**
+     * Card Link URL (Optional)
+     */
+    this.cardHref = undefined;
+    /**
+     * (optional) Link card target
+     * */
+    this.target = '_self';
+    /**
+     *  (optional) Link card rel
+     * */
+    this.rel = undefined;
+    /**
+     * If this card has Image
+     */
+    this.hasImage = false;
+    /**
+     * If this card has Video
+     */
+    this.hasVideo = false;
+    /**
+     * If this card has Lottie Image
+     */
+    this.hasLottie = false;
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    const classMap = this.getCssClassMap();
+    return (h(Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})),
+      this.styles && h("style", null, this.styles),
+      h("div", { class: "card-border", part: "border-wrapper" },
+        h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {})),
+          this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null,
+          h("div", { class: "card-body", part: "body-wrapper" },
+            h("slot", { name: "slot-before-heading" }),
+            !!this.heading
+              ? [
+                h("h3", { class: "ptc-h3", part: "card-heading" }, this.heading),
+                h("slot", { name: "slot-after-heading" }),
+              ]
+              : null,
+            h("slot", { name: "slot-description" }),
+            !!this.cardDate ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "::part(part-ptc-date){color:#40434a;font-size:var(--ptc-font-size-medium);margin-top:var(--ptc-element-spacing-04);display:inline-block;}" }) : null)))));
+  }
+  getCssClassMap() {
+    return {
+      ['card-layout']: true,
+      ['link-wrapper']: !!this.cardType ? true : false,
+    };
+  }
+  getMediaSlot() {
+    if (this.hasLottie) {
+      return 'slot-lottie';
+    }
+    else if (this.hasVideo) {
+      return 'slot-video';
+    }
+    else if (this.hasImage) {
+      return 'slot-image';
+    }
+    else {
+      return null;
+    }
+  }
+  static get is() { return "ptc-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-card.css"]
+  }; }
+  static get properties() { return {
+    "cardType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card'",
+        "resolved": "\"clip-edge-card\" | \"custom-card\" | \"hightlight-card\" | \"lottie-card\" | \"simple-card\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Card Type\nSpecify Card Type, default to simple card"
+      },
+      "attribute": "card-type",
+      "reflect": false,
+      "defaultValue": "'custom-card'"
+    },
+    "cardHref": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Card Link URL (Optional)"
+      },
+      "attribute": "card-href",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Link card target"
+      },
+      "attribute": "target",
+      "reflect": false,
+      "defaultValue": "'_self'"
+    },
+    "rel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Link card rel"
+      },
+      "attribute": "rel",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "hasImage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this card has Image"
+      },
+      "attribute": "has-image",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hasVideo": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this card has Video"
+      },
+      "attribute": "has-video",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hasLottie": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this card has Lottie Image"
+      },
+      "attribute": "has-lottie",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Card heading"
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "cardDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Card Date"
+      },
+      "attribute": "card-date",
+      "reflect": false
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Injected CSS styles"
+      },
+      "attribute": "styles",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,155 @@
+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 newDate = new Date(this.year, this.month, this.day);
+    return (h(Host, null,
+      this.dateStyles && h("style", null, this.dateStyles),
+      h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
+  }
+  getDate() {
+    if (this.dateString) {
+      let newDate = new Date(this.dateString.replace(/-/g, '\/'));
+      return newDate;
+    }
+    else {
+      return new Date(this.year, this.month, this.day);
+    }
+  }
+  static get is() { return "ptc-date"; }
+  static get encapsulation() { return "shadow"; }
+  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\""
+    },
+    "dateString": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Date\nexamples: 2000-1-1 or 2000/01/01"
+      },
+      "attribute": "date-string",
+      "reflect": false
+    },
+    "dateStyles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Injected styles"
+      },
+      "attribute": "date-styles",
+      "reflect": false
+    }
+  }; }
+}

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

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

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

@@ -0,0 +1,92 @@
+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

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