@ptcwebops/ptcw-design 0.2.8 → 0.3.0

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

@@ -11,6 +11,10 @@ button {
   white-space: normal;
   position: relative;
   text-decoration: none;
+  -moz-osx-font-smoothing: grayscale;
+  /*(For Firefox)*/
+  -webkit-font-smoothing: antialiased;
+  /*(For Chrome and Safari)*/
   cursor: pointer;
   padding: 9.4px 17.5px;
   border-radius: 3px;
@@ -138,9 +142,12 @@ a {
   border-width: 1px;
   position: relative;
   text-decoration: none;
+  -moz-osx-font-smoothing: grayscale;
+  /*(For Firefox)*/
+  -webkit-font-smoothing: antialiased;
+  /*(For Chrome and Safari)*/
   padding: 9.4px 17.5px;
   border-radius: 3px;
-  text-decoration: none;
   display: inline-block;
   position: relative;
 }
@@ -180,6 +187,10 @@ a:hover.animation-down ::slotted([slot=slot-before-text]) {
   position: relative;
   text-align: center;
   text-decoration: none;
+  -moz-osx-font-smoothing: grayscale;
+  /*(For Firefox)*/
+  -webkit-font-smoothing: antialiased;
+  /*(For Chrome and Safari)*/
   transition: background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);
 }
 .nav:focus {

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

@@ -22,15 +22,19 @@ export class PtcButton {
      */
     this.iconPosition = 'icon-right';
     /**
-     * Link URL (Optional)
+     * Link URL
      */
     this.linkHref = undefined;
     /**
-     * (optional) Link target
+     * link Title
+     */
+    this.linkTitle = undefined;
+    /**
+     * Link target
      * */
     this.target = '_self';
     /**
-     *  (optional) Link rel
+     *  Link rel
      * */
     this.rel = undefined;
     /**
@@ -49,7 +53,7 @@ export class PtcButton {
     const Tag = !!this.linkHref ? 'a' : 'button';
     return (h(Host, null,
       this.styles && h("style", null, this.styles),
-      h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })),
+      h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })),
         h("span", null,
           h("slot", { name: "slot-before-text" }),
           h("slot", null),
@@ -174,12 +178,30 @@ export class PtcButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Link URL (Optional)"
+        "text": "Link URL"
       },
       "attribute": "link-href",
       "reflect": false,
       "defaultValue": "undefined"
     },
+    "linkTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "link Title"
+      },
+      "attribute": "link-title",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "target": {
       "type": "string",
       "mutable": false,
@@ -192,7 +214,7 @@ export class PtcButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "(optional) Link target"
+        "text": "Link target"
       },
       "attribute": "target",
       "reflect": false,
@@ -210,7 +232,7 @@ export class PtcButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "(optional) Link rel"
+        "text": "Link rel"
       },
       "attribute": "rel",
       "reflect": false,

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

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+}
+
+:host(.card-tall) .ptc-card-bottom-wrapper,
+:host(.card-wide) .ptc-card-bottom-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 0 var(--ptc-element-spacing-04) var(--ptc-element-spacing-05) var(--ptc-element-spacing-04);
+  z-index: 2;
+}
+
+:host(.card-playlist) {
+  flex: 72% 2 1;
+  align-self: center;
+}
+
+@media screen and (min-width: 1200px) {
+  :host(.card-video-intro) {
+    flex: 20% 2 1;
+    justify-content: flex-end;
+  }
+  :host(.card-video-intro) .ptc-card-bottom-wrapper {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcCardBottom {
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("div", { class: "ptc-card-bottom-wrapper" },
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: this.cardType ? true : false
+    };
+  }
+  static get is() { return "ptc-card-bottom"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-card-bottom.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-card-bottom.css"]
+  }; }
+  static get properties() { return {
+    "cardType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"card-video\" | \"card-tall\" | \"card-2up\" | \"card-wide\" | \"card-playlist\"",
+        "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-wide\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "card-type",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,87 @@
+:host {
+  display: block;
+}
+
+:host(.speed-bump) {
+  border: 1px solid #6a6a6a;
+  border-radius: 12px;
+  padding: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06);
+  text-align: center;
+}
+
+@media screen and (min-width: 768px) {
+  :host(.speed-bump) {
+    text-align: left;
+  }
+}
+:host(.card-tall) .ptc-card-content-wrapper,
+:host(.card-video) .ptc-card-content-wrapper,
+:host(.card-wide) .ptc-card-content-wrapper,
+:host(.card-playlist) .ptc-card-content-wrapper {
+  border-radius: var(--ptc-border-radius-x-large);
+  position: relative;
+}
+:host(.card-tall) .ptc-card-content-wrapper::before,
+:host(.card-video) .ptc-card-content-wrapper::before,
+:host(.card-wide) .ptc-card-content-wrapper::before,
+:host(.card-playlist) .ptc-card-content-wrapper::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 97.5%;
+  border-radius: var(--ptc-border-radius-x-large);
+  top: 0;
+  left: 0;
+  background: transparent;
+  z-index: 1;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
+  transition: background var(--ptc-transition-medium) var(--ptc-acceletated-ease);
+}
+:host(.card-tall) .ptc-card-content-wrapper::after,
+:host(.card-video) .ptc-card-content-wrapper::after,
+:host(.card-wide) .ptc-card-content-wrapper::after,
+:host(.card-playlist) .ptc-card-content-wrapper::after {
+  content: url("data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+  position: absolute;
+  opacity: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  transition: opacity var(--ptc-transition-medium) var(--ptc-acceletated-ease);
+}
+
+:host(.card-playlist) .ptc-card-content-wrapper {
+  width: 88px;
+  height: 88px;
+}
+:host(.card-playlist) .ptc-card-content-wrapper::before {
+  width: 88px;
+  height: 88px;
+}
+:host(.card-playlist) .ptc-card-content-wrapper::after {
+  content: url("data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+}
+
+:host(.mouse-hover) .ptc-card-content-wrapper::before {
+  background: rgba(0, 0, 0, 0.6);
+}
+:host(.mouse-hover) .ptc-card-content-wrapper::after {
+  opacity: 1;
+}
+
+:host(.card-tall) .ptc-card-content-wrapper::before,
+:host(.card-wide) .ptc-card-content-wrapper::before {
+  height: 100%;
+}
+
+:host(.card-playlist) {
+  flex: 28% 1 2;
+  margin-right: var(--ptc-element-spacing-03);
+}
+
+@media screen and (min-width: 1200px) {
+  :host(.card-video-intro) {
+    flex: 80% 8 1;
+  }
+}

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

@@ -0,0 +1,81 @@
+import { Component, Host, h, Prop, Event, Element } from '@stencil/core';
+export class PtcCardContent {
+  hoverEventHandler() {
+    this.hoverEvent.emit();
+    this.el.classList.add('mouse-hover');
+  }
+  leaveEventHandler() {
+    this.hoverEvent.emit();
+    this.el.classList.remove('mouse-hover');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) },
+      h("div", { class: "ptc-card-content-wrapper" },
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: !!this.cardType ? true : false,
+    };
+  }
+  static get is() { return "ptc-card-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-card-content.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-card-content.css"]
+  }; }
+  static get properties() { return {
+    "cardType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'speed-bump' | 'card-playlist'",
+        "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-wide\" | \"speed-bump\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "card-type",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "hoverEvent",
+      "name": "hoverEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "leaveEvent",
+      "name": "leaveEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,41 @@
+:host {
+  display: block;
+}
+
+:host(.card-tall),
+:host(.card-wide),
+:host(.card-video) :host(.card-playlist) {
+  position: relative;
+}
+:host(.card-tall) a,
+:host(.card-wide) a,
+:host(.card-video) :host(.card-playlist) a {
+  text-decoration: none;
+}
+:host(.card-tall) a:hover,
+:host(.card-wide) a:hover,
+:host(.card-video) :host(.card-playlist) a:hover {
+  text-decoration: none;
+}
+
+:host(.card-playlist) div,
+:host(.card-playlist) a {
+  display: flex;
+  text-decoration: none;
+  outline: none;
+}
+:host(.card-playlist) div:hover,
+:host(.card-playlist) a:hover {
+  text-decoration: none;
+  outline: none;
+}
+
+:host(.card-video-intro) div {
+  display: block;
+}
+
+@media screen and (min-width: 1200px) {
+  :host(.card-video-intro) div {
+    display: flex;
+  }
+}

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

@@ -0,0 +1,97 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcCardPlm {
+  constructor() {
+    this.linkTarget = '_self';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.cardLink ? 'a' : 'div';
+    return (h(Host, { class: classMap },
+      h(Tag, Object.assign({}, (!!this.cardLink ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink ? { target: this.linkTarget } : {}), (!!this.cardLink ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})),
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: this.cardType ? true : false
+    };
+  }
+  static get is() { return "ptc-card-plm"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-card-plm.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-card-plm.css"]
+  }; }
+  static get properties() { return {
+    "cardType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'card-video'| 'card-tall' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro'",
+        "resolved": "\"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"speed-bump\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "card-type",
+      "reflect": false
+    },
+    "cardLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "card-link",
+      "reflect": false
+    },
+    "linkTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link-title",
+      "reflect": false
+    },
+    "linkTarget": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link-target",
+      "reflect": false,
+      "defaultValue": "'_self'"
+    }
+  }; }
+}

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

@@ -1,3 +1,11 @@
 :host {
   display: block;
+}
+
+:host(.primary-grey) {
+  color: var(--color-primary-gray-new);
+}
+
+:host(.white) span {
+  color: var(--color-white);
 }

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

@@ -23,10 +23,16 @@ export class PtcDate {
   }
   render() {
     // const newDate = new Date(this.year, this.month, this.day);
-    return (h(Host, null,
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
       this.dateStyles && h("style", null, this.dateStyles),
       h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
   }
+  getCssClassMap() {
+    return {
+      [this.dateColor]: !!this.dateColor ? true : false
+    };
+  }
   getDate() {
     if (this.dateString) {
       let newDate = new Date(this.dateString.replace(/-/g, '\/'));
@@ -134,6 +140,23 @@ export class PtcDate {
       "attribute": "date-string",
       "reflect": false
     },
+    "dateColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'white' | 'primary-grey'",
+        "resolved": "\"primary-grey\" | \"white\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Date Color"
+      },
+      "attribute": "date-color",
+      "reflect": false
+    },
     "dateStyles": {
       "type": "string",
       "mutable": false,

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

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+:host(.jumbotron) .ptc-hero-wrapper,
+:host(.footer-cta) .ptc-hero-wrapper {
+  position: relative;
+}
+
+:host(.footer-cta) .ptc-hero-wrapper div > * {
+  text-align: center;
+}

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

@@ -0,0 +1,43 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcHero {
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("div", { class: "ptc-hero-wrapper" },
+        h("ptc-img", { "image-type": "smart-bg", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway", "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" },
+          this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1-xs" }), h("ptc-overlay", { "filter-color": "black-2-xs" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null,
+          h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+    };
+  }
+  static get is() { return "ptc-hero"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-hero.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-hero.css"]
+  }; }
+  static get properties() { return {
+    "heroType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'jumbotron' | 'footer-cta'",
+        "resolved": "\"footer-cta\" | \"jumbotron\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hero-type",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -35,13 +35,17 @@ export class PtcImg {
      */
     this.loadMode = 'lazy-bg';
   }
+  /**
+   * Image Z Index
+   */
+  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
   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}` })));
+      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}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
   }
   componentDidLoad() {
     this.addIntersectionObserver();
@@ -107,6 +111,7 @@ export class PtcImg {
       'ptc-img': true,
       [this.borderRadius]: true,
       [this.loadMode]: true,
+      // [this.imageZIndex] : true
     };
   }
   getCurrentBreakPoints() {