@ptcwebops/ptcw-design 0.0.8 → 0.0.10

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

@@ -2,10 +2,29 @@ import { Component, Host, h, Prop, Listen } from '@stencil/core';
 import { ResponsiveBgVariables } from '../../utils/interfaces';
 export class PtcImg {
   constructor() {
+    /**
+     * 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() {
@@ -43,6 +62,7 @@ export class PtcImg {
     return {
       [this.imageType]: true,
       'ptc-img': true,
+      [this.borderRadius]: true,
     };
   }
   getCurrentBreakPoints() {
@@ -86,7 +106,7 @@ export class PtcImg {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Image size for smallest screen\n<=767px"
       },
       "attribute": "size-xs",
       "reflect": false,
@@ -104,7 +124,7 @@ export class PtcImg {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Image size for small screen\n>=768px and <=991px"
       },
       "attribute": "size-sm",
       "reflect": false,
@@ -122,7 +142,7 @@ export class PtcImg {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Image size for medium screen\n>=992px and <=1199px"
       },
       "attribute": "size-md",
       "reflect": false,
@@ -140,7 +160,7 @@ export class PtcImg {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Image solution for large screen\n>=1200px"
       },
       "attribute": "size-lg",
       "reflect": false,
@@ -158,7 +178,7 @@ export class PtcImg {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Image Src"
       },
       "attribute": "img-url",
       "reflect": false
@@ -175,11 +195,28 @@ export class PtcImg {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Image type"
       },
       "attribute": "image-type",
       "reflect": false,
       "defaultValue": "'smart-bg'"
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'radius-sm' | 'radius-md' | 'radius-lg'",
+        "resolved": "\"radius-lg\" | \"radius-md\" | \"radius-sm\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Image border shape"
+      },
+      "attribute": "border-radius",
+      "reflect": false
     }
   }; }
   static get listeners() { return [{

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

@@ -1,53 +1,57 @@
-ptc-para p.default {
+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 {
+p.xx-small {
   font-size: var(--ptc-font-size-xx-small);
 }
-ptc-para p.x-small {
+p.x-small {
   font-size: var(--ptc-font-size-x-small);
 }
-ptc-para p.small {
+p.small {
   font-size: var(--ptc-font-size-small);
 }
-ptc-para p.medium {
+p.medium {
   font-size: var(--ptc-font-size-medium);
 }
-ptc-para p.large {
+p.large {
   font-size: var(--ptc-font-size-large);
 }
-ptc-para p.x-large {
+p.x-large {
   font-size: var(--ptc-font-size-x-large);
 }
-ptc-para p.xx-large {
+p.xx-large {
   font-size: var(--ptc-font-size-xx-large);
 }
-ptc-para p.xxx-large {
+p.xxx-large {
   font-size: var(--ptc-font-size-xxx-large);
 }
-ptc-para p.xxxx-large {
+p.xxxx-large {
   font-size: var(--ptc-font-size-xxxx-large);
 }
-ptc-para p.w-3 {
+p.w-3 {
   font-weight: var(--ptc-font-weight-thin);
 }
-ptc-para p.w-4 {
+p.w-4 {
   font-weight: var(--ptc-font-weight-regular);
 }
-ptc-para p.w-5 {
+p.w-5 {
   font-weight: var(--ptc-font-weight-medium);
 }
-ptc-para p.w-6 {
+p.w-6 {
   font-weight: var(--ptc-font-weight-semibold);
 }
-ptc-para p.w-7 {
+p.w-7 {
   font-weight: var(--ptc-font-weight-bold);
 }
-ptc-para p.w-8 {
+p.w-8 {
   font-weight: var(--ptc-font-weight-extrabold);
 }
-ptc-para p.w-9 {
+p.w-9 {
   font-weight: var(--ptc-font-weight-black);
+}
+p.margin-flush {
+  margin-top: 0;
+  margin-bottom: 0;
 }

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

@@ -16,7 +16,7 @@ export class PtcPara {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h("p", { class: classMap },
+    return (h("p", { class: classMap, part: "part-para" },
       h("slot", null)));
   }
   getCssClassMap() {
@@ -24,9 +24,11 @@ export class PtcPara {
       [this.fontSize]: true,
       [this.fontWeight]: true,
       [this.paraStyle]: true,
+      [this.paraMargin]: true,
     };
   }
   static get is() { return "ptc-para"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["ptc-para.scss"]
   }; }
@@ -87,6 +89,23 @@ export class PtcPara {
       "attribute": "para-style",
       "reflect": false,
       "defaultValue": "'default'"
+    },
+    "paraMargin": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'margin-flush'",
+        "resolved": "\"margin-flush\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Paragraph Margin"
+      },
+      "attribute": "para-margin",
+      "reflect": false
     }
   }; }
 }

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

@@ -1,10 +1,11 @@
-ptc-span.link-style {
+: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);
 }
-ptc-span.nav-style {
+
+:host(.nav-style) span {
   display: block;
   color: #cac8c8;
   font-weight: var(--ptc-font-weight-medium);
@@ -13,4 +14,23 @@ ptc-span.nav-style {
   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;
 }

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

@@ -1,20 +1,27 @@
 import { Component, Host, h, Prop } from '@stencil/core';
 export class PtcSpan {
   constructor() {
+    /**
+     * Span Style
+     */
     this.spanStyle = 'tag-style';
+    this.display = 'inline';
   }
   render() {
     const classMap = this.getCssClassMap();
     return (h(Host, { class: classMap },
-      h("span", { part: "ptc-span" },
+      this.styles && h("style", null, this.styles),
+      h("span", { part: "part-ptc-span" },
         h("slot", null))));
   }
   getCssClassMap() {
     return {
       [this.spanStyle]: true,
+      [this.display]: true,
     };
   }
   static get is() { return "ptc-span"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["ptc-span.scss"]
   }; }
@@ -34,11 +41,46 @@ export class PtcSpan {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Span Style"
       },
       "attribute": "span-style",
       "reflect": false,
       "defaultValue": "'tag-style'"
+    },
+    "display": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'block' | 'inline-block' | 'inline'",
+        "resolved": "\"block\" | \"inline\" | \"inline-block\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "'inline'"
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Injected Styles"
+      },
+      "attribute": "styles",
+      "reflect": false
     }
   }; }
 }

package/dist/custom-elements/index.js

@@ -13614,7 +13614,7 @@ const PtcButton$1 = class extends HTMLElement {
   static get style() { return ptcButtonCss; }
 };
 
-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$1 = class extends HTMLElement {
   constructor() {
@@ -13654,8 +13654,12 @@ const PtcCard$1 = class extends HTMLElement {
   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.hasLottie ? h("slot", { name: "slot-lottie" }) : 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" }))))));
+    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 {
@@ -13663,6 +13667,20 @@ const PtcCard$1 = class extends HTMLElement {
       ['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 style() { return ptcCardCss; }
 };
 
@@ -13672,6 +13690,7 @@ const PtcDate$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    attachShadow(this);
     /**
      * Year
      */
@@ -13693,8 +13712,17 @@ const PtcDate$1 = class extends HTMLElement {
     this.country = "en-US";
   }
   render() {
-    const date = new Date(this.year, this.month, this.day);
-    return (h(Host, null, h("span", null, date.toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
+    // 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 style() { return ptcDateCss; }
 };
@@ -13772,16 +13800,35 @@ 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$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    /**
+     * 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() {
@@ -13818,6 +13865,7 @@ const PtcImg$1 = class extends HTMLElement {
     return {
       [this.imageType]: true,
       'ptc-img': true,
+      [this.borderRadius]: true,
     };
   }
   getCurrentBreakPoints() {
@@ -14052,12 +14100,13 @@ const PtcOverlay$1 = class extends HTMLElement {
   static get style() { return ptcOverlayCss; }
 };
 
-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$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    attachShadow(this);
     /**
      * Paragraph font size
      **/
@@ -14073,13 +14122,14 @@ const PtcPara$1 = class extends HTMLElement {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h("p", { class: classMap }, h("slot", null)));
+    return (h("p", { class: classMap, part: "part-para" }, h("slot", null)));
   }
   getCssClassMap() {
     return {
       [this.fontSize]: true,
       [this.fontWeight]: true,
       [this.paraStyle]: true,
+      [this.paraMargin]: true,
     };
   }
   static get style() { return ptcParaCss; }
@@ -14146,21 +14196,27 @@ const PtcSpacer$1 = class extends HTMLElement {
   static get style() { return ptcSpacerCss; }
 };
 
-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$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    attachShadow(this);
+    /**
+     * Span Style
+     */
     this.spanStyle = 'tag-style';
+    this.display = 'inline';
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("span", { part: "ptc-span" }, h("slot", null))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("span", { part: "part-ptc-span" }, h("slot", null))));
   }
   getCssClassMap() {
     return {
       [this.spanStyle]: true,
+      [this.display]: true,
     };
   }
   static get style() { return ptcSpanCss; }
@@ -14215,21 +14271,21 @@ const ListItem = /*@__PURE__*/proxyCustomElement(ListItem$1, [4,"list-item",{"li
 const LottiePlayer = /*@__PURE__*/proxyCustomElement(LottiePlayer$1, [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]}]);
 const MyComponent = /*@__PURE__*/proxyCustomElement(MyComponent$1, [1,"my-component",{"first":[1],"middle":[1],"last":[1]}]);
 const PtcButton = /*@__PURE__*/proxyCustomElement(PtcButton$1, [4,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"]}]);
-const PtcCard = /*@__PURE__*/proxyCustomElement(PtcCard$1, [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]}]);
-const PtcDate = /*@__PURE__*/proxyCustomElement(PtcDate$1, [0,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1]}]);
+const PtcCard = /*@__PURE__*/proxyCustomElement(PtcCard$1, [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]}]);
+const PtcDate = /*@__PURE__*/proxyCustomElement(PtcDate$1, [1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateStyles":[1,"date-styles"]}]);
 const PtcFooter = /*@__PURE__*/proxyCustomElement(PtcFooter$1, [1,"ptc-footer"]);
 const PtcImage = /*@__PURE__*/proxyCustomElement(PtcImage$1, [1,"ptc-image",{"src":[1],"alt":[1],"oldSrc":[32]}]);
-const PtcImg = /*@__PURE__*/proxyCustomElement(PtcImg$1, [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"]]]);
+const PtcImg = /*@__PURE__*/proxyCustomElement(PtcImg$1, [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"]]]);
 const PtcLink = /*@__PURE__*/proxyCustomElement(PtcLink$1, [1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]);
 const PtcList = /*@__PURE__*/proxyCustomElement(PtcList$1, [0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]);
 const PtcLottie = /*@__PURE__*/proxyCustomElement(PtcLottie$1, [1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]);
 const PtcNav = /*@__PURE__*/proxyCustomElement(PtcNav$1, [1,"ptc-nav"]);
 const PtcNavItem = /*@__PURE__*/proxyCustomElement(PtcNavItem$1, [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"]]]);
 const PtcOverlay = /*@__PURE__*/proxyCustomElement(PtcOverlay$1, [4,"ptc-overlay"]);
-const PtcPara = /*@__PURE__*/proxyCustomElement(PtcPara$1, [4,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"]}]);
+const PtcPara = /*@__PURE__*/proxyCustomElement(PtcPara$1, [1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}]);
 const PtcPicture = /*@__PURE__*/proxyCustomElement(PtcPicture$1, [4,"ptc-picture",{"lazy":[1]}]);
 const PtcSpacer = /*@__PURE__*/proxyCustomElement(PtcSpacer$1, [1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]);
-const PtcSpan = /*@__PURE__*/proxyCustomElement(PtcSpan$1, [4,"ptc-span",{"spanStyle":[1,"span-style"]}]);
+const PtcSpan = /*@__PURE__*/proxyCustomElement(PtcSpan$1, [1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]);
 const PtcTitle = /*@__PURE__*/proxyCustomElement(PtcTitle$1, [1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["ptc-link",[[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",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-button",[[4,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"]}]]],["ptc-card",[[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",[[0,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1]}]]],["ptc-footer",[[1,"ptc-footer"]]],["ptc-image",[[1,"ptc-image",{"src":[1],"alt":[1],"oldSrc":[32]}]]],["ptc-img",[[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",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav",[[1,"ptc-nav"]]],["ptc-nav-item",[[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",[[4,"ptc-overlay"]]],["ptc-para",[[4,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"]}]]],["ptc-picture",[[4,"ptc-picture",{"lazy":[1]}]]],["ptc-spacer",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span",[[4,"ptc-span",{"spanStyle":[1,"span-style"]}]]],["ptc-title",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["icon-asset",[[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]],["lottie-player",[[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 bootstrapLazy([["ptc-card",[[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",[[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",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-button",[[4,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"]}]]],["ptc-footer",[[1,"ptc-footer"]]],["ptc-image",[[1,"ptc-image",{"src":[1],"alt":[1],"oldSrc":[32]}]]],["ptc-img",[[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",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav",[[1,"ptc-nav"]]],["ptc-nav-item",[[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",[[4,"ptc-overlay"]]],["ptc-para",[[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}]]],["ptc-picture",[[4,"ptc-picture",{"lazy":[1]}]]],["ptc-spacer",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span",[[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]]],["ptc-title",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["icon-asset",[[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]],["lottie-player",[[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",[[1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateStyles":[1,"date-styles"]}]]]], options);
   });
 };