@salla.sa/twilight-components
Version:
Salla Web Component
144 lines (139 loc) • 7.18 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$4 } from './salla-button2.js';
import { d as defineCustomElement$3 } from './salla-loading2.js';
import { d as defineCustomElement$2 } from './salla-map2.js';
import { d as defineCustomElement$1 } from './salla-modal2.js';
var copyIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>swap-fill</title>
<path d="M28 10.667h-2.667c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h2.667c0.735 0 1.333 0.597 1.333 1.333v13.333c0 0.736-0.599 1.333-1.333 1.333h-13.333c-0.735 0-1.333-0.597-1.333-1.333v-2.667c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.667c0 2.205 1.795 4 4 4h13.333c2.205 0 4-1.795 4-4v-13.333c0-2.205-1.795-4-4-4zM21.333 17.333v-13.333c0-2.205-1.795-4-4-4h-13.333c-2.205 0-4 1.795-4 4v13.333c0 2.205 1.795 4 4 4h13.333c2.205 0 4-1.795 4-4zM2.667 17.333v-13.333c0-0.736 0.599-1.333 1.333-1.333h13.333c0.735 0 1.333 0.597 1.333 1.333v13.333c0 0.736-0.599 1.333-1.333 1.333h-13.333c-0.735 0-1.333-0.597-1.333-1.333z"></path>
</svg>
`;
const sallaOrderDetailsOptionsCss = "";
const SallaOrderDetailsOptions = /*@__PURE__*/ proxyCustomElement(class SallaOrderDetailsOptions extends HTMLElement {
constructor() {
super();
this.__registerHost();
/** Whether to show the options in a bordered container */
this.bordered = true;
/** Placeholder image URL when option image is not available */
this.placeholderImage = 'images/placeholder.png';
/** Parsed options data */
this.optionsData = [];
}
componentWillLoad() {
this.parseOptionsData();
}
componentWillUpdate() {
this.parseOptionsData();
}
parseOptionsData() {
if (!this.options) {
this.optionsData = [];
return;
}
if (typeof this.options === 'string') {
try {
this.optionsData = JSON.parse(this.options);
}
catch (e) {
// Invalid options JSON, fallback to empty array
this.optionsData = [];
}
}
else {
this.optionsData = Array.isArray(this.options) ? this.options : [];
}
}
renderOptionValue(option) {
// Handle image options
if (option.is_image) {
return (h("div", { class: "s-order-details-option-image-container" }, h("a", { href: option.value, target: "_blank" }, h("img", { class: "s-order-details-option-image", src: option.value || this.placeholderImage, alt: option.name }))));
}
// Handle color options
if (option.color) {
return (h("span", { title: option.value, class: "s-order-details-option-color-swatch", style: { backgroundColor: option.color } }));
}
// Handle file options
if (option.is_file) {
return (h("a", { href: option.value, target: "_blank", class: "s-order-details-option-file-link" }, salla.lang.get('common.elements.attachments')));
}
// Handle color picker options
if (option.is_color_picker) {
return (h("div", { class: "s-order-details-option-color-picker" }, h("div", { class: "s-order-details-option-color-picker-content" }, h("span", { class: "s-order-details-option-color-picker-text" }, option.value), h("span", { class: "s-order-details-option-color-picker-swatch", style: { backgroundColor: option.value, width: '1rem' } })), h("salla-button", { onClick: e => this.copyToClipboard(e, option.value), shape: "link", class: "s-order-details-option-color-picker-button" }, h("span", { class: "s-order-details-option-color-copy-icon", innerHTML: copyIcon }))));
}
// Handle map options
if (option.is_map && option.latitude && option.longitude) {
return (h("salla-map", { id: `location_map_${option.id}`, class: `map_${option.id}`, zoom: 15, readonly: true, lat: option.latitude, lng: option.longitude }, h("div", { slot: "button" }, h("button", { type: "button", class: "s-order-details-option-map-button", onClick: () => this.openMap(option.id) }, salla.lang.get('common.elements.show_location')))));
}
// Default text value
return (h("span", { class: "s-order-details-option-default-text" }, option.display_value || option.value));
}
copyToClipboard(event, content) {
event.preventDefault();
if (navigator.clipboard) {
navigator.clipboard.writeText(content);
}
}
openMap(optionId) {
const mapElement = document.querySelector(`salla-map.map_${optionId}`);
if (mapElement && mapElement.open) {
mapElement.open();
}
}
render() {
if (!this.optionsData.length) {
return null;
}
const containerClasses = this.bordered
? 's-order-details-options-container'
: 's-order-details-options-container-borderless';
return (h(Host, { class: "s-order-details-options-wrapper" }, h("h2", { class: "s-order-details-options-title" }, salla.lang.get('pages.cart.item_options')), h("div", { class: containerClasses }, h("dl", { class: "s-order-details-options-list" }, this.optionsData.map(option => (h("div", { key: option.id, class: "s-order-details-options-item" }, h("dt", { class: "s-order-details-options-item-name" }, option.name, ":"), h("dd", { class: option.is_image
? 's-order-details-options-item-value-image'
: 's-order-details-options-item-value-text' }, this.renderOptionValue(option)))))))));
}
static get style() { return sallaOrderDetailsOptionsCss; }
}, [0, "salla-order-details-options", {
"options": [1],
"bordered": [4],
"placeholderImage": [1, "placeholder-image"],
"optionsData": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-order-details-options", "salla-button", "salla-loading", "salla-map", "salla-modal"];
components.forEach(tagName => { switch (tagName) {
case "salla-order-details-options":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaOrderDetailsOptions);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-map":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { SallaOrderDetailsOptions as S, defineCustomElement as d };