the-foxy-library 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/iv-dynamic-products-carousel.cjs.entry.js +3 -3
- package/dist/cjs/iv-dynamic-products-carousel.entry.cjs.js.map +1 -1
- package/dist/cjs/iv-dynamic-products.cjs.entry.js +2 -3
- package/dist/cjs/iv-dynamic-products.entry.cjs.js.map +1 -1
- package/dist/collection/components/iv-dynamic-products/iv-dynamic-products.js +5 -6
- package/dist/collection/components/iv-dynamic-products/iv-dynamic-products.js.map +1 -1
- package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.css +15 -0
- package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js +5 -5
- package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js.map +1 -1
- package/dist/components/iv-dynamic-products-carousel.js +3 -3
- package/dist/components/iv-dynamic-products-carousel.js.map +1 -1
- package/dist/components/iv-dynamic-products.js +2 -3
- package/dist/components/iv-dynamic-products.js.map +1 -1
- package/dist/esm/iv-dynamic-products-carousel.entry.js +3 -3
- package/dist/esm/iv-dynamic-products-carousel.entry.js.map +1 -1
- package/dist/esm/iv-dynamic-products.entry.js +2 -3
- package/dist/esm/iv-dynamic-products.entry.js.map +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/iv-dynamic-products.entry.esm.js.map +1 -1
- package/dist/intravenous/{p-335c12e1.entry.js → p-85843c63.entry.js} +2 -2
- package/dist/intravenous/{p-335c12e1.entry.js.map → p-85843c63.entry.js.map} +1 -1
- package/dist/intravenous/p-d26de1f0.entry.js +2 -0
- package/dist/intravenous/{p-2d5d9359.entry.js.map → p-d26de1f0.entry.js.map} +1 -1
- package/dist/types/components/iv-dynamic-products/iv-dynamic-products.d.ts +1 -1
- package/dist/types/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.d.ts +1 -1
- package/dist/types/components.d.ts +8 -8
- package/package.json +1 -1
- package/dist/intravenous/factory-1QinX-o0.js.map +0 -1
- package/dist/intravenous/factory-JClanx-E.js.map +0 -1
- package/dist/intravenous/factory-mrqy6XUM.js.map +0 -1
- package/dist/intravenous/index-Py50VI8u.js.map +0 -1
- package/dist/intravenous/p-2d5d9359.entry.js +0 -2
|
@@ -4,14 +4,14 @@ var index = require('./index-DiBg0RCo.js');
|
|
|
4
4
|
var factory$1 = require('./factory-CktIyPWt.js');
|
|
5
5
|
var factory = require('./factory-CffqQl1G.js');
|
|
6
6
|
|
|
7
|
-
const ivDynamicProductsCarouselCss = ":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";
|
|
7
|
+
const ivDynamicProductsCarouselCss = ":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card .iv-card-title{line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.4em}.iv-dynamic-products-carousel-card .iv-card-controls{margin-top:auto;}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";
|
|
8
8
|
|
|
9
9
|
const BLOCK = 'iv-dynamic-products-carousel';
|
|
10
10
|
const IvDynamicProductsCarousel = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
|
-
type = '
|
|
14
|
+
type = 'CREATED_AT';
|
|
15
15
|
limit = 24;
|
|
16
16
|
reversed = false;
|
|
17
17
|
componenttitle;
|
|
@@ -98,7 +98,7 @@ const IvDynamicProductsCarousel = class {
|
|
|
98
98
|
};
|
|
99
99
|
render() {
|
|
100
100
|
const TAG = this.titletag;
|
|
101
|
-
return (index.h("div", { key: '
|
|
101
|
+
return (index.h("div", { key: 'a0fa6574a48e8aaa6b400282aa9bab55c1babd4f', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && index.h(TAG, { key: '9ab7d2ed24377813fbb593f8a845e0c5775309a9', class: `${BLOCK}-title` }, this.componenttitle), index.state.loading ? (index.h("iv-spinner", null)) : this.errorMsg ? (index.h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (index.h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (index.h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, index.h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), index.h("div", { class: `${BLOCK}-viewport` }, index.h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (index.h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (index.h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), index.h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), index.h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (index.h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
|
|
102
102
|
}
|
|
103
103
|
;
|
|
104
104
|
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.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' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'CREATED'; \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":"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"}
|
|
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":"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"}
|
|
@@ -11,8 +11,7 @@ const IvDynamicProducts = class {
|
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
type = 'CREATED';
|
|
14
|
+
type = 'CREATED_AT';
|
|
16
15
|
limit = 8;
|
|
17
16
|
reversed = false;
|
|
18
17
|
componenttitle;
|
|
@@ -81,7 +80,7 @@ const IvDynamicProducts = class {
|
|
|
81
80
|
;
|
|
82
81
|
render() {
|
|
83
82
|
const TAG = this.titletag;
|
|
84
|
-
return (index.h("div", { key: '
|
|
83
|
+
return (index.h("div", { key: '85554232934bce84315e8f69be3844b1f1affb3c', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && index.h(TAG, { key: 'c7e11e1eba2e769d6cf1b8f824d422d71a149e88', 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}-products` }, index.h("iv-layout", { classModifier: `${BLOCK}-layout`, gridTemplateAreas: this.gridlayout }, this.products.map(product => (index.h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))), this.staleData && (index.h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
|
|
85
84
|
}
|
|
86
85
|
;
|
|
87
86
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iv-dynamic-products.entry.cjs.js","sources":["src/components/iv-dynamic-products/iv-dynamic-products.scss?tag=iv-dynamic-products","src/components/iv-dynamic-products/iv-dynamic-products.tsx"],"sourcesContent":["// Base iv-dynamic-products styles with CSS variable theming.\n// Designers override --iv-dynamic-products-* tokens externally.\n\n.iv-dynamic-products {\n box-sizing: border-box;\n width: var(--iv-dynamic-products-width, 100%);\n max-width: var(--iv-dynamic-products-max-width, 100%);\n margin: var(--iv-dynamic-products-margin, 0);\n padding: var(--iv-dynamic-products-padding, 0);\n background: var(--iv-dynamic-products-bg, transparent);\n border: var(--iv-dynamic-products-border, none);\n border-radius: var(--iv-dynamic-products-radius, 0);\n box-shadow: var(--iv-dynamic-products-shadow, none);\n color: var(--iv-dynamic-products-color, inherit);\n --iv-layout-gap: var(--iv-dynamic-products-gap, 1.5rem); \n}\n\n.iv-dynamic-products-title {\n margin: var(--iv-dynamic-products-title-margin, 0 0 1rem 0);\n font-size: var(--iv-dynamic-products-title-font-size, clamp(1.125rem, 1vw + 1rem, 1.75rem));\n font-weight: var(--iv-dynamic-products-title-font-weight, 600);\n line-height: var(--iv-dynamic-products-title-line-height, 1.2);\n letter-spacing: var(--iv-dynamic-products-title-letter-spacing, normal);\n}\n\n/* State blocks */\n.iv-dynamic-products-error,\n.iv-dynamic-products-empty {\n padding: var(--iv-dynamic-products-state-padding, 1rem);\n border: var(--iv-dynamic-products-state-border, none);\n background: var(--iv-dynamic-products-state-bg, transparent);\n color: var(--iv-dynamic-products-state-color, inherit);\n font-size: var(--iv-dynamic-products-state-font-size, 0.875rem);\n text-align: var(--iv-dynamic-products-state-text-align, center);\n}\n\n.iv-dynamic-products-products {\n width: 100%;\n margin: var(--iv-dynamic-products-products-margin, 0);\n padding: var(--iv-dynamic-products-products-padding, 0);\n}\n\n/* Bridge styling into layout variant */\n.iv-layout--iv-dynamic-products-layout {\n --iv-layout-gap: var(--iv-dynamic-products-grid-gap, var(--iv-dynamic-products-gap, 1.5rem));\n align-items: var(--iv-dynamic-products-grid-align, stretch);\n justify-content: var(--iv-dynamic-products-grid-justify, flex-start);\n}\n\n.iv-dynamic-products .iv-card {\n margin: var(--iv-dynamic-products-card-margin, 0);\n --iv-card-padding: var(--iv-dynamic-products-card-padding, var(--iv-card-padding, 0));\n}\n\n@media (min-width: 40rem) {\n .iv-dynamic-products { --iv-dynamic-products-gap: var(--iv-dynamic-products-gap-md, var(--iv-dynamic-products-gap, 1.5rem)); }\n}\n@media (min-width: 64rem) {\n .iv-dynamic-products { --iv-dynamic-products-gap: var(--iv-dynamic-products-gap-lg, var(--iv-dynamic-products-gap, 1.5rem)); }\n}\n\n.iv-dynamic-products--scroll-x .iv-layout--iv-dynamic-products-layout {\n display: flex !important;\n overflow-x: auto;\n scrollbar-width: var(--iv-dynamic-products-scrollbar-width, thin);\n -webkit-overflow-scrolling: touch;\n}\n\n.iv-dynamic-products--scroll-x .iv-layout--iv-dynamic-products-layout > * {\n flex: 0 0 var(--iv-dynamic-products-scroll-item-width, 75%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .iv-dynamic-products { scroll-behavior: auto; }\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';\n\n@Component({\n tag: 'iv-dynamic-products',\n styleUrl: 'iv-dynamic-products.scss',\n shadow: false\n})\n\nexport class IvDynamicProducts {\n\n // @Prop() type: 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'BEST_SELLING'; \n @Prop() type: 'CREATED' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'CREATED'; \n @Prop() limit: number = 8;\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 \n @Prop() carousel: boolean = false; \n \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() gridlayout?: string; // If this and carousel all false, default to flex\n @Prop() cachettl?: number; // override TTL (ms)\n @Prop() stale?: boolean = true; // enable stale-while-revalidate\n\n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false; // indicates we are showing stale data while refreshing\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products' });\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 || 'all',\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 } 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 render() {\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}-products`}> \n <iv-layout\n classModifier={`${BLOCK}-layout`}\n gridTemplateAreas={this.gridlayout}>\n {this.products.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 </iv-layout>\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,oBAAoB,GAAG,0iFAA0iF;;ACMvkF,MAAM,KAAK,GAAG,qBAAqB;MAQtB,iBAAiB,GAAA,MAAA;;;;;IAGpB,IAAI,GAAiE,SAAS;IAC9E,KAAK,GAAW,CAAC;IACjB,QAAQ,GAAY,KAAK;AACzB,IAAA,cAAc;IACd,QAAQ,GAA4C,IAAI;IACxD,gBAAgB,GAAW,KAAK;IAEhC,QAAQ,GAAY,KAAK;AAEzB,IAAA,eAAe;IACf,YAAY,GAAY,KAAK;AAC7B,IAAA,UAAU;AACV,IAAA,aAAa;IACb,WAAW,GAAW,mBAAmB;IACzC,UAAU,CAAU;IACpB,QAAQ,CAAU;AAClB,IAAA,KAAK,GAAa,IAAI,CAAC;IAEtB,QAAQ,GAAU,EAAE;AACpB,IAAA,QAAQ;AACR,IAAA,SAAS,GAAY,KAAK,CAAC;IAE5B,MAAM,GAAGA,0BAAkB,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;IAMzE,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;AACL,YAAA,MAAM,EAAE,IAAI,CAAC,gBAAgB,IAAI,KAAK;YACtC,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;;QAC1B,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;;;;IAIzB,MAAM,GAAA;AACJ,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,EAAA,EAAG,IAAI,CAAC,QAAQ,CAAO,IACjD,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAC5BA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAQ,MAAA,CAAA,EAAA,EAAG,IAAI,CAAC,WAAW,CAAO,KAEtDA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,KAAK,CAAA,SAAA,CAAW,EAAA,EAC7BA,OACE,CAAA,WAAA,EAAA,EAAA,aAAa,EAAE,CAAA,EAAG,KAAK,CAAS,OAAA,CAAA,EAChC,iBAAiB,EAAE,IAAI,CAAC,UAAU,EACjC,EAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,KACxBA,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,CAAO,KAAA,CAAA,EAAA,CAAG,CACpC,CAAC,CACQ,EACX,IAAI,CAAC,SAAS,KACbA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAkB,gBAAA,CAAA,EAAA,WAAA,EAAY,QAAQ,EAAkB,EAAA,kBAAA,CAAA,CAC7E,CACG,CACP,CACG;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"iv-dynamic-products.entry.cjs.js","sources":["src/components/iv-dynamic-products/iv-dynamic-products.scss?tag=iv-dynamic-products","src/components/iv-dynamic-products/iv-dynamic-products.tsx"],"sourcesContent":["// Base iv-dynamic-products styles with CSS variable theming.\n// Designers override --iv-dynamic-products-* tokens externally.\n\n.iv-dynamic-products {\n box-sizing: border-box;\n width: var(--iv-dynamic-products-width, 100%);\n max-width: var(--iv-dynamic-products-max-width, 100%);\n margin: var(--iv-dynamic-products-margin, 0);\n padding: var(--iv-dynamic-products-padding, 0);\n background: var(--iv-dynamic-products-bg, transparent);\n border: var(--iv-dynamic-products-border, none);\n border-radius: var(--iv-dynamic-products-radius, 0);\n box-shadow: var(--iv-dynamic-products-shadow, none);\n color: var(--iv-dynamic-products-color, inherit);\n --iv-layout-gap: var(--iv-dynamic-products-gap, 1.5rem); \n}\n\n.iv-dynamic-products-title {\n margin: var(--iv-dynamic-products-title-margin, 0 0 1rem 0);\n font-size: var(--iv-dynamic-products-title-font-size, clamp(1.125rem, 1vw + 1rem, 1.75rem));\n font-weight: var(--iv-dynamic-products-title-font-weight, 600);\n line-height: var(--iv-dynamic-products-title-line-height, 1.2);\n letter-spacing: var(--iv-dynamic-products-title-letter-spacing, normal);\n}\n\n/* State blocks */\n.iv-dynamic-products-error,\n.iv-dynamic-products-empty {\n padding: var(--iv-dynamic-products-state-padding, 1rem);\n border: var(--iv-dynamic-products-state-border, none);\n background: var(--iv-dynamic-products-state-bg, transparent);\n color: var(--iv-dynamic-products-state-color, inherit);\n font-size: var(--iv-dynamic-products-state-font-size, 0.875rem);\n text-align: var(--iv-dynamic-products-state-text-align, center);\n}\n\n.iv-dynamic-products-products {\n width: 100%;\n margin: var(--iv-dynamic-products-products-margin, 0);\n padding: var(--iv-dynamic-products-products-padding, 0);\n}\n\n/* Bridge styling into layout variant */\n.iv-layout--iv-dynamic-products-layout {\n --iv-layout-gap: var(--iv-dynamic-products-grid-gap, var(--iv-dynamic-products-gap, 1.5rem));\n align-items: var(--iv-dynamic-products-grid-align, stretch);\n justify-content: var(--iv-dynamic-products-grid-justify, flex-start);\n}\n\n.iv-dynamic-products .iv-card {\n margin: var(--iv-dynamic-products-card-margin, 0);\n --iv-card-padding: var(--iv-dynamic-products-card-padding, var(--iv-card-padding, 0));\n}\n\n@media (min-width: 40rem) {\n .iv-dynamic-products { --iv-dynamic-products-gap: var(--iv-dynamic-products-gap-md, var(--iv-dynamic-products-gap, 1.5rem)); }\n}\n@media (min-width: 64rem) {\n .iv-dynamic-products { --iv-dynamic-products-gap: var(--iv-dynamic-products-gap-lg, var(--iv-dynamic-products-gap, 1.5rem)); }\n}\n\n.iv-dynamic-products--scroll-x .iv-layout--iv-dynamic-products-layout {\n display: flex !important;\n overflow-x: auto;\n scrollbar-width: var(--iv-dynamic-products-scrollbar-width, thin);\n -webkit-overflow-scrolling: touch;\n}\n\n.iv-dynamic-products--scroll-x .iv-layout--iv-dynamic-products-layout > * {\n flex: 0 0 var(--iv-dynamic-products-scroll-item-width, 75%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .iv-dynamic-products { scroll-behavior: auto; }\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';\n\n@Component({\n tag: 'iv-dynamic-products',\n styleUrl: 'iv-dynamic-products.scss',\n shadow: false\n})\n\nexport class IvDynamicProducts {\n @Prop() type: 'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 8;\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() carousel: boolean = false; \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() gridlayout?: string; // If this and carousel all false, default to flex\n @Prop() cachettl?: number; // override TTL (ms)\n @Prop() stale?: boolean = true; // enable stale-while-revalidate\n\n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false; // indicates we are showing stale data while refreshing\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products' });\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 || 'all',\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 } 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 render() {\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}-products`}> \n <iv-layout\n classModifier={`${BLOCK}-layout`}\n gridTemplateAreas={this.gridlayout}>\n {this.products.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 </iv-layout>\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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"}
|
|
@@ -5,8 +5,7 @@ import { productCache } from "../../utils/caching/productCache";
|
|
|
5
5
|
import { createErrorHandler } from "../../utils/error_handling/factory";
|
|
6
6
|
const BLOCK = 'iv-dynamic-products';
|
|
7
7
|
export class IvDynamicProducts {
|
|
8
|
-
|
|
9
|
-
type = 'CREATED';
|
|
8
|
+
type = 'CREATED_AT';
|
|
10
9
|
limit = 8;
|
|
11
10
|
reversed = false;
|
|
12
11
|
componenttitle;
|
|
@@ -76,7 +75,7 @@ export class IvDynamicProducts {
|
|
|
76
75
|
;
|
|
77
76
|
render() {
|
|
78
77
|
const TAG = this.titletag;
|
|
79
|
-
return (h("div", { key: '
|
|
78
|
+
return (h("div", { key: '85554232934bce84315e8f69be3844b1f1affb3c', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: 'c7e11e1eba2e769d6cf1b8f824d422d71a149e88', 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}-products` }, h("iv-layout", { classModifier: `${BLOCK}-layout`, gridTemplateAreas: this.gridlayout }, this.products.map(product => (h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))), this.staleData && (h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
|
|
80
79
|
}
|
|
81
80
|
;
|
|
82
81
|
static get is() { return "iv-dynamic-products"; }
|
|
@@ -96,8 +95,8 @@ export class IvDynamicProducts {
|
|
|
96
95
|
"type": "string",
|
|
97
96
|
"mutable": false,
|
|
98
97
|
"complexType": {
|
|
99
|
-
"original": "'CREATED' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE'",
|
|
100
|
-
"resolved": "\"BEST_SELLING\" | \"CREATED\" | \"PRICE\" | \"RELEVANCE\" | \"TITLE\"",
|
|
98
|
+
"original": "'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE'",
|
|
99
|
+
"resolved": "\"BEST_SELLING\" | \"CREATED\" | \"CREATED_AT\" | \"PRICE\" | \"RELEVANCE\" | \"TITLE\"",
|
|
101
100
|
"references": {}
|
|
102
101
|
},
|
|
103
102
|
"required": false,
|
|
@@ -110,7 +109,7 @@ export class IvDynamicProducts {
|
|
|
110
109
|
"setter": false,
|
|
111
110
|
"reflect": false,
|
|
112
111
|
"attribute": "type",
|
|
113
|
-
"defaultValue": "'
|
|
112
|
+
"defaultValue": "'CREATED_AT'"
|
|
114
113
|
},
|
|
115
114
|
"limit": {
|
|
116
115
|
"type": "number",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iv-dynamic-products.js","sourceRoot":"","sources":["../../../src/components/iv-dynamic-products/iv-dynamic-products.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,MAAM,KAAK,GAAG,qBAAqB,CAAC;AAQpC,MAAM,OAAO,iBAAiB;
|
|
1
|
+
{"version":3,"file":"iv-dynamic-products.js","sourceRoot":"","sources":["../../../src/components/iv-dynamic-products/iv-dynamic-products.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';\n\n@Component({\n tag: 'iv-dynamic-products',\n styleUrl: 'iv-dynamic-products.scss',\n shadow: false\n})\n\nexport class IvDynamicProducts {\n @Prop() type: 'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 8;\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() carousel: boolean = false; \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() gridlayout?: string; // If this and carousel all false, default to flex\n @Prop() cachettl?: number; // override TTL (ms)\n @Prop() stale?: boolean = true; // enable stale-while-revalidate\n\n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false; // indicates we are showing stale data while refreshing\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products' });\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 || 'all',\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 } 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 render() {\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}-products`}> \n <iv-layout\n classModifier={`${BLOCK}-layout`}\n gridTemplateAreas={this.gridlayout}>\n {this.products.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 </iv-layout>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"]}
|
package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.css
CHANGED
|
@@ -59,6 +59,21 @@
|
|
|
59
59
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
/* Alignment fix: reserve consistent height for titles (2 lines) and anchor controls at bottom */
|
|
63
|
+
.iv-dynamic-products-carousel-card .iv-card-title {
|
|
64
|
+
line-height: 1.2;
|
|
65
|
+
display: -webkit-box;
|
|
66
|
+
-webkit-box-orient: vertical;
|
|
67
|
+
-webkit-line-clamp: 2;
|
|
68
|
+
line-clamp: 2;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
min-height: 2.4em;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.iv-dynamic-products-carousel-card .iv-card-controls {
|
|
74
|
+
margin-top: auto; /* push controls to bottom of flex column for uniform vertical alignment */
|
|
75
|
+
}
|
|
76
|
+
|
|
62
77
|
.iv-dynamic-products-carousel-card:hover {
|
|
63
78
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
|
|
64
79
|
transform: translateY(-2px);
|
package/dist/collection/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.js
CHANGED
|
@@ -5,7 +5,7 @@ import { productCache } from "../../utils/caching/productCache";
|
|
|
5
5
|
import { createErrorHandler } from "../../utils/error_handling/factory";
|
|
6
6
|
const BLOCK = 'iv-dynamic-products-carousel';
|
|
7
7
|
export class IvDynamicProductsCarousel {
|
|
8
|
-
type = '
|
|
8
|
+
type = 'CREATED_AT';
|
|
9
9
|
limit = 24;
|
|
10
10
|
reversed = false;
|
|
11
11
|
componenttitle;
|
|
@@ -94,7 +94,7 @@ export class IvDynamicProductsCarousel {
|
|
|
94
94
|
};
|
|
95
95
|
render() {
|
|
96
96
|
const TAG = this.titletag;
|
|
97
|
-
return (h("div", { key: '
|
|
97
|
+
return (h("div", { key: 'a0fa6574a48e8aaa6b400282aa9bab55c1babd4f', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '9ab7d2ed24377813fbb593f8a845e0c5775309a9', class: `${BLOCK}-title` }, this.componenttitle), state.loading ? (h("iv-spinner", null)) : this.errorMsg ? (h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), h("div", { class: `${BLOCK}-viewport` }, h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
|
|
98
98
|
}
|
|
99
99
|
;
|
|
100
100
|
static get is() { return "iv-dynamic-products-carousel"; }
|
|
@@ -114,8 +114,8 @@ export class IvDynamicProductsCarousel {
|
|
|
114
114
|
"type": "string",
|
|
115
115
|
"mutable": false,
|
|
116
116
|
"complexType": {
|
|
117
|
-
"original": "'CREATED' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE'",
|
|
118
|
-
"resolved": "\"BEST_SELLING\" | \"CREATED\" | \"PRICE\" | \"RELEVANCE\" | \"TITLE\"",
|
|
117
|
+
"original": "'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE'",
|
|
118
|
+
"resolved": "\"BEST_SELLING\" | \"CREATED\" | \"CREATED_AT\" | \"PRICE\" | \"RELEVANCE\" | \"TITLE\"",
|
|
119
119
|
"references": {}
|
|
120
120
|
},
|
|
121
121
|
"required": false,
|
|
@@ -128,7 +128,7 @@ export class IvDynamicProductsCarousel {
|
|
|
128
128
|
"setter": false,
|
|
129
129
|
"reflect": false,
|
|
130
130
|
"attribute": "type",
|
|
131
|
-
"defaultValue": "'
|
|
131
|
+
"defaultValue": "'CREATED_AT'"
|
|
132
132
|
},
|
|
133
133
|
"limit": {
|
|
134
134
|
"type": "number",
|
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' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'CREATED'; \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 \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};"]}
|
|
@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './p-GgFls1_9.js';
|
|
|
6
6
|
import { d as defineCustomElement$3 } from './p-DwwyNs2H.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './p-B0FwtJkz.js';
|
|
8
8
|
|
|
9
|
-
const ivDynamicProductsCarouselCss = ":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";
|
|
9
|
+
const ivDynamicProductsCarouselCss = ":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card .iv-card-title{line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.4em}.iv-dynamic-products-carousel-card .iv-card-controls{margin-top:auto;}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";
|
|
10
10
|
|
|
11
11
|
const BLOCK = 'iv-dynamic-products-carousel';
|
|
12
12
|
const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDynamicProductsCarousel extends H {
|
|
@@ -16,7 +16,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
|
|
|
16
16
|
this.__registerHost();
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
type = '
|
|
19
|
+
type = 'CREATED_AT';
|
|
20
20
|
limit = 24;
|
|
21
21
|
reversed = false;
|
|
22
22
|
componenttitle;
|
|
@@ -103,7 +103,7 @@ const IvDynamicProductsCarousel$1 = /*@__PURE__*/ proxyCustomElement(class IvDyn
|
|
|
103
103
|
};
|
|
104
104
|
render() {
|
|
105
105
|
const TAG = this.titletag;
|
|
106
|
-
return (h("div", { key: '
|
|
106
|
+
return (h("div", { key: 'a0fa6574a48e8aaa6b400282aa9bab55c1babd4f', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: '9ab7d2ed24377813fbb593f8a845e0c5775309a9', class: `${BLOCK}-title` }, this.componenttitle), state.loading ? (h("iv-spinner", null)) : this.errorMsg ? (h("div", { class: `${BLOCK}-error` }, this.errorMsg)) : this.products.length === 0 ? (h("div", { class: `${BLOCK}-empty` }, this.emptystring)) : (h("div", { class: `${BLOCK}-carousel`, "aria-roledescription": "carousel" }, h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-prev`, onClick: this.prev, disabled: this.page === 0, "aria-label": "Previous", type: "button" }, "\u2039"), h("div", { class: `${BLOCK}-viewport` }, h("div", { class: `${BLOCK}-track`, style: { transform: `translateX(-${this.page * 100}%)` } }, this.pagedProducts().map((group, i) => (h("div", { class: `${BLOCK}-slide`, role: "group", "aria-label": `Slide ${i + 1} of ${this.pagedProducts().length}` }, group.map(product => (h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))))))), h("button", { class: `${BLOCK}-nav ${BLOCK}-nav-next`, onClick: this.next, disabled: this.page === this.pagedProducts().length - 1, "aria-label": "Next", type: "button" }, "\u203A"), h("div", { class: `${BLOCK}-status`, "aria-live": "polite" }, this.pagedProducts().length > 1 ? `Slide ${this.page + 1} of ${this.pagedProducts().length}` : ''), this.staleData && (h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
|
|
107
107
|
}
|
|
108
108
|
;
|
|
109
109
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"iv-dynamic-products-carousel.js","mappings":"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","names":["IvDynamicProductsCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n.iv-dynamic-products-carousel-card:hover { \n box-shadow:0 4px 14px rgba(0,0,0,.15); \n transform:translateY(-2px); \n}\n\n.iv-dynamic-products-carousel-card:active { \n transform:translateY(0); \n box-shadow:0 2px 6px rgba(0,0,0,.12); \n}\n\n.iv-dynamic-products-carousel-card img, \n.iv-dynamic-products-carousel-card picture, \n.iv-dynamic-products-carousel-card .media { \n width:100%; \n aspect-ratio:1/1; \n object-fit:contain; \n display:flex; \n align-items:center; \n justify-content:center; \n margin:0 0 .65rem; \n}\n\n.iv-dynamic-products-carousel-nav { \n position:absolute; \n top:50%; \n transform:translateY(-50%); \n background:var(--iv-carousel-nav-bg, rgba(0,0,0,.55)); \n color:#fff; \n border:none; \n width:2.75rem; \n height:2.75rem; \n border-radius:50%; \n display:flex; \n align-items:center; \n justify-content:center; \n cursor:pointer; \n backdrop-filter:blur(6px); \n box-shadow:0 4px 12px rgba(0,0,0,.25); \n transition:background .2s ease, \n transform .2s ease; \n outline:none;\n z-index: 10;\n }\n\n.iv-dynamic-products-carousel-nav:focus-visible { \n outline:2px solid #fff; \n outline-offset:3px; \n}\n\n.iv-dynamic-products-carousel-nav:hover:not(:disabled){\n background:var(--iv-carousel-nav-bg-hover, rgba(0,0,0,.75)); \n transform:translateY(-50%) scale(1.05); \n box-shadow:0 6px 18px rgba(0,0,0,.35);\n}\n\n.iv-dynamic-products-carousel-nav:disabled{ \n opacity:.4; cursor:default; \n}\n\n.iv-dynamic-products-carousel-nav-prev { \n left:0.25rem; \n}\n\n.iv-dynamic-products-carousel-nav-next { \n right:0.25rem; \n}\n\n.iv-dynamic-products-carousel-status { \n margin-top:0.75rem; \n font-size:0.875rem; \n text-align:center; \n color:var(--iv-carousel-status-color, #555); \n}\n\n.iv-dynamic-products-carousel-viewport::-webkit-scrollbar { \n display:none; \n}\n\n.iv-dynamic-products-carousel-viewport { \n -ms-overflow-style:none; \n scrollbar-width:none; \n}","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'CREATED'; \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 \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}
|
|
@@ -17,8 +17,7 @@ const IvDynamicProducts$1 = /*@__PURE__*/ proxyCustomElement(class IvDynamicProd
|
|
|
17
17
|
this.__registerHost();
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
type = 'CREATED';
|
|
20
|
+
type = 'CREATED_AT';
|
|
22
21
|
limit = 8;
|
|
23
22
|
reversed = false;
|
|
24
23
|
componenttitle;
|
|
@@ -87,7 +86,7 @@ const IvDynamicProducts$1 = /*@__PURE__*/ proxyCustomElement(class IvDynamicProd
|
|
|
87
86
|
;
|
|
88
87
|
render() {
|
|
89
88
|
const TAG = this.titletag;
|
|
90
|
-
return (h("div", { key: '
|
|
89
|
+
return (h("div", { key: '85554232934bce84315e8f69be3844b1f1affb3c', class: BLOCK, "data-stale": this.staleData ? 'true' : 'false' }, this.componenttitle && h(TAG, { key: 'c7e11e1eba2e769d6cf1b8f824d422d71a149e88', 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}-products` }, h("iv-layout", { classModifier: `${BLOCK}-layout`, gridTemplateAreas: this.gridlayout }, this.products.map(product => (h("iv-card", { cardtype: 'products', calltoaction: this.calltoaction, buttontext: this.buttontext, addtocarttext: this.addtocarttext, data: product, classmodifier: `${BLOCK}-card` })))), this.staleData && (h("div", { class: `${BLOCK}-stale-indicator`, "aria-live": "polite" }, "Refreshing\u2026"))))));
|
|
91
90
|
}
|
|
92
91
|
;
|
|
93
92
|
static get watchers() { return {
|