@ptcwebops/ptcw-design 7.0.11-upgrade → 7.0.12-upgrade

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/cjs/ptc-card-content.cjs.entry.js +1 -1
  2. package/dist/cjs/ptc-card-content.entry.cjs.js.map +1 -1
  3. package/dist/collection/components/molecules/ptc-card-content/ptc-card-content.css +1 -1
  4. package/dist/components/bundle-example.js +1 -1
  5. package/dist/components/most-popular-news.js +1 -1
  6. package/dist/components/{p-CXLAIdWX.js → p-CmtcG8H9.js} +3 -3
  7. package/dist/components/{p-CXLAIdWX.js.map → p-CmtcG8H9.js.map} +1 -1
  8. package/dist/components/{p-t26ogJDp.js → p-WLFTWNrK.js} +3 -3
  9. package/dist/components/{p-t26ogJDp.js.map → p-WLFTWNrK.js.map} +1 -1
  10. package/dist/components/ptc-card-content.js +1 -1
  11. package/dist/components/ptc-dynamic-card.js +1 -1
  12. package/dist/components/sequential-bundle-example.js +2 -2
  13. package/dist/components/sequential-bundle.js +2 -2
  14. package/dist/esm/ptc-card-content.entry.js +1 -1
  15. package/dist/esm/ptc-card-content.entry.js.map +1 -1
  16. package/dist/ptcw-design/{p-3facbe34.entry.js → p-f4e7596e.entry.js} +2 -2
  17. package/dist/ptcw-design/{p-3facbe34.entry.js.map → p-f4e7596e.entry.js.map} +1 -1
  18. package/dist/ptcw-design/ptc-card-content.entry.esm.js.map +1 -1
  19. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  20. package/package.json +1 -1
package/dist/cjs/ptc-card-content.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var index = require('./index-BtLiC7bN.js');
4
4
 
5
- const ptcCardContentCss = ":host{display:block;height:100%}:host ::slotted([slot=seo-content]){display:none}:host(.speed-bump){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;text-align:center}:host(.speed-bump-2){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);text-align:center}@media only screen and (min-width: 768px){:host(.speed-bump){text-align:left}}@media only screen and (min-width: 768px){:host(.speed-bump-2){text-align:left}}:host(.card-tall) .ptc-card-content-wrapper,:host(.card-video) .ptc-card-content-wrapper,:host(.card-wide) .ptc-card-content-wrapper,:host(.card-playlist) .ptc-card-content-wrapper,:host(.card-on-demand-video) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-video) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-playlist) .ptc-card-content-wrapper::before,:host(.card-on-demand-video) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-tall) .ptc-card-content-wrapper::after,:host(.card-video) .ptc-card-content-wrapper::after,:host(.card-wide) .ptc-card-content-wrapper::after,:host(.card-playlist) .ptc-card-content-wrapper::after,:host(.card-on-demand-video) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.extra-tall) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.card-2up) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-2up) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper::after{content:\"\";position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");width:40px;height:30px;top:50%}:host(.thumbnail-video-preview) .ptc-card-content-wrapper{cursor:pointer;position:relative}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:1;top:60%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-video) .ptc-card-content-wrapper::after{top:59.5%}:host(.mouse-hover) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.6)}:host(.mouse-hover) .ptc-card-content-wrapper::after{opacity:1}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-2up) .ptc-card-content-wrapper::before{height:100%}:host(.card-playlist){flex:1 2 0%;margin-right:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-playlist) .ptc-card-content-wrapper{width:88px;height:88px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:88px;height:88px}}@media only screen and (min-width: 768px){:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}}@media screen and (min-width: 1981px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:80% 8 1}}:host(.card-video) .ptc-card-content-wrapper{padding-bottom:56.25%}:host(.card-video) .ptc-card-content-wrapper ::slotted(*){position:absolute;width:100%;height:100%;top:0;left:0}:host(.card-tall) .ptc-card-content-wrapper{height:322px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:322px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.extra-tall) .ptc-card-content-wrapper{height:auto}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:auto}:host(.color-outlined){border-radius:var(--ptc-border-radius-large);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.color-outlined) .ptc-card-content-wrapper{height:235px}:host(.color-outlined) .ptc-card-content-wrapper ::slotted(*){height:235px}@media only screen and (min-width: 480px){:host(.extra-tall) .ptc-card-content-wrapper{height:435px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:435px}}@media only screen and (min-width: 768px){:host(.card-tall) .ptc-card-content-wrapper{height:325px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:325px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:268px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.extra-tall) .ptc-card-content-wrapper{height:507px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:507px}}@media only screen and (min-width: 992px){:host(.card-tall) .ptc-card-content-wrapper{height:380px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:380px}}@media only screen and (min-width: 1200px){:host(.extra-tall) .ptc-card-content-wrapper{height:663px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:663px}}@media only screen and (min-width: 1980px){:host(.card-tall) .ptc-card-content-wrapper{height:546px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:546px}:host(.card-wide) .ptc-card-content-wrapper{height:376px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:376px}:host(.card-2up) .ptc-card-content-wrapper{height:376px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:376px}}:host(.o-red){border:2px solid var(--color-red-07)}:host(.o-green){border:2px solid var(--color-green-07)}:host(.o-slate-grey){border:2px solid var(--color-gray-07)}:host(.o-orange){border:2px solid var(--color-orange-07)}:host(.o-blue){border:2px solid var(--color-blue-07)}:host(.card-on-demand-video) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.16);border:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}:host(.card-on-demand-video) .ptc-card-content-wrapper::after{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"48\" viewBox=\"0 0 46 48\" fill=\"none\"><g filter=\"url(%23filter0_d_2245_7)\"><path d=\"M38 20L8 36V4L38 20Z\" fill=\"white\"/></g><defs><filter id=\"filter0_d_2245_7\" x=\"0\" y=\"0\" width=\"46\" height=\"48\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2245_7\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2245_7\" result=\"shape\"/></filter></defs></svg>');opacity:1;left:0;right:0;top:8px;bottom:0;transform:translate(0%) scale(1);width:100%;height:100%;transform:none;display:flex;align-items:center;justify-content:center;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::before{background:transparent}:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::after{transform:translate(0%) scale(1.07);transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-on-demand-video:active) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.12)}:host(.card-on-demand-video.dark) .ptc-card-content-wrapper::before{border:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}";
5
+ const ptcCardContentCss = ":host{display:block;height:100%}:host ::slotted([slot=seo-content]){display:none}:host(.speed-bump){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;text-align:center}:host(.speed-bump-2){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);text-align:center}@media only screen and (min-width: 768px){:host(.speed-bump){text-align:left}}@media only screen and (min-width: 768px){:host(.speed-bump-2){text-align:left}}:host(.card-tall) .ptc-card-content-wrapper,:host(.card-video) .ptc-card-content-wrapper,:host(.card-wide) .ptc-card-content-wrapper,:host(.card-playlist) .ptc-card-content-wrapper,:host(.card-on-demand-video) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-video) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-playlist) .ptc-card-content-wrapper::before,:host(.card-on-demand-video) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-tall) .ptc-card-content-wrapper::after,:host(.card-video) .ptc-card-content-wrapper::after,:host(.card-wide) .ptc-card-content-wrapper::after,:host(.card-playlist) .ptc-card-content-wrapper::after,:host(.card-on-demand-video) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.extra-tall) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.card-2up) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-2up) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper::after{content:\"\";position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");width:40px;height:30px;top:50%}:host(.thumbnail-video-preview) .ptc-card-content-wrapper{cursor:pointer;position:relative}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:1;top:60%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-video) .ptc-card-content-wrapper::after{top:59.5%}:host(.mouse-hover) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.6)}:host(.mouse-hover) .ptc-card-content-wrapper::after{opacity:1}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-2up) .ptc-card-content-wrapper::before{height:100%}:host(.card-playlist){flex:1 2 0%;margin-right:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-playlist) .ptc-card-content-wrapper{width:88px;height:88px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:88px;height:88px}}@media only screen and (min-width: 768px){:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}}@media screen and (min-width: 1981px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:80% 8 1}}:host(.card-video) .ptc-card-content-wrapper{padding-bottom:56.25%}:host(.card-video) .ptc-card-content-wrapper ::slotted(*){position:absolute !important;width:100%;height:100%;top:0;left:0}:host(.card-tall) .ptc-card-content-wrapper{height:322px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:322px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.extra-tall) .ptc-card-content-wrapper{height:auto}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:auto}:host(.color-outlined){border-radius:var(--ptc-border-radius-large);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.color-outlined) .ptc-card-content-wrapper{height:235px}:host(.color-outlined) .ptc-card-content-wrapper ::slotted(*){height:235px}@media only screen and (min-width: 480px){:host(.extra-tall) .ptc-card-content-wrapper{height:435px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:435px}}@media only screen and (min-width: 768px){:host(.card-tall) .ptc-card-content-wrapper{height:325px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:325px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:268px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.extra-tall) .ptc-card-content-wrapper{height:507px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:507px}}@media only screen and (min-width: 992px){:host(.card-tall) .ptc-card-content-wrapper{height:380px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:380px}}@media only screen and (min-width: 1200px){:host(.extra-tall) .ptc-card-content-wrapper{height:663px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:663px}}@media only screen and (min-width: 1980px){:host(.card-tall) .ptc-card-content-wrapper{height:546px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:546px}:host(.card-wide) .ptc-card-content-wrapper{height:376px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:376px}:host(.card-2up) .ptc-card-content-wrapper{height:376px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:376px}}:host(.o-red){border:2px solid var(--color-red-07)}:host(.o-green){border:2px solid var(--color-green-07)}:host(.o-slate-grey){border:2px solid var(--color-gray-07)}:host(.o-orange){border:2px solid var(--color-orange-07)}:host(.o-blue){border:2px solid var(--color-blue-07)}:host(.card-on-demand-video) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.16);border:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}:host(.card-on-demand-video) .ptc-card-content-wrapper::after{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"48\" viewBox=\"0 0 46 48\" fill=\"none\"><g filter=\"url(%23filter0_d_2245_7)\"><path d=\"M38 20L8 36V4L38 20Z\" fill=\"white\"/></g><defs><filter id=\"filter0_d_2245_7\" x=\"0\" y=\"0\" width=\"46\" height=\"48\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2245_7\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2245_7\" result=\"shape\"/></filter></defs></svg>');opacity:1;left:0;right:0;top:8px;bottom:0;transform:translate(0%) scale(1);width:100%;height:100%;transform:none;display:flex;align-items:center;justify-content:center;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::before{background:transparent}:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::after{transform:translate(0%) scale(1.07);transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-on-demand-video:active) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.12)}:host(.card-on-demand-video.dark) .ptc-card-content-wrapper::before{border:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}";
6
6
 
7
7
  const PtcCardContent = class {
8
8
  constructor(hostRef) {
package/dist/cjs/ptc-card-content.entry.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ptc-card-content.entry.cjs.js","sources":["src/components/molecules/ptc-card-content/ptc-card-content.scss?tag=ptc-card-content&encapsulation=shadow","src/components/molecules/ptc-card-content/ptc-card-content.tsx"],"sourcesContent":["@use 'mixins' as *;\r\n\r\n:host {\r\n display: block;\r\n height: 100%;\r\n\r\n ::slotted([slot='seo-content']) {\r\n display: none;\r\n }\r\n}\r\n:host(.speed-bump) {\r\n border: 1px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-large);\r\n padding: var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;\r\n text-align: center;\r\n}\r\n:host(.speed-bump-2) {\r\n border: 1px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-large);\r\n padding: var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);\r\n text-align: center;\r\n}\r\n@include screen-sm {\r\n :host(.speed-bump) {\r\n text-align: left;\r\n }\r\n}\r\n@include screen-sm {\r\n :host(.speed-bump-2) {\r\n text-align: left;\r\n }\r\n}\r\n:host(.card-tall),\r\n:host(.card-video),\r\n:host(.card-wide),\r\n:host(.card-playlist),\r\n:host(.card-on-demand-video) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--ptc-border-radius-large);\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n position: absolute;\r\n opacity: 0;\r\n top: 52.5%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\r\n }\r\n}\r\n\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--ptc-border-radius-large);\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n opacity: 0;\r\n top: 52.5%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n:host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 112px;\r\n height: 112px;\r\n &::before {\r\n width: 112px;\r\n height: 112px;\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n width: 40px;\r\n height: 30px;\r\n top: 50%;\r\n }\r\n }\r\n}\r\n:host(.thumbnail-video-preview) {\r\n .ptc-card-content-wrapper {\r\n cursor: pointer;\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n position: absolute;\r\n opacity: 1;\r\n top: 60%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-video) {\r\n .ptc-card-content-wrapper {\r\n &::after {\r\n top: 59.5%;\r\n }\r\n }\r\n}\r\n\r\n:host(.mouse-hover) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.6);\r\n }\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n:host(.card-tall),\r\n:host(.card-wide),\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n height: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(.card-playlist) {\r\n flex: 1 2 0%;\r\n margin-right: var(--ptc-element-spacing-04);\r\n}\r\n@include screen-sm {\r\n :host(.card-playlist) {\r\n margin-right: var(--ptc-element-spacing-03);\r\n }\r\n}\r\n\r\n@include screen-md {\r\n :host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 88px;\r\n height: 88px;\r\n &::before {\r\n width: 88px;\r\n height: 88px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-sm {\r\n :host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 112px;\r\n height: 112px;\r\n &::before {\r\n width: 112px;\r\n height: 112px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media screen and (min-width: 1981px) {\r\n :host(.card-playlist) {\r\n margin-right: var(--ptc-element-spacing-04);\r\n }\r\n}\r\n\r\n@include screen-lg {\r\n :host(.card-video-intro) {\r\n flex: 80% 8 1;\r\n }\r\n}\r\n\r\n// Responsive Card Hight\r\n// 16x9 video card\r\n:host(.card-video) {\r\n .ptc-card-content-wrapper {\r\n padding-bottom: 56.25%;\r\n ::slotted(*) {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n }\r\n }\r\n}\r\n:host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 322px;\r\n ::slotted(*) {\r\n height: 322px;\r\n }\r\n }\r\n}\r\n:host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n}\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 322px;\r\n ::slotted(*) {\r\n height: 322px;\r\n }\r\n }\r\n}\r\n\r\n:host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: auto;\r\n ::slotted(*) {\r\n height: auto;\r\n }\r\n }\r\n}\r\n\r\n:host(.color-outlined) {\r\n border-radius: var(--ptc-border-radius-large);\r\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\r\n .ptc-card-content-wrapper {\r\n height: 235px;\r\n ::slotted(*) {\r\n height: 235px;\r\n }\r\n }\r\n}\r\n\r\n@include screen-xs {\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 435px;\r\n ::slotted(*) {\r\n height: 435px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-sm {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 325px;\r\n ::slotted(*) {\r\n height: 325px;\r\n }\r\n }\r\n }\r\n :host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n }\r\n :host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n }\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 507px;\r\n ::slotted(*) {\r\n height: 507px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-md {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 380px;\r\n ::slotted(*) {\r\n height: 380px;\r\n }\r\n }\r\n }\r\n}\r\n@include screen-lg {\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 663px;\r\n ::slotted(*) {\r\n height: 663px;\r\n }\r\n }\r\n }\r\n}\r\n@include screen-2k {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 546px;\r\n ::slotted(*) {\r\n height: 546px;\r\n }\r\n }\r\n }\r\n :host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 376px;\r\n ::slotted(*) {\r\n height: 376px;\r\n }\r\n }\r\n }\r\n :host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 376px;\r\n ::slotted(*) {\r\n height: 376px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.o-red) {\r\n border: 2px solid var(--color-red-07);\r\n}\r\n\r\n:host(.o-green) {\r\n border: 2px solid var(--color-green-07);\r\n}\r\n\r\n:host(.o-slate-grey) {\r\n border: 2px solid var(--color-gray-07);\r\n}\r\n\r\n:host(.o-orange) {\r\n border: 2px solid var(--color-orange-07);\r\n}\r\n\r\n:host(.o-blue) {\r\n border: 2px solid var(--color-blue-07);\r\n}\r\n\r\n:host(.card-on-demand-video) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.16);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-sizing: border-box;\r\n }\r\n &::after {\r\n content: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"48\" viewBox=\"0 0 46 48\" fill=\"none\"><g filter=\"url(%23filter0_d_2245_7)\"><path d=\"M38 20L8 36V4L38 20Z\" fill=\"white\"/></g><defs><filter id=\"filter0_d_2245_7\" x=\"0\" y=\"0\" width=\"46\" height=\"48\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2245_7\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2245_7\" result=\"shape\"/></filter></defs></svg>');\r\n opacity: 1;\r\n left: 0;\r\n right: 0;\r\n top: 8px;\r\n bottom: 0;\r\n transform: translate(0%) scale(1);\r\n width: 100%;\r\n height: 100%;\r\n transform: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-on-demand-video.mouse-hover) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: transparent;\r\n }\r\n &::after {\r\n transform: translate(0%) scale(1.07);\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-on-demand-video:active) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.12);\r\n }\r\n }\r\n}\r\n:host(.card-on-demand-video.dark) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-sizing: border-box;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Host,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Element,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n tag: \"ptc-card-content\",\r\n styleUrl: \"ptc-card-content.scss\",\r\n shadow: true,\r\n})\r\nexport class PtcCardContent {\r\n @Element() el: HTMLElement;\r\n\r\n @Prop() cardType?:\r\n | \"card-video\"\r\n | \"card-tall\"\r\n | \"card-2up\"\r\n | \"card-wide\"\r\n | \"speed-bump\"\r\n | \"card-playlist\"\r\n | \"card-video-intro\"\r\n | \"card-dynamic\"\r\n | \"extra-tall\"\r\n | \"color-outlined\"\r\n | \"thumbnail-video-preview\"\r\n | \"event-jumbotron-sub-card\"\r\n | \"event-podcast\"\r\n | \"card-on-demand-video\";\r\n\r\n @Prop() outlineColor?:\r\n | \"o-red\"\r\n | \"o-orange\"\r\n | \"o-blue\"\r\n | \"o-slate-grey\"\r\n | \"o-green\";\r\n /**\r\n * (optional) Injected CSS styles\r\n **/\r\n @Prop() styles?: string;\r\n\r\n @Prop() isLoading?: boolean = false;\r\n\r\n @Prop() cardOnDemandVideoTheme?: \"light\" | \"dark\" = \"light\";\r\n\r\n @Event() hoverEvent: EventEmitter<void>;\r\n hoverEventHandler() {\r\n if (\r\n !this.el.classList.contains(\"speed-bump\") &&\r\n !this.el.classList.contains(\"card-video-intro\") &&\r\n !this.el.classList.contains(\"card-dynamic\") &&\r\n !this.el.classList.contains(\"card-on-demand-video\") &&\r\n !this.el.classList.contains(\"extra-tall\")\r\n ) {\r\n this.hoverEvent.emit();\r\n this.el.classList.add(\"mouse-hover\");\r\n if (\r\n !this.el.classList.contains(\"card-video\") &&\r\n !this.el.classList.contains(\"card-playlist\") &&\r\n this.el.nextElementSibling\r\n ) {\r\n this.el.nextElementSibling.classList.add(\r\n \"mouse-hover-card-bottom\",\r\n );\r\n }\r\n }\r\n if (this.el.classList.contains(\"event-podcast\")) {\r\n const bottomComponent = this.el\r\n .nextElementSibling as HTMLPtcCardBottomElement;\r\n bottomComponent.addClassOnDefaultSlot();\r\n }\r\n }\r\n @Event() leaveEvent: EventEmitter<void>;\r\n leaveEventHandler() {\r\n if (\r\n !this.el.classList.contains(\"speed-bump\") &&\r\n !this.el.classList.contains(\"card-video-intro\") &&\r\n !this.el.classList.contains(\"card-dynamic\") &&\r\n !this.el.classList.contains(\"card-on-demand-video\") &&\r\n !this.el.classList.contains(\"extra-tall\")\r\n ) {\r\n this.hoverEvent.emit();\r\n this.el.classList.remove(\"mouse-hover\");\r\n if (\r\n !this.el.classList.contains(\"card-video\") &&\r\n !this.el.classList.contains(\"card-playlist\") &&\r\n this.el.nextElementSibling\r\n ) {\r\n this.el.nextElementSibling.classList.remove(\r\n \"mouse-hover-card-bottom\",\r\n );\r\n }\r\n }\r\n if (this.el.classList.contains(\"event-podcast\")) {\r\n const bottomComponent = this.el\r\n .nextElementSibling as HTMLPtcCardBottomElement;\r\n bottomComponent.removeClassOnDefaultSlot();\r\n }\r\n }\r\n\r\n @Method()\r\n async setHeight(height: number) {\r\n this.el.style.height = height + \"px\";\r\n const image = this.el.querySelector(\"ptc-picture\");\r\n image.style.height = height + \"px\";\r\n }\r\n\r\n @Method()\r\n async removeInlineHeight() {\r\n this.el.style.removeProperty(\"height\");\r\n const image = this.el.querySelector(\"ptc-picture\");\r\n if (image) image.style.removeProperty(\"height\");\r\n }\r\n\r\n render() {\r\n const classMap = this.getCssClassMap();\r\n\r\n return (\r\n <Host\r\n part=\"card-content\"\r\n class={classMap}\r\n {...(!this.isLoading\r\n ? { onMouseEnter: this.hoverEventHandler.bind(this) }\r\n : {})}\r\n {...(!this.isLoading\r\n ? { onMouseLeave: this.leaveEventHandler.bind(this) }\r\n : {})}\r\n >\r\n {this.styles && <style>{this.styles}</style>}\r\n <slot name=\"slot-content\"></slot>\r\n <div class=\"ptc-card-content-wrapper\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n private getCssClassMap(): CssClassMap {\r\n return {\r\n [this.cardType]: !!this.cardType ? true : false,\r\n [this.outlineColor]: !!this.outlineColor ? true : false,\r\n [this.cardOnDemandVideoTheme]: !!this.cardOnDemandVideoTheme\r\n ? true\r\n : false,\r\n };\r\n }\r\n}\r\n"],"names":["h","Host"],"mappings":"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"}
1
+ {"version":3,"file":"ptc-card-content.entry.cjs.js","sources":["src/components/molecules/ptc-card-content/ptc-card-content.scss?tag=ptc-card-content&encapsulation=shadow","src/components/molecules/ptc-card-content/ptc-card-content.tsx"],"sourcesContent":["@use 'mixins' as *;\r\n\r\n:host {\r\n display: block;\r\n height: 100%;\r\n\r\n ::slotted([slot='seo-content']) {\r\n display: none;\r\n }\r\n}\r\n:host(.speed-bump) {\r\n border: 1px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-large);\r\n padding: var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;\r\n text-align: center;\r\n}\r\n:host(.speed-bump-2) {\r\n border: 1px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-large);\r\n padding: var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);\r\n text-align: center;\r\n}\r\n@include screen-sm {\r\n :host(.speed-bump) {\r\n text-align: left;\r\n }\r\n}\r\n@include screen-sm {\r\n :host(.speed-bump-2) {\r\n text-align: left;\r\n }\r\n}\r\n:host(.card-tall),\r\n:host(.card-video),\r\n:host(.card-wide),\r\n:host(.card-playlist),\r\n:host(.card-on-demand-video) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--ptc-border-radius-large);\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n position: absolute;\r\n opacity: 0;\r\n top: 52.5%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\r\n }\r\n}\r\n\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--ptc-border-radius-large);\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n opacity: 0;\r\n top: 52.5%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n:host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 112px;\r\n height: 112px;\r\n &::before {\r\n width: 112px;\r\n height: 112px;\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n width: 40px;\r\n height: 30px;\r\n top: 50%;\r\n }\r\n }\r\n}\r\n:host(.thumbnail-video-preview) {\r\n .ptc-card-content-wrapper {\r\n cursor: pointer;\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n position: absolute;\r\n opacity: 1;\r\n top: 60%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-video) {\r\n .ptc-card-content-wrapper {\r\n &::after {\r\n top: 59.5%;\r\n }\r\n }\r\n}\r\n\r\n:host(.mouse-hover) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.6);\r\n }\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n:host(.card-tall),\r\n:host(.card-wide),\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n height: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(.card-playlist) {\r\n flex: 1 2 0%;\r\n margin-right: var(--ptc-element-spacing-04);\r\n}\r\n@include screen-sm {\r\n :host(.card-playlist) {\r\n margin-right: var(--ptc-element-spacing-03);\r\n }\r\n}\r\n\r\n@include screen-md {\r\n :host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 88px;\r\n height: 88px;\r\n &::before {\r\n width: 88px;\r\n height: 88px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-sm {\r\n :host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 112px;\r\n height: 112px;\r\n &::before {\r\n width: 112px;\r\n height: 112px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media screen and (min-width: 1981px) {\r\n :host(.card-playlist) {\r\n margin-right: var(--ptc-element-spacing-04);\r\n }\r\n}\r\n\r\n@include screen-lg {\r\n :host(.card-video-intro) {\r\n flex: 80% 8 1;\r\n }\r\n}\r\n\r\n// Responsive Card Hight\r\n// 16x9 video card\r\n:host(.card-video) {\r\n .ptc-card-content-wrapper {\r\n padding-bottom: 56.25%;\r\n ::slotted(*) {\r\n position: absolute !important;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n }\r\n }\r\n}\r\n:host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 322px;\r\n ::slotted(*) {\r\n height: 322px;\r\n }\r\n }\r\n}\r\n:host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n}\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 322px;\r\n ::slotted(*) {\r\n height: 322px;\r\n }\r\n }\r\n}\r\n\r\n:host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: auto;\r\n ::slotted(*) {\r\n height: auto;\r\n }\r\n }\r\n}\r\n\r\n:host(.color-outlined) {\r\n border-radius: var(--ptc-border-radius-large);\r\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\r\n .ptc-card-content-wrapper {\r\n height: 235px;\r\n ::slotted(*) {\r\n height: 235px;\r\n }\r\n }\r\n}\r\n\r\n@include screen-xs {\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 435px;\r\n ::slotted(*) {\r\n height: 435px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-sm {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 325px;\r\n ::slotted(*) {\r\n height: 325px;\r\n }\r\n }\r\n }\r\n :host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n }\r\n :host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n }\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 507px;\r\n ::slotted(*) {\r\n height: 507px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-md {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 380px;\r\n ::slotted(*) {\r\n height: 380px;\r\n }\r\n }\r\n }\r\n}\r\n@include screen-lg {\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 663px;\r\n ::slotted(*) {\r\n height: 663px;\r\n }\r\n }\r\n }\r\n}\r\n@include screen-2k {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 546px;\r\n ::slotted(*) {\r\n height: 546px;\r\n }\r\n }\r\n }\r\n :host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 376px;\r\n ::slotted(*) {\r\n height: 376px;\r\n }\r\n }\r\n }\r\n :host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 376px;\r\n ::slotted(*) {\r\n height: 376px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.o-red) {\r\n border: 2px solid var(--color-red-07);\r\n}\r\n\r\n:host(.o-green) {\r\n border: 2px solid var(--color-green-07);\r\n}\r\n\r\n:host(.o-slate-grey) {\r\n border: 2px solid var(--color-gray-07);\r\n}\r\n\r\n:host(.o-orange) {\r\n border: 2px solid var(--color-orange-07);\r\n}\r\n\r\n:host(.o-blue) {\r\n border: 2px solid var(--color-blue-07);\r\n}\r\n\r\n:host(.card-on-demand-video) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.16);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-sizing: border-box;\r\n }\r\n &::after {\r\n content: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"48\" viewBox=\"0 0 46 48\" fill=\"none\"><g filter=\"url(%23filter0_d_2245_7)\"><path d=\"M38 20L8 36V4L38 20Z\" fill=\"white\"/></g><defs><filter id=\"filter0_d_2245_7\" x=\"0\" y=\"0\" width=\"46\" height=\"48\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2245_7\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2245_7\" result=\"shape\"/></filter></defs></svg>');\r\n opacity: 1;\r\n left: 0;\r\n right: 0;\r\n top: 8px;\r\n bottom: 0;\r\n transform: translate(0%) scale(1);\r\n width: 100%;\r\n height: 100%;\r\n transform: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-on-demand-video.mouse-hover) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: transparent;\r\n }\r\n &::after {\r\n transform: translate(0%) scale(1.07);\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-on-demand-video:active) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.12);\r\n }\r\n }\r\n}\r\n:host(.card-on-demand-video.dark) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-sizing: border-box;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Host,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Element,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n tag: \"ptc-card-content\",\r\n styleUrl: \"ptc-card-content.scss\",\r\n shadow: true,\r\n})\r\nexport class PtcCardContent {\r\n @Element() el: HTMLElement;\r\n\r\n @Prop() cardType?:\r\n | \"card-video\"\r\n | \"card-tall\"\r\n | \"card-2up\"\r\n | \"card-wide\"\r\n | \"speed-bump\"\r\n | \"card-playlist\"\r\n | \"card-video-intro\"\r\n | \"card-dynamic\"\r\n | \"extra-tall\"\r\n | \"color-outlined\"\r\n | \"thumbnail-video-preview\"\r\n | \"event-jumbotron-sub-card\"\r\n | \"event-podcast\"\r\n | \"card-on-demand-video\";\r\n\r\n @Prop() outlineColor?:\r\n | \"o-red\"\r\n | \"o-orange\"\r\n | \"o-blue\"\r\n | \"o-slate-grey\"\r\n | \"o-green\";\r\n /**\r\n * (optional) Injected CSS styles\r\n **/\r\n @Prop() styles?: string;\r\n\r\n @Prop() isLoading?: boolean = false;\r\n\r\n @Prop() cardOnDemandVideoTheme?: \"light\" | \"dark\" = \"light\";\r\n\r\n @Event() hoverEvent: EventEmitter<void>;\r\n hoverEventHandler() {\r\n if (\r\n !this.el.classList.contains(\"speed-bump\") &&\r\n !this.el.classList.contains(\"card-video-intro\") &&\r\n !this.el.classList.contains(\"card-dynamic\") &&\r\n !this.el.classList.contains(\"card-on-demand-video\") &&\r\n !this.el.classList.contains(\"extra-tall\")\r\n ) {\r\n this.hoverEvent.emit();\r\n this.el.classList.add(\"mouse-hover\");\r\n if (\r\n !this.el.classList.contains(\"card-video\") &&\r\n !this.el.classList.contains(\"card-playlist\") &&\r\n this.el.nextElementSibling\r\n ) {\r\n this.el.nextElementSibling.classList.add(\r\n \"mouse-hover-card-bottom\",\r\n );\r\n }\r\n }\r\n if (this.el.classList.contains(\"event-podcast\")) {\r\n const bottomComponent = this.el\r\n .nextElementSibling as HTMLPtcCardBottomElement;\r\n bottomComponent.addClassOnDefaultSlot();\r\n }\r\n }\r\n @Event() leaveEvent: EventEmitter<void>;\r\n leaveEventHandler() {\r\n if (\r\n !this.el.classList.contains(\"speed-bump\") &&\r\n !this.el.classList.contains(\"card-video-intro\") &&\r\n !this.el.classList.contains(\"card-dynamic\") &&\r\n !this.el.classList.contains(\"card-on-demand-video\") &&\r\n !this.el.classList.contains(\"extra-tall\")\r\n ) {\r\n this.hoverEvent.emit();\r\n this.el.classList.remove(\"mouse-hover\");\r\n if (\r\n !this.el.classList.contains(\"card-video\") &&\r\n !this.el.classList.contains(\"card-playlist\") &&\r\n this.el.nextElementSibling\r\n ) {\r\n this.el.nextElementSibling.classList.remove(\r\n \"mouse-hover-card-bottom\",\r\n );\r\n }\r\n }\r\n if (this.el.classList.contains(\"event-podcast\")) {\r\n const bottomComponent = this.el\r\n .nextElementSibling as HTMLPtcCardBottomElement;\r\n bottomComponent.removeClassOnDefaultSlot();\r\n }\r\n }\r\n\r\n @Method()\r\n async setHeight(height: number) {\r\n this.el.style.height = height + \"px\";\r\n const image = this.el.querySelector(\"ptc-picture\");\r\n image.style.height = height + \"px\";\r\n }\r\n\r\n @Method()\r\n async removeInlineHeight() {\r\n this.el.style.removeProperty(\"height\");\r\n const image = this.el.querySelector(\"ptc-picture\");\r\n if (image) image.style.removeProperty(\"height\");\r\n }\r\n\r\n render() {\r\n const classMap = this.getCssClassMap();\r\n\r\n return (\r\n <Host\r\n part=\"card-content\"\r\n class={classMap}\r\n {...(!this.isLoading\r\n ? { onMouseEnter: this.hoverEventHandler.bind(this) }\r\n : {})}\r\n {...(!this.isLoading\r\n ? { onMouseLeave: this.leaveEventHandler.bind(this) }\r\n : {})}\r\n >\r\n {this.styles && <style>{this.styles}</style>}\r\n <slot name=\"slot-content\"></slot>\r\n <div class=\"ptc-card-content-wrapper\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n private getCssClassMap(): CssClassMap {\r\n return {\r\n [this.cardType]: !!this.cardType ? true : false,\r\n [this.outlineColor]: !!this.outlineColor ? true : false,\r\n [this.cardOnDemandVideoTheme]: !!this.cardOnDemandVideoTheme\r\n ? true\r\n : false,\r\n };\r\n }\r\n}\r\n"],"names":["h","Host"],"mappings":"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"}
package/dist/collection/components/molecules/ptc-card-content/ptc-card-content.css CHANGED
@@ -207,7 +207,7 @@
207
207
  padding-bottom: 56.25%;
208
208
  }
209
209
  :host(.card-video) .ptc-card-content-wrapper ::slotted(*) {
210
- position: absolute;
210
+ position: absolute !important;
211
211
  width: 100%;
212
212
  height: 100%;
213
213
  top: 0;
package/dist/components/bundle-example.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { c as proxyCustomElement, H, h, d as Host } from './p-C2SefPLt.js';
2
2
  import { d as defineCustomElement$7 } from './p-CsspebZG.js';
3
- import { d as defineCustomElement$6 } from './p-CXLAIdWX.js';
3
+ import { d as defineCustomElement$6 } from './p-CmtcG8H9.js';
4
4
  import { d as defineCustomElement$5 } from './p-m0MheKYy.js';
5
5
  import { d as defineCustomElement$4 } from './p-l8keCSLZ.js';
6
6
  import { d as defineCustomElement$3 } from './p-SaYc7Kjd.js';
package/dist/components/most-popular-news.js CHANGED
@@ -2,7 +2,7 @@ import { c as proxyCustomElement, H, h, d as Host } from './p-C2SefPLt.js';
2
2
  import { a as equalizeHeightsWithinShadow } from './p-DpFzAwLW.js';
3
3
  import { d as defineCustomElement$8 } from './p-UM5LphbN.js';
4
4
  import { d as defineCustomElement$7 } from './p-CsspebZG.js';
5
- import { d as defineCustomElement$6 } from './p-CXLAIdWX.js';
5
+ import { d as defineCustomElement$6 } from './p-CmtcG8H9.js';
6
6
  import { d as defineCustomElement$5 } from './p-m0MheKYy.js';
7
7
  import { d as defineCustomElement$4 } from './p-l8keCSLZ.js';
8
8
  import { d as defineCustomElement$3 } from './p-SaYc7Kjd.js';
package/dist/components/{p-CXLAIdWX.js → p-CmtcG8H9.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { c as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-C2SefPLt.js';
2
2
 
3
- const ptcCardContentCss = ":host{display:block;height:100%}:host ::slotted([slot=seo-content]){display:none}:host(.speed-bump){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;text-align:center}:host(.speed-bump-2){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);text-align:center}@media only screen and (min-width: 768px){:host(.speed-bump){text-align:left}}@media only screen and (min-width: 768px){:host(.speed-bump-2){text-align:left}}:host(.card-tall) .ptc-card-content-wrapper,:host(.card-video) .ptc-card-content-wrapper,:host(.card-wide) .ptc-card-content-wrapper,:host(.card-playlist) .ptc-card-content-wrapper,:host(.card-on-demand-video) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-video) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-playlist) .ptc-card-content-wrapper::before,:host(.card-on-demand-video) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-tall) .ptc-card-content-wrapper::after,:host(.card-video) .ptc-card-content-wrapper::after,:host(.card-wide) .ptc-card-content-wrapper::after,:host(.card-playlist) .ptc-card-content-wrapper::after,:host(.card-on-demand-video) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.extra-tall) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.card-2up) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-2up) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper::after{content:\"\";position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");width:40px;height:30px;top:50%}:host(.thumbnail-video-preview) .ptc-card-content-wrapper{cursor:pointer;position:relative}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:1;top:60%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-video) .ptc-card-content-wrapper::after{top:59.5%}:host(.mouse-hover) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.6)}:host(.mouse-hover) .ptc-card-content-wrapper::after{opacity:1}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-2up) .ptc-card-content-wrapper::before{height:100%}:host(.card-playlist){flex:1 2 0%;margin-right:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-playlist) .ptc-card-content-wrapper{width:88px;height:88px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:88px;height:88px}}@media only screen and (min-width: 768px){:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}}@media screen and (min-width: 1981px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:80% 8 1}}:host(.card-video) .ptc-card-content-wrapper{padding-bottom:56.25%}:host(.card-video) .ptc-card-content-wrapper ::slotted(*){position:absolute;width:100%;height:100%;top:0;left:0}:host(.card-tall) .ptc-card-content-wrapper{height:322px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:322px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.extra-tall) .ptc-card-content-wrapper{height:auto}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:auto}:host(.color-outlined){border-radius:var(--ptc-border-radius-large);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.color-outlined) .ptc-card-content-wrapper{height:235px}:host(.color-outlined) .ptc-card-content-wrapper ::slotted(*){height:235px}@media only screen and (min-width: 480px){:host(.extra-tall) .ptc-card-content-wrapper{height:435px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:435px}}@media only screen and (min-width: 768px){:host(.card-tall) .ptc-card-content-wrapper{height:325px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:325px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:268px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.extra-tall) .ptc-card-content-wrapper{height:507px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:507px}}@media only screen and (min-width: 992px){:host(.card-tall) .ptc-card-content-wrapper{height:380px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:380px}}@media only screen and (min-width: 1200px){:host(.extra-tall) .ptc-card-content-wrapper{height:663px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:663px}}@media only screen and (min-width: 1980px){:host(.card-tall) .ptc-card-content-wrapper{height:546px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:546px}:host(.card-wide) .ptc-card-content-wrapper{height:376px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:376px}:host(.card-2up) .ptc-card-content-wrapper{height:376px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:376px}}:host(.o-red){border:2px solid var(--color-red-07)}:host(.o-green){border:2px solid var(--color-green-07)}:host(.o-slate-grey){border:2px solid var(--color-gray-07)}:host(.o-orange){border:2px solid var(--color-orange-07)}:host(.o-blue){border:2px solid var(--color-blue-07)}:host(.card-on-demand-video) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.16);border:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}:host(.card-on-demand-video) .ptc-card-content-wrapper::after{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"48\" viewBox=\"0 0 46 48\" fill=\"none\"><g filter=\"url(%23filter0_d_2245_7)\"><path d=\"M38 20L8 36V4L38 20Z\" fill=\"white\"/></g><defs><filter id=\"filter0_d_2245_7\" x=\"0\" y=\"0\" width=\"46\" height=\"48\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2245_7\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2245_7\" result=\"shape\"/></filter></defs></svg>');opacity:1;left:0;right:0;top:8px;bottom:0;transform:translate(0%) scale(1);width:100%;height:100%;transform:none;display:flex;align-items:center;justify-content:center;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::before{background:transparent}:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::after{transform:translate(0%) scale(1.07);transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-on-demand-video:active) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.12)}:host(.card-on-demand-video.dark) .ptc-card-content-wrapper::before{border:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}";
3
+ const ptcCardContentCss = ":host{display:block;height:100%}:host ::slotted([slot=seo-content]){display:none}:host(.speed-bump){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;text-align:center}:host(.speed-bump-2){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);text-align:center}@media only screen and (min-width: 768px){:host(.speed-bump){text-align:left}}@media only screen and (min-width: 768px){:host(.speed-bump-2){text-align:left}}:host(.card-tall) .ptc-card-content-wrapper,:host(.card-video) .ptc-card-content-wrapper,:host(.card-wide) .ptc-card-content-wrapper,:host(.card-playlist) .ptc-card-content-wrapper,:host(.card-on-demand-video) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-video) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-playlist) .ptc-card-content-wrapper::before,:host(.card-on-demand-video) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-tall) .ptc-card-content-wrapper::after,:host(.card-video) .ptc-card-content-wrapper::after,:host(.card-wide) .ptc-card-content-wrapper::after,:host(.card-playlist) .ptc-card-content-wrapper::after,:host(.card-on-demand-video) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.extra-tall) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.card-2up) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-2up) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper::after{content:\"\";position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");width:40px;height:30px;top:50%}:host(.thumbnail-video-preview) .ptc-card-content-wrapper{cursor:pointer;position:relative}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.thumbnail-video-preview) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:1;top:60%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-video) .ptc-card-content-wrapper::after{top:59.5%}:host(.mouse-hover) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.6)}:host(.mouse-hover) .ptc-card-content-wrapper::after{opacity:1}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-2up) .ptc-card-content-wrapper::before{height:100%}:host(.card-playlist){flex:1 2 0%;margin-right:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-playlist) .ptc-card-content-wrapper{width:88px;height:88px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:88px;height:88px}}@media only screen and (min-width: 768px){:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}}@media screen and (min-width: 1981px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:80% 8 1}}:host(.card-video) .ptc-card-content-wrapper{padding-bottom:56.25%}:host(.card-video) .ptc-card-content-wrapper ::slotted(*){position:absolute !important;width:100%;height:100%;top:0;left:0}:host(.card-tall) .ptc-card-content-wrapper{height:322px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:322px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.extra-tall) .ptc-card-content-wrapper{height:auto}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:auto}:host(.color-outlined){border-radius:var(--ptc-border-radius-large);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.12)}:host(.color-outlined) .ptc-card-content-wrapper{height:235px}:host(.color-outlined) .ptc-card-content-wrapper ::slotted(*){height:235px}@media only screen and (min-width: 480px){:host(.extra-tall) .ptc-card-content-wrapper{height:435px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:435px}}@media only screen and (min-width: 768px){:host(.card-tall) .ptc-card-content-wrapper{height:325px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:325px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:268px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.extra-tall) .ptc-card-content-wrapper{height:507px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:507px}}@media only screen and (min-width: 992px){:host(.card-tall) .ptc-card-content-wrapper{height:380px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:380px}}@media only screen and (min-width: 1200px){:host(.extra-tall) .ptc-card-content-wrapper{height:663px}:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*){height:663px}}@media only screen and (min-width: 1980px){:host(.card-tall) .ptc-card-content-wrapper{height:546px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:546px}:host(.card-wide) .ptc-card-content-wrapper{height:376px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:376px}:host(.card-2up) .ptc-card-content-wrapper{height:376px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:376px}}:host(.o-red){border:2px solid var(--color-red-07)}:host(.o-green){border:2px solid var(--color-green-07)}:host(.o-slate-grey){border:2px solid var(--color-gray-07)}:host(.o-orange){border:2px solid var(--color-orange-07)}:host(.o-blue){border:2px solid var(--color-blue-07)}:host(.card-on-demand-video) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.16);border:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}:host(.card-on-demand-video) .ptc-card-content-wrapper::after{content:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"48\" viewBox=\"0 0 46 48\" fill=\"none\"><g filter=\"url(%23filter0_d_2245_7)\"><path d=\"M38 20L8 36V4L38 20Z\" fill=\"white\"/></g><defs><filter id=\"filter0_d_2245_7\" x=\"0\" y=\"0\" width=\"46\" height=\"48\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2245_7\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2245_7\" result=\"shape\"/></filter></defs></svg>');opacity:1;left:0;right:0;top:8px;bottom:0;transform:translate(0%) scale(1);width:100%;height:100%;transform:none;display:flex;align-items:center;justify-content:center;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::before{background:transparent}:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::after{transform:translate(0%) scale(1.07);transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-on-demand-video:active) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.12)}:host(.card-on-demand-video.dark) .ptc-card-content-wrapper::before{border:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}";
4
4
 
5
5
  const PtcCardContent = /*@__PURE__*/ proxyCustomElement(class PtcCardContent extends H {
6
6
  constructor(registerHost) {
@@ -117,6 +117,6 @@ function defineCustomElement() {
117
117
  defineCustomElement();
118
118
 
119
119
  export { PtcCardContent as P, defineCustomElement as d };
120
- //# sourceMappingURL=p-CXLAIdWX.js.map
120
+ //# sourceMappingURL=p-CmtcG8H9.js.map
121
121
 
122
- //# sourceMappingURL=p-CXLAIdWX.js.map
122
+ //# sourceMappingURL=p-CmtcG8H9.js.map
package/dist/components/{p-CXLAIdWX.js.map → p-CmtcG8H9.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-CXLAIdWX.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-card-content/ptc-card-content.scss?tag=ptc-card-content&encapsulation=shadow","src/components/molecules/ptc-card-content/ptc-card-content.tsx"],"sourcesContent":["@use 'mixins' as *;\r\n\r\n:host {\r\n display: block;\r\n height: 100%;\r\n\r\n ::slotted([slot='seo-content']) {\r\n display: none;\r\n }\r\n}\r\n:host(.speed-bump) {\r\n border: 1px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-large);\r\n padding: var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;\r\n text-align: center;\r\n}\r\n:host(.speed-bump-2) {\r\n border: 1px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-large);\r\n padding: var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);\r\n text-align: center;\r\n}\r\n@include screen-sm {\r\n :host(.speed-bump) {\r\n text-align: left;\r\n }\r\n}\r\n@include screen-sm {\r\n :host(.speed-bump-2) {\r\n text-align: left;\r\n }\r\n}\r\n:host(.card-tall),\r\n:host(.card-video),\r\n:host(.card-wide),\r\n:host(.card-playlist),\r\n:host(.card-on-demand-video) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--ptc-border-radius-large);\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n position: absolute;\r\n opacity: 0;\r\n top: 52.5%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\r\n }\r\n}\r\n\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--ptc-border-radius-large);\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n opacity: 0;\r\n top: 52.5%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n:host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 112px;\r\n height: 112px;\r\n &::before {\r\n width: 112px;\r\n height: 112px;\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n width: 40px;\r\n height: 30px;\r\n top: 50%;\r\n }\r\n }\r\n}\r\n:host(.thumbnail-video-preview) {\r\n .ptc-card-content-wrapper {\r\n cursor: pointer;\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n position: absolute;\r\n opacity: 1;\r\n top: 60%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-video) {\r\n .ptc-card-content-wrapper {\r\n &::after {\r\n top: 59.5%;\r\n }\r\n }\r\n}\r\n\r\n:host(.mouse-hover) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.6);\r\n }\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n:host(.card-tall),\r\n:host(.card-wide),\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n height: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(.card-playlist) {\r\n flex: 1 2 0%;\r\n margin-right: var(--ptc-element-spacing-04);\r\n}\r\n@include screen-sm {\r\n :host(.card-playlist) {\r\n margin-right: var(--ptc-element-spacing-03);\r\n }\r\n}\r\n\r\n@include screen-md {\r\n :host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 88px;\r\n height: 88px;\r\n &::before {\r\n width: 88px;\r\n height: 88px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-sm {\r\n :host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 112px;\r\n height: 112px;\r\n &::before {\r\n width: 112px;\r\n height: 112px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media screen and (min-width: 1981px) {\r\n :host(.card-playlist) {\r\n margin-right: var(--ptc-element-spacing-04);\r\n }\r\n}\r\n\r\n@include screen-lg {\r\n :host(.card-video-intro) {\r\n flex: 80% 8 1;\r\n }\r\n}\r\n\r\n// Responsive Card Hight\r\n// 16x9 video card\r\n:host(.card-video) {\r\n .ptc-card-content-wrapper {\r\n padding-bottom: 56.25%;\r\n ::slotted(*) {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n }\r\n }\r\n}\r\n:host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 322px;\r\n ::slotted(*) {\r\n height: 322px;\r\n }\r\n }\r\n}\r\n:host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n}\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 322px;\r\n ::slotted(*) {\r\n height: 322px;\r\n }\r\n }\r\n}\r\n\r\n:host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: auto;\r\n ::slotted(*) {\r\n height: auto;\r\n }\r\n }\r\n}\r\n\r\n:host(.color-outlined) {\r\n border-radius: var(--ptc-border-radius-large);\r\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\r\n .ptc-card-content-wrapper {\r\n height: 235px;\r\n ::slotted(*) {\r\n height: 235px;\r\n }\r\n }\r\n}\r\n\r\n@include screen-xs {\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 435px;\r\n ::slotted(*) {\r\n height: 435px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-sm {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 325px;\r\n ::slotted(*) {\r\n height: 325px;\r\n }\r\n }\r\n }\r\n :host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n }\r\n :host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n }\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 507px;\r\n ::slotted(*) {\r\n height: 507px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-md {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 380px;\r\n ::slotted(*) {\r\n height: 380px;\r\n }\r\n }\r\n }\r\n}\r\n@include screen-lg {\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 663px;\r\n ::slotted(*) {\r\n height: 663px;\r\n }\r\n }\r\n }\r\n}\r\n@include screen-2k {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 546px;\r\n ::slotted(*) {\r\n height: 546px;\r\n }\r\n }\r\n }\r\n :host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 376px;\r\n ::slotted(*) {\r\n height: 376px;\r\n }\r\n }\r\n }\r\n :host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 376px;\r\n ::slotted(*) {\r\n height: 376px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.o-red) {\r\n border: 2px solid var(--color-red-07);\r\n}\r\n\r\n:host(.o-green) {\r\n border: 2px solid var(--color-green-07);\r\n}\r\n\r\n:host(.o-slate-grey) {\r\n border: 2px solid var(--color-gray-07);\r\n}\r\n\r\n:host(.o-orange) {\r\n border: 2px solid var(--color-orange-07);\r\n}\r\n\r\n:host(.o-blue) {\r\n border: 2px solid var(--color-blue-07);\r\n}\r\n\r\n:host(.card-on-demand-video) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.16);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-sizing: border-box;\r\n }\r\n &::after {\r\n content: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"48\" viewBox=\"0 0 46 48\" fill=\"none\"><g filter=\"url(%23filter0_d_2245_7)\"><path d=\"M38 20L8 36V4L38 20Z\" fill=\"white\"/></g><defs><filter id=\"filter0_d_2245_7\" x=\"0\" y=\"0\" width=\"46\" height=\"48\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2245_7\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2245_7\" result=\"shape\"/></filter></defs></svg>');\r\n opacity: 1;\r\n left: 0;\r\n right: 0;\r\n top: 8px;\r\n bottom: 0;\r\n transform: translate(0%) scale(1);\r\n width: 100%;\r\n height: 100%;\r\n transform: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-on-demand-video.mouse-hover) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: transparent;\r\n }\r\n &::after {\r\n transform: translate(0%) scale(1.07);\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-on-demand-video:active) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.12);\r\n }\r\n }\r\n}\r\n:host(.card-on-demand-video.dark) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-sizing: border-box;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Host,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Element,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n tag: \"ptc-card-content\",\r\n styleUrl: \"ptc-card-content.scss\",\r\n shadow: true,\r\n})\r\nexport class PtcCardContent {\r\n @Element() el: HTMLElement;\r\n\r\n @Prop() cardType?:\r\n | \"card-video\"\r\n | \"card-tall\"\r\n | \"card-2up\"\r\n | \"card-wide\"\r\n | \"speed-bump\"\r\n | \"card-playlist\"\r\n | \"card-video-intro\"\r\n | \"card-dynamic\"\r\n | \"extra-tall\"\r\n | \"color-outlined\"\r\n | \"thumbnail-video-preview\"\r\n | \"event-jumbotron-sub-card\"\r\n | \"event-podcast\"\r\n | \"card-on-demand-video\";\r\n\r\n @Prop() outlineColor?:\r\n | \"o-red\"\r\n | \"o-orange\"\r\n | \"o-blue\"\r\n | \"o-slate-grey\"\r\n | \"o-green\";\r\n /**\r\n * (optional) Injected CSS styles\r\n **/\r\n @Prop() styles?: string;\r\n\r\n @Prop() isLoading?: boolean = false;\r\n\r\n @Prop() cardOnDemandVideoTheme?: \"light\" | \"dark\" = \"light\";\r\n\r\n @Event() hoverEvent: EventEmitter<void>;\r\n hoverEventHandler() {\r\n if (\r\n !this.el.classList.contains(\"speed-bump\") &&\r\n !this.el.classList.contains(\"card-video-intro\") &&\r\n !this.el.classList.contains(\"card-dynamic\") &&\r\n !this.el.classList.contains(\"card-on-demand-video\") &&\r\n !this.el.classList.contains(\"extra-tall\")\r\n ) {\r\n this.hoverEvent.emit();\r\n this.el.classList.add(\"mouse-hover\");\r\n if (\r\n !this.el.classList.contains(\"card-video\") &&\r\n !this.el.classList.contains(\"card-playlist\") &&\r\n this.el.nextElementSibling\r\n ) {\r\n this.el.nextElementSibling.classList.add(\r\n \"mouse-hover-card-bottom\",\r\n );\r\n }\r\n }\r\n if (this.el.classList.contains(\"event-podcast\")) {\r\n const bottomComponent = this.el\r\n .nextElementSibling as HTMLPtcCardBottomElement;\r\n bottomComponent.addClassOnDefaultSlot();\r\n }\r\n }\r\n @Event() leaveEvent: EventEmitter<void>;\r\n leaveEventHandler() {\r\n if (\r\n !this.el.classList.contains(\"speed-bump\") &&\r\n !this.el.classList.contains(\"card-video-intro\") &&\r\n !this.el.classList.contains(\"card-dynamic\") &&\r\n !this.el.classList.contains(\"card-on-demand-video\") &&\r\n !this.el.classList.contains(\"extra-tall\")\r\n ) {\r\n this.hoverEvent.emit();\r\n this.el.classList.remove(\"mouse-hover\");\r\n if (\r\n !this.el.classList.contains(\"card-video\") &&\r\n !this.el.classList.contains(\"card-playlist\") &&\r\n this.el.nextElementSibling\r\n ) {\r\n this.el.nextElementSibling.classList.remove(\r\n \"mouse-hover-card-bottom\",\r\n );\r\n }\r\n }\r\n if (this.el.classList.contains(\"event-podcast\")) {\r\n const bottomComponent = this.el\r\n .nextElementSibling as HTMLPtcCardBottomElement;\r\n bottomComponent.removeClassOnDefaultSlot();\r\n }\r\n }\r\n\r\n @Method()\r\n async setHeight(height: number) {\r\n this.el.style.height = height + \"px\";\r\n const image = this.el.querySelector(\"ptc-picture\");\r\n image.style.height = height + \"px\";\r\n }\r\n\r\n @Method()\r\n async removeInlineHeight() {\r\n this.el.style.removeProperty(\"height\");\r\n const image = this.el.querySelector(\"ptc-picture\");\r\n if (image) image.style.removeProperty(\"height\");\r\n }\r\n\r\n render() {\r\n const classMap = this.getCssClassMap();\r\n\r\n return (\r\n <Host\r\n part=\"card-content\"\r\n class={classMap}\r\n {...(!this.isLoading\r\n ? { onMouseEnter: this.hoverEventHandler.bind(this) }\r\n : {})}\r\n {...(!this.isLoading\r\n ? { onMouseLeave: this.leaveEventHandler.bind(this) }\r\n : {})}\r\n >\r\n {this.styles && <style>{this.styles}</style>}\r\n <slot name=\"slot-content\"></slot>\r\n <div class=\"ptc-card-content-wrapper\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n private getCssClassMap(): CssClassMap {\r\n return {\r\n [this.cardType]: !!this.cardType ? true : false,\r\n [this.outlineColor]: !!this.outlineColor ? true : false,\r\n [this.cardOnDemandVideoTheme]: !!this.cardOnDemandVideoTheme\r\n ? true\r\n : false,\r\n };\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"p-CmtcG8H9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-card-content/ptc-card-content.scss?tag=ptc-card-content&encapsulation=shadow","src/components/molecules/ptc-card-content/ptc-card-content.tsx"],"sourcesContent":["@use 'mixins' as *;\r\n\r\n:host {\r\n display: block;\r\n height: 100%;\r\n\r\n ::slotted([slot='seo-content']) {\r\n display: none;\r\n }\r\n}\r\n:host(.speed-bump) {\r\n border: 1px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-large);\r\n padding: var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;\r\n text-align: center;\r\n}\r\n:host(.speed-bump-2) {\r\n border: 1px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-large);\r\n padding: var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);\r\n text-align: center;\r\n}\r\n@include screen-sm {\r\n :host(.speed-bump) {\r\n text-align: left;\r\n }\r\n}\r\n@include screen-sm {\r\n :host(.speed-bump-2) {\r\n text-align: left;\r\n }\r\n}\r\n:host(.card-tall),\r\n:host(.card-video),\r\n:host(.card-wide),\r\n:host(.card-playlist),\r\n:host(.card-on-demand-video) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--ptc-border-radius-large);\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n position: absolute;\r\n opacity: 0;\r\n top: 52.5%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\r\n }\r\n}\r\n\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n border-radius: var(--ptc-border-radius-large);\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--ptc-border-radius-large);\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n opacity: 0;\r\n top: 52.5%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n:host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 112px;\r\n height: 112px;\r\n &::before {\r\n width: 112px;\r\n height: 112px;\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n width: 40px;\r\n height: 30px;\r\n top: 50%;\r\n }\r\n }\r\n}\r\n:host(.thumbnail-video-preview) {\r\n .ptc-card-content-wrapper {\r\n cursor: pointer;\r\n position: relative;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n background: transparent;\r\n z-index: 1;\r\n box-shadow: var(--ptc-shadow-x-small);\r\n transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n &::after {\r\n content: url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");\r\n position: absolute;\r\n opacity: 1;\r\n top: 60%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-video) {\r\n .ptc-card-content-wrapper {\r\n &::after {\r\n top: 59.5%;\r\n }\r\n }\r\n}\r\n\r\n:host(.mouse-hover) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.6);\r\n }\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n:host(.card-tall),\r\n:host(.card-wide),\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n height: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(.card-playlist) {\r\n flex: 1 2 0%;\r\n margin-right: var(--ptc-element-spacing-04);\r\n}\r\n@include screen-sm {\r\n :host(.card-playlist) {\r\n margin-right: var(--ptc-element-spacing-03);\r\n }\r\n}\r\n\r\n@include screen-md {\r\n :host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 88px;\r\n height: 88px;\r\n &::before {\r\n width: 88px;\r\n height: 88px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-sm {\r\n :host(.card-playlist) {\r\n .ptc-card-content-wrapper {\r\n width: 112px;\r\n height: 112px;\r\n &::before {\r\n width: 112px;\r\n height: 112px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media screen and (min-width: 1981px) {\r\n :host(.card-playlist) {\r\n margin-right: var(--ptc-element-spacing-04);\r\n }\r\n}\r\n\r\n@include screen-lg {\r\n :host(.card-video-intro) {\r\n flex: 80% 8 1;\r\n }\r\n}\r\n\r\n// Responsive Card Hight\r\n// 16x9 video card\r\n:host(.card-video) {\r\n .ptc-card-content-wrapper {\r\n padding-bottom: 56.25%;\r\n ::slotted(*) {\r\n position: absolute !important;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n }\r\n }\r\n}\r\n:host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 322px;\r\n ::slotted(*) {\r\n height: 322px;\r\n }\r\n }\r\n}\r\n:host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n}\r\n:host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 322px;\r\n ::slotted(*) {\r\n height: 322px;\r\n }\r\n }\r\n}\r\n\r\n:host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: auto;\r\n ::slotted(*) {\r\n height: auto;\r\n }\r\n }\r\n}\r\n\r\n:host(.color-outlined) {\r\n border-radius: var(--ptc-border-radius-large);\r\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\r\n .ptc-card-content-wrapper {\r\n height: 235px;\r\n ::slotted(*) {\r\n height: 235px;\r\n }\r\n }\r\n}\r\n\r\n@include screen-xs {\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 435px;\r\n ::slotted(*) {\r\n height: 435px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-sm {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 325px;\r\n ::slotted(*) {\r\n height: 325px;\r\n }\r\n }\r\n }\r\n :host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n }\r\n :host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 268px;\r\n ::slotted(*) {\r\n height: 268px;\r\n }\r\n }\r\n }\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 507px;\r\n ::slotted(*) {\r\n height: 507px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include screen-md {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 380px;\r\n ::slotted(*) {\r\n height: 380px;\r\n }\r\n }\r\n }\r\n}\r\n@include screen-lg {\r\n :host(.extra-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 663px;\r\n ::slotted(*) {\r\n height: 663px;\r\n }\r\n }\r\n }\r\n}\r\n@include screen-2k {\r\n :host(.card-tall) {\r\n .ptc-card-content-wrapper {\r\n height: 546px;\r\n ::slotted(*) {\r\n height: 546px;\r\n }\r\n }\r\n }\r\n :host(.card-wide) {\r\n .ptc-card-content-wrapper {\r\n height: 376px;\r\n ::slotted(*) {\r\n height: 376px;\r\n }\r\n }\r\n }\r\n :host(.card-2up) {\r\n .ptc-card-content-wrapper {\r\n height: 376px;\r\n ::slotted(*) {\r\n height: 376px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.o-red) {\r\n border: 2px solid var(--color-red-07);\r\n}\r\n\r\n:host(.o-green) {\r\n border: 2px solid var(--color-green-07);\r\n}\r\n\r\n:host(.o-slate-grey) {\r\n border: 2px solid var(--color-gray-07);\r\n}\r\n\r\n:host(.o-orange) {\r\n border: 2px solid var(--color-orange-07);\r\n}\r\n\r\n:host(.o-blue) {\r\n border: 2px solid var(--color-blue-07);\r\n}\r\n\r\n:host(.card-on-demand-video) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.16);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-sizing: border-box;\r\n }\r\n &::after {\r\n content: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"48\" viewBox=\"0 0 46 48\" fill=\"none\"><g filter=\"url(%23filter0_d_2245_7)\"><path d=\"M38 20L8 36V4L38 20Z\" fill=\"white\"/></g><defs><filter id=\"filter0_d_2245_7\" x=\"0\" y=\"0\" width=\"46\" height=\"48\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"4\"/><feComposite in2=\"hardAlpha\" operator=\"out\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2245_7\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2245_7\" result=\"shape\"/></filter></defs></svg>');\r\n opacity: 1;\r\n left: 0;\r\n right: 0;\r\n top: 8px;\r\n bottom: 0;\r\n transform: translate(0%) scale(1);\r\n width: 100%;\r\n height: 100%;\r\n transform: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-on-demand-video.mouse-hover) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: transparent;\r\n }\r\n &::after {\r\n transform: translate(0%) scale(1.07);\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n }\r\n }\r\n}\r\n\r\n:host(.card-on-demand-video:active) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n background: rgba(0, 0, 0, 0.12);\r\n }\r\n }\r\n}\r\n:host(.card-on-demand-video.dark) {\r\n .ptc-card-content-wrapper {\r\n &::before {\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-sizing: border-box;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Host,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Element,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n tag: \"ptc-card-content\",\r\n styleUrl: \"ptc-card-content.scss\",\r\n shadow: true,\r\n})\r\nexport class PtcCardContent {\r\n @Element() el: HTMLElement;\r\n\r\n @Prop() cardType?:\r\n | \"card-video\"\r\n | \"card-tall\"\r\n | \"card-2up\"\r\n | \"card-wide\"\r\n | \"speed-bump\"\r\n | \"card-playlist\"\r\n | \"card-video-intro\"\r\n | \"card-dynamic\"\r\n | \"extra-tall\"\r\n | \"color-outlined\"\r\n | \"thumbnail-video-preview\"\r\n | \"event-jumbotron-sub-card\"\r\n | \"event-podcast\"\r\n | \"card-on-demand-video\";\r\n\r\n @Prop() outlineColor?:\r\n | \"o-red\"\r\n | \"o-orange\"\r\n | \"o-blue\"\r\n | \"o-slate-grey\"\r\n | \"o-green\";\r\n /**\r\n * (optional) Injected CSS styles\r\n **/\r\n @Prop() styles?: string;\r\n\r\n @Prop() isLoading?: boolean = false;\r\n\r\n @Prop() cardOnDemandVideoTheme?: \"light\" | \"dark\" = \"light\";\r\n\r\n @Event() hoverEvent: EventEmitter<void>;\r\n hoverEventHandler() {\r\n if (\r\n !this.el.classList.contains(\"speed-bump\") &&\r\n !this.el.classList.contains(\"card-video-intro\") &&\r\n !this.el.classList.contains(\"card-dynamic\") &&\r\n !this.el.classList.contains(\"card-on-demand-video\") &&\r\n !this.el.classList.contains(\"extra-tall\")\r\n ) {\r\n this.hoverEvent.emit();\r\n this.el.classList.add(\"mouse-hover\");\r\n if (\r\n !this.el.classList.contains(\"card-video\") &&\r\n !this.el.classList.contains(\"card-playlist\") &&\r\n this.el.nextElementSibling\r\n ) {\r\n this.el.nextElementSibling.classList.add(\r\n \"mouse-hover-card-bottom\",\r\n );\r\n }\r\n }\r\n if (this.el.classList.contains(\"event-podcast\")) {\r\n const bottomComponent = this.el\r\n .nextElementSibling as HTMLPtcCardBottomElement;\r\n bottomComponent.addClassOnDefaultSlot();\r\n }\r\n }\r\n @Event() leaveEvent: EventEmitter<void>;\r\n leaveEventHandler() {\r\n if (\r\n !this.el.classList.contains(\"speed-bump\") &&\r\n !this.el.classList.contains(\"card-video-intro\") &&\r\n !this.el.classList.contains(\"card-dynamic\") &&\r\n !this.el.classList.contains(\"card-on-demand-video\") &&\r\n !this.el.classList.contains(\"extra-tall\")\r\n ) {\r\n this.hoverEvent.emit();\r\n this.el.classList.remove(\"mouse-hover\");\r\n if (\r\n !this.el.classList.contains(\"card-video\") &&\r\n !this.el.classList.contains(\"card-playlist\") &&\r\n this.el.nextElementSibling\r\n ) {\r\n this.el.nextElementSibling.classList.remove(\r\n \"mouse-hover-card-bottom\",\r\n );\r\n }\r\n }\r\n if (this.el.classList.contains(\"event-podcast\")) {\r\n const bottomComponent = this.el\r\n .nextElementSibling as HTMLPtcCardBottomElement;\r\n bottomComponent.removeClassOnDefaultSlot();\r\n }\r\n }\r\n\r\n @Method()\r\n async setHeight(height: number) {\r\n this.el.style.height = height + \"px\";\r\n const image = this.el.querySelector(\"ptc-picture\");\r\n image.style.height = height + \"px\";\r\n }\r\n\r\n @Method()\r\n async removeInlineHeight() {\r\n this.el.style.removeProperty(\"height\");\r\n const image = this.el.querySelector(\"ptc-picture\");\r\n if (image) image.style.removeProperty(\"height\");\r\n }\r\n\r\n render() {\r\n const classMap = this.getCssClassMap();\r\n\r\n return (\r\n <Host\r\n part=\"card-content\"\r\n class={classMap}\r\n {...(!this.isLoading\r\n ? { onMouseEnter: this.hoverEventHandler.bind(this) }\r\n : {})}\r\n {...(!this.isLoading\r\n ? { onMouseLeave: this.leaveEventHandler.bind(this) }\r\n : {})}\r\n >\r\n {this.styles && <style>{this.styles}</style>}\r\n <slot name=\"slot-content\"></slot>\r\n <div class=\"ptc-card-content-wrapper\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n private getCssClassMap(): CssClassMap {\r\n return {\r\n [this.cardType]: !!this.cardType ? true : false,\r\n [this.outlineColor]: !!this.outlineColor ? true : false,\r\n [this.cardOnDemandVideoTheme]: !!this.cardOnDemandVideoTheme\r\n ? true\r\n : false,\r\n };\r\n }\r\n}\r\n"],"version":3}
package/dist/components/{p-t26ogJDp.js → p-WLFTWNrK.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { c as proxyCustomElement, H, e as createEvent, h, d as Host, g as getAssetPath } from './p-C2SefPLt.js';
2
- import { d as defineCustomElement$3 } from './p-CXLAIdWX.js';
2
+ import { d as defineCustomElement$3 } from './p-CmtcG8H9.js';
3
3
  import { d as defineCustomElement$2 } from './p-Cj1vpVKf.js';
4
4
  import { d as defineCustomElement$1 } from './p-SaYc7Kjd.js';
5
5
 
@@ -203,6 +203,6 @@ function defineCustomElement() {
203
203
  defineCustomElement();
204
204
 
205
205
  export { PtcDynamicCard as P, defineCustomElement as d };
206
- //# sourceMappingURL=p-t26ogJDp.js.map
206
+ //# sourceMappingURL=p-WLFTWNrK.js.map
207
207
 
208
- //# sourceMappingURL=p-t26ogJDp.js.map
208
+ //# sourceMappingURL=p-WLFTWNrK.js.map
package/dist/components/{p-t26ogJDp.js.map → p-WLFTWNrK.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-t26ogJDp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-dynamic-card/ptc-dynamic-card.scss?tag=ptc-dynamic-card&encapsulation=shadow","src/components/molecules/ptc-dynamic-card/ptc-dynamic-card.tsx"],"sourcesContent":["@use \"mixins\" as *;\r\n\r\n:host {\r\n\tdisplay: block;\r\n}\r\n\r\n:host(.sequential) {\r\n\t.card-wrapper {\r\n\t\tposition: relative;\r\n\t\tcursor: pointer;\r\n\t\toutline: none;\r\n\r\n\t\t&:focus-visible {\r\n\t\t\ttransition: none;\r\n\t\t\t@include base-focus-state;\r\n\t\t\tz-index: 1;\r\n\t\t}\r\n\t}\r\n\r\n\t.card {\r\n\t\tbackground-color: var(--color-gray-12);\r\n\t\toverflow: hidden;\r\n\r\n\t\t&.hide {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\r\n\t\t&.show {\r\n\t\t\tdisplay: block;\r\n\t\t}\r\n\t}\r\n\r\n\t.card-mobile,\r\n\t.card-dt-open {\r\n\t\tdisplay: block;\r\n\r\n\t\tptc-card-content {\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-basis: 38%;\r\n\t\t\tjustify-content: flex-start;\r\n\t\t\talign-items: center;\r\n\t\t\tpadding: var(--ptc-element-spacing-06);\r\n\r\n\t\t\t@include screen-lg {\r\n\t\t\t\theight: unset;\r\n\t\t\t\tflex: 0 0 310px;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tptc-picture {\r\n\t\t\t// flex-basis: 62%;\r\n\t\t\tflex: 1 1 auto;\r\n\t\t}\r\n\r\n\t\t.card-title {\r\n\t\t\th3 {\r\n\t\t\t\tcolor: var(--color-white);\r\n\t\t\t\tfont-size: var(--ptc-font-size-medium);\r\n\t\t\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\t\tmargin-bottom: 0rem;\r\n\t\t\t\tmargin-block-start: 0rem;\r\n\t\t\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\r\n\t\t\t\t@include screen-sm {\r\n\t\t\t\t\tfont-size: var(--ptc-font-size-large);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.card-content {\r\n\t\t\tmargin-top: var(--ptc-element-spacing-03);\r\n\t\t}\r\n\t}\r\n\t.card-mobile {\r\n\t\tmax-width: 320px;\r\n\t\tmin-width: 226px;\r\n\t\tposition: relative;\r\n\r\n\t\t@include screen-xs {\r\n\t\t\tmax-width: 350px;\r\n\t\t}\r\n\r\n\t\t&::before {\r\n\t\t\tcontent: \"\";\r\n\t\t\tdisplay: block;\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 5px;\r\n\t\t\ttransition: background-color var(--ptc-transition-medium)\r\n\t\t\t\tvar(--ptc-ease-out);\r\n\t\t\tbackground-color: transparent;\r\n\t\t}\r\n\r\n\t\tptc-card-content {\r\n\t\t\talign-items: flex-start;\r\n\t\t}\r\n\t}\r\n\t.card-dt-closed {\r\n\t\twidth: 135px;\r\n\t\theight: 424px;\r\n\t\tposition: relative;\r\n\r\n\t\t.closed-content {\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 100%;\r\n\t\t\ttop: 0;\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: center;\r\n\t\t}\r\n\t\t.card-title {\r\n\t\t\ttext-align: center;\r\n\t\t\th2 {\r\n\t\t\t\tcolor: var(--color-white);\r\n\t\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\t\tmargin-bottom: 0rem;\r\n\t\t\t\tmargin-block-start: 0rem;\r\n\t\t\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\t\t\t\tpadding-left: var(--ptc-element-spacing-02);\r\n\t\t\t\tpadding-right: var(--ptc-element-spacing-02);\r\n\r\n\t\t\t\t@include screen-xl {\r\n\t\t\t\t\tfont-size: var(--ptc-font-size-small);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.card-dt-open {\r\n\t\tborder-top: 5px solid var(--color-green-05);\r\n\t\tdisplay: flex;\r\n\t\tmax-width: 790px;\r\n\t\ttransition: width var(--ptc-transition-x-fast) var(--ptc-ease-out);\r\n\r\n\t\t@include screen-xl {\r\n\t\t\tmax-width: 825px;\r\n\t\t}\r\n\r\n\t\t&:not([hidden]) {\r\n\t\t\theight: 480px;\r\n\r\n\t\t\t@include screen-lg {\r\n\t\t\t\tmin-width: 600px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&:host(.active) {\r\n\t\t.card-mobile {\r\n\t\t\t&::before {\r\n\t\t\t\tbackground-color: var(--color-green-05);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import {\r\n\tComponent,\r\n\tHost,\r\n\th,\r\n\tProp,\r\n\tState,\r\n\tgetAssetPath,\r\n\tElement,\r\n\tListen,\r\n\tEvent,\r\n\tEventEmitter,\r\n\tMethod,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n//import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';\r\n\r\n@Component({\r\n\ttag: \"ptc-dynamic-card\",\r\n\tstyleUrl: \"ptc-dynamic-card.scss\",\r\n\tassetsDirs: [\"media\"],\r\n\tshadow: true,\r\n})\r\nexport class PtcDynamicCard {\r\n\t@Element() el: HTMLElement;\r\n\r\n\t/** Dynamic Card Type */\r\n\t@Prop() cardType: \"sequential\" = \"sequential\";\r\n\r\n\t/** Card Title */\r\n\t@Prop() cardTitle: string = \"Card Title Goes Here\";\r\n\r\n\t/** Card Image Src*/\r\n\t@Prop() cardImgSrc?: string;\r\n\r\n\t/** Card Image Alt*/\r\n\t@Prop() cardImgAlt?: string;\r\n\t/** Public card state */\r\n\t//@Prop({ mutable: true }) outCardState: string;\r\n\r\n\t/** Card varients */\r\n\t@Prop() cardScreen: \"mobile\" | \"desktop\" = \"desktop\";\r\n\r\n\t/** is card expanded? */\r\n\t@Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n\t/** Internal Overlay Status */\r\n\t@State() overlayExists: boolean = true;\r\n\r\n\t/**\r\n\t * (optional) Injected CSS Styles\r\n\t */\r\n\t@Prop() styles?: string;\r\n\r\n\t/**\r\n\t * Tracker ID\r\n\t */\r\n\t@Prop() trackerId?: string;\r\n\r\n\t// handleClick() {\r\n\t// this.isExpanded = !this.isExpanded;\r\n\t// }\r\n\t/**\r\n\t * Event emitted when this card is opened\r\n\t */\r\n\t@Event({ bubbles: true, composed: true }) cardOpened: EventEmitter<string>;\r\n\tcomponentDidLoad() {\r\n\t\t// Handle mouse enter and leave for overlay\r\n\t\tthis.el.addEventListener(\r\n\t\t\t\"mouseenter\",\r\n\t\t\t() => (this.overlayExists = false),\r\n\t\t);\r\n\t\tthis.el.addEventListener(\r\n\t\t\t\"mouseleave\",\r\n\t\t\t() => (this.overlayExists = true),\r\n\t\t);\r\n\t}\r\n\r\n\t/**\r\n\t * Open the card\r\n\t */\r\n\topenCard = () => {\r\n\t\tif (!this.isExpanded) {\r\n\t\t\tthis.isExpanded = true;\r\n\t\t\tthis.cardOpened.emit(this.trackerId);\r\n\t\t}\r\n\t\t// If already expanded, do nothing to ensure at least one card remains open\r\n\t};\r\n\r\n\t/**\r\n\t * Handle keyboard interactions\r\n\t */\r\n\thandleKeyDown = (event: KeyboardEvent) => {\r\n\t\tswitch (event.key) {\r\n\t\t\tcase \"Enter\":\r\n\t\t\t\t//event.preventDefault();\r\n\t\t\t\tthis.openCard();\r\n\t\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t};\r\n\r\n\t/**\r\n\t * Listen for 'cardOpened' events on the document to close other cards\r\n\t */\r\n\t@Listen(\"cardOpened\", { target: \"document\" })\r\n\thandleCardOpened(event: CustomEvent<string>) {\r\n\t\tconst openedTrackerId = event.detail;\r\n\t\tif (openedTrackerId !== this.trackerId && this.isExpanded) {\r\n\t\t\tthis.isExpanded = false;\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Focus the card-wrapper element\r\n\t */\r\n\t@Method()\r\n\tasync focusCardWrapper() {\r\n\t\tconst cardWrapper = this.el.querySelector(\r\n\t\t\t\".card-wrapper\",\r\n\t\t) as HTMLElement;\r\n\t\tif (cardWrapper) {\r\n\t\t\tcardWrapper.focus();\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Get CSS class map\r\n\t */\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.cardType]: true,\r\n\t\t};\r\n\t}\r\n\r\n\t/**\r\n\t * Get desktop card based on expansion state\r\n\t */\r\n\t// getDesktopCard() {\r\n\t// if (this.cardScreen === 'desktop' && this.isExpanded) {\r\n\t// return [\r\n\t// <div class=\"card card-dt-open mf-listen\" id={this.trackerId}>\r\n\t// <ptc-card-content card-type=\"card-dynamic\">\r\n\t// <div class=\"card-title\">\r\n\t// <h3>{this.cardTitle}</h3>\r\n\t// </div>\r\n\t// <div class=\"card-content\">\r\n\t// <slot></slot>\r\n\t// </div>\r\n\t// </ptc-card-content>\r\n\t// <ptc-picture\r\n\t// alt={this.cardImgAlt}\r\n\t// src={this.cardImgSrc}\r\n\t// is-full-width=\"true\"\r\n\t// is-full-height=\"true\"\r\n\t// image-alignment=\"center\"\r\n\t// ></ptc-picture>\r\n\t// </div>,\r\n\t// ];\r\n\t// } else if (this.cardScreen === 'desktop' && !this.isExpanded) {\r\n\t// return [\r\n\t// <div class=\"card card-dt-closed mf-listen\" id={this.trackerId}>\r\n\t// <ptc-picture\r\n\t// alt={this.cardImgAlt}\r\n\t// src={this.cardImgSrc}\r\n\t// image-position=\"relative\"\r\n\t// is-full-width\r\n\t// height=\"424\"\r\n\t// >\r\n\t// {this.overlayExists ? (\r\n\t// <ptc-overlay filter-color=\"solid-black-1\"></ptc-overlay>\r\n\t// ) : (\r\n\t// <ptc-overlay filter-color=\"solid-black-2\"></ptc-overlay>\r\n\t// )}\r\n\t// </ptc-picture>\r\n\t// <div class=\"closed-content\" card-type=\"card-dynamic\">\r\n\t// <div class=\"card-title\">\r\n\t// <h2>{this.cardTitle}</h2>\r\n\t// </div>\r\n\t// </div>\r\n\t// </div>,\r\n\t// ];\r\n\t// } else {\r\n\t// return null;\r\n\t// }\r\n\t// }\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\r\n\t\treturn (\r\n\t\t\t<Host class={classMap}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"card-wrapper mf-listen\"\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\taria-expanded={this.isExpanded}\r\n\t\t\t\t\tonClick={this.openCard}\r\n\t\t\t\t\tonKeyDown={this.handleKeyDown}\r\n\t\t\t\t>\r\n\t\t\t\t\t{this.cardScreen === \"mobile\" ? (\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"card card-mobile mf-listen\"\r\n\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\theight=\"287\"\r\n\t\t\t\t\t\t\t\tis-full-width\r\n\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t></ptc-picture>\r\n\t\t\t\t\t\t\t<ptc-card-content\r\n\t\t\t\t\t\t\t\tcard-type=\"card-dynamic\"\r\n\t\t\t\t\t\t\t\tstyles=\":host(.card-dynamic){height: auto;}\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t<h3>{this.cardTitle}</h3>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"card-content\">\r\n\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ptc-card-content>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t{...(!this.isExpanded && {\r\n\t\t\t\t\t\t\t\t\thidden: \"until-found\",\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\t/* @ts-ignore */\r\n\t\t\t\t\t\t\t\tonBeforeMatch={this.openCard.bind(this)}\r\n\t\t\t\t\t\t\t\tclass={`card mf-listen ${\r\n\t\t\t\t\t\t\t\t\tthis.isExpanded && \"card-dt-open\"\r\n\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<ptc-card-content card-type=\"card-dynamic\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t\t<h3>{this.cardTitle}</h3>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-content\">\r\n\t\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ptc-card-content>\r\n\t\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t\t\tis-full-width=\"true\"\r\n\t\t\t\t\t\t\t\t\tis-full-height=\"true\"\r\n\t\t\t\t\t\t\t\t\timage-alignment=\"center\"\r\n\t\t\t\t\t\t\t\t></ptc-picture>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclass={`card card-dt-closed mf-listen ${\r\n\t\t\t\t\t\t\t\t\tthis.isExpanded ? \"hide\" : \"show\"\r\n\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t\t\timage-position=\"relative\"\r\n\t\t\t\t\t\t\t\t\tis-full-width\r\n\t\t\t\t\t\t\t\t\theight=\"424\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{this.overlayExists ? (\r\n\t\t\t\t\t\t\t\t\t\t<ptc-overlay filter-color=\"solid-black-1\"></ptc-overlay>\r\n\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t<ptc-overlay filter-color=\"solid-black-2\"></ptc-overlay>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</ptc-picture>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\tclass=\"closed-content\"\r\n\t\t\t\t\t\t\t\t\tcard-type=\"card-dynamic\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t\t<h2>{this.cardTitle}</h2>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t\t{this.cardScreen === \"desktop\" && (\r\n\t\t\t\t\t<div hidden>\r\n\t\t\t\t\t\t<svg>\r\n\t\t\t\t\t\t\t<use href={`${this.dotSvg}`}></use>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate dotSvg: string = getAssetPath(\"./media/nav-active-dotslick.svg\");\r\n}\r\n"],"version":3}
1
+ {"file":"p-WLFTWNrK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-dynamic-card/ptc-dynamic-card.scss?tag=ptc-dynamic-card&encapsulation=shadow","src/components/molecules/ptc-dynamic-card/ptc-dynamic-card.tsx"],"sourcesContent":["@use \"mixins\" as *;\r\n\r\n:host {\r\n\tdisplay: block;\r\n}\r\n\r\n:host(.sequential) {\r\n\t.card-wrapper {\r\n\t\tposition: relative;\r\n\t\tcursor: pointer;\r\n\t\toutline: none;\r\n\r\n\t\t&:focus-visible {\r\n\t\t\ttransition: none;\r\n\t\t\t@include base-focus-state;\r\n\t\t\tz-index: 1;\r\n\t\t}\r\n\t}\r\n\r\n\t.card {\r\n\t\tbackground-color: var(--color-gray-12);\r\n\t\toverflow: hidden;\r\n\r\n\t\t&.hide {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\r\n\t\t&.show {\r\n\t\t\tdisplay: block;\r\n\t\t}\r\n\t}\r\n\r\n\t.card-mobile,\r\n\t.card-dt-open {\r\n\t\tdisplay: block;\r\n\r\n\t\tptc-card-content {\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-basis: 38%;\r\n\t\t\tjustify-content: flex-start;\r\n\t\t\talign-items: center;\r\n\t\t\tpadding: var(--ptc-element-spacing-06);\r\n\r\n\t\t\t@include screen-lg {\r\n\t\t\t\theight: unset;\r\n\t\t\t\tflex: 0 0 310px;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tptc-picture {\r\n\t\t\t// flex-basis: 62%;\r\n\t\t\tflex: 1 1 auto;\r\n\t\t}\r\n\r\n\t\t.card-title {\r\n\t\t\th3 {\r\n\t\t\t\tcolor: var(--color-white);\r\n\t\t\t\tfont-size: var(--ptc-font-size-medium);\r\n\t\t\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\t\tmargin-bottom: 0rem;\r\n\t\t\t\tmargin-block-start: 0rem;\r\n\t\t\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\r\n\t\t\t\t@include screen-sm {\r\n\t\t\t\t\tfont-size: var(--ptc-font-size-large);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.card-content {\r\n\t\t\tmargin-top: var(--ptc-element-spacing-03);\r\n\t\t}\r\n\t}\r\n\t.card-mobile {\r\n\t\tmax-width: 320px;\r\n\t\tmin-width: 226px;\r\n\t\tposition: relative;\r\n\r\n\t\t@include screen-xs {\r\n\t\t\tmax-width: 350px;\r\n\t\t}\r\n\r\n\t\t&::before {\r\n\t\t\tcontent: \"\";\r\n\t\t\tdisplay: block;\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 5px;\r\n\t\t\ttransition: background-color var(--ptc-transition-medium)\r\n\t\t\t\tvar(--ptc-ease-out);\r\n\t\t\tbackground-color: transparent;\r\n\t\t}\r\n\r\n\t\tptc-card-content {\r\n\t\t\talign-items: flex-start;\r\n\t\t}\r\n\t}\r\n\t.card-dt-closed {\r\n\t\twidth: 135px;\r\n\t\theight: 424px;\r\n\t\tposition: relative;\r\n\r\n\t\t.closed-content {\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 100%;\r\n\t\t\ttop: 0;\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: center;\r\n\t\t}\r\n\t\t.card-title {\r\n\t\t\ttext-align: center;\r\n\t\t\th2 {\r\n\t\t\t\tcolor: var(--color-white);\r\n\t\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\t\tmargin-bottom: 0rem;\r\n\t\t\t\tmargin-block-start: 0rem;\r\n\t\t\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\t\t\t\tpadding-left: var(--ptc-element-spacing-02);\r\n\t\t\t\tpadding-right: var(--ptc-element-spacing-02);\r\n\r\n\t\t\t\t@include screen-xl {\r\n\t\t\t\t\tfont-size: var(--ptc-font-size-small);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.card-dt-open {\r\n\t\tborder-top: 5px solid var(--color-green-05);\r\n\t\tdisplay: flex;\r\n\t\tmax-width: 790px;\r\n\t\ttransition: width var(--ptc-transition-x-fast) var(--ptc-ease-out);\r\n\r\n\t\t@include screen-xl {\r\n\t\t\tmax-width: 825px;\r\n\t\t}\r\n\r\n\t\t&:not([hidden]) {\r\n\t\t\theight: 480px;\r\n\r\n\t\t\t@include screen-lg {\r\n\t\t\t\tmin-width: 600px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&:host(.active) {\r\n\t\t.card-mobile {\r\n\t\t\t&::before {\r\n\t\t\t\tbackground-color: var(--color-green-05);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import {\r\n\tComponent,\r\n\tHost,\r\n\th,\r\n\tProp,\r\n\tState,\r\n\tgetAssetPath,\r\n\tElement,\r\n\tListen,\r\n\tEvent,\r\n\tEventEmitter,\r\n\tMethod,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n//import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';\r\n\r\n@Component({\r\n\ttag: \"ptc-dynamic-card\",\r\n\tstyleUrl: \"ptc-dynamic-card.scss\",\r\n\tassetsDirs: [\"media\"],\r\n\tshadow: true,\r\n})\r\nexport class PtcDynamicCard {\r\n\t@Element() el: HTMLElement;\r\n\r\n\t/** Dynamic Card Type */\r\n\t@Prop() cardType: \"sequential\" = \"sequential\";\r\n\r\n\t/** Card Title */\r\n\t@Prop() cardTitle: string = \"Card Title Goes Here\";\r\n\r\n\t/** Card Image Src*/\r\n\t@Prop() cardImgSrc?: string;\r\n\r\n\t/** Card Image Alt*/\r\n\t@Prop() cardImgAlt?: string;\r\n\t/** Public card state */\r\n\t//@Prop({ mutable: true }) outCardState: string;\r\n\r\n\t/** Card varients */\r\n\t@Prop() cardScreen: \"mobile\" | \"desktop\" = \"desktop\";\r\n\r\n\t/** is card expanded? */\r\n\t@Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n\t/** Internal Overlay Status */\r\n\t@State() overlayExists: boolean = true;\r\n\r\n\t/**\r\n\t * (optional) Injected CSS Styles\r\n\t */\r\n\t@Prop() styles?: string;\r\n\r\n\t/**\r\n\t * Tracker ID\r\n\t */\r\n\t@Prop() trackerId?: string;\r\n\r\n\t// handleClick() {\r\n\t// this.isExpanded = !this.isExpanded;\r\n\t// }\r\n\t/**\r\n\t * Event emitted when this card is opened\r\n\t */\r\n\t@Event({ bubbles: true, composed: true }) cardOpened: EventEmitter<string>;\r\n\tcomponentDidLoad() {\r\n\t\t// Handle mouse enter and leave for overlay\r\n\t\tthis.el.addEventListener(\r\n\t\t\t\"mouseenter\",\r\n\t\t\t() => (this.overlayExists = false),\r\n\t\t);\r\n\t\tthis.el.addEventListener(\r\n\t\t\t\"mouseleave\",\r\n\t\t\t() => (this.overlayExists = true),\r\n\t\t);\r\n\t}\r\n\r\n\t/**\r\n\t * Open the card\r\n\t */\r\n\topenCard = () => {\r\n\t\tif (!this.isExpanded) {\r\n\t\t\tthis.isExpanded = true;\r\n\t\t\tthis.cardOpened.emit(this.trackerId);\r\n\t\t}\r\n\t\t// If already expanded, do nothing to ensure at least one card remains open\r\n\t};\r\n\r\n\t/**\r\n\t * Handle keyboard interactions\r\n\t */\r\n\thandleKeyDown = (event: KeyboardEvent) => {\r\n\t\tswitch (event.key) {\r\n\t\t\tcase \"Enter\":\r\n\t\t\t\t//event.preventDefault();\r\n\t\t\t\tthis.openCard();\r\n\t\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t};\r\n\r\n\t/**\r\n\t * Listen for 'cardOpened' events on the document to close other cards\r\n\t */\r\n\t@Listen(\"cardOpened\", { target: \"document\" })\r\n\thandleCardOpened(event: CustomEvent<string>) {\r\n\t\tconst openedTrackerId = event.detail;\r\n\t\tif (openedTrackerId !== this.trackerId && this.isExpanded) {\r\n\t\t\tthis.isExpanded = false;\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Focus the card-wrapper element\r\n\t */\r\n\t@Method()\r\n\tasync focusCardWrapper() {\r\n\t\tconst cardWrapper = this.el.querySelector(\r\n\t\t\t\".card-wrapper\",\r\n\t\t) as HTMLElement;\r\n\t\tif (cardWrapper) {\r\n\t\t\tcardWrapper.focus();\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Get CSS class map\r\n\t */\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.cardType]: true,\r\n\t\t};\r\n\t}\r\n\r\n\t/**\r\n\t * Get desktop card based on expansion state\r\n\t */\r\n\t// getDesktopCard() {\r\n\t// if (this.cardScreen === 'desktop' && this.isExpanded) {\r\n\t// return [\r\n\t// <div class=\"card card-dt-open mf-listen\" id={this.trackerId}>\r\n\t// <ptc-card-content card-type=\"card-dynamic\">\r\n\t// <div class=\"card-title\">\r\n\t// <h3>{this.cardTitle}</h3>\r\n\t// </div>\r\n\t// <div class=\"card-content\">\r\n\t// <slot></slot>\r\n\t// </div>\r\n\t// </ptc-card-content>\r\n\t// <ptc-picture\r\n\t// alt={this.cardImgAlt}\r\n\t// src={this.cardImgSrc}\r\n\t// is-full-width=\"true\"\r\n\t// is-full-height=\"true\"\r\n\t// image-alignment=\"center\"\r\n\t// ></ptc-picture>\r\n\t// </div>,\r\n\t// ];\r\n\t// } else if (this.cardScreen === 'desktop' && !this.isExpanded) {\r\n\t// return [\r\n\t// <div class=\"card card-dt-closed mf-listen\" id={this.trackerId}>\r\n\t// <ptc-picture\r\n\t// alt={this.cardImgAlt}\r\n\t// src={this.cardImgSrc}\r\n\t// image-position=\"relative\"\r\n\t// is-full-width\r\n\t// height=\"424\"\r\n\t// >\r\n\t// {this.overlayExists ? (\r\n\t// <ptc-overlay filter-color=\"solid-black-1\"></ptc-overlay>\r\n\t// ) : (\r\n\t// <ptc-overlay filter-color=\"solid-black-2\"></ptc-overlay>\r\n\t// )}\r\n\t// </ptc-picture>\r\n\t// <div class=\"closed-content\" card-type=\"card-dynamic\">\r\n\t// <div class=\"card-title\">\r\n\t// <h2>{this.cardTitle}</h2>\r\n\t// </div>\r\n\t// </div>\r\n\t// </div>,\r\n\t// ];\r\n\t// } else {\r\n\t// return null;\r\n\t// }\r\n\t// }\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\r\n\t\treturn (\r\n\t\t\t<Host class={classMap}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"card-wrapper mf-listen\"\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\taria-expanded={this.isExpanded}\r\n\t\t\t\t\tonClick={this.openCard}\r\n\t\t\t\t\tonKeyDown={this.handleKeyDown}\r\n\t\t\t\t>\r\n\t\t\t\t\t{this.cardScreen === \"mobile\" ? (\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"card card-mobile mf-listen\"\r\n\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\theight=\"287\"\r\n\t\t\t\t\t\t\t\tis-full-width\r\n\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t></ptc-picture>\r\n\t\t\t\t\t\t\t<ptc-card-content\r\n\t\t\t\t\t\t\t\tcard-type=\"card-dynamic\"\r\n\t\t\t\t\t\t\t\tstyles=\":host(.card-dynamic){height: auto;}\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t<h3>{this.cardTitle}</h3>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"card-content\">\r\n\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ptc-card-content>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t{...(!this.isExpanded && {\r\n\t\t\t\t\t\t\t\t\thidden: \"until-found\",\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\t/* @ts-ignore */\r\n\t\t\t\t\t\t\t\tonBeforeMatch={this.openCard.bind(this)}\r\n\t\t\t\t\t\t\t\tclass={`card mf-listen ${\r\n\t\t\t\t\t\t\t\t\tthis.isExpanded && \"card-dt-open\"\r\n\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<ptc-card-content card-type=\"card-dynamic\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t\t<h3>{this.cardTitle}</h3>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-content\">\r\n\t\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ptc-card-content>\r\n\t\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t\t\tis-full-width=\"true\"\r\n\t\t\t\t\t\t\t\t\tis-full-height=\"true\"\r\n\t\t\t\t\t\t\t\t\timage-alignment=\"center\"\r\n\t\t\t\t\t\t\t\t></ptc-picture>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclass={`card card-dt-closed mf-listen ${\r\n\t\t\t\t\t\t\t\t\tthis.isExpanded ? \"hide\" : \"show\"\r\n\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t\t\timage-position=\"relative\"\r\n\t\t\t\t\t\t\t\t\tis-full-width\r\n\t\t\t\t\t\t\t\t\theight=\"424\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{this.overlayExists ? (\r\n\t\t\t\t\t\t\t\t\t\t<ptc-overlay filter-color=\"solid-black-1\"></ptc-overlay>\r\n\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t<ptc-overlay filter-color=\"solid-black-2\"></ptc-overlay>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</ptc-picture>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\tclass=\"closed-content\"\r\n\t\t\t\t\t\t\t\t\tcard-type=\"card-dynamic\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t\t<h2>{this.cardTitle}</h2>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t\t{this.cardScreen === \"desktop\" && (\r\n\t\t\t\t\t<div hidden>\r\n\t\t\t\t\t\t<svg>\r\n\t\t\t\t\t\t\t<use href={`${this.dotSvg}`}></use>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate dotSvg: string = getAssetPath(\"./media/nav-active-dotslick.svg\");\r\n}\r\n"],"version":3}
package/dist/components/ptc-card-content.js CHANGED
@@ -1,4 +1,4 @@
1
- import { P as PtcCardContent$1, d as defineCustomElement$1 } from './p-CXLAIdWX.js';
1
+ import { P as PtcCardContent$1, d as defineCustomElement$1 } from './p-CmtcG8H9.js';
2
2
 
3
3
  const PtcCardContent = PtcCardContent$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/ptc-dynamic-card.js CHANGED
@@ -1,4 +1,4 @@
1
- import { P as PtcDynamicCard$1, d as defineCustomElement$1 } from './p-t26ogJDp.js';
1
+ import { P as PtcDynamicCard$1, d as defineCustomElement$1 } from './p-WLFTWNrK.js';
2
2
 
3
3
  const PtcDynamicCard = PtcDynamicCard$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/sequential-bundle-example.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { c as proxyCustomElement, H, h, d as Host, g as getAssetPath } from './p-C2SefPLt.js';
2
2
  import { S as Swiper } from './p-CWQMvEpE.js';
3
3
  import { d as defineCustomElement$8 } from './p-DwR4-JBM.js';
4
- import { d as defineCustomElement$7 } from './p-CXLAIdWX.js';
5
- import { d as defineCustomElement$6 } from './p-t26ogJDp.js';
4
+ import { d as defineCustomElement$7 } from './p-CmtcG8H9.js';
5
+ import { d as defineCustomElement$6 } from './p-WLFTWNrK.js';
6
6
  import { d as defineCustomElement$5 } from './p-Cj1vpVKf.js';
7
7
  import { d as defineCustomElement$4 } from './p-l8keCSLZ.js';
8
8
  import { d as defineCustomElement$3 } from './p-SaYc7Kjd.js';
package/dist/components/sequential-bundle.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { c as proxyCustomElement, H, h, d as Host } from './p-C2SefPLt.js';
2
2
  import { S as Swiper } from './p-CWQMvEpE.js';
3
3
  import { d as defineCustomElement$8 } from './p-DwR4-JBM.js';
4
- import { d as defineCustomElement$7 } from './p-CXLAIdWX.js';
5
- import { d as defineCustomElement$6 } from './p-t26ogJDp.js';
4
+ import { d as defineCustomElement$7 } from './p-CmtcG8H9.js';
5
+ import { d as defineCustomElement$6 } from './p-WLFTWNrK.js';
6
6
  import { d as defineCustomElement$5 } from './p-Cj1vpVKf.js';
7
7
  import { d as defineCustomElement$4 } from './p-l8keCSLZ.js';
8
8
  import { d as defineCustomElement$3 } from './p-SaYc7Kjd.js';