@ptcwebops/ptcw-design 0.0.15 → 0.1.0

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

@@ -1,239 +0,0 @@
-:host {
-  display: block;
-}
-
-:host(.lottie-card) .card-border {
-  box-shadow: 1px 1px 14px 0 rgba(101, 101, 101, 0.35);
-  border: 1px solid #c9c9c9;
-  border-radius: 10px;
-  position: relative;
-  overflow: hidden;
-}
-:host(.lottie-card) .card-border::after {
-  content: "";
-  height: 40%;
-  width: 4px;
-  position: absolute;
-  top: 30%;
-  right: -2px;
-  background-color: #74c34d;
-  z-index: 2;
-  display: block;
-}
-:host(.lottie-card) .card-border:hover {
-  box-shadow: 1px 1px 35px 0 rgba(101, 101, 101, 0.65);
-}
-:host(.lottie-card) .card-border:hover .card-body h3 {
-  border-bottom: 2px solid var(--color-primary-green);
-}
-:host(.lottie-card) .card-layout {
-  display: block;
-}
-@media only screen and (min-width: 992px) {
-  :host(.lottie-card) .card-layout {
-    display: flex;
-    flex-flow: nowrap row;
-    justify-content: center;
-  }
-}
-:host(.lottie-card) .link-wrapper {
-  outline: none;
-  text-decoration: none;
-}
-:host(.lottie-card) .link-wrapper:hover {
-  outline: none;
-  text-decoration: none;
-}
-:host(.lottie-card) .card-media {
-  flex-basis: 40%;
-  border-right: 1px solid #c9c9c9;
-}
-:host(.lottie-card) .card-body {
-  flex-basis: 60%;
-  align-self: center;
-  padding: 0 30px 10px;
-}
-:host(.lottie-card) .card-body h3 {
-  display: inline-block;
-  line-height: 1;
-  color: #40434a;
-  font-weight: var(--ptc-font-weight-bold);
-  font-size: var(--ptc-font-size-medium);
-  text-transform: uppercase;
-  border-bottom: 2px solid transparent;
-  margin-bottom: var(--ptc-element-spacing-02);
-}
-
-:host(.simple-card) .card-layout {
-  display: block;
-}
-:host(.simple-card) .link-wrapper {
-  outline: none;
-  text-decoration: none;
-}
-:host(.simple-card) .link-wrapper:hover {
-  outline: none;
-  text-decoration: none;
-}
-:host(.simple-card) .link-wrapper:hover .card-body h3::before {
-  width: 100%;
-}
-:host(.simple-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]) {
-  margin-left: 15px;
-}
-:host(.simple-card) .card-body h3 {
-  color: #40434a;
-  font-size: var(--ptc-font-size-small);
-  font-weight: var(--ptc-font-weight-black);
-  line-height: 1.86;
-  text-transform: uppercase;
-  position: relative;
-  margin-bottom: var(--ptc-element-spacing-02);
-  display: inline-block;
-}
-:host(.simple-card) .card-body h3::before {
-  display: block;
-  position: absolute;
-  content: "";
-  width: var(--ptc-element-spacing-06);
-  border-bottom: 2px solid var(--color-secondary-turtlegreen);
-  bottom: 1px;
-  transition: width var(--ptc-transition-medium) var(--ptc-standard-ease);
-}
-:host(.simple-card) ::slotted([slot=slot-after-heading]) {
-  margin-left: 5px;
-  transition: margin-left var(--ptc-transition-medium) var(--ptc-standard-ease);
-}
-
-:host(.clip-edge-card) .card-border {
-  overflow: hidden;
-  filter: drop-shadow(rgba(0, 0, 0, 0.32) 0px 3px 6px);
-  width: 100%;
-}
-:host(.clip-edge-card) .card-border:hover {
-  filter: drop-shadow(rgba(0, 0, 0, 0.32) 0px 6px 12px);
-}
-:host(.clip-edge-card) .card-layout {
-  display: block;
-}
-:host(.clip-edge-card) .link-wrapper {
-  outline: none;
-  text-decoration: none;
-}
-:host(.clip-edge-card) .link-wrapper:hover {
-  outline: none;
-  text-decoration: none;
-}
-:host(.clip-edge-card) .card-media {
-  position: relative;
-  width: 100%;
-  height: 124px;
-  overflow: hidden;
-  border-radius: var(--ptc-border-radius-medium);
-}
-:host(.clip-edge-card) .card-body {
-  transform: translateY(calc((-1) * var(--ptc-element-spacing-04)));
-  overflow: hidden;
-  width: calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-06));
-  font-size: var(--ptc-font-size-small);
-  font-weight: var(--ptc-font-weight-medium);
-  line-height: var(--ptc-line-height-dense);
-  color: #40434a;
-  clip-path: var(--ptc-clip-path-bottom-right);
-  background-color: var(--color-white);
-  border-radius: var(--ptc-border-radius-medium);
-  padding: var(--ptc-element-spacing-05) var(--ptc-element-spacing-04) var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);
-}
-:host(.clip-edge-card) .card-body h3 {
-  display: inline-block;
-  margin: 0px;
-  font-size: var(--ptc-font-size-medium);
-  font-weight: var(--ptc-font-weight-bold);
-  line-height: var(--ptc-line-height-dense);
-  color: var(--color-primary-uigrey);
-  text-decoration: none;
-  border-bottom: 2px solid transparent;
-  transition: border-bottom var(--ptc-transition-medium) var(--ptc-standard-ease);
-  margin-bottom: var(--ptc-element-spacing-03);
-}
-:host(.clip-edge-card) ::slotted([slot=slot-description]) {
-  height: 0;
-  opacity: 0;
-  transition: height var(--ptc-transition-medium) var(--ptc-standard-ease), opacity var(--ptc-transition-medium) var(--ptc-standard-ease);
-}
-:host(.clip-edge-card) ::slotted([slot=slot-image]) {
-  display: block;
-  width: 100%;
-  height: 100%;
-  transform: scale(1);
-  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
-  transform-origin: top center;
-}
-:host(.clip-edge-card) .link-wrapper:hover .card-body h3 {
-  border-bottom: 2px solid var(--color-secondary-turtlegreen);
-}
-:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-description]) {
-  height: 54px;
-  opacity: 1;
-}
-:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-image]) {
-  transform: scale(1.1);
-}
-
-:host(.hightlight-card) .card-border {
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  width: 100%;
-  border-radius: var(--ptc-border-radius-medium);
-  overflow: hidden;
-}
-:host(.hightlight-card) .card-border:hover .card-media {
-  transform: scale(1.1);
-}
-:host(.hightlight-card) .card-layout {
-  display: block;
-  position: relative;
-}
-:host(.hightlight-card) .link-wrapper {
-  outline: none;
-  text-decoration: none;
-}
-:host(.hightlight-card) .link-wrapper:hover {
-  outline: none;
-  text-decoration: none;
-}
-:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]) {
-  height: var(--ptc-layout-spacing-05);
-  opacity: 1;
-}
-:host(.hightlight-card) .card-media {
-  width: 100%;
-  height: auto;
-  min-height: 450px;
-  position: relative;
-  transform: scale(1);
-  transform-origin: center bottom;
-  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
-  transition-delay: var(--ptc-delay-medium);
-}
-:host(.hightlight-card) .card-body {
-  position: absolute;
-  bottom: 0;
-  top: auto;
-  left: 0;
-  right: auto;
-  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
-  background-color: var(--color-white);
-}
-:host(.hightlight-card) .card-body h3 {
-  font-size: 30px;
-  line-height: 1.27;
-  font-weight: var(--ptc-font-weight-bold);
-  color: var(--color-primary-uigrey);
-  margin: var(--ptc-element-spacing-04) 0;
-}
-:host(.hightlight-card) ::slotted([slot=slot-description]) {
-  height: 0;
-  opacity: 0;
-  transition: height var(--ptc-transition-medium) var(--ptc-standard-ease), opacity var(--ptc-transition-fast) var(--ptc-standard-ease);
-  transition-delay: var(--ptc-delay-medium);
-}

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

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

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

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

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

@@ -1,40 +0,0 @@
-: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;
-}