@covet-pics/covet-pics-widget 0.159.6 → 0.159.8

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 (18) hide show
  1. package/dist/cjs/covet-pics-post.cjs.entry.js +4 -2
  2. package/dist/cjs/covet-pics-post.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/covet-pics-post/covet-pics-post.css +103 -92
  4. package/dist/collection/components/covet-pics-post/covet-pics-post.js +3 -1
  5. package/dist/collection/components/covet-pics-post/covet-pics-post.js.map +1 -1
  6. package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
  7. package/dist/covet-pics-widget/{p-05fd71bc.entry.js → p-7dc7658c.entry.js} +2 -2
  8. package/dist/covet-pics-widget/p-7dc7658c.entry.js.map +1 -0
  9. package/dist/covet-pics-widget/{p-14a9d324.system.entry.js → p-ab73f7a7.system.entry.js} +3 -3
  10. package/dist/covet-pics-widget/p-ab73f7a7.system.entry.js.map +1 -0
  11. package/dist/covet-pics-widget/p-b5767740.system.js +1 -1
  12. package/dist/esm/covet-pics-post.entry.js +4 -2
  13. package/dist/esm/covet-pics-post.entry.js.map +1 -1
  14. package/dist/esm-es5/covet-pics-post.entry.js +2 -2
  15. package/dist/esm-es5/covet-pics-post.entry.js.map +1 -1
  16. package/package.json +1 -1
  17. package/dist/covet-pics-widget/p-05fd71bc.entry.js.map +0 -1
  18. package/dist/covet-pics-widget/p-14a9d324.system.entry.js.map +0 -1
package/dist/cjs/covet-pics-post.cjs.entry.js CHANGED
@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
8
8
  const index = require('./index-1c693ba6.js');
9
9
  const utils = require('./utils-02b313ee.js');
10
10
 
11
- const covetPicsPostCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff;}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{-webkit-scroll-snap-type:none;-ms-scroll-snap-type:none;scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;transform-origin:50%;-webkit-box-sizing:border-box;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{-webkit-animation:swiper-preloader-spin 1s infinite linear;animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@-webkit-keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:root{--swiper-navigation-size:44px;}.swiper-button-prev,.swiper-button-next{position:absolute;top:var(--swiper-navigation-top-offset, 50%);width:calc(var(--swiper-navigation-size) / 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size) / 2);z-index:10;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:0.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none !important}.swiper-button-prev svg,.swiper-button-next svg{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-webkit-transform-origin:center;transform-origin:center}.swiper-rtl .swiper-button-prev svg,.swiper-rtl .swiper-button-next svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-lock{display:none}.swiper-button-prev:after,.swiper-button-next:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none !important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:\"prev\"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:\"next\"}:root{}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms opacity;transition:300ms opacity;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none !important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(0.33);transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none !important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;-webkit-transform:translate3d(0px, -50%, 0);transform:translate3d(0px, -50%, 0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:200ms top, 200ms -webkit-transform;transition:200ms top, 200ms -webkit-transform;transition:200ms transform, 200ms top;transition:200ms transform, 200ms top, 200ms -webkit-transform}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms left, 200ms -webkit-transform;transition:200ms left, 200ms -webkit-transform;transition:200ms transform, 200ms left;transition:200ms transform, 200ms left, 200ms -webkit-transform}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms right, 200ms -webkit-transform;transition:200ms right, 200ms -webkit-transform;transition:200ms transform, 200ms right;transition:200ms transform, 200ms right, 200ms -webkit-transform}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}:host{--swiper-pagination-height:40px;--popup-fixed-size:720px}.carousel-media{max-width:100%;padding-bottom:var(--swiper-pagination-height)}.carousel-media .carousel-cell{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;width:100%}.carousel-media .carousel-cell img,.carousel-media .carousel-cell video{-ms-flex-item-align:center;align-self:center;max-height:calc(var(--popup-fixed-size) - var(--swiper-pagination-height));max-width:100%}.swiper-button-next,.swiper-button-prev{top:unset;bottom:0;-webkit-transform:translateY(0);transform:translateY(0);border-radius:0;background:transparent;padding:0;z-index:11;-webkit-transition:opacity 0.25s ease;transition:opacity 0.25s ease;opacity:1;border:none}.swiper-button-next:hover,.swiper-button-next:active,.swiper-button-next:focus,.swiper-button-prev:hover,.swiper-button-prev:active,.swiper-button-prev:focus{opacity:0.5}.swiper-button-next svg,.swiper-button-prev svg{width:var(--swiper-pagination-height);height:var(--swiper-pagination-height)}.swiper-button-next:after,.swiper-button-prev:after{display:none}.swiper-button-next{right:0}.swiper-button-prev{left:0}.swiper-button-prev svg{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.swiper-horizontal>.swiper-pagination-bullets{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:var(--swiper-pagination-height);top:unset;bottom:0;background:white}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width:6px;height:6px;margin:0 3px}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:active,.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:focus{opacity:0.4}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#000000}.carousel-media~.covet-branding{bottom:calc(var(--swiper-pagination-height) - 16px)}@media only screen and (min-width: 800px){.carousel-media{width:calc(var(--popup-fixed-size) - var(--swiper-pagination-height));height:var(--popup-fixed-size);padding-bottom:0}.carousel-media .carousel-cell{height:100%;max-height:calc(var(--popup-fixed-size) - var(--swiper-pagination-height))}}:host{--swiper-pagination-height:40px;--covet-post-control-size:70px;--covet-post-bg-color:#FFFFFF;--covet-post-font-family:Helvetica Neue;--covet-post-text-color:#000000;--covet-post-border-color:#F1F1F1;--covet-post-image-bg-color:#212121;--covet-post-border-radius:8px;--covet-post-description-padding:24px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:380px;display:block;background-color:var(--covet-post-bg-color);-ms-flex:none;flex:none;border:1px solid var(--covet-post-border-color);border-radius:var(--covet-post-border-radius);overflow:hidden}:host .carousel-media{width:380px;height:380px}:host .carousel-media .carousel-cell{height:100%;max-height:340px}:host .carousel-media .carousel-cell img,:host .carousel-media .carousel-cell video{-ms-flex-item-align:center;align-self:center;max-height:100%;max-width:100%}:host .swiper-button-next,:host .swiper-button-prev{top:unset;bottom:0;-webkit-transform:translateY(0);transform:translateY(0);border-radius:0;background:transparent;padding:0;z-index:11;-webkit-transition:opacity 0.25s ease;transition:opacity 0.25s ease;opacity:1;border:none;width:var(--swiper-pagination-height);height:var(--swiper-pagination-height);margin-top:0}:host .swiper-button-next:hover,:host .swiper-button-next:active,:host .swiper-button-next:focus,:host .swiper-button-prev:hover,:host .swiper-button-prev:active,:host .swiper-button-prev:focus{opacity:0.5}:host .swiper-button-next svg,:host .swiper-button-prev svg{width:var(--swiper-pagination-height);height:var(--swiper-pagination-height)}:host .swiper-button-next:after,:host .swiper-button-prev:after{display:none}:host .swiper-horizontal>.swiper-pagination-bullets{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:var(--swiper-pagination-height);top:unset;bottom:0;background:white}:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width:6px;height:6px;margin:0 3px}:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:active,:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:focus{opacity:0.4}:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#000000}.covet-post-image-wrap{width:100%;height:340px;overflow:hidden;position:relative;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;background-color:var(--covet-post-image-bg-color)}.covet-post-image-wrap.carousel{display:block;height:380px}.covet-post-image,.post-video-element{-o-object-fit:contain;object-fit:contain;margin:auto;width:100%;height:100%}.covet-post-description{display:block;padding:var(--covet-post-description-padding)}.covet-post-text{color:var(--covet-post-text-color);margin-top:0;font-family:var(--covet-post-font-family);font-size:12px;font-weight:500;line-height:18px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;max-height:72px;-webkit-line-clamp:4;white-space:pre-line;margin-bottom:0}.post-video-element{max-width:100%;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:stretch;align-items:stretch;overflow:hidden;max-height:100%}.post-video-element video{-o-object-fit:contain;object-fit:contain;width:100%}.post-video-element:after{content:\"\";position:absolute;opacity:1;border:none;outline:none !important;top:50%;width:100px;height:100px;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:pointer;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1585.982 6.353 864 864'%3E%3Cpath opacity='.6' fill='%23231F20' d='M2017.982 6.353c-238.592 0-432 193.409-432 432 0 238.592 193.408 432 432 432 238.591 0 432-193.408 432-432 0-238.591-193.409-432-432-432z'/%3E%3Cpath fill='%23FFF' d='M1910.997 656.622l293.971-219.27-293.971-219.269z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain;background-color:transparent;-webkit-transition:all 0.25s ease;transition:all 0.25s ease}.post-video-element:hover:after,.post-video-element:focus:after{-webkit-transform:translate(-50%, -50%) scale(1.1);transform:translate(-50%, -50%) scale(1.1)}.post-video-element.playing:after{opacity:0}.error-message{text-align:center;border:2px dashed;padding:20px}";
11
+ const covetPicsPostCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff;}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{-webkit-scroll-snap-type:none;-ms-scroll-snap-type:none;scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;transform-origin:50%;-webkit-box-sizing:border-box;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{-webkit-animation:swiper-preloader-spin 1s infinite linear;animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@-webkit-keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:root{--swiper-navigation-size:44px;}.swiper-button-prev,.swiper-button-next{position:absolute;top:var(--swiper-navigation-top-offset, 50%);width:calc(var(--swiper-navigation-size) / 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size) / 2);z-index:10;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:0.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none !important}.swiper-button-prev svg,.swiper-button-next svg{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-webkit-transform-origin:center;transform-origin:center}.swiper-rtl .swiper-button-prev svg,.swiper-rtl .swiper-button-next svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-lock{display:none}.swiper-button-prev:after,.swiper-button-next:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none !important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:\"prev\"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:\"next\"}:root{}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms opacity;transition:300ms opacity;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none !important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(0.33);transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none !important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;-webkit-transform:translate3d(0px, -50%, 0);transform:translate3d(0px, -50%, 0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:200ms top, 200ms -webkit-transform;transition:200ms top, 200ms -webkit-transform;transition:200ms transform, 200ms top;transition:200ms transform, 200ms top, 200ms -webkit-transform}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms left, 200ms -webkit-transform;transition:200ms left, 200ms -webkit-transform;transition:200ms transform, 200ms left;transition:200ms transform, 200ms left, 200ms -webkit-transform}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms right, 200ms -webkit-transform;transition:200ms right, 200ms -webkit-transform;transition:200ms transform, 200ms right;transition:200ms transform, 200ms right, 200ms -webkit-transform}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}:host{--swiper-pagination-height:40px;--popup-fixed-size:720px}.carousel-media{max-width:100%;padding-bottom:var(--swiper-pagination-height)}.carousel-media .carousel-cell{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;width:100%}.carousel-media .carousel-cell img,.carousel-media .carousel-cell video{-ms-flex-item-align:center;align-self:center;max-height:calc(var(--popup-fixed-size) - var(--swiper-pagination-height));max-width:100%}.swiper-button-next,.swiper-button-prev{top:unset;bottom:0;-webkit-transform:translateY(0);transform:translateY(0);border-radius:0;background:transparent;padding:0;z-index:11;-webkit-transition:opacity 0.25s ease;transition:opacity 0.25s ease;opacity:1;border:none}.swiper-button-next:hover,.swiper-button-next:active,.swiper-button-next:focus,.swiper-button-prev:hover,.swiper-button-prev:active,.swiper-button-prev:focus{opacity:0.5}.swiper-button-next svg,.swiper-button-prev svg{width:var(--swiper-pagination-height);height:var(--swiper-pagination-height)}.swiper-button-next:after,.swiper-button-prev:after{display:none}.swiper-button-next{right:0}.swiper-button-prev{left:0}.swiper-button-prev svg{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.swiper-horizontal>.swiper-pagination-bullets{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:var(--swiper-pagination-height);top:unset;bottom:0;background:white}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width:6px;height:6px;margin:0 3px}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:active,.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:focus{opacity:0.4}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#000000}.carousel-media~.covet-branding{bottom:calc(var(--swiper-pagination-height) - 16px)}@media only screen and (min-width: 800px){.carousel-media{width:calc(var(--popup-fixed-size) - var(--swiper-pagination-height));height:var(--popup-fixed-size);padding-bottom:0}.carousel-media .carousel-cell{height:100%;max-height:calc(var(--popup-fixed-size) - var(--swiper-pagination-height))}}:host{--swiper-pagination-height:40px;--covet-post-control-size:70px;--covet-post-bg-color:#FFFFFF;--covet-post-font-family:Helvetica Neue;--covet-post-text-color:#000000;--covet-post-border-color:#F1F1F1;--covet-post-image-bg-color:#212121;--covet-post-border-radius:8px;--covet-post-description-padding:24px}:host{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex:none;flex:none;max-width:100%}:host .covet-post{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--covet-post-bg-color);border:1px solid var(--covet-post-border-color);border-radius:var(--covet-post-border-radius);overflow:hidden;position:relative;max-width:100%}:host .covet-post-image-wrap{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex:none;flex:none;background-color:var(--covet-post-image-bg-color)}:host .covet-post-image-wrap.carousel{display:block;height:100%}:host .covet-post-image,:host .post-video-element{-o-object-fit:contain;object-fit:contain;margin:auto;width:100%;height:100%}:host .post-video-element{max-width:100%;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:stretch;align-items:stretch;overflow:hidden;max-height:100%}:host .post-video-element video{-o-object-fit:contain;object-fit:contain;width:100%}:host .post-video-element:after{content:\"\";position:absolute;opacity:1;border:none;outline:none !important;top:50%;width:100px;height:100px;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:pointer;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1585.982 6.353 864 864'%3E%3Cpath opacity='.6' fill='%23231F20' d='M2017.982 6.353c-238.592 0-432 193.409-432 432 0 238.592 193.408 432 432 432 238.591 0 432-193.408 432-432 0-238.591-193.409-432-432-432z'/%3E%3Cpath fill='%23FFF' d='M1910.997 656.622l293.971-219.27-293.971-219.269z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain;background-color:transparent;-webkit-transition:all 0.25s ease;transition:all 0.25s ease}:host .post-video-element:hover:after,:host .post-video-element:focus:after{-webkit-transform:translate(-50%, -50%) scale(1.1);transform:translate(-50%, -50%) scale(1.1)}:host .post-video-element.playing:after{opacity:0}:host .covet-post-description{-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--covet-post-description-padding);background-color:var(--covet-post-bg-color);width:0;min-width:100%}:host .covet-post-text{color:var(--covet-post-text-color);margin-top:0;font-family:var(--covet-post-font-family);font-size:12px;font-weight:500;line-height:18px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;max-height:72px;-webkit-line-clamp:4;white-space:pre-line;margin-bottom:0}:host .carousel-media{width:100%;height:100%}:host .carousel-media .carousel-cell{height:calc(100% - 40px);width:100%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .carousel-media .carousel-cell img,:host .carousel-media .carousel-cell video{-o-object-fit:contain;object-fit:contain;margin:auto;width:100%;height:100%}:host .swiper-button-next,:host .swiper-button-prev{top:unset;bottom:0;-webkit-transform:translateY(0);transform:translateY(0);border-radius:0;background:transparent;padding:0;z-index:11;-webkit-transition:opacity 0.25s ease;transition:opacity 0.25s ease;opacity:1;border:none;width:var(--swiper-pagination-height);height:var(--swiper-pagination-height);margin-top:0}:host .swiper-button-next:hover,:host .swiper-button-next:active,:host .swiper-button-next:focus,:host .swiper-button-prev:hover,:host .swiper-button-prev:active,:host .swiper-button-prev:focus{opacity:0.5}:host .swiper-button-next svg,:host .swiper-button-prev svg{width:var(--swiper-pagination-height);height:var(--swiper-pagination-height)}:host .swiper-button-next:after,:host .swiper-button-prev:after{display:none}:host .swiper-horizontal>.swiper-pagination-bullets{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:var(--swiper-pagination-height);top:unset;bottom:0;background:white}:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width:6px;height:6px;margin:0 3px}:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:active,:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:focus{opacity:0.4}:host .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#000000}.error-message{text-align:center;border:2px dashed;padding:20px}";
12
12
  const CovetPicsPostStyle0 = covetPicsPostCss;
13
13
 
14
14
  const CovetPicsPost = class {
@@ -82,7 +82,9 @@ const CovetPicsPost = class {
82
82
  return this.renderError();
83
83
  if (this.item === null)
84
84
  return null;
85
- return (index.h(index.Host, { class: "covet-post" }, index.h("div", { class: { "covet-post-image-wrap": true, "carousel": this.item.carousel_media && this.item.carousel_media.length > 0 } }, this.renderImageElements()), index.h("div", { class: "covet-post-description" }, index.h("p", { class: "covet-post-text" }, index.h("b", null, "@", this.item.username), "\u00A0", this.item.caption))));
85
+ const descriptionEmpty = (this.item.username === null || this.item.username === "") && (this.item.caption === null || this.item.caption === "");
86
+ return (index.h(index.Host, null, index.h("div", { class: { "covet-post": true } }, index.h("div", { class: { "covet-post-image-wrap": true, "carousel": this.item.carousel_media && this.item.carousel_media.length > 0 } }, this.renderImageElements()), !descriptionEmpty &&
87
+ index.h("div", { class: "covet-post-description" }, index.h("p", { class: "covet-post-text" }, index.h("b", null, "@", this.item.username), "\u00A0", this.item.caption)))));
86
88
  }
87
89
  get el() { return index.getElement(this); }
88
90
  };
package/dist/cjs/covet-pics-post.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"covet-pics-post.entry.cjs.js","mappings":"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","names":["BASE_API_URLS","h","Host"],"sources":["src/components/covet-pics-post/covet-pics-post.scss?tag=covet-pics-post&encapsulation=shadow","src/components/covet-pics-post/covet-pics-post.tsx"],"sourcesContent":["@import \"~swiper/swiper.scss\";\n@import \"~swiper/modules/navigation.scss\";\n@import \"~swiper/modules/pagination.scss\";\n@import \"../covet-pics-popup/covet-gallery-popup-carousel.scss\";\n\n:host {\n // vars\n --swiper-pagination-height: 40px;\n --covet-post-control-size: 70px;\n --covet-post-bg-color: #FFFFFF;\n --covet-post-font-family: Helvetica Neue;\n --covet-post-text-color: #000000;\n --covet-post-border-color: #F1F1F1;\n --covet-post-image-bg-color: #212121;\n --covet-post-border-radius: 8px;\n --covet-post-description-padding: 24px;\n\n box-sizing: border-box;\n position: relative;\n width: 380px;\n display: block;\n background-color: var(--covet-post-bg-color);\n flex: none;\n border: 1px solid var(--covet-post-border-color);\n border-radius: var(--covet-post-border-radius);\n overflow: hidden;\n\n // fix popup carousel slider component settings\n .carousel-media {\n width: 380px;\n height: 380px;\n .carousel-cell {\n height: 100%;\n max-height: 340px;\n\n img, video {\n align-self: center;\n max-height: 100%;\n max-width: 100%;\n }\n }\n }\n\n .swiper-button-next, .swiper-button-prev {\n top: unset;\n bottom: 0;\n transform: translateY(0);\n border-radius: 0;\n background: transparent;\n padding: 0;\n z-index: 11;\n transition: opacity 0.25s ease;\n opacity: 1;\n border: none;\n width: var(--swiper-pagination-height);\n height: var(--swiper-pagination-height);\n margin-top: 0;\n &:hover, &:active, &:focus {\n opacity: 0.5;\n }\n \n svg {\n width: var(--swiper-pagination-height);\n height: var(--swiper-pagination-height);\n }\n \n &:after {\n display: none;\n }\n }\n\n .swiper-horizontal > .swiper-pagination-bullets {\n display: flex;\n justify-content: center;\n align-items: center;\n \n height: var(--swiper-pagination-height);\n top: unset;\n bottom: 0;\n background: white;\n \n .swiper-pagination-bullet {\n width: 6px;\n height: 6px;\n margin: 0 3px;\n &:hover, &:active, &:focus {\n opacity: .4;\n }\n &.swiper-pagination-bullet-active {\n background: #000000;\n }\n }\n }\n // fix popup carousel slider component settings END\n}\n\n.covet-post-image-wrap {\n width: 100%;\n height: 340px;\n overflow: hidden;\n position: relative;\n display: flex;\n flex: none;\n background-color: var(--covet-post-image-bg-color);\n &.carousel {\n display: block;\n height: 380px;\n }\n}\n\n.covet-post-image, .post-video-element {\n object-fit: contain;\n margin: auto;\n width: 100%;\n height: 100%;\n}\n\n.covet-post-description {\n display: block;\n padding: var(--covet-post-description-padding);\n}\n.covet-post-text {\n color: var(--covet-post-text-color);\n margin-top: 0;\n font-family: var( --covet-post-font-family);\n font-size: 12px;\n font-weight: 500;\n line-height: 18px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n max-height: calc(18px * 4);\n -webkit-line-clamp: 4;\n white-space: pre-line;\n margin-bottom: 0;\n}\n\n.post-video-element {\n max-width: 100%;\n z-index: 1;\n display: flex;\n justify-content: center;\n align-items: stretch;\n overflow: hidden;\n max-height: 100%;\n\n video {\n object-fit: contain;\n width: 100%;\n }\n\n &:after {\n content: \"\";\n position: absolute;\n opacity: 1;\n border: none;\n outline: none !important;\n top: 50%;\n width: 100px;\n height: 100px;\n left: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1585.982 6.353 864 864'%3E%3Cpath opacity='.6' fill='%23231F20' d='M2017.982 6.353c-238.592 0-432 193.409-432 432 0 238.592 193.408 432 432 432 238.591 0 432-193.408 432-432 0-238.591-193.409-432-432-432z'/%3E%3Cpath fill='%23FFF' d='M1910.997 656.622l293.971-219.27-293.971-219.269z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-color: transparent;\n transition: all 0.25s ease;\n }\n\n &:hover, &:focus {\n &:after {\n transform: translate(-50%, -50%) scale(1.1);\n }\n }\n\n &.playing {\n &:after {\n opacity: 0;\n }\n }\n\n}\n\n.error-message {\n text-align: center;\n border: 2px dashed;\n padding: 20px; \n}\n","import { Component, Element, Prop, State, h, Host } from \"@stencil/core\";\nimport { BASE_API_URLS } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-post\",\n styleUrl: \"covet-pics-post.scss\",\n shadow: true\n })\n\nexport class CovetPicsPost {\n @Element() el: HTMLCovetPicsPostElement;\n\n /**\n * post ID\n */\n @Prop() postId: number;\n \n /**\n * App environment: shows which API base URL has to be used\n */\n @Prop() environment: string;\n\n @State() item = null;\n\n @State() fetchingError: string = null;\n\n componentWillLoad() {\n this.loadData();\n }\n\n private async loadData() {\n let env = \"production\";\n if (typeof this.environment === \"string\" && Object.keys(BASE_API_URLS).includes(this.environment)) {\n env = this.environment;\n }\n const baseUrl = BASE_API_URLS[env];\n const url = `${baseUrl}/api/v1/post/${this.postId}`;\n \n\n try {\n const json = await fetch(url);\n this.item = await json.json();\n } catch (err) {\n this.fetchingError = \"The Covet.pics post has not loaded because the post not exist. Please verify that the correct POST ID is being used\";\n }\n }\n\n private renderImageElements() {\n const { alt_tag, carousel_media, data_type, cover_images, video } = this.item;\n\n if (carousel_media && carousel_media.length > 0) {\n return <covet-pics-popup-slider item={this.item}></covet-pics-popup-slider>;\n } \n\n if (data_type === \"image\" || data_type === \"carousel\") {\n return (<img class=\"covet-post-image\" src={this.item.images.high_resolution} alt={this.item.caption} />);\n }\n if (data_type === \"video\") {\n return ((\n <div class=\"post-video-element\" onClick={this.playPauseVideoClickHandler} onKeyDown={this.playPauseVideoKeyboardClickHandler} tabindex=\"0\">\n <video playsinline loop poster={cover_images.high_resolution} key={video} title={alt_tag}> \n <source src={video} type=\"video/mp4\" />\n </video>\n </div>\n ));\n }\n return null;\n }\n\n private playPauseVideoKeyboardClickHandler = (event: KeyboardEvent) => {\n if (event.keyCode === 13 || event.keyCode === 32) {\n return this.playPauseVideoClickHandler(event);\n }\n }\n\n private playPauseVideoClickHandler = (event: UIEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const videoWrapper = event.currentTarget as HTMLVideoElement;\n\n return videoWrapper.classList.contains(\"playing\") ? this.pauseVideo(videoWrapper) : this.playVideo(videoWrapper);\n }\n\n private pauseVideo(videoWrapperEl: HTMLElement) {\n const videoEl = videoWrapperEl.querySelector(\"video\") as HTMLVideoElement;\n\n videoEl.pause();\n videoWrapperEl.classList.remove(\"playing\");\n }\n\n private playVideo(videoWrapperEl: HTMLElement) {\n const videoEl = videoWrapperEl.querySelector(\"video\") as HTMLVideoElement;\n let playPromise = videoEl.play();\n\n if (playPromise !== null) {\n playPromise.catch(() => { videoEl.play(); });\n }\n videoWrapperEl.classList.add(\"playing\");\n }\n\n private renderError() {\n return (\n <Host>\n <p class=\"error-message\">{this.fetchingError}</p>\n </Host>\n );\n }\n\n render() {\n if (this.fetchingError !== null) return this.renderError();\n if (this.item === null) return null;\n return (\n <Host class=\"covet-post\">\n <div class={{\"covet-post-image-wrap\": true, \"carousel\": this.item.carousel_media && this.item.carousel_media.length > 0}}>\n {this.renderImageElements()}\n </div>\n <div class=\"covet-post-description\">\n <p class=\"covet-post-text\"><b>@{this.item.username}</b>&nbsp;{this.item.caption}</p>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1
+ {"file":"covet-pics-post.entry.cjs.js","mappings":"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","names":["BASE_API_URLS","h","Host"],"sources":["src/components/covet-pics-post/covet-pics-post.scss?tag=covet-pics-post&encapsulation=shadow","src/components/covet-pics-post/covet-pics-post.tsx"],"sourcesContent":["@import \"~swiper/swiper.scss\";\n@import \"~swiper/modules/navigation.scss\";\n@import \"~swiper/modules/pagination.scss\";\n@import \"../covet-pics-popup/covet-gallery-popup-carousel.scss\";\n\n:host {\n // vars\n --swiper-pagination-height: 40px;\n --covet-post-control-size: 70px;\n --covet-post-bg-color: #FFFFFF;\n --covet-post-font-family: Helvetica Neue;\n --covet-post-text-color: #000000;\n --covet-post-border-color: #F1F1F1;\n --covet-post-image-bg-color: #212121;\n --covet-post-border-radius: 8px;\n --covet-post-description-padding: 24px;\n}\n\n:host {\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: none;\n max-width: 100%;\n \n .covet-post {\n box-sizing: border-box;\n background-color: var(--covet-post-bg-color);\n border: 1px solid var(--covet-post-border-color);\n border-radius: var(--covet-post-border-radius);\n overflow: hidden;\n position: relative;\n max-width: 100%;\n }\n\n .covet-post-image-wrap {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: none;\n background-color: var(--covet-post-image-bg-color); // TODO check do we need this\n &.carousel {\n display: block;\n height: 100%;\n }\n }\n\n .covet-post-image, .post-video-element {\n object-fit: contain;\n margin: auto;\n width: 100%;\n height: 100%;\n }\n\n .post-video-element {\n max-width: 100%;\n z-index: 1;\n display: flex;\n justify-content: center;\n align-items: stretch;\n overflow: hidden;\n max-height: 100%;\n\n video {\n object-fit: contain;\n width: 100%;\n }\n\n &:after {\n content: \"\";\n position: absolute;\n opacity: 1;\n border: none;\n outline: none !important;\n top: 50%;\n width: 100px;\n height: 100px;\n left: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1585.982 6.353 864 864'%3E%3Cpath opacity='.6' fill='%23231F20' d='M2017.982 6.353c-238.592 0-432 193.409-432 432 0 238.592 193.408 432 432 432 238.591 0 432-193.408 432-432 0-238.591-193.409-432-432-432z'/%3E%3Cpath fill='%23FFF' d='M1910.997 656.622l293.971-219.27-293.971-219.269z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-color: transparent;\n transition: all 0.25s ease;\n }\n\n &:hover, &:focus {\n &:after {\n transform: translate(-50%, -50%) scale(1.1);\n }\n }\n\n &.playing {\n &:after {\n opacity: 0;\n }\n }\n }\n\n .covet-post-description {\n box-sizing: border-box;\n padding: var(--covet-post-description-padding);\n background-color: var(--covet-post-bg-color);\n width: 0;\n min-width: 100%;\n }\n\n .covet-post-text {\n color: var(--covet-post-text-color);\n margin-top: 0;\n font-family: var( --covet-post-font-family);\n font-size: 12px;\n font-weight: 500;\n line-height: 18px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n max-height: calc(18px * 4);\n -webkit-line-clamp: 4;\n white-space: pre-line;\n margin-bottom: 0;\n }\n\n .carousel-media {\n width: 100%;\n height: 100%;\n .carousel-cell {\n height: calc(100% - 40px);\n width: 100%;\n justify-content: center;\n align-items: center;\n\n img, video {\n object-fit: contain;\n margin: auto;\n width: 100%;\n height: 100%;\n }\n }\n }\n\n .swiper-button-next, .swiper-button-prev {\n top: unset;\n bottom: 0;\n transform: translateY(0);\n border-radius: 0;\n background: transparent;\n padding: 0;\n z-index: 11;\n transition: opacity 0.25s ease;\n opacity: 1;\n border: none;\n width: var(--swiper-pagination-height);\n height: var(--swiper-pagination-height);\n margin-top: 0;\n &:hover, &:active, &:focus {\n opacity: 0.5;\n }\n \n svg {\n width: var(--swiper-pagination-height);\n height: var(--swiper-pagination-height);\n }\n \n &:after {\n display: none;\n }\n }\n\n .swiper-horizontal > .swiper-pagination-bullets {\n display: flex;\n justify-content: center;\n align-items: center;\n \n height: var(--swiper-pagination-height);\n top: unset;\n bottom: 0;\n background: white;\n \n .swiper-pagination-bullet {\n width: 6px;\n height: 6px;\n margin: 0 3px;\n &:hover, &:active, &:focus {\n opacity: .4;\n }\n &.swiper-pagination-bullet-active {\n background: #000000;\n }\n }\n }\n}\n\n.error-message {\n text-align: center;\n border: 2px dashed;\n padding: 20px; \n}\n","import { Component, Element, Prop, State, h, Host } from \"@stencil/core\";\nimport { BASE_API_URLS } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-post\",\n styleUrl: \"covet-pics-post.scss\",\n shadow: true\n })\n\nexport class CovetPicsPost {\n @Element() el: HTMLCovetPicsPostElement;\n\n /**\n * post ID\n */\n @Prop() postId: number;\n \n /**\n * App environment: shows which API base URL has to be used\n */\n @Prop() environment: string;\n\n @State() item = null;\n\n @State() fetchingError: string = null;\n\n componentWillLoad() {\n this.loadData();\n }\n\n private async loadData() {\n let env = \"production\";\n if (typeof this.environment === \"string\" && Object.keys(BASE_API_URLS).includes(this.environment)) {\n env = this.environment;\n }\n const baseUrl = BASE_API_URLS[env];\n const url = `${baseUrl}/api/v1/post/${this.postId}`;\n \n\n try {\n const json = await fetch(url);\n this.item = await json.json();\n } catch (err) {\n this.fetchingError = \"The Covet.pics post has not loaded because the post not exist. Please verify that the correct POST ID is being used\";\n }\n }\n\n private renderImageElements() {\n const { alt_tag, carousel_media, data_type, cover_images, video } = this.item;\n\n if (carousel_media && carousel_media.length > 0) {\n return <covet-pics-popup-slider item={this.item}></covet-pics-popup-slider>;\n } \n\n if (data_type === \"image\" || data_type === \"carousel\") {\n return (<img class=\"covet-post-image\" src={this.item.images.high_resolution} alt={this.item.caption} />);\n }\n if (data_type === \"video\") {\n return ((\n <div class=\"post-video-element\" onClick={this.playPauseVideoClickHandler} onKeyDown={this.playPauseVideoKeyboardClickHandler} tabindex=\"0\">\n <video playsinline loop poster={cover_images.high_resolution} key={video} title={alt_tag}> \n <source src={video} type=\"video/mp4\" />\n </video>\n </div>\n ));\n }\n return null;\n }\n\n private playPauseVideoKeyboardClickHandler = (event: KeyboardEvent) => {\n if (event.keyCode === 13 || event.keyCode === 32) {\n return this.playPauseVideoClickHandler(event);\n }\n }\n\n private playPauseVideoClickHandler = (event: UIEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const videoWrapper = event.currentTarget as HTMLVideoElement;\n\n return videoWrapper.classList.contains(\"playing\") ? this.pauseVideo(videoWrapper) : this.playVideo(videoWrapper);\n }\n\n private pauseVideo(videoWrapperEl: HTMLElement) {\n const videoEl = videoWrapperEl.querySelector(\"video\") as HTMLVideoElement;\n\n videoEl.pause();\n videoWrapperEl.classList.remove(\"playing\");\n }\n\n private playVideo(videoWrapperEl: HTMLElement) {\n const videoEl = videoWrapperEl.querySelector(\"video\") as HTMLVideoElement;\n let playPromise = videoEl.play();\n\n if (playPromise !== null) {\n playPromise.catch(() => { videoEl.play(); });\n }\n videoWrapperEl.classList.add(\"playing\");\n }\n\n private renderError() {\n return (\n <Host>\n <p class=\"error-message\">{this.fetchingError}</p>\n </Host>\n );\n }\n\n render() {\n if (this.fetchingError !== null) return this.renderError();\n if (this.item === null) return null;\n\n const descriptionEmpty = (this.item.username === null || this.item.username === \"\") && (this.item.caption === null || this.item.caption === \"\");\n return (\n <Host>\n <div class={{\"covet-post\": true}}>\n <div class={{\"covet-post-image-wrap\": true, \"carousel\": this.item.carousel_media && this.item.carousel_media.length > 0}}>\n {this.renderImageElements()}\n </div>\n {!descriptionEmpty &&\n <div class=\"covet-post-description\">\n <p class=\"covet-post-text\"><b>@{this.item.username}</b>&nbsp;{this.item.caption}</p>\n </div>\n }\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
package/dist/collection/components/covet-pics-post/covet-pics-post.css CHANGED
@@ -625,28 +625,121 @@ button.swiper-pagination-bullet {
625
625
  --covet-post-image-bg-color: #212121;
626
626
  --covet-post-border-radius: 8px;
627
627
  --covet-post-description-padding: 24px;
628
+ }
629
+
630
+ :host {
628
631
  box-sizing: border-box;
629
632
  position: relative;
630
- width: 380px;
631
- display: block;
632
- background-color: var(--covet-post-bg-color);
633
+ display: flex;
634
+ flex-direction: column;
635
+ align-items: center;
636
+ justify-content: center;
633
637
  flex: none;
638
+ max-width: 100%;
639
+ }
640
+ :host .covet-post {
641
+ box-sizing: border-box;
642
+ background-color: var(--covet-post-bg-color);
634
643
  border: 1px solid var(--covet-post-border-color);
635
644
  border-radius: var(--covet-post-border-radius);
636
645
  overflow: hidden;
646
+ position: relative;
647
+ max-width: 100%;
648
+ }
649
+ :host .covet-post-image-wrap {
650
+ display: flex;
651
+ justify-content: center;
652
+ align-items: center;
653
+ flex: none;
654
+ background-color: var(--covet-post-image-bg-color);
655
+ }
656
+ :host .covet-post-image-wrap.carousel {
657
+ display: block;
658
+ height: 100%;
659
+ }
660
+ :host .covet-post-image, :host .post-video-element {
661
+ -o-object-fit: contain;
662
+ object-fit: contain;
663
+ margin: auto;
664
+ width: 100%;
665
+ height: 100%;
666
+ }
667
+ :host .post-video-element {
668
+ max-width: 100%;
669
+ z-index: 1;
670
+ display: flex;
671
+ justify-content: center;
672
+ align-items: stretch;
673
+ overflow: hidden;
674
+ max-height: 100%;
675
+ }
676
+ :host .post-video-element video {
677
+ -o-object-fit: contain;
678
+ object-fit: contain;
679
+ width: 100%;
680
+ }
681
+ :host .post-video-element:after {
682
+ content: "";
683
+ position: absolute;
684
+ opacity: 1;
685
+ border: none;
686
+ outline: none !important;
687
+ top: 50%;
688
+ width: 100px;
689
+ height: 100px;
690
+ left: 50%;
691
+ transform: translate(-50%, -50%);
692
+ cursor: pointer;
693
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1585.982 6.353 864 864'%3E%3Cpath opacity='.6' fill='%23231F20' d='M2017.982 6.353c-238.592 0-432 193.409-432 432 0 238.592 193.408 432 432 432 238.591 0 432-193.408 432-432 0-238.591-193.409-432-432-432z'/%3E%3Cpath fill='%23FFF' d='M1910.997 656.622l293.971-219.27-293.971-219.269z'/%3E%3C/svg%3E");
694
+ background-repeat: no-repeat;
695
+ background-size: contain;
696
+ background-color: transparent;
697
+ transition: all 0.25s ease;
698
+ }
699
+ :host .post-video-element:hover:after, :host .post-video-element:focus:after {
700
+ transform: translate(-50%, -50%) scale(1.1);
701
+ }
702
+ :host .post-video-element.playing:after {
703
+ opacity: 0;
704
+ }
705
+ :host .covet-post-description {
706
+ box-sizing: border-box;
707
+ padding: var(--covet-post-description-padding);
708
+ background-color: var(--covet-post-bg-color);
709
+ width: 0;
710
+ min-width: 100%;
711
+ }
712
+ :host .covet-post-text {
713
+ color: var(--covet-post-text-color);
714
+ margin-top: 0;
715
+ font-family: var(--covet-post-font-family);
716
+ font-size: 12px;
717
+ font-weight: 500;
718
+ line-height: 18px;
719
+ overflow: hidden;
720
+ display: -webkit-box;
721
+ -webkit-box-orient: vertical;
722
+ max-height: 72px;
723
+ -webkit-line-clamp: 4;
724
+ white-space: pre-line;
725
+ margin-bottom: 0;
637
726
  }
638
727
  :host .carousel-media {
639
- width: 380px;
640
- height: 380px;
728
+ width: 100%;
729
+ height: 100%;
641
730
  }
642
731
  :host .carousel-media .carousel-cell {
643
- height: 100%;
644
- max-height: 340px;
732
+ height: calc(100% - 40px);
733
+ width: 100%;
734
+ justify-content: center;
735
+ align-items: center;
645
736
  }
646
737
  :host .carousel-media .carousel-cell img, :host .carousel-media .carousel-cell video {
647
- align-self: center;
648
- max-height: 100%;
649
- max-width: 100%;
738
+ -o-object-fit: contain;
739
+ object-fit: contain;
740
+ margin: auto;
741
+ width: 100%;
742
+ height: 100%;
650
743
  }
651
744
  :host .swiper-button-next, :host .swiper-button-prev {
652
745
  top: unset;
@@ -694,88 +787,6 @@ button.swiper-pagination-bullet {
694
787
  background: #000000;
695
788
  }
696
789
 
697
- .covet-post-image-wrap {
698
- width: 100%;
699
- height: 340px;
700
- overflow: hidden;
701
- position: relative;
702
- display: flex;
703
- flex: none;
704
- background-color: var(--covet-post-image-bg-color);
705
- }
706
- .covet-post-image-wrap.carousel {
707
- display: block;
708
- height: 380px;
709
- }
710
-
711
- .covet-post-image, .post-video-element {
712
- -o-object-fit: contain;
713
- object-fit: contain;
714
- margin: auto;
715
- width: 100%;
716
- height: 100%;
717
- }
718
-
719
- .covet-post-description {
720
- display: block;
721
- padding: var(--covet-post-description-padding);
722
- }
723
-
724
- .covet-post-text {
725
- color: var(--covet-post-text-color);
726
- margin-top: 0;
727
- font-family: var(--covet-post-font-family);
728
- font-size: 12px;
729
- font-weight: 500;
730
- line-height: 18px;
731
- overflow: hidden;
732
- display: -webkit-box;
733
- -webkit-box-orient: vertical;
734
- max-height: 72px;
735
- -webkit-line-clamp: 4;
736
- white-space: pre-line;
737
- margin-bottom: 0;
738
- }
739
-
740
- .post-video-element {
741
- max-width: 100%;
742
- z-index: 1;
743
- display: flex;
744
- justify-content: center;
745
- align-items: stretch;
746
- overflow: hidden;
747
- max-height: 100%;
748
- }
749
- .post-video-element video {
750
- -o-object-fit: contain;
751
- object-fit: contain;
752
- width: 100%;
753
- }
754
- .post-video-element:after {
755
- content: "";
756
- position: absolute;
757
- opacity: 1;
758
- border: none;
759
- outline: none !important;
760
- top: 50%;
761
- width: 100px;
762
- height: 100px;
763
- left: 50%;
764
- transform: translate(-50%, -50%);
765
- cursor: pointer;
766
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1585.982 6.353 864 864'%3E%3Cpath opacity='.6' fill='%23231F20' d='M2017.982 6.353c-238.592 0-432 193.409-432 432 0 238.592 193.408 432 432 432 238.591 0 432-193.408 432-432 0-238.591-193.409-432-432-432z'/%3E%3Cpath fill='%23FFF' d='M1910.997 656.622l293.971-219.27-293.971-219.269z'/%3E%3C/svg%3E");
767
- background-repeat: no-repeat;
768
- background-size: contain;
769
- background-color: transparent;
770
- transition: all 0.25s ease;
771
- }
772
- .post-video-element:hover:after, .post-video-element:focus:after {
773
- transform: translate(-50%, -50%) scale(1.1);
774
- }
775
- .post-video-element.playing:after {
776
- opacity: 0;
777
- }
778
-
779
790
  .error-message {
780
791
  text-align: center;
781
792
  border: 2px dashed;
package/dist/collection/components/covet-pics-post/covet-pics-post.js CHANGED
@@ -73,7 +73,9 @@ export class CovetPicsPost {
73
73
  return this.renderError();
74
74
  if (this.item === null)
75
75
  return null;
76
- return (h(Host, { class: "covet-post" }, h("div", { class: { "covet-post-image-wrap": true, "carousel": this.item.carousel_media && this.item.carousel_media.length > 0 } }, this.renderImageElements()), h("div", { class: "covet-post-description" }, h("p", { class: "covet-post-text" }, h("b", null, "@", this.item.username), "\u00A0", this.item.caption))));
76
+ const descriptionEmpty = (this.item.username === null || this.item.username === "") && (this.item.caption === null || this.item.caption === "");
77
+ return (h(Host, null, h("div", { class: { "covet-post": true } }, h("div", { class: { "covet-post-image-wrap": true, "carousel": this.item.carousel_media && this.item.carousel_media.length > 0 } }, this.renderImageElements()), !descriptionEmpty &&
78
+ h("div", { class: "covet-post-description" }, h("p", { class: "covet-post-text" }, h("b", null, "@", this.item.username), "\u00A0", this.item.caption)))));
77
79
  }
78
80
  static get is() { return "covet-pics-post"; }
79
81
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/covet-pics-post/covet-pics-post.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"covet-pics-post.js","sourceRoot":"","sources":["../../../src/components/covet-pics-post/covet-pics-post.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQlD,MAAM,OAAO,aAAa;;QA4DhB,uCAAkC,GAAG,CAAC,KAAoB,EAAE,EAAE;YACpE,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;gBACjD,OAAO,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;YAChD,CAAC;QACH,CAAC,CAAA;QAEO,+BAA0B,GAAG,CAAC,KAAc,EAAE,EAAE;YACtD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,MAAM,YAAY,GAAG,KAAK,CAAC,aAAiC,CAAC;YAE7D,OAAO,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACnH,CAAC,CAAA;;;oBA5De,IAAI;6BAEa,IAAI;;IAErC,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAEO,KAAK,CAAC,QAAQ;QACpB,IAAI,GAAG,GAAG,YAAY,CAAC;QACvB,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAClG,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QACzB,CAAC;QACD,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;QACnC,MAAM,GAAG,GAAG,GAAG,OAAO,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC;QAGpD,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;YAC9B,IAAI,CAAC,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,GAAG,qHAAqH,CAAC;QAC7I,CAAC;IACH,CAAC;IAEO,mBAAmB;QACzB,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;QAE9E,IAAI,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChD,OAAO,+BAAyB,IAAI,EAAE,IAAI,CAAC,IAAI,GAA4B,CAAC;QAC9E,CAAC;QAED,IAAI,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;YACtD,OAAO,CAAC,WAAK,KAAK,EAAC,kBAAkB,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC;QAC3G,CAAC;QACD,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;YAC1B,OAAO,CAAC,CACN,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,0BAA0B,EAAE,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,QAAQ,EAAC,GAAG;gBACxI,aAAO,WAAW,QAAC,IAAI,QAAC,MAAM,EAAE,YAAY,CAAC,eAAe,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO;oBACtF,cAAQ,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,WAAW,GAAG,CACjC,CACJ,CACP,CAAC,CAAC;QACL,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAiBO,UAAU,CAAC,cAA2B;QAC5C,MAAM,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;QAE1E,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7C,CAAC;IAEO,SAAS,CAAC,cAA2B;QAC3C,MAAM,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;QAC1E,IAAI,WAAW,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;QAEjC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACzB,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/C,CAAC;QACD,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,EAAC,IAAI;YACH,SAAG,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,aAAa,CAAK,CAC5C,CACR,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;QAC3D,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QACpC,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,YAAY;YACtB,WAAK,KAAK,EAAE,EAAC,uBAAuB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAC,IACrH,IAAI,CAAC,mBAAmB,EAAE,CACvB;YACN,WAAK,KAAK,EAAC,wBAAwB;gBACjC,SAAG,KAAK,EAAC,iBAAiB;oBAAC;;wBAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAK;;oBAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAK,CAChF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Element, Prop, State, h, Host } from \"@stencil/core\";\nimport { BASE_API_URLS } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-post\",\n styleUrl: \"covet-pics-post.scss\",\n shadow: true\n })\n\nexport class CovetPicsPost {\n @Element() el: HTMLCovetPicsPostElement;\n\n /**\n * post ID\n */\n @Prop() postId: number;\n \n /**\n * App environment: shows which API base URL has to be used\n */\n @Prop() environment: string;\n\n @State() item = null;\n\n @State() fetchingError: string = null;\n\n componentWillLoad() {\n this.loadData();\n }\n\n private async loadData() {\n let env = \"production\";\n if (typeof this.environment === \"string\" && Object.keys(BASE_API_URLS).includes(this.environment)) {\n env = this.environment;\n }\n const baseUrl = BASE_API_URLS[env];\n const url = `${baseUrl}/api/v1/post/${this.postId}`;\n \n\n try {\n const json = await fetch(url);\n this.item = await json.json();\n } catch (err) {\n this.fetchingError = \"The Covet.pics post has not loaded because the post not exist. Please verify that the correct POST ID is being used\";\n }\n }\n\n private renderImageElements() {\n const { alt_tag, carousel_media, data_type, cover_images, video } = this.item;\n\n if (carousel_media && carousel_media.length > 0) {\n return <covet-pics-popup-slider item={this.item}></covet-pics-popup-slider>;\n } \n\n if (data_type === \"image\" || data_type === \"carousel\") {\n return (<img class=\"covet-post-image\" src={this.item.images.high_resolution} alt={this.item.caption} />);\n }\n if (data_type === \"video\") {\n return ((\n <div class=\"post-video-element\" onClick={this.playPauseVideoClickHandler} onKeyDown={this.playPauseVideoKeyboardClickHandler} tabindex=\"0\">\n <video playsinline loop poster={cover_images.high_resolution} key={video} title={alt_tag}> \n <source src={video} type=\"video/mp4\" />\n </video>\n </div>\n ));\n }\n return null;\n }\n\n private playPauseVideoKeyboardClickHandler = (event: KeyboardEvent) => {\n if (event.keyCode === 13 || event.keyCode === 32) {\n return this.playPauseVideoClickHandler(event);\n }\n }\n\n private playPauseVideoClickHandler = (event: UIEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const videoWrapper = event.currentTarget as HTMLVideoElement;\n\n return videoWrapper.classList.contains(\"playing\") ? this.pauseVideo(videoWrapper) : this.playVideo(videoWrapper);\n }\n\n private pauseVideo(videoWrapperEl: HTMLElement) {\n const videoEl = videoWrapperEl.querySelector(\"video\") as HTMLVideoElement;\n\n videoEl.pause();\n videoWrapperEl.classList.remove(\"playing\");\n }\n\n private playVideo(videoWrapperEl: HTMLElement) {\n const videoEl = videoWrapperEl.querySelector(\"video\") as HTMLVideoElement;\n let playPromise = videoEl.play();\n\n if (playPromise !== null) {\n playPromise.catch(() => { videoEl.play(); });\n }\n videoWrapperEl.classList.add(\"playing\");\n }\n\n private renderError() {\n return (\n <Host>\n <p class=\"error-message\">{this.fetchingError}</p>\n </Host>\n );\n }\n\n render() {\n if (this.fetchingError !== null) return this.renderError();\n if (this.item === null) return null;\n return (\n <Host class=\"covet-post\">\n <div class={{\"covet-post-image-wrap\": true, \"carousel\": this.item.carousel_media && this.item.carousel_media.length > 0}}>\n {this.renderImageElements()}\n </div>\n <div class=\"covet-post-description\">\n <p class=\"covet-post-text\"><b>@{this.item.username}</b>&nbsp;{this.item.caption}</p>\n </div>\n </Host>\n );\n }\n\n}\n"]}
1
+ {"version":3,"file":"covet-pics-post.js","sourceRoot":"","sources":["../../../src/components/covet-pics-post/covet-pics-post.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, State, h, Host } from \"@stencil/core\";\nimport { BASE_API_URLS } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-post\",\n styleUrl: \"covet-pics-post.scss\",\n shadow: true\n })\n\nexport class CovetPicsPost {\n @Element() el: HTMLCovetPicsPostElement;\n\n /**\n * post ID\n */\n @Prop() postId: number;\n \n /**\n * App environment: shows which API base URL has to be used\n */\n @Prop() environment: string;\n\n @State() item = null;\n\n @State() fetchingError: string = null;\n\n componentWillLoad() {\n this.loadData();\n }\n\n private async loadData() {\n let env = \"production\";\n if (typeof this.environment === \"string\" && Object.keys(BASE_API_URLS).includes(this.environment)) {\n env = this.environment;\n }\n const baseUrl = BASE_API_URLS[env];\n const url = `${baseUrl}/api/v1/post/${this.postId}`;\n \n\n try {\n const json = await fetch(url);\n this.item = await json.json();\n } catch (err) {\n this.fetchingError = \"The Covet.pics post has not loaded because the post not exist. Please verify that the correct POST ID is being used\";\n }\n }\n\n private renderImageElements() {\n const { alt_tag, carousel_media, data_type, cover_images, video } = this.item;\n\n if (carousel_media && carousel_media.length > 0) {\n return <covet-pics-popup-slider item={this.item}></covet-pics-popup-slider>;\n } \n\n if (data_type === \"image\" || data_type === \"carousel\") {\n return (<img class=\"covet-post-image\" src={this.item.images.high_resolution} alt={this.item.caption} />);\n }\n if (data_type === \"video\") {\n return ((\n <div class=\"post-video-element\" onClick={this.playPauseVideoClickHandler} onKeyDown={this.playPauseVideoKeyboardClickHandler} tabindex=\"0\">\n <video playsinline loop poster={cover_images.high_resolution} key={video} title={alt_tag}> \n <source src={video} type=\"video/mp4\" />\n </video>\n </div>\n ));\n }\n return null;\n }\n\n private playPauseVideoKeyboardClickHandler = (event: KeyboardEvent) => {\n if (event.keyCode === 13 || event.keyCode === 32) {\n return this.playPauseVideoClickHandler(event);\n }\n }\n\n private playPauseVideoClickHandler = (event: UIEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const videoWrapper = event.currentTarget as HTMLVideoElement;\n\n return videoWrapper.classList.contains(\"playing\") ? this.pauseVideo(videoWrapper) : this.playVideo(videoWrapper);\n }\n\n private pauseVideo(videoWrapperEl: HTMLElement) {\n const videoEl = videoWrapperEl.querySelector(\"video\") as HTMLVideoElement;\n\n videoEl.pause();\n videoWrapperEl.classList.remove(\"playing\");\n }\n\n private playVideo(videoWrapperEl: HTMLElement) {\n const videoEl = videoWrapperEl.querySelector(\"video\") as HTMLVideoElement;\n let playPromise = videoEl.play();\n\n if (playPromise !== null) {\n playPromise.catch(() => { videoEl.play(); });\n }\n videoWrapperEl.classList.add(\"playing\");\n }\n\n private renderError() {\n return (\n <Host>\n <p class=\"error-message\">{this.fetchingError}</p>\n </Host>\n );\n }\n\n render() {\n if (this.fetchingError !== null) return this.renderError();\n if (this.item === null) return null;\n\n const descriptionEmpty = (this.item.username === null || this.item.username === \"\") && (this.item.caption === null || this.item.caption === \"\");\n return (\n <Host>\n <div class={{\"covet-post\": true}}>\n <div class={{\"covet-post-image-wrap\": true, \"carousel\": this.item.carousel_media && this.item.carousel_media.length > 0}}>\n {this.renderImageElements()}\n </div>\n {!descriptionEmpty &&\n <div class=\"covet-post-description\">\n <p class=\"covet-post-text\"><b>@{this.item.username}</b>&nbsp;{this.item.caption}</p>\n </div>\n }\n </div>\n </Host>\n );\n }\n\n}\n"]}
package/dist/covet-pics-widget/covet-pics-widget.esm.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Copyright by Space Squirrel Ltd.
3
3
  */
4
- import{p as e,b as t}from"./p-cfb9e6a4.js";export{s as setNonce}from"./p-cfb9e6a4.js";import{g as i}from"./p-1d9dbfd4.js";var o=()=>{const t=import.meta.url;const i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};o().then((async e=>{await i();return t([["p-f2c89d08",[[0,"covet-pics-highlighted-page",{thumbnailUrl:[1,"thumbnail-url"],thumbnailAlt:[1,"thumbnail-alt"],ariaLabel:[1,"aria-label"],thumbnailLayout:[1,"thumbnail-layout"],videoUrl:[1,"video-url"],videoPoster:[1,"video-poster"],thumbnailCarouselImages:[16],productLinks:[16],productBaseImgAlt:[1,"product-base-img-alt"],reverseClass:[1,"reverse-class"],isMobile:[4,"is-mobile"],pageIndex:[2,"page-index"],caption:[1],rating:[2],createdTime:[1,"created-time"],userName:[1,"user-name"],mainSliderIndex:[2,"main-slider-index"],pageId:[2,"page-id"],appStore:[16],hideHotspots:[32],activeProductIndex:[32],hoverHotspot:[32]},[[0,"changeActiveHotspot","onChangeActiveHotspot"]]],[0,"covet-pics-highlighted-hotspots",{links:[16],activeHotspot:[2,"active-hotspot"],thumbnailUrl:[1,"thumbnail-url"],hoverHotspot:[2,"hover-hotspot"],isMobile:[4,"is-mobile"],productBaseImgAlt:[1,"product-base-img-alt"],pageId:[2,"page-id"],appStore:[16]},null,{thumbnailUrl:["refreshHotspot"],activeHotspot:["activeHotspotHandler"]}]]],["p-e85d3098",[[0,"covet-pics-crop-text",{text:[1],textClass:[1,"text-class"],textColor:[1,"text-color"],ratio:[16],cropCSS:[32]}]]],["p-b890554b",[[1,"covet-pics-star-rating",{rating:[2],ratingCount:[2,"rating-count"],starColor:[1,"star-color"],emptyStarColor:[1,"empty-star-color"],starBorderColor:[1,"star-border-color"],starBorderWidth:[2,"star-border-width"],starSize:[2,"star-size"],spaceStars:[2,"space-stars"],spaceStarsText:[2,"space-stars-text"],showLabel:[4,"show-label"],label:[1]}]]],["p-eed6d73f",[[1,"covet-pics-direct-buy",{product:[8],moneyFormat:[1,"money-format"],appStore:[16],selectedOptions:[32],settings:[32]}],[0,"covet-pics-hotspots",{links:[16],backgroundColor:[1,"background-color"],textColor:[1,"text-color"],showNumbers:[4,"show-numbers"]},[[0,"linkInactivate","linkInactivateHandler"],[0,"linkActivate","linkActivateHandler"]]],[0,"covet-pics-popup-links",{links:[16],greyBorderClass:[1,"grey-border-class"],itemCreatedTime:[1,"item-created-time"],appStore:[16],settings:[32]}],[0,"covet-pics-popup-review",{rating:[2],caption:[1],username:[1],itemType:[1,"item-type"],verified:[4],createdTime:[1,"created-time"],reviewCSS:[32]},null,{caption:["watchPropHandler"]}],[0,"covet-pics-popup-shared-links",{item:[16],galleryEmbedId:[2,"gallery-embed-id"],showShareLink:[32],copyLinkCopied:[32]}],[0,"covet-pics-popup-slider",{item:[16],getSwiperState:[64]}]]],["p-cdf277bc",[[0,"covet-pics-gallery-header",{rating:[2],productTitle:[1,"product-title"],breakdown:[16],appStore:[16],showBreakdownDropdown:[32],showSortDropdown:[32],isDesktopScreen:[32]}],[1,"covet-pics-popup",{appStore:[16],item:[32],product:[32],directBuyIsOpen:[32],popupTabIndex:[32],settings:[32],isPreviousEnable:[32],openPopup:[64],closePopup:[64]},[[4,"addToCart:covetPics","addToCartHandler"],[16,"productLinkClicked","productLinkClickedHandler"]],{item:["itemChangedHandler"]}],[0,"covet-pics-gallery-item",{altTag:[1,"alt-tag"],highlighted:[4],imageUrl:[1,"image-url"],rating:[2],itemWidth:[2,"item-width"],userName:[1,"user-name"],createdTime:[1,"created-time"],caption:[1],itemType:[1,"item-type"],imageHighResolutionUrl:[1,"image-high-resolution-url"],imageResponsiveSizes:[1,"image-responsive-sizes"],itemId:[1,"item-id"],itemSource:[1,"item-source"],links:[16],url:[1],videoUrl:[1,"video-url"],itemIndex:[2,"item-index"],itemSize:[1,"item-size"],appStore:[16],tabIndex:[32],sliderIndex:[32],showImageAsVideoPoster:[32]},[[10,"updateUploadWidgetCover","updateUploadWidgetCoverHandler"]],{sliderIndex:["autoPlayVideos"]}],[0,"covet-pics-gallery-item-detail",{altTag:[1,"alt-tag"],highlighted:[4],verified:[4],imageUrl:[1,"image-url"],imageHighResolutionUrl:[1,"image-high-resolution-url"],imageResponsiveSizes:[1,"image-responsive-sizes"],videoUrl:[1,"video-url"],itemId:[1,"item-id"],itemSource:[1,"item-source"],itemType:[1,"item-type"],links:[16],url:[1],rating:[2],userName:[1,"user-name"],caption:[1],createdTime:[1,"created-time"],itemIndex:[2,"item-index"],itemSize:[1,"item-size"],appStore:[16],tabIndex:[32],captionCSS:[32],reviewClass:[32],starOnlyClass:[32],highlightedClass:[32],sliderIndex:[32],showImageAsVideoPoster:[32]},[[10,"updateUploadWidgetCover","updateUploadWidgetCoverHandler"],[8,"elementResize","elementResizeHandler"]],{sliderIndex:["autoPlayVideos"]}],[1,"covet-pics-upload",{standalone:[4],appStore:[16],starRating:[32],isFormValid:[32],showFormWarning:[32],thumbnailLinks:[32],toShowLinks:[32],dropedImagesNumber:[32],isAnimating:[32],notificationMessage:[32],isNotificationActive:[32],widgetWidth:[32],uploadTabIndex:[32],openUpload:[64]}]]],["p-0ca89409",[[0,"covet-pics-gallery-grid",{items:[16],breakdown:[16],productTitle:[1,"product-title"],rating:[2],filtersEnabled:[4,"filters-enabled"],filters:[16],showLoadMore:[4,"show-load-more"],appStore:[16],sharedItemId:[1,"shared-item-id"],isLoading:[32],showSort:[32],isGridDisabled:[32],isDesktopScreen:[32],itemSize:[32]},[[0,"imageLoaded","imagesLoadedHandler"],[0,"itemClicked","itemClickedHandler"],[8,"previousPopupEvent","prevPopupHandler"],[8,"nextPopupEvent","nextPopupHandler"],[8,"elementResize","elementResizeHandler"]],{items:["itemsChangeHandler"]}],[0,"covet-pics-gallery-slider",{items:[16],sharedItemId:[1,"shared-item-id"],sliderStyle:[1,"slider-style"],appStore:[16],itemSize:[32]},[[0,"imageLoaded","imagesLoadedHandler"],[0,"itemClicked","itemClickedHandler"],[8,"previousPopupEvent","prevPopupHandler"],[8,"nextPopupEvent","nextPopupHandler"],[8,"elementResize","elementResizeHandler"]],{items:["itemsChangeHandler"]}],[0,"covet-pics-highlighted",{numberOfPages:[2,"number-of-pages"],items:[16],appStore:[16],productLinks:[32],mainSliderIndex:[32],mainSliderAnimatingSlides:[32],windowHeight:[32],isDesktopScreen:[32]}]]],["p-039f1854",[[1,"covet-pics-widget",{shop:[1],galleryEmbedId:[2,"gallery-embed-id"],shopifyProductId:[2,"shopify-product-id"],environment:[1],customSettings:[1,"custom-settings"],hideElements:[1,"hide-elements"],previewMode:[4,"preview-mode"],photoRequestId:[2,"photo-request-id"],isLoading:[32],minNumberOfPhotos:[32],items:[32],appStore:[32],fetchingError:[32],updateUploadWidgetCoverPreview:[64],updatePreviewSettings:[64]},[[0,"sortUpdated","sortUpdatedHandler"],[0,"filtersUpdated","filtersUpdatedHandler"],[0,"nextPage","nextPageHandler"]]]]],["p-05fd71bc",[[1,"covet-pics-post",{postId:[2,"post-id"],environment:[1],item:[32],fetchingError:[32]}]]],["p-9cbbe911",[[0,"covet-pics-gallery-item-caption",{caption:[1],captionClass:[1,"caption-class"],itemStyle:[1,"item-style"],layoutType:[1,"layout-type"],reviewCSS:[32]},[[16,"sliderInit:covetPics","initSize"],[16,"sliderUpdate:covetPics","updateSize"]]]]]],e)}));
4
+ import{p as e,b as t}from"./p-cfb9e6a4.js";export{s as setNonce}from"./p-cfb9e6a4.js";import{g as i}from"./p-1d9dbfd4.js";var o=()=>{const t=import.meta.url;const i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};o().then((async e=>{await i();return t([["p-f2c89d08",[[0,"covet-pics-highlighted-page",{thumbnailUrl:[1,"thumbnail-url"],thumbnailAlt:[1,"thumbnail-alt"],ariaLabel:[1,"aria-label"],thumbnailLayout:[1,"thumbnail-layout"],videoUrl:[1,"video-url"],videoPoster:[1,"video-poster"],thumbnailCarouselImages:[16],productLinks:[16],productBaseImgAlt:[1,"product-base-img-alt"],reverseClass:[1,"reverse-class"],isMobile:[4,"is-mobile"],pageIndex:[2,"page-index"],caption:[1],rating:[2],createdTime:[1,"created-time"],userName:[1,"user-name"],mainSliderIndex:[2,"main-slider-index"],pageId:[2,"page-id"],appStore:[16],hideHotspots:[32],activeProductIndex:[32],hoverHotspot:[32]},[[0,"changeActiveHotspot","onChangeActiveHotspot"]]],[0,"covet-pics-highlighted-hotspots",{links:[16],activeHotspot:[2,"active-hotspot"],thumbnailUrl:[1,"thumbnail-url"],hoverHotspot:[2,"hover-hotspot"],isMobile:[4,"is-mobile"],productBaseImgAlt:[1,"product-base-img-alt"],pageId:[2,"page-id"],appStore:[16]},null,{thumbnailUrl:["refreshHotspot"],activeHotspot:["activeHotspotHandler"]}]]],["p-e85d3098",[[0,"covet-pics-crop-text",{text:[1],textClass:[1,"text-class"],textColor:[1,"text-color"],ratio:[16],cropCSS:[32]}]]],["p-b890554b",[[1,"covet-pics-star-rating",{rating:[2],ratingCount:[2,"rating-count"],starColor:[1,"star-color"],emptyStarColor:[1,"empty-star-color"],starBorderColor:[1,"star-border-color"],starBorderWidth:[2,"star-border-width"],starSize:[2,"star-size"],spaceStars:[2,"space-stars"],spaceStarsText:[2,"space-stars-text"],showLabel:[4,"show-label"],label:[1]}]]],["p-eed6d73f",[[1,"covet-pics-direct-buy",{product:[8],moneyFormat:[1,"money-format"],appStore:[16],selectedOptions:[32],settings:[32]}],[0,"covet-pics-hotspots",{links:[16],backgroundColor:[1,"background-color"],textColor:[1,"text-color"],showNumbers:[4,"show-numbers"]},[[0,"linkInactivate","linkInactivateHandler"],[0,"linkActivate","linkActivateHandler"]]],[0,"covet-pics-popup-links",{links:[16],greyBorderClass:[1,"grey-border-class"],itemCreatedTime:[1,"item-created-time"],appStore:[16],settings:[32]}],[0,"covet-pics-popup-review",{rating:[2],caption:[1],username:[1],itemType:[1,"item-type"],verified:[4],createdTime:[1,"created-time"],reviewCSS:[32]},null,{caption:["watchPropHandler"]}],[0,"covet-pics-popup-shared-links",{item:[16],galleryEmbedId:[2,"gallery-embed-id"],showShareLink:[32],copyLinkCopied:[32]}],[0,"covet-pics-popup-slider",{item:[16],getSwiperState:[64]}]]],["p-cdf277bc",[[0,"covet-pics-gallery-header",{rating:[2],productTitle:[1,"product-title"],breakdown:[16],appStore:[16],showBreakdownDropdown:[32],showSortDropdown:[32],isDesktopScreen:[32]}],[1,"covet-pics-popup",{appStore:[16],item:[32],product:[32],directBuyIsOpen:[32],popupTabIndex:[32],settings:[32],isPreviousEnable:[32],openPopup:[64],closePopup:[64]},[[4,"addToCart:covetPics","addToCartHandler"],[16,"productLinkClicked","productLinkClickedHandler"]],{item:["itemChangedHandler"]}],[0,"covet-pics-gallery-item",{altTag:[1,"alt-tag"],highlighted:[4],imageUrl:[1,"image-url"],rating:[2],itemWidth:[2,"item-width"],userName:[1,"user-name"],createdTime:[1,"created-time"],caption:[1],itemType:[1,"item-type"],imageHighResolutionUrl:[1,"image-high-resolution-url"],imageResponsiveSizes:[1,"image-responsive-sizes"],itemId:[1,"item-id"],itemSource:[1,"item-source"],links:[16],url:[1],videoUrl:[1,"video-url"],itemIndex:[2,"item-index"],itemSize:[1,"item-size"],appStore:[16],tabIndex:[32],sliderIndex:[32],showImageAsVideoPoster:[32]},[[10,"updateUploadWidgetCover","updateUploadWidgetCoverHandler"]],{sliderIndex:["autoPlayVideos"]}],[0,"covet-pics-gallery-item-detail",{altTag:[1,"alt-tag"],highlighted:[4],verified:[4],imageUrl:[1,"image-url"],imageHighResolutionUrl:[1,"image-high-resolution-url"],imageResponsiveSizes:[1,"image-responsive-sizes"],videoUrl:[1,"video-url"],itemId:[1,"item-id"],itemSource:[1,"item-source"],itemType:[1,"item-type"],links:[16],url:[1],rating:[2],userName:[1,"user-name"],caption:[1],createdTime:[1,"created-time"],itemIndex:[2,"item-index"],itemSize:[1,"item-size"],appStore:[16],tabIndex:[32],captionCSS:[32],reviewClass:[32],starOnlyClass:[32],highlightedClass:[32],sliderIndex:[32],showImageAsVideoPoster:[32]},[[10,"updateUploadWidgetCover","updateUploadWidgetCoverHandler"],[8,"elementResize","elementResizeHandler"]],{sliderIndex:["autoPlayVideos"]}],[1,"covet-pics-upload",{standalone:[4],appStore:[16],starRating:[32],isFormValid:[32],showFormWarning:[32],thumbnailLinks:[32],toShowLinks:[32],dropedImagesNumber:[32],isAnimating:[32],notificationMessage:[32],isNotificationActive:[32],widgetWidth:[32],uploadTabIndex:[32],openUpload:[64]}]]],["p-0ca89409",[[0,"covet-pics-gallery-grid",{items:[16],breakdown:[16],productTitle:[1,"product-title"],rating:[2],filtersEnabled:[4,"filters-enabled"],filters:[16],showLoadMore:[4,"show-load-more"],appStore:[16],sharedItemId:[1,"shared-item-id"],isLoading:[32],showSort:[32],isGridDisabled:[32],isDesktopScreen:[32],itemSize:[32]},[[0,"imageLoaded","imagesLoadedHandler"],[0,"itemClicked","itemClickedHandler"],[8,"previousPopupEvent","prevPopupHandler"],[8,"nextPopupEvent","nextPopupHandler"],[8,"elementResize","elementResizeHandler"]],{items:["itemsChangeHandler"]}],[0,"covet-pics-gallery-slider",{items:[16],sharedItemId:[1,"shared-item-id"],sliderStyle:[1,"slider-style"],appStore:[16],itemSize:[32]},[[0,"imageLoaded","imagesLoadedHandler"],[0,"itemClicked","itemClickedHandler"],[8,"previousPopupEvent","prevPopupHandler"],[8,"nextPopupEvent","nextPopupHandler"],[8,"elementResize","elementResizeHandler"]],{items:["itemsChangeHandler"]}],[0,"covet-pics-highlighted",{numberOfPages:[2,"number-of-pages"],items:[16],appStore:[16],productLinks:[32],mainSliderIndex:[32],mainSliderAnimatingSlides:[32],windowHeight:[32],isDesktopScreen:[32]}]]],["p-039f1854",[[1,"covet-pics-widget",{shop:[1],galleryEmbedId:[2,"gallery-embed-id"],shopifyProductId:[2,"shopify-product-id"],environment:[1],customSettings:[1,"custom-settings"],hideElements:[1,"hide-elements"],previewMode:[4,"preview-mode"],photoRequestId:[2,"photo-request-id"],isLoading:[32],minNumberOfPhotos:[32],items:[32],appStore:[32],fetchingError:[32],updateUploadWidgetCoverPreview:[64],updatePreviewSettings:[64]},[[0,"sortUpdated","sortUpdatedHandler"],[0,"filtersUpdated","filtersUpdatedHandler"],[0,"nextPage","nextPageHandler"]]]]],["p-7dc7658c",[[1,"covet-pics-post",{postId:[2,"post-id"],environment:[1],item:[32],fetchingError:[32]}]]],["p-9cbbe911",[[0,"covet-pics-gallery-item-caption",{caption:[1],captionClass:[1,"caption-class"],itemStyle:[1,"item-style"],layoutType:[1,"layout-type"],reviewCSS:[32]},[[16,"sliderInit:covetPics","initSize"],[16,"sliderUpdate:covetPics","updateSize"]]]]]],e)}));
5
5
  //# sourceMappingURL=covet-pics-widget.esm.js.map