@salla.sa/twilight-components
Version:
Salla Web Component
60 lines (55 loc) • 2.88 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
const sallaOrderEditProductCardCss = ":host{display:block;min-width:0}";
const SallaOrderEditProductCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEditProductCard extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.orderEditProductSelected = createEvent(this, "orderEditProductSelected", 7);
}
get productData() {
if (!this.product) {
return {};
}
if (typeof this.product === 'object') {
return this.product;
}
try {
return JSON.parse(this.product);
}
catch (_error) {
return {};
}
}
handleSelectProduct() {
this.orderEditProductSelected.emit({ product: this.productData });
}
render() {
const product = this.productData;
const productName = product?.name || salla.lang.getWithDefault('common.elements.product', 'منتج');
const price = product?.price;
return (h(Host, { key: '9f9278890bd821cf7b1caecdf4484a26273fe407' }, h("button", { key: '6d28490ff098143000fff6543702ba805e997077', type: "button", class: "s-order-edit-product-card", onClick: () => this.handleSelectProduct() }, h("div", { key: 'b7399553a7b79303b8bae8c9b624f460fe761946', class: "s-order-edit-product-card-media" }, product?.image?.url ? (h("img", { src: product.image.url, alt: product.image.alt || productName, class: "s-order-edit-product-card-image" })) : (h("div", { class: "s-order-edit-product-card-placeholder" }, h("i", { class: "sicon-shopping-bag" })))), h("div", { key: '5cd57cf519f5d681116336cc6db8aed3569b761d', class: "s-order-edit-product-card-content" }, h("h3", { key: '51312a3708d95f3d6d654099b25a2a4644c70aaa', class: "s-order-edit-product-card-title" }, productName), price != null && (h("p", { key: 'c09988f616198ae0d527e994e5c55e8b0a01c218', class: "s-order-edit-product-card-price", innerHTML: salla.money(price) }))))));
}
static get style() { return sallaOrderEditProductCardCss; }
}, [0, "salla-order-edit-product-card", {
"product": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-order-edit-product-card"];
components.forEach(tagName => { switch (tagName) {
case "salla-order-edit-product-card":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaOrderEditProductCard$1);
}
break;
} });
}
defineCustomElement$1();
const SallaOrderEditProductCard = SallaOrderEditProductCard$1;
const defineCustomElement = defineCustomElement$1;
export { SallaOrderEditProductCard, defineCustomElement };