@covet-pics/covet-pics-widget 0.138.1 → 0.138.3

package/dist/cjs/covet-pics-crop-text.cjs.entry.js

@@ -0,0 +1,94 @@
+/*!
+ * Copyright (c) 2020 by Space Squirrel Ltd.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0a09c86.js');
+const utils = require('./utils-93dd4f93.js');
+
+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@container covet-pics-gallery-item-detail (max-width: 159.98px) {\n  covet-pics-crop-text.basic-1 {\n    padding: 12px;\n  }\n}\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@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@container covet-pics-gallery-item-detail (min-width: 480px) {\n  covet-pics-crop-text.basic-1 {\n    padding: 64px;\n  }\n}\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@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}\ncovet-pics-crop-text.basic-2 {\n  background-color: #F7F7F7;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n@container covet-pics-gallery-item-detail (max-width: 159.98px) {\n  covet-pics-crop-text.basic-2 {\n    padding: 12px;\n  }\n}\ncovet-pics-crop-text.basic-2.size-xs.verified {\n  padding: 35px 12px 12px 12px;\n}\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}\ncovet-pics-crop-text.basic-2.size-sm.verified {\n  padding: 33px 16px 16px 16px;\n}\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@container covet-pics-gallery-item-detail (min-width: 480px) {\n  covet-pics-crop-text.basic-2 {\n    padding: 64px;\n  }\n}\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@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}\ncovet-pics-crop-text.basic-3 {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  background-color: #F7F7F7;\n}\n@container covet-pics-gallery-item-detail (max-width: 159.98px) {\n  covet-pics-crop-text.basic-3 {\n    padding: 12px;\n  }\n}\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@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@container covet-pics-gallery-item-detail (min-width: 480px) {\n  covet-pics-crop-text.basic-3 {\n    padding: 64px;\n  }\n}\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@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}\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@container covet-pics-gallery-item-detail (max-width: 159.98px) {\n  covet-pics-crop-text.basic-4 {\n    padding: 12px;\n  }\n}\ncovet-pics-crop-text.basic-4.size-xs.verified {\n  padding: 35px 12px 12px 12px;\n}\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}\ncovet-pics-crop-text.basic-4.size-sm.verified {\n  padding: 33px 16px 16px 16px;\n}\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@container covet-pics-gallery-item-detail (min-width: 480px) {\n  covet-pics-crop-text.basic-4 {\n    padding: 64px;\n  }\n}\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@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}\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@container covet-pics-gallery-item-detail (max-width: 159.98px) {\n  covet-pics-crop-text.basic-6 {\n    padding: 12px;\n  }\n}\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@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@container covet-pics-gallery-item-detail (min-width: 480px) {\n  covet-pics-crop-text.basic-6 {\n    padding: 64px;\n  }\n}\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@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}\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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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@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}";
+
+const CovetPicsCropText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.text = "";
+    this.textClass = "";
+    this.textColor = "#000000";
+    this.ratio = [
+      { size: 48, lines: 2 },
+      { size: 26, lines: 5 },
+      { size: 16, lines: 8 }
+    ];
+    this.cropCSS = {};
+  }
+  componentWillLoad() {
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.elHeight !== utils.getSize(this.el, "height") || this.elWidth !== utils.getSize(this.el, "width")) {
+        this.elHeight = utils.getSize(this.el, "height");
+        this.elWidth = utils.getSize(this.el, "width");
+        this.getReviewCSS();
+      }
+    });
+    this.resizeObserver.observe(this.el);
+    this.getReviewCSS();
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  getReviewCSS() {
+    const PT = utils.getStyle(this.el, "padding-top");
+    const PB = utils.getStyle(this.el, "padding-bottom");
+    const elHeight = utils.getSize(this.el, "height") - PT - PB;
+    const textEl = this.el.querySelector(".crop-text");
+    if (this.text === null || textEl === null)
+      return;
+    textEl.style.fontSize = `${this.ratio[0].size}px`;
+    let textElLineHeight = utils.getStyle(textEl, "line-height");
+    textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;
+    const calculateMaxLines = () => {
+      let fontSize = this.ratio[0].size;
+      let maxLines = this.ratio[0].lines;
+      let testMaxLines = Math.round(utils.getSize(textEl, "height") / textElLineHeight);
+      for (let i = 0; i < this.ratio.length; i++) {
+        // last
+        if (i === this.ratio.length - 1) {
+          if (maxLines * textElLineHeight > elHeight) {
+            fontSize = this.ratio[i].size;
+            maxLines = Math.floor(elHeight / textElLineHeight) > 0
+              ? Math.floor(elHeight / textElLineHeight)
+              : 1;
+          }
+          textEl.removeAttribute("style");
+          return { fontSize, maxLines };
+        }
+        if (utils.getSize(textEl, "height") < elHeight && testMaxLines <= maxLines) {
+          textEl.removeAttribute("style");
+          return { fontSize, maxLines };
+        }
+        fontSize = this.ratio[i + 1].size;
+        textEl.style.fontSize = `${this.ratio[i + 1].size}px`;
+        maxLines = this.ratio[i + 1].lines;
+        textElLineHeight = utils.getStyle(textEl, "line-height");
+        textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;
+        testMaxLines = Math.round(utils.getSize(textEl, "height") / textElLineHeight);
+      }
+    };
+    const { fontSize, maxLines } = calculateMaxLines();
+    return this.cropCSS = {
+      "--covet-pics-crop-text-max-lines": `${maxLines}`,
+      "--covet-pics-crop-text-font-size": `${fontSize}px`,
+      "--covet-pics-crop-text-color": `${this.textColor}`,
+    };
+  }
+  render() {
+    return (index.h(index.Host, { style: this.cropCSS }, index.h("p", { class: `crop-text ${this.textClass}`, innerHTML: this.text })));
+  }
+  get el() { return index.getElement(this); }
+};
+CovetPicsCropText.style = covetPicsCropTextCss;
+
+exports.covet_pics_crop_text = CovetPicsCropText;
+
+//# sourceMappingURL=covet-pics-crop-text.cjs.entry.js.map

package/dist/cjs/covet-pics-crop-text.cjs.entry.js.map

@@ -0,0 +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}

package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js

@@ -3616,10 +3616,7 @@ const CovetPicsGalleryGrid = class {
       : `${layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(createdTime)}`;
   }
   renderStandardItem(item, idx, itemsLength) {
-    const itemWidth = this.isDesktopScreen
-      ? (100 - (this.settings.item_padding * (this.settings.gallery_photos_per_row - 1))) / this.settings.gallery_photos_per_row
-      : (100 - (this.settings.item_mobile_padding * (this.settings.gallery_mobile_photos_per_row - 1))) / this.settings.gallery_mobile_photos_per_row;
-    return (index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row, this.isHighlighted(idx)), "item-id": item.id, "item-source": item.source, "item-index": idx, caption: item.caption, "item-type": item.data_type, links: item.links, url: item.url, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "item-width": itemWidth, "created-time": item.created_time, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(item.created_time)}`, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore }));
+    return (index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row, this.isHighlighted(idx)), "item-id": item.id, "item-source": item.source, "item-index": idx, caption: item.caption, "item-type": item.data_type, links: item.links, url: item.url, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(item.created_time)}`, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore }));
   }
   renderStandardUploadItem(item, idx, itemsLength) {
     return index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
@@ -3628,10 +3625,7 @@ const CovetPicsGalleryGrid = class {
     return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, "image-url": item.imageUrl, "item-source": item.source, "item-index": idx, appStore: this.appStore, "aria-label": `click on for upload image in gallery, ${this.layout}-item ${idx + 1}/${itemsLength},`, role: "listitem" });
   }
   renderDetailItem(item, idx, itemsLength) {
-    const itemWidth = this.isDesktopScreen
-      ? (100 - (this.settings.item_padding * (this.settings.gallery_photos_per_row - 1))) / this.settings.gallery_photos_per_row
-      : (100 - (this.settings.item_mobile_padding * (this.settings.gallery_mobile_photos_per_row - 1))) / this.settings.gallery_mobile_photos_per_row;
-    return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row), "item-id": item.id, "item-index": idx, "item-source": item.source, "item-type": item.data_type, "item-width": itemWidth, links: item.links, url: item.url, "user-name": item.username, caption: item.caption, "created-time": item.created_time, verified: item.verified, rating: item.rating !== null ? item.rating : 0, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(item.created_time)}`, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore });
+    return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.settings.gallery_photos_per_row, this.settings.gallery_mobile_photos_per_row), "item-id": item.id, "item-index": idx, "item-source": item.source, "item-type": item.data_type, links: item.links, url: item.url, "user-name": item.username, caption: item.caption, "created-time": item.created_time, verified: item.verified, rating: item.rating !== null ? item.rating : 0, role: "listitem", "aria-label": `${this.layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(item.created_time)}`, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore });
   }
   renderHeader() {
     return (index.h("covet-pics-gallery-header", { "product-title": this.productTitle, rating: this.rating, breakdown: this.breakdown, appStore: this.appStore, "aria-hidden": `${this.isGridDisabled}` }));
@@ -4168,16 +4162,10 @@ const CovetPicsGallerySlider = class {
     return (index.h("covet-pics-gallery-item", { class: "swiper-slide slide", "item-source": item.source, "image-url": item.imageUrl, "item-index": idx, "aria-label": `click on for upload image in slider, slide ${idx + 1}/${itemsLength},`, appStore: this.appStore }));
   }
   renderStandardItem(item, idx, itemsLength) {
-    const itemWidth = this.isDesktopScreen
-      ? (100 - (this.appState.settings.item_padding * (this.appState.settings.slideshow_photos_per_row - 1))) / this.appState.settings.slideshow_photos_per_row
-      : (100 - (this.appState.settings.item_mobile_padding * (this.appState.settings.slideshow_mobile_photos_per_row - 1))) / this.appState.settings.slideshow_mobile_photos_per_row;
-    return (index.h("covet-pics-gallery-item", { class: "swiper-slide", "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, links: item.links, url: item.url, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, "item-type": item.data_type, caption: item.caption, "item-width": itemWidth, "item-index": idx, appStore: this.appStore }));
+    return (index.h("covet-pics-gallery-item", { class: "swiper-slide", "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, links: item.links, url: item.url, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, "item-type": item.data_type, caption: item.caption, "item-index": idx, appStore: this.appStore }));
   }
   renderDetailItem(item, idx, itemsLength) {
-    const itemWidth = this.isDesktopScreen
-      ? (100 - (this.appState.settings.item_padding * (this.appState.settings.slideshow_photos_per_row - 1))) / this.appState.settings.slideshow_photos_per_row
-      : (100 - (this.appState.settings.item_mobile_padding * (this.appState.settings.slideshow_mobile_photos_per_row - 1))) / this.appState.settings.slideshow_mobile_photos_per_row;
-    return (index.h("covet-pics-gallery-item-detail", { class: "swiper-slide", "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, "item-type": item.data_type, "item-width": itemWidth, "lazy-load": true, links: item.links, url: item.url, "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, verified: item.verified, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in main slider`, appStore: this.appStore, "item-index": idx }));
+    return (index.h("covet-pics-gallery-item-detail", { class: "swiper-slide", "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, "item-type": item.data_type, "lazy-load": true, links: item.links, url: item.url, "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, verified: item.verified, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in main slider`, appStore: this.appStore, "item-index": idx }));
   }
   render() {
     if (this.items !== undefined) {