npm - the-foxy-library - Versions diffs - 1.0.3 → 1.0.5 - Mend

the-foxy-library 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/cjs/intravenous.cjs.js CHANGED Viewed

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["iv-dynamic-products.cjs",[[256,"iv-dynamic-products",{"type":[1],"limit":[2],"reversed":[4],"componenttitle":[1],"titletag":[1],"collectionhandle":[1],"carousel":[4],"requestedfields":[1],"calltoaction":[4],"buttontext":[1],"addtocarttext":[1],"emptystring":[1],"gridlayout":[1],"cachettl":[2],"stale":[4],"products":[32],"errorMsg":[32],"staleData":[32]},null,{"type":["handlePropChange"],"limit":["handlePropChange"],"collectionhandle":["handlePropChange"],"requestedfields":["handlePropChange"]}]]],["iv-suggest.cjs",[[256,"iv-suggest",{"topqueries":[1],"collections":[1],"products":[1],"banner":[1],"bannerurl":[1],"bannertitle":[1],"bannertitletag":[1],"bannerbuttontext":[1],"topquerytitle":[1],"productstitle":[1],"collectionstitle":[1],"gridlayout":[1],"requestfields":[1]}]]],["iv-dynamic-products-carousel.cjs",[[256,"iv-dynamic-products-carousel",{"type":[1],"limit":[2],"reversed":[4],"componenttitle":[1],"titletag":[1],"collectionhandle":[1],"requestedfields":[1],"calltoaction":[4],"buttontext":[1],"addtocarttext":[1],"emptystring":[1],"cachettl":[2],"stale":[4],"products":[32],"errorMsg":[32],"staleData":[32],"page":[32]},null,{"type":["handlePropChange"],"limit":["handlePropChange"],"collectionhandle":["handlePropChange"],"requestedfields":["handlePropChange"]}]]],["iv-predictive-search.cjs",[[256,"iv-predictive-search",{"searchlabel":[1],"labelposition":[1],"action":[1],"method":[1],"placeholder":[1],"minchars":[2],"debounce":[2],"resultslimit":[2],"showspinner":[4],"noresultstext":[1],"requestedfields":[1],"requestedresources":[1],"showallbuttontext":[1],"querybuttontext":[1],"clearbutton":[1],"expandable":[4],"tablayout":[1],"gridlayout":[1],"searchTerm":[32],"searchReturnData":[32],"noResults":[32]}]]],["iv-wishlist.cjs",[[256,"iv-wishlist",{"buttonaddvalue":[1],"buttonremovevalue":[1],"wishlistempty":[1],"buttonaddtocartvalue":[1],"viewwishlistvalue":[1],"productdata":[1],"usefields":[1],"previewtype":[1]}]]],["iv-carousel.cjs",[[257,"iv-carousel"]]],["iv-filters.cjs",[[256,"iv-filters"]]],["sw-in-grid-content.cjs",[[260,"sw-in-grid-content"]]],["sw-size-guide.cjs",[[260,"sw-size-guide",{"sizeUnits":[32]}]]],["iv-banner.cjs",[[260,"iv-banner",{"classmodifier":[1],"bannerurl":[1],"bannerbuttontext":[1],"bannertype":[1]}]]],["iv-tabs.cjs",[[260,"iv-tabs",{"labels":[16],"classModifier":[1,"class-modifier"],"tabLayout":[1,"tab-layout"],"activeTab":[32]}]]],["iv-spinner.cjs",[[256,"iv-spinner",{"show":[4]}]]],["iv-accordion_11.cjs",[[256,"iv-recently-viewed",{"componenttitle":[1],"titletag":[1],"numbertoshow":[2],"noviewhistory":[1],"requestedfields":[1],"items":[32]}],[257,"iv-modal"],[260,"iv-sidebar",{"closeicon":[1]},[[8,"openPullout","handleOpenPullout"]]],[256,"iv-toast-container",{"_bump":[32]}],[260,"iv-accordion",{"classmodifier":[1],"accordiontype":[1],"accordionlabels":[1],"showmultiple":[4],"showfirst":[4],"startingpanel":[2],"layout":[1],"activePanel":[32]}],[256,"iv-toast",{"message":[1],"toastId":[2,"toast-id"],"duration":[2],"type":[1]}],[256,"iv-wishlist-view"],[256,"iv-card",{"data":[16],"fields":[1],"cardtype":[1],"classmodifier":[1],"buttontext":[1],"calltoaction":[4],"addtocarttext":[1]}],[260,"iv-layout",{"sectionId":[1,"section-id"],"gridTemplateAreas":[1,"grid-template-areas"],"gap":[1],"verticalAlign":[1,"vertical-align"],"horizontalAlign":[1,"horizontal-align"],"wrapperTag":[1,"wrapper-tag"],"classModifier":[1,"class-modifier"]}],[260,"iv-link",{"classmodifier":[1],"linktype":[1],"linkhref":[1],"linktarget":[1],"linkrel":[1],"linkariaLabel":[1,"linkaria-label"]}],[260,"iv-button",{"type":[1],"classmodifier":[1],"eventname":[1],"eventdetail":[1],"buttonClick":[16]}]]]], options);
+  return index.bootstrapLazy([["iv-dynamic-products.cjs",[[256,"iv-dynamic-products",{"type":[1],"limit":[2],"reversed":[4],"componenttitle":[1],"titletag":[1],"collectionhandle":[1],"carousel":[4],"requestedfields":[1],"calltoaction":[4],"buttontext":[1],"addtocarttext":[1],"emptystring":[1],"gridlayout":[1],"cachettl":[2],"stale":[4],"products":[32],"errorMsg":[32],"staleData":[32]},null,{"type":["handlePropChange"],"limit":["handlePropChange"],"collectionhandle":["handlePropChange"],"requestedfields":["handlePropChange"]}]]],["iv-suggest.cjs",[[256,"iv-suggest",{"topqueries":[1],"collections":[1],"products":[1],"banner":[1],"bannerurl":[1],"bannertitle":[1],"bannertitletag":[1],"bannerbuttontext":[1],"topquerytitle":[1],"productstitle":[1],"collectionstitle":[1],"gridlayout":[1],"requestfields":[1]}]]],["iv-dynamic-products-carousel.cjs",[[256,"iv-dynamic-products-carousel",{"type":[1],"limit":[2],"reversed":[4],"componenttitle":[1],"titletag":[1],"collectionhandle":[1],"requestedfields":[1],"calltoaction":[4],"buttontext":[1],"addtocarttext":[1],"emptystring":[1],"cachettl":[2],"stale":[4],"excluse":[1],"products":[32],"errorMsg":[32],"staleData":[32],"page":[32]},null,{"type":["handlePropChange"],"limit":["handlePropChange"],"collectionhandle":["handlePropChange"],"requestedfields":["handlePropChange"]}]]],["iv-predictive-search.cjs",[[256,"iv-predictive-search",{"searchlabel":[1],"labelposition":[1],"action":[1],"method":[1],"placeholder":[1],"minchars":[2],"debounce":[2],"resultslimit":[2],"showspinner":[4],"noresultstext":[1],"requestedfields":[1],"requestedresources":[1],"showallbuttontext":[1],"querybuttontext":[1],"clearbutton":[1],"expandable":[4],"tablayout":[1],"gridlayout":[1],"searchTerm":[32],"searchReturnData":[32],"noResults":[32]}]]],["iv-wishlist.cjs",[[256,"iv-wishlist",{"buttonaddvalue":[1],"buttonremovevalue":[1],"wishlistempty":[1],"buttonaddtocartvalue":[1],"viewwishlistvalue":[1],"productdata":[1],"usefields":[1],"previewtype":[1]}]]],["iv-carousel.cjs",[[257,"iv-carousel"]]],["iv-filters.cjs",[[256,"iv-filters"]]],["sw-in-grid-content.cjs",[[260,"sw-in-grid-content"]]],["sw-size-guide.cjs",[[260,"sw-size-guide",{"sizeUnits":[32]}]]],["iv-banner.cjs",[[260,"iv-banner",{"classmodifier":[1],"bannerurl":[1],"bannerbuttontext":[1],"bannertype":[1]}]]],["iv-tabs.cjs",[[260,"iv-tabs",{"labels":[16],"classModifier":[1,"class-modifier"],"tabLayout":[1,"tab-layout"],"activeTab":[32]}]]],["iv-spinner.cjs",[[256,"iv-spinner",{"show":[4]}]]],["iv-accordion_11.cjs",[[256,"iv-recently-viewed",{"componenttitle":[1],"titletag":[1],"numbertoshow":[2],"noviewhistory":[1],"requestedfields":[1],"items":[32]}],[257,"iv-modal"],[260,"iv-sidebar",{"closeicon":[1]},[[8,"openPullout","handleOpenPullout"]]],[256,"iv-toast-container",{"_bump":[32]}],[260,"iv-accordion",{"classmodifier":[1],"accordiontype":[1],"accordionlabels":[1],"showmultiple":[4],"showfirst":[4],"startingpanel":[2],"layout":[1],"activePanel":[32]}],[256,"iv-toast",{"message":[1],"toastId":[2,"toast-id"],"duration":[2],"type":[1]}],[256,"iv-wishlist-view"],[256,"iv-card",{"data":[16],"fields":[1],"cardtype":[1],"classmodifier":[1],"buttontext":[1],"calltoaction":[4],"addtocarttext":[1]}],[260,"iv-layout",{"sectionId":[1,"section-id"],"gridTemplateAreas":[1,"grid-template-areas"],"gap":[1],"verticalAlign":[1,"vertical-align"],"horizontalAlign":[1,"horizontal-align"],"wrapperTag":[1,"wrapper-tag"],"classModifier":[1,"class-modifier"]}],[260,"iv-link",{"classmodifier":[1],"linktype":[1],"linkhref":[1],"linktarget":[1],"linkrel":[1],"linkariaLabel":[1,"linkaria-label"]}],[260,"iv-button",{"type":[1],"classmodifier":[1],"eventname":[1],"eventdetail":[1],"buttonClick":[16]}]]]], options);
 });
 exports.setNonce = index.setNonce;

package/dist/cjs/iv-dynamic-products-carousel.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ var index = require('./index-DiBg0RCo.js');
 var factory$1 = require('./factory-CktIyPWt.js');
 var factory = require('./factory-CffqQl1G.js');
-const ivDynamicProductsCarouselCss = ":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";
+const ivDynamicProductsCarouselCss = ":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card .iv-card-title{line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.4em}.iv-dynamic-products-carousel-card .iv-card-controls{margin-top:auto;}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";
 const BLOCK = 'iv-dynamic-products-carousel';
 const IvDynamicProductsCarousel = class {
@@ -24,6 +24,7 @@ const IvDynamicProductsCarousel = class {
     emptystring = 'No products found';
     cachettl;
     stale = true;
+    excluse;
     products = [];
     errorMsg;
     staleData = false;
@@ -40,19 +41,38 @@ const IvDynamicProductsCarousel = class {
             handle: this.collectionhandle,
             sort: this.type,
             fields: this.requestedfields,
-            limit: this.limit,
+            limit: 36, // Always fetch 36 products for filtering
             currency: index.state.currencyCode,
             reversed: this.reversed
         };
     }
     ;
+    ensureProductTypeField(fields) {
+        if (!fields)
+            return 'productType';
+        const arr = fields.split(',').map(f => f.trim());
+        if (!arr.includes('productType'))
+            arr.push('productType');
+        return arr.join(',');
+    }
+    ;
+    filterAndSliceProducts(data) {
+        if (!this.excluse)
+            return data.slice(0, this.limit);
+        if (!this.requestedfields || !this.requestedfields.includes('productType')) {
+            this.requestedfields = this.ensureProductTypeField(this.requestedfields);
+        }
+        const filtered = data.filter(p => p.productType !== this.excluse);
+        return filtered.slice(0, this.limit);
+    }
+    ;
     async loadProducts(fromWatch) {
         const params = this.buildParams();
         const ttl = this.cachettl || 1000 * 60 * 5;
         index.state.loading = !fromWatch;
         try {
             const data = await factory.productCache.getOrSetData(params, async () => {
-                const fresh = await factory$1.fetchProducts(this.limit, this.collectionhandle, this.type, this.requestedfields, this.reversed);
+                const fresh = await factory$1.fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);
                 return fresh;
             }, {
                 ttl,
@@ -61,7 +81,7 @@ const IvDynamicProductsCarousel = class {
             });
             const metaCheck = factory.productCache.getData(params);
             this.staleData = metaCheck.isExpired && metaCheck.isStale;
-            this.products = data || [];
+            this.products = Array.isArray(data) ? this.filterAndSliceProducts(data) : [];
             this.page = 0;
         }
         catch (err) {
@@ -98,7 +118,7 @@ const IvDynamicProductsCarousel = class {
     };
     render() {
         const TAG = this.titletag;
-        return (index.h("div", { key: 'a0fa6574a48e8aaa6b400282aa9bab55c1babd4f', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && index.h(TAG, { key: '9ab7d2ed24377813fbb593f8a845e0c5775309a9', class: `${BLOCK}-title` }, this.componenttitle), index.state.loading ? (index.h("iv-spinner", null)) : this.errorMsg ? (index.h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (index.h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (index.h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, index.h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), index.h("div", { class: `${BLOCK}-viewport` }, index.h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (index.h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (index.h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), index.h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), index.h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (index.h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
+        return (index.h("div", { key: '3d471c1947c7f828d4b735e75bcc9bcabed4e972', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && index.h(TAG, { key: '753a4cb965549a9b910f5e9c1e44684163660f19', class: `${BLOCK}-title` }, this.componenttitle), index.state.loading ? (index.h("iv-spinner", null)) : this.errorMsg ? (index.h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (index.h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (index.h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, index.h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), index.h("div", { class: `${BLOCK}-viewport` }, index.h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (index.h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (index.h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), index.h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), index.h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (index.h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
     }
     ;
     static get watchers() { return {

package/dist/cjs/iv-dynamic-products-carousel.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"iv-dynamic-products-carousel.entry.cjs.js","sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n.iv-dynamic-products-carousel-card:hover { \n box-shadow:0 4px 14px rgba(0,0,0,.15); \n transform:translateY(-2px); \n}\n\n.iv-dynamic-products-carousel-card:active { \n transform:translateY(0); \n box-shadow:0 2px 6px rgba(0,0,0,.12); \n}\n\n.iv-dynamic-products-carousel-card img, \n.iv-dynamic-products-carousel-card picture, \n.iv-dynamic-products-carousel-card .media { \n width:100%; \n aspect-ratio:1/1; \n object-fit:contain; \n display:flex; \n align-items:center; \n justify-content:center; \n margin:0 0 .65rem; \n}\n\n.iv-dynamic-products-carousel-nav { \n position:absolute; \n top:50%; \n transform:translateY(-50%); \n background:var(--iv-carousel-nav-bg, rgba(0,0,0,.55)); \n color:#fff; \n border:none; \n width:2.75rem; \n height:2.75rem; \n border-radius:50%; \n display:flex; \n align-items:center; \n justify-content:center; \n cursor:pointer; \n backdrop-filter:blur(6px); \n box-shadow:0 4px 12px rgba(0,0,0,.25); \n transition:background .2s ease, \n transform .2s ease; \n outline:none;\n z-index: 10;\n }\n\n.iv-dynamic-products-carousel-nav:focus-visible { \n outline:2px solid #fff; \n outline-offset:3px; \n}\n\n.iv-dynamic-products-carousel-nav:hover:not(:disabled){\n background:var(--iv-carousel-nav-bg-hover, rgba(0,0,0,.75)); \n transform:translateY(-50%) scale(1.05); \n box-shadow:0 6px 18px rgba(0,0,0,.35);\n}\n\n.iv-dynamic-products-carousel-nav:disabled{ \n opacity:.4; cursor:default; \n}\n\n.iv-dynamic-products-carousel-nav-prev { \n left:0.25rem; \n}\n\n.iv-dynamic-products-carousel-nav-next { \n right:0.25rem; \n}\n\n.iv-dynamic-products-carousel-status { \n margin-top:0.75rem; \n font-size:0.875rem; \n text-align:center; \n color:var(--iv-carousel-status-color, #555); \n}\n\n.iv-dynamic-products-carousel-viewport::-webkit-scrollbar { \n display:none; \n}\n\n.iv-dynamic-products-carousel-viewport { \n -ms-overflow-style:none; \n scrollbar-width:none; \n}","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' \| 'CREATED_AT' \| 'BEST_SELLING' \| 'PRICE' \| 'TITLE' \| 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 24;\n @Prop() reversed: boolean = false; \n @Prop() componenttitle?: string;\n @Prop() titletag: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' = 'h2';\n @Prop() collectionhandle: string = 'all';\n @Prop() requestedfields: string;\n @Prop() calltoaction: boolean = false;\n @Prop() buttontext?: string;\n @Prop() addtocarttext?: string;\n @Prop() emptystring: string = 'No products found';\n @Prop() cachettl?: number; \n @Prop() stale?: boolean = true; \n \n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false;\n @State() page: number = 0; \n\n private readonly itemsPerPage = 6;\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products-carousel' });\n\n @Watch('type')\n @Watch('limit')\n @Watch('collectionhandle')\n @Watch('requestedfields')\n handlePropChange() { this.loadProducts(true); }\n\n async componentWillLoad() { \n await this.loadProducts(false); \n };\n \n private buildParams() {\n return {\n handle: this.collectionhandle,\n sort: this.type,\n fields: this.requestedfields,\n limit: this.limit,\n currency: state.currencyCode,\n reversed: this.reversed\n };\n };\n\n private async loadProducts(fromWatch: boolean) {\n const params = this.buildParams();\n const ttl = this.cachettl \|\| 1000 * 60 * 5;\n state.loading = !fromWatch; \n try {\n const data = await productCache.getOrSetData(\n params,\n async () => {\n const fresh = await fetchProducts(this.limit, this.collectionhandle, this.type, this.requestedfields, this.reversed);\n return fresh;\n },\n {\n ttl,\n staleWhileRevalidate: this.stale,\n transform: (fresh) => fresh \n }\n );\n const metaCheck = productCache.getData<typeof data>(params);\n this.staleData = metaCheck.isExpired && metaCheck.isStale;\n this.products = data \|\| [];\n this.page = 0;\n } catch (err: any) {\n this.errorMsg = 'Failed to load products';\n this.errors.handle({\n error: err,\n scope: 'loadProducts',\n userMessage: 'Unable to load products right now.',\n devMessage: 'fetchProducts failed in iv-dynamic-products',\n severity: 'error'\n });\n } finally {\n state.loading = false;\n };\n };\n\n private pagedProducts() {\n const chunks: any[][] = [];\n for(let i=0; i < this.products.length; i += this.itemsPerPage) {\n chunks.push(this.products.slice(i, i + this.itemsPerPage));\n };\n return chunks;\n };\n\n private next = () => { \n const pages = this.pagedProducts().length;\n if(this.page < pages - 1) this.page++;\n };\n\n private prev = () => { \n if(this.page > 0) this.page--;\n };\n\n render() {\n\n const TAG = this.titletag as any;\n\n return (\n <div class={BLOCK} data-stale={this.staleData ? 'true' : 'false'}>\n {this.componenttitle && <TAG class={`${BLOCK}-title`}>{this.componenttitle}</TAG>}\n {state.loading ? (\n <iv-spinner></iv-spinner>\n ) : this.errorMsg ? (\n <div class={`${BLOCK}-error`}>{this.errorMsg}</div>\n ) : this.products.length === 0 ? (\n <div class={`${BLOCK}-empty`}>{this.emptystring}</div>\n ) : (\n <div class={`${BLOCK}-carousel`} aria-roledescription=\"carousel\">\n <button class={`${BLOCK}-nav ${BLOCK}-nav-prev`} onClick={this.prev} disabled={this.page===0} aria-label=\"Previous\" type=\"button\">\n ‹\n </button>\n <div class={`${BLOCK}-viewport`}>\n <div class={`${BLOCK}-track`} style={{ transform: `translateX(-${this.page * 100}%)` }}>\n {this.pagedProducts().map((group, i) => (\n <div class={`${BLOCK}-slide`} role=\"group\" aria-label={`Slide ${i+1} of ${this.pagedProducts().length}`}> \n {group.map(product => (\n <iv-card\n cardtype='products'\n calltoaction={this.calltoaction}\n buttontext={this.buttontext}\n addtocarttext={this.addtocarttext}\n data={product}\n classmodifier={`${BLOCK}-card`} />\n ))}\n </div>\n ))}\n </div>\n </div>\n <button class={`${BLOCK}-nav ${BLOCK}-nav-next`} onClick={this.next} disabled={this.page===this.pagedProducts().length-1} aria-label=\"Next\" type=\"button\">\n ›\n </button>\n <div class={`${BLOCK}-status`} aria-live=\"polite\">{this.pagedProducts().length > 1 ? `Slide ${this.page+1} of ${this.pagedProducts().length}` : ''}</div>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"],"names":["createErrorHandler","state","productCache","fetchProducts","h"],"mappings":";;;;;;AAAA,MAAM,4BAA4B,GAAG,msFAAmsF;;ACMxuF,MAAM,KAAK,GAAG,8BAA8B;MAQ/B,yBAAyB,GAAA,MAAA;;;;IAC5B,IAAI,GAAgF,YAAY;IAChG,KAAK,GAAW,EAAE;IAClB,QAAQ,GAAY,KAAK;AACzB,IAAA,cAAc;IACd,QAAQ,GAA4C,IAAI;IACxD,gBAAgB,GAAW,KAAK;AAChC,IAAA,eAAe;IACf,YAAY,GAAY,KAAK;AAC7B,IAAA,UAAU;AACV,IAAA,aAAa;IACb,WAAW,GAAW,mBAAmB;AACzC,IAAA,QAAQ;IACR,KAAK,GAAa,IAAI;IAErB,QAAQ,GAAU,EAAE;AACpB,IAAA,QAAQ;IACR,SAAS,GAAY,KAAK;IAC1B,IAAI,GAAW,CAAC;IAER,YAAY,GAAG,CAAC;IAEzB,MAAM,GAAGA,0BAAkB,CAAC,EAAE,SAAS,EAAE,8BAA8B,EAAE,CAAC;IAMlF,gBAAgB,GAAA,EAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;AAE7C,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;;;IAGxB,WAAW,GAAA;QACjB,OAAO;YACL,MAAM,EAAE,IAAI,CAAC,gBAAgB;YAC7B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,eAAe;YAC5B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAEC,WAAK,CAAC,YAAY;YAC5B,QAAQ,EAAE,IAAI,CAAC;SAChB;;;IAGK,MAAM,YAAY,CAAC,SAAkB,EAAA;AAC3C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE;QACjC,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,EAAE,GAAG,CAAC;AAC1C,QAAAA,WAAK,CAAC,OAAO,GAAG,CAAC,SAAS;AAC1B,QAAA,IAAI;YACF,MAAM,IAAI,GAAG,MAAMC,oBAAY,CAAC,YAAY,CAC1C,MAAM,EACN,YAAW;gBACT,MAAM,KAAK,GAAG,MAAMC,uBAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC;AACpH,gBAAA,OAAO,KAAK;AACd,aAAC,EACD;gBACE,GAAG;gBACH,oBAAoB,EAAE,IAAI,CAAC,KAAK;AAChC,gBAAA,SAAS,EAAE,CAAC,KAAK,KAAK;AACvB,aAAA,CACF;YACD,MAAM,SAAS,GAAGD,oBAAY,CAAC,OAAO,CAAc,MAAM,CAAC;YAC3D,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO;AACzD,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,EAAE;AAC1B,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC;;QACb,OAAO,GAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,GAAG,yBAAyB;AACzC,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;AACjB,gBAAA,KAAK,EAAE,GAAG;AACV,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,WAAW,EAAE,oCAAoC;AACjD,gBAAA,UAAU,EAAE,6CAA6C;AACzD,gBAAA,QAAQ,EAAE;AACX,aAAA,CAAC;;gBACM;AACR,YAAAD,WAAK,CAAC,OAAO,GAAG,KAAK;;;;IAIjB,aAAa,GAAA;QACnB,MAAM,MAAM,GAAY,EAAE;AAC1B,QAAA,KAAI,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE;AAC7D,YAAA,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;;AAE5D,QAAA,OAAO,MAAM;;;IAGP,IAAI,GAAG,MAAK;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM;AACzC,QAAA,IAAG,IAAI,CAAC,IAAI,GAAG,KAAK,GAAG,CAAC;YAAE,IAAI,CAAC,IAAI,EAAE;AACvC,KAAC;IAEO,IAAI,GAAG,MAAK;AAClB,QAAA,IAAG,IAAI,CAAC,IAAI,GAAG,CAAC;YAAE,IAAI,CAAC,IAAI,EAAE;AAC/B,KAAC;IAED,MAAM,GAAA;AAEJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAe;QAEhC,QACEG,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,gBAAc,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,EAAA,EAC7D,IAAI,CAAC,cAAc,IAAIA,OAAA,CAAC,GAAG,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAA,MAAA,CAAQ,EAAA,EAAG,IAAI,CAAC,cAAc,CAAO,EAChFH,WAAK,CAAC,OAAO,IACZG,OAAyB,CAAA,YAAA,EAAA,IAAA,CAAA,IACvB,IAAI,CAAC,QAAQ,IACfA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,KAAK,CAAQ,MAAA,CAAA,EAAG,EAAA,IAAI,CAAC,QAAQ,CAAO,IACjD,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAC5BA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAQ,MAAA,CAAA,EAAA,EAAG,IAAI,CAAC,WAAW,CAAO,KAEtDA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAW,SAAA,CAAA,0BAAuB,UAAU,EAAA,EAC9DA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAQ,KAAA,EAAA,KAAK,CAAW,SAAA,CAAA,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAG,CAAC,EAAa,YAAA,EAAA,UAAU,EAAC,IAAI,EAAC,QAAQ,EAExH,EAAA,QAAA,CAAA,EACTA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,KAAK,WAAW,EAAA,EAC7BA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAQ,MAAA,CAAA,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA,EAAA,CAAI,EAAE,EACnF,EAAA,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,MACjCA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAA,MAAA,CAAQ,EAAE,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAS,MAAA,EAAA,CAAC,GAAC,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAA,CAAE,EACpG,EAAA,KAAK,CAAC,GAAG,CAAC,OAAO,KAChBA,OACE,CAAA,SAAA,EAAA,EAAA,QAAQ,EAAC,UAAU,EACnB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,OAAO,EACb,aAAa,EAAE,CAAG,EAAA,KAAK,OAAO,EAAI,CAAA,CACrC,CAAC,CACE,CACP,CAAC,CACE,CACF,EACNA,OAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,CAAA,EAAG,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAW,SAAA,CAAA,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAC,CAAC,gBAAa,MAAM,EAAC,IAAI,EAAC,QAAQ,EAEhJ,EAAA,QAAA,CAAA,EACTA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,KAAK,CAAS,OAAA,CAAA,eAAY,QAAQ,EAAA,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,IAAI,CAAC,IAAI,GAAC,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAA,CAAE,GAAG,EAAE,CAAO,EACxJ,IAAI,CAAC,SAAS,KACbA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAA,gBAAA,CAAkB,EAAA,WAAA,EAAY,QAAQ,EAAkB,EAAA,kBAAA,CAAA,CAC7E,CACG,CACP,CACG;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"iv-dynamic-products-carousel.entry.cjs.js","sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n/* Alignment fix: reserve consistent height for titles (2 lines) and anchor controls at bottom /\n.iv-dynamic-products-carousel-card .iv-card-title {\n line-height:1.2;\n display:-webkit-box;\n -webkit-box-orient:vertical;\n -webkit-line-clamp:2;\n line-clamp:2;\n overflow:hidden;\n min-height:calc(2 1.2em);\n}\n\n.iv-dynamic-products-carousel-card .iv-card-controls {\n margin-top:auto; /* push controls to bottom of flex column for uniform vertical alignment /\n}\n\n.iv-dynamic-products-carousel-card:hover { \n box-shadow:0 4px 14px rgba(0,0,0,.15); \n transform:translateY(-2px); \n}\n\n.iv-dynamic-products-carousel-card:active { \n transform:translateY(0); \n box-shadow:0 2px 6px rgba(0,0,0,.12); \n}\n\n.iv-dynamic-products-carousel-card img, \n.iv-dynamic-products-carousel-card picture, \n.iv-dynamic-products-carousel-card .media { \n width:100%; \n aspect-ratio:1/1; \n object-fit:contain; \n display:flex; \n align-items:center; \n justify-content:center; \n margin:0 0 .65rem; \n}\n\n.iv-dynamic-products-carousel-nav { \n position:absolute; \n top:50%; \n transform:translateY(-50%); \n background:var(--iv-carousel-nav-bg, rgba(0,0,0,.55)); \n color:#fff; \n border:none; \n width:2.75rem; \n height:2.75rem; \n border-radius:50%; \n display:flex; \n align-items:center; \n justify-content:center; \n cursor:pointer; \n backdrop-filter:blur(6px); \n box-shadow:0 4px 12px rgba(0,0,0,.25); \n transition:background .2s ease, \n transform .2s ease; \n outline:none;\n z-index: 10;\n }\n\n.iv-dynamic-products-carousel-nav:focus-visible { \n outline:2px solid #fff; \n outline-offset:3px; \n}\n\n.iv-dynamic-products-carousel-nav:hover:not(:disabled){\n background:var(--iv-carousel-nav-bg-hover, rgba(0,0,0,.75)); \n transform:translateY(-50%) scale(1.05); \n box-shadow:0 6px 18px rgba(0,0,0,.35);\n}\n\n.iv-dynamic-products-carousel-nav:disabled{ \n opacity:.4; cursor:default; \n}\n\n.iv-dynamic-products-carousel-nav-prev { \n left:0.25rem; \n}\n\n.iv-dynamic-products-carousel-nav-next { \n right:0.25rem; \n}\n\n.iv-dynamic-products-carousel-status { \n margin-top:0.75rem; \n font-size:0.875rem; \n text-align:center; \n color:var(--iv-carousel-status-color, #555); \n}\n\n.iv-dynamic-products-carousel-viewport::-webkit-scrollbar { \n display:none; \n}\n\n.iv-dynamic-products-carousel-viewport { \n -ms-overflow-style:none; \n scrollbar-width:none; \n}","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' \| 'CREATED_AT' \| 'BEST_SELLING' \| 'PRICE' \| 'TITLE' \| 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 24;\n @Prop() reversed: boolean = false; \n @Prop() componenttitle?: string;\n @Prop() titletag: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' = 'h2';\n @Prop() collectionhandle: string = 'all';\n @Prop() requestedfields: string;\n @Prop() calltoaction: boolean = false;\n @Prop() buttontext?: string;\n @Prop() addtocarttext?: string;\n @Prop() emptystring: string = 'No products found';\n @Prop() cachettl?: number; \n @Prop() stale?: boolean = true;\n @Prop() excluse?: string;\n \n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false;\n @State() page: number = 0; \n\n private readonly itemsPerPage = 6;\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products-carousel' });\n\n @Watch('type')\n @Watch('limit')\n @Watch('collectionhandle')\n @Watch('requestedfields')\n handlePropChange() { this.loadProducts(true); }\n\n async componentWillLoad() { \n await this.loadProducts(false); \n };\n \n private buildParams() {\n return {\n handle: this.collectionhandle,\n sort: this.type,\n fields: this.requestedfields,\n limit: 36, // Always fetch 36 products for filtering\n currency: state.currencyCode,\n reversed: this.reversed\n };\n };\n\n private ensureProductTypeField(fields: string): string {\n if(!fields) return 'productType';\n const arr = fields.split(',').map(f => f.trim());\n if(!arr.includes('productType')) arr.push('productType');\n return arr.join(',');\n };\n\n private filterAndSliceProducts(data: any[]): any[] {\n if(!this.excluse) return data.slice(0, this.limit);\n if(!this.requestedfields \|\| !this.requestedfields.includes('productType')) {\n this.requestedfields = this.ensureProductTypeField(this.requestedfields);\n };\n const filtered = data.filter(p => p.productType !== this.excluse);\n return filtered.slice(0, this.limit);\n };\n\n private async loadProducts(fromWatch: boolean) {\n const params = this.buildParams();\n const ttl = this.cachettl \|\| 1000 60 * 5;\n state.loading = !fromWatch; \n try {\n const data = await productCache.getOrSetData(\n params,\n async () => {\n const fresh = await fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);\n return fresh;\n },\n {\n ttl,\n staleWhileRevalidate: this.stale,\n transform: (fresh) => fresh \n }\n );\n const metaCheck = productCache.getData<typeof data>(params);\n this.staleData = metaCheck.isExpired && metaCheck.isStale;\n this.products = Array.isArray(data) ? this.filterAndSliceProducts(data) : [];\n this.page = 0;\n } catch (err: any) {\n this.errorMsg = 'Failed to load products';\n this.errors.handle({\n error: err,\n scope: 'loadProducts',\n userMessage: 'Unable to load products right now.',\n devMessage: 'fetchProducts failed in iv-dynamic-products',\n severity: 'error'\n });\n } finally {\n state.loading = false;\n };\n };\n\n private pagedProducts() {\n const chunks: any[][] = [];\n for(let i=0; i < this.products.length; i += this.itemsPerPage) {\n chunks.push(this.products.slice(i, i + this.itemsPerPage));\n };\n return chunks;\n };\n\n private next = () => { \n const pages = this.pagedProducts().length;\n if(this.page < pages - 1) this.page++;\n };\n\n private prev = () => { \n if(this.page > 0) this.page--;\n };\n\n render() {\n\n const TAG = this.titletag as any;\n\n return (\n <div class={BLOCK} data-stale={this.staleData ? 'true' : 'false'}>\n {this.componenttitle && <TAG class={`${BLOCK}-title`}>{this.componenttitle}</TAG>}\n {state.loading ? (\n <iv-spinner></iv-spinner>\n ) : this.errorMsg ? (\n <div class={`${BLOCK}-error`}>{this.errorMsg}</div>\n ) : this.products.length === 0 ? (\n <div class={`${BLOCK}-empty`}>{this.emptystring}</div>\n ) : (\n <div class={`${BLOCK}-carousel`} aria-roledescription=\"carousel\">\n <button class={`${BLOCK}-nav ${BLOCK}-nav-prev`} onClick={this.prev} disabled={this.page===0} aria-label=\"Previous\" type=\"button\">\n ‹\n </button>\n <div class={`${BLOCK}-viewport`}>\n <div class={`${BLOCK}-track`} style={{ transform: `translateX(-${this.page * 100}%)` }}>\n {this.pagedProducts().map((group, i) => (\n <div class={`${BLOCK}-slide`} role=\"group\" aria-label={`Slide ${i+1} of ${this.pagedProducts().length}`}> \n {group.map(product => (\n <iv-card\n cardtype='products'\n calltoaction={this.calltoaction}\n buttontext={this.buttontext}\n addtocarttext={this.addtocarttext}\n data={product}\n classmodifier={`${BLOCK}-card`} />\n ))}\n </div>\n ))}\n </div>\n </div>\n <button class={`${BLOCK}-nav ${BLOCK}-nav-next`} onClick={this.next} disabled={this.page===this.pagedProducts().length-1} aria-label=\"Next\" type=\"button\">\n ›\n </button>\n <div class={`${BLOCK}-status`} aria-live=\"polite\">{this.pagedProducts().length > 1 ? `Slide ${this.page+1} of ${this.pagedProducts().length}` : ''}</div>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"],"names":["createErrorHandler","state","productCache","fetchProducts","h"],"mappings":"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"}

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-CXkOeBU1.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["iv-dynamic-products.cjs",[[256,"iv-dynamic-products",{"type":[1],"limit":[2],"reversed":[4],"componenttitle":[1],"titletag":[1],"collectionhandle":[1],"carousel":[4],"requestedfields":[1],"calltoaction":[4],"buttontext":[1],"addtocarttext":[1],"emptystring":[1],"gridlayout":[1],"cachettl":[2],"stale":[4],"products":[32],"errorMsg":[32],"staleData":[32]},null,{"type":["handlePropChange"],"limit":["handlePropChange"],"collectionhandle":["handlePropChange"],"requestedfields":["handlePropChange"]}]]],["iv-suggest.cjs",[[256,"iv-suggest",{"topqueries":[1],"collections":[1],"products":[1],"banner":[1],"bannerurl":[1],"bannertitle":[1],"bannertitletag":[1],"bannerbuttontext":[1],"topquerytitle":[1],"productstitle":[1],"collectionstitle":[1],"gridlayout":[1],"requestfields":[1]}]]],["iv-dynamic-products-carousel.cjs",[[256,"iv-dynamic-products-carousel",{"type":[1],"limit":[2],"reversed":[4],"componenttitle":[1],"titletag":[1],"collectionhandle":[1],"requestedfields":[1],"calltoaction":[4],"buttontext":[1],"addtocarttext":[1],"emptystring":[1],"cachettl":[2],"stale":[4],"products":[32],"errorMsg":[32],"staleData":[32],"page":[32]},null,{"type":["handlePropChange"],"limit":["handlePropChange"],"collectionhandle":["handlePropChange"],"requestedfields":["handlePropChange"]}]]],["iv-predictive-search.cjs",[[256,"iv-predictive-search",{"searchlabel":[1],"labelposition":[1],"action":[1],"method":[1],"placeholder":[1],"minchars":[2],"debounce":[2],"resultslimit":[2],"showspinner":[4],"noresultstext":[1],"requestedfields":[1],"requestedresources":[1],"showallbuttontext":[1],"querybuttontext":[1],"clearbutton":[1],"expandable":[4],"tablayout":[1],"gridlayout":[1],"searchTerm":[32],"searchReturnData":[32],"noResults":[32]}]]],["iv-wishlist.cjs",[[256,"iv-wishlist",{"buttonaddvalue":[1],"buttonremovevalue":[1],"wishlistempty":[1],"buttonaddtocartvalue":[1],"viewwishlistvalue":[1],"productdata":[1],"usefields":[1],"previewtype":[1]}]]],["iv-carousel.cjs",[[257,"iv-carousel"]]],["iv-filters.cjs",[[256,"iv-filters"]]],["sw-in-grid-content.cjs",[[260,"sw-in-grid-content"]]],["sw-size-guide.cjs",[[260,"sw-size-guide",{"sizeUnits":[32]}]]],["iv-banner.cjs",[[260,"iv-banner",{"classmodifier":[1],"bannerurl":[1],"bannerbuttontext":[1],"bannertype":[1]}]]],["iv-tabs.cjs",[[260,"iv-tabs",{"labels":[16],"classModifier":[1,"class-modifier"],"tabLayout":[1,"tab-layout"],"activeTab":[32]}]]],["iv-spinner.cjs",[[256,"iv-spinner",{"show":[4]}]]],["iv-accordion_11.cjs",[[256,"iv-recently-viewed",{"componenttitle":[1],"titletag":[1],"numbertoshow":[2],"noviewhistory":[1],"requestedfields":[1],"items":[32]}],[257,"iv-modal"],[260,"iv-sidebar",{"closeicon":[1]},[[8,"openPullout","handleOpenPullout"]]],[256,"iv-toast-container",{"_bump":[32]}],[260,"iv-accordion",{"classmodifier":[1],"accordiontype":[1],"accordionlabels":[1],"showmultiple":[4],"showfirst":[4],"startingpanel":[2],"layout":[1],"activePanel":[32]}],[256,"iv-toast",{"message":[1],"toastId":[2,"toast-id"],"duration":[2],"type":[1]}],[256,"iv-wishlist-view"],[256,"iv-card",{"data":[16],"fields":[1],"cardtype":[1],"classmodifier":[1],"buttontext":[1],"calltoaction":[4],"addtocarttext":[1]}],[260,"iv-layout",{"sectionId":[1,"section-id"],"gridTemplateAreas":[1,"grid-template-areas"],"gap":[1],"verticalAlign":[1,"vertical-align"],"horizontalAlign":[1,"horizontal-align"],"wrapperTag":[1,"wrapper-tag"],"classModifier":[1,"class-modifier"]}],[260,"iv-link",{"classmodifier":[1],"linktype":[1],"linkhref":[1],"linktarget":[1],"linkrel":[1],"linkariaLabel":[1,"linkaria-label"]}],[260,"iv-button",{"type":[1],"classmodifier":[1],"eventname":[1],"eventdetail":[1],"buttonClick":[16]}]]]], options);
+  return index.bootstrapLazy([["iv-dynamic-products.cjs",[[256,"iv-dynamic-products",{"type":[1],"limit":[2],"reversed":[4],"componenttitle":[1],"titletag":[1],"collectionhandle":[1],"carousel":[4],"requestedfields":[1],"calltoaction":[4],"buttontext":[1],"addtocarttext":[1],"emptystring":[1],"gridlayout":[1],"cachettl":[2],"stale":[4],"products":[32],"errorMsg":[32],"staleData":[32]},null,{"type":["handlePropChange"],"limit":["handlePropChange"],"collectionhandle":["handlePropChange"],"requestedfields":["handlePropChange"]}]]],["iv-suggest.cjs",[[256,"iv-suggest",{"topqueries":[1],"collections":[1],"products":[1],"banner":[1],"bannerurl":[1],"bannertitle":[1],"bannertitletag":[1],"bannerbuttontext":[1],"topquerytitle":[1],"productstitle":[1],"collectionstitle":[1],"gridlayout":[1],"requestfields":[1]}]]],["iv-dynamic-products-carousel.cjs",[[256,"iv-dynamic-products-carousel",{"type":[1],"limit":[2],"reversed":[4],"componenttitle":[1],"titletag":[1],"collectionhandle":[1],"requestedfields":[1],"calltoaction":[4],"buttontext":[1],"addtocarttext":[1],"emptystring":[1],"cachettl":[2],"stale":[4],"excluse":[1],"products":[32],"errorMsg":[32],"staleData":[32],"page":[32]},null,{"type":["handlePropChange"],"limit":["handlePropChange"],"collectionhandle":["handlePropChange"],"requestedfields":["handlePropChange"]}]]],["iv-predictive-search.cjs",[[256,"iv-predictive-search",{"searchlabel":[1],"labelposition":[1],"action":[1],"method":[1],"placeholder":[1],"minchars":[2],"debounce":[2],"resultslimit":[2],"showspinner":[4],"noresultstext":[1],"requestedfields":[1],"requestedresources":[1],"showallbuttontext":[1],"querybuttontext":[1],"clearbutton":[1],"expandable":[4],"tablayout":[1],"gridlayout":[1],"searchTerm":[32],"searchReturnData":[32],"noResults":[32]}]]],["iv-wishlist.cjs",[[256,"iv-wishlist",{"buttonaddvalue":[1],"buttonremovevalue":[1],"wishlistempty":[1],"buttonaddtocartvalue":[1],"viewwishlistvalue":[1],"productdata":[1],"usefields":[1],"previewtype":[1]}]]],["iv-carousel.cjs",[[257,"iv-carousel"]]],["iv-filters.cjs",[[256,"iv-filters"]]],["sw-in-grid-content.cjs",[[260,"sw-in-grid-content"]]],["sw-size-guide.cjs",[[260,"sw-size-guide",{"sizeUnits":[32]}]]],["iv-banner.cjs",[[260,"iv-banner",{"classmodifier":[1],"bannerurl":[1],"bannerbuttontext":[1],"bannertype":[1]}]]],["iv-tabs.cjs",[[260,"iv-tabs",{"labels":[16],"classModifier":[1,"class-modifier"],"tabLayout":[1,"tab-layout"],"activeTab":[32]}]]],["iv-spinner.cjs",[[256,"iv-spinner",{"show":[4]}]]],["iv-accordion_11.cjs",[[256,"iv-recently-viewed",{"componenttitle":[1],"titletag":[1],"numbertoshow":[2],"noviewhistory":[1],"requestedfields":[1],"items":[32]}],[257,"iv-modal"],[260,"iv-sidebar",{"closeicon":[1]},[[8,"openPullout","handleOpenPullout"]]],[256,"iv-toast-container",{"_bump":[32]}],[260,"iv-accordion",{"classmodifier":[1],"accordiontype":[1],"accordionlabels":[1],"showmultiple":[4],"showfirst":[4],"startingpanel":[2],"layout":[1],"activePanel":[32]}],[256,"iv-toast",{"message":[1],"toastId":[2,"toast-id"],"duration":[2],"type":[1]}],[256,"iv-wishlist-view"],[256,"iv-card",{"data":[16],"fields":[1],"cardtype":[1],"classmodifier":[1],"buttontext":[1],"calltoaction":[4],"addtocarttext":[1]}],[260,"iv-layout",{"sectionId":[1,"section-id"],"gridTemplateAreas":[1,"grid-template-areas"],"gap":[1],"verticalAlign":[1,"vertical-align"],"horizontalAlign":[1,"horizontal-align"],"wrapperTag":[1,"wrapper-tag"],"classModifier":[1,"class-modifier"]}],[260,"iv-link",{"classmodifier":[1],"linktype":[1],"linkhref":[1],"linktarget":[1],"linkrel":[1],"linkariaLabel":[1,"linkaria-label"]}],[260,"iv-button",{"type":[1],"classmodifier":[1],"eventname":[1],"eventdetail":[1],"buttonClick":[16]}]]]], options);
 };
 exports.setNonce = index.setNonce;

package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.css CHANGED Viewed

@@ -59,6 +59,21 @@
   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
+/* Alignment fix: reserve consistent height for titles (2 lines) and anchor controls at bottom */
+.iv-dynamic-products-carousel-card .iv-card-title {
+  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  min-height: 2.4em;
+}
+.iv-dynamic-products-carousel-card .iv-card-controls {
+  margin-top: auto; /* push controls to bottom of flex column for uniform vertical alignment */
+}
 .iv-dynamic-products-carousel-card:hover {
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
   transform: translateY(-2px);

package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js CHANGED Viewed

@@ -18,6 +18,7 @@ export class IvDynamicProductsCarousel {
     emptystring = 'No products found';
     cachettl;
     stale = true;
+    excluse;
     products = [];
     errorMsg;
     staleData = false;
@@ -34,19 +35,39 @@ export class IvDynamicProductsCarousel {
             handle: this.collectionhandle,
             sort: this.type,
             fields: this.requestedfields,
-            limit: this.limit,
+            limit: 36, // Always fetch 36 products for filtering
             currency: state.currencyCode,
             reversed: this.reversed
         };
     }
     ;
+    ensureProductTypeField(fields) {
+        if (!fields)
+            return 'productType';
+        const arr = fields.split(',').map(f => f.trim());
+        if (!arr.includes('productType'))
+            arr.push('productType');
+        return arr.join(',');
+    }
+    ;
+    filterAndSliceProducts(data) {
+        if (!this.excluse)
+            return data.slice(0, this.limit);
+        if (!this.requestedfields || !this.requestedfields.includes('productType')) {
+            this.requestedfields = this.ensureProductTypeField(this.requestedfields);
+        }
+        ;
+        const filtered = data.filter(p => p.productType !== this.excluse);
+        return filtered.slice(0, this.limit);
+    }
+    ;
     async loadProducts(fromWatch) {
         const params = this.buildParams();
         const ttl = this.cachettl || 1000 * 60 * 5;
         state.loading = !fromWatch;
         try {
             const data = await productCache.getOrSetData(params, async () => {
-                const fresh = await fetchProducts(this.limit, this.collectionhandle, this.type, this.requestedfields, this.reversed);
+                const fresh = await fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);
                 return fresh;
             }, {
                 ttl,
@@ -55,7 +76,7 @@ export class IvDynamicProductsCarousel {
             });
             const metaCheck = productCache.getData(params);
             this.staleData = metaCheck.isExpired && metaCheck.isStale;
-            this.products = data || [];
+            this.products = Array.isArray(data) ? this.filterAndSliceProducts(data) : [];
             this.page = 0;
         }
         catch (err) {
@@ -94,7 +115,7 @@ export class IvDynamicProductsCarousel {
     };
     render() {
         const TAG = this.titletag;
-        return (h("div", { key: 'a0fa6574a48e8aaa6b400282aa9bab55c1babd4f', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '9ab7d2ed24377813fbb593f8a845e0c5775309a9', class: `${BLOCK}-title` }, this.componenttitle), state.loading ? (h("iv-spinner", null)) : this.errorMsg ? (h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), h("div", { class: `${BLOCK}-viewport` }, h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
+        return (h("div", { key: '3d471c1947c7f828d4b735e75bcc9bcabed4e972', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '753a4cb965549a9b910f5e9c1e44684163660f19', class: `${BLOCK}-title` }, this.componenttitle), state.loading ? (h("iv-spinner", null)) : this.errorMsg ? (h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), h("div", { class: `${BLOCK}-viewport` }, h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
     }
     ;
     static get is() { return "iv-dynamic-products-carousel"; }
@@ -364,6 +385,25 @@ export class IvDynamicProductsCarousel {
                 "reflect": false,
                 "attribute": "stale",
                 "defaultValue": "true"
+            },
+            "excluse": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "excluse"
             }
         };
     }

package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"iv-dynamic-products-carousel.js","sourceRoot":"","sources":["../../../src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,MAAM,KAAK,GAAG,8BAA8B,CAAC;AAQ7C,MAAM,OAAO,yBAAyB;IAC5B,IAAI,GAAgF,YAAY,CAAC;IACjG,KAAK,GAAW,EAAE,CAAC;IACnB,QAAQ,GAAY,KAAK,CAAC;IAC1B,cAAc,CAAU;IACxB,QAAQ,GAA4C,IAAI,CAAC;IACzD,gBAAgB,GAAW,KAAK,CAAC;IACjC,eAAe,CAAS;IACxB,YAAY,GAAY,KAAK,CAAC;IAC9B,UAAU,CAAU;IACpB,aAAa,CAAU;IACvB,WAAW,GAAW,mBAAmB,CAAC;IAC1C,QAAQ,CAAU;IAClB,KAAK,GAAa,IAAI,CAAC;IAEtB,QAAQ,GAAU,EAAE,CAAC;IACrB,QAAQ,CAAS;IACjB,SAAS,GAAY,KAAK,CAAC;IAC3B,IAAI,GAAW,CAAC,CAAC;IAET,YAAY,GAAG,CAAC,CAAC;IAE1B,MAAM,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,8BAA8B,EAAE,CAAC,CAAC;IAMnF,gBAAgB,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE/C,KAAK,CAAC,iBAAiB;QACrB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAAA,CAAC;IAEM,WAAW;QACjB,OAAO;YACL,MAAM,EAAE,IAAI,CAAC,gBAAgB;YAC7B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,eAAe;YAC5B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,KAAK,CAAC,YAAY;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAAA,CAAC;IAEM,KAAK,CAAC,YAAY,CAAC,SAAkB;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;QAC3C,KAAK,CAAC,OAAO,GAAG,CAAC,SAAS,CAAC;QAC3B,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,YAAY,CAC1C,MAAM,EACN,KAAK,IAAI,EAAE;gBACT,MAAM,KAAK,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACrH,OAAO,KAAK,CAAC;YACf,CAAC,EACD;gBACE,GAAG;gBACH,oBAAoB,EAAE,IAAI,CAAC,KAAK;gBAChC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK;aAC5B,CACF,CAAC;YACF,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAc,MAAM,CAAC,CAAC;YAC5D,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC;YAC1D,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QAChB,CAAC;QAAC,OAAO,GAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,GAAG,yBAAyB,CAAC;YAC1C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;gBACjB,KAAK,EAAE,GAAG;gBACV,KAAK,EAAE,cAAc;gBACrB,WAAW,EAAE,oCAAoC;gBACjD,UAAU,EAAE,6CAA6C;gBACzD,QAAQ,EAAE,OAAO;aAClB,CAAC,CAAC;QACL,CAAC;gBAAS,CAAC;YACT,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACxB,CAAC;QAAA,CAAC;IACJ,CAAC;IAAA,CAAC;IAEM,aAAa;QACnB,MAAM,MAAM,GAAY,EAAE,CAAC;QAC3B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YAC9D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;QAC7D,CAAC;QAAA,CAAC;QACF,OAAO,MAAM,CAAC;IAChB,CAAC;IAAA,CAAC;IAEM,IAAI,GAAG,GAAG,EAAE;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,CAAC,IAAI,GAAG,KAAK,GAAG,CAAC;YAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC,CAAC;IAEM,IAAI,GAAG,GAAG,EAAE;QAClB,IAAG,IAAI,CAAC,IAAI,GAAG,CAAC;YAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM;QAEJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAe,CAAC;QAEjC,OAAO,CACL,4DAAK,KAAK,EAAE,KAAK,gBAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAC7D,IAAI,CAAC,cAAc,IAAI,EAAC,GAAG,qDAAC,KAAK,EAAE,GAAG,KAAK,QAAQ,IAAG,IAAI,CAAC,cAAc,CAAO;YAChF,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACf,qBAAyB,CAC1B,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClB,WAAK,KAAK,EAAE,GAAG,KAAK,QAAQ,IAAG,IAAI,CAAC,QAAQ,CAAO,CACpD,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC/B,WAAK,KAAK,EAAE,GAAG,KAAK,QAAQ,IAAG,IAAI,CAAC,WAAW,CAAO,CACvD,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,GAAG,KAAK,WAAW,0BAAuB,UAAU;gBAC9D,cAAQ,KAAK,EAAE,GAAG,KAAK,QAAQ,KAAK,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAG,CAAC,gBAAa,UAAU,EAAC,IAAI,EAAC,QAAQ,aAExH;gBACT,WAAK,KAAK,EAAE,GAAG,KAAK,WAAW;oBAC7B,WAAK,KAAK,EAAE,GAAG,KAAK,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,IACnF,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACtC,WAAK,KAAK,EAAE,GAAG,KAAK,QAAQ,EAAE,IAAI,EAAC,OAAO,gBAAa,SAAS,CAAC,GAAC,CAAC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE,IACpG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACpB,eACE,QAAQ,EAAC,UAAU,EACnB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,OAAO,EACb,aAAa,EAAE,GAAG,KAAK,OAAO,GAAI,CACrC,CAAC,CACE,CACP,CAAC,CACE,CACF;gBACN,cAAQ,KAAK,EAAE,GAAG,KAAK,QAAQ,KAAK,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAC,CAAC,gBAAa,MAAM,EAAC,IAAI,EAAC,QAAQ,aAEhJ;gBACT,WAAK,KAAK,EAAE,GAAG,KAAK,SAAS,eAAY,QAAQ,IAAE,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAC,CAAC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAO;gBACxJ,IAAI,CAAC,SAAS,IAAI,CACjB,WAAK,KAAK,EAAE,GAAG,KAAK,kBAAkB,eAAY,QAAQ,uBAAkB,CAC7E,CACG,CACP,CACG,CACP,CAAC;IACJ,CAAC;IAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEH;AAAA,CAAC","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' \| 'CREATED_AT' \| 'BEST_SELLING' \| 'PRICE' \| 'TITLE' \| 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 24;\n @Prop() reversed: boolean = false; \n @Prop() componenttitle?: string;\n @Prop() titletag: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' = 'h2';\n @Prop() collectionhandle: string = 'all';\n @Prop() requestedfields: string;\n @Prop() calltoaction: boolean = false;\n @Prop() buttontext?: string;\n @Prop() addtocarttext?: string;\n @Prop() emptystring: string = 'No products found';\n @Prop() cachettl?: number; \n @Prop() stale?: boolean = true; \n \n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false;\n @State() page: number = 0; \n\n private readonly itemsPerPage = 6;\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products-carousel' });\n\n @Watch('type')\n @Watch('limit')\n @Watch('collectionhandle')\n @Watch('requestedfields')\n handlePropChange() { this.loadProducts(true); }\n\n async componentWillLoad() { \n await this.loadProducts(false); \n };\n \n private buildParams() {\n return {\n handle: this.collectionhandle,\n sort: this.type,\n fields: this.requestedfields,\n limit: this.limit,\n currency: state.currencyCode,\n reversed: this.reversed\n };\n };\n\n private async loadProducts(fromWatch: boolean) {\n const params = this.buildParams();\n const ttl = this.cachettl \|\| 1000 * 60 * 5;\n state.loading = !fromWatch; \n try {\n const data = await productCache.getOrSetData(\n params,\n async () => {\n const fresh = await fetchProducts(this.limit, this.collectionhandle, this.type, this.requestedfields, this.reversed);\n return fresh;\n },\n {\n ttl,\n staleWhileRevalidate: this.stale,\n transform: (fresh) => fresh \n }\n );\n const metaCheck = productCache.getData<typeof data>(params);\n this.staleData = metaCheck.isExpired && metaCheck.isStale;\n this.products = data \|\| [];\n this.page = 0;\n } catch (err: any) {\n this.errorMsg = 'Failed to load products';\n this.errors.handle({\n error: err,\n scope: 'loadProducts',\n userMessage: 'Unable to load products right now.',\n devMessage: 'fetchProducts failed in iv-dynamic-products',\n severity: 'error'\n });\n } finally {\n state.loading = false;\n };\n };\n\n private pagedProducts() {\n const chunks: any[][] = [];\n for(let i=0; i < this.products.length; i += this.itemsPerPage) {\n chunks.push(this.products.slice(i, i + this.itemsPerPage));\n };\n return chunks;\n };\n\n private next = () => { \n const pages = this.pagedProducts().length;\n if(this.page < pages - 1) this.page++;\n };\n\n private prev = () => { \n if(this.page > 0) this.page--;\n };\n\n render() {\n\n const TAG = this.titletag as any;\n\n return (\n <div class={BLOCK} data-stale={this.staleData ? 'true' : 'false'}>\n {this.componenttitle && <TAG class={`${BLOCK}-title`}>{this.componenttitle}</TAG>}\n {state.loading ? (\n <iv-spinner></iv-spinner>\n ) : this.errorMsg ? (\n <div class={`${BLOCK}-error`}>{this.errorMsg}</div>\n ) : this.products.length === 0 ? (\n <div class={`${BLOCK}-empty`}>{this.emptystring}</div>\n ) : (\n <div class={`${BLOCK}-carousel`} aria-roledescription=\"carousel\">\n <button class={`${BLOCK}-nav ${BLOCK}-nav-prev`} onClick={this.prev} disabled={this.page===0} aria-label=\"Previous\" type=\"button\">\n ‹\n </button>\n <div class={`${BLOCK}-viewport`}>\n <div class={`${BLOCK}-track`} style={{ transform: `translateX(-${this.page * 100}%)` }}>\n {this.pagedProducts().map((group, i) => (\n <div class={`${BLOCK}-slide`} role=\"group\" aria-label={`Slide ${i+1} of ${this.pagedProducts().length}`}> \n {group.map(product => (\n <iv-card\n cardtype='products'\n calltoaction={this.calltoaction}\n buttontext={this.buttontext}\n addtocarttext={this.addtocarttext}\n data={product}\n classmodifier={`${BLOCK}-card`} />\n ))}\n </div>\n ))}\n </div>\n </div>\n <button class={`${BLOCK}-nav ${BLOCK}-nav-next`} onClick={this.next} disabled={this.page===this.pagedProducts().length-1} aria-label=\"Next\" type=\"button\">\n ›\n </button>\n <div class={`${BLOCK}-status`} aria-live=\"polite\">{this.pagedProducts().length > 1 ? `Slide ${this.page+1} of ${this.pagedProducts().length}` : ''}</div>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"]}
1	+ {"version":3,"file":"iv-dynamic-products-carousel.js","sourceRoot":"","sources":["../../../src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' \| 'CREATED_AT' \| 'BEST_SELLING' \| 'PRICE' \| 'TITLE' \| 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 24;\n @Prop() reversed: boolean = false; \n @Prop() componenttitle?: string;\n @Prop() titletag: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' = 'h2';\n @Prop() collectionhandle: string = 'all';\n @Prop() requestedfields: string;\n @Prop() calltoaction: boolean = false;\n @Prop() buttontext?: string;\n @Prop() addtocarttext?: string;\n @Prop() emptystring: string = 'No products found';\n @Prop() cachettl?: number; \n @Prop() stale?: boolean = true;\n @Prop() excluse?: string;\n \n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false;\n @State() page: number = 0; \n\n private readonly itemsPerPage = 6;\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products-carousel' });\n\n @Watch('type')\n @Watch('limit')\n @Watch('collectionhandle')\n @Watch('requestedfields')\n handlePropChange() { this.loadProducts(true); }\n\n async componentWillLoad() { \n await this.loadProducts(false); \n };\n \n private buildParams() {\n return {\n handle: this.collectionhandle,\n sort: this.type,\n fields: this.requestedfields,\n limit: 36, // Always fetch 36 products for filtering\n currency: state.currencyCode,\n reversed: this.reversed\n };\n };\n\n private ensureProductTypeField(fields: string): string {\n if(!fields) return 'productType';\n const arr = fields.split(',').map(f => f.trim());\n if(!arr.includes('productType')) arr.push('productType');\n return arr.join(',');\n };\n\n private filterAndSliceProducts(data: any[]): any[] {\n if(!this.excluse) return data.slice(0, this.limit);\n if(!this.requestedfields \|\| !this.requestedfields.includes('productType')) {\n this.requestedfields = this.ensureProductTypeField(this.requestedfields);\n };\n const filtered = data.filter(p => p.productType !== this.excluse);\n return filtered.slice(0, this.limit);\n };\n\n private async loadProducts(fromWatch: boolean) {\n const params = this.buildParams();\n const ttl = this.cachettl \|\| 1000 * 60 * 5;\n state.loading = !fromWatch; \n try {\n const data = await productCache.getOrSetData(\n params,\n async () => {\n const fresh = await fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);\n return fresh;\n },\n {\n ttl,\n staleWhileRevalidate: this.stale,\n transform: (fresh) => fresh \n }\n );\n const metaCheck = productCache.getData<typeof data>(params);\n this.staleData = metaCheck.isExpired && metaCheck.isStale;\n this.products = Array.isArray(data) ? this.filterAndSliceProducts(data) : [];\n this.page = 0;\n } catch (err: any) {\n this.errorMsg = 'Failed to load products';\n this.errors.handle({\n error: err,\n scope: 'loadProducts',\n userMessage: 'Unable to load products right now.',\n devMessage: 'fetchProducts failed in iv-dynamic-products',\n severity: 'error'\n });\n } finally {\n state.loading = false;\n };\n };\n\n private pagedProducts() {\n const chunks: any[][] = [];\n for(let i=0; i < this.products.length; i += this.itemsPerPage) {\n chunks.push(this.products.slice(i, i + this.itemsPerPage));\n };\n return chunks;\n };\n\n private next = () => { \n const pages = this.pagedProducts().length;\n if(this.page < pages - 1) this.page++;\n };\n\n private prev = () => { \n if(this.page > 0) this.page--;\n };\n\n render() {\n\n const TAG = this.titletag as any;\n\n return (\n <div class={BLOCK} data-stale={this.staleData ? 'true' : 'false'}>\n {this.componenttitle && <TAG class={`${BLOCK}-title`}>{this.componenttitle}</TAG>}\n {state.loading ? (\n <iv-spinner></iv-spinner>\n ) : this.errorMsg ? (\n <div class={`${BLOCK}-error`}>{this.errorMsg}</div>\n ) : this.products.length === 0 ? (\n <div class={`${BLOCK}-empty`}>{this.emptystring}</div>\n ) : (\n <div class={`${BLOCK}-carousel`} aria-roledescription=\"carousel\">\n <button class={`${BLOCK}-nav ${BLOCK}-nav-prev`} onClick={this.prev} disabled={this.page===0} aria-label=\"Previous\" type=\"button\">\n ‹\n </button>\n <div class={`${BLOCK}-viewport`}>\n <div class={`${BLOCK}-track`} style={{ transform: `translateX(-${this.page * 100}%)` }}>\n {this.pagedProducts().map((group, i) => (\n <div class={`${BLOCK}-slide`} role=\"group\" aria-label={`Slide ${i+1} of ${this.pagedProducts().length}`}> \n {group.map(product => (\n <iv-card\n cardtype='products'\n calltoaction={this.calltoaction}\n buttontext={this.buttontext}\n addtocarttext={this.addtocarttext}\n data={product}\n classmodifier={`${BLOCK}-card`} />\n ))}\n </div>\n ))}\n </div>\n </div>\n <button class={`${BLOCK}-nav ${BLOCK}-nav-next`} onClick={this.next} disabled={this.page===this.pagedProducts().length-1} aria-label=\"Next\" type=\"button\">\n ›\n </button>\n <div class={`${BLOCK}-status`} aria-live=\"polite\">{this.pagedProducts().length > 1 ? `Slide ${this.page+1} of ${this.pagedProducts().length}` : ''}</div>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"]}

package/dist/components/iv-dynamic-products-carousel.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './p-GgFls1_9.js';
 import { d as defineCustomElement$3 } from './p-DwwyNs2H.js';
 import { d as defineCustomElement$2 } from './p-B0FwtJkz.js';
-const ivDynamicProductsCarouselCss = ":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";
+const ivDynamicProductsCarouselCss = ":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card .iv-card-title{line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.4em}.iv-dynamic-products-carousel-card .iv-card-controls{margin-top:auto;}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";
 const BLOCK = 'iv-dynamic-products-carousel';
 const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDynamicProductsCarousel extends H {
@@ -29,6 +29,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
     emptystring = 'No products found';
     cachettl;
     stale = true;
+    excluse;
     products = [];
     errorMsg;
     staleData = false;
@@ -45,19 +46,38 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
             handle: this.collectionhandle,
             sort: this.type,
             fields: this.requestedfields,
-            limit: this.limit,
+            limit: 36, // Always fetch 36 products for filtering
             currency: state.currencyCode,
             reversed: this.reversed
         };
     }
     ;
+    ensureProductTypeField(fields) {
+        if (!fields)
+            return 'productType';
+        const arr = fields.split(',').map(f => f.trim());
+        if (!arr.includes('productType'))
+            arr.push('productType');
+        return arr.join(',');
+    }
+    ;
+    filterAndSliceProducts(data) {
+        if (!this.excluse)
+            return data.slice(0, this.limit);
+        if (!this.requestedfields || !this.requestedfields.includes('productType')) {
+            this.requestedfields = this.ensureProductTypeField(this.requestedfields);
+        }
+        const filtered = data.filter(p => p.productType !== this.excluse);
+        return filtered.slice(0, this.limit);
+    }
+    ;
     async loadProducts(fromWatch) {
         const params = this.buildParams();
         const ttl = this.cachettl || 1000 * 60 * 5;
         state.loading = !fromWatch;
         try {
             const data = await productCache.getOrSetData(params, async () => {
-                const fresh = await fetchProducts(this.limit, this.collectionhandle, this.type, this.requestedfields, this.reversed);
+                const fresh = await fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);
                 return fresh;
             }, {
                 ttl,
@@ -66,7 +86,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
             });
             const metaCheck = productCache.getData(params);
             this.staleData = metaCheck.isExpired && metaCheck.isStale;
-            this.products = data || [];
+            this.products = Array.isArray(data) ? this.filterAndSliceProducts(data) : [];
             this.page = 0;
         }
         catch (err) {
@@ -103,7 +123,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
     };
     render() {
         const TAG = this.titletag;
-        return (h("div", { key: 'a0fa6574a48e8aaa6b400282aa9bab55c1babd4f', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '9ab7d2ed24377813fbb593f8a845e0c5775309a9', class: `${BLOCK}-title` }, this.componenttitle), state.loading ? (h("iv-spinner", null)) : this.errorMsg ? (h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), h("div", { class: `${BLOCK}-viewport` }, h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
+        return (h("div", { key: '3d471c1947c7f828d4b735e75bcc9bcabed4e972', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '753a4cb965549a9b910f5e9c1e44684163660f19', class: `${BLOCK}-title` }, this.componenttitle), state.loading ? (h("iv-spinner", null)) : this.errorMsg ? (h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), h("div", { class: `${BLOCK}-viewport` }, h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
     }
     ;
     static get watchers() { return {
@@ -127,6 +147,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
         "emptystring": [1],
         "cachettl": [2],
         "stale": [4],
+        "excluse": [1],
         "products": [32],
         "errorMsg": [32],
         "staleData": [32],

package/dist/components/iv-dynamic-products-carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"iv-dynamic-products-carousel.js","mappings":"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","names":["IvDynamicProductsCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n.iv-dynamic-products-carousel-card:hover { \n box-shadow:0 4px 14px rgba(0,0,0,.15); \n transform:translateY(-2px); \n}\n\n.iv-dynamic-products-carousel-card:active { \n transform:translateY(0); \n box-shadow:0 2px 6px rgba(0,0,0,.12); \n}\n\n.iv-dynamic-products-carousel-card img, \n.iv-dynamic-products-carousel-card picture, \n.iv-dynamic-products-carousel-card .media { \n width:100%; \n aspect-ratio:1/1; \n object-fit:contain; \n display:flex; \n align-items:center; \n justify-content:center; \n margin:0 0 .65rem; \n}\n\n.iv-dynamic-products-carousel-nav { \n position:absolute; \n top:50%; \n transform:translateY(-50%); \n background:var(--iv-carousel-nav-bg, rgba(0,0,0,.55)); \n color:#fff; \n border:none; \n width:2.75rem; \n height:2.75rem; \n border-radius:50%; \n display:flex; \n align-items:center; \n justify-content:center; \n cursor:pointer; \n backdrop-filter:blur(6px); \n box-shadow:0 4px 12px rgba(0,0,0,.25); \n transition:background .2s ease, \n transform .2s ease; \n outline:none;\n z-index: 10;\n }\n\n.iv-dynamic-products-carousel-nav:focus-visible { \n outline:2px solid #fff; \n outline-offset:3px; \n}\n\n.iv-dynamic-products-carousel-nav:hover:not(:disabled){\n background:var(--iv-carousel-nav-bg-hover, rgba(0,0,0,.75)); \n transform:translateY(-50%) scale(1.05); \n box-shadow:0 6px 18px rgba(0,0,0,.35);\n}\n\n.iv-dynamic-products-carousel-nav:disabled{ \n opacity:.4; cursor:default; \n}\n\n.iv-dynamic-products-carousel-nav-prev { \n left:0.25rem; \n}\n\n.iv-dynamic-products-carousel-nav-next { \n right:0.25rem; \n}\n\n.iv-dynamic-products-carousel-status { \n margin-top:0.75rem; \n font-size:0.875rem; \n text-align:center; \n color:var(--iv-carousel-status-color, #555); \n}\n\n.iv-dynamic-products-carousel-viewport::-webkit-scrollbar { \n display:none; \n}\n\n.iv-dynamic-products-carousel-viewport { \n -ms-overflow-style:none; \n scrollbar-width:none; \n}","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' \| 'CREATED_AT' \| 'BEST_SELLING' \| 'PRICE' \| 'TITLE' \| 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 24;\n @Prop() reversed: boolean = false; \n @Prop() componenttitle?: string;\n @Prop() titletag: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' = 'h2';\n @Prop() collectionhandle: string = 'all';\n @Prop() requestedfields: string;\n @Prop() calltoaction: boolean = false;\n @Prop() buttontext?: string;\n @Prop() addtocarttext?: string;\n @Prop() emptystring: string = 'No products found';\n @Prop() cachettl?: number; \n @Prop() stale?: boolean = true; \n \n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false;\n @State() page: number = 0; \n\n private readonly itemsPerPage = 6;\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products-carousel' });\n\n @Watch('type')\n @Watch('limit')\n @Watch('collectionhandle')\n @Watch('requestedfields')\n handlePropChange() { this.loadProducts(true); }\n\n async componentWillLoad() { \n await this.loadProducts(false); \n };\n \n private buildParams() {\n return {\n handle: this.collectionhandle,\n sort: this.type,\n fields: this.requestedfields,\n limit: this.limit,\n currency: state.currencyCode,\n reversed: this.reversed\n };\n };\n\n private async loadProducts(fromWatch: boolean) {\n const params = this.buildParams();\n const ttl = this.cachettl \|\| 1000 * 60 * 5;\n state.loading = !fromWatch; \n try {\n const data = await productCache.getOrSetData(\n params,\n async () => {\n const fresh = await fetchProducts(this.limit, this.collectionhandle, this.type, this.requestedfields, this.reversed);\n return fresh;\n },\n {\n ttl,\n staleWhileRevalidate: this.stale,\n transform: (fresh) => fresh \n }\n );\n const metaCheck = productCache.getData<typeof data>(params);\n this.staleData = metaCheck.isExpired && metaCheck.isStale;\n this.products = data \|\| [];\n this.page = 0;\n } catch (err: any) {\n this.errorMsg = 'Failed to load products';\n this.errors.handle({\n error: err,\n scope: 'loadProducts',\n userMessage: 'Unable to load products right now.',\n devMessage: 'fetchProducts failed in iv-dynamic-products',\n severity: 'error'\n });\n } finally {\n state.loading = false;\n };\n };\n\n private pagedProducts() {\n const chunks: any[][] = [];\n for(let i=0; i < this.products.length; i += this.itemsPerPage) {\n chunks.push(this.products.slice(i, i + this.itemsPerPage));\n };\n return chunks;\n };\n\n private next = () => { \n const pages = this.pagedProducts().length;\n if(this.page < pages - 1) this.page++;\n };\n\n private prev = () => { \n if(this.page > 0) this.page--;\n };\n\n render() {\n\n const TAG = this.titletag as any;\n\n return (\n <div class={BLOCK} data-stale={this.staleData ? 'true' : 'false'}>\n {this.componenttitle && <TAG class={`${BLOCK}-title`}>{this.componenttitle}</TAG>}\n {state.loading ? (\n <iv-spinner></iv-spinner>\n ) : this.errorMsg ? (\n <div class={`${BLOCK}-error`}>{this.errorMsg}</div>\n ) : this.products.length === 0 ? (\n <div class={`${BLOCK}-empty`}>{this.emptystring}</div>\n ) : (\n <div class={`${BLOCK}-carousel`} aria-roledescription=\"carousel\">\n <button class={`${BLOCK}-nav ${BLOCK}-nav-prev`} onClick={this.prev} disabled={this.page===0} aria-label=\"Previous\" type=\"button\">\n ‹\n </button>\n <div class={`${BLOCK}-viewport`}>\n <div class={`${BLOCK}-track`} style={{ transform: `translateX(-${this.page * 100}%)` }}>\n {this.pagedProducts().map((group, i) => (\n <div class={`${BLOCK}-slide`} role=\"group\" aria-label={`Slide ${i+1} of ${this.pagedProducts().length}`}> \n {group.map(product => (\n <iv-card\n cardtype='products'\n calltoaction={this.calltoaction}\n buttontext={this.buttontext}\n addtocarttext={this.addtocarttext}\n data={product}\n classmodifier={`${BLOCK}-card`} />\n ))}\n </div>\n ))}\n </div>\n </div>\n <button class={`${BLOCK}-nav ${BLOCK}-nav-next`} onClick={this.next} disabled={this.page===this.pagedProducts().length-1} aria-label=\"Next\" type=\"button\">\n ›\n </button>\n <div class={`${BLOCK}-status`} aria-live=\"polite\">{this.pagedProducts().length > 1 ? `Slide ${this.page+1} of ${this.pagedProducts().length}` : ''}</div>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"],"version":3}
1	+ {"file":"iv-dynamic-products-carousel.js","mappings":"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","names":["IvDynamicProductsCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n/* Alignment fix: reserve consistent height for titles (2 lines) and anchor controls at bottom /\n.iv-dynamic-products-carousel-card .iv-card-title {\n line-height:1.2;\n display:-webkit-box;\n -webkit-box-orient:vertical;\n -webkit-line-clamp:2;\n line-clamp:2;\n overflow:hidden;\n min-height:calc(2 1.2em);\n}\n\n.iv-dynamic-products-carousel-card .iv-card-controls {\n margin-top:auto; /* push controls to bottom of flex column for uniform vertical alignment /\n}\n\n.iv-dynamic-products-carousel-card:hover { \n box-shadow:0 4px 14px rgba(0,0,0,.15); \n transform:translateY(-2px); \n}\n\n.iv-dynamic-products-carousel-card:active { \n transform:translateY(0); \n box-shadow:0 2px 6px rgba(0,0,0,.12); \n}\n\n.iv-dynamic-products-carousel-card img, \n.iv-dynamic-products-carousel-card picture, \n.iv-dynamic-products-carousel-card .media { \n width:100%; \n aspect-ratio:1/1; \n object-fit:contain; \n display:flex; \n align-items:center; \n justify-content:center; \n margin:0 0 .65rem; \n}\n\n.iv-dynamic-products-carousel-nav { \n position:absolute; \n top:50%; \n transform:translateY(-50%); \n background:var(--iv-carousel-nav-bg, rgba(0,0,0,.55)); \n color:#fff; \n border:none; \n width:2.75rem; \n height:2.75rem; \n border-radius:50%; \n display:flex; \n align-items:center; \n justify-content:center; \n cursor:pointer; \n backdrop-filter:blur(6px); \n box-shadow:0 4px 12px rgba(0,0,0,.25); \n transition:background .2s ease, \n transform .2s ease; \n outline:none;\n z-index: 10;\n }\n\n.iv-dynamic-products-carousel-nav:focus-visible { \n outline:2px solid #fff; \n outline-offset:3px; \n}\n\n.iv-dynamic-products-carousel-nav:hover:not(:disabled){\n background:var(--iv-carousel-nav-bg-hover, rgba(0,0,0,.75)); \n transform:translateY(-50%) scale(1.05); \n box-shadow:0 6px 18px rgba(0,0,0,.35);\n}\n\n.iv-dynamic-products-carousel-nav:disabled{ \n opacity:.4; cursor:default; \n}\n\n.iv-dynamic-products-carousel-nav-prev { \n left:0.25rem; \n}\n\n.iv-dynamic-products-carousel-nav-next { \n right:0.25rem; \n}\n\n.iv-dynamic-products-carousel-status { \n margin-top:0.75rem; \n font-size:0.875rem; \n text-align:center; \n color:var(--iv-carousel-status-color, #555); \n}\n\n.iv-dynamic-products-carousel-viewport::-webkit-scrollbar { \n display:none; \n}\n\n.iv-dynamic-products-carousel-viewport { \n -ms-overflow-style:none; \n scrollbar-width:none; \n}","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' \| 'CREATED_AT' \| 'BEST_SELLING' \| 'PRICE' \| 'TITLE' \| 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 24;\n @Prop() reversed: boolean = false; \n @Prop() componenttitle?: string;\n @Prop() titletag: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' = 'h2';\n @Prop() collectionhandle: string = 'all';\n @Prop() requestedfields: string;\n @Prop() calltoaction: boolean = false;\n @Prop() buttontext?: string;\n @Prop() addtocarttext?: string;\n @Prop() emptystring: string = 'No products found';\n @Prop() cachettl?: number; \n @Prop() stale?: boolean = true;\n @Prop() excluse?: string;\n \n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false;\n @State() page: number = 0; \n\n private readonly itemsPerPage = 6;\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products-carousel' });\n\n @Watch('type')\n @Watch('limit')\n @Watch('collectionhandle')\n @Watch('requestedfields')\n handlePropChange() { this.loadProducts(true); }\n\n async componentWillLoad() { \n await this.loadProducts(false); \n };\n \n private buildParams() {\n return {\n handle: this.collectionhandle,\n sort: this.type,\n fields: this.requestedfields,\n limit: 36, // Always fetch 36 products for filtering\n currency: state.currencyCode,\n reversed: this.reversed\n };\n };\n\n private ensureProductTypeField(fields: string): string {\n if(!fields) return 'productType';\n const arr = fields.split(',').map(f => f.trim());\n if(!arr.includes('productType')) arr.push('productType');\n return arr.join(',');\n };\n\n private filterAndSliceProducts(data: any[]): any[] {\n if(!this.excluse) return data.slice(0, this.limit);\n if(!this.requestedfields \|\| !this.requestedfields.includes('productType')) {\n this.requestedfields = this.ensureProductTypeField(this.requestedfields);\n };\n const filtered = data.filter(p => p.productType !== this.excluse);\n return filtered.slice(0, this.limit);\n };\n\n private async loadProducts(fromWatch: boolean) {\n const params = this.buildParams();\n const ttl = this.cachettl \|\| 1000 60 * 5;\n state.loading = !fromWatch; \n try {\n const data = await productCache.getOrSetData(\n params,\n async () => {\n const fresh = await fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);\n return fresh;\n },\n {\n ttl,\n staleWhileRevalidate: this.stale,\n transform: (fresh) => fresh \n }\n );\n const metaCheck = productCache.getData<typeof data>(params);\n this.staleData = metaCheck.isExpired && metaCheck.isStale;\n this.products = Array.isArray(data) ? this.filterAndSliceProducts(data) : [];\n this.page = 0;\n } catch (err: any) {\n this.errorMsg = 'Failed to load products';\n this.errors.handle({\n error: err,\n scope: 'loadProducts',\n userMessage: 'Unable to load products right now.',\n devMessage: 'fetchProducts failed in iv-dynamic-products',\n severity: 'error'\n });\n } finally {\n state.loading = false;\n };\n };\n\n private pagedProducts() {\n const chunks: any[][] = [];\n for(let i=0; i < this.products.length; i += this.itemsPerPage) {\n chunks.push(this.products.slice(i, i + this.itemsPerPage));\n };\n return chunks;\n };\n\n private next = () => { \n const pages = this.pagedProducts().length;\n if(this.page < pages - 1) this.page++;\n };\n\n private prev = () => { \n if(this.page > 0) this.page--;\n };\n\n render() {\n\n const TAG = this.titletag as any;\n\n return (\n <div class={BLOCK} data-stale={this.staleData ? 'true' : 'false'}>\n {this.componenttitle && <TAG class={`${BLOCK}-title`}>{this.componenttitle}</TAG>}\n {state.loading ? (\n <iv-spinner></iv-spinner>\n ) : this.errorMsg ? (\n <div class={`${BLOCK}-error`}>{this.errorMsg}</div>\n ) : this.products.length === 0 ? (\n <div class={`${BLOCK}-empty`}>{this.emptystring}</div>\n ) : (\n <div class={`${BLOCK}-carousel`} aria-roledescription=\"carousel\">\n <button class={`${BLOCK}-nav ${BLOCK}-nav-prev`} onClick={this.prev} disabled={this.page===0} aria-label=\"Previous\" type=\"button\">\n ‹\n </button>\n <div class={`${BLOCK}-viewport`}>\n <div class={`${BLOCK}-track`} style={{ transform: `translateX(-${this.page * 100}%)` }}>\n {this.pagedProducts().map((group, i) => (\n <div class={`${BLOCK}-slide`} role=\"group\" aria-label={`Slide ${i+1} of ${this.pagedProducts().length}`}> \n {group.map(product => (\n <iv-card\n cardtype='products'\n calltoaction={this.calltoaction}\n buttontext={this.buttontext}\n addtocarttext={this.addtocarttext}\n data={product}\n classmodifier={`${BLOCK}-card`} />\n ))}\n </div>\n ))}\n </div>\n </div>\n <button class={`${BLOCK}-nav ${BLOCK}-nav-next`} onClick={this.next} disabled={this.page===this.pagedProducts().length-1} aria-label=\"Next\" type=\"button\">\n ›\n </button>\n <div class={`${BLOCK}-status`} aria-live=\"polite\">{this.pagedProducts().length > 1 ? `Slide ${this.page+1} of ${this.pagedProducts().length}` : ''}</div>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"],"version":3}