the-foxy-library 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/intravenous.cjs.js +1 -1
- package/dist/cjs/iv-dynamic-products-carousel.cjs.entry.js +31 -4
- package/dist/cjs/iv-dynamic-products-carousel.entry.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js +52 -4
- package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js.map +1 -1
- package/dist/components/iv-dynamic-products-carousel.js +32 -4
- package/dist/components/iv-dynamic-products-carousel.js.map +1 -1
- package/dist/esm/intravenous.js +1 -1
- package/dist/esm/iv-dynamic-products-carousel.entry.js +31 -4
- package/dist/esm/iv-dynamic-products-carousel.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/intravenous/intravenous.esm.js +1 -1
- package/dist/intravenous/iv-dynamic-products-carousel.entry.esm.js.map +1 -1
- package/dist/intravenous/p-bdc8dadb.entry.js +2 -0
- package/dist/intravenous/p-bdc8dadb.entry.js.map +1 -0
- package/dist/types/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.d.ts +3 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/dist/intravenous/p-d26de1f0.entry.js +0 -2
- package/dist/intravenous/p-d26de1f0.entry.js.map +0 -1
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
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);
|
|
22
|
+
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);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -24,6 +24,7 @@ const IvDynamicProductsCarousel = class {
|
|
|
24
24
|
emptystring = 'No products found';
|
|
25
25
|
cachettl;
|
|
26
26
|
stale = true;
|
|
27
|
+
excluse;
|
|
27
28
|
products = [];
|
|
28
29
|
errorMsg;
|
|
29
30
|
staleData = false;
|
|
@@ -40,19 +41,38 @@ const IvDynamicProductsCarousel = class {
|
|
|
40
41
|
handle: this.collectionhandle,
|
|
41
42
|
sort: this.type,
|
|
42
43
|
fields: this.requestedfields,
|
|
43
|
-
limit:
|
|
44
|
+
limit: 36, // Always fetch 36 products for filtering
|
|
44
45
|
currency: index.state.currencyCode,
|
|
45
46
|
reversed: this.reversed
|
|
46
47
|
};
|
|
47
48
|
}
|
|
48
49
|
;
|
|
50
|
+
ensureProductTypeField(fields) {
|
|
51
|
+
if (!fields)
|
|
52
|
+
return 'productType';
|
|
53
|
+
const arr = fields.split(',').map(f => f.trim());
|
|
54
|
+
if (!arr.includes('productType'))
|
|
55
|
+
arr.push('productType');
|
|
56
|
+
return arr.join(',');
|
|
57
|
+
}
|
|
58
|
+
;
|
|
59
|
+
filterAndSliceProducts(data) {
|
|
60
|
+
if (!this.excluse)
|
|
61
|
+
return data.slice(0, this.limit);
|
|
62
|
+
if (!this.requestedfields || !this.requestedfields.includes('productType')) {
|
|
63
|
+
this.requestedfields = this.ensureProductTypeField(this.requestedfields);
|
|
64
|
+
}
|
|
65
|
+
const filtered = data.filter(p => p.productType !== this.excluse);
|
|
66
|
+
return filtered.slice(0, this.limit);
|
|
67
|
+
}
|
|
68
|
+
;
|
|
49
69
|
async loadProducts(fromWatch) {
|
|
50
70
|
const params = this.buildParams();
|
|
51
71
|
const ttl = this.cachettl || 1000 * 60 * 5;
|
|
52
72
|
index.state.loading = !fromWatch;
|
|
53
73
|
try {
|
|
54
74
|
const data = await factory.productCache.getOrSetData(params, async () => {
|
|
55
|
-
const fresh = await factory$1.fetchProducts(
|
|
75
|
+
const fresh = await factory$1.fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);
|
|
56
76
|
return fresh;
|
|
57
77
|
}, {
|
|
58
78
|
ttl,
|
|
@@ -61,7 +81,14 @@ const IvDynamicProductsCarousel = class {
|
|
|
61
81
|
});
|
|
62
82
|
const metaCheck = factory.productCache.getData(params);
|
|
63
83
|
this.staleData = metaCheck.isExpired && metaCheck.isStale;
|
|
64
|
-
|
|
84
|
+
let productsArr = [];
|
|
85
|
+
if (data && data.products && Array.isArray(data.products.edges)) {
|
|
86
|
+
productsArr = data.products.edges.map((e) => e.node);
|
|
87
|
+
}
|
|
88
|
+
else if (Array.isArray(data)) {
|
|
89
|
+
productsArr = data;
|
|
90
|
+
}
|
|
91
|
+
this.products = this.filterAndSliceProducts(productsArr);
|
|
65
92
|
this.page = 0;
|
|
66
93
|
}
|
|
67
94
|
catch (err) {
|
|
@@ -98,7 +125,7 @@ const IvDynamicProductsCarousel = class {
|
|
|
98
125
|
};
|
|
99
126
|
render() {
|
|
100
127
|
const TAG = this.titletag;
|
|
101
|
-
return (index.h("div", { key: '
|
|
128
|
+
return (index.h("div", { key: 'd464de93770d9a35e4436dce59800edc0b699a31', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && index.h(TAG, { key: '9ecac3c222174459956556ac1f84d0b990c6a3c3', 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"))))));
|
|
102
129
|
}
|
|
103
130
|
;
|
|
104
131
|
static get watchers() { return {
|
|
@@ -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/* 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 \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,87FAA87F;;ACMn+F,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 let productsArr: any[] = [];\n if(data && data.products && Array.isArray(data.products.edges)) {\n productsArr = data.products.edges.map((e: any) => e.node);\n } else if(Array.isArray(data)) {\n productsArr = data;\n };\n this.products = this.filterAndSliceProducts(productsArr);\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 \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
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-CXkOeBU1.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
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);
|
|
9
|
+
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);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js
CHANGED
|
@@ -18,6 +18,7 @@ export class IvDynamicProductsCarousel {
|
|
|
18
18
|
emptystring = 'No products found';
|
|
19
19
|
cachettl;
|
|
20
20
|
stale = true;
|
|
21
|
+
excluse;
|
|
21
22
|
products = [];
|
|
22
23
|
errorMsg;
|
|
23
24
|
staleData = false;
|
|
@@ -34,19 +35,39 @@ export class IvDynamicProductsCarousel {
|
|
|
34
35
|
handle: this.collectionhandle,
|
|
35
36
|
sort: this.type,
|
|
36
37
|
fields: this.requestedfields,
|
|
37
|
-
limit:
|
|
38
|
+
limit: 36, // Always fetch 36 products for filtering
|
|
38
39
|
currency: state.currencyCode,
|
|
39
40
|
reversed: this.reversed
|
|
40
41
|
};
|
|
41
42
|
}
|
|
42
43
|
;
|
|
44
|
+
ensureProductTypeField(fields) {
|
|
45
|
+
if (!fields)
|
|
46
|
+
return 'productType';
|
|
47
|
+
const arr = fields.split(',').map(f => f.trim());
|
|
48
|
+
if (!arr.includes('productType'))
|
|
49
|
+
arr.push('productType');
|
|
50
|
+
return arr.join(',');
|
|
51
|
+
}
|
|
52
|
+
;
|
|
53
|
+
filterAndSliceProducts(data) {
|
|
54
|
+
if (!this.excluse)
|
|
55
|
+
return data.slice(0, this.limit);
|
|
56
|
+
if (!this.requestedfields || !this.requestedfields.includes('productType')) {
|
|
57
|
+
this.requestedfields = this.ensureProductTypeField(this.requestedfields);
|
|
58
|
+
}
|
|
59
|
+
;
|
|
60
|
+
const filtered = data.filter(p => p.productType !== this.excluse);
|
|
61
|
+
return filtered.slice(0, this.limit);
|
|
62
|
+
}
|
|
63
|
+
;
|
|
43
64
|
async loadProducts(fromWatch) {
|
|
44
65
|
const params = this.buildParams();
|
|
45
66
|
const ttl = this.cachettl || 1000 * 60 * 5;
|
|
46
67
|
state.loading = !fromWatch;
|
|
47
68
|
try {
|
|
48
69
|
const data = await productCache.getOrSetData(params, async () => {
|
|
49
|
-
const fresh = await fetchProducts(
|
|
70
|
+
const fresh = await fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);
|
|
50
71
|
return fresh;
|
|
51
72
|
}, {
|
|
52
73
|
ttl,
|
|
@@ -55,7 +76,15 @@ export class IvDynamicProductsCarousel {
|
|
|
55
76
|
});
|
|
56
77
|
const metaCheck = productCache.getData(params);
|
|
57
78
|
this.staleData = metaCheck.isExpired && metaCheck.isStale;
|
|
58
|
-
|
|
79
|
+
let productsArr = [];
|
|
80
|
+
if (data && data.products && Array.isArray(data.products.edges)) {
|
|
81
|
+
productsArr = data.products.edges.map((e) => e.node);
|
|
82
|
+
}
|
|
83
|
+
else if (Array.isArray(data)) {
|
|
84
|
+
productsArr = data;
|
|
85
|
+
}
|
|
86
|
+
;
|
|
87
|
+
this.products = this.filterAndSliceProducts(productsArr);
|
|
59
88
|
this.page = 0;
|
|
60
89
|
}
|
|
61
90
|
catch (err) {
|
|
@@ -94,7 +123,7 @@ export class IvDynamicProductsCarousel {
|
|
|
94
123
|
};
|
|
95
124
|
render() {
|
|
96
125
|
const TAG = this.titletag;
|
|
97
|
-
return (h("div", { key: '
|
|
126
|
+
return (h("div", { key: 'd464de93770d9a35e4436dce59800edc0b699a31', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '9ecac3c222174459956556ac1f84d0b990c6a3c3', 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"))))));
|
|
98
127
|
}
|
|
99
128
|
;
|
|
100
129
|
static get is() { return "iv-dynamic-products-carousel"; }
|
|
@@ -364,6 +393,25 @@ export class IvDynamicProductsCarousel {
|
|
|
364
393
|
"reflect": false,
|
|
365
394
|
"attribute": "stale",
|
|
366
395
|
"defaultValue": "true"
|
|
396
|
+
},
|
|
397
|
+
"excluse": {
|
|
398
|
+
"type": "string",
|
|
399
|
+
"mutable": false,
|
|
400
|
+
"complexType": {
|
|
401
|
+
"original": "string",
|
|
402
|
+
"resolved": "string",
|
|
403
|
+
"references": {}
|
|
404
|
+
},
|
|
405
|
+
"required": false,
|
|
406
|
+
"optional": true,
|
|
407
|
+
"docs": {
|
|
408
|
+
"tags": [],
|
|
409
|
+
"text": ""
|
|
410
|
+
},
|
|
411
|
+
"getter": false,
|
|
412
|
+
"setter": false,
|
|
413
|
+
"reflect": false,
|
|
414
|
+
"attribute": "excluse"
|
|
367
415
|
}
|
|
368
416
|
};
|
|
369
417
|
}
|
package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js.map
CHANGED
|
@@ -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":"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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 \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 let productsArr: any[] = [];\n if(data && data.products && Array.isArray(data.products.edges)) {\n productsArr = data.products.edges.map((e: any) => e.node);\n } else if(Array.isArray(data)) {\n productsArr = data;\n };\n this.products = this.filterAndSliceProducts(productsArr);\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 \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};"]}
|
|
@@ -29,6 +29,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
|
|
|
29
29
|
emptystring = 'No products found';
|
|
30
30
|
cachettl;
|
|
31
31
|
stale = true;
|
|
32
|
+
excluse;
|
|
32
33
|
products = [];
|
|
33
34
|
errorMsg;
|
|
34
35
|
staleData = false;
|
|
@@ -45,19 +46,38 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
|
|
|
45
46
|
handle: this.collectionhandle,
|
|
46
47
|
sort: this.type,
|
|
47
48
|
fields: this.requestedfields,
|
|
48
|
-
limit:
|
|
49
|
+
limit: 36, // Always fetch 36 products for filtering
|
|
49
50
|
currency: state.currencyCode,
|
|
50
51
|
reversed: this.reversed
|
|
51
52
|
};
|
|
52
53
|
}
|
|
53
54
|
;
|
|
55
|
+
ensureProductTypeField(fields) {
|
|
56
|
+
if (!fields)
|
|
57
|
+
return 'productType';
|
|
58
|
+
const arr = fields.split(',').map(f => f.trim());
|
|
59
|
+
if (!arr.includes('productType'))
|
|
60
|
+
arr.push('productType');
|
|
61
|
+
return arr.join(',');
|
|
62
|
+
}
|
|
63
|
+
;
|
|
64
|
+
filterAndSliceProducts(data) {
|
|
65
|
+
if (!this.excluse)
|
|
66
|
+
return data.slice(0, this.limit);
|
|
67
|
+
if (!this.requestedfields || !this.requestedfields.includes('productType')) {
|
|
68
|
+
this.requestedfields = this.ensureProductTypeField(this.requestedfields);
|
|
69
|
+
}
|
|
70
|
+
const filtered = data.filter(p => p.productType !== this.excluse);
|
|
71
|
+
return filtered.slice(0, this.limit);
|
|
72
|
+
}
|
|
73
|
+
;
|
|
54
74
|
async loadProducts(fromWatch) {
|
|
55
75
|
const params = this.buildParams();
|
|
56
76
|
const ttl = this.cachettl || 1000 * 60 * 5;
|
|
57
77
|
state.loading = !fromWatch;
|
|
58
78
|
try {
|
|
59
79
|
const data = await productCache.getOrSetData(params, async () => {
|
|
60
|
-
const fresh = await fetchProducts(
|
|
80
|
+
const fresh = await fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);
|
|
61
81
|
return fresh;
|
|
62
82
|
}, {
|
|
63
83
|
ttl,
|
|
@@ -66,7 +86,14 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
|
|
|
66
86
|
});
|
|
67
87
|
const metaCheck = productCache.getData(params);
|
|
68
88
|
this.staleData = metaCheck.isExpired && metaCheck.isStale;
|
|
69
|
-
|
|
89
|
+
let productsArr = [];
|
|
90
|
+
if (data && data.products && Array.isArray(data.products.edges)) {
|
|
91
|
+
productsArr = data.products.edges.map((e) => e.node);
|
|
92
|
+
}
|
|
93
|
+
else if (Array.isArray(data)) {
|
|
94
|
+
productsArr = data;
|
|
95
|
+
}
|
|
96
|
+
this.products = this.filterAndSliceProducts(productsArr);
|
|
70
97
|
this.page = 0;
|
|
71
98
|
}
|
|
72
99
|
catch (err) {
|
|
@@ -103,7 +130,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
|
|
|
103
130
|
};
|
|
104
131
|
render() {
|
|
105
132
|
const TAG = this.titletag;
|
|
106
|
-
return (h("div", { key: '
|
|
133
|
+
return (h("div", { key: 'd464de93770d9a35e4436dce59800edc0b699a31', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '9ecac3c222174459956556ac1f84d0b990c6a3c3', 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"))))));
|
|
107
134
|
}
|
|
108
135
|
;
|
|
109
136
|
static get watchers() { return {
|
|
@@ -127,6 +154,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
|
|
|
127
154
|
"emptystring": [1],
|
|
128
155
|
"cachettl": [2],
|
|
129
156
|
"stale": [4],
|
|
157
|
+
"excluse": [1],
|
|
130
158
|
"products": [32],
|
|
131
159
|
"errorMsg": [32],
|
|
132
160
|
"staleData": [32],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"iv-dynamic-products-carousel.js","mappings":";;;;;;;;AAAA,MAAM,4BAA4B,GAAG,87FAA87F;;ACMn+F,MAAM,KAAK,GAAG,8BAA8B;MAQ/BA,2BAAyB,iBAAAC,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;;;;;;;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,GAAG,kBAAkB,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,EAAE,KAAK,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,QAAA,KAAK,CAAC,OAAO,GAAG,CAAC,SAAS;AAC1B,QAAA,IAAI;YACF,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,YAAY,CAC1C,MAAM,EACN,YAAW;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;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,GAAG,YAAY,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,YAAA,KAAK,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,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,gBAAc,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,EAAA,EAC7D,IAAI,CAAC,cAAc,IAAI,CAAA,CAAC,GAAG,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAA,MAAA,CAAQ,EAAA,EAAG,IAAI,CAAC,cAAc,CAAO,EAChF,KAAK,CAAC,OAAO,IACZ,CAAyB,CAAA,YAAA,EAAA,IAAA,CAAA,IACvB,IAAI,CAAC,QAAQ,IACf,CAAA,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,IAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAQ,MAAA,CAAA,EAAA,EAAG,IAAI,CAAC,WAAW,CAAO,KAEtD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAW,SAAA,CAAA,0BAAuB,UAAU,EAAA,EAC9D,CAAQ,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,EACT,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,KAAK,WAAW,EAAA,EAC7B,CAAK,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,MACjC,CAAK,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,KAChB,CACE,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,EACN,CAAA,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,EACT,CAAA,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,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAA,gBAAA,CAAkB,EAAA,WAAA,EAAY,QAAQ,EAAkB,EAAA,kBAAA,CAAA,CAC7E,CACG,CACP,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 \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 let productsArr: any[] = [];\n if(data && data.products && Array.isArray(data.products.edges)) {\n productsArr = data.products.edges.map((e: any) => e.node);\n } else if(Array.isArray(data)) {\n productsArr = data;\n };\n this.products = this.filterAndSliceProducts(productsArr);\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 \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}
|
package/dist/esm/intravenous.js
CHANGED
|
@@ -17,6 +17,6 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
return bootstrapLazy([["iv-dynamic-products",[[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",[[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",[[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",[[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",[[256,"iv-wishlist",{"buttonaddvalue":[1],"buttonremovevalue":[1],"wishlistempty":[1],"buttonaddtocartvalue":[1],"viewwishlistvalue":[1],"productdata":[1],"usefields":[1],"previewtype":[1]}]]],["iv-carousel",[[257,"iv-carousel"]]],["iv-filters",[[256,"iv-filters"]]],["sw-in-grid-content",[[260,"sw-in-grid-content"]]],["sw-size-guide",[[260,"sw-size-guide",{"sizeUnits":[32]}]]],["iv-banner",[[260,"iv-banner",{"classmodifier":[1],"bannerurl":[1],"bannerbuttontext":[1],"bannertype":[1]}]]],["iv-tabs",[[260,"iv-tabs",{"labels":[16],"classModifier":[1,"class-modifier"],"tabLayout":[1,"tab-layout"],"activeTab":[32]}]]],["iv-spinner",[[256,"iv-spinner",{"show":[4]}]]],["iv-accordion_11",[[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);
|
|
20
|
+
return bootstrapLazy([["iv-dynamic-products",[[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",[[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",[[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",[[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",[[256,"iv-wishlist",{"buttonaddvalue":[1],"buttonremovevalue":[1],"wishlistempty":[1],"buttonaddtocartvalue":[1],"viewwishlistvalue":[1],"productdata":[1],"usefields":[1],"previewtype":[1]}]]],["iv-carousel",[[257,"iv-carousel"]]],["iv-filters",[[256,"iv-filters"]]],["sw-in-grid-content",[[260,"sw-in-grid-content"]]],["sw-size-guide",[[260,"sw-size-guide",{"sizeUnits":[32]}]]],["iv-banner",[[260,"iv-banner",{"classmodifier":[1],"bannerurl":[1],"bannerbuttontext":[1],"bannertype":[1]}]]],["iv-tabs",[[260,"iv-tabs",{"labels":[16],"classModifier":[1,"class-modifier"],"tabLayout":[1,"tab-layout"],"activeTab":[32]}]]],["iv-spinner",[[256,"iv-spinner",{"show":[4]}]]],["iv-accordion_11",[[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);
|
|
21
21
|
});
|
|
22
22
|
//# sourceMappingURL=intravenous.js.map
|
|
@@ -22,6 +22,7 @@ const IvDynamicProductsCarousel = class {
|
|
|
22
22
|
emptystring = 'No products found';
|
|
23
23
|
cachettl;
|
|
24
24
|
stale = true;
|
|
25
|
+
excluse;
|
|
25
26
|
products = [];
|
|
26
27
|
errorMsg;
|
|
27
28
|
staleData = false;
|
|
@@ -38,19 +39,38 @@ const IvDynamicProductsCarousel = class {
|
|
|
38
39
|
handle: this.collectionhandle,
|
|
39
40
|
sort: this.type,
|
|
40
41
|
fields: this.requestedfields,
|
|
41
|
-
limit:
|
|
42
|
+
limit: 36, // Always fetch 36 products for filtering
|
|
42
43
|
currency: state.currencyCode,
|
|
43
44
|
reversed: this.reversed
|
|
44
45
|
};
|
|
45
46
|
}
|
|
46
47
|
;
|
|
48
|
+
ensureProductTypeField(fields) {
|
|
49
|
+
if (!fields)
|
|
50
|
+
return 'productType';
|
|
51
|
+
const arr = fields.split(',').map(f => f.trim());
|
|
52
|
+
if (!arr.includes('productType'))
|
|
53
|
+
arr.push('productType');
|
|
54
|
+
return arr.join(',');
|
|
55
|
+
}
|
|
56
|
+
;
|
|
57
|
+
filterAndSliceProducts(data) {
|
|
58
|
+
if (!this.excluse)
|
|
59
|
+
return data.slice(0, this.limit);
|
|
60
|
+
if (!this.requestedfields || !this.requestedfields.includes('productType')) {
|
|
61
|
+
this.requestedfields = this.ensureProductTypeField(this.requestedfields);
|
|
62
|
+
}
|
|
63
|
+
const filtered = data.filter(p => p.productType !== this.excluse);
|
|
64
|
+
return filtered.slice(0, this.limit);
|
|
65
|
+
}
|
|
66
|
+
;
|
|
47
67
|
async loadProducts(fromWatch) {
|
|
48
68
|
const params = this.buildParams();
|
|
49
69
|
const ttl = this.cachettl || 1000 * 60 * 5;
|
|
50
70
|
state.loading = !fromWatch;
|
|
51
71
|
try {
|
|
52
72
|
const data = await productCache.getOrSetData(params, async () => {
|
|
53
|
-
const fresh = await fetchProducts(
|
|
73
|
+
const fresh = await fetchProducts(36, this.collectionhandle, this.type, this.requestedfields, this.reversed);
|
|
54
74
|
return fresh;
|
|
55
75
|
}, {
|
|
56
76
|
ttl,
|
|
@@ -59,7 +79,14 @@ const IvDynamicProductsCarousel = class {
|
|
|
59
79
|
});
|
|
60
80
|
const metaCheck = productCache.getData(params);
|
|
61
81
|
this.staleData = metaCheck.isExpired && metaCheck.isStale;
|
|
62
|
-
|
|
82
|
+
let productsArr = [];
|
|
83
|
+
if (data && data.products && Array.isArray(data.products.edges)) {
|
|
84
|
+
productsArr = data.products.edges.map((e) => e.node);
|
|
85
|
+
}
|
|
86
|
+
else if (Array.isArray(data)) {
|
|
87
|
+
productsArr = data;
|
|
88
|
+
}
|
|
89
|
+
this.products = this.filterAndSliceProducts(productsArr);
|
|
63
90
|
this.page = 0;
|
|
64
91
|
}
|
|
65
92
|
catch (err) {
|
|
@@ -96,7 +123,7 @@ const IvDynamicProductsCarousel = class {
|
|
|
96
123
|
};
|
|
97
124
|
render() {
|
|
98
125
|
const TAG = this.titletag;
|
|
99
|
-
return (h("div", { key: '
|
|
126
|
+
return (h("div", { key: 'd464de93770d9a35e4436dce59800edc0b699a31', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '9ecac3c222174459956556ac1f84d0b990c6a3c3', 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"))))));
|
|
100
127
|
}
|
|
101
128
|
;
|
|
102
129
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iv-dynamic-products-carousel.entry.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 \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":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"iv-dynamic-products-carousel.entry.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 let productsArr: any[] = [];\n if(data && data.products && Array.isArray(data.products.edges)) {\n productsArr = data.products.edges.map((e: any) => e.node);\n } else if(Array.isArray(data)) {\n productsArr = data;\n };\n this.products = this.filterAndSliceProducts(productsArr);\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 \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":[],"mappings":"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"}
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-Bb1KQ8yQ.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["iv-dynamic-products",[[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",[[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",[[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",[[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",[[256,"iv-wishlist",{"buttonaddvalue":[1],"buttonremovevalue":[1],"wishlistempty":[1],"buttonaddtocartvalue":[1],"viewwishlistvalue":[1],"productdata":[1],"usefields":[1],"previewtype":[1]}]]],["iv-carousel",[[257,"iv-carousel"]]],["iv-filters",[[256,"iv-filters"]]],["sw-in-grid-content",[[260,"sw-in-grid-content"]]],["sw-size-guide",[[260,"sw-size-guide",{"sizeUnits":[32]}]]],["iv-banner",[[260,"iv-banner",{"classmodifier":[1],"bannerurl":[1],"bannerbuttontext":[1],"bannertype":[1]}]]],["iv-tabs",[[260,"iv-tabs",{"labels":[16],"classModifier":[1,"class-modifier"],"tabLayout":[1,"tab-layout"],"activeTab":[32]}]]],["iv-spinner",[[256,"iv-spinner",{"show":[4]}]]],["iv-accordion_11",[[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);
|
|
8
|
+
return bootstrapLazy([["iv-dynamic-products",[[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",[[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",[[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",[[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",[[256,"iv-wishlist",{"buttonaddvalue":[1],"buttonremovevalue":[1],"wishlistempty":[1],"buttonaddtocartvalue":[1],"viewwishlistvalue":[1],"productdata":[1],"usefields":[1],"previewtype":[1]}]]],["iv-carousel",[[257,"iv-carousel"]]],["iv-filters",[[256,"iv-filters"]]],["sw-in-grid-content",[[260,"sw-in-grid-content"]]],["sw-size-guide",[[260,"sw-size-guide",{"sizeUnits":[32]}]]],["iv-banner",[[260,"iv-banner",{"classmodifier":[1],"bannerurl":[1],"bannerbuttontext":[1],"bannertype":[1]}]]],["iv-tabs",[[260,"iv-tabs",{"labels":[16],"classModifier":[1,"class-modifier"],"tabLayout":[1,"tab-layout"],"activeTab":[32]}]]],["iv-spinner",[[256,"iv-spinner",{"show":[4]}]]],["iv-accordion_11",[[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);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-C4-XLZHN.js";export{s as setNonce}from"./p-C4-XLZHN.js";import{g as a}from"./p-BvKHmCfH.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-85843c63",[[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"]}]]],["p-2f5c081f",[[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]}]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-C4-XLZHN.js";export{s as setNonce}from"./p-C4-XLZHN.js";import{g as a}from"./p-BvKHmCfH.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-85843c63",[[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"]}]]],["p-2f5c081f",[[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]}]]],["p-bdc8dadb",[[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"]}]]],["p-aabedd5e",[[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]}]]],["p-128b6cac",[[256,"iv-wishlist",{buttonaddvalue:[1],buttonremovevalue:[1],wishlistempty:[1],buttonaddtocartvalue:[1],viewwishlistvalue:[1],productdata:[1],usefields:[1],previewtype:[1]}]]],["p-a3928f84",[[257,"iv-carousel"]]],["p-8ac29c77",[[256,"iv-filters"]]],["p-66ebd8f1",[[260,"sw-in-grid-content"]]],["p-60554353",[[260,"sw-size-guide",{sizeUnits:[32]}]]],["p-e911fc8a",[[260,"iv-banner",{classmodifier:[1],bannerurl:[1],bannerbuttontext:[1],bannertype:[1]}]]],["p-bc77e1fd",[[260,"iv-tabs",{labels:[16],classModifier:[1,"class-modifier"],tabLayout:[1,"tab-layout"],activeTab:[32]}]]],["p-0a24e4ba",[[256,"iv-spinner",{show:[4]}]]],["p-b1b44a12",[[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]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=intravenous.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iv-dynamic-products-carousel.entry.esm.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 \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":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"iv-dynamic-products-carousel.entry.esm.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 let productsArr: any[] = [];\n if(data && data.products && Array.isArray(data.products.edges)) {\n productsArr = data.products.edges.map((e: any) => e.node);\n } else if(Array.isArray(data)) {\n productsArr = data;\n };\n this.products = this.filterAndSliceProducts(productsArr);\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 \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":[],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as i}from"./p-C4-XLZHN.js";import{b as s}from"./p-MuJ1P-w6.js";import{c as a,p as r}from"./p-C9w3yU1Z.js";const o=":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 c="iv-dynamic-products-carousel";const d=class{constructor(e){t(this,e)}type="CREATED_AT";limit=24;reversed=false;componenttitle;titletag="h2";collectionhandle="all";requestedfields;calltoaction=false;buttontext;addtocarttext;emptystring="No products found";cachettl;stale=true;excluse;products=[];errorMsg;staleData=false;page=0;itemsPerPage=6;errors=a({component:"iv-dynamic-products-carousel"});handlePropChange(){this.loadProducts(true)}async componentWillLoad(){await this.loadProducts(false)}buildParams(){return{handle:this.collectionhandle,sort:this.type,fields:this.requestedfields,limit:36,currency:e.currencyCode,reversed:this.reversed}}ensureProductTypeField(t){if(!t)return"productType";const e=t.split(",").map((t=>t.trim()));if(!e.includes("productType"))e.push("productType");return e.join(",")}filterAndSliceProducts(t){if(!this.excluse)return t.slice(0,this.limit);if(!this.requestedfields||!this.requestedfields.includes("productType")){this.requestedfields=this.ensureProductTypeField(this.requestedfields)}const e=t.filter((t=>t.productType!==this.excluse));return e.slice(0,this.limit)}async loadProducts(t){const i=this.buildParams();const a=this.cachettl||1e3*60*5;e.loading=!t;try{const t=await r.getOrSetData(i,(async()=>{const t=await s(36,this.collectionhandle,this.type,this.requestedfields,this.reversed);return t}),{ttl:a,staleWhileRevalidate:this.stale,transform:t=>t});const e=r.getData(i);this.staleData=e.isExpired&&e.isStale;let o=[];if(t&&t.products&&Array.isArray(t.products.edges)){o=t.products.edges.map((t=>t.node))}else if(Array.isArray(t)){o=t}this.products=this.filterAndSliceProducts(o);this.page=0}catch(t){this.errorMsg="Failed to load products";this.errors.handle({error:t,scope:"loadProducts",userMessage:"Unable to load products right now.",devMessage:"fetchProducts failed in iv-dynamic-products",severity:"error"})}finally{e.loading=false}}pagedProducts(){const t=[];for(let e=0;e<this.products.length;e+=this.itemsPerPage){t.push(this.products.slice(e,e+this.itemsPerPage))}return t}next=()=>{const t=this.pagedProducts().length;if(this.page<t-1)this.page++};prev=()=>{if(this.page>0)this.page--};render(){const t=this.titletag;return i("div",{key:"d464de93770d9a35e4436dce59800edc0b699a31",class:c,"data-stale":this.staleData?"true":"false"},this.componenttitle&&i(t,{key:"9ecac3c222174459956556ac1f84d0b990c6a3c3",class:`${c}-title`},this.componenttitle),e.loading?i("iv-spinner",null):this.errorMsg?i("div",{class:`${c}-error`},this.errorMsg):this.products.length===0?i("div",{class:`${c}-empty`},this.emptystring):i("div",{class:`${c}-carousel`,"aria-roledescription":"carousel"},i("button",{class:`${c}-nav ${c}-nav-prev`,onClick:this.prev,disabled:this.page===0,"aria-label":"Previous",type:"button"},"‹"),i("div",{class:`${c}-viewport`},i("div",{class:`${c}-track`,style:{transform:`translateX(-${this.page*100}%)`}},this.pagedProducts().map(((t,e)=>i("div",{class:`${c}-slide`,role:"group","aria-label":`Slide ${e+1} of ${this.pagedProducts().length}`},t.map((t=>i("iv-card",{cardtype:"products",calltoaction:this.calltoaction,buttontext:this.buttontext,addtocarttext:this.addtocarttext,data:t,classmodifier:`${c}-card`})))))))),i("button",{class:`${c}-nav ${c}-nav-next`,onClick:this.next,disabled:this.page===this.pagedProducts().length-1,"aria-label":"Next",type:"button"},"›"),i("div",{class:`${c}-status`,"aria-live":"polite"},this.pagedProducts().length>1?`Slide ${this.page+1} of ${this.pagedProducts().length}`:""),this.staleData&&i("div",{class:`${c}-stale-indicator`,"aria-live":"polite"},"Refreshing…")))}static get watchers(){return{type:["handlePropChange"],limit:["handlePropChange"],collectionhandle:["handlePropChange"],requestedfields:["handlePropChange"]}}};d.style=o;export{d as iv_dynamic_products_carousel};
|
|
2
|
+
//# sourceMappingURL=p-bdc8dadb.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["registerInstance","state","h","fetchProducts","createErrorHandler","productCache","ivDynamicProductsCarouselCss","BLOCK","IvDynamicProductsCarousel","constructor","hostRef","this","type","limit","reversed","componenttitle","titletag","collectionhandle","requestedfields","calltoaction","buttontext","addtocarttext","emptystring","cachettl","stale","excluse","products","errorMsg","staleData","page","itemsPerPage","errors","component","handlePropChange","loadProducts","componentWillLoad","buildParams","handle","sort","fields","currency","currencyCode","ensureProductTypeField","arr","split","map","f","trim","includes","push","join","filterAndSliceProducts","data","slice","filtered","filter","p","productType","fromWatch","params","ttl","loading","getOrSetData","async","fresh","staleWhileRevalidate","transform","metaCheck","getData","isExpired","isStale","productsArr","Array","isArray","edges","e","node","err","error","scope","userMessage","devMessage","severity","pagedProducts","chunks","i","length","next","pages","prev","render","TAG","key","class","onClick","disabled","style","group","role","product","cardtype","classmodifier","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}
|
package/dist/types/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export declare class IvDynamicProductsCarousel {
|
|
|
12
12
|
emptystring: string;
|
|
13
13
|
cachettl?: number;
|
|
14
14
|
stale?: boolean;
|
|
15
|
+
excluse?: string;
|
|
15
16
|
products: any[];
|
|
16
17
|
errorMsg: string;
|
|
17
18
|
staleData: boolean;
|
|
@@ -21,6 +22,8 @@ export declare class IvDynamicProductsCarousel {
|
|
|
21
22
|
handlePropChange(): void;
|
|
22
23
|
componentWillLoad(): Promise<void>;
|
|
23
24
|
private buildParams;
|
|
25
|
+
private ensureProductTypeField;
|
|
26
|
+
private filterAndSliceProducts;
|
|
24
27
|
private loadProducts;
|
|
25
28
|
private pagedProducts;
|
|
26
29
|
private next;
|
|
@@ -124,6 +124,7 @@ export namespace Components {
|
|
|
124
124
|
* @default 'No products found'
|
|
125
125
|
*/
|
|
126
126
|
"emptystring": string;
|
|
127
|
+
"excluse"?: string;
|
|
127
128
|
/**
|
|
128
129
|
* @default 24
|
|
129
130
|
*/
|
|
@@ -662,6 +663,7 @@ declare namespace LocalJSX {
|
|
|
662
663
|
* @default 'No products found'
|
|
663
664
|
*/
|
|
664
665
|
"emptystring"?: string;
|
|
666
|
+
"excluse"?: string;
|
|
665
667
|
/**
|
|
666
668
|
* @default 24
|
|
667
669
|
*/
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as a,h as e}from"./p-C4-XLZHN.js";import{b as s}from"./p-MuJ1P-w6.js";import{c as i,p as r}from"./p-C9w3yU1Z.js";const o=":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 c="iv-dynamic-products-carousel";const l=class{constructor(a){t(this,a)}type="CREATED_AT";limit=24;reversed=false;componenttitle;titletag="h2";collectionhandle="all";requestedfields;calltoaction=false;buttontext;addtocarttext;emptystring="No products found";cachettl;stale=true;products=[];errorMsg;staleData=false;page=0;itemsPerPage=6;errors=i({component:"iv-dynamic-products-carousel"});handlePropChange(){this.loadProducts(true)}async componentWillLoad(){await this.loadProducts(false)}buildParams(){return{handle:this.collectionhandle,sort:this.type,fields:this.requestedfields,limit:this.limit,currency:a.currencyCode,reversed:this.reversed}}async loadProducts(t){const e=this.buildParams();const i=this.cachettl||1e3*60*5;a.loading=!t;try{const t=await r.getOrSetData(e,(async()=>{const t=await s(this.limit,this.collectionhandle,this.type,this.requestedfields,this.reversed);return t}),{ttl:i,staleWhileRevalidate:this.stale,transform:t=>t});const a=r.getData(e);this.staleData=a.isExpired&&a.isStale;this.products=t||[];this.page=0}catch(t){this.errorMsg="Failed to load products";this.errors.handle({error:t,scope:"loadProducts",userMessage:"Unable to load products right now.",devMessage:"fetchProducts failed in iv-dynamic-products",severity:"error"})}finally{a.loading=false}}pagedProducts(){const t=[];for(let a=0;a<this.products.length;a+=this.itemsPerPage){t.push(this.products.slice(a,a+this.itemsPerPage))}return t}next=()=>{const t=this.pagedProducts().length;if(this.page<t-1)this.page++};prev=()=>{if(this.page>0)this.page--};render(){const t=this.titletag;return e("div",{key:"a0fa6574a48e8aaa6b400282aa9bab55c1babd4f",class:c,"data-stale":this.staleData?"true":"false"},this.componenttitle&&e(t,{key:"9ab7d2ed24377813fbb593f8a845e0c5775309a9",class:`${c}-title`},this.componenttitle),a.loading?e("iv-spinner",null):this.errorMsg?e("div",{class:`${c}-error`},this.errorMsg):this.products.length===0?e("div",{class:`${c}-empty`},this.emptystring):e("div",{class:`${c}-carousel`,"aria-roledescription":"carousel"},e("button",{class:`${c}-nav ${c}-nav-prev`,onClick:this.prev,disabled:this.page===0,"aria-label":"Previous",type:"button"},"‹"),e("div",{class:`${c}-viewport`},e("div",{class:`${c}-track`,style:{transform:`translateX(-${this.page*100}%)`}},this.pagedProducts().map(((t,a)=>e("div",{class:`${c}-slide`,role:"group","aria-label":`Slide ${a+1} of ${this.pagedProducts().length}`},t.map((t=>e("iv-card",{cardtype:"products",calltoaction:this.calltoaction,buttontext:this.buttontext,addtocarttext:this.addtocarttext,data:t,classmodifier:`${c}-card`})))))))),e("button",{class:`${c}-nav ${c}-nav-next`,onClick:this.next,disabled:this.page===this.pagedProducts().length-1,"aria-label":"Next",type:"button"},"›"),e("div",{class:`${c}-status`,"aria-live":"polite"},this.pagedProducts().length>1?`Slide ${this.page+1} of ${this.pagedProducts().length}`:""),this.staleData&&e("div",{class:`${c}-stale-indicator`,"aria-live":"polite"},"Refreshing…")))}static get watchers(){return{type:["handlePropChange"],limit:["handlePropChange"],collectionhandle:["handlePropChange"],requestedfields:["handlePropChange"]}}};l.style=o;export{l as iv_dynamic_products_carousel};
|
|
2
|
-
//# sourceMappingURL=p-d26de1f0.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","state","h","fetchProducts","createErrorHandler","productCache","ivDynamicProductsCarouselCss","BLOCK","IvDynamicProductsCarousel","constructor","hostRef","this","type","limit","reversed","componenttitle","titletag","collectionhandle","requestedfields","calltoaction","buttontext","addtocarttext","emptystring","cachettl","stale","products","errorMsg","staleData","page","itemsPerPage","errors","component","handlePropChange","loadProducts","componentWillLoad","buildParams","handle","sort","fields","currency","currencyCode","fromWatch","params","ttl","loading","data","getOrSetData","async","fresh","staleWhileRevalidate","transform","metaCheck","getData","isExpired","isStale","err","error","scope","userMessage","devMessage","severity","pagedProducts","chunks","i","length","push","slice","next","pages","prev","render","TAG","key","class","onClick","disabled","style","map","group","role","product","cardtype","classmodifier","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}
|