@covet-pics/covet-pics-widget 0.149.1 → 0.149.3

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

@@ -3368,18 +3368,7 @@ const CovetPicsGalleryGrid = class {
         this.filterChangedHandler = (event) => {
             event.preventDefault();
             event.stopPropagation();
-            const filter = event.target.dataset.filter;
-            if (!this.settings.multiple_filter_enabled) {
-                this.resetFilters();
-            }
-            this.filters[filter] = !this.filters[filter];
-            this.fetchFilteredItems();
-        };
-        this.filterResetHandler = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.resetFilters();
-            this.fetchFilteredItems();
+            this.filtersUpdated.emit(event.target.dataset);
         };
         this.loadMoreClickedHandler = (event) => {
             event.preventDefault();
@@ -3399,7 +3388,7 @@ const CovetPicsGalleryGrid = class {
         this.rating = 0;
         this.filtersEnabled = false;
         this.filters = {};
-        this.loader = undefined;
+        this.showLoadMore = false;
         this.appStore = undefined;
         this.sharedItemId = undefined;
         this.isLoading = false;
@@ -3454,7 +3443,6 @@ const CovetPicsGalleryGrid = class {
             this.initStore();
         } // TODO temp check for pass spec.test, issue props function in stencil tests
         this.initPopup();
-        this.initFilters();
         this.initUploadWidget();
     }
     componentDidLoad() {
@@ -3592,41 +3580,8 @@ const CovetPicsGalleryGrid = class {
                 return (index.h("svg", { viewBox: "0 0 44 44", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M22 0c12.15 0 22 9.85 22 22s-9.85 22-22 22S0 34.15 0 22 9.85 0 22 0zm1.1 13h-2.2v7.899L13 20.9v2.2l7.9-.001V31h2.2v-7.901l7.9.001v-2.2l-7.9-.001V13z", fill: "#101010", "fill-rule": "evenodd" })));
         }
     }
-    rederLoadMoreButton() {
-        if (this.settings.pagination === "button" &&
-            !this.isLoading &&
-            this.loader.totalPages > this.loader.page &&
-            this.items.length > 0) {
-            return (index.h("div", { class: 'load-more', style: this.setLoadMoreButtonVariables(), onClick: this.loadMoreClickedHandler }, index.h("button", { class: "btn-load-more " + this.settings.load_more_button_style, "aria-label": "load more items", disabled: this.isGridDisabled, "aria-hidden": `${this.isGridDisabled}`, type: "button" }, index.h("span", { class: "text" }, this.settings.load_more_text), index.h("span", { class: "icon", "aria-hidden": "true" }, this.renderLoadMoreIcon()))));
-        }
-    }
-    renderLoadingAnimation() {
-        return (index.h("div", { class: `loading-animation ${this.loader.isLoading ? "show" : ""}` }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", role: "img" }, index.h("title", null, "loading more animation"), index.h("circle", { cx: "84", cy: "50", r: "1.23", fill: "#919eab", class: "dot-1" }, index.h("animate", { attributeName: "r", values: "10;0;0;0;0", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "0s" }), index.h("animate", { attributeName: "cx", values: "84;84;84;84;84", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "0s" })), index.h("circle", { cx: "79.817", cy: "50", r: "10", fill: "rgba(0, 0, 0, 0.6)", class: "dot-2" }, index.h("animate", { attributeName: "r", values: "0;10;10;10;0", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "-0.95s" }), index.h("animate", { attributeName: "cx", values: "16;16;50;84;84", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "-0.95s" })), index.h("circle", { cx: "45.817", cy: "50", r: "10", fill: "rgba(0, 0, 0, 0.6)", class: "dot-3" }, index.h("animate", { attributeName: "r", values: "0;10;10;10;0", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "-0.475s" }), index.h("animate", { attributeName: "cx", values: "16;16;50;84;84", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "-0.475s" })), index.h("circle", { cx: "16", cy: "50", r: "8.77", fill: "#919eab", class: "dot-4" }, index.h("animate", { attributeName: "r", values: "0;10;10;10;0", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "0s" }), index.h("animate", { attributeName: "cx", values: "16;16;50;84;84", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "0s" })), index.h("circle", { cx: "16", cy: "50", r: "0", fill: "#919eab", class: "dot-5" }, index.h("animate", { attributeName: "r", values: "0;0;10;10;10", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "0s" }), index.h("animate", { attributeName: "cx", values: "16;16;16;50;84", keyTimes: "0;0.25;0.5;0.75;1", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", calcMode: "spline", dur: "1.9s", repeatCount: "indefinite", begin: "0s" })))));
-    }
-    /*
-    * Filters
-    */
-    initFilters() {
-        const previewFilters = this.loader.previewSettings["filters"];
-        this.loader.data.filters.list.forEach(f => this.filters[f] = false);
-        // restore selected filters between preview reloads
-        if (this.appState.preview.mode && typeof previewFilters !== "undefined") {
-            previewFilters.forEach(activeFilter => this.filters[activeFilter] = true);
-        }
-    }
-    resetFilters() {
-        Object.keys(this.filters).forEach(f => this.filters[f] = false);
-        this.loader.setSelectedFilters([]);
-        if (this.appState.preview.mode) {
-            delete this.loader.previewSettings["filters"];
-        }
-    }
-    fetchFilteredItems() {
-        this.loader.setSelectedFilters(this.filtersSelected());
-        this.filtersUpdated.emit();
-    }
-    filtersSelected() {
-        return Object.keys(this.filters).filter(f => this.filters[f]);
+    renderLoadMoreButton() {
+        return (index.h("div", { class: 'load-more', style: this.setLoadMoreButtonVariables(), onClick: this.loadMoreClickedHandler }, index.h("button", { class: "btn-load-more " + this.settings.load_more_button_style, "aria-label": "load more items", disabled: this.isGridDisabled, "aria-hidden": `${this.isGridDisabled}`, type: "button" }, index.h("span", { class: "text" }, this.settings.load_more_text), index.h("span", { class: "icon", "aria-hidden": "true" }, this.renderLoadMoreIcon()))));
     }
     getFilterCSSVariables() {
         return {
@@ -3637,7 +3592,7 @@ const CovetPicsGalleryGrid = class {
         };
     }
     renderFilters() {
-        return (index.h("div", { class: "filters", style: this.getFilterCSSVariables(), "aria-hidden": `${this.isGridDisabled}` }, index.h("button", { tabindex: "0", class: "btn-filter", "data-reset-filters": "true", onClick: this.filterResetHandler, "aria-label": "reset filters", disabled: this.isGridDisabled, type: "reset" }, this.settings.tags_reset_button_text), Object.keys(this.filters).map((filter) => index.h("button", { tabindex: "0", "data-filter": filter, class: `btn-filter ${this.filters[filter] ? "selected" : ""}`, onClick: this.filterChangedHandler, "aria-label": `filter ${filter}`, disabled: this.isGridDisabled, type: "button" }, filter))));
+        return (index.h("div", { class: "filters", style: this.getFilterCSSVariables(), "aria-hidden": `${this.isGridDisabled}` }, index.h("button", { tabindex: "0", class: "btn-filter", "data-reset-filters": "true", onClick: this.filterChangedHandler, "aria-label": "reset filters", disabled: this.isGridDisabled, type: "reset" }, this.settings.tags_reset_button_text), Object.keys(this.filters).map((filter) => index.h("button", { tabindex: "0", "data-filter": filter, class: `btn-filter ${this.filters[filter] ? "selected" : ""}`, onClick: this.filterChangedHandler, "aria-label": `filter ${filter}`, disabled: this.isGridDisabled, type: "button" }, filter))));
     }
     itemImgAltTag(altTag, caption, idx, itemsLength, createdTime, layout) {
         if (altTag && altTag !== null)
@@ -3662,13 +3617,11 @@ const CovetPicsGalleryGrid = class {
         return (index.h("covet-pics-gallery-header", { "product-title": this.productTitle, rating: this.rating, breakdown: this.breakdown, appStore: this.appStore, "aria-hidden": `${this.isGridDisabled}` }));
     }
     render() {
-        if (typeof this.items !== "undefined" && typeof this.loader !== "undefined") {
-            return (index.h(index.Host, { key: '581e1cb99182329e7bb9dff5defb65d33209879d', role: "region" }, this.settings.show_header && this.renderHeader(), this.filtersEnabled && this.renderFilters(), index.h("div", { key: '22db0db9f0806eecd87294d31a560590753ee19f', class: `gallery ${this.layout}`, style: utils$1.setCovetItemSizeVariables(this.settings.gallery_photos_per_row, this.settings.item_padding, this.settings.gallery_mobile_photos_per_row, this.settings.item_mobile_padding), role: "list", "aria-label": `gallery of ${this.items.length} items` }, this.layout === "collage" && index.h("div", { class: "grid-sizer" }), this.layout === "collage" && index.h("div", { class: "gutter-sizer" }), this.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
-                ? this.renderStandardUploadItem(item, idx, this.items.length)
-                : this.renderStandardItem(item, idx, this.items.length)), this.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
-                ? this.renderDetailUploadItem(item, idx, this.items.length)
-                : this.renderDetailItem(item, idx, this.items.length))), this.renderLoadingAnimation(), this.rederLoadMoreButton()));
-        }
+        return (index.h(index.Host, { key: 'b265021cf4e4574b855de3d2e8f74c3ea41679ad', role: "region" }, this.settings.show_header && this.renderHeader(), this.filtersEnabled && this.renderFilters(), index.h("div", { key: 'c7288f0a1c44b8009e27b7320fe113d41a9ffbb2', class: `gallery ${this.layout}`, style: utils$1.setCovetItemSizeVariables(this.settings.gallery_photos_per_row, this.settings.item_padding, this.settings.gallery_mobile_photos_per_row, this.settings.item_mobile_padding), role: "list", "aria-label": `gallery of ${this.items.length} items` }, this.layout === "collage" && index.h("div", { class: "grid-sizer" }), this.layout === "collage" && index.h("div", { class: "gutter-sizer" }), this.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
+            ? this.renderStandardUploadItem(item, idx, this.items.length)
+            : this.renderStandardItem(item, idx, this.items.length)), this.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
+            ? this.renderDetailUploadItem(item, idx, this.items.length)
+            : this.renderDetailItem(item, idx, this.items.length))), this.showLoadMore && this.renderLoadMoreButton()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {