@ptcwebops/ptcw-design 0.1.2 → 0.1.3

package/dist/cjs/icon-asset_5.cjs.entry.js

@@ -143,7 +143,7 @@ const PtcButton = class {
 };
 PtcButton.style = ptcButtonCss;
 
-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}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-secondary-grey);line-height:var(--ptc-line-height-looser);letter-spacing:1px}";
+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}p.margin-top-3{margin-top:var(--ptc-element-spacing-03)}p.margin-top-4{margin-top:var(--ptc-element-spacing-04)}p.margin-top-5{margin-top:var(--ptc-element-spacing-05)}p.margin-top-6{margin-top:var(--ptc-element-spacing-06)}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03)}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04)}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05)}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06)}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-secondary-grey);line-height:var(--ptc-line-height-looser);letter-spacing:1px}";
 
 const PtcPara = class {
   constructor(hostRef) {

package/dist/cjs/interfaces-0ecd8027.js

@@ -0,0 +1,15 @@
+'use strict';
+
+let ResponsiveBgVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-img',
+  interval: 250
+};
+let ResponsivePictureVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-picture',
+  interval: 250
+};
+
+exports.ResponsiveBgVariables = ResponsiveBgVariables;
+exports.ResponsivePictureVariables = ResponsivePictureVariables;

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-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-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"],"loadMode":[1,"load-mode"]},[[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-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]}]]],["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"]}]]],["icon-asset_5.cjs",[[1,"ptc-announcement",{"btnText":[513,"btn-text"],"visible":[1540],"btnLink":[513,"btn-link"],"tempContainer":[4,"temp-container"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"target":[1],"rel":[1]}],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"]}],[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], 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-avatar.cjs",[[1,"ptc-avatar"]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["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"],"loadMode":[1,"load-mode"]},[[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-picture.cjs",[[1,"ptc-picture",{"src":[1],"alt":[1],"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"borderRadius":[1,"border-radius"],"height":[1],"width":[1],"objectFit":[1,"object-fit"],"oldSrc":[32]},[[9,"resize","WindowResize"]]]]],["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]}]]],["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"]}]]],["icon-asset_5.cjs",[[1,"ptc-announcement",{"btnText":[513,"btn-text"],"visible":[1540],"btnLink":[513,"btn-link"],"tempContainer":[4,"temp-container"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"target":[1],"rel":[1]}],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"]}],[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], options);
   });
 };
 

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac192914.js');
+
+const ptcAvatarCss = ":host{display:block}";
+
+const PtcAvatar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+PtcAvatar.style = ptcAvatarCss;
+
+exports.ptc_avatar = PtcAvatar;

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

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

@@ -3,12 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac192914.js');
-
-let ResponsiveBgVariables = {
-  envs: ['xs', 'sm', 'md', 'lg'],
-  selector: '.ptc-img',
-  interval: 250
-};
+const interfaces = require('./interfaces-0ecd8027.js');
 
 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)}.lazy-bg{background-image:none !important;background-color:var(--color-primary-lightgrey)}@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}}";
 
@@ -60,15 +55,15 @@ const PtcImg = class {
     this.setResponsiveBg();
   }
   componentWillUpdate() {
-    console.log('componentWillUpdate!');
+    // console.log('componentWillUpdate!');
     this.addIntersectionObserver();
     this.setResponsiveBg();
   }
   //responsive image
   setResponsiveBg() {
     // Define local variables
-    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    console.log('current breakpoint: ' + currentBreakpoint);
+    let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    // console.log('current breakpoint: ' + currentBreakpoint);
     // Loop through all target elements
     for (var i = 0, len = backgrounds.length; i < len; i++) {
       // Set current variables
@@ -98,7 +93,7 @@ const PtcImg = class {
           if (entry.isIntersecting) {
             const image = entry.target;
             image.classList.remove('lazy-bg');
-            console.log('loaded');
+            // console.log('loaded');
             bgObserver.unobserve(image);
           }
         });
@@ -122,8 +117,8 @@ const PtcImg = class {
     // Append test node
     doc.body.appendChild(temp);
     // Loop through breakpoints
-    for (let i = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
-      env = ResponsiveBgVariables.envs[i];
+    for (let i = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
+      env = interfaces.ResponsiveBgVariables.envs[i];
       // Add classes
       temp.className = 'hidden-' + env;
       // Found breakpoint

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

@@ -3,23 +3,164 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac192914.js');
+const interfaces = require('./interfaces-0ecd8027.js');
 
-const ptcPictureCss = ":host{display:block}";
+const ptcPictureCss = ":host{display:block;overflow:hidden}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}";
 
 const PtcPicture = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.lazy = 'lazy';
+    /**
+     * 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 border shape
+     */
+    this.borderRadius = '';
+    /**
+     * Set height
+     * Width will be auto by default
+     */
+    this.height = 'auto';
+    /**
+     * Set Width
+     * height will be 100% by default
+     */
+    this.width = '100%';
+    /**
+     * Object Fit
+     * Default: cover
+     */
+    this.objectFit = 'cover';
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+  //lazy-loading
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadImages = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = this.el.shadowRoot.querySelector('img');
+            image.src = this.setResponsiveBg();
+            console.log('loaded');
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => {
+        const image = this.el.shadowRoot.querySelector('img');
+        image.src = this.setResponsiveBg();
+        image.onload = () => {
+          image.removeAttribute('data-src');
+          console.log('loaded fallback');
+        };
+      }, 5000);
+    }
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    //console.log('current breakpoint: ' + currentBreakpoint);
+    // Loop through all target elements
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      if (elData !== null) {
+        // console.log('img src= ' + elData);
+        return elData;
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("picture", null, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("style", null, `img{width:${this.width};height:${this.height};}`), index.h("img", { class: classMap, "data-xs": `${this.src}:${this.sizeXs}`, "data-sm": `${this.src}:${this.sizeSm}`, "data-md": `${this.src}:${this.sizeMd}`, "data-lg": `${this.src}:${this.sizeLg}`, alt: this.alt })));
+  }
+  getCurrentBreakPoints() {
+    // Define local variables
+    let doc = window.document, temp = doc.createElement('div'), env;
+    // Append test node
+    doc.body.appendChild(temp);
+    // Loop through breakpoints
+    for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
+      env = interfaces.ResponsivePictureVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        console.log('remove test node');
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else {
+      return 'xs';
+    }
   }
   getCssClassMap() {
     return {
-      [this.lazy]: true,
+      [this.borderRadius]: true,
+      [this.objectFit]: true,
     };
   }
+  get el() { return index.getElement(this); }
 };
 PtcPicture.style = ptcPictureCss;
 

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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-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"],"loadMode":[1,"load-mode"]},[[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-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]}]]],["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"]}]]],["icon-asset_5.cjs",[[1,"ptc-announcement",{"btnText":[513,"btn-text"],"visible":[1540],"btnLink":[513,"btn-link"],"tempContainer":[4,"temp-container"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"target":[1],"rel":[1]}],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"]}],[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], 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-avatar.cjs",[[1,"ptc-avatar"]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["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"],"loadMode":[1,"load-mode"]},[[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-picture.cjs",[[1,"ptc-picture",{"src":[1],"alt":[1],"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"borderRadius":[1,"border-radius"],"height":[1],"width":[1],"objectFit":[1,"object-fit"],"oldSrc":[32]},[[9,"resize","WindowResize"]]]]],["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]}]]],["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"]}]]],["icon-asset_5.cjs",[[1,"ptc-announcement",{"btnText":[513,"btn-text"],"visible":[1540],"btnLink":[513,"btn-link"],"tempContainer":[4,"temp-container"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"target":[1],"rel":[1]}],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"]}],[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -4,11 +4,11 @@
     "./components/list-item/list-item.js",
     "./components/my-component/my-component.js",
     "./components/ptc-announcement/ptc-announcement.js",
+    "./components/ptc-avatar/ptc-avatar.js",
     "./components/ptc-button/ptc-button.js",
     "./components/ptc-card/ptc-card.js",
     "./components/ptc-date/ptc-date.js",
     "./components/ptc-footer/ptc-footer.js",
-    "./components/ptc-image/ptc-image.js",
     "./components/ptc-img/ptc-img.js",
     "./components/ptc-link/ptc-link.js",
     "./components/ptc-list/ptc-list.js",

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

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

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

@@ -0,0 +1,15 @@
+import { Component, Host, h } from '@stencil/core';
+export class PtcAvatar {
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "ptc-avatar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-avatar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-avatar.css"]
+  }; }
+}

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

@@ -134,7 +134,7 @@
 :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));
+  width: calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-04));
   font-size: var(--ptc-font-size-small);
   font-weight: var(--ptc-font-weight-medium);
   line-height: var(--ptc-line-height-dense);
@@ -142,7 +142,7 @@
   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);
+  padding: var(--ptc-element-spacing-05) var(--ptc-element-spacing-04) var(--ptc-element-spacing-03) var(--ptc-element-spacing-04);
 }
 :host(.clip-edge-card) .card-body h3 {
   display: inline-block;
@@ -154,7 +154,7 @@
   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);
+  margin: var(--ptc-element-spacing-03) 0;
 }
 :host(.clip-edge-card) ::slotted([slot=slot-description]) {
   height: 0;
@@ -169,6 +169,20 @@
   transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
   transform-origin: top center;
 }
+:host(.clip-edge-card) ::slotted([slot=slot-after-heading]) {
+  position: absolute;
+  top: var(--ptc-element-spacing-03);
+  left: var(--ptc-element-spacing-04);
+  opacity: 1;
+  transform: scale(1);
+  height: 44px;
+  transform-origin: left center;
+  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease), opacity var(--ptc-transition-medium) var(--ptc-standard-ease), height var(--ptc-transition-medium) var(--ptc-standard-ease);
+}
+:host(.clip-edge-card) ::slotted([slot=slot-before-heading]) {
+  opacity: 0;
+  transition: opacity var(--ptc-transition-medium) var(--ptc-standard-ease), height var(--ptc-transition-medium) var(--ptc-standard-ease);
+}
 :host(.clip-edge-card) .link-wrapper:hover .card-body h3 {
   border-bottom: 2px solid var(--color-secondary-turtlegreen);
 }
@@ -179,6 +193,15 @@
 :host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-image]) {
   transform: scale(1.1);
 }
+:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]) {
+  opacity: 0;
+  transform: scale(0);
+  height: 0;
+}
+:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-before-heading]) {
+  opacity: 1;
+  transition: opacity var(--ptc-transition-medium) var(--ptc-standard-ease);
+}
 
 :host(.hightlight-card) .card-border {
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

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

@@ -48,7 +48,7 @@ export class PtcCard {
               ]
               : 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)))));
+            !!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-05);display:inline-block;}" }) : null)))));
   }
   getCssClassMap() {
     return {

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

@@ -48,7 +48,7 @@ export class PtcImg {
     this.setResponsiveBg();
   }
   componentWillUpdate() {
-    console.log('componentWillUpdate!');
+    // console.log('componentWillUpdate!');
     this.addIntersectionObserver();
     this.setResponsiveBg();
   }
@@ -56,7 +56,7 @@ export class PtcImg {
   setResponsiveBg() {
     // Define local variables
     let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    console.log('current breakpoint: ' + currentBreakpoint);
+    // console.log('current breakpoint: ' + currentBreakpoint);
     // Loop through all target elements
     for (var i = 0, len = backgrounds.length; i < len; i++) {
       // Set current variables
@@ -86,7 +86,7 @@ export class PtcImg {
           if (entry.isIntersecting) {
             const image = entry.target;
             image.classList.remove('lazy-bg');
-            console.log('loaded');
+            // console.log('loaded');
             bgObserver.unobserve(image);
           }
         });
@@ -97,13 +97,7 @@ export class PtcImg {
     }
     else {
       // fall back to setTimeout for Safari and IE
-      // setTimeout(() => {
-      //   const image: HTMLImageElement = this.el.shadowRoot.querySelector('img');
-      //       image.src = image.dataset.src;
-      //       image.onload = () => {
-      //         image.removeAttribute('data-src');
-      //         console.log('loaded fallback');
-      //       };
+      // setTimeout(() => {};
       // }, 5000);
     }
   }

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

@@ -55,6 +55,30 @@ p.margin-flush {
   margin-top: 0;
   margin-bottom: 0;
 }
+p.margin-top-3 {
+  margin-top: var(--ptc-element-spacing-03);
+}
+p.margin-top-4 {
+  margin-top: var(--ptc-element-spacing-04);
+}
+p.margin-top-5 {
+  margin-top: var(--ptc-element-spacing-05);
+}
+p.margin-top-6 {
+  margin-top: var(--ptc-element-spacing-06);
+}
+p.margin-bottom-3 {
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+p.margin-bottom-4 {
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+p.margin-bottom-5 {
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+p.margin-bottom-6 {
+  margin-bottom: var(--ptc-element-spacing-06);
+}
 p.announcement {
   text-transform: uppercase;
   font-size: var(--ptc-font-size-small);

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

@@ -94,8 +94,8 @@ export class PtcPara {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'margin-flush'",
-        "resolved": "\"margin-flush\"",
+        "original": "'margin-flush' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'",
+        "resolved": "\"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
         "references": {}
       },
       "required": false,

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

@@ -1,3 +1,32 @@
 :host {
   display: block;
+  overflow: hidden;
 }
+
+.cover {
+  object-fit: cover;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+.none {
+  object-fit: none;
+}
+
+.initial {
+  object-fit: initial;
+}
+
+.inherit {
+  object-fit: inherit;
+}