the-foxy-library 1.0.2 → 1.0.3
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 +2 -2
- 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.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 +2 -2
- 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 +2 -2
- 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-980500d4.entry.js +2 -0
- package/dist/intravenous/{p-2d5d9359.entry.js.map → p-980500d4.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/p-2d5d9359.entry.js +0 -2
|
@@ -11,7 +11,7 @@ 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.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":"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"}
|
|
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.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};"]}
|
|
@@ -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.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 {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"iv-dynamic-products.js","mappings":"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","names":["IvDynamicProducts","__stencil_proxyCustomElement","HTMLElement"],"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};"],"version":3}
|
|
1
|
+
{"file":"iv-dynamic-products.js","mappings":"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","names":["IvDynamicProducts","__stencil_proxyCustomElement","HTMLElement"],"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};"],"version":3}
|
|
@@ -9,7 +9,7 @@ const IvDynamicProductsCarousel = class {
|
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
registerInstance(this, hostRef);
|
|
11
11
|
}
|
|
12
|
-
type = '
|
|
12
|
+
type = 'CREATED_AT';
|
|
13
13
|
limit = 24;
|
|
14
14
|
reversed = false;
|
|
15
15
|
componenttitle;
|
|
@@ -96,7 +96,7 @@ const IvDynamicProductsCarousel = class {
|
|
|
96
96
|
};
|
|
97
97
|
render() {
|
|
98
98
|
const TAG = this.titletag;
|
|
99
|
-
return (h("div", { key: '
|
|
99
|
+
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"))))));
|
|
100
100
|
}
|
|
101
101
|
;
|
|
102
102
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iv-dynamic-products-carousel.entry.js","sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n.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":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"iv-dynamic-products-carousel.entry.js","sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n.iv-dynamic-products-carousel-card:hover { \n box-shadow:0 4px 14px rgba(0,0,0,.15); \n transform:translateY(-2px); \n}\n\n.iv-dynamic-products-carousel-card:active { \n transform:translateY(0); \n box-shadow:0 2px 6px rgba(0,0,0,.12); \n}\n\n.iv-dynamic-products-carousel-card img, \n.iv-dynamic-products-carousel-card picture, \n.iv-dynamic-products-carousel-card .media { \n width:100%; \n aspect-ratio:1/1; \n object-fit:contain; \n display:flex; \n align-items:center; \n justify-content:center; \n margin:0 0 .65rem; \n}\n\n.iv-dynamic-products-carousel-nav { \n position:absolute; \n top:50%; \n transform:translateY(-50%); \n background:var(--iv-carousel-nav-bg, rgba(0,0,0,.55)); \n color:#fff; \n border:none; \n width:2.75rem; \n height:2.75rem; \n border-radius:50%; \n display:flex; \n align-items:center; \n justify-content:center; \n cursor:pointer; \n backdrop-filter:blur(6px); \n box-shadow:0 4px 12px rgba(0,0,0,.25); \n transition:background .2s ease, \n transform .2s ease; \n outline:none;\n z-index: 10;\n }\n\n.iv-dynamic-products-carousel-nav:focus-visible { \n outline:2px solid #fff; \n outline-offset:3px; \n}\n\n.iv-dynamic-products-carousel-nav:hover:not(:disabled){\n background:var(--iv-carousel-nav-bg-hover, rgba(0,0,0,.75)); \n transform:translateY(-50%) scale(1.05); \n box-shadow:0 6px 18px rgba(0,0,0,.35);\n}\n\n.iv-dynamic-products-carousel-nav:disabled{ \n opacity:.4; cursor:default; \n}\n\n.iv-dynamic-products-carousel-nav-prev { \n left:0.25rem; \n}\n\n.iv-dynamic-products-carousel-nav-next { \n right:0.25rem; \n}\n\n.iv-dynamic-products-carousel-status { \n margin-top:0.75rem; \n font-size:0.875rem; \n text-align:center; \n color:var(--iv-carousel-status-color, #555); \n}\n\n.iv-dynamic-products-carousel-viewport::-webkit-scrollbar { \n display:none; \n}\n\n.iv-dynamic-products-carousel-viewport { \n -ms-overflow-style:none; \n scrollbar-width:none; \n}","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 24;\n @Prop() reversed: boolean = false; \n @Prop() componenttitle?: string;\n @Prop() titletag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';\n @Prop() collectionhandle: string = 'all';\n @Prop() requestedfields: string;\n @Prop() calltoaction: boolean = false;\n @Prop() buttontext?: string;\n @Prop() addtocarttext?: string;\n @Prop() emptystring: string = 'No products found';\n @Prop() cachettl?: number; \n @Prop() stale?: boolean = true; \n \n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false;\n @State() page: number = 0; \n\n private readonly itemsPerPage = 6;\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products-carousel' });\n\n @Watch('type')\n @Watch('limit')\n @Watch('collectionhandle')\n @Watch('requestedfields')\n handlePropChange() { this.loadProducts(true); }\n\n async componentWillLoad() { \n await this.loadProducts(false); \n };\n \n private buildParams() {\n return {\n handle: this.collectionhandle,\n sort: this.type,\n fields: this.requestedfields,\n limit: this.limit,\n currency: state.currencyCode,\n reversed: this.reversed\n };\n };\n\n private async loadProducts(fromWatch: boolean) {\n const params = this.buildParams();\n const ttl = this.cachettl || 1000 * 60 * 5;\n state.loading = !fromWatch; \n try {\n const data = await productCache.getOrSetData(\n params,\n async () => {\n const fresh = await fetchProducts(this.limit, this.collectionhandle, this.type, this.requestedfields, this.reversed);\n return fresh;\n },\n {\n ttl,\n staleWhileRevalidate: this.stale,\n transform: (fresh) => fresh \n }\n );\n const metaCheck = productCache.getData<typeof data>(params);\n this.staleData = metaCheck.isExpired && metaCheck.isStale;\n this.products = data || [];\n this.page = 0;\n } catch (err: any) {\n this.errorMsg = 'Failed to load products';\n this.errors.handle({\n error: err,\n scope: 'loadProducts',\n userMessage: 'Unable to load products right now.',\n devMessage: 'fetchProducts failed in iv-dynamic-products',\n severity: 'error'\n });\n } finally {\n state.loading = false;\n };\n };\n\n private pagedProducts() {\n const chunks: any[][] = [];\n for(let i=0; i < this.products.length; i += this.itemsPerPage) {\n chunks.push(this.products.slice(i, i + this.itemsPerPage));\n };\n return chunks;\n };\n\n private next = () => { \n const pages = this.pagedProducts().length;\n if(this.page < pages - 1) this.page++;\n };\n\n private prev = () => { \n if(this.page > 0) this.page--;\n };\n\n render() {\n\n const TAG = this.titletag as any;\n\n return (\n <div class={BLOCK} data-stale={this.staleData ? 'true' : 'false'}>\n {this.componenttitle && <TAG class={`${BLOCK}-title`}>{this.componenttitle}</TAG>}\n {state.loading ? (\n <iv-spinner></iv-spinner>\n ) : this.errorMsg ? (\n <div class={`${BLOCK}-error`}>{this.errorMsg}</div>\n ) : this.products.length === 0 ? (\n <div class={`${BLOCK}-empty`}>{this.emptystring}</div>\n ) : (\n <div class={`${BLOCK}-carousel`} aria-roledescription=\"carousel\">\n <button class={`${BLOCK}-nav ${BLOCK}-nav-prev`} onClick={this.prev} disabled={this.page===0} aria-label=\"Previous\" type=\"button\">\n ‹\n </button>\n <div class={`${BLOCK}-viewport`}>\n <div class={`${BLOCK}-track`} style={{ transform: `translateX(-${this.page * 100}%)` }}>\n {this.pagedProducts().map((group, i) => (\n <div class={`${BLOCK}-slide`} role=\"group\" aria-label={`Slide ${i+1} of ${this.pagedProducts().length}`}> \n {group.map(product => (\n <iv-card\n cardtype='products'\n calltoaction={this.calltoaction}\n buttontext={this.buttontext}\n addtocarttext={this.addtocarttext}\n data={product}\n classmodifier={`${BLOCK}-card`} />\n ))}\n </div>\n ))}\n </div>\n </div>\n <button class={`${BLOCK}-nav ${BLOCK}-nav-next`} onClick={this.next} disabled={this.page===this.pagedProducts().length-1} aria-label=\"Next\" type=\"button\">\n ›\n </button>\n <div class={`${BLOCK}-status`} aria-live=\"polite\">{this.pagedProducts().length > 1 ? `Slide ${this.page+1} of ${this.pagedProducts().length}` : ''}</div>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"],"names":[],"mappings":"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"}
|
|
@@ -9,8 +9,7 @@ const IvDynamicProducts = class {
|
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
registerInstance(this, hostRef);
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
type = 'CREATED';
|
|
12
|
+
type = 'CREATED_AT';
|
|
14
13
|
limit = 8;
|
|
15
14
|
reversed = false;
|
|
16
15
|
componenttitle;
|
|
@@ -79,7 +78,7 @@ const IvDynamicProducts = class {
|
|
|
79
78
|
;
|
|
80
79
|
render() {
|
|
81
80
|
const TAG = this.titletag;
|
|
82
|
-
return (h("div", { key: '
|
|
81
|
+
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"))))));
|
|
83
82
|
}
|
|
84
83
|
;
|
|
85
84
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iv-dynamic-products.entry.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":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"iv-dynamic-products.entry.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":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-C4-XLZHN.js";export{s as setNonce}from"./p-C4-XLZHN.js";import{g as a}from"./p-BvKHmCfH.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-
|
|
1
|
+
import{p as e,b as t}from"./p-C4-XLZHN.js";export{s as setNonce}from"./p-C4-XLZHN.js";import{g as a}from"./p-BvKHmCfH.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-85843c63",[[256,"iv-dynamic-products",{type:[1],limit:[2],reversed:[4],componenttitle:[1],titletag:[1],collectionhandle:[1],carousel:[4],requestedfields:[1],calltoaction:[4],buttontext:[1],addtocarttext:[1],emptystring:[1],gridlayout:[1],cachettl:[2],stale:[4],products:[32],errorMsg:[32],staleData:[32]},null,{type:["handlePropChange"],limit:["handlePropChange"],collectionhandle:["handlePropChange"],requestedfields:["handlePropChange"]}]]],["p-2f5c081f",[[256,"iv-suggest",{topqueries:[1],collections:[1],products:[1],banner:[1],bannerurl:[1],bannertitle:[1],bannertitletag:[1],bannerbuttontext:[1],topquerytitle:[1],productstitle:[1],collectionstitle:[1],gridlayout:[1],requestfields:[1]}]]],["p-980500d4",[[256,"iv-dynamic-products-carousel",{type:[1],limit:[2],reversed:[4],componenttitle:[1],titletag:[1],collectionhandle:[1],requestedfields:[1],calltoaction:[4],buttontext:[1],addtocarttext:[1],emptystring:[1],cachettl:[2],stale:[4],products:[32],errorMsg:[32],staleData:[32],page:[32]},null,{type:["handlePropChange"],limit:["handlePropChange"],collectionhandle:["handlePropChange"],requestedfields:["handlePropChange"]}]]],["p-aabedd5e",[[256,"iv-predictive-search",{searchlabel:[1],labelposition:[1],action:[1],method:[1],placeholder:[1],minchars:[2],debounce:[2],resultslimit:[2],showspinner:[4],noresultstext:[1],requestedfields:[1],requestedresources:[1],showallbuttontext:[1],querybuttontext:[1],clearbutton:[1],expandable:[4],tablayout:[1],gridlayout:[1],searchTerm:[32],searchReturnData:[32],noResults:[32]}]]],["p-128b6cac",[[256,"iv-wishlist",{buttonaddvalue:[1],buttonremovevalue:[1],wishlistempty:[1],buttonaddtocartvalue:[1],viewwishlistvalue:[1],productdata:[1],usefields:[1],previewtype:[1]}]]],["p-a3928f84",[[257,"iv-carousel"]]],["p-8ac29c77",[[256,"iv-filters"]]],["p-66ebd8f1",[[260,"sw-in-grid-content"]]],["p-60554353",[[260,"sw-size-guide",{sizeUnits:[32]}]]],["p-e911fc8a",[[260,"iv-banner",{classmodifier:[1],bannerurl:[1],bannerbuttontext:[1],bannertype:[1]}]]],["p-bc77e1fd",[[260,"iv-tabs",{labels:[16],classModifier:[1,"class-modifier"],tabLayout:[1,"tab-layout"],activeTab:[32]}]]],["p-0a24e4ba",[[256,"iv-spinner",{show:[4]}]]],["p-b1b44a12",[[256,"iv-recently-viewed",{componenttitle:[1],titletag:[1],numbertoshow:[2],noviewhistory:[1],requestedfields:[1],items:[32]}],[257,"iv-modal"],[260,"iv-sidebar",{closeicon:[1]},[[8,"openPullout","handleOpenPullout"]]],[256,"iv-toast-container",{_bump:[32]}],[260,"iv-accordion",{classmodifier:[1],accordiontype:[1],accordionlabels:[1],showmultiple:[4],showfirst:[4],startingpanel:[2],layout:[1],activePanel:[32]}],[256,"iv-toast",{message:[1],toastId:[2,"toast-id"],duration:[2],type:[1]}],[256,"iv-wishlist-view"],[256,"iv-card",{data:[16],fields:[1],cardtype:[1],classmodifier:[1],buttontext:[1],calltoaction:[4],addtocarttext:[1]}],[260,"iv-layout",{sectionId:[1,"section-id"],gridTemplateAreas:[1,"grid-template-areas"],gap:[1],verticalAlign:[1,"vertical-align"],horizontalAlign:[1,"horizontal-align"],wrapperTag:[1,"wrapper-tag"],classModifier:[1,"class-modifier"]}],[260,"iv-link",{classmodifier:[1],linktype:[1],linkhref:[1],linktarget:[1],linkrel:[1],linkariaLabel:[1,"linkaria-label"]}],[260,"iv-button",{type:[1],classmodifier:[1],eventname:[1],eventdetail:[1],buttonClick:[16]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=intravenous.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iv-dynamic-products-carousel.entry.esm.js","sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n.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":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"iv-dynamic-products-carousel.entry.esm.js","sources":["src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.scss?tag=iv-dynamic-products-carousel","src/components/iv-dynamic-products-carousel/iv-dynamic-products-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.iv-dynamic-products-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-carousel { \n position:relative;\n}\n\n.iv-dynamic-products-carousel-viewport { \n overflow:hidden; \n width:100%;\n}\n\n.iv-dynamic-products-carousel-track { \n display:flex; \n width:100%; \n transition: \n transform .55s cubic-bezier(.4,.7,.2,1); \n will-change:transform;\n}\n\n.iv-dynamic-products-carousel-slide { \n flex:0 0 100%; \n box-sizing:border-box; \n padding:0.25rem 0.5rem; \n display:grid; \n grid-template-columns:repeat(6, minmax(0,1fr)); \n gap:1rem; \n align-items:stretch; \n grid-auto-rows:1fr; \n}\n\n@media (max-width: 1200px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(4, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 900px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(3, minmax(0,1fr)); \n } \n}\n\n@media (max-width: 640px) { \n .iv-dynamic-products-carousel-slide { \n grid-template-columns:repeat(2, minmax(0,1fr)); \n gap:0.75rem; \n } \n}\n\n.iv-dynamic-products-carousel-card { \n height:100%; \n display:flex; \n flex-direction:column; \n background:#fff; \n padding:0.75rem 0.75rem 0.9rem; \n box-shadow:0 2px 6px rgba(0,0,0,.08); \n transition:box-shadow .2s ease, transform .2s ease; \n}\n\n.iv-dynamic-products-carousel-card:hover { \n box-shadow:0 4px 14px rgba(0,0,0,.15); \n transform:translateY(-2px); \n}\n\n.iv-dynamic-products-carousel-card:active { \n transform:translateY(0); \n box-shadow:0 2px 6px rgba(0,0,0,.12); \n}\n\n.iv-dynamic-products-carousel-card img, \n.iv-dynamic-products-carousel-card picture, \n.iv-dynamic-products-carousel-card .media { \n width:100%; \n aspect-ratio:1/1; \n object-fit:contain; \n display:flex; \n align-items:center; \n justify-content:center; \n margin:0 0 .65rem; \n}\n\n.iv-dynamic-products-carousel-nav { \n position:absolute; \n top:50%; \n transform:translateY(-50%); \n background:var(--iv-carousel-nav-bg, rgba(0,0,0,.55)); \n color:#fff; \n border:none; \n width:2.75rem; \n height:2.75rem; \n border-radius:50%; \n display:flex; \n align-items:center; \n justify-content:center; \n cursor:pointer; \n backdrop-filter:blur(6px); \n box-shadow:0 4px 12px rgba(0,0,0,.25); \n transition:background .2s ease, \n transform .2s ease; \n outline:none;\n z-index: 10;\n }\n\n.iv-dynamic-products-carousel-nav:focus-visible { \n outline:2px solid #fff; \n outline-offset:3px; \n}\n\n.iv-dynamic-products-carousel-nav:hover:not(:disabled){\n background:var(--iv-carousel-nav-bg-hover, rgba(0,0,0,.75)); \n transform:translateY(-50%) scale(1.05); \n box-shadow:0 6px 18px rgba(0,0,0,.35);\n}\n\n.iv-dynamic-products-carousel-nav:disabled{ \n opacity:.4; cursor:default; \n}\n\n.iv-dynamic-products-carousel-nav-prev { \n left:0.25rem; \n}\n\n.iv-dynamic-products-carousel-nav-next { \n right:0.25rem; \n}\n\n.iv-dynamic-products-carousel-status { \n margin-top:0.75rem; \n font-size:0.875rem; \n text-align:center; \n color:var(--iv-carousel-status-color, #555); \n}\n\n.iv-dynamic-products-carousel-viewport::-webkit-scrollbar { \n display:none; \n}\n\n.iv-dynamic-products-carousel-viewport { \n -ms-overflow-style:none; \n scrollbar-width:none; \n}","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { state } from '../../utils/store/store';\nimport { fetchProducts } from '../../utils/storefront_api/factory';\nimport { productCache } from '../../utils/caching/productCache';\nimport { createErrorHandler } from '../../utils/error_handling/factory';\n\nconst BLOCK = 'iv-dynamic-products-carousel';\n\n@Component({\n tag: 'iv-dynamic-products-carousel',\n styleUrl: 'iv-dynamic-products-carousel.scss',\n shadow: false\n})\n\nexport class IvDynamicProductsCarousel {\n @Prop() type: 'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE' = 'CREATED_AT'; \n @Prop() limit: number = 24;\n @Prop() reversed: boolean = false; \n @Prop() componenttitle?: string;\n @Prop() titletag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';\n @Prop() collectionhandle: string = 'all';\n @Prop() requestedfields: string;\n @Prop() calltoaction: boolean = false;\n @Prop() buttontext?: string;\n @Prop() addtocarttext?: string;\n @Prop() emptystring: string = 'No products found';\n @Prop() cachettl?: number; \n @Prop() stale?: boolean = true; \n \n @State() products: any[] = [];\n @State() errorMsg: string; \n @State() staleData: boolean = false;\n @State() page: number = 0; \n\n private readonly itemsPerPage = 6;\n\n private errors = createErrorHandler({ component: 'iv-dynamic-products-carousel' });\n\n @Watch('type')\n @Watch('limit')\n @Watch('collectionhandle')\n @Watch('requestedfields')\n handlePropChange() { this.loadProducts(true); }\n\n async componentWillLoad() { \n await this.loadProducts(false); \n };\n \n private buildParams() {\n return {\n handle: this.collectionhandle,\n sort: this.type,\n fields: this.requestedfields,\n limit: this.limit,\n currency: state.currencyCode,\n reversed: this.reversed\n };\n };\n\n private async loadProducts(fromWatch: boolean) {\n const params = this.buildParams();\n const ttl = this.cachettl || 1000 * 60 * 5;\n state.loading = !fromWatch; \n try {\n const data = await productCache.getOrSetData(\n params,\n async () => {\n const fresh = await fetchProducts(this.limit, this.collectionhandle, this.type, this.requestedfields, this.reversed);\n return fresh;\n },\n {\n ttl,\n staleWhileRevalidate: this.stale,\n transform: (fresh) => fresh \n }\n );\n const metaCheck = productCache.getData<typeof data>(params);\n this.staleData = metaCheck.isExpired && metaCheck.isStale;\n this.products = data || [];\n this.page = 0;\n } catch (err: any) {\n this.errorMsg = 'Failed to load products';\n this.errors.handle({\n error: err,\n scope: 'loadProducts',\n userMessage: 'Unable to load products right now.',\n devMessage: 'fetchProducts failed in iv-dynamic-products',\n severity: 'error'\n });\n } finally {\n state.loading = false;\n };\n };\n\n private pagedProducts() {\n const chunks: any[][] = [];\n for(let i=0; i < this.products.length; i += this.itemsPerPage) {\n chunks.push(this.products.slice(i, i + this.itemsPerPage));\n };\n return chunks;\n };\n\n private next = () => { \n const pages = this.pagedProducts().length;\n if(this.page < pages - 1) this.page++;\n };\n\n private prev = () => { \n if(this.page > 0) this.page--;\n };\n\n render() {\n\n const TAG = this.titletag as any;\n\n return (\n <div class={BLOCK} data-stale={this.staleData ? 'true' : 'false'}>\n {this.componenttitle && <TAG class={`${BLOCK}-title`}>{this.componenttitle}</TAG>}\n {state.loading ? (\n <iv-spinner></iv-spinner>\n ) : this.errorMsg ? (\n <div class={`${BLOCK}-error`}>{this.errorMsg}</div>\n ) : this.products.length === 0 ? (\n <div class={`${BLOCK}-empty`}>{this.emptystring}</div>\n ) : (\n <div class={`${BLOCK}-carousel`} aria-roledescription=\"carousel\">\n <button class={`${BLOCK}-nav ${BLOCK}-nav-prev`} onClick={this.prev} disabled={this.page===0} aria-label=\"Previous\" type=\"button\">\n ‹\n </button>\n <div class={`${BLOCK}-viewport`}>\n <div class={`${BLOCK}-track`} style={{ transform: `translateX(-${this.page * 100}%)` }}>\n {this.pagedProducts().map((group, i) => (\n <div class={`${BLOCK}-slide`} role=\"group\" aria-label={`Slide ${i+1} of ${this.pagedProducts().length}`}> \n {group.map(product => (\n <iv-card\n cardtype='products'\n calltoaction={this.calltoaction}\n buttontext={this.buttontext}\n addtocarttext={this.addtocarttext}\n data={product}\n classmodifier={`${BLOCK}-card`} />\n ))}\n </div>\n ))}\n </div>\n </div>\n <button class={`${BLOCK}-nav ${BLOCK}-nav-next`} onClick={this.next} disabled={this.page===this.pagedProducts().length-1} aria-label=\"Next\" type=\"button\">\n ›\n </button>\n <div class={`${BLOCK}-status`} aria-live=\"polite\">{this.pagedProducts().length > 1 ? `Slide ${this.page+1} of ${this.pagedProducts().length}` : ''}</div>\n {this.staleData && (\n <div class={`${BLOCK}-stale-indicator`} aria-live=\"polite\">Refreshing…</div>\n )}\n </div>\n )}\n </div>\n );\n };\n\n};"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iv-dynamic-products.entry.esm.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":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"iv-dynamic-products.entry.esm.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":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as i,h as a}from"./p-C4-XLZHN.js";import{b as r}from"./p-MuJ1P-w6.js";import{c as d,p as s}from"./p-C9w3yU1Z.js";const c=".iv-dynamic-products{box-sizing:border-box;width:var(--iv-dynamic-products-width, 100%);max-width:var(--iv-dynamic-products-max-width, 100%);margin:var(--iv-dynamic-products-margin, 0);padding:var(--iv-dynamic-products-padding, 0);background:var(--iv-dynamic-products-bg, transparent);border:var(--iv-dynamic-products-border, none);border-radius:var(--iv-dynamic-products-radius, 0);box-shadow:var(--iv-dynamic-products-shadow, none);color:var(--iv-dynamic-products-color, inherit);--iv-layout-gap:var(--iv-dynamic-products-gap, 1.5rem)}.iv-dynamic-products-title{margin:var(--iv-dynamic-products-title-margin, 0 0 1rem 0);font-size:var(--iv-dynamic-products-title-font-size, clamp(1.125rem, 1vw + 1rem, 1.75rem));font-weight:var(--iv-dynamic-products-title-font-weight, 600);line-height:var(--iv-dynamic-products-title-line-height, 1.2);letter-spacing:var(--iv-dynamic-products-title-letter-spacing, normal)}.iv-dynamic-products-error,.iv-dynamic-products-empty{padding:var(--iv-dynamic-products-state-padding, 1rem);border:var(--iv-dynamic-products-state-border, none);background:var(--iv-dynamic-products-state-bg, transparent);color:var(--iv-dynamic-products-state-color, inherit);font-size:var(--iv-dynamic-products-state-font-size, 0.875rem);text-align:var(--iv-dynamic-products-state-text-align, center)}.iv-dynamic-products-products{width:100%;margin:var(--iv-dynamic-products-products-margin, 0);padding:var(--iv-dynamic-products-products-padding, 0)}.iv-layout--iv-dynamic-products-layout{--iv-layout-gap:var(--iv-dynamic-products-grid-gap, var(--iv-dynamic-products-gap, 1.5rem));align-items:var(--iv-dynamic-products-grid-align, stretch);justify-content:var(--iv-dynamic-products-grid-justify, flex-start)}.iv-dynamic-products .iv-card{margin:var(--iv-dynamic-products-card-margin, 0);--iv-card-padding:var(--iv-dynamic-products-card-padding, var(--iv-card-padding, 0))}@media (min-width: 40rem){.iv-dynamic-products{--iv-dynamic-products-gap:var(--iv-dynamic-products-gap-md, var(--iv-dynamic-products-gap, 1.5rem))}}@media (min-width: 64rem){.iv-dynamic-products{--iv-dynamic-products-gap:var(--iv-dynamic-products-gap-lg, var(--iv-dynamic-products-gap, 1.5rem))}}.iv-dynamic-products--scroll-x .iv-layout--iv-dynamic-products-layout{display:flex !important;overflow-x:auto;scrollbar-width:var(--iv-dynamic-products-scrollbar-width, thin);-webkit-overflow-scrolling:touch}.iv-dynamic-products--scroll-x .iv-layout--iv-dynamic-products-layout>*{flex:0 0 var(--iv-dynamic-products-scroll-item-width, 75%)}@media (prefers-reduced-motion: reduce){.iv-dynamic-products{scroll-behavior:auto}}";const o="iv-dynamic-products";const e=class{constructor(i){t(this,i)}type="
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as i,h as a}from"./p-C4-XLZHN.js";import{b as r}from"./p-MuJ1P-w6.js";import{c as d,p as s}from"./p-C9w3yU1Z.js";const c=".iv-dynamic-products{box-sizing:border-box;width:var(--iv-dynamic-products-width, 100%);max-width:var(--iv-dynamic-products-max-width, 100%);margin:var(--iv-dynamic-products-margin, 0);padding:var(--iv-dynamic-products-padding, 0);background:var(--iv-dynamic-products-bg, transparent);border:var(--iv-dynamic-products-border, none);border-radius:var(--iv-dynamic-products-radius, 0);box-shadow:var(--iv-dynamic-products-shadow, none);color:var(--iv-dynamic-products-color, inherit);--iv-layout-gap:var(--iv-dynamic-products-gap, 1.5rem)}.iv-dynamic-products-title{margin:var(--iv-dynamic-products-title-margin, 0 0 1rem 0);font-size:var(--iv-dynamic-products-title-font-size, clamp(1.125rem, 1vw + 1rem, 1.75rem));font-weight:var(--iv-dynamic-products-title-font-weight, 600);line-height:var(--iv-dynamic-products-title-line-height, 1.2);letter-spacing:var(--iv-dynamic-products-title-letter-spacing, normal)}.iv-dynamic-products-error,.iv-dynamic-products-empty{padding:var(--iv-dynamic-products-state-padding, 1rem);border:var(--iv-dynamic-products-state-border, none);background:var(--iv-dynamic-products-state-bg, transparent);color:var(--iv-dynamic-products-state-color, inherit);font-size:var(--iv-dynamic-products-state-font-size, 0.875rem);text-align:var(--iv-dynamic-products-state-text-align, center)}.iv-dynamic-products-products{width:100%;margin:var(--iv-dynamic-products-products-margin, 0);padding:var(--iv-dynamic-products-products-padding, 0)}.iv-layout--iv-dynamic-products-layout{--iv-layout-gap:var(--iv-dynamic-products-grid-gap, var(--iv-dynamic-products-gap, 1.5rem));align-items:var(--iv-dynamic-products-grid-align, stretch);justify-content:var(--iv-dynamic-products-grid-justify, flex-start)}.iv-dynamic-products .iv-card{margin:var(--iv-dynamic-products-card-margin, 0);--iv-card-padding:var(--iv-dynamic-products-card-padding, var(--iv-card-padding, 0))}@media (min-width: 40rem){.iv-dynamic-products{--iv-dynamic-products-gap:var(--iv-dynamic-products-gap-md, var(--iv-dynamic-products-gap, 1.5rem))}}@media (min-width: 64rem){.iv-dynamic-products{--iv-dynamic-products-gap:var(--iv-dynamic-products-gap-lg, var(--iv-dynamic-products-gap, 1.5rem))}}.iv-dynamic-products--scroll-x .iv-layout--iv-dynamic-products-layout{display:flex !important;overflow-x:auto;scrollbar-width:var(--iv-dynamic-products-scrollbar-width, thin);-webkit-overflow-scrolling:touch}.iv-dynamic-products--scroll-x .iv-layout--iv-dynamic-products-layout>*{flex:0 0 var(--iv-dynamic-products-scroll-item-width, 75%)}@media (prefers-reduced-motion: reduce){.iv-dynamic-products{scroll-behavior:auto}}";const o="iv-dynamic-products";const e=class{constructor(i){t(this,i)}type="CREATED_AT";limit=8;reversed=false;componenttitle;titletag="h2";collectionhandle="all";carousel=false;requestedfields;calltoaction=false;buttontext;addtocarttext;emptystring="No products found";gridlayout;cachettl;stale=true;products=[];errorMsg;staleData=false;errors=d({component:"iv-dynamic-products"});handlePropChange(){this.loadProducts(true)}async componentWillLoad(){await this.loadProducts(false)}buildParams(){return{handle:this.collectionhandle||"all",sort:this.type,fields:this.requestedfields,limit:this.limit,currency:i.currencyCode,reversed:this.reversed}}async loadProducts(t){const a=this.buildParams();const d=this.cachettl||1e3*60*5;i.loading=!t;try{const t=await s.getOrSetData(a,(async()=>{const t=await r(this.limit,this.collectionhandle,this.type,this.requestedfields,this.reversed);return t}),{ttl:d,staleWhileRevalidate:this.stale,transform:t=>t});const i=s.getData(a);this.staleData=i.isExpired&&i.isStale;this.products=t||[]}catch(t){this.errorMsg="Failed to load products";this.errors.handle({error:t,scope:"loadProducts",userMessage:"Unable to load products right now.",devMessage:"fetchProducts failed in iv-dynamic-products",severity:"error"})}finally{i.loading=false}}render(){const t=this.titletag;return a("div",{key:"85554232934bce84315e8f69be3844b1f1affb3c",class:o,"data-stale":this.staleData?"true":"false"},this.componenttitle&&a(t,{key:"c7e11e1eba2e769d6cf1b8f824d422d71a149e88",class:`${o}-title`},this.componenttitle),i.loading?a("iv-spinner",null):this.errorMsg?a("div",{class:`${o}-error`},this.errorMsg):this.products.length===0?a("div",{class:`${o}-empty`},this.emptystring):a("div",{class:`${o}-products`},a("iv-layout",{classModifier:`${o}-layout`,gridTemplateAreas:this.gridlayout},this.products.map((t=>a("iv-card",{cardtype:"products",calltoaction:this.calltoaction,buttontext:this.buttontext,addtocarttext:this.addtocarttext,data:t,classmodifier:`${o}-card`})))),this.staleData&&a("div",{class:`${o}-stale-indicator`,"aria-live":"polite"},"Refreshing…")))}static get watchers(){return{type:["handlePropChange"],limit:["handlePropChange"],collectionhandle:["handlePropChange"],requestedfields:["handlePropChange"]}}};e.style=c;export{e as iv_dynamic_products};
|
|
2
|
+
//# sourceMappingURL=p-85843c63.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","state","h","fetchProducts","createErrorHandler","productCache","ivDynamicProductsCss","BLOCK","IvDynamicProducts","constructor","hostRef","this","type","limit","reversed","componenttitle","titletag","collectionhandle","carousel","requestedfields","calltoaction","buttontext","addtocarttext","emptystring","gridlayout","cachettl","stale","products","errorMsg","staleData","errors","component","handlePropChange","loadProducts","componentWillLoad","buildParams","handle","sort","fields","currency","currencyCode","fromWatch","params","ttl","loading","data","getOrSetData","async","fresh","staleWhileRevalidate","transform","metaCheck","getData","isExpired","isStale","err","error","scope","userMessage","devMessage","severity","render","TAG","key","class","length","classModifier","gridTemplateAreas","map","product","cardtype","classmodifier","watchers","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAOC,MAAS,8BACvCC,MAAqB,8BACrBC,OAAyBC,MAAoB,kBAE3D,MAAMC,EAAuB,2iFAE7B,MAAMC,EAAQ,sBACd,MAAMC,EAAoB,MACtB,WAAAC,CAAYC,GACRV,EAAiBW,KAAMD,EAC3B,
|
|
1
|
+
{"version":3,"names":["registerInstance","state","h","fetchProducts","createErrorHandler","productCache","ivDynamicProductsCss","BLOCK","IvDynamicProducts","constructor","hostRef","this","type","limit","reversed","componenttitle","titletag","collectionhandle","carousel","requestedfields","calltoaction","buttontext","addtocarttext","emptystring","gridlayout","cachettl","stale","products","errorMsg","staleData","errors","component","handlePropChange","loadProducts","componentWillLoad","buildParams","handle","sort","fields","currency","currencyCode","fromWatch","params","ttl","loading","data","getOrSetData","async","fresh","staleWhileRevalidate","transform","metaCheck","getData","isExpired","isStale","err","error","scope","userMessage","devMessage","severity","render","TAG","key","class","length","classModifier","gridTemplateAreas","map","product","cardtype","classmodifier","watchers","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAOC,MAAS,8BACvCC,MAAqB,8BACrBC,OAAyBC,MAAoB,kBAE3D,MAAMC,EAAuB,2iFAE7B,MAAMC,EAAQ,sBACd,MAAMC,EAAoB,MACtB,WAAAC,CAAYC,GACRV,EAAiBW,KAAMD,EAC3B,CACAE,KAAO,aACPC,MAAQ,EACRC,SAAW,MACXC,eACAC,SAAW,KACXC,iBAAmB,MACnBC,SAAW,MACXC,gBACAC,aAAe,MACfC,WACAC,cACAC,YAAc,oBACdC,WACAC,SACAC,MAAQ,KACRC,SAAW,GACXC,SACAC,UAAY,MACZC,OAAS1B,EAAmB,CAAE2B,UAAW,wBACzC,gBAAAC,GAAqBrB,KAAKsB,aAAa,KAAO,CAC9C,uBAAMC,SACIvB,KAAKsB,aAAa,MAC5B,CAEA,WAAAE,GACI,MAAO,CACHC,OAAQzB,KAAKM,kBAAoB,MACjCoB,KAAM1B,KAAKC,KACX0B,OAAQ3B,KAAKQ,gBACbN,MAAOF,KAAKE,MACZ0B,SAAUtC,EAAMuC,aAChB1B,SAAUH,KAAKG,SAEvB,CAEA,kBAAMmB,CAAaQ,GACf,MAAMC,EAAS/B,KAAKwB,cACpB,MAAMQ,EAAMhC,KAAKc,UAAY,IAAO,GAAK,EACzCxB,EAAM2C,SAAWH,EACjB,IACI,MAAMI,QAAaxC,EAAayC,aAAaJ,GAAQK,UACjD,MAAMC,QAAc7C,EAAcQ,KAAKE,MAAOF,KAAKM,iBAAkBN,KAAKC,KAAMD,KAAKQ,gBAAiBR,KAAKG,UAC3G,OAAOkC,CAAK,GACb,CACCL,MACAM,qBAAsBtC,KAAKe,MAC3BwB,UAAYF,GAAUA,IAE1B,MAAMG,EAAY9C,EAAa+C,QAAQV,GACvC/B,KAAKkB,UAAYsB,EAAUE,WAAaF,EAAUG,QAClD3C,KAAKgB,SAAWkB,GAAQ,EAC5B,CACA,MAAOU,GACH5C,KAAKiB,SAAW,0BAChBjB,KAAKmB,OAAOM,OAAO,CACfoB,MAAOD,EACPE,MAAO,eACPC,YAAa,qCACbC,WAAY,8CACZC,SAAU,SAElB,CACA,QACI3D,EAAM2C,QAAU,KACpB,CACJ,CAEA,MAAAiB,GACI,MAAMC,EAAMnD,KAAKK,SACjB,OAAQd,EAAE,MAAO,CAAE6D,IAAK,2CAA4CC,MAAOzD,EAAO,aAAcI,KAAKkB,UAAY,OAAS,SAAWlB,KAAKI,gBAAkBb,EAAE4D,EAAK,CAAEC,IAAK,2CAA4CC,MAAO,GAAGzD,WAAiBI,KAAKI,gBAAiBd,EAAM2C,QAAW1C,EAAE,aAAc,MAASS,KAAKiB,SAAY1B,EAAE,MAAO,CAAE8D,MAAO,GAAGzD,WAAiBI,KAAKiB,UAAajB,KAAKgB,SAASsC,SAAW,EAAK/D,EAAE,MAAO,CAAE8D,MAAO,GAAGzD,WAAiBI,KAAKY,aAAiBrB,EAAE,MAAO,CAAE8D,MAAO,GAAGzD,cAAoBL,EAAE,YAAa,CAAEgE,cAAe,GAAG3D,WAAgB4D,kBAAmBxD,KAAKa,YAAcb,KAAKgB,SAASyC,KAAIC,GAAYnE,EAAE,UAAW,CAAEoE,SAAU,WAAYlD,aAAcT,KAAKS,aAAcC,WAAYV,KAAKU,WAAYC,cAAeX,KAAKW,cAAeuB,KAAMwB,EAASE,cAAe,GAAGhE,cAAoBI,KAAKkB,WAAc3B,EAAE,MAAO,CAAE8D,MAAO,GAAGzD,oBAAyB,YAAa,UAAY,gBAC74B,CAEA,mBAAWiE,GAAa,MAAO,CAC3B5D,KAAQ,CAAC,oBACTC,MAAS,CAAC,oBACVI,iBAAoB,CAAC,oBACrBE,gBAAmB,CAAC,oBACrB,GAEPX,EAAkBiE,MAAQnE,SAEjBE","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as a,h as s}from"./p-C4-XLZHN.js";import{b as e}from"./p-MuJ1P-w6.js";import{c as i,p as r}from"./p-C9w3yU1Z.js";const o=":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";const c="iv-dynamic-products-carousel";const d=class{constructor(a){t(this,a)}type="CREATED_AT";limit=24;reversed=false;componenttitle;titletag="h2";collectionhandle="all";requestedfields;calltoaction=false;buttontext;addtocarttext;emptystring="No products found";cachettl;stale=true;products=[];errorMsg;staleData=false;page=0;itemsPerPage=6;errors=i({component:"iv-dynamic-products-carousel"});handlePropChange(){this.loadProducts(true)}async componentWillLoad(){await this.loadProducts(false)}buildParams(){return{handle:this.collectionhandle,sort:this.type,fields:this.requestedfields,limit:this.limit,currency:a.currencyCode,reversed:this.reversed}}async loadProducts(t){const s=this.buildParams();const i=this.cachettl||1e3*60*5;a.loading=!t;try{const t=await r.getOrSetData(s,(async()=>{const t=await e(this.limit,this.collectionhandle,this.type,this.requestedfields,this.reversed);return t}),{ttl:i,staleWhileRevalidate:this.stale,transform:t=>t});const a=r.getData(s);this.staleData=a.isExpired&&a.isStale;this.products=t||[];this.page=0}catch(t){this.errorMsg="Failed to load products";this.errors.handle({error:t,scope:"loadProducts",userMessage:"Unable to load products right now.",devMessage:"fetchProducts failed in iv-dynamic-products",severity:"error"})}finally{a.loading=false}}pagedProducts(){const t=[];for(let a=0;a<this.products.length;a+=this.itemsPerPage){t.push(this.products.slice(a,a+this.itemsPerPage))}return t}next=()=>{const t=this.pagedProducts().length;if(this.page<t-1)this.page++};prev=()=>{if(this.page>0)this.page--};render(){const t=this.titletag;return s("div",{key:"a0fa6574a48e8aaa6b400282aa9bab55c1babd4f",class:c,"data-stale":this.staleData?"true":"false"},this.componenttitle&&s(t,{key:"9ab7d2ed24377813fbb593f8a845e0c5775309a9",class:`${c}-title`},this.componenttitle),a.loading?s("iv-spinner",null):this.errorMsg?s("div",{class:`${c}-error`},this.errorMsg):this.products.length===0?s("div",{class:`${c}-empty`},this.emptystring):s("div",{class:`${c}-carousel`,"aria-roledescription":"carousel"},s("button",{class:`${c}-nav ${c}-nav-prev`,onClick:this.prev,disabled:this.page===0,"aria-label":"Previous",type:"button"},"‹"),s("div",{class:`${c}-viewport`},s("div",{class:`${c}-track`,style:{transform:`translateX(-${this.page*100}%)`}},this.pagedProducts().map(((t,a)=>s("div",{class:`${c}-slide`,role:"group","aria-label":`Slide ${a+1} of ${this.pagedProducts().length}`},t.map((t=>s("iv-card",{cardtype:"products",calltoaction:this.calltoaction,buttontext:this.buttontext,addtocarttext:this.addtocarttext,data:t,classmodifier:`${c}-card`})))))))),s("button",{class:`${c}-nav ${c}-nav-next`,onClick:this.next,disabled:this.page===this.pagedProducts().length-1,"aria-label":"Next",type:"button"},"›"),s("div",{class:`${c}-status`,"aria-live":"polite"},this.pagedProducts().length>1?`Slide ${this.page+1} of ${this.pagedProducts().length}`:""),this.staleData&&s("div",{class:`${c}-stale-indicator`,"aria-live":"polite"},"Refreshing…")))}static get watchers(){return{type:["handlePropChange"],limit:["handlePropChange"],collectionhandle:["handlePropChange"],requestedfields:["handlePropChange"]}}};d.style=o;export{d as iv_dynamic_products_carousel};
|
|
2
|
+
//# sourceMappingURL=p-980500d4.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","state","h","fetchProducts","createErrorHandler","productCache","ivDynamicProductsCarouselCss","BLOCK","IvDynamicProductsCarousel","constructor","hostRef","this","type","limit","reversed","componenttitle","titletag","collectionhandle","requestedfields","calltoaction","buttontext","addtocarttext","emptystring","cachettl","stale","products","errorMsg","staleData","page","itemsPerPage","errors","component","handlePropChange","loadProducts","componentWillLoad","buildParams","handle","sort","fields","currency","currencyCode","fromWatch","params","ttl","loading","data","getOrSetData","async","fresh","staleWhileRevalidate","transform","metaCheck","getData","isExpired","isStale","err","error","scope","userMessage","devMessage","severity","pagedProducts","chunks","i","length","push","slice","next","pages","prev","render","TAG","key","class","onClick","disabled","style","map","group","role","product","cardtype","classmodifier","watchers"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAOC,MAAS,8BACvCC,MAAqB,8BACrBC,OAAyBC,MAAoB,kBAE3D,MAAMC,EAA+B,osFAErC,MAAMC,EAAQ,+BACd,MAAMC,EAA4B,MAC9B,WAAAC,CAAYC,GACRV,EAAiBW,KAAMD,EAC3B,CACAE,KAAO,
|
|
1
|
+
{"version":3,"names":["registerInstance","state","h","fetchProducts","createErrorHandler","productCache","ivDynamicProductsCarouselCss","BLOCK","IvDynamicProductsCarousel","constructor","hostRef","this","type","limit","reversed","componenttitle","titletag","collectionhandle","requestedfields","calltoaction","buttontext","addtocarttext","emptystring","cachettl","stale","products","errorMsg","staleData","page","itemsPerPage","errors","component","handlePropChange","loadProducts","componentWillLoad","buildParams","handle","sort","fields","currency","currencyCode","fromWatch","params","ttl","loading","data","getOrSetData","async","fresh","staleWhileRevalidate","transform","metaCheck","getData","isExpired","isStale","err","error","scope","userMessage","devMessage","severity","pagedProducts","chunks","i","length","push","slice","next","pages","prev","render","TAG","key","class","onClick","disabled","style","map","group","role","product","cardtype","classmodifier","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}
|
|
@@ -103,9 +103,9 @@ export namespace Components {
|
|
|
103
103
|
*/
|
|
104
104
|
"titletag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
105
105
|
/**
|
|
106
|
-
* @default '
|
|
106
|
+
* @default 'CREATED_AT'
|
|
107
107
|
*/
|
|
108
|
-
"type": 'CREATED' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE';
|
|
108
|
+
"type": 'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE';
|
|
109
109
|
}
|
|
110
110
|
interface IvDynamicProductsCarousel {
|
|
111
111
|
"addtocarttext"?: string;
|
|
@@ -142,9 +142,9 @@ export namespace Components {
|
|
|
142
142
|
*/
|
|
143
143
|
"titletag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
144
144
|
/**
|
|
145
|
-
* @default '
|
|
145
|
+
* @default 'CREATED_AT'
|
|
146
146
|
*/
|
|
147
|
-
"type": 'CREATED' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE';
|
|
147
|
+
"type": 'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE';
|
|
148
148
|
}
|
|
149
149
|
interface IvFilters {
|
|
150
150
|
}
|
|
@@ -641,9 +641,9 @@ declare namespace LocalJSX {
|
|
|
641
641
|
*/
|
|
642
642
|
"titletag"?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
643
643
|
/**
|
|
644
|
-
* @default '
|
|
644
|
+
* @default 'CREATED_AT'
|
|
645
645
|
*/
|
|
646
|
-
"type"?: 'CREATED' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE';
|
|
646
|
+
"type"?: 'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE';
|
|
647
647
|
}
|
|
648
648
|
interface IvDynamicProductsCarousel {
|
|
649
649
|
"addtocarttext"?: string;
|
|
@@ -680,9 +680,9 @@ declare namespace LocalJSX {
|
|
|
680
680
|
*/
|
|
681
681
|
"titletag"?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
682
682
|
/**
|
|
683
|
-
* @default '
|
|
683
|
+
* @default 'CREATED_AT'
|
|
684
684
|
*/
|
|
685
|
-
"type"?: 'CREATED' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE';
|
|
685
|
+
"type"?: 'CREATED' | 'CREATED_AT' | 'BEST_SELLING' | 'PRICE' | 'TITLE' | 'RELEVANCE';
|
|
686
686
|
}
|
|
687
687
|
interface IvFilters {
|
|
688
688
|
}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as a,h as s}from"./p-C4-XLZHN.js";import{b as e}from"./p-MuJ1P-w6.js";import{c as i,p as r}from"./p-C9w3yU1Z.js";const o=":host{display:block}.iv-dynamic-products-carousel{position:relative}.iv-dynamic-products-carousel-carousel{position:relative}.iv-dynamic-products-carousel-viewport{overflow:hidden;width:100%}.iv-dynamic-products-carousel-track{display:flex;width:100%;transition:transform 0.55s cubic-bezier(0.4, 0.7, 0.2, 1);will-change:transform}.iv-dynamic-products-carousel-slide{flex:0 0 100%;box-sizing:border-box;padding:0.25rem 0.5rem;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:1rem;align-items:stretch;grid-auto-rows:1fr}@media (max-width: 1200px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(4, minmax(0, 1fr))}}@media (max-width: 900px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 640px){.iv-dynamic-products-carousel-slide{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.75rem}}.iv-dynamic-products-carousel-card{height:100%;display:flex;flex-direction:column;background:#fff;padding:0.75rem 0.75rem 0.9rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, transform 0.2s ease}.iv-dynamic-products-carousel-card:hover{box-shadow:0 4px 14px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.iv-dynamic-products-carousel-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0, 0, 0, 0.12)}.iv-dynamic-products-carousel-card img,.iv-dynamic-products-carousel-card picture,.iv-dynamic-products-carousel-card .media{width:100%;aspect-ratio:1/1;object-fit:contain;display:flex;align-items:center;justify-content:center;margin:0 0 0.65rem}.iv-dynamic-products-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--iv-carousel-nav-bg, rgba(0, 0, 0, 0.55));color:#fff;border:none;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);transition:background 0.2s ease, transform 0.2s ease;outline:none;z-index:10}.iv-dynamic-products-carousel-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}.iv-dynamic-products-carousel-nav:hover:not(:disabled){background:var(--iv-carousel-nav-bg-hover, rgba(0, 0, 0, 0.75));transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(0, 0, 0, 0.35)}.iv-dynamic-products-carousel-nav:disabled{opacity:0.4;cursor:default}.iv-dynamic-products-carousel-nav-prev{left:0.25rem}.iv-dynamic-products-carousel-nav-next{right:0.25rem}.iv-dynamic-products-carousel-status{margin-top:0.75rem;font-size:0.875rem;text-align:center;color:var(--iv-carousel-status-color, #555)}.iv-dynamic-products-carousel-viewport::-webkit-scrollbar{display:none}.iv-dynamic-products-carousel-viewport{-ms-overflow-style:none;scrollbar-width:none}";const c="iv-dynamic-products-carousel";const d=class{constructor(a){t(this,a)}type="CREATED";limit=24;reversed=false;componenttitle;titletag="h2";collectionhandle="all";requestedfields;calltoaction=false;buttontext;addtocarttext;emptystring="No products found";cachettl;stale=true;products=[];errorMsg;staleData=false;page=0;itemsPerPage=6;errors=i({component:"iv-dynamic-products-carousel"});handlePropChange(){this.loadProducts(true)}async componentWillLoad(){await this.loadProducts(false)}buildParams(){return{handle:this.collectionhandle,sort:this.type,fields:this.requestedfields,limit:this.limit,currency:a.currencyCode,reversed:this.reversed}}async loadProducts(t){const s=this.buildParams();const i=this.cachettl||1e3*60*5;a.loading=!t;try{const t=await r.getOrSetData(s,(async()=>{const t=await e(this.limit,this.collectionhandle,this.type,this.requestedfields,this.reversed);return t}),{ttl:i,staleWhileRevalidate:this.stale,transform:t=>t});const a=r.getData(s);this.staleData=a.isExpired&&a.isStale;this.products=t||[];this.page=0}catch(t){this.errorMsg="Failed to load products";this.errors.handle({error:t,scope:"loadProducts",userMessage:"Unable to load products right now.",devMessage:"fetchProducts failed in iv-dynamic-products",severity:"error"})}finally{a.loading=false}}pagedProducts(){const t=[];for(let a=0;a<this.products.length;a+=this.itemsPerPage){t.push(this.products.slice(a,a+this.itemsPerPage))}return t}next=()=>{const t=this.pagedProducts().length;if(this.page<t-1)this.page++};prev=()=>{if(this.page>0)this.page--};render(){const t=this.titletag;return s("div",{key:"330b8e6b73cfe2ecd32108162340aa12c3b876c4",class:c,"data-stale":this.staleData?"true":"false"},this.componenttitle&&s(t,{key:"5bf5fdcd1f41d62986975b3e9ff4506b68ee51e5",class:`${c}-title`},this.componenttitle),a.loading?s("iv-spinner",null):this.errorMsg?s("div",{class:`${c}-error`},this.errorMsg):this.products.length===0?s("div",{class:`${c}-empty`},this.emptystring):s("div",{class:`${c}-carousel`,"aria-roledescription":"carousel"},s("button",{class:`${c}-nav ${c}-nav-prev`,onClick:this.prev,disabled:this.page===0,"aria-label":"Previous",type:"button"},"‹"),s("div",{class:`${c}-viewport`},s("div",{class:`${c}-track`,style:{transform:`translateX(-${this.page*100}%)`}},this.pagedProducts().map(((t,a)=>s("div",{class:`${c}-slide`,role:"group","aria-label":`Slide ${a+1} of ${this.pagedProducts().length}`},t.map((t=>s("iv-card",{cardtype:"products",calltoaction:this.calltoaction,buttontext:this.buttontext,addtocarttext:this.addtocarttext,data:t,classmodifier:`${c}-card`})))))))),s("button",{class:`${c}-nav ${c}-nav-next`,onClick:this.next,disabled:this.page===this.pagedProducts().length-1,"aria-label":"Next",type:"button"},"›"),s("div",{class:`${c}-status`,"aria-live":"polite"},this.pagedProducts().length>1?`Slide ${this.page+1} of ${this.pagedProducts().length}`:""),this.staleData&&s("div",{class:`${c}-stale-indicator`,"aria-live":"polite"},"Refreshing…")))}static get watchers(){return{type:["handlePropChange"],limit:["handlePropChange"],collectionhandle:["handlePropChange"],requestedfields:["handlePropChange"]}}};d.style=o;export{d as iv_dynamic_products_carousel};
|
|
2
|
-
//# sourceMappingURL=p-2d5d9359.entry.js.map
|