@covet-pics/covet-pics-widget 0.155.2 → 0.155.4

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 (35) hide show
  1. package/dist/cjs/covet-pics-crop-text.cjs.entry.js +5 -5
  2. package/dist/cjs/covet-pics-crop-text.cjs.entry.js.map +1 -1
  3. package/dist/cjs/covet-pics-star-rating.cjs.entry.js +9 -9
  4. package/dist/cjs/covet-pics-star-rating.cjs.entry.js.map +1 -1
  5. package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.css +3 -3
  6. package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.js +4 -4
  7. package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.js.map +1 -1
  8. package/dist/collection/components/covet-pics-star-rating/covet-pics-star-rating.css +12 -12
  9. package/dist/collection/components/covet-pics-star-rating/covet-pics-star-rating.js +8 -8
  10. package/dist/collection/components/covet-pics-star-rating/covet-pics-star-rating.js.map +1 -1
  11. package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
  12. package/dist/covet-pics-widget/p-2e286cc7.system.entry.js +5 -0
  13. package/dist/covet-pics-widget/p-2e286cc7.system.entry.js.map +1 -0
  14. package/dist/covet-pics-widget/p-66409a38.entry.js +5 -0
  15. package/dist/covet-pics-widget/p-66409a38.entry.js.map +1 -0
  16. package/dist/covet-pics-widget/p-7884e86b.system.js +1 -1
  17. package/dist/covet-pics-widget/{p-32f6f7e0.system.entry.js → p-81d20299.system.entry.js} +2 -2
  18. package/dist/covet-pics-widget/p-81d20299.system.entry.js.map +1 -0
  19. package/dist/covet-pics-widget/{p-26698e63.entry.js → p-ee828bff.entry.js} +2 -2
  20. package/dist/covet-pics-widget/p-ee828bff.entry.js.map +1 -0
  21. package/dist/esm/covet-pics-crop-text.entry.js +5 -5
  22. package/dist/esm/covet-pics-crop-text.entry.js.map +1 -1
  23. package/dist/esm/covet-pics-star-rating.entry.js +9 -9
  24. package/dist/esm/covet-pics-star-rating.entry.js.map +1 -1
  25. package/dist/esm-es5/covet-pics-crop-text.entry.js +1 -1
  26. package/dist/esm-es5/covet-pics-crop-text.entry.js.map +1 -1
  27. package/dist/esm-es5/covet-pics-star-rating.entry.js +1 -1
  28. package/dist/esm-es5/covet-pics-star-rating.entry.js.map +1 -1
  29. package/package.json +1 -1
  30. package/dist/covet-pics-widget/p-26698e63.entry.js.map +0 -1
  31. package/dist/covet-pics-widget/p-32f6f7e0.system.entry.js.map +0 -1
  32. package/dist/covet-pics-widget/p-400bcc16.entry.js +0 -5
  33. package/dist/covet-pics-widget/p-400bcc16.entry.js.map +0 -1
  34. package/dist/covet-pics-widget/p-c039f946.system.entry.js +0 -5
  35. package/dist/covet-pics-widget/p-c039f946.system.entry.js.map +0 -1
package/dist/cjs/covet-pics-crop-text.cjs.entry.js CHANGED
@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
8
8
  const index = require('./index-9d75b529.js');
9
9
  const utils = require('./utils-cd98b07f.js');
10
10
 
11
- const covetPicsCropTextCss = "covet-pics-crop-text {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: none;\n flex: none;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n position: relative;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n}\ncovet-pics-crop-text.text-review {\n height: 100%;\n max-height: 100%;\n}\ncovet-pics-crop-text.collage:before {\n content: \"\";\n display: inline-block;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n opacity: 0;\n}\ncovet-pics-crop-text.basic-1 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-1:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-1 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-1.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-1.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-2 {\n background-color: #F7F7F7;\n position: absolute;\n left: 0;\n top: 0;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-xs {\n padding: 12px;\n }\n}\ncovet-pics-crop-text.basic-2.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-sm {\n padding: 24px 16px;\n }\n}\ncovet-pics-crop-text.basic-2.size-sm.verified {\n padding: 33px 16px 16px 16px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-2 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-2.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-2.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-3 {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n background-color: #F7F7F7;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-3 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-3.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-3.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-4 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-4:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-xs {\n padding: 12px;\n }\n}\ncovet-pics-crop-text.basic-4.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-sm {\n padding: 24px 16px;\n }\n}\ncovet-pics-crop-text.basic-4.size-sm.verified {\n padding: 33px 16px 16px 16px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-4 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-4.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-4.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-5 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-5:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: #000000;\n}\ncovet-pics-crop-text.basic-5.size-xs {\n padding: 12px;\n}\ncovet-pics-crop-text.basic-5.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\ncovet-pics-crop-text.basic-5.size-sm {\n padding: 24px 16px;\n}\ncovet-pics-crop-text.basic-5.size-sm.verified {\n padding: 35px 16px 16px 16px;\n}\ncovet-pics-crop-text.basic-5.size-md {\n padding: 32px;\n}\ncovet-pics-crop-text.basic-5.size-md.verified {\n padding: 38px 32px 32px 32px;\n}\ncovet-pics-crop-text.basic-5.size-lg {\n padding: 64px;\n}\ncovet-pics-crop-text.basic-6 {\n position: absolute;\n left: 0;\n top: 0;\n background-color: #151515;\n}\ncovet-pics-crop-text.basic-6:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-6 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-6.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-6.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text .crop-text {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: auto;\n text-align: center;\n width: 100%;\n color: var(--covet-pics-crop-text-color);\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-pics-crop-text-font-size);\n line-height: 1.4;\n -webkit-line-clamp: var(--covet-pics-crop-text-max-lines);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}";
11
+ const covetPicsCropTextCss = "covet-pics-crop-text {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: none;\n flex: none;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n position: relative;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n}\ncovet-pics-crop-text.text-review {\n height: 100%;\n max-height: 100%;\n}\ncovet-pics-crop-text.collage:before {\n content: \"\";\n display: inline-block;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n opacity: 0;\n}\ncovet-pics-crop-text.basic-1 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-1:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-1 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-1.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-1.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-2 {\n background-color: #F7F7F7;\n position: absolute;\n left: 0;\n top: 0;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-xs {\n padding: 12px;\n }\n}\ncovet-pics-crop-text.basic-2.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-sm {\n padding: 24px 16px;\n }\n}\ncovet-pics-crop-text.basic-2.size-sm.verified {\n padding: 33px 16px 16px 16px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-2 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-2.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-2.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-3 {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n background-color: #F7F7F7;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-3 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-3.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-3.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-4 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-4:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-xs {\n padding: 12px;\n }\n}\ncovet-pics-crop-text.basic-4.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-sm {\n padding: 24px 16px;\n }\n}\ncovet-pics-crop-text.basic-4.size-sm.verified {\n padding: 33px 16px 16px 16px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-4 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-4.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-4.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-5 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-5:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: #000000;\n}\ncovet-pics-crop-text.basic-5.size-xs {\n padding: 12px;\n}\ncovet-pics-crop-text.basic-5.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\ncovet-pics-crop-text.basic-5.size-sm {\n padding: 24px 16px;\n}\ncovet-pics-crop-text.basic-5.size-sm.verified {\n padding: 35px 16px 16px 16px;\n}\ncovet-pics-crop-text.basic-5.size-md {\n padding: 32px;\n}\ncovet-pics-crop-text.basic-5.size-md.verified {\n padding: 38px 32px 32px 32px;\n}\ncovet-pics-crop-text.basic-5.size-lg {\n padding: 64px;\n}\ncovet-pics-crop-text.basic-6 {\n position: absolute;\n left: 0;\n top: 0;\n background-color: #151515;\n}\ncovet-pics-crop-text.basic-6:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-6 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-6.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-6.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text .crop-text {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: auto;\n text-align: center;\n width: 100%;\n color: var(--covet-crop-text-color);\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-crop-text-font-size);\n line-height: 1.4;\n -webkit-line-clamp: var(--covet-crop-text-max-lines);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}";
12
12
  const CovetPicsCropTextStyle0 = covetPicsCropTextCss;
13
13
 
14
14
  const CovetPicsCropText = class {
@@ -78,13 +78,13 @@ const CovetPicsCropText = class {
78
78
  };
79
79
  const { fontSize, maxLines } = calculateMaxLines();
80
80
  return this.cropCSS = {
81
- "--covet-pics-crop-text-max-lines": `${maxLines}`,
82
- "--covet-pics-crop-text-font-size": `${fontSize}px`,
83
- "--covet-pics-crop-text-color": `${this.textColor}`,
81
+ "--covet-crop-text-max-lines": `${maxLines}`,
82
+ "--covet-crop-text-font-size": `${fontSize}px`,
83
+ "--covet-crop-text-color": `${this.textColor}`,
84
84
  };
85
85
  }
86
86
  render() {
87
- return (index.h(index.Host, { key: 'f2dc0d9c67513b8a31975298a9779acb2e276a7a', style: this.cropCSS }, index.h("p", { key: '6f04f0699efe2124e66c6efb401f01a5360e597e', class: `crop-text ${this.textClass}`, innerHTML: this.text })));
87
+ return (index.h(index.Host, { key: '267a53f8c90cb3c1fc0bf646745538a9f6d50d4b', style: this.cropCSS }, index.h("p", { key: '69ae4dc6cfb2116c4b4d1bcdf2f25750b8993c36', class: `crop-text ${this.textClass}`, innerHTML: this.text })));
88
88
  }
89
89
  get el() { return index.getElement(this); }
90
90
  };
package/dist/cjs/covet-pics-crop-text.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"covet-pics-crop-text.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,2hrBAA2hrB,CAAC;AACzjrB,gCAAe,oBAAoB;;MCMtB,iBAAiB;;;oBAML,EAAE;yBAKG,EAAE;yBAKF,SAAS;qBAKrB;YACd,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;YACtB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;YACtB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;SACvB;uBAE8C,EAAE;;IAKjD,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;YACvC,IAAI,IAAI,CAAC,QAAQ,KAAKA,aAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,IAAI,CAAC,OAAO,KAAKA,aAAO,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE;gBAC9F,IAAI,CAAC,QAAQ,GAAGA,aAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;gBAC3C,IAAI,CAAC,OAAO,GAAGA,aAAO,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;gBACzC,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;SACF,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAErC,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;IAEO,YAAY;QAClB,MAAM,EAAE,GAAGC,cAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;QAC5C,MAAM,EAAE,GAAGA,cAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,gBAAgB,CAAC,CAAC;QAE/C,MAAM,QAAQ,GAAGD,aAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;QAEtD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;QAClE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO;QAElD,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;QAClD,IAAI,gBAAgB,GAAGC,cAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACvD,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;QAEhF,MAAM,iBAAiB,GAAG;YACxB,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAClC,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACnC,IAAI,YAAY,GAAG,IAAI,CAAC,KAAK,CAACD,aAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,CAAC;YAC5E,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;;gBAE1C,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC/B,IAAI,QAAQ,GAAG,gBAAgB,GAAG,QAAQ,EAAE;wBAC1C,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC9B,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;8BAClD,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC;8BACvC,CAAC,CAAC;qBACP;oBACD,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBAChC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;iBAC/B;gBAED,IAAIA,aAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,QAAQ,IAAI,YAAY,IAAI,QAAQ,EAAE;oBACpE,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBAChC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;iBAC/B;gBAED,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;gBAClC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;gBACtD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;gBACnC,gBAAgB,GAAGC,cAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;gBACnD,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;gBAChF,YAAY,GAAG,IAAI,CAAC,KAAK,CAACD,aAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,CAAC;aACzE;SACF,CAAC;QAEF,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,iBAAiB,EAAE,CAAC;QAEnD,OAAO,IAAI,CAAC,OAAO,GAAG;YACpB,kCAAkC,EAAE,GAAG,QAAQ,EAAE;YACjD,kCAAkC,EAAE,GAAG,QAAQ,IAAI;YACnD,8BAA8B,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE;SACpD,CAAC;KACH;IAED,MAAM;QACJ,QACEE,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IACvBD,gEAAG,KAAK,EAAE,aAAa,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,GAAM,CAC9D,EACP;KACH;;;;;;;","names":["getSize","getStyle","h","Host"],"sources":["src/components/covet-pics-crop-text/covet-pics-crop-text.scss?tag=covet-pics-crop-text","src/components/covet-pics-crop-text/covet-pics-crop-text.tsx"],"sourcesContent":["@import \"../covet-pics-gallery-item-detail/covet-pics-gallery-item-mixins.scss\";\n\n$black: #000000;\n$black2: #151515;\n$white: #FFFFFF;\n$gray: rgba($black, 0.1);\n$gray3: rgba($white, 0.1);\n\ncovet-pics-crop-text {\n display: flex;\n flex: none;\n justify-content: center;\n align-items: center;\n position: relative;\n flex-grow: 1;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n &.text-review {\n height: 100%;\n max-height: 100%;\n }\n &.collage {\n &:before {\n content: \"\";\n display: inline-block;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n opacity: 0;\n }\n }\n\n &.basic-1 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray;\n }\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n } \n\n &.basic-1.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 33px 16px 16px 16px; \n } \n }\n\n &.basic-2 {\n background-color: #F7F7F7;\n position: absolute;\n left: 0;\n top: 0;\n @include size-xs { \n padding: 12px; \n } \n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n &.size-sm.verified { \n padding: 33px 16px 16px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n }\n }\n &.basic-2.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n }\n\n &.basic-3 {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n background-color: #F7F7F7;\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-3.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n } \n }\n\n &.basic-4 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray;\n }\n @include size-xs { \n padding: 12px; \n }\n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n &.size-sm.verified { \n padding: 33px 16px 16px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-4.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n }\n\n &.basic-5 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $black;\n }\n &.size-xs { \n padding: 12px; \n } \n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n &.size-sm { \n padding: 24px 16px; \n }\n &.size-sm.verified { \n padding: 35px 16px 16px 16px; \n } \n &.size-md { \n padding: 32px; \n }\n &.size-md.verified { \n padding: 38px 32px 32px 32px; \n } \n &.size-lg { \n padding: 64px; \n } \n }\n\n &.basic-6 {\n position: absolute;\n left: 0;\n top: 0;\n background-color: $black2;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray3;\n }\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-6.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n } \n\n .crop-text {\n position: absolute;\n box-sizing: border-box;\n margin: auto;\n text-align: center;\n width: 100%;\n color: var(--covet-pics-crop-text-color);\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-pics-crop-text-font-size);\n line-height: 1.4;\n -webkit-line-clamp: var(--covet-pics-crop-text-max-lines);\n \n &.basic-1 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n }\n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px; \n } \n }\n \n &.basic-2 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px; \n } \n }\n \n &.basic-3 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-4 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-5 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-6 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from \"@stencil/core\";\nimport { getSize, getStyle } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-crop-text\",\n styleUrl: \"covet-pics-crop-text.scss\"\n})\nexport class CovetPicsCropText {\n @Element() el: HTMLCovetPicsCropTextElement;\n\n /**\n * text\n */\n @Prop() text: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textClass: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textColor: string = \"#000000\";\n \n /**\n * ratio (font-size / max-lines)\n */\n @Prop() ratio = [\n { size: 48, lines: 2 },\n { size: 26, lines: 5 },\n { size: 16, lines: 8 }\n ];\n\n @State() cropCSS: { [key: string]: string; } = {}; \n private resizeObserver: ResizeObserver;\n private elHeight: number;\n private elWidth: number;\n\n componentWillLoad() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.elHeight !== getSize(this.el, \"height\") || this.elWidth !== getSize(this.el, \"width\")) {\n this.elHeight = getSize(this.el, \"height\");\n this.elWidth = getSize(this.el, \"width\");\n this.getReviewCSS();\n }\n });\n this.resizeObserver.observe(this.el);\n \n this.getReviewCSS();\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private getReviewCSS() {\n const PT = getStyle(this.el, \"padding-top\");\n const PB = getStyle(this.el, \"padding-bottom\");\n\n const elHeight = getSize(this.el, \"height\") - PT - PB;\n \n const textEl = this.el.querySelector(\".crop-text\") as HTMLElement;\n if (this.text === null || textEl === null) return;\n\n textEl.style.fontSize = `${this.ratio[0].size}px`;\n let textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n\n const calculateMaxLines = () => {\n let fontSize = this.ratio[0].size;\n let maxLines = this.ratio[0].lines;\n let testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n for (let i = 0; i < this.ratio.length; i++) {\n // last\n if (i === this.ratio.length - 1) {\n if (maxLines * textElLineHeight > elHeight) {\n fontSize = this.ratio[i].size;\n maxLines = Math.floor(elHeight / textElLineHeight) > 0\n ? Math.floor(elHeight / textElLineHeight)\n : 1;\n }\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n if (getSize(textEl, \"height\") < elHeight && testMaxLines <= maxLines) {\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n fontSize = this.ratio[i + 1].size;\n textEl.style.fontSize = `${this.ratio[i + 1].size}px`;\n maxLines = this.ratio[i + 1].lines;\n textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n }\n };\n\n const { fontSize, maxLines } = calculateMaxLines();\n\n return this.cropCSS = {\n \"--covet-pics-crop-text-max-lines\": `${maxLines}`,\n \"--covet-pics-crop-text-font-size\": `${fontSize}px`,\n \"--covet-pics-crop-text-color\": `${this.textColor}`,\n };\n }\n\n render() {\n return (\n <Host style={this.cropCSS}>\n <p class={`crop-text ${this.textClass}`} innerHTML={this.text}></p>\n </Host>\n );\n }\n}"],"version":3}
1
+ {"file":"covet-pics-crop-text.entry.cjs.js","mappings":"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","names":["getSize","getStyle","h","Host"],"sources":["src/components/covet-pics-crop-text/covet-pics-crop-text.scss?tag=covet-pics-crop-text","src/components/covet-pics-crop-text/covet-pics-crop-text.tsx"],"sourcesContent":["@import \"../covet-pics-gallery-item-detail/covet-pics-gallery-item-mixins.scss\";\n\n$black: #000000;\n$black2: #151515;\n$white: #FFFFFF;\n$gray: rgba($black, 0.1);\n$gray3: rgba($white, 0.1);\n\ncovet-pics-crop-text {\n display: flex;\n flex: none;\n justify-content: center;\n align-items: center;\n position: relative;\n flex-grow: 1;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n &.text-review {\n height: 100%;\n max-height: 100%;\n }\n &.collage {\n &:before {\n content: \"\";\n display: inline-block;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n opacity: 0;\n }\n }\n\n &.basic-1 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray;\n }\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n } \n\n &.basic-1.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 33px 16px 16px 16px; \n } \n }\n\n &.basic-2 {\n background-color: #F7F7F7;\n position: absolute;\n left: 0;\n top: 0;\n @include size-xs { \n padding: 12px; \n } \n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n &.size-sm.verified { \n padding: 33px 16px 16px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n }\n }\n &.basic-2.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n }\n\n &.basic-3 {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n background-color: #F7F7F7;\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-3.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n } \n }\n\n &.basic-4 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray;\n }\n @include size-xs { \n padding: 12px; \n }\n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n &.size-sm.verified { \n padding: 33px 16px 16px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-4.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n }\n\n &.basic-5 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $black;\n }\n &.size-xs { \n padding: 12px; \n } \n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n &.size-sm { \n padding: 24px 16px; \n }\n &.size-sm.verified { \n padding: 35px 16px 16px 16px; \n } \n &.size-md { \n padding: 32px; \n }\n &.size-md.verified { \n padding: 38px 32px 32px 32px; \n } \n &.size-lg { \n padding: 64px; \n } \n }\n\n &.basic-6 {\n position: absolute;\n left: 0;\n top: 0;\n background-color: $black2;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray3;\n }\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-6.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n } \n\n .crop-text {\n position: absolute;\n box-sizing: border-box;\n margin: auto;\n text-align: center;\n width: 100%;\n color: var(--covet-crop-text-color);\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-crop-text-font-size);\n line-height: 1.4;\n -webkit-line-clamp: var(--covet-crop-text-max-lines);\n \n &.basic-1 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n }\n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px; \n } \n }\n \n &.basic-2 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px; \n } \n }\n \n &.basic-3 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-4 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-5 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-6 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from \"@stencil/core\";\nimport { getSize, getStyle } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-crop-text\",\n styleUrl: \"covet-pics-crop-text.scss\"\n })\nexport class CovetPicsCropText {\n @Element() el: HTMLCovetPicsCropTextElement;\n\n /**\n * text\n */\n @Prop() text: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textClass: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textColor: string = \"#000000\";\n \n /**\n * ratio (font-size / max-lines)\n */\n @Prop() ratio = [\n { size: 48, lines: 2 },\n { size: 26, lines: 5 },\n { size: 16, lines: 8 }\n ];\n\n @State() cropCSS: { [key: string]: string; } = {}; \n private resizeObserver: ResizeObserver;\n private elHeight: number;\n private elWidth: number;\n\n componentWillLoad() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.elHeight !== getSize(this.el, \"height\") || this.elWidth !== getSize(this.el, \"width\")) {\n this.elHeight = getSize(this.el, \"height\");\n this.elWidth = getSize(this.el, \"width\");\n this.getReviewCSS();\n }\n });\n this.resizeObserver.observe(this.el);\n \n this.getReviewCSS();\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private getReviewCSS() {\n const PT = getStyle(this.el, \"padding-top\");\n const PB = getStyle(this.el, \"padding-bottom\");\n\n const elHeight = getSize(this.el, \"height\") - PT - PB;\n \n const textEl = this.el.querySelector(\".crop-text\") as HTMLElement;\n if (this.text === null || textEl === null) return;\n\n textEl.style.fontSize = `${this.ratio[0].size}px`;\n let textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n\n const calculateMaxLines = () => {\n let fontSize = this.ratio[0].size;\n let maxLines = this.ratio[0].lines;\n let testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n for (let i = 0; i < this.ratio.length; i++) {\n // last\n if (i === this.ratio.length - 1) {\n if (maxLines * textElLineHeight > elHeight) {\n fontSize = this.ratio[i].size;\n maxLines = Math.floor(elHeight / textElLineHeight) > 0\n ? Math.floor(elHeight / textElLineHeight)\n : 1;\n }\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n if (getSize(textEl, \"height\") < elHeight && testMaxLines <= maxLines) {\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n fontSize = this.ratio[i + 1].size;\n textEl.style.fontSize = `${this.ratio[i + 1].size}px`;\n maxLines = this.ratio[i + 1].lines;\n textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n }\n };\n\n const { fontSize, maxLines } = calculateMaxLines();\n\n return this.cropCSS = {\n \"--covet-crop-text-max-lines\": `${maxLines}`,\n \"--covet-crop-text-font-size\": `${fontSize}px`,\n \"--covet-crop-text-color\": `${this.textColor}`,\n };\n }\n\n render() {\n return (\n <Host style={this.cropCSS}>\n <p class={`crop-text ${this.textClass}`} innerHTML={this.text}></p>\n </Host>\n );\n }\n}"],"version":3}
package/dist/cjs/covet-pics-star-rating.cjs.entry.js CHANGED
@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
8
8
  const index = require('./index-9d75b529.js');
9
9
  const utils = require('./utils-cd98b07f.js');
10
10
 
11
- const covetPicsStarRatingCss = ":host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:1.4}:host .icon-star{-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:var(--covet-pics-star-size);height:var(--covet-pics-star-size);margin-right:var(--covet-pics-star-space-stars)}:host .icon-star:nth-of-type(5){margin-right:var(--covet-pics-star-space-stars-text)}:host .icon-star.active .svg-star path{fill:var(--covet-pics-star-color);stroke:var(--covet-pics-star-border-color);stroke-width:var(--covet-pics-star-border-width)}:host .icon-star.active .half-star path{fill:var(--covet-pics-star-color)}:host .svg-star{width:100%;height:100%}:host .svg-star path{fill:var(--covet-pics-empty-star-color);stroke:var(--covet-pics-star-border-color);stroke-width:var(--covet-pics-star-border-width)}:host .half-star path{fill:var(--covet-pics-star-color)}";
11
+ const covetPicsStarRatingCss = ":host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:1.4}:host .icon-star{-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:var(--covet-star-size);height:var(--covet-star-size);margin-right:var(--covet-star-space-stars)}:host .icon-star:nth-of-type(5){margin-right:var(--covet-star-space-stars-text)}:host .icon-star.active .svg-star path{fill:var(--covet-star-color);stroke:var(--covet-star-border-color);stroke-width:var(--covet-star-border-width)}:host .icon-star.active .half-star path{fill:var(--covet-star-color)}:host .svg-star{width:100%;height:100%}:host .svg-star path{fill:var(--covet-empty-star-color);stroke:var(--covet-star-border-color);stroke-width:var(--covet-star-border-width)}:host .half-star path{fill:var(--covet-star-color)}";
12
12
  const CovetPicsStarRatingStyle0 = covetPicsStarRatingCss;
13
13
 
14
14
  const CovetPicsStarRating = class {
@@ -34,13 +34,13 @@ const CovetPicsStarRating = class {
34
34
  }
35
35
  setCSSVariables() {
36
36
  return {
37
- "--covet-pics-star-size": `${this.starSize}px`,
38
- "--covet-pics-star-space-stars": `${this.spaceStars}px`,
39
- "--covet-pics-star-space-stars-text": `${this.spaceStarsText}px`,
40
- "--covet-pics-star-color": `${this.starColor}`,
41
- "--covet-pics-empty-star-color": `${this.emptyStarColor}`,
42
- "--covet-pics-star-border-color": `${this.starBorderColor}`,
43
- "--covet-pics-star-border-width": `${this.starBorderWidth}`
37
+ "--covet-star-size": `${this.starSize}px`,
38
+ "--covet-star-space-stars": `${this.spaceStars}px`,
39
+ "--covet-star-space-stars-text": `${this.spaceStarsText}px`,
40
+ "--covet-star-color": `${this.starColor}`,
41
+ "--covet-empty-star-color": `${this.emptyStarColor}`,
42
+ "--covet-star-border-color": `${this.starBorderColor}`,
43
+ "--covet-star-border-width": `${this.starBorderWidth}`
44
44
  };
45
45
  }
46
46
  roundRating() {
@@ -60,7 +60,7 @@ const CovetPicsStarRating = class {
60
60
  return lebelUpdated;
61
61
  }
62
62
  render() {
63
- return (index.h(index.Host, { key: '29d77720ea0145a30d6adab9aa67f285485ad512', style: this.setCSSVariables(), role: "radiogroup", "aria-label": "star rating" }, this.renderStarRating(), this.showLabel && index.h("span", { key: '9d938e07b44611f0d104a9a3747a0ca74f186ef9', class: "star-rating-count" }, this.convertedLabel())));
63
+ return (index.h(index.Host, { key: '52b31268f8ecc7bd1c4a07603ed1ba06d0a2ac77', style: this.setCSSVariables(), role: "radiogroup", "aria-label": "star rating" }, this.renderStarRating(), this.showLabel && index.h("span", { key: 'e3e5c728b660ac44c7ad63c17ad36e05592799a7', class: "star-rating-count" }, this.convertedLabel())));
64
64
  }
65
65
  get el() { return index.getElement(this); }
66
66
  };
package/dist/cjs/covet-pics-star-rating.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"covet-pics-star-rating.entry.cjs.js","mappings":"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","names":["getRandomId","index","h","Host"],"sources":["src/components/covet-pics-star-rating/covet-pics-star-rating.scss?tag=covet-pics-star-rating&encapsulation=shadow","src/components/covet-pics-star-rating/covet-pics-star-rating.tsx"],"sourcesContent":["\r\n:host {\r\n display: inline-flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n line-height: 1.4;\r\n\r\n .icon-star {\r\n flex: none;\r\n display: flex;\r\n justify-content: center;\r\n width: var(--covet-pics-star-size);\r\n height: var(--covet-pics-star-size);\r\n margin-right: var(--covet-pics-star-space-stars);\r\n &:nth-of-type(5) { // TODO check this selector\r\n margin-right: var(--covet-pics-star-space-stars-text);\r\n } \r\n \r\n &.active {\r\n .svg-star\r\n path {\r\n fill: var(--covet-pics-star-color);\r\n stroke: var(--covet-pics-star-border-color);\r\n stroke-width: var(--covet-pics-star-border-width);\r\n }\r\n .half-star {\r\n path {\r\n fill: var(--covet-pics-star-color);\r\n }\r\n } \r\n }\r\n }\r\n\r\n .svg-star {\r\n width: 100%;\r\n height: 100%;\r\n path {\r\n fill: var(--covet-pics-empty-star-color);\r\n stroke: var(--covet-pics-star-border-color);\r\n stroke-width: var(--covet-pics-star-border-width)\r\n }\r\n }\r\n .half-star {\r\n path {\r\n fill: var(--covet-pics-star-color);\r\n }\r\n }\r\n\r\n}\r\n","import { Component, Element, Prop, h, Host } from \"@stencil/core\";\r\nimport { getRandomId } from \"../../utils/utils\";\r\n\r\n@Component({\r\n tag: \"covet-pics-star-rating\",\r\n styleUrl: \"covet-pics-star-rating.scss\",\r\n shadow: true\r\n})\r\n\r\nexport class CovetPicsStarRating {\r\n @Element() el: HTMLCovetPicsStarRatingElement;\r\n\r\n /**\r\n * Rating (float from 1-5)\r\n */\r\n @Prop() rating: number;\r\n\r\n /**\r\n * Rating count\r\n */\r\n @Prop() ratingCount: number=0;\r\n\r\n /**\r\n * Color of star\r\n */\r\n @Prop() starColor: string = \"#fec500\";\r\n\r\n /**\r\n * Color of empty star\r\n */\r\n @Prop() emptyStarColor: string = \"#e5e5e5\";\r\n\r\n /**\r\n * Color of star border\r\n */\r\n @Prop() starBorderColor: string = \"#000000\";\r\n\r\n /**\r\n * Width of star border\r\n */\r\n @Prop() starBorderWidth: number = 0;\r\n\r\n /**\r\n * Width/height of star in px.\r\n */\r\n @Prop() starSize: number = 20;\r\n \r\n /**\r\n * Space (margin) above in px\r\n */\r\n @Prop() spaceStars: number = 0;\r\n\r\n /**\r\n * Space (margin) below in px\r\n */\r\n @Prop() spaceStarsText: number = 0;\r\n\r\n /**\r\n * show Label or not\r\n */\r\n @Prop() showLabel: boolean = true;\r\n\r\n /**\r\n * Label next to star rating\r\n * available dynamic variables: %RATING% %COUNT%\r\n */\r\n @Prop() label: string = \"(%RATING%)\";\r\n\r\n private renderStarRating() {\r\n const starsArray = [1, 2, 3, 4, 5];\r\n const halfStar = Math.round(this.roundRating());\r\n const maskId = getRandomId();\r\n return (\r\n starsArray.map((el,index) =>\r\n <span class={`icon-star ${el <= this.roundRating() ? \"active\" : \"\"}`} role=\"radio\" aria-checked={`${el <= this.rating}`} aria-label={`star ${el}/${starsArray.length}`}>\r\n <svg class=\"svg-star\" viewBox=\"0 0 110 110\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"presentation\">\r\n <path transform=\"translate(13,13)\" d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n <mask id={`mask-${index}-${maskId}`} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"45\" height=\"85\">\r\n <rect width=\"45\" height=\"85\" fill=\"white\"/>\r\n </mask>\r\n <g class={`${index < halfStar ? \"half-star\" : \"\"}`} transform=\"translate(13,13)\" mask={`url(#mask-${index}-${maskId})`}>\r\n <path d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n </g>\r\n </svg>\r\n </span>\r\n )\r\n );\r\n }\r\n\r\n private setCSSVariables() {\r\n return {\r\n \"--covet-pics-star-size\": `${this.starSize}px`,\r\n \"--covet-pics-star-space-stars\": `${this.spaceStars}px`,\r\n \"--covet-pics-star-space-stars-text\": `${this.spaceStarsText}px`,\r\n \"--covet-pics-star-color\": `${this.starColor}`,\r\n \"--covet-pics-empty-star-color\": `${this.emptyStarColor}`,\r\n \"--covet-pics-star-border-color\": `${this.starBorderColor}`,\r\n \"--covet-pics-star-border-width\": `${this.starBorderWidth}`\r\n };\r\n }\r\n private roundRating() {\r\n if (isNaN(this.rating)) return null; \r\n if (this.rating > 5) return 5;\r\n \r\n let number = `${this.rating}`;\r\n if (number.indexOf(\".\") !== -1) { \r\n number = number.slice(0,(number.indexOf(\".\") + 3));\r\n } \r\n return parseFloat(number);\r\n }\r\n\r\n private convertedLabel() {\r\n let lebelUpdated = this.label.replaceAll(\"%RATING%\", `${this.roundRating()}`);\r\n lebelUpdated = lebelUpdated.replaceAll(\"%COUNT%\", `${this.ratingCount}`);\r\n return lebelUpdated;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={this.setCSSVariables()} role=\"radiogroup\" aria-label=\"star rating\">\r\n {this.renderStarRating()}\r\n {this.showLabel && <span class=\"star-rating-count\">{this.convertedLabel()}</span>}\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"],"version":3}
1
+ {"file":"covet-pics-star-rating.entry.cjs.js","mappings":"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","names":["getRandomId","index","h","Host"],"sources":["src/components/covet-pics-star-rating/covet-pics-star-rating.scss?tag=covet-pics-star-rating&encapsulation=shadow","src/components/covet-pics-star-rating/covet-pics-star-rating.tsx"],"sourcesContent":["\r\n:host {\r\n display: inline-flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n line-height: 1.4;\r\n\r\n .icon-star {\r\n flex: none;\r\n display: flex;\r\n justify-content: center;\r\n width: var(--covet-star-size);\r\n height: var(--covet-star-size);\r\n margin-right: var(--covet-star-space-stars);\r\n &:nth-of-type(5) { // TODO check this selector\r\n margin-right: var(--covet-star-space-stars-text);\r\n } \r\n \r\n &.active {\r\n .svg-star\r\n path {\r\n fill: var(--covet-star-color);\r\n stroke: var(--covet-star-border-color);\r\n stroke-width: var(--covet-star-border-width);\r\n }\r\n .half-star {\r\n path {\r\n fill: var(--covet-star-color);\r\n }\r\n } \r\n }\r\n }\r\n\r\n .svg-star {\r\n width: 100%;\r\n height: 100%;\r\n path {\r\n fill: var(--covet-empty-star-color);\r\n stroke: var(--covet-star-border-color);\r\n stroke-width: var(--covet-star-border-width)\r\n }\r\n }\r\n .half-star {\r\n path {\r\n fill: var(--covet-star-color);\r\n }\r\n }\r\n\r\n}\r\n","import { Component, Element, Prop, h, Host } from \"@stencil/core\";\r\nimport { getRandomId } from \"../../utils/utils\";\r\n\r\n@Component({\r\n tag: \"covet-pics-star-rating\",\r\n styleUrl: \"covet-pics-star-rating.scss\",\r\n shadow: true\r\n })\r\n\r\nexport class CovetPicsStarRating {\r\n @Element() el: HTMLCovetPicsStarRatingElement;\r\n\r\n /**\r\n * Rating (float from 1-5)\r\n */\r\n @Prop() rating: number;\r\n\r\n /**\r\n * Rating count\r\n */\r\n @Prop() ratingCount: number=0;\r\n\r\n /**\r\n * Color of star\r\n */\r\n @Prop() starColor: string = \"#fec500\";\r\n\r\n /**\r\n * Color of empty star\r\n */\r\n @Prop() emptyStarColor: string = \"#e5e5e5\";\r\n\r\n /**\r\n * Color of star border\r\n */\r\n @Prop() starBorderColor: string = \"#000000\";\r\n\r\n /**\r\n * Width of star border\r\n */\r\n @Prop() starBorderWidth: number = 0;\r\n\r\n /**\r\n * Width/height of star in px.\r\n */\r\n @Prop() starSize: number = 20;\r\n \r\n /**\r\n * Space (margin) above in px\r\n */\r\n @Prop() spaceStars: number = 0;\r\n\r\n /**\r\n * Space (margin) below in px\r\n */\r\n @Prop() spaceStarsText: number = 0;\r\n\r\n /**\r\n * show Label or not\r\n */\r\n @Prop() showLabel: boolean = true;\r\n\r\n /**\r\n * Label next to star rating\r\n * available dynamic variables: %RATING% %COUNT%\r\n */\r\n @Prop() label: string = \"(%RATING%)\";\r\n\r\n private renderStarRating() {\r\n const starsArray = [1, 2, 3, 4, 5];\r\n const halfStar = Math.round(this.roundRating());\r\n const maskId = getRandomId();\r\n return (\r\n starsArray.map((el,index) =>\r\n <span class={`icon-star ${el <= this.roundRating() ? \"active\" : \"\"}`} role=\"radio\" aria-checked={`${el <= this.rating}`} aria-label={`star ${el}/${starsArray.length}`}>\r\n <svg class=\"svg-star\" viewBox=\"0 0 110 110\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"presentation\">\r\n <path transform=\"translate(13,13)\" d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n <mask id={`mask-${index}-${maskId}`} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"45\" height=\"85\">\r\n <rect width=\"45\" height=\"85\" fill=\"white\"/>\r\n </mask>\r\n <g class={`${index < halfStar ? \"half-star\" : \"\"}`} transform=\"translate(13,13)\" mask={`url(#mask-${index}-${maskId})`}>\r\n <path d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n </g>\r\n </svg>\r\n </span>\r\n )\r\n );\r\n }\r\n\r\n private setCSSVariables() {\r\n return {\r\n \"--covet-star-size\": `${this.starSize}px`,\r\n \"--covet-star-space-stars\": `${this.spaceStars}px`,\r\n \"--covet-star-space-stars-text\": `${this.spaceStarsText}px`,\r\n \"--covet-star-color\": `${this.starColor}`,\r\n \"--covet-empty-star-color\": `${this.emptyStarColor}`,\r\n \"--covet-star-border-color\": `${this.starBorderColor}`,\r\n \"--covet-star-border-width\": `${this.starBorderWidth}`\r\n };\r\n }\r\n private roundRating() {\r\n if (isNaN(this.rating)) return null; \r\n if (this.rating > 5) return 5;\r\n \r\n let number = `${this.rating}`;\r\n if (number.indexOf(\".\") !== -1) { \r\n number = number.slice(0,(number.indexOf(\".\") + 3));\r\n } \r\n return parseFloat(number);\r\n }\r\n\r\n private convertedLabel() {\r\n let lebelUpdated = this.label.replaceAll(\"%RATING%\", `${this.roundRating()}`);\r\n lebelUpdated = lebelUpdated.replaceAll(\"%COUNT%\", `${this.ratingCount}`);\r\n return lebelUpdated;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={this.setCSSVariables()} role=\"radiogroup\" aria-label=\"star rating\">\r\n {this.renderStarRating()}\r\n {this.showLabel && <span class=\"star-rating-count\">{this.convertedLabel()}</span>}\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"],"version":3}
package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.css CHANGED
@@ -496,13 +496,13 @@ covet-pics-crop-text .crop-text {
496
496
  margin: auto;
497
497
  text-align: center;
498
498
  width: 100%;
499
- color: var(--covet-pics-crop-text-color);
499
+ color: var(--covet-crop-text-color);
500
500
  display: -webkit-box;
501
501
  overflow: hidden;
502
502
  -webkit-box-orient: vertical;
503
- font-size: var(--covet-pics-crop-text-font-size);
503
+ font-size: var(--covet-crop-text-font-size);
504
504
  line-height: 1.4;
505
- -webkit-line-clamp: var(--covet-pics-crop-text-max-lines);
505
+ -webkit-line-clamp: var(--covet-crop-text-max-lines);
506
506
  }
507
507
  @supports (container-type: size) {
508
508
  @container covet-pics-gallery-item-detail (max-width: 159.98px) {
package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.js CHANGED
@@ -69,13 +69,13 @@ export class CovetPicsCropText {
69
69
  };
70
70
  const { fontSize, maxLines } = calculateMaxLines();
71
71
  return this.cropCSS = {
72
- "--covet-pics-crop-text-max-lines": `${maxLines}`,
73
- "--covet-pics-crop-text-font-size": `${fontSize}px`,
74
- "--covet-pics-crop-text-color": `${this.textColor}`,
72
+ "--covet-crop-text-max-lines": `${maxLines}`,
73
+ "--covet-crop-text-font-size": `${fontSize}px`,
74
+ "--covet-crop-text-color": `${this.textColor}`,
75
75
  };
76
76
  }
77
77
  render() {
78
- return (h(Host, { key: 'f2dc0d9c67513b8a31975298a9779acb2e276a7a', style: this.cropCSS }, h("p", { key: '6f04f0699efe2124e66c6efb401f01a5360e597e', class: `crop-text ${this.textClass}`, innerHTML: this.text })));
78
+ return (h(Host, { key: '267a53f8c90cb3c1fc0bf646745538a9f6d50d4b', style: this.cropCSS }, h("p", { key: '69ae4dc6cfb2116c4b4d1bcdf2f25750b8993c36', class: `crop-text ${this.textClass}`, innerHTML: this.text })));
79
79
  }
80
80
  static get is() { return "covet-pics-crop-text"; }
81
81
  static get originalStyleUrls() {
package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"covet-pics-crop-text.js","sourceRoot":"","sources":["../../../src/components/covet-pics-crop-text/covet-pics-crop-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State } from \"@stencil/core\";\nimport { getSize, getStyle } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-crop-text\",\n styleUrl: \"covet-pics-crop-text.scss\"\n})\nexport class CovetPicsCropText {\n @Element() el: HTMLCovetPicsCropTextElement;\n\n /**\n * text\n */\n @Prop() text: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textClass: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textColor: string = \"#000000\";\n \n /**\n * ratio (font-size / max-lines)\n */\n @Prop() ratio = [\n { size: 48, lines: 2 },\n { size: 26, lines: 5 },\n { size: 16, lines: 8 }\n ];\n\n @State() cropCSS: { [key: string]: string; } = {}; \n private resizeObserver: ResizeObserver;\n private elHeight: number;\n private elWidth: number;\n\n componentWillLoad() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.elHeight !== getSize(this.el, \"height\") || this.elWidth !== getSize(this.el, \"width\")) {\n this.elHeight = getSize(this.el, \"height\");\n this.elWidth = getSize(this.el, \"width\");\n this.getReviewCSS();\n }\n });\n this.resizeObserver.observe(this.el);\n \n this.getReviewCSS();\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private getReviewCSS() {\n const PT = getStyle(this.el, \"padding-top\");\n const PB = getStyle(this.el, \"padding-bottom\");\n\n const elHeight = getSize(this.el, \"height\") - PT - PB;\n \n const textEl = this.el.querySelector(\".crop-text\") as HTMLElement;\n if (this.text === null || textEl === null) return;\n\n textEl.style.fontSize = `${this.ratio[0].size}px`;\n let textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n\n const calculateMaxLines = () => {\n let fontSize = this.ratio[0].size;\n let maxLines = this.ratio[0].lines;\n let testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n for (let i = 0; i < this.ratio.length; i++) {\n // last\n if (i === this.ratio.length - 1) {\n if (maxLines * textElLineHeight > elHeight) {\n fontSize = this.ratio[i].size;\n maxLines = Math.floor(elHeight / textElLineHeight) > 0\n ? Math.floor(elHeight / textElLineHeight)\n : 1;\n }\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n if (getSize(textEl, \"height\") < elHeight && testMaxLines <= maxLines) {\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n fontSize = this.ratio[i + 1].size;\n textEl.style.fontSize = `${this.ratio[i + 1].size}px`;\n maxLines = this.ratio[i + 1].lines;\n textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n }\n };\n\n const { fontSize, maxLines } = calculateMaxLines();\n\n return this.cropCSS = {\n \"--covet-pics-crop-text-max-lines\": `${maxLines}`,\n \"--covet-pics-crop-text-font-size\": `${fontSize}px`,\n \"--covet-pics-crop-text-color\": `${this.textColor}`,\n };\n }\n\n render() {\n return (\n <Host style={this.cropCSS}>\n <p class={`crop-text ${this.textClass}`} innerHTML={this.text}></p>\n </Host>\n );\n }\n}"]}
1
+ {"version":3,"file":"covet-pics-crop-text.js","sourceRoot":"","sources":["../../../src/components/covet-pics-crop-text/covet-pics-crop-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAMtD,MAAM,OAAO,iBAAiB;;oBAML,EAAE;yBAKG,EAAE;yBAKF,SAAS;qBAKrB;YACd,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;YACtB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;YACtB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;SACvB;uBAE8C,EAAE;;IAKjD,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC;gBAC/F,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;gBAC3C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;gBACzC,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAErC,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAEO,YAAY;QAClB,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;QAC5C,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,gBAAgB,CAAC,CAAC;QAE/C,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;QAEtD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;QAClE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO;QAElD,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;QAClD,IAAI,gBAAgB,GAAG,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACvD,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;QAEhF,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAClC,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACnC,IAAI,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,CAAC;YAC5E,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,OAAO;gBACP,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAChC,IAAI,QAAQ,GAAG,gBAAgB,GAAG,QAAQ,EAAE,CAAC;wBAC3C,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC9B,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;4BACpD,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC;4BACzC,CAAC,CAAC,CAAC,CAAC;oBACR,CAAC;oBACD,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBAChC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;gBAChC,CAAC;gBAED,IAAI,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,QAAQ,IAAI,YAAY,IAAI,QAAQ,EAAE,CAAC;oBACrE,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBAChC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;gBAChC,CAAC;gBAED,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;gBAClC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;gBACtD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;gBACnC,gBAAgB,GAAG,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;gBACnD,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;gBAChF,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,CAAC;YAC1E,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,iBAAiB,EAAE,CAAC;QAEnD,OAAO,IAAI,CAAC,OAAO,GAAG;YACpB,6BAA6B,EAAE,GAAG,QAAQ,EAAE;YAC5C,6BAA6B,EAAE,GAAG,QAAQ,IAAI;YAC9C,yBAAyB,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE;SAC/C,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,OAAO;YACvB,0DAAG,KAAK,EAAE,aAAa,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,GAAM,CAC9D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from \"@stencil/core\";\nimport { getSize, getStyle } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-crop-text\",\n styleUrl: \"covet-pics-crop-text.scss\"\n })\nexport class CovetPicsCropText {\n @Element() el: HTMLCovetPicsCropTextElement;\n\n /**\n * text\n */\n @Prop() text: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textClass: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textColor: string = \"#000000\";\n \n /**\n * ratio (font-size / max-lines)\n */\n @Prop() ratio = [\n { size: 48, lines: 2 },\n { size: 26, lines: 5 },\n { size: 16, lines: 8 }\n ];\n\n @State() cropCSS: { [key: string]: string; } = {}; \n private resizeObserver: ResizeObserver;\n private elHeight: number;\n private elWidth: number;\n\n componentWillLoad() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.elHeight !== getSize(this.el, \"height\") || this.elWidth !== getSize(this.el, \"width\")) {\n this.elHeight = getSize(this.el, \"height\");\n this.elWidth = getSize(this.el, \"width\");\n this.getReviewCSS();\n }\n });\n this.resizeObserver.observe(this.el);\n \n this.getReviewCSS();\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private getReviewCSS() {\n const PT = getStyle(this.el, \"padding-top\");\n const PB = getStyle(this.el, \"padding-bottom\");\n\n const elHeight = getSize(this.el, \"height\") - PT - PB;\n \n const textEl = this.el.querySelector(\".crop-text\") as HTMLElement;\n if (this.text === null || textEl === null) return;\n\n textEl.style.fontSize = `${this.ratio[0].size}px`;\n let textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n\n const calculateMaxLines = () => {\n let fontSize = this.ratio[0].size;\n let maxLines = this.ratio[0].lines;\n let testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n for (let i = 0; i < this.ratio.length; i++) {\n // last\n if (i === this.ratio.length - 1) {\n if (maxLines * textElLineHeight > elHeight) {\n fontSize = this.ratio[i].size;\n maxLines = Math.floor(elHeight / textElLineHeight) > 0\n ? Math.floor(elHeight / textElLineHeight)\n : 1;\n }\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n if (getSize(textEl, \"height\") < elHeight && testMaxLines <= maxLines) {\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n fontSize = this.ratio[i + 1].size;\n textEl.style.fontSize = `${this.ratio[i + 1].size}px`;\n maxLines = this.ratio[i + 1].lines;\n textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n }\n };\n\n const { fontSize, maxLines } = calculateMaxLines();\n\n return this.cropCSS = {\n \"--covet-crop-text-max-lines\": `${maxLines}`,\n \"--covet-crop-text-font-size\": `${fontSize}px`,\n \"--covet-crop-text-color\": `${this.textColor}`,\n };\n }\n\n render() {\n return (\n <Host style={this.cropCSS}>\n <p class={`crop-text ${this.textClass}`} innerHTML={this.text}></p>\n </Host>\n );\n }\n}"]}
package/dist/collection/components/covet-pics-star-rating/covet-pics-star-rating.css CHANGED
@@ -8,30 +8,30 @@
8
8
  flex: none;
9
9
  display: flex;
10
10
  justify-content: center;
11
- width: var(--covet-pics-star-size);
12
- height: var(--covet-pics-star-size);
13
- margin-right: var(--covet-pics-star-space-stars);
11
+ width: var(--covet-star-size);
12
+ height: var(--covet-star-size);
13
+ margin-right: var(--covet-star-space-stars);
14
14
  }
15
15
  :host .icon-star:nth-of-type(5) {
16
- margin-right: var(--covet-pics-star-space-stars-text);
16
+ margin-right: var(--covet-star-space-stars-text);
17
17
  }
18
18
  :host .icon-star.active .svg-star path {
19
- fill: var(--covet-pics-star-color);
20
- stroke: var(--covet-pics-star-border-color);
21
- stroke-width: var(--covet-pics-star-border-width);
19
+ fill: var(--covet-star-color);
20
+ stroke: var(--covet-star-border-color);
21
+ stroke-width: var(--covet-star-border-width);
22
22
  }
23
23
  :host .icon-star.active .half-star path {
24
- fill: var(--covet-pics-star-color);
24
+ fill: var(--covet-star-color);
25
25
  }
26
26
  :host .svg-star {
27
27
  width: 100%;
28
28
  height: 100%;
29
29
  }
30
30
  :host .svg-star path {
31
- fill: var(--covet-pics-empty-star-color);
32
- stroke: var(--covet-pics-star-border-color);
33
- stroke-width: var(--covet-pics-star-border-width);
31
+ fill: var(--covet-empty-star-color);
32
+ stroke: var(--covet-star-border-color);
33
+ stroke-width: var(--covet-star-border-width);
34
34
  }
35
35
  :host .half-star path {
36
- fill: var(--covet-pics-star-color);
36
+ fill: var(--covet-star-color);
37
37
  }
package/dist/collection/components/covet-pics-star-rating/covet-pics-star-rating.js CHANGED
@@ -25,13 +25,13 @@ export class CovetPicsStarRating {
25
25
  }
26
26
  setCSSVariables() {
27
27
  return {
28
- "--covet-pics-star-size": `${this.starSize}px`,
29
- "--covet-pics-star-space-stars": `${this.spaceStars}px`,
30
- "--covet-pics-star-space-stars-text": `${this.spaceStarsText}px`,
31
- "--covet-pics-star-color": `${this.starColor}`,
32
- "--covet-pics-empty-star-color": `${this.emptyStarColor}`,
33
- "--covet-pics-star-border-color": `${this.starBorderColor}`,
34
- "--covet-pics-star-border-width": `${this.starBorderWidth}`
28
+ "--covet-star-size": `${this.starSize}px`,
29
+ "--covet-star-space-stars": `${this.spaceStars}px`,
30
+ "--covet-star-space-stars-text": `${this.spaceStarsText}px`,
31
+ "--covet-star-color": `${this.starColor}`,
32
+ "--covet-empty-star-color": `${this.emptyStarColor}`,
33
+ "--covet-star-border-color": `${this.starBorderColor}`,
34
+ "--covet-star-border-width": `${this.starBorderWidth}`
35
35
  };
36
36
  }
37
37
  roundRating() {
@@ -51,7 +51,7 @@ export class CovetPicsStarRating {
51
51
  return lebelUpdated;
52
52
  }
53
53
  render() {
54
- return (h(Host, { key: '29d77720ea0145a30d6adab9aa67f285485ad512', style: this.setCSSVariables(), role: "radiogroup", "aria-label": "star rating" }, this.renderStarRating(), this.showLabel && h("span", { key: '9d938e07b44611f0d104a9a3747a0ca74f186ef9', class: "star-rating-count" }, this.convertedLabel())));
54
+ return (h(Host, { key: '52b31268f8ecc7bd1c4a07603ed1ba06d0a2ac77', style: this.setCSSVariables(), role: "radiogroup", "aria-label": "star rating" }, this.renderStarRating(), this.showLabel && h("span", { key: 'e3e5c728b660ac44c7ad63c17ad36e05592799a7', class: "star-rating-count" }, this.convertedLabel())));
55
55
  }
56
56
  static get is() { return "covet-pics-star-rating"; }
57
57
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/covet-pics-star-rating/covet-pics-star-rating.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"covet-pics-star-rating.js","sourceRoot":"","sources":["../../../src/components/covet-pics-star-rating/covet-pics-star-rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Host } from \"@stencil/core\";\r\nimport { getRandomId } from \"../../utils/utils\";\r\n\r\n@Component({\r\n tag: \"covet-pics-star-rating\",\r\n styleUrl: \"covet-pics-star-rating.scss\",\r\n shadow: true\r\n})\r\n\r\nexport class CovetPicsStarRating {\r\n @Element() el: HTMLCovetPicsStarRatingElement;\r\n\r\n /**\r\n * Rating (float from 1-5)\r\n */\r\n @Prop() rating: number;\r\n\r\n /**\r\n * Rating count\r\n */\r\n @Prop() ratingCount: number=0;\r\n\r\n /**\r\n * Color of star\r\n */\r\n @Prop() starColor: string = \"#fec500\";\r\n\r\n /**\r\n * Color of empty star\r\n */\r\n @Prop() emptyStarColor: string = \"#e5e5e5\";\r\n\r\n /**\r\n * Color of star border\r\n */\r\n @Prop() starBorderColor: string = \"#000000\";\r\n\r\n /**\r\n * Width of star border\r\n */\r\n @Prop() starBorderWidth: number = 0;\r\n\r\n /**\r\n * Width/height of star in px.\r\n */\r\n @Prop() starSize: number = 20;\r\n \r\n /**\r\n * Space (margin) above in px\r\n */\r\n @Prop() spaceStars: number = 0;\r\n\r\n /**\r\n * Space (margin) below in px\r\n */\r\n @Prop() spaceStarsText: number = 0;\r\n\r\n /**\r\n * show Label or not\r\n */\r\n @Prop() showLabel: boolean = true;\r\n\r\n /**\r\n * Label next to star rating\r\n * available dynamic variables: %RATING% %COUNT%\r\n */\r\n @Prop() label: string = \"(%RATING%)\";\r\n\r\n private renderStarRating() {\r\n const starsArray = [1, 2, 3, 4, 5];\r\n const halfStar = Math.round(this.roundRating());\r\n const maskId = getRandomId();\r\n return (\r\n starsArray.map((el,index) =>\r\n <span class={`icon-star ${el <= this.roundRating() ? \"active\" : \"\"}`} role=\"radio\" aria-checked={`${el <= this.rating}`} aria-label={`star ${el}/${starsArray.length}`}>\r\n <svg class=\"svg-star\" viewBox=\"0 0 110 110\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"presentation\">\r\n <path transform=\"translate(13,13)\" d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n <mask id={`mask-${index}-${maskId}`} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"45\" height=\"85\">\r\n <rect width=\"45\" height=\"85\" fill=\"white\"/>\r\n </mask>\r\n <g class={`${index < halfStar ? \"half-star\" : \"\"}`} transform=\"translate(13,13)\" mask={`url(#mask-${index}-${maskId})`}>\r\n <path d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n </g>\r\n </svg>\r\n </span>\r\n )\r\n );\r\n }\r\n\r\n private setCSSVariables() {\r\n return {\r\n \"--covet-pics-star-size\": `${this.starSize}px`,\r\n \"--covet-pics-star-space-stars\": `${this.spaceStars}px`,\r\n \"--covet-pics-star-space-stars-text\": `${this.spaceStarsText}px`,\r\n \"--covet-pics-star-color\": `${this.starColor}`,\r\n \"--covet-pics-empty-star-color\": `${this.emptyStarColor}`,\r\n \"--covet-pics-star-border-color\": `${this.starBorderColor}`,\r\n \"--covet-pics-star-border-width\": `${this.starBorderWidth}`\r\n };\r\n }\r\n private roundRating() {\r\n if (isNaN(this.rating)) return null; \r\n if (this.rating > 5) return 5;\r\n \r\n let number = `${this.rating}`;\r\n if (number.indexOf(\".\") !== -1) { \r\n number = number.slice(0,(number.indexOf(\".\") + 3));\r\n } \r\n return parseFloat(number);\r\n }\r\n\r\n private convertedLabel() {\r\n let lebelUpdated = this.label.replaceAll(\"%RATING%\", `${this.roundRating()}`);\r\n lebelUpdated = lebelUpdated.replaceAll(\"%COUNT%\", `${this.ratingCount}`);\r\n return lebelUpdated;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={this.setCSSVariables()} role=\"radiogroup\" aria-label=\"star rating\">\r\n {this.renderStarRating()}\r\n {this.showLabel && <span class=\"star-rating-count\">{this.convertedLabel()}</span>}\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"]}
1
+ {"version":3,"file":"covet-pics-star-rating.js","sourceRoot":"","sources":["../../../src/components/covet-pics-star-rating/covet-pics-star-rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Host } from \"@stencil/core\";\r\nimport { getRandomId } from \"../../utils/utils\";\r\n\r\n@Component({\r\n tag: \"covet-pics-star-rating\",\r\n styleUrl: \"covet-pics-star-rating.scss\",\r\n shadow: true\r\n })\r\n\r\nexport class CovetPicsStarRating {\r\n @Element() el: HTMLCovetPicsStarRatingElement;\r\n\r\n /**\r\n * Rating (float from 1-5)\r\n */\r\n @Prop() rating: number;\r\n\r\n /**\r\n * Rating count\r\n */\r\n @Prop() ratingCount: number=0;\r\n\r\n /**\r\n * Color of star\r\n */\r\n @Prop() starColor: string = \"#fec500\";\r\n\r\n /**\r\n * Color of empty star\r\n */\r\n @Prop() emptyStarColor: string = \"#e5e5e5\";\r\n\r\n /**\r\n * Color of star border\r\n */\r\n @Prop() starBorderColor: string = \"#000000\";\r\n\r\n /**\r\n * Width of star border\r\n */\r\n @Prop() starBorderWidth: number = 0;\r\n\r\n /**\r\n * Width/height of star in px.\r\n */\r\n @Prop() starSize: number = 20;\r\n \r\n /**\r\n * Space (margin) above in px\r\n */\r\n @Prop() spaceStars: number = 0;\r\n\r\n /**\r\n * Space (margin) below in px\r\n */\r\n @Prop() spaceStarsText: number = 0;\r\n\r\n /**\r\n * show Label or not\r\n */\r\n @Prop() showLabel: boolean = true;\r\n\r\n /**\r\n * Label next to star rating\r\n * available dynamic variables: %RATING% %COUNT%\r\n */\r\n @Prop() label: string = \"(%RATING%)\";\r\n\r\n private renderStarRating() {\r\n const starsArray = [1, 2, 3, 4, 5];\r\n const halfStar = Math.round(this.roundRating());\r\n const maskId = getRandomId();\r\n return (\r\n starsArray.map((el,index) =>\r\n <span class={`icon-star ${el <= this.roundRating() ? \"active\" : \"\"}`} role=\"radio\" aria-checked={`${el <= this.rating}`} aria-label={`star ${el}/${starsArray.length}`}>\r\n <svg class=\"svg-star\" viewBox=\"0 0 110 110\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"presentation\">\r\n <path transform=\"translate(13,13)\" d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n <mask id={`mask-${index}-${maskId}`} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"45\" height=\"85\">\r\n <rect width=\"45\" height=\"85\" fill=\"white\"/>\r\n </mask>\r\n <g class={`${index < halfStar ? \"half-star\" : \"\"}`} transform=\"translate(13,13)\" mask={`url(#mask-${index}-${maskId})`}>\r\n <path d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n </g>\r\n </svg>\r\n </span>\r\n )\r\n );\r\n }\r\n\r\n private setCSSVariables() {\r\n return {\r\n \"--covet-star-size\": `${this.starSize}px`,\r\n \"--covet-star-space-stars\": `${this.spaceStars}px`,\r\n \"--covet-star-space-stars-text\": `${this.spaceStarsText}px`,\r\n \"--covet-star-color\": `${this.starColor}`,\r\n \"--covet-empty-star-color\": `${this.emptyStarColor}`,\r\n \"--covet-star-border-color\": `${this.starBorderColor}`,\r\n \"--covet-star-border-width\": `${this.starBorderWidth}`\r\n };\r\n }\r\n private roundRating() {\r\n if (isNaN(this.rating)) return null; \r\n if (this.rating > 5) return 5;\r\n \r\n let number = `${this.rating}`;\r\n if (number.indexOf(\".\") !== -1) { \r\n number = number.slice(0,(number.indexOf(\".\") + 3));\r\n } \r\n return parseFloat(number);\r\n }\r\n\r\n private convertedLabel() {\r\n let lebelUpdated = this.label.replaceAll(\"%RATING%\", `${this.roundRating()}`);\r\n lebelUpdated = lebelUpdated.replaceAll(\"%COUNT%\", `${this.ratingCount}`);\r\n return lebelUpdated;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={this.setCSSVariables()} role=\"radiogroup\" aria-label=\"star rating\">\r\n {this.renderStarRating()}\r\n {this.showLabel && <span class=\"star-rating-count\">{this.convertedLabel()}</span>}\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\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-12084d8d.js";export{s as setNonce}from"./p-12084d8d.js";import{g as i}from"./p-1d9dbfd4.js";const a=()=>{const t=import.meta.url;const i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};a().then((async e=>{await i();return t([["p-1557a81f",[[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-26698e63",[[0,"covet-pics-crop-text",{text:[1],textClass:[1,"text-class"],textColor:[1,"text-color"],ratio:[16],cropCSS:[32]}]]],["p-400bcc16",[[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-b232da3a",[[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-ffff6e1c",[[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-725e29a6",[[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-ec0e7aca",[[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-0e4dcc60",[[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-12084d8d.js";export{s as setNonce}from"./p-12084d8d.js";import{g as i}from"./p-1d9dbfd4.js";const a=()=>{const t=import.meta.url;const i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};a().then((async e=>{await i();return t([["p-1557a81f",[[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-ee828bff",[[0,"covet-pics-crop-text",{text:[1],textClass:[1,"text-class"],textColor:[1,"text-color"],ratio:[16],cropCSS:[32]}]]],["p-66409a38",[[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-b232da3a",[[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-ffff6e1c",[[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-725e29a6",[[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-ec0e7aca",[[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-0e4dcc60",[[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
package/dist/covet-pics-widget/p-2e286cc7.system.entry.js ADDED
@@ -0,0 +1,5 @@
1
+ /*!
2
+ * Copyright by Space Squirrel Ltd.
3
+ */
4
+ System.register(["./p-c95a507d.system.js","./p-f976b6df.system.js"],(function(t){"use strict";var s,r,e,a,i;return{setters:[function(t){s=t.r;r=t.h;e=t.H;a=t.g},function(t){i=t.i}],execute:function(){var o=":host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:1.4}:host .icon-star{-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:var(--covet-star-size);height:var(--covet-star-size);margin-right:var(--covet-star-space-stars)}:host .icon-star:nth-of-type(5){margin-right:var(--covet-star-space-stars-text)}:host .icon-star.active .svg-star path{fill:var(--covet-star-color);stroke:var(--covet-star-border-color);stroke-width:var(--covet-star-border-width)}:host .icon-star.active .half-star path{fill:var(--covet-star-color)}:host .svg-star{width:100%;height:100%}:host .svg-star path{fill:var(--covet-empty-star-color);stroke:var(--covet-star-border-color);stroke-width:var(--covet-star-border-width)}:host .half-star path{fill:var(--covet-star-color)}";var n=o;var c=t("covet_pics_star_rating",function(){function t(t){s(this,t);this.rating=undefined;this.ratingCount=0;this.starColor="#fec500";this.emptyStarColor="#e5e5e5";this.starBorderColor="#000000";this.starBorderWidth=0;this.starSize=20;this.spaceStars=0;this.spaceStarsText=0;this.showLabel=true;this.label="(%RATING%)"}t.prototype.renderStarRating=function(){var t=this;var s=[1,2,3,4,5];var e=Math.round(this.roundRating());var a=i();return s.map((function(i,o){return r("span",{class:"icon-star ".concat(i<=t.roundRating()?"active":""),role:"radio","aria-checked":"".concat(i<=t.rating),"aria-label":"star ".concat(i,"/").concat(s.length)},r("svg",{class:"svg-star",viewBox:"0 0 110 110",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"presentation"},r("path",{transform:"translate(13,13)",d:"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z"}),r("mask",{id:"mask-".concat(o,"-").concat(a),maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"45",height:"85"},r("rect",{width:"45",height:"85",fill:"white"})),r("g",{class:"".concat(o<e?"half-star":""),transform:"translate(13,13)",mask:"url(#mask-".concat(o,"-").concat(a,")")},r("path",{d:"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z"}))))}))};t.prototype.setCSSVariables=function(){return{"--covet-star-size":"".concat(this.starSize,"px"),"--covet-star-space-stars":"".concat(this.spaceStars,"px"),"--covet-star-space-stars-text":"".concat(this.spaceStarsText,"px"),"--covet-star-color":"".concat(this.starColor),"--covet-empty-star-color":"".concat(this.emptyStarColor),"--covet-star-border-color":"".concat(this.starBorderColor),"--covet-star-border-width":"".concat(this.starBorderWidth)}};t.prototype.roundRating=function(){if(isNaN(this.rating))return null;if(this.rating>5)return 5;var t="".concat(this.rating);if(t.indexOf(".")!==-1){t=t.slice(0,t.indexOf(".")+3)}return parseFloat(t)};t.prototype.convertedLabel=function(){var t=this.label.replaceAll("%RATING%","".concat(this.roundRating()));t=t.replaceAll("%COUNT%","".concat(this.ratingCount));return t};t.prototype.render=function(){return r(e,{key:"52b31268f8ecc7bd1c4a07603ed1ba06d0a2ac77",style:this.setCSSVariables(),role:"radiogroup","aria-label":"star rating"},this.renderStarRating(),this.showLabel&&r("span",{key:"e3e5c728b660ac44c7ad63c17ad36e05592799a7",class:"star-rating-count"},this.convertedLabel()))};Object.defineProperty(t.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());c.style=n}}}));
5
+ //# sourceMappingURL=p-2e286cc7.system.entry.js.map
package/dist/covet-pics-widget/p-2e286cc7.system.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["covetPicsStarRatingCss","CovetPicsStarRatingStyle0","CovetPicsStarRating","exports","class_1","prototype","renderStarRating","_this","this","starsArray","halfStar","Math","round","roundRating","maskId","getRandomId","map","el","index","h","class","concat","role","rating","length","viewBox","fill","xmlns","transform","d","id","maskUnits","x","y","width","height","mask","setCSSVariables","starSize","spaceStars","spaceStarsText","starColor","emptyStarColor","starBorderColor","starBorderWidth","isNaN","number","indexOf","slice","parseFloat","convertedLabel","lebelUpdated","label","replaceAll","ratingCount","render","Host","key","style","showLabel"],"sources":["src/components/covet-pics-star-rating/covet-pics-star-rating.scss?tag=covet-pics-star-rating&encapsulation=shadow","src/components/covet-pics-star-rating/covet-pics-star-rating.tsx"],"sourcesContent":["\r\n:host {\r\n display: inline-flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n line-height: 1.4;\r\n\r\n .icon-star {\r\n flex: none;\r\n display: flex;\r\n justify-content: center;\r\n width: var(--covet-star-size);\r\n height: var(--covet-star-size);\r\n margin-right: var(--covet-star-space-stars);\r\n &:nth-of-type(5) { // TODO check this selector\r\n margin-right: var(--covet-star-space-stars-text);\r\n } \r\n \r\n &.active {\r\n .svg-star\r\n path {\r\n fill: var(--covet-star-color);\r\n stroke: var(--covet-star-border-color);\r\n stroke-width: var(--covet-star-border-width);\r\n }\r\n .half-star {\r\n path {\r\n fill: var(--covet-star-color);\r\n }\r\n } \r\n }\r\n }\r\n\r\n .svg-star {\r\n width: 100%;\r\n height: 100%;\r\n path {\r\n fill: var(--covet-empty-star-color);\r\n stroke: var(--covet-star-border-color);\r\n stroke-width: var(--covet-star-border-width)\r\n }\r\n }\r\n .half-star {\r\n path {\r\n fill: var(--covet-star-color);\r\n }\r\n }\r\n\r\n}\r\n","import { Component, Element, Prop, h, Host } from \"@stencil/core\";\r\nimport { getRandomId } from \"../../utils/utils\";\r\n\r\n@Component({\r\n tag: \"covet-pics-star-rating\",\r\n styleUrl: \"covet-pics-star-rating.scss\",\r\n shadow: true\r\n })\r\n\r\nexport class CovetPicsStarRating {\r\n @Element() el: HTMLCovetPicsStarRatingElement;\r\n\r\n /**\r\n * Rating (float from 1-5)\r\n */\r\n @Prop() rating: number;\r\n\r\n /**\r\n * Rating count\r\n */\r\n @Prop() ratingCount: number=0;\r\n\r\n /**\r\n * Color of star\r\n */\r\n @Prop() starColor: string = \"#fec500\";\r\n\r\n /**\r\n * Color of empty star\r\n */\r\n @Prop() emptyStarColor: string = \"#e5e5e5\";\r\n\r\n /**\r\n * Color of star border\r\n */\r\n @Prop() starBorderColor: string = \"#000000\";\r\n\r\n /**\r\n * Width of star border\r\n */\r\n @Prop() starBorderWidth: number = 0;\r\n\r\n /**\r\n * Width/height of star in px.\r\n */\r\n @Prop() starSize: number = 20;\r\n \r\n /**\r\n * Space (margin) above in px\r\n */\r\n @Prop() spaceStars: number = 0;\r\n\r\n /**\r\n * Space (margin) below in px\r\n */\r\n @Prop() spaceStarsText: number = 0;\r\n\r\n /**\r\n * show Label or not\r\n */\r\n @Prop() showLabel: boolean = true;\r\n\r\n /**\r\n * Label next to star rating\r\n * available dynamic variables: %RATING% %COUNT%\r\n */\r\n @Prop() label: string = \"(%RATING%)\";\r\n\r\n private renderStarRating() {\r\n const starsArray = [1, 2, 3, 4, 5];\r\n const halfStar = Math.round(this.roundRating());\r\n const maskId = getRandomId();\r\n return (\r\n starsArray.map((el,index) =>\r\n <span class={`icon-star ${el <= this.roundRating() ? \"active\" : \"\"}`} role=\"radio\" aria-checked={`${el <= this.rating}`} aria-label={`star ${el}/${starsArray.length}`}>\r\n <svg class=\"svg-star\" viewBox=\"0 0 110 110\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"presentation\">\r\n <path transform=\"translate(13,13)\" d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n <mask id={`mask-${index}-${maskId}`} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"45\" height=\"85\">\r\n <rect width=\"45\" height=\"85\" fill=\"white\"/>\r\n </mask>\r\n <g class={`${index < halfStar ? \"half-star\" : \"\"}`} transform=\"translate(13,13)\" mask={`url(#mask-${index}-${maskId})`}>\r\n <path d=\"M42.756 1.23194C43.4392 -0.410645 45.7661 -0.410647 46.4493 1.23194L57.3587 27.4613C57.6467 28.1537 58.2979 28.6269 59.0455 28.6868L87.3623 30.957C89.1356 31.0991 89.8546 33.3121 88.5035 34.4695L66.9292 52.9502C66.3596 53.4381 66.1108 54.2037 66.2848 54.9332L72.8762 82.5656C73.289 84.296 71.4065 85.6638 69.8883 84.7364L45.6451 69.9288C45.0051 69.5379 44.2002 69.5379 43.5601 69.9288L19.317 84.7364C17.7988 85.6638 15.9163 84.296 16.3291 82.5656L22.9204 54.9332C23.0944 54.2037 22.8457 53.4381 22.2761 52.9502L0.701718 34.4695C-0.649356 33.3121 0.069695 31.0991 1.843 30.957L30.1598 28.6868C30.9074 28.6269 31.5586 28.1537 31.8466 27.4613L42.756 1.23194Z\"/>\r\n </g>\r\n </svg>\r\n </span>\r\n )\r\n );\r\n }\r\n\r\n private setCSSVariables() {\r\n return {\r\n \"--covet-star-size\": `${this.starSize}px`,\r\n \"--covet-star-space-stars\": `${this.spaceStars}px`,\r\n \"--covet-star-space-stars-text\": `${this.spaceStarsText}px`,\r\n \"--covet-star-color\": `${this.starColor}`,\r\n \"--covet-empty-star-color\": `${this.emptyStarColor}`,\r\n \"--covet-star-border-color\": `${this.starBorderColor}`,\r\n \"--covet-star-border-width\": `${this.starBorderWidth}`\r\n };\r\n }\r\n private roundRating() {\r\n if (isNaN(this.rating)) return null; \r\n if (this.rating > 5) return 5;\r\n \r\n let number = `${this.rating}`;\r\n if (number.indexOf(\".\") !== -1) { \r\n number = number.slice(0,(number.indexOf(\".\") + 3));\r\n } \r\n return parseFloat(number);\r\n }\r\n\r\n private convertedLabel() {\r\n let lebelUpdated = this.label.replaceAll(\"%RATING%\", `${this.roundRating()}`);\r\n lebelUpdated = lebelUpdated.replaceAll(\"%COUNT%\", `${this.ratingCount}`);\r\n return lebelUpdated;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={this.setCSSVariables()} role=\"radiogroup\" aria-label=\"star rating\">\r\n {this.renderStarRating()}\r\n {this.showLabel && <span class=\"star-rating-count\">{this.convertedLabel()}</span>}\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"],"mappings":";;;wMAAA,IAAMA,EAAyB,g5BAC/B,IAAAC,EAAeD,E,ICQFE,EAAmBC,EAAA,oC,+DAWF,E,eAKA,U,oBAKK,U,qBAKC,U,qBAKA,E,cAKP,G,gBAKE,E,oBAKI,E,eAKJ,K,WAML,Y,CAEhBC,EAAAC,UAAAC,iBAAA,eAAAC,EAAAC,KACN,IAAMC,EAAa,CAAC,EAAG,EAAG,EAAG,EAAG,GAChC,IAAMC,EAAWC,KAAKC,MAAMJ,KAAKK,eACjC,IAAMC,EAASC,IACf,OACEN,EAAWO,KAAI,SAACC,EAAGC,GACjB,OAAAC,EAAA,QAAMC,MAAO,aAAAC,OAAaJ,GAAMV,EAAKM,cAAgB,SAAW,IAAMS,KAAK,QAAO,eAAe,GAAAD,OAAGJ,GAAMV,EAAKgB,QAAQ,aAAc,QAAAF,OAAQJ,EAAE,KAAAI,OAAIZ,EAAWe,SAC5JL,EAAA,OAAKC,MAAM,WAAWK,QAAQ,cAAcC,KAAK,OAAOC,MAAM,6BAA4B,cAAa,OAAOL,KAAK,gBACjHH,EAAA,QAAMS,UAAU,mBAAmBC,EAAE,opBACrCV,EAAA,QAAMW,GAAI,QAAAT,OAAQH,EAAK,KAAAG,OAAIP,GAAUiB,UAAU,iBAAiBC,EAAE,IAAIC,EAAE,IAAIC,MAAM,KAAKC,OAAO,MAC5FhB,EAAA,QAAMe,MAAM,KAAKC,OAAO,KAAKT,KAAK,WAEpCP,EAAA,KAAGC,MAAO,GAAAC,OAAGH,EAAQR,EAAW,YAAc,IAAMkB,UAAU,mBAAmBQ,KAAM,aAAAf,OAAaH,EAAK,KAAAG,OAAIP,EAAM,MACjHK,EAAA,QAAMU,EAAE,spBAPd,G,EAeEzB,EAAAC,UAAAgC,gBAAA,WACN,MAAO,CACL,oBAAqB,GAAAhB,OAAGb,KAAK8B,SAAQ,MACrC,2BAA4B,GAAAjB,OAAGb,KAAK+B,WAAU,MAC9C,gCAAiC,GAAAlB,OAAGb,KAAKgC,eAAc,MACvD,qBAAsB,GAAAnB,OAAGb,KAAKiC,WAC9B,2BAA4B,GAAApB,OAAGb,KAAKkC,gBACpC,4BAA6B,GAAArB,OAAGb,KAAKmC,iBACrC,4BAA6B,GAAAtB,OAAGb,KAAKoC,iB,EAGjCxC,EAAAC,UAAAQ,YAAA,WACN,GAAIgC,MAAMrC,KAAKe,QAAS,OAAO,KAC/B,GAAIf,KAAKe,OAAS,EAAG,OAAO,EAE5B,IAAIuB,EAAS,GAAAzB,OAAGb,KAAKe,QACrB,GAAIuB,EAAOC,QAAQ,QAAU,EAAG,CAC9BD,EAASA,EAAOE,MAAM,EAAGF,EAAOC,QAAQ,KAAO,E,CAEjD,OAAOE,WAAWH,E,EAGZ1C,EAAAC,UAAA6C,eAAA,WACN,IAAIC,EAAe3C,KAAK4C,MAAMC,WAAW,WAAY,GAAAhC,OAAGb,KAAKK,gBAC7DsC,EAAeA,EAAaE,WAAW,UAAW,GAAAhC,OAAGb,KAAK8C,cAC1D,OAAOH,C,EAGT/C,EAAAC,UAAAkD,OAAA,WACE,OACEpC,EAACqC,EAAI,CAAAC,IAAA,2CAACC,MAAOlD,KAAK6B,kBAAmBf,KAAK,aAAY,aAAY,eAC/Dd,KAAKF,mBACLE,KAAKmD,WAAaxC,EAAA,QAAAsC,IAAA,2CAAMrC,MAAM,qBAAqBZ,KAAK0C,kB,uHAhHjC,I"}