@salla.sa/twilight-components
Version:
Salla Web Component
126 lines (122 loc) • 5.72 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$8 } from './salla-accordion2.js';
import { d as defineCustomElement$7 } from './salla-accordion-body2.js';
import { d as defineCustomElement$6 } from './salla-accordion-head2.js';
import { d as defineCustomElement$5 } from './salla-button2.js';
import { d as defineCustomElement$4 } from './salla-loading2.js';
import { d as defineCustomElement$3 } from './salla-map2.js';
import { d as defineCustomElement$2 } from './salla-modal2.js';
import { d as defineCustomElement$1 } from './salla-order-details-options2.js';
const sallaOrderDetailsMultipleBundleProductCss = "";
const SallaproductDetailsMultipleBundleProduct = /*@__PURE__*/ proxyCustomElement(class SallaproductDetailsMultipleBundleProduct extends HTMLElement {
constructor() {
super();
this.__registerHost();
/** Placeholder image URL when product image is not available */
this.placeholderImage = salla.url.cdn('images/s-empty.png');
}
getProductImage() {
if (!this.productDetails?.image) {
return this.placeholderImage;
}
// Handle both string and object types for image
if (typeof this.productDetails.image === 'string') {
return this.productDetails.image;
}
return (this.productDetails.image.url || this.placeholderImage || salla.url.cdn('images/s-empty.png'));
}
getProductImageAlt() {
if (!this.productDetails?.image || typeof this.productDetails.image === 'string') {
return this.productDetails?.name || '';
}
return this.productDetails.image.alt || this.productDetails?.name || '';
}
getAccordionId() {
return `accordion-${this.productDetails?.id || 'default'}`;
}
getAccordionKey() {
return this.productDetails?.id || 'default';
}
shouldBeCollapsible() {
if (this.collapsible !== undefined) {
return this.collapsible;
}
return this.productDetails?.options?.length > 0;
}
renderOptions() {
if (!this.productDetails?.options?.length) {
return null;
}
return (h("salla-accordion-body", null, h("div", { class: "s-order-details-options" }, h("salla-order-details-options", { options: this.productDetails.options }))));
}
render() {
if (!this.productDetails) {
return null;
}
const collapsibleState = this.shouldBeCollapsible();
return (h(Host, { class: "s-order-details-bundle-wrapper" }, h("salla-accordion", { key: this.getAccordionKey(), collapsed: false, bordered: true, collapsible: collapsibleState, id: this.getAccordionId(), size: "sm" }, h("salla-accordion-head", null, h("div", { class: "s-order-details-product" }, h("div", { class: "s-order-details-product-content" }, h("div", { class: "s-order-details-product-info" }, h("div", { class: "s-order-details-product-image" }, h("img", { src: this.getProductImage(), alt: this.getProductImageAlt() })), h("div", { class: "s-order-details-product-details" }, h("a", { href: this.productDetails?.url || '#', class: "s-order-details-product-name" }, this.productDetails?.name || ''), this.productDetails?.quantity && (h("span", { class: "s-order-details-product-quantity" }, "\u00D7", this.productDetails.quantity))))))), this.renderOptions())));
}
static get style() { return sallaOrderDetailsMultipleBundleProductCss; }
}, [0, "salla-order-details-multiple-bundle-product", {
"productDetails": [16, "product-details"],
"collapsible": [4],
"placeholderImage": [1, "placeholder-image"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-order-details-multiple-bundle-product", "salla-accordion", "salla-accordion-body", "salla-accordion-head", "salla-button", "salla-loading", "salla-map", "salla-modal", "salla-order-details-options"];
components.forEach(tagName => { switch (tagName) {
case "salla-order-details-multiple-bundle-product":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaproductDetailsMultipleBundleProduct);
}
break;
case "salla-accordion":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "salla-accordion-body":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "salla-accordion-head":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-map":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "salla-order-details-options":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { SallaproductDetailsMultipleBundleProduct as S, defineCustomElement as d };