@salla.sa/twilight-components
Version:
Salla Web Component
119 lines (114 loc) • 4.62 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
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$1 = /*@__PURE__*/ proxyCustomElement(class SallaProductCardEmbed extends HTMLElement {
constructor() {
super();
this.__registerHost();
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 this; }
static get style() { return sallaProductCardEmbedCss; }
}, [0, "salla-product-card-embed", {
"productId": [8, "product-id"],
"align": [513],
"loading": [32],
"hasError": [32],
"productData": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-product-card-embed"];
components.forEach(tagName => { switch (tagName) {
case "salla-product-card-embed":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaProductCardEmbed$1);
}
break;
} });
}
defineCustomElement$1();
const SallaProductCardEmbed = SallaProductCardEmbed$1;
const defineCustomElement = defineCustomElement$1;
export { SallaProductCardEmbed, defineCustomElement };