@covet-pics/covet-pics-widget 0.169.3 → 0.169.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-gallery-grid_6.cjs.entry.js +15 -3
- package/dist/collection/components/covet-pics-gallery-grid/covet-pics-gallery-grid.css +44 -0
- package/dist/collection/components/covet-pics-gallery-grid/covet-pics-gallery-grid.js +14 -2
- package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
- package/dist/covet-pics-widget/{p-18341722.entry.js → p-85e70a71.entry.js} +6 -6
- package/dist/esm/covet-pics-gallery-grid_6.entry.js +15 -3
- package/dist/types/components/covet-pics-gallery-grid/covet-pics-gallery-grid.d.ts +2 -0
- package/package.json +1 -1
|
@@ -3456,7 +3456,7 @@ function requireIsotope () {
|
|
|
3456
3456
|
var isotopeExports = requireIsotope();
|
|
3457
3457
|
var Isotope = /*@__PURE__*/getDefaultExportFromCjs(isotopeExports);
|
|
3458
3458
|
|
|
3459
|
-
const covetPicsGalleryGridCss = "covet-pics-gallery-grid{--covet-filter-font-weight:var(--covet-custom-filter-font-weight, var(--covet-internal-filter-font-weight));--covet-filter-font-size:var(--covet-custom-filter-font-size, var(--covet-internal-filter-font-size));--covet-filter-font-color:var(--covet-custom-filter-font-color, var(--covet-internal-filter-font-color));--covet-filter-font-active-color:var(--covet-custom-filter-font-active-color, var(--covet-internal-filter-font-active-color));--covet-filter-padding:var(--covet-custom-filter-padding, var(--covet-internal-filter-padding));--covet-filter-mb:var(--covet-custom-filter-mb, 8px);--covet-load-more-border:var(--covet-custom-load-more-border, var(--covet-internal-load-more-border));--covet-load-more-color:var(--covet-custom-load-more-color, var(--covet-internal-load-more-color));--covet-load-more-font-size:var(--covet-custom-load-more-font-size, var(--covet-internal-load-more-font-size));--covet-load-more-font-style:var(--covet-custom-load-more-font-style, var(--covet-internal-load-more-font-style));--covet-load-more-padding:var(--covet-custom-load-more-padding, var(--covet-internal-load-more-padding));--covet-desktop-item-width:calc((100 - (var(--covet-desktop-photos-per-row) - 1) * var(--covet-desktop-item-padding)) / var(--covet-desktop-photos-per-row));--covet-mobile-item-width:calc((100 - (var(--covet-mobile-photos-per-row) - 1) * var(--covet-mobile-item-padding)) / var(--covet-mobile-photos-per-row));--covet-desktop-highlighted-width:calc(var(--covet-desktop-item-width) * 2 + var(--covet-desktop-item-padding));--covet-mobile-highlighted-width:calc(var(--covet-mobile-item-width) * 2 + var(--covet-mobile-item-padding));--covet-desktop-grid-space:calc(100 * 100 / var(--covet-desktop-item-width) * var(--covet-desktop-item-padding) / 100);--covet-mobile-grid-space:calc(100 * 100 / var(--covet-mobile-item-width) * var(--covet-mobile-item-padding) / 100)}.filters{--covet-popup-filter-icon-close:#FFFFFF;--covet-popup-filters-icon-color:var(--covet-filter-font-color);position:relative;display:flex;align-items:flex-start}.filters .filters-collapse{position:relative;margin-left:auto;margin-bottom:var(--covet-filter-mb)}.filters .btn-filter-collapse{padding:12px 16px;border-radius:99px;border:1px solid #E5E4EB;background:#FFFFFF;font-size:var(--covet-filter-font-size);font-family:var(--covet-font-family);font-weight:var(--covet-filter-font-weight);color:var(--covet-filter-font-color);font-weight:500;margin-left:auto;display:flex;cursor:pointer;flex:none;align-items:center;transition:border 0.2s ease-in}.filters .btn-filter-collapse:hover,.filters .btn-filter-collapse:active,.filters .btn-filter-collapse:focus{border:1px solid var(--covet-filter-font-color)}.filters .btn-filters-close{--covet-popup-filter-icon-close:#000000;padding:0;border:none;display:block;cursor:pointer;background-color:#FFFFFF;width:16px;height:16px;border-radius:50%;transition:opacity 0.3s ease-in-out;margin-left:auto;display:block}.filters .btn-filters-close:hover,.filters .btn-filters-close:active,.filters .btn-filters-close:focus{opacity:0.5}.filters .filters-collapse-overlay.style_3{position:absolute;bottom:0;transform:translateY(calc(100% + 5px));right:0;z-index:-1;overflow:hidden;visibility:hidden;transform-origin:center center;opacity:0;transition:opacity 0.2s ease-in-out}.filters .filters-collapse-overlay.style_3.show{z-index:10;visibility:visible;opacity:1}.filters .filters-collapse-overlay.style_4{position:fixed;top:0;left:0;bottom:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden;visibility:hidden;opacity:0;z-index:-1;transition:opacity 0.2s ease-in;background:rgba(0, 0, 0, 0.5)}.filters .filters-collapse-overlay.style_4.show{z-index:10;opacity:1;visibility:visible;border:1px solid #E5E4EB}.filters .filters-collapse-body.style_3{transform:scale(0.9);margin:0;padding:0px;border-radius:8px;background:#FFFFFF;overflow:hidden;transform-origin:center center;border:1px solid #E5E4EB;transition:transform 0.2s ease-in-out}.filters .filters-collapse-body.style_3.show{transform:scale(1)}.filters .filters-collapse-body.style_4{padding:16px 16px 8px 16px;border-radius:16px;transform:scale(0.9);background:#FFFFFF;overflow:hidden;opacity:0;transition:transform 0.2s ease-in, opacity 0.2s ease-in;width:430px}.filters .filters-collapse-body.style_4.show{z-index:10;opacity:1;visibility:visible;transform:scale(1);border:1px solid #E5E4EB}@media only screen and (max-width: 479px){.filters .filters-collapse-body.style_4{box-sizing:border-box;width:calc(100% - 20px);flex:none}}.filters .filters-collapse-controls{display:flex;justify-content:flex-end}.filters .filters-list{list-style:none;padding:0;padding:0;margin:0}.filters .filters-list.scroll{overflow-x:auto;flex-wrap:nowrap;cursor:grab;margin-bottom:8px}.filters .filters-list.scroll::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.1);border-radius:4px}.filters .filters-list.scroll::-webkit-scrollbar{width:4px;height:4px;background-color:rgba(0, 0, 0, 0.08)}.filters .filters-list.wrap{overflow:hidden;flex-wrap:wrap}.filters .filters-list.active{display:flex}.filters .filters-list.active.wrap{flex-wrap:wrap}.filters .filters-list.style_4{display:flex;flex-wrap:wrap}.filters .filter-list-item.style_3:first-child{margin-top:4px}.filters .filter-list-item.style_3:last-child{margin-bottom:4px}.filters .btn-filter{cursor:pointer;outline:none !important;font-weight:var(--covet-filter-font-weight);font-size:var(--covet-filter-font-size);color:var(--covet-filter-font-color);font-family:var(--covet-font-family);white-space:nowrap}.filters .btn-filter.style_1{padding-left:var(--covet-filter-padding);padding-right:var(--covet-filter-padding);margin-top:0;margin-bottom:var(--covet-filter-mb);text-decoration:none;display:inline-block;text-align:center;cursor:pointer;opacity:1;text-transform:uppercase;letter-spacing:1px;border:none;background-color:transparent;position:relative}.filters .btn-filter.style_1:after{content:\"\";display:block;position:absolute;top:0;right:0;width:1px;height:100%;background-color:rgba(134, 132, 138, 0.3)}.filters .btn-filter.style_1.last:after{display:none}.filters .btn-filter.style_1:hover,.filters .btn-filter.style_1:active,.filters .btn-filter.style_1:focus{text-decoration:underline}.filters .btn-filter.style_1.selected{color:var(--covet-filter-font-active-color)}.filters .btn-filter.style_1.selected:hover,.filters .btn-filter.style_1.selected:active,.filters .btn-filter.style_1.selected:focus{text-decoration:line-through}.filters .btn-filter.style_1.selected.focus-in:hover,.filters .btn-filter.style_1.selected.focus-in:active,.filters .btn-filter.style_1.selected.focus-in:focus{text-decoration:none}.filters .btn-filter.style_2{border-radius:99px;background-color:#FFFFFF;border:1px solid var(--grays-gray-300, #F2F0F7);margin-right:8px;margin-bottom:var(--covet-filter-mb);text-transform:capitalize;line-height:1.4;padding:8px 16px;transition:color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out}.filters .btn-filter.style_2.last{margin-right:0}.filters .btn-filter.style_2:hover,.filters .btn-filter.style_2:active,.filters .btn-filter.style_2:focus{border:1px solid var(--covet-filter-font-active-color)}.filters .btn-filter.style_2.selected{background-color:var(--covet-filter-font-active-color);color:#FFFFFF}.filters .btn-filter.style_2.selected:hover,.filters .btn-filter.style_2.selected:active,.filters .btn-filter.style_2.selected:focus{text-decoration:line-through}.filters .btn-filter.style_2.selected.focus-in:hover,.filters .btn-filter.style_2.selected.focus-in:active,.filters .btn-filter.style_2.selected.focus-in:focus{text-decoration:none}.filters .btn-filter.style_3{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:none;padding:16px 20px;background-color:#FFFFFF;--covet-popup-filter-icon-plus:var(--covet-filter-font-color);--covet-popup-filter-icon-checked:var(--covet-filter-font-color);width:156px;opacity:1;transition:opacity 0.25s ease-in-out;text-transform:capitalize}.filters .btn-filter.style_3:hover,.filters .btn-filter.style_3:active,.filters .btn-filter.style_3:focus,.filters .btn-filter.style_3.selected{opacity:0.5}.filters .btn-filter.style_3.active{width:auto;padding:12px 16px;border-radius:99px;background-color:var(--covet-filter-font-active-color);text-align:center;color:#FFFFFF;display:flex;align-items:center;margin-left:0;margin-right:8px;margin-top:0;margin-bottom:var(--covet-filter-mb);cursor:pointer;opacity:1}.filters .btn-filter.style_3.active:hover,.filters .btn-filter.style_3.active:active,.filters .btn-filter.style_3.active:focus{text-decoration:line-through}.filters .btn-filter.style_4{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:99px;border:1px solid #E5E4EB;background-color:#FFFFFF;margin-top:0;margin-right:8px;margin-bottom:var(--covet-filter-mb);transition:color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;text-transform:capitalize;color:var(--covet-filter-font-color)}.filters .btn-filter.style_4:hover,.filters .btn-filter.style_4:active,.filters .btn-filter.style_4:focus{border:1px solid var(--covet-filter-font-active-color)}.filters .btn-filter.style_4.selected{border:1px solid var(--covet-filter-font-active-color);background-color:var(--covet-filter-font-active-color);color:#FFFFFF}.filters .btn-filter.style_4.selected:hover,.filters .btn-filter.style_4.selected:active,.filters .btn-filter.style_4.selected:focus{text-decoration:line-through}.filters .btn-filter.style_4.selected.focus-in:hover,.filters .btn-filter.style_4.selected.focus-in:active,.filters .btn-filter.style_4.selected.focus-in:focus{text-decoration:none}.filters .btn-filter.style_4.active{background-color:var(--covet-filter-font-active-color);color:#FFFFFF}.filters .btn-filter.style_4.active:hover,.filters .btn-filter.style_4.active:active,.filters .btn-filter.style_4.active:focus{text-decoration:line-through}.filters .icon-filters-svg{margin-right:8px;line-height:1;display:inline-flex;flex:none}.filters .icon-filters-svg.icon-right{margin-left:8px;margin-right:0}.filters .filter-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery{margin:0;padding:0;list-style:none;display:block}.gallery.grid{display:grid;grid-template-columns:repeat(var(--covet-mobile-photos-per-row), calc(var(--covet-mobile-item-width) * 1%));-moz-column-gap:calc(var(--covet-mobile-item-padding) * 1%);column-gap:calc(var(--covet-mobile-item-padding) * 1%);grid-auto-flow:dense}.grid-sizer{width:calc(var(--covet-mobile-item-width) * 1%)}.gutter-sizer{width:calc(var(--covet-mobile-item-padding) * 1%)}@media only screen and (min-width: 800px){.gallery.grid{grid-template-columns:repeat(var(--covet-desktop-photos-per-row), calc(var(--covet-desktop-item-width) * 1%));-moz-column-gap:calc(var(--covet-desktop-item-padding) * 1%);column-gap:calc(var(--covet-desktop-item-padding) * 1%)}.grid-sizer{width:calc(var(--covet-desktop-item-width) * 1%)}.gutter-sizer{width:calc(var(--covet-desktop-item-padding) * 1%)}}.loading-animation{display:none;justify-content:center}.loading-animation svg{width:50px;height:50px}.loading-animation svg circle{fill:var(--covet-load-more-color)}.loading-animation svg .dot-2,.loading-animation svg .dot-3{opacity:0.4}.loading-animation.show{display:flex}.load-more{display:flex;justify-content:center;align-items:center}.btn-load-more{font-size:var(--covet-load-more-font-size);font-weight:var(--covet-load-more-font-style);font-family:inherit;color:var(--covet-load-more-color);background:none;border:0px solid;margin:20px 0;outline:none;display:flex;justify-content:center;align-items:center;cursor:pointer}.btn-load-more:hover,.btn-load-more:active,.btn-load-more:focus{opacity:0.7}.btn-load-more .icon{display:flex;margin-left:8px}.btn-load-more .icon svg{width:100%;height:100%}.btn-load-more.btn_style_1{padding:0 0 var(--covet-load-more-padding) 0;border-bottom:var(--covet-load-more-border) solid var(--covet-load-more-color)}.btn-load-more.btn_style_1 .icon{display:none}.btn-load-more.btn_style_2{padding:var(--covet-load-more-padding) calc(var(--covet-load-more-padding) * 2);border:var(--covet-load-more-border) solid var(--covet-load-more-color)}.btn-load-more.btn_style_2 .icon{display:none}.btn-load-more.btn_style_3{padding:var(--covet-load-more-padding) calc(var(--covet-load-more-padding) * 2);border:var(--covet-load-more-border) solid var(--covet-load-more-color)}.btn-load-more.btn_style_3 .icon{width:var(--covet-load-more-font-size);height:var(--covet-load-more-font-size);display:flex;margin-left:8px}.btn-load-more.btn_style_3 .icon svg .dynamic-stroke{stroke:var(--covet-load-more-color)}.btn-load-more.btn_style_4 .text{display:none}.btn-load-more.btn_style_4 .icon{width:32px;height:32px;margin:0}.btn-load-more.btn_style_4 .icon svg path{fill:var(--covet-load-more-color)}.btn-load-more.btn_style_5 .text{display:none}.btn-load-more.btn_style_5 .icon{width:42px;height:42px;margin:0}.btn-load-more.btn_style_5 .icon svg path{fill:var(--covet-load-more-color)}";
|
|
3459
|
+
const covetPicsGalleryGridCss = "covet-pics-gallery-grid{--covet-filter-font-weight:var(--covet-custom-filter-font-weight, var(--covet-internal-filter-font-weight));--covet-filter-font-size:var(--covet-custom-filter-font-size, var(--covet-internal-filter-font-size));--covet-filter-font-color:var(--covet-custom-filter-font-color, var(--covet-internal-filter-font-color));--covet-filter-font-active-color:var(--covet-custom-filter-font-active-color, var(--covet-internal-filter-font-active-color));--covet-filter-padding:var(--covet-custom-filter-padding, var(--covet-internal-filter-padding));--covet-filter-mb:var(--covet-custom-filter-mb, 8px);--covet-load-more-border:var(--covet-custom-load-more-border, var(--covet-internal-load-more-border));--covet-load-more-color:var(--covet-custom-load-more-color, var(--covet-internal-load-more-color));--covet-load-more-font-size:var(--covet-custom-load-more-font-size, var(--covet-internal-load-more-font-size));--covet-load-more-font-style:var(--covet-custom-load-more-font-style, var(--covet-internal-load-more-font-style));--covet-load-more-padding:var(--covet-custom-load-more-padding, var(--covet-internal-load-more-padding));--covet-desktop-item-width:calc((100 - (var(--covet-desktop-photos-per-row) - 1) * var(--covet-desktop-item-padding)) / var(--covet-desktop-photos-per-row));--covet-mobile-item-width:calc((100 - (var(--covet-mobile-photos-per-row) - 1) * var(--covet-mobile-item-padding)) / var(--covet-mobile-photos-per-row));--covet-desktop-highlighted-width:calc(var(--covet-desktop-item-width) * 2 + var(--covet-desktop-item-padding));--covet-mobile-highlighted-width:calc(var(--covet-mobile-item-width) * 2 + var(--covet-mobile-item-padding));--covet-desktop-grid-space:calc(100 * 100 / var(--covet-desktop-item-width) * var(--covet-desktop-item-padding) / 100);--covet-mobile-grid-space:calc(100 * 100 / var(--covet-mobile-item-width) * var(--covet-mobile-item-padding) / 100)}.filters{--covet-popup-filter-icon-close:#FFFFFF;--covet-popup-filters-icon-color:var(--covet-filter-font-color);position:relative;display:flex;align-items:flex-start}.filters .filters-collapse{position:relative;margin-left:auto;margin-bottom:var(--covet-filter-mb);display:flex}.filters .btn-filter-collapse{padding:12px 16px;border-radius:99px;border:1px solid #E5E4EB;background:#FFFFFF;font-size:var(--covet-filter-font-size);font-family:var(--covet-font-family);font-weight:var(--covet-filter-font-weight);color:var(--covet-filter-font-color);font-weight:500;margin-left:auto;display:flex;cursor:pointer;flex:none;align-items:center;transition:border 0.2s ease-in}.filters .btn-filter-collapse:hover,.filters .btn-filter-collapse:active,.filters .btn-filter-collapse:focus{border:1px solid var(--covet-filter-font-color)}.filters .btn-filters-close{--covet-popup-filter-icon-close:#000000;padding:0;border:none;display:block;cursor:pointer;background-color:#FFFFFF;width:16px;height:16px;border-radius:50%;transition:opacity 0.3s ease-in-out;margin-left:auto;display:block}.filters .btn-filters-close:hover,.filters .btn-filters-close:active,.filters .btn-filters-close:focus{opacity:0.5}.filters .filters-collapse-overlay.style_3{position:absolute;bottom:0;transform:translateY(calc(100% + 5px));right:0;z-index:-1;overflow:hidden;visibility:hidden;transform-origin:center center;opacity:0;transition:opacity 0.2s ease-in-out}.filters .filters-collapse-overlay.style_3.show{z-index:10;visibility:visible;opacity:1}.filters .filters-collapse-overlay.style_4{position:fixed;top:0;left:0;bottom:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden;visibility:hidden;opacity:0;z-index:-1;transition:opacity 0.2s ease-in;background:rgba(0, 0, 0, 0.5)}.filters .filters-collapse-overlay.style_4.show{z-index:10;opacity:1;visibility:visible;border:1px solid #E5E4EB}.filters .filters-collapse-body.style_3{transform:scale(0.9);margin:0;padding:0px;border-radius:8px;background:#FFFFFF;overflow:hidden;transform-origin:center center;border:1px solid #E5E4EB;transition:transform 0.2s ease-in-out}.filters .filters-collapse-body.style_3.show{transform:scale(1)}.filters .filters-collapse-body.style_4{padding:16px 16px 8px 16px;border-radius:16px;transform:scale(0.9);background:#FFFFFF;overflow:hidden;opacity:0;transition:transform 0.2s ease-in, opacity 0.2s ease-in;width:430px}.filters .filters-collapse-body.style_4.show{z-index:10;opacity:1;visibility:visible;transform:scale(1);border:1px solid #E5E4EB}@media only screen and (max-width: 479px){.filters .filters-collapse-body.style_4{box-sizing:border-box;width:calc(100% - 20px);flex:none}}.filters .filters-collapse-controls{display:flex;justify-content:flex-end}.filters .filters-list{list-style:none;padding:0;padding:0;margin:0}.filters .filters-list.scroll{overflow-x:auto;flex-wrap:nowrap;cursor:grab;margin-bottom:8px}.filters .filters-list.scroll::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.1);border-radius:4px}.filters .filters-list.scroll::-webkit-scrollbar{width:4px;height:4px;background-color:rgba(0, 0, 0, 0.08)}.filters .filters-list.wrap{overflow:hidden;flex-wrap:wrap}.filters .filters-list.active{display:flex}.filters .filters-list.active.wrap{flex-wrap:wrap}.filters .filters-list.style_4{display:flex;flex-wrap:wrap;overflow-y:auto;max-height:calc(100vh - 80px - 32px)}@media only screen and (max-width: 799px){.filters .filters-list.style_4{max-height:calc(100vh - 40px - 32px)}}.filters .filter-list-item.style_3:first-child{margin-top:4px}.filters .filter-list-item.style_3:last-child{margin-bottom:4px}.filters .btn-filter{cursor:pointer;outline:none !important;font-weight:var(--covet-filter-font-weight);font-size:var(--covet-filter-font-size);color:var(--covet-filter-font-color);font-family:var(--covet-font-family);white-space:nowrap}.filters .btn-filter.style_1{padding-left:var(--covet-filter-padding);padding-right:var(--covet-filter-padding);margin-top:0;margin-bottom:var(--covet-filter-mb);text-decoration:none;display:inline-block;text-align:center;cursor:pointer;opacity:1;text-transform:uppercase;letter-spacing:1px;border:none;background-color:transparent;position:relative}.filters .btn-filter.style_1:after{content:\"\";display:block;position:absolute;top:0;right:0;width:1px;height:100%;background-color:rgba(134, 132, 138, 0.3)}.filters .btn-filter.style_1.last:after{display:none}.filters .btn-filter.style_1:hover,.filters .btn-filter.style_1:active,.filters .btn-filter.style_1:focus{text-decoration:underline}.filters .btn-filter.style_1.selected{color:var(--covet-filter-font-active-color)}.filters .btn-filter.style_1.selected:hover,.filters .btn-filter.style_1.selected:active,.filters .btn-filter.style_1.selected:focus{text-decoration:line-through}.filters .btn-filter.style_1.selected.focus-in:hover,.filters .btn-filter.style_1.selected.focus-in:active,.filters .btn-filter.style_1.selected.focus-in:focus{text-decoration:none}.filters .btn-filter.style_2{border-radius:99px;background-color:#FFFFFF;border:1px solid var(--grays-gray-300, #F2F0F7);margin-right:8px;margin-bottom:var(--covet-filter-mb);text-transform:capitalize;line-height:1.4;padding:8px 16px;transition:color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out}.filters .btn-filter.style_2.last{margin-right:0}.filters .btn-filter.style_2:hover,.filters .btn-filter.style_2:active,.filters .btn-filter.style_2:focus{border:1px solid var(--covet-filter-font-active-color)}.filters .btn-filter.style_2.selected{background-color:var(--covet-filter-font-active-color);color:#FFFFFF}.filters .btn-filter.style_2.selected:hover,.filters .btn-filter.style_2.selected:active,.filters .btn-filter.style_2.selected:focus{text-decoration:line-through}.filters .btn-filter.style_2.selected.focus-in:hover,.filters .btn-filter.style_2.selected.focus-in:active,.filters .btn-filter.style_2.selected.focus-in:focus{text-decoration:none}.filters .btn-filter.style_3{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:none;padding:16px 20px;background-color:#FFFFFF;--covet-popup-filter-icon-plus:var(--covet-filter-font-color);--covet-popup-filter-icon-checked:var(--covet-filter-font-color);width:156px;opacity:1;transition:opacity 0.25s ease-in-out;text-transform:capitalize}.filters .btn-filter.style_3:hover,.filters .btn-filter.style_3:active,.filters .btn-filter.style_3:focus,.filters .btn-filter.style_3.selected{opacity:0.5}.filters .btn-filter.style_3.active{width:auto;padding:12px 16px;border-radius:99px;background-color:var(--covet-filter-font-active-color);text-align:center;color:#FFFFFF;display:flex;align-items:center;margin-left:0;margin-right:8px;margin-top:0;margin-bottom:var(--covet-filter-mb);cursor:pointer;opacity:1}.filters .btn-filter.style_3.active:hover,.filters .btn-filter.style_3.active:active,.filters .btn-filter.style_3.active:focus{text-decoration:line-through}.filters .btn-filter.style_3.crossed{text-decoration:line-through}.filters .btn-filter.style_3.reset{width:auto;padding:12px 16px;border-radius:99px;color:var(--covet-filter-font-color);text-align:center;background-color:#FFFFFF;display:flex;align-items:center;margin-left:0;margin-right:8px;margin-top:0;cursor:pointer;opacity:1;border:1px solid transparent;--covet-popup-filter-icon-close:var(--covet-filter-font-color);transition:border-color 0.25s ease-in-out}.filters .btn-filter.style_3.reset:hover,.filters .btn-filter.style_3.reset:active,.filters .btn-filter.style_3.reset:focus{border:1px solid #E5E4EB}.filters .btn-filter.style_4{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:99px;border:1px solid #E5E4EB;background-color:#FFFFFF;margin-top:0;margin-right:8px;margin-bottom:var(--covet-filter-mb);transition:color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;text-transform:capitalize;color:var(--covet-filter-font-color)}.filters .btn-filter.style_4:hover,.filters .btn-filter.style_4:active,.filters .btn-filter.style_4:focus{border:1px solid var(--covet-filter-font-active-color)}.filters .btn-filter.style_4.selected{border:1px solid var(--covet-filter-font-active-color);background-color:var(--covet-filter-font-active-color);color:#FFFFFF}.filters .btn-filter.style_4.selected:hover,.filters .btn-filter.style_4.selected:active,.filters .btn-filter.style_4.selected:focus{text-decoration:line-through}.filters .btn-filter.style_4.selected.focus-in:hover,.filters .btn-filter.style_4.selected.focus-in:active,.filters .btn-filter.style_4.selected.focus-in:focus{text-decoration:none}.filters .btn-filter.style_4.active{background-color:var(--covet-filter-font-active-color);color:#FFFFFF}.filters .btn-filter.style_4.active:hover,.filters .btn-filter.style_4.active:active,.filters .btn-filter.style_4.active:focus{text-decoration:line-through}.filters .btn-filter.style_4.crossed{text-decoration:line-through}.filters .btn-filter.style_4.reset{border:1px solid transparent;--covet-popup-filter-icon-close:var(--covet-filter-font-color);margin-bottom:0;transition:border-color 0.25s ease-in-out}.filters .btn-filter.style_4.reset:hover,.filters .btn-filter.style_4.reset:active,.filters .btn-filter.style_4.reset:focus{border:1px solid #E5E4EB}.filters .icon-filters-svg{margin-right:8px;line-height:1;display:inline-flex;flex:none}.filters .icon-filters-svg.icon-right{margin-left:8px;margin-right:0}.filters .filter-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery{margin:0;padding:0;list-style:none;display:block}.gallery.grid{display:grid;grid-template-columns:repeat(var(--covet-mobile-photos-per-row), calc(var(--covet-mobile-item-width) * 1%));-moz-column-gap:calc(var(--covet-mobile-item-padding) * 1%);column-gap:calc(var(--covet-mobile-item-padding) * 1%);grid-auto-flow:dense}.grid-sizer{width:calc(var(--covet-mobile-item-width) * 1%)}.gutter-sizer{width:calc(var(--covet-mobile-item-padding) * 1%)}@media only screen and (min-width: 800px){.gallery.grid{grid-template-columns:repeat(var(--covet-desktop-photos-per-row), calc(var(--covet-desktop-item-width) * 1%));-moz-column-gap:calc(var(--covet-desktop-item-padding) * 1%);column-gap:calc(var(--covet-desktop-item-padding) * 1%)}.grid-sizer{width:calc(var(--covet-desktop-item-width) * 1%)}.gutter-sizer{width:calc(var(--covet-desktop-item-padding) * 1%)}}.loading-animation{display:none;justify-content:center}.loading-animation svg{width:50px;height:50px}.loading-animation svg circle{fill:var(--covet-load-more-color)}.loading-animation svg .dot-2,.loading-animation svg .dot-3{opacity:0.4}.loading-animation.show{display:flex}.load-more{display:flex;justify-content:center;align-items:center}.btn-load-more{font-size:var(--covet-load-more-font-size);font-weight:var(--covet-load-more-font-style);font-family:inherit;color:var(--covet-load-more-color);background:none;border:0px solid;margin:20px 0;outline:none;display:flex;justify-content:center;align-items:center;cursor:pointer}.btn-load-more:hover,.btn-load-more:active,.btn-load-more:focus{opacity:0.7}.btn-load-more .icon{display:flex;margin-left:8px}.btn-load-more .icon svg{width:100%;height:100%}.btn-load-more.btn_style_1{padding:0 0 var(--covet-load-more-padding) 0;border-bottom:var(--covet-load-more-border) solid var(--covet-load-more-color)}.btn-load-more.btn_style_1 .icon{display:none}.btn-load-more.btn_style_2{padding:var(--covet-load-more-padding) calc(var(--covet-load-more-padding) * 2);border:var(--covet-load-more-border) solid var(--covet-load-more-color)}.btn-load-more.btn_style_2 .icon{display:none}.btn-load-more.btn_style_3{padding:var(--covet-load-more-padding) calc(var(--covet-load-more-padding) * 2);border:var(--covet-load-more-border) solid var(--covet-load-more-color)}.btn-load-more.btn_style_3 .icon{width:var(--covet-load-more-font-size);height:var(--covet-load-more-font-size);display:flex;margin-left:8px}.btn-load-more.btn_style_3 .icon svg .dynamic-stroke{stroke:var(--covet-load-more-color)}.btn-load-more.btn_style_4 .text{display:none}.btn-load-more.btn_style_4 .icon{width:32px;height:32px;margin:0}.btn-load-more.btn_style_4 .icon svg path{fill:var(--covet-load-more-color)}.btn-load-more.btn_style_5 .text{display:none}.btn-load-more.btn_style_5 .icon{width:42px;height:42px;margin:0}.btn-load-more.btn_style_5 .icon svg path{fill:var(--covet-load-more-color)}";
|
|
3460
3460
|
|
|
3461
3461
|
const CovetPicsGalleryGrid = class {
|
|
3462
3462
|
constructor(hostRef) {
|
|
@@ -3522,6 +3522,14 @@ const CovetPicsGalleryGrid = class {
|
|
|
3522
3522
|
btn.classList.remove("focus-in");
|
|
3523
3523
|
}
|
|
3524
3524
|
};
|
|
3525
|
+
this.filtersToggleCrossed = (event, on) => {
|
|
3526
|
+
event.preventDefault();
|
|
3527
|
+
event.stopPropagation();
|
|
3528
|
+
const btn = event.currentTarget;
|
|
3529
|
+
const filters = btn.closest(".filters");
|
|
3530
|
+
const activeBtns = filters.querySelectorAll(".btn-filter.active");
|
|
3531
|
+
activeBtns.forEach(btn => btn.classList.toggle("crossed", on));
|
|
3532
|
+
};
|
|
3525
3533
|
this.filterBtnMouseOut = (event) => {
|
|
3526
3534
|
event.preventDefault();
|
|
3527
3535
|
event.stopPropagation();
|
|
@@ -3685,12 +3693,16 @@ const CovetPicsGalleryGrid = class {
|
|
|
3685
3693
|
isAllFiltersSelected(filters) {
|
|
3686
3694
|
return Object.values(filters).every(value => value === false);
|
|
3687
3695
|
}
|
|
3696
|
+
isSomeFiltersSelected(filters) {
|
|
3697
|
+
return Object.values(filters).some(value => value === true);
|
|
3698
|
+
}
|
|
3688
3699
|
renderStandardFilters() {
|
|
3689
3700
|
return (index.h("div", { class: `filters ${this.settings.tags_wrap}`, "aria-hidden": `${this.isGridDisabled}` }, index.h("ul", { class: `filters-list active ${this.settings.tags_wrap}` }, index.h("li", null, index.h("button", { tabindex: "0", class: `btn-filter ${this.settings.tags_style} ${this.isAllFiltersSelected(this.filters) ? "selected" : ""}`, "data-reset-filters": "true", onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut, "aria-label": "reset filters", disabled: this.isGridDisabled, type: "reset" }, this.settings.tags_reset_button_text)), Object.keys(this.filters).map((filter, idx) => index.h("li", null, index.h("button", { tabindex: "0", "data-filter": filter, class: `btn-filter ${this.settings.tags_style} ${this.filters[filter] ? "selected" : ""} ${idx === Object.keys(this.filters).length - 1 ? "last" : ""}`, onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut, "aria-label": `filter ${filter}`, disabled: this.isGridDisabled, type: "button" }, filter))))));
|
|
3690
3701
|
}
|
|
3691
3702
|
renderModalFilters() {
|
|
3692
3703
|
return (index.h("div", { class: "filters", "aria-hidden": `${this.isGridDisabled}` }, index.h("ul", { class: `filters-list active ${this.settings.tags_wrap}` }, Object.keys(this.filters).map((filter) => this.filters[filter] &&
|
|
3693
|
-
index.h("li", null, index.h("button", { class: `btn-filter active ${this.settings.tags_style}`, "data-filter": filter, "aria-label": `selected filter ${filter}`, onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut, disabled: this.isGridDisabled }, index.h("span", null, filter), index.h("i", { class: "icon-filters-svg icon-right" }, index.h(popupFuncComponents.Icon, { iconName: "filter_icon_close" })))))), index.h("div", { class: "filters-collapse" },
|
|
3704
|
+
index.h("li", null, index.h("button", { class: `btn-filter active ${this.settings.tags_style}`, "data-filter": filter, "aria-label": `selected filter ${filter}`, onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut, disabled: this.isGridDisabled }, index.h("span", null, filter), index.h("i", { class: "icon-filters-svg icon-right" }, index.h(popupFuncComponents.Icon, { iconName: "filter_icon_close" })))))), index.h("div", { class: "filters-collapse" }, this.isSomeFiltersSelected(this.filters) &&
|
|
3705
|
+
index.h("button", { class: `btn-filter reset ${this.settings.tags_style}`, "data-reset-filters": "true", "aria-label": "reset filters", onClick: this.filterChangedHandler, onFocusin: (e) => this.filtersToggleCrossed(e, true), onFocusout: (e) => this.filtersToggleCrossed(e, false), onMouseEnter: (e) => this.filtersToggleCrossed(e, true), onMouseLeave: (e) => this.filtersToggleCrossed(e, false), disabled: this.isGridDisabled, type: "reset" }, index.h("span", null, this.settings.tags_reset_button_text), index.h("i", { class: "icon-filters-svg icon-right" }, index.h(popupFuncComponents.Icon, { iconName: "filter_icon_close" }))), index.h("button", { class: `btn-filter-collapse ${this.settings.tags_style}`, tabindex: "0", type: "button", "aria-label": "filters", onClick: this.showFiltersModal, disabled: this.isGridDisabled }, index.h("i", { class: "icon-filters-svg" }, index.h(popupFuncComponents.Icon, { iconName: "filter_icon_dropdown" })), "Filters"), index.h("div", { class: `filters-collapse-overlay ${this.isFilterModalShow ? "show" : ""} ${this.settings.tags_style}` }, index.h("div", { class: `filters-collapse-body ${this.isFilterModalShow ? "show" : ""} ${this.settings.tags_style}` }, this.settings.tags_style === "style_4" &&
|
|
3694
3706
|
index.h("button", { class: "btn-filters-close", onClick: () => this.isFilterModalShow = false, type: "button", "aria-label": "close filters modal" }, index.h(popupFuncComponents.Icon, { iconName: "filter_icon_close" })), index.h("ul", { class: `filters-list ${this.settings.tags_style}` }, Object.keys(this.filters).map((filter) => index.h("li", { class: `filter-list-item ${this.settings.tags_style}` }, index.h("button", { class: `btn-filter ${this.filters[filter] ? "selected" : ""} ${this.settings.tags_style}`, tabindex: "0", "aria-label": `filter ${filter}`, type: "button", "data-filter": filter, disabled: this.isGridDisabled, onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut }, index.h("span", { class: `filter-text ${this.settings.tags_style}` }, filter), this.settings.tags_style === "style_3" &&
|
|
3695
3707
|
index.h("i", { class: "icon-filters-svg icon-right" }, this.filters[filter]
|
|
3696
3708
|
? index.h(popupFuncComponents.Icon, { iconName: "filter_icon_checked" })
|
|
@@ -3741,7 +3753,7 @@ const CovetPicsGalleryGrid = class {
|
|
|
3741
3753
|
return cssVars;
|
|
3742
3754
|
}
|
|
3743
3755
|
render() {
|
|
3744
|
-
return (index.h(index.Host, { key: '
|
|
3756
|
+
return (index.h(index.Host, { key: 'cf20154c383e9fdac85275b49079e2e4c66d5cf8', role: "region", style: this.setCSSVariables() }, this.settings.show_header && this.renderHeader(), this.filtersEnabled && ["style_1", "style_2"].includes(this.settings.tags_style) && this.renderStandardFilters(), this.filtersEnabled && ["style_3", "style_4"].includes(this.settings.tags_style) && this.renderModalFilters(), index.h("div", { key: '7dd1b5648d8aeb3e4b7a5313d38ead809ebde544', class: `gallery ${this.layout}`, role: "list", "aria-label": `gallery of ${this.items.length} items` }, this.layout === "collage" && index.h("div", { key: '9f44f4bde05614b5c5c4ab0237d0dceabfbf1255', class: "grid-sizer" }), this.layout === "collage" && index.h("div", { key: '413c6b013f163253980a05aa7585a3e037cf9d92', class: "gutter-sizer" }), this.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
|
|
3745
3757
|
? this.renderStandardUploadItem(item, idx, this.items.length)
|
|
3746
3758
|
: this.renderStandardItem(item, idx, this.items.length)), this.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
|
|
3747
3759
|
? this.renderDetailUploadItem(item, idx, this.items.length)
|
|
@@ -32,6 +32,7 @@ covet-pics-gallery-grid {
|
|
|
32
32
|
position: relative;
|
|
33
33
|
margin-left: auto;
|
|
34
34
|
margin-bottom: var(--covet-filter-mb);
|
|
35
|
+
display: flex;
|
|
35
36
|
}
|
|
36
37
|
.filters .btn-filter-collapse {
|
|
37
38
|
padding: 12px 16px;
|
|
@@ -185,6 +186,13 @@ covet-pics-gallery-grid {
|
|
|
185
186
|
.filters .filters-list.style_4 {
|
|
186
187
|
display: flex;
|
|
187
188
|
flex-wrap: wrap;
|
|
189
|
+
overflow-y: auto;
|
|
190
|
+
max-height: calc(100vh - 80px - 32px);
|
|
191
|
+
}
|
|
192
|
+
@media only screen and (max-width: 799px) {
|
|
193
|
+
.filters .filters-list.style_4 {
|
|
194
|
+
max-height: calc(100vh - 40px - 32px);
|
|
195
|
+
}
|
|
188
196
|
}
|
|
189
197
|
.filters .filter-list-item.style_3:first-child {
|
|
190
198
|
margin-top: 4px;
|
|
@@ -306,6 +314,30 @@ covet-pics-gallery-grid {
|
|
|
306
314
|
.filters .btn-filter.style_3.active:hover, .filters .btn-filter.style_3.active:active, .filters .btn-filter.style_3.active:focus {
|
|
307
315
|
text-decoration: line-through;
|
|
308
316
|
}
|
|
317
|
+
.filters .btn-filter.style_3.crossed {
|
|
318
|
+
text-decoration: line-through;
|
|
319
|
+
}
|
|
320
|
+
.filters .btn-filter.style_3.reset {
|
|
321
|
+
width: auto;
|
|
322
|
+
padding: 12px 16px;
|
|
323
|
+
border-radius: 99px;
|
|
324
|
+
color: var(--covet-filter-font-color);
|
|
325
|
+
text-align: center;
|
|
326
|
+
background-color: #FFFFFF;
|
|
327
|
+
display: flex;
|
|
328
|
+
align-items: center;
|
|
329
|
+
margin-left: 0;
|
|
330
|
+
margin-right: 8px;
|
|
331
|
+
margin-top: 0;
|
|
332
|
+
cursor: pointer;
|
|
333
|
+
opacity: 1;
|
|
334
|
+
border: 1px solid transparent;
|
|
335
|
+
--covet-popup-filter-icon-close: var(--covet-filter-font-color);
|
|
336
|
+
transition: border-color 0.25s ease-in-out;
|
|
337
|
+
}
|
|
338
|
+
.filters .btn-filter.style_3.reset:hover, .filters .btn-filter.style_3.reset:active, .filters .btn-filter.style_3.reset:focus {
|
|
339
|
+
border: 1px solid #E5E4EB;
|
|
340
|
+
}
|
|
309
341
|
.filters .btn-filter.style_4 {
|
|
310
342
|
display: flex;
|
|
311
343
|
align-items: center;
|
|
@@ -342,6 +374,18 @@ covet-pics-gallery-grid {
|
|
|
342
374
|
.filters .btn-filter.style_4.active:hover, .filters .btn-filter.style_4.active:active, .filters .btn-filter.style_4.active:focus {
|
|
343
375
|
text-decoration: line-through;
|
|
344
376
|
}
|
|
377
|
+
.filters .btn-filter.style_4.crossed {
|
|
378
|
+
text-decoration: line-through;
|
|
379
|
+
}
|
|
380
|
+
.filters .btn-filter.style_4.reset {
|
|
381
|
+
border: 1px solid transparent;
|
|
382
|
+
--covet-popup-filter-icon-close: var(--covet-filter-font-color);
|
|
383
|
+
margin-bottom: 0;
|
|
384
|
+
transition: border-color 0.25s ease-in-out;
|
|
385
|
+
}
|
|
386
|
+
.filters .btn-filter.style_4.reset:hover, .filters .btn-filter.style_4.reset:active, .filters .btn-filter.style_4.reset:focus {
|
|
387
|
+
border: 1px solid #E5E4EB;
|
|
388
|
+
}
|
|
345
389
|
.filters .icon-filters-svg {
|
|
346
390
|
margin-right: 8px;
|
|
347
391
|
line-height: 1;
|
|
@@ -66,6 +66,14 @@ export class CovetPicsGalleryGrid {
|
|
|
66
66
|
btn.classList.remove("focus-in");
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
|
+
this.filtersToggleCrossed = (event, on) => {
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
event.stopPropagation();
|
|
72
|
+
const btn = event.currentTarget;
|
|
73
|
+
const filters = btn.closest(".filters");
|
|
74
|
+
const activeBtns = filters.querySelectorAll(".btn-filter.active");
|
|
75
|
+
activeBtns.forEach(btn => btn.classList.toggle("crossed", on));
|
|
76
|
+
};
|
|
69
77
|
this.filterBtnMouseOut = (event) => {
|
|
70
78
|
event.preventDefault();
|
|
71
79
|
event.stopPropagation();
|
|
@@ -229,12 +237,16 @@ export class CovetPicsGalleryGrid {
|
|
|
229
237
|
isAllFiltersSelected(filters) {
|
|
230
238
|
return Object.values(filters).every(value => value === false);
|
|
231
239
|
}
|
|
240
|
+
isSomeFiltersSelected(filters) {
|
|
241
|
+
return Object.values(filters).some(value => value === true);
|
|
242
|
+
}
|
|
232
243
|
renderStandardFilters() {
|
|
233
244
|
return (h("div", { class: `filters ${this.settings.tags_wrap}`, "aria-hidden": `${this.isGridDisabled}` }, h("ul", { class: `filters-list active ${this.settings.tags_wrap}` }, h("li", null, h("button", { tabindex: "0", class: `btn-filter ${this.settings.tags_style} ${this.isAllFiltersSelected(this.filters) ? "selected" : ""}`, "data-reset-filters": "true", onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut, "aria-label": "reset filters", disabled: this.isGridDisabled, type: "reset" }, this.settings.tags_reset_button_text)), Object.keys(this.filters).map((filter, idx) => h("li", null, h("button", { tabindex: "0", "data-filter": filter, class: `btn-filter ${this.settings.tags_style} ${this.filters[filter] ? "selected" : ""} ${idx === Object.keys(this.filters).length - 1 ? "last" : ""}`, onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut, "aria-label": `filter ${filter}`, disabled: this.isGridDisabled, type: "button" }, filter))))));
|
|
234
245
|
}
|
|
235
246
|
renderModalFilters() {
|
|
236
247
|
return (h("div", { class: "filters", "aria-hidden": `${this.isGridDisabled}` }, h("ul", { class: `filters-list active ${this.settings.tags_wrap}` }, Object.keys(this.filters).map((filter) => this.filters[filter] &&
|
|
237
|
-
h("li", null, h("button", { class: `btn-filter active ${this.settings.tags_style}`, "data-filter": filter, "aria-label": `selected filter ${filter}`, onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut, disabled: this.isGridDisabled }, h("span", null, filter), h("i", { class: "icon-filters-svg icon-right" }, h(Icon, { iconName: "filter_icon_close" })))))), h("div", { class: "filters-collapse" },
|
|
248
|
+
h("li", null, h("button", { class: `btn-filter active ${this.settings.tags_style}`, "data-filter": filter, "aria-label": `selected filter ${filter}`, onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut, disabled: this.isGridDisabled }, h("span", null, filter), h("i", { class: "icon-filters-svg icon-right" }, h(Icon, { iconName: "filter_icon_close" })))))), h("div", { class: "filters-collapse" }, this.isSomeFiltersSelected(this.filters) &&
|
|
249
|
+
h("button", { class: `btn-filter reset ${this.settings.tags_style}`, "data-reset-filters": "true", "aria-label": "reset filters", onClick: this.filterChangedHandler, onFocusin: (e) => this.filtersToggleCrossed(e, true), onFocusout: (e) => this.filtersToggleCrossed(e, false), onMouseEnter: (e) => this.filtersToggleCrossed(e, true), onMouseLeave: (e) => this.filtersToggleCrossed(e, false), disabled: this.isGridDisabled, type: "reset" }, h("span", null, this.settings.tags_reset_button_text), h("i", { class: "icon-filters-svg icon-right" }, h(Icon, { iconName: "filter_icon_close" }))), h("button", { class: `btn-filter-collapse ${this.settings.tags_style}`, tabindex: "0", type: "button", "aria-label": "filters", onClick: this.showFiltersModal, disabled: this.isGridDisabled }, h("i", { class: "icon-filters-svg" }, h(Icon, { iconName: "filter_icon_dropdown" })), "Filters"), h("div", { class: `filters-collapse-overlay ${this.isFilterModalShow ? "show" : ""} ${this.settings.tags_style}` }, h("div", { class: `filters-collapse-body ${this.isFilterModalShow ? "show" : ""} ${this.settings.tags_style}` }, this.settings.tags_style === "style_4" &&
|
|
238
250
|
h("button", { class: "btn-filters-close", onClick: () => this.isFilterModalShow = false, type: "button", "aria-label": "close filters modal" }, h(Icon, { iconName: "filter_icon_close" })), h("ul", { class: `filters-list ${this.settings.tags_style}` }, Object.keys(this.filters).map((filter) => h("li", { class: `filter-list-item ${this.settings.tags_style}` }, h("button", { class: `btn-filter ${this.filters[filter] ? "selected" : ""} ${this.settings.tags_style}`, tabindex: "0", "aria-label": `filter ${filter}`, type: "button", "data-filter": filter, disabled: this.isGridDisabled, onClick: this.filterChangedHandler, onFocusin: this.filterBtnFocusIn, onFocusout: this.filterBtnFocusOut, onMouseEnter: this.filterBtnMouseIn, onMouseLeave: this.filterBtnMouseOut }, h("span", { class: `filter-text ${this.settings.tags_style}` }, filter), this.settings.tags_style === "style_3" &&
|
|
239
251
|
h("i", { class: "icon-filters-svg icon-right" }, this.filters[filter]
|
|
240
252
|
? h(Icon, { iconName: "filter_icon_checked" })
|
|
@@ -285,7 +297,7 @@ export class CovetPicsGalleryGrid {
|
|
|
285
297
|
return cssVars;
|
|
286
298
|
}
|
|
287
299
|
render() {
|
|
288
|
-
return (h(Host, { key: '
|
|
300
|
+
return (h(Host, { key: 'cf20154c383e9fdac85275b49079e2e4c66d5cf8', role: "region", style: this.setCSSVariables() }, this.settings.show_header && this.renderHeader(), this.filtersEnabled && ["style_1", "style_2"].includes(this.settings.tags_style) && this.renderStandardFilters(), this.filtersEnabled && ["style_3", "style_4"].includes(this.settings.tags_style) && this.renderModalFilters(), h("div", { key: '7dd1b5648d8aeb3e4b7a5313d38ead809ebde544', class: `gallery ${this.layout}`, role: "list", "aria-label": `gallery of ${this.items.length} items` }, this.layout === "collage" && h("div", { key: '9f44f4bde05614b5c5c4ab0237d0dceabfbf1255', class: "grid-sizer" }), this.layout === "collage" && h("div", { key: '413c6b013f163253980a05aa7585a3e037cf9d92', class: "gutter-sizer" }), this.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
|
|
289
301
|
? this.renderStandardUploadItem(item, idx, this.items.length)
|
|
290
302
|
: this.renderStandardItem(item, idx, this.items.length)), this.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
|
|
291
303
|
? this.renderDetailUploadItem(item, idx, this.items.length)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Copyright by Space Squirrel Ltd.
|
|
3
3
|
*/
|
|
4
|
-
import{p as e,b as t}from"./p-C-mGosc6.js";export{s as setNonce}from"./p-C-mGosc6.js";import{g as i}from"./p-CWiAxP5O.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((async e=>(await i(),t([["p-5cc07632",[[1,"covet-pics-post",{postId:[2,"post-id"],environment:[1],item:[32],fetchingError:[32]}]]],["p-046d9c7d",[[0,"covet-pics-crop-text",{text:[1],textClass:[1,"text-class"],textColor:[1,"text-color"],ratio:[16],cropCSS:[32]}]]],["p-6e1b1797",[[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-108c8b8a",[[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,"thumbnail-carousel-images"],productLinks:[16,"product-links"],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,"app-store"],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,"app-store"]},null,{thumbnailUrl:["refreshHotspot"],activeHotspot:["activeHotspotHandler"]}]]],["p-a74d3938",[[0,"covet-pics-gallery-header",{rating:[2],productTitle:[1,"product-title"],breakdown:[16],appStore:[16,"app-store"],showBreakdownDropdown:[32],showSortDropdown:[32],isDesktopScreen:[32]}],[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,"app-store"],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,"app-store"],tabIndex:[32],captionCSS:[32],reviewClass:[32],starOnlyClass:[32],highlightedClass:[32],sliderIndex:[32],showImageAsVideoPoster:[32]},[[10,"updateUploadWidgetCover","updateUploadWidgetCoverHandler"],[8,"elementResize","elementResizeHandler"]],{sliderIndex:["autoPlayVideos"]}]]],["p-22d562ee",[[0,"covet-pics-popup-slide",{item:[16],showCaption:[4,"show-caption"],showStarRating:[4,"show-star-rating"],sharedLinkEnable:[4,"shared-link-enable"],dataLoaded:[32],isPlaying:[32],isMuted:[32],carouselIndex:[32],videoProgress:[32],showCarouselVideoControls:[32],loadMedia:[64],videoPlay:[64],videoPause:[64],videoSoundOff:[64],videoSoundOn:[64]}],[0,"covet-pics-popup-freeflow-carousel",{item:[16],isEnabled:[4,"is-enabled"],dataLoaded:[1,"data-loaded"],sliderIndex:[32],videoPlay:[64],videoPause:[64],videoSoundOn:[64],videoSoundOff:[64],pauseAllVideos:[64]},null,{isEnabled:["enableSlider"],dataLoaded:["lazyLoadMedia"],sliderIndex:["updateSliderIndex"]}],[1,"covet-pics-popup-freeflow-links",{links:[16],itemCreatedTime:[1,"item-created-time"],isSliderEnabled:[4,"is-slider-enabled"]},null,{isSliderEnabled:["enableSlider"]}]]],["p-13825b0f",[[1,"covet-pics-direct-buy",{product:[8],moneyFormat:[1,"money-format"],appStore:[16,"app-store"],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,"app-store"],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-
|
|
4
|
+
import{p as e,b as t}from"./p-C-mGosc6.js";export{s as setNonce}from"./p-C-mGosc6.js";import{g as i}from"./p-CWiAxP5O.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((async e=>(await i(),t([["p-5cc07632",[[1,"covet-pics-post",{postId:[2,"post-id"],environment:[1],item:[32],fetchingError:[32]}]]],["p-046d9c7d",[[0,"covet-pics-crop-text",{text:[1],textClass:[1,"text-class"],textColor:[1,"text-color"],ratio:[16],cropCSS:[32]}]]],["p-6e1b1797",[[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-108c8b8a",[[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,"thumbnail-carousel-images"],productLinks:[16,"product-links"],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,"app-store"],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,"app-store"]},null,{thumbnailUrl:["refreshHotspot"],activeHotspot:["activeHotspotHandler"]}]]],["p-a74d3938",[[0,"covet-pics-gallery-header",{rating:[2],productTitle:[1,"product-title"],breakdown:[16],appStore:[16,"app-store"],showBreakdownDropdown:[32],showSortDropdown:[32],isDesktopScreen:[32]}],[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,"app-store"],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,"app-store"],tabIndex:[32],captionCSS:[32],reviewClass:[32],starOnlyClass:[32],highlightedClass:[32],sliderIndex:[32],showImageAsVideoPoster:[32]},[[10,"updateUploadWidgetCover","updateUploadWidgetCoverHandler"],[8,"elementResize","elementResizeHandler"]],{sliderIndex:["autoPlayVideos"]}]]],["p-22d562ee",[[0,"covet-pics-popup-slide",{item:[16],showCaption:[4,"show-caption"],showStarRating:[4,"show-star-rating"],sharedLinkEnable:[4,"shared-link-enable"],dataLoaded:[32],isPlaying:[32],isMuted:[32],carouselIndex:[32],videoProgress:[32],showCarouselVideoControls:[32],loadMedia:[64],videoPlay:[64],videoPause:[64],videoSoundOff:[64],videoSoundOn:[64]}],[0,"covet-pics-popup-freeflow-carousel",{item:[16],isEnabled:[4,"is-enabled"],dataLoaded:[1,"data-loaded"],sliderIndex:[32],videoPlay:[64],videoPause:[64],videoSoundOn:[64],videoSoundOff:[64],pauseAllVideos:[64]},null,{isEnabled:["enableSlider"],dataLoaded:["lazyLoadMedia"],sliderIndex:["updateSliderIndex"]}],[1,"covet-pics-popup-freeflow-links",{links:[16],itemCreatedTime:[1,"item-created-time"],isSliderEnabled:[4,"is-slider-enabled"]},null,{isSliderEnabled:["enableSlider"]}]]],["p-13825b0f",[[1,"covet-pics-direct-buy",{product:[8],moneyFormat:[1,"money-format"],appStore:[16,"app-store"],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,"app-store"],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-85e70a71",[[1,"covet-pics-popup",{appStore:[16,"app-store"],item:[32],product:[32],directBuyIsOpen:[32],settings:[32],isPreviousEnable:[32],isNextEnable:[32],popupIsOpen:[32],popupIsClosing:[32],openPopup:[64],closePopup:[64]},[[4,"addToCart:covetPics","addToCartHandler"],[16,"productLinkClicked","productLinkClickedHandler"]],{item:["itemChangedHandler"],popupIsOpen:["popupOpenHandler"]}],[0,"covet-pics-gallery-grid",{breakdown:[16],productTitle:[1,"product-title"],rating:[2],filtersEnabled:[4,"filters-enabled"],filters:[16],showLoadMore:[4,"show-load-more"],appStore:[16,"app-store"],showSort:[32],isGridDisabled:[32],isDesktopScreen:[32],itemSize:[32],isFilterModalShow:[32],items:[32]},[[0,"imageLoaded","imagesLoadedHandler"],[8,"elementResize","elementResizeHandler"],[9,"mousedown","handleClickOutside"],[0,"itemLoaded","handleItemLoaded"]]],[0,"covet-pics-gallery-slider",{sliderStyle:[1,"slider-style"],appStore:[16,"app-store"],itemSize:[32],items:[32],galleryIndex:[32]},[[0,"imageLoaded","imagesLoadedHandler"],[8,"elementResize","elementResizeHandler"],[0,"itemLoaded","handleItemLoaded"]],{galleryIndex:["changeSlide"]}],[1,"covet-pics-popup-freeflow",{appStore:[16,"app-store"],settings:[32],items:[32],sliderIndex:[32],popupIsOpen:[32],openPopupFreeflow:[64],closePopupFreeflow:[64]},null,{popupIsOpen:["popupOpenHandler"],sliderIndex:["updateSliderIndex"],items:["updateItems"]}],[0,"covet-pics-highlighted",{numberOfPages:[2,"number-of-pages"],items:[16],appStore:[16,"app-store"],productLinks:[32],mainSliderIndex:[32],mainSliderAnimatingSlides:[32],windowHeight:[32],isDesktopScreen:[32]},[[0,"pageLoaded","handleItemLoaded"]]],[1,"covet-pics-upload",{standalone:[4],appStore:[16,"app-store"],starRating:[32],isFormValid:[32],showFormWarning:[32],thumbnailLinks:[32],toShowLinks:[32],dropedImagesNumber:[32],isAnimating:[32],notificationMessage:[32],isNotificationActive:[32],widgetWidth:[32],uploadIsOpen:[32],uploadIsClosing:[32],openUpload:[64],closeUpload:[64]},null,{uploadIsOpen:["uploadOpenHandler"]}]]],["p-7947aca5",[[1,"covet-pics-widget",{shop:[1],galleryEmbedId:[2,"gallery-embed-id"],shopifyProductId:[2,"shopify-product-id"],environment:[1],baseUrl:[1,"base-url"],customSettings:[1,"custom-settings"],hideElements:[1,"hide-elements"],previewMode:[4,"preview-mode"],photoRequestId:[2,"photo-request-id"],lazyLoad:[4,"lazy-load"],isLoading:[32],minNumberOfPhotos:[32],appStore:[32],fetchingError:[32],preloadNextPage:[32],updateUploadWidgetCoverPreview:[64],updatePreviewSettings:[64]},[[0,"sortUpdated","sortUpdatedHandler"],[0,"filtersUpdated","filtersUpdatedHandler"],[0,"nextPage","nextPageHandler"],[4,"popupFreeflowNextPage","nextPageHandlerFreeflow"]],{preloadNextPage:["preloadNextPageHandler"]}]]]],e))));
|