@ptcwebops/ptcw-design 0.0.8 → 0.0.10

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item.cjs",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-button.cjs",[[4,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"]}]]],["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"styles":[1]}]]],["ptc-date.cjs",[[0,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1]}]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-image.cjs",[[1,"ptc-image",{"src":[1],"alt":[1],"oldSrc":[32]}]]],["ptc-img.cjs",[[0,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"]},[[9,"resize","WindowResize"]]]]],["ptc-list.cjs",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-overlay.cjs",[[4,"ptc-overlay"]]],["ptc-para.cjs",[[4,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"]}]]],["ptc-picture.cjs",[[4,"ptc-picture",{"lazy":[1]}]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[4,"ptc-span",{"spanStyle":[1,"span-style"]}]]],["ptc-title.cjs",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["icon-asset.cjs",[[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]],["lottie-player.cjs",[[1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]]], options);
+  return index.bootstrapLazy([["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"cardDate":[1,"card-date"],"styles":[1]}]]],["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item.cjs",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-button.cjs",[[4,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"]}]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-image.cjs",[[1,"ptc-image",{"src":[1],"alt":[1],"oldSrc":[32]}]]],["ptc-img.cjs",[[0,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"]},[[9,"resize","WindowResize"]]]]],["ptc-list.cjs",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-overlay.cjs",[[4,"ptc-overlay"]]],["ptc-para.cjs",[[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}]]],["ptc-picture.cjs",[[4,"ptc-picture",{"lazy":[1]}]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]]],["ptc-title.cjs",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["icon-asset.cjs",[[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]],["lottie-player.cjs",[[1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]],["ptc-date.cjs",[[1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateStyles":[1,"date-styles"]}]]]], options);
   });
 };
 

package/dist/cjs/ptc-card.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac192914.js');
 
-const ptcCardCss = ":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}: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: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)}";
+const ptcCardCss = ":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}: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: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)}";
 
 const PtcCard = class {
   constructor(hostRef) {
@@ -42,8 +42,12 @@ const PtcCard = class {
   render() {
     const Tag = !!this.cardHref ? 'a' : 'div';
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})), this.styles && index.h("style", null, this.styles), index.h("div", { class: "card-border", part: "border-wrapper" }, index.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 ? (index.h("div", { class: "card-media", part: "media-wrapper" }, this.hasLottie ? index.h("slot", { name: "slot-lottie" }) : null)) : null, index.h("div", { class: "card-body", part: "body-wrapper" }, !!this.heading ? ([index.h("h3", { class: "ptc-h3", part: "card-heading" }, this.heading),
-      index.h("slot", { name: "slot-after-heading" })]) : null, index.h("slot", { name: "slot-description" }))))));
+    return (index.h(index.Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})), this.styles && index.h("style", null, this.styles), index.h("div", { class: "card-border", part: "border-wrapper" }, index.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 ? (index.h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? index.h("slot", { name: this.getMediaSlot() }) : null)) : null, index.h("div", { class: "card-body", part: "body-wrapper" }, index.h("slot", { name: "slot-before-heading" }), !!this.heading
+      ? [
+        index.h("h3", { class: "ptc-h3", part: "card-heading" }, this.heading),
+        index.h("slot", { name: "slot-after-heading" }),
+      ]
+      : null, index.h("slot", { name: "slot-description" }), !!this.cardDate ? index.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 {
@@ -51,6 +55,20 @@ const PtcCard = class {
       ['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;
+    }
+  }
 };
 PtcCard.style = ptcCardCss;
 

package/dist/cjs/ptc-date.cjs.entry.js

@@ -30,8 +30,17 @@ const PtcDate = class {
     this.country = "en-US";
   }
   render() {
-    const date = new Date(this.year, this.month, this.day);
-    return (index.h(index.Host, null, index.h("span", null, date.toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
+    // const newDate = new Date(this.year, this.month, this.day);
+    return (index.h(index.Host, null, this.dateStyles && index.h("style", null, this.dateStyles), index.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);
+    }
   }
 };
 PtcDate.style = ptcDateCss;

package/dist/cjs/ptc-img.cjs.entry.js

@@ -10,15 +10,34 @@ let ResponsiveBgVariables = {
   interval: 250
 };
 
-const ptcImgCss = ".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%}@media (max-width: 767px){.hidden-xs{display:none !important}}@media (min-width: 480px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media (min-width: 1200px){.hidden-lg{display:none !important}}";
+const ptcImgCss = ".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)}@media (max-width: 767px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media (min-width: 1200px){.hidden-lg{display:none !important}}";
 
 const PtcImg = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * 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';
   }
   WindowResize() {
@@ -55,6 +74,7 @@ const PtcImg = class {
     return {
       [this.imageType]: true,
       'ptc-img': true,
+      [this.borderRadius]: true,
     };
   }
   getCurrentBreakPoints() {

package/dist/cjs/ptc-para.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac192914.js');
 
-const ptcParaCss = "ptc-para p.default{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-primary-grey)}ptc-para p.xx-small{font-size:var(--ptc-font-size-xx-small)}ptc-para p.x-small{font-size:var(--ptc-font-size-x-small)}ptc-para p.small{font-size:var(--ptc-font-size-small)}ptc-para p.medium{font-size:var(--ptc-font-size-medium)}ptc-para p.large{font-size:var(--ptc-font-size-large)}ptc-para p.x-large{font-size:var(--ptc-font-size-x-large)}ptc-para p.xx-large{font-size:var(--ptc-font-size-xx-large)}ptc-para p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}ptc-para p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}ptc-para p.w-3{font-weight:var(--ptc-font-weight-thin)}ptc-para p.w-4{font-weight:var(--ptc-font-weight-regular)}ptc-para p.w-5{font-weight:var(--ptc-font-weight-medium)}ptc-para p.w-6{font-weight:var(--ptc-font-weight-semibold)}ptc-para p.w-7{font-weight:var(--ptc-font-weight-bold)}ptc-para p.w-8{font-weight:var(--ptc-font-weight-extrabold)}ptc-para p.w-9{font-weight:var(--ptc-font-weight-black)}";
+const ptcParaCss = "p.default{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-primary-grey)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}";
 
 const PtcPara = class {
   constructor(hostRef) {
@@ -24,13 +24,14 @@ const PtcPara = class {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (index.h("p", { class: classMap }, index.h("slot", null)));
+    return (index.h("p", { class: classMap, part: "part-para" }, index.h("slot", null)));
   }
   getCssClassMap() {
     return {
       [this.fontSize]: true,
       [this.fontWeight]: true,
       [this.paraStyle]: true,
+      [this.paraMargin]: true,
     };
   }
 };

package/dist/cjs/ptc-span.cjs.entry.js

@@ -4,20 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac192914.js');
 
-const ptcSpanCss = "ptc-span.link-style{color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal)}ptc-span.nav-style{display:block;color:#cac8c8;font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-transform:capitalize;padding-left:var(--ptc-element-spacing-05);font-size:17px;padding-bottom:var(--ptc-element-spacing-03)}";
+const ptcSpanCss = ":host(.link-style) span{color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal)}:host(.nav-style) span{display:block;color:#cac8c8;font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-transform:capitalize;padding-left:var(--ptc-element-spacing-05);font-size:17px;padding-bottom:var(--ptc-element-spacing-03)}:host(.tag-style) span{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-dense);font-weight:var(--ptc-font-weight-regular);color:#40434a}:host(.inline) span{display:inline}:host(.block) span{display:block}:host(.inline-block) span{display:inline-block}";
 
 const PtcSpan = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Span Style
+     */
     this.spanStyle = 'tag-style';
+    this.display = 'inline';
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("span", { part: "ptc-span" }, index.h("slot", null))));
+    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("span", { part: "part-ptc-span" }, index.h("slot", null))));
   }
   getCssClassMap() {
     return {
       [this.spanStyle]: true,
+      [this.display]: true,
     };
   }
 };

package/dist/cjs/ptcw-design.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item.cjs",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-button.cjs",[[4,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"]}]]],["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"styles":[1]}]]],["ptc-date.cjs",[[0,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1]}]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-image.cjs",[[1,"ptc-image",{"src":[1],"alt":[1],"oldSrc":[32]}]]],["ptc-img.cjs",[[0,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"]},[[9,"resize","WindowResize"]]]]],["ptc-list.cjs",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-overlay.cjs",[[4,"ptc-overlay"]]],["ptc-para.cjs",[[4,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"]}]]],["ptc-picture.cjs",[[4,"ptc-picture",{"lazy":[1]}]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[4,"ptc-span",{"spanStyle":[1,"span-style"]}]]],["ptc-title.cjs",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["icon-asset.cjs",[[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]],["lottie-player.cjs",[[1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]]], options);
+  return index.bootstrapLazy([["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"cardDate":[1,"card-date"],"styles":[1]}]]],["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item.cjs",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-button.cjs",[[4,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"]}]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-image.cjs",[[1,"ptc-image",{"src":[1],"alt":[1],"oldSrc":[32]}]]],["ptc-img.cjs",[[0,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"]},[[9,"resize","WindowResize"]]]]],["ptc-list.cjs",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-overlay.cjs",[[4,"ptc-overlay"]]],["ptc-para.cjs",[[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}]]],["ptc-picture.cjs",[[4,"ptc-picture",{"lazy":[1]}]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]]],["ptc-title.cjs",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["icon-asset.cjs",[[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]],["lottie-player.cjs",[[1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]],["ptc-date.cjs",[[1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateStyles":[1,"date-styles"]}]]]], options);
 });

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

@@ -97,4 +97,137 @@
 :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

@@ -38,11 +38,17 @@ export class PtcCard {
       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.hasLottie ? h("slot", { name: "slot-lottie" }) : null)) : null,
+          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" },
-            !!this.heading ? ([h("h3", { class: "ptc-h3", part: "card-heading" }, this.heading),
-              h("slot", { name: "slot-after-heading" })]) : null,
-            h("slot", { name: "slot-description" }))))));
+            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 {
@@ -50,6 +56,20 @@ export class PtcCard {
       ['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 {
@@ -63,8 +83,8 @@ export class PtcCard {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'simple-card' | 'lottie-card' | 'custom-card'",
-        "resolved": "\"custom-card\" | \"lottie-card\" | \"simple-card\"",
+        "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,
@@ -202,6 +222,23 @@ export class PtcCard {
       "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,

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

@@ -22,11 +22,22 @@ export class PtcDate {
     this.country = "en-US";
   }
   render() {
-    const date = new Date(this.year, this.month, this.day);
+    // const newDate = 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' }))));
+      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"]
   }; }
@@ -105,6 +116,40 @@ export class PtcDate {
       "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-img/ptc-img.css

@@ -18,6 +18,18 @@
   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);
+}
+
 /* XS */
 /* max-width: $screen-xs-max */
 @media (max-width: 767px) {
@@ -27,7 +39,7 @@
 }
 /* SM */
 /* min-width: $screen-sm-min) and (max-width: $screen-sm-max */
-@media (min-width: 480px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .hidden-sm {
     display: none !important;
   }