@salla.sa/twilight-components
Version:
Salla Web Component
140 lines (136 loc) • 8.42 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { K as KeyBoardArrowLeftIcon, a as KeyBoardArrowRightIcon } from './keyboard_arrow_right.js';
import { d as defineCustomElement$1 } from './salla-slider2.js';
const sallaMultipleBundleProductSliderCss = "";
const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class SallaMultipleBundleProductSlider extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.productSelected = createEvent(this, "productSelected", 7);
this.productOptionsSelected = createEvent(this, "productOptionsSelected", 7);
/** A dictionary tracking which product IDs are currently selected per section. */
this.selectedProducts = {};
this.savedOptionsByInstance = {};
this.handleProductClick = (product, productIndex) => {
// Find the checkbox input for this product
const checkboxId = this.generateEventName(this.section.id, productIndex);
const checkbox = document.getElementById(checkboxId);
if (!checkbox)
return;
if (checkbox) {
const willBeChecked = !checkbox.checked;
if (!willBeChecked) {
this.dispatchClearOptionsEvent(product, productIndex);
this.clearSavedOptionsState(this.section.id, productIndex);
}
// Toggle the checkbox state
checkbox.checked = willBeChecked;
// Dispatch a change event to trigger form validation/submission
requestAnimationFrame(() => {
const changeEvent = new window.Event('change', { bubbles: true });
checkbox.dispatchEvent(changeEvent);
});
}
this.productSelected.emit({
product,
sectionId: this.section.id,
});
};
this.handleOptionsClick = (product) => {
this.productOptionsSelected.emit({
product,
sectionId: this.section.id,
});
};
}
getProductInstanceKey(sectionId, productIndex) {
return `${sectionId}::${productIndex}`;
}
dispatchClearOptionsEvent(product, productIndex) {
salla.event.dispatch('multiple-bundle-product-modal::clear-options', {
productId: product.id,
sectionId: this.section.id,
sectionIndex: this.sectionIndex,
productIndex,
});
}
handleOptionsSaved(event) {
const detail = event.detail;
if (!detail)
return;
const { sectionId, productIndex, selectedOptions } = detail;
if (sectionId == null || sectionId !== this.section?.id)
return;
if (productIndex == null || Number.isNaN(productIndex))
return;
const key = this.getProductInstanceKey(sectionId, productIndex);
const hasOptions = !!selectedOptions?.length;
if (hasOptions) {
this.savedOptionsByInstance = {
...this.savedOptionsByInstance,
[key]: true,
};
}
else if (this.savedOptionsByInstance[key]) {
const updatedState = { ...this.savedOptionsByInstance };
delete updatedState[key];
this.savedOptionsByInstance = updatedState;
}
}
clearSavedOptionsState(sectionId, productIndex) {
const key = this.getProductInstanceKey(sectionId, productIndex);
if (!this.savedOptionsByInstance[key])
return;
const updatedState = { ...this.savedOptionsByInstance };
delete updatedState[key];
this.savedOptionsByInstance = updatedState;
}
generateEventName(sectionId, productIndex) {
return `bundle[${sectionId}][${productIndex}][id]`;
}
render() {
return (h(Host, { key: '336a3bcf504a178ee207b40b3b7fac5d26e00f91' }, h("salla-slider", { key: '004d1c3f644bfd015efe2ffc21a78e912c5d0647', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: 'fda4544764b9bf2eb95d408179c1abc252f50243', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
const hasSavedOptions = this.savedOptionsByInstance[this.getProductInstanceKey(this.section.id, productIndex)];
const optionsButtonLabel = hasSavedOptions
? salla.lang.getWithDefault('pages.products.edit_selected_options', 'تعديل الخيارات')
: salla.lang.get('pages.products.choose_from_options');
let optionsArrowIcon = salla.config.get('theme.is_rtl', true)
? KeyBoardArrowLeftIcon
: KeyBoardArrowRightIcon;
return (h("div", { class: `s-multiple-bundle-product-slide-one-third ${product.quantity == 0
? 's-multiple-bundle-product-slide-one-third-disabled'
: ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.regular_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
})))));
}
get host() { return this; }
static get style() { return sallaMultipleBundleProductSliderCss; }
}, [0, "salla-multiple-bundle-product-slider", {
"section": [16],
"sectionIndex": [2, "section-index"],
"selectedProducts": [16, "selected-products"],
"savedOptionsByInstance": [32]
}, [[4, "optionsSaved", "handleOptionsSaved"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-multiple-bundle-product-slider", "salla-slider"];
components.forEach(tagName => { switch (tagName) {
case "salla-multiple-bundle-product-slider":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaMultipleBundleProductSlider);
}
break;
case "salla-slider":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { SallaMultipleBundleProductSlider as S, defineCustomElement as d };