@covet-pics/covet-pics-widget 0.155.3 → 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.
- package/dist/cjs/covet-pics-crop-text.cjs.entry.js +5 -5
- package/dist/cjs/covet-pics-crop-text.cjs.entry.js.map +1 -1
- package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.css +3 -3
- package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.js +4 -4
- package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.js.map +1 -1
- package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
- package/dist/covet-pics-widget/p-7884e86b.system.js +1 -1
- package/dist/covet-pics-widget/{p-32f6f7e0.system.entry.js → p-81d20299.system.entry.js} +2 -2
- package/dist/covet-pics-widget/p-81d20299.system.entry.js.map +1 -0
- package/dist/covet-pics-widget/{p-26698e63.entry.js → p-ee828bff.entry.js} +2 -2
- package/dist/covet-pics-widget/p-ee828bff.entry.js.map +1 -0
- package/dist/esm/covet-pics-crop-text.entry.js +5 -5
- package/dist/esm/covet-pics-crop-text.entry.js.map +1 -1
- package/dist/esm-es5/covet-pics-crop-text.entry.js +1 -1
- package/dist/esm-es5/covet-pics-crop-text.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/covet-pics-widget/p-26698e63.entry.js.map +0 -1
- package/dist/covet-pics-widget/p-32f6f7e0.system.entry.js.map +0 -1
|
@@ -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-
|
|
82
|
-
"--covet-
|
|
83
|
-
"--covet-
|
|
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: '
|
|
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
|
};
|
|
@@ -1 +1 @@
|
|
|
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-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":";;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,4grBAA4grB,CAAC;AAC1irB,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,6BAA6B,EAAE,GAAG,QAAQ,EAAE;YAC5C,6BAA6B,EAAE,GAAG,QAAQ,IAAI;YAC9C,yBAAyB,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE;SAC/C,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-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}
|
|
@@ -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-
|
|
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-
|
|
503
|
+
font-size: var(--covet-crop-text-font-size);
|
|
504
504
|
line-height: 1.4;
|
|
505
|
-
-webkit-line-clamp: var(--covet-
|
|
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) {
|
|
@@ -69,13 +69,13 @@ export class CovetPicsCropText {
|
|
|
69
69
|
};
|
|
70
70
|
const { fontSize, maxLines } = calculateMaxLines();
|
|
71
71
|
return this.cropCSS = {
|
|
72
|
-
"--covet-
|
|
73
|
-
"--covet-
|
|
74
|
-
"--covet-
|
|
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: '
|
|
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() {
|
|
@@ -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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
|
|
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-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}"]}
|
|
@@ -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-
|
|
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
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var __awaiter=this&&this.__awaiter||function(e,t,i,r){function o(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,a){function s(e){try{d(r.next(e))}catch(e){a(e)}}function n(e){try{d(r["throw"](e))}catch(e){a(e)}}function d(e){e.done?i(e.value):o(e.value).then(s,n)}d((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,o,a,s;return s={next:n(0),throw:n(1),return:n(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function n(e){return function(t){return d([e,t])}}function d(n){if(r)throw new TypeError("Generator is already executing.");while(s&&(s=0,n[0]&&(i=0)),i)try{if(r=1,o&&(a=n[0]&2?o["return"]:n[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,n[1])).done)return a;if(o=0,a)n=[n[0]&2,a.value];switch(n[0]){case 0:case 1:a=n;break;case 4:i.label++;return{value:n[1],done:false};case 5:i.label++;o=n[1];n=[0];continue;case 7:n=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(n[0]===6||n[0]===2)){i=0;continue}if(n[0]===3&&(!a||n[1]>a[0]&&n[1]<a[3])){i.label=n[1];break}if(n[0]===6&&i.label<a[1]){i.label=a[1];a=n;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(n);break}if(a[2])i.ops.pop();i.trys.pop();continue}n=t.call(e,i)}catch(e){n=[6,e];o=0}finally{r=a=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};
|
|
2
2
|
/*!
|
|
3
3
|
* Copyright by Space Squirrel Ltd.
|
|
4
|
-
*/System.register(["./p-c95a507d.system.js","./p-67c6fa2f.system.js"],(function(e,t){"use strict";var i,r,o;return{setters:[function(t){i=t.p;r=t.b;e("setNonce",t.s)},function(e){o=e.g}],execute:function(){var e=this;var a=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return i(r)};a().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,o()];case 1:e.sent();return[2,r([["p-efe2be12.system",[[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-
|
|
4
|
+
*/System.register(["./p-c95a507d.system.js","./p-67c6fa2f.system.js"],(function(e,t){"use strict";var i,r,o;return{setters:[function(t){i=t.p;r=t.b;e("setNonce",t.s)},function(e){o=e.g}],execute:function(){var e=this;var a=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return i(r)};a().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,o()];case 1:e.sent();return[2,r([["p-efe2be12.system",[[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-81d20299.system",[[0,"covet-pics-crop-text",{text:[1],textClass:[1,"text-class"],textColor:[1,"text-color"],ratio:[16],cropCSS:[32]}]]],["p-2e286cc7.system",[[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-6212f7ae.system",[[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-30f32dbd.system",[[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-8772d5b0.system",[[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-0f82ac6d.system",[[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-f929bd16.system",[[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"]]]]]],t)]}}))}))}))}}}));
|
|
5
5
|
//# sourceMappingURL=p-7884e86b.system.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Copyright by Space Squirrel Ltd.
|
|
3
3
|
*/
|
|
4
|
-
System.register(["./p-c95a507d.system.js","./p-f976b6df.system.js"],(function(n){"use strict";var t,i,p,e,c,s;return{setters:[function(n){t=n.r;i=n.h;p=n.H;e=n.g},function(n){c=n.a;s=n.g}],execute:function(){var o='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}';var a=o;var r=n("covet_pics_crop_text",function(){function n(n){t(this,n);this.text="";this.textClass="";this.textColor="#000000";this.ratio=[{size:48,lines:2},{size:26,lines:5},{size:16,lines:8}];this.cropCSS={}}n.prototype.componentWillLoad=function(){var n=this;this.resizeObserver=new ResizeObserver((function(){if(n.elHeight!==c(n.el,"height")||n.elWidth!==c(n.el,"width")){n.elHeight=c(n.el,"height");n.elWidth=c(n.el,"width");n.getReviewCSS()}}));this.resizeObserver.observe(this.el);this.getReviewCSS()};n.prototype.disconnectedCallback=function(){this.resizeObserver.disconnect()};n.prototype.getReviewCSS=function(){var n=this;var t=s(this.el,"padding-top");var i=s(this.el,"padding-bottom");var p=c(this.el,"height")-t-i;var e=this.el.querySelector(".crop-text");if(this.text===null||e===null)return;e.style.fontSize="".concat(this.ratio[0].size,"px");var o=s(e,"line-height");e.style.webkitLineClamp="".concat(Math.round(p/o)+2);var a=function(){var t=n.ratio[0].size;var i=n.ratio[0].lines;var a=Math.round(c(e,"height")/o);for(var r=0;r<n.ratio.length;r++){if(r===n.ratio.length-1){if(i*o>p){t=n.ratio[r].size;i=Math.floor(p/o)>0?Math.floor(p/o):1}e.removeAttribute("style");return{fontSize:t,maxLines:i}}if(c(e,"height")<p&&a<=i){e.removeAttribute("style");return{fontSize:t,maxLines:i}}t=n.ratio[r+1].size;e.style.fontSize="".concat(n.ratio[r+1].size,"px");i=n.ratio[r+1].lines;o=s(e,"line-height");e.style.webkitLineClamp="".concat(Math.round(p/o)+2);a=Math.round(c(e,"height")/o)}};var r=a(),x=r.fontSize,d=r.maxLines;return this.cropCSS={"--covet-pics-crop-text-max-lines":"".concat(d),"--covet-pics-crop-text-font-size":"".concat(x,"px"),"--covet-pics-crop-text-color":"".concat(this.textColor)}};n.prototype.render=function(){return i(p,{key:"f2dc0d9c67513b8a31975298a9779acb2e276a7a",style:this.cropCSS},i("p",{key:"6f04f0699efe2124e66c6efb401f01a5360e597e",class:"crop-text ".concat(this.textClass),innerHTML:this.text}))};Object.defineProperty(n.prototype,"el",{get:function(){return e(this)},enumerable:false,configurable:true});return n}());r.style=a}}}));
|
|
5
|
-
//# sourceMappingURL=p-
|
|
4
|
+
System.register(["./p-c95a507d.system.js","./p-f976b6df.system.js"],(function(n){"use strict";var t,i,p,e,c,o;return{setters:[function(n){t=n.r;i=n.h;p=n.H;e=n.g},function(n){c=n.a;o=n.g}],execute:function(){var s='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}';var a=s;var r=n("covet_pics_crop_text",function(){function n(n){t(this,n);this.text="";this.textClass="";this.textColor="#000000";this.ratio=[{size:48,lines:2},{size:26,lines:5},{size:16,lines:8}];this.cropCSS={}}n.prototype.componentWillLoad=function(){var n=this;this.resizeObserver=new ResizeObserver((function(){if(n.elHeight!==c(n.el,"height")||n.elWidth!==c(n.el,"width")){n.elHeight=c(n.el,"height");n.elWidth=c(n.el,"width");n.getReviewCSS()}}));this.resizeObserver.observe(this.el);this.getReviewCSS()};n.prototype.disconnectedCallback=function(){this.resizeObserver.disconnect()};n.prototype.getReviewCSS=function(){var n=this;var t=o(this.el,"padding-top");var i=o(this.el,"padding-bottom");var p=c(this.el,"height")-t-i;var e=this.el.querySelector(".crop-text");if(this.text===null||e===null)return;e.style.fontSize="".concat(this.ratio[0].size,"px");var s=o(e,"line-height");e.style.webkitLineClamp="".concat(Math.round(p/s)+2);var a=function(){var t=n.ratio[0].size;var i=n.ratio[0].lines;var a=Math.round(c(e,"height")/s);for(var r=0;r<n.ratio.length;r++){if(r===n.ratio.length-1){if(i*s>p){t=n.ratio[r].size;i=Math.floor(p/s)>0?Math.floor(p/s):1}e.removeAttribute("style");return{fontSize:t,maxLines:i}}if(c(e,"height")<p&&a<=i){e.removeAttribute("style");return{fontSize:t,maxLines:i}}t=n.ratio[r+1].size;e.style.fontSize="".concat(n.ratio[r+1].size,"px");i=n.ratio[r+1].lines;s=o(e,"line-height");e.style.webkitLineClamp="".concat(Math.round(p/s)+2);a=Math.round(c(e,"height")/s)}};var r=a(),x=r.fontSize,d=r.maxLines;return this.cropCSS={"--covet-crop-text-max-lines":"".concat(d),"--covet-crop-text-font-size":"".concat(x,"px"),"--covet-crop-text-color":"".concat(this.textColor)}};n.prototype.render=function(){return i(p,{key:"267a53f8c90cb3c1fc0bf646745538a9f6d50d4b",style:this.cropCSS},i("p",{key:"69ae4dc6cfb2116c4b4d1bcdf2f25750b8993c36",class:"crop-text ".concat(this.textClass),innerHTML:this.text}))};Object.defineProperty(n.prototype,"el",{get:function(){return e(this)},enumerable:false,configurable:true});return n}());r.style=a}}}));
|
|
5
|
+
//# sourceMappingURL=p-81d20299.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["covetPicsCropTextCss","CovetPicsCropTextStyle0","CovetPicsCropText","exports","size","lines","class_1","prototype","componentWillLoad","_this","this","resizeObserver","ResizeObserver","elHeight","getSize","el","elWidth","getReviewCSS","observe","disconnectedCallback","disconnect","PT","getStyle","PB","textEl","querySelector","text","style","fontSize","concat","ratio","textElLineHeight","webkitLineClamp","Math","round","calculateMaxLines","maxLines","testMaxLines","i","length","floor","removeAttribute","_a","cropCSS","textColor","render","h","Host","key","class","textClass","innerHTML"],"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}"],"mappings":"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"}
|