@salla.sa/twilight-components
Version:
Salla Web Component
95 lines (91 loc) • 3.82 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, H as Host, a as getElement } from './index-BHYtfMwX.js';
const sallaProductCardEmbedCss = "@charset \"UTF-8\";:host{display:inline-block;vertical-align:top;max-width:12rem}:host([align=left]){float:inline-start;margin-block-end:1em;margin-inline-end:1em;shape-outside:margin-box}:host([align=right]){float:inline-end;margin-block-end:1em;margin-inline-start:1em;shape-outside:margin-box}:host([align=center]){display:block;clear:both;margin-block:1em;margin-inline:auto}.s-product-card-embed-card{display:block}";
const SallaProductCardEmbed = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.loading = false;
this.hasError = false;
this.productData = null;
}
async componentWillLoad() {
await salla.onReady();
await this.fetchProduct();
}
componentDidLoad() {
this.ensureParentContainsFloats();
}
componentDidRender() {
this.renderCardNode();
}
/**
* The host floats for `align="left"|"right"`. If the parent is a plain
* block element with visible overflow it won't contain those floats,
* letting them spill into following siblings (e.g. a comments section).
* Promote such parents to a block formatting context.
*/
ensureParentContainsFloats() {
if (this.align !== 'left' && this.align !== 'right')
return;
const parent = this.hostEl?.parentElement;
if (!parent)
return;
const cs = getComputedStyle(parent);
if (cs.display === 'block' && cs.overflow === 'visible' && cs.float === 'none') {
parent.style.display = 'flow-root';
}
}
fetchProduct() {
if (!this.productId) {
this.productData = null;
this.loading = false;
this.hasError = false;
return;
}
this.loading = true;
this.hasError = false;
return salla.api
.withoutNotifier(() => salla.product.api.getDetails(this.productId))
.then((response) => {
const data = response.data;
this.productData = data ?? null;
this.hasError = !data;
})
.catch((_error) => {
this.productData = null;
this.hasError = true;
})
.finally(() => {
this.loading = false;
});
}
renderCardNode() {
if (!this.cardContainer)
return;
this.cardContainer.textContent = '';
if (!this.productData || this.loading || this.hasError)
return;
const tag = window.customElements.get('custom-salla-product-card')
? 'custom-salla-product-card'
: 'salla-product-card';
const card = document.createElement(tag);
card.product = this.productData;
this.cardContainer.appendChild(card);
}
render() {
const cardClasses = {
's-product-card-embed-card': true,
's-product-card-embed-card-align-left': this.align === 'left',
's-product-card-embed-card-align-right': this.align === 'right',
's-product-card-embed-card-align-center': this.align === 'center',
};
return (h(Host, { key: '4fcd0b6e5da26ac976b0f3c5c031b614dc9d04b1' }, this.hasError && h("span", { key: '55b4a2649d4912b61f6b75e3c2437bfaee7863e0', class: "s-product-card-embed-fallback" }), h("div", { key: 'ac5882e5dd36ac28cc6e5a24186156c7cadda820', class: cardClasses, ref: (el) => {
this.cardContainer = el;
} })));
}
get hostEl() { return getElement(this); }
};
SallaProductCardEmbed.style = sallaProductCardEmbedCss;
export { SallaProductCardEmbed as salla_product_card_embed };