@salla.sa/twilight-components
Version:
Salla Web Component
134 lines (128 loc) • 8.95 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$8 } from './salla-loading2.js';
import { d as defineCustomElement$7 } from './salla-modal2.js';
import { d as defineCustomElement$6 } from './salla-placeholder2.js';
import { d as defineCustomElement$5 } from './salla-skeleton2.js';
import { d as defineCustomElement$4 } from './salla-tab-content2.js';
import { d as defineCustomElement$3 } from './salla-tab-header2.js';
import { d as defineCustomElement$2 } from './salla-tabs2.js';
var PencilRuler = `<!-- 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>pencil-ruler</title>
<path d="M3.057 11.609c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l6.667-6.667c0.521-0.521 0.521-1.364 0-1.885l-1.285-1.285c-1.143-1.143-2.661-1.772-4.276-1.772-1.616 0-3.135 0.629-4.276 1.772-1.143 1.141-1.772 2.66-1.772 4.276 0 1.615 0.629 3.135 1.772 4.276zM3.657 3.657c1.277-1.277 3.504-1.277 4.781 0l0.343 0.343-4.781 4.781-0.343-0.343c-0.639-0.639-0.991-1.488-0.991-2.391s0.352-1.752 0.991-2.391zM29.317 20.972c-0.2-0.707-0.932-1.119-1.645-0.921-0.709 0.2-1.121 0.937-0.921 1.645l1.987 7.041-7.041-1.987c-0.707-0.195-1.444 0.213-1.645 0.921-0.2 0.708 0.212 1.445 0.921 1.645l9.333 2.633c0.119 0.032 0.24 0.049 0.361 0.049 0.349 0 0.689-0.137 0.943-0.391 0.341-0.341 0.472-0.84 0.34-1.305zM31.609 8.772l-8.381-8.381c-0.5-0.5-1.385-0.5-1.885 0l-8.171 8.171s-0.001 0-0.001 0.001 0 0.001-0.001 0.001l-4.607 4.607s0 0-0.001 0 0 0 0 0.001l-8.171 8.171c-0.251 0.249-0.391 0.588-0.391 0.943 0 0.353 0.14 0.693 0.391 0.943l8.381 8.381c0.249 0.251 0.589 0.391 0.943 0.391s0.693-0.14 0.943-0.391l20.952-20.952c0.521-0.521 0.521-1.365 0-1.885zM9.715 28.781l-6.495-6.496 1.676-1.676 1.851 1.851c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885l-1.851-1.851 2.724-2.724 3.008 3.008c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885l-3.008-3.008 2.724-2.724 1.851 1.851c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.52 0.521-1.364 0-1.885l-1.851-1.851 2.724-2.724 3.008 3.008c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.365 0-1.885l-3.008-3.008 1.677-1.677 6.496 6.496z"></path>
</svg>
`;
const sallaProductSizeGuideCss = "";
const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class SallaProductSizeGuide extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.hasError = false;
salla.event.on('size-guide::open', (product_id) => this.open(product_id));
salla.lang.onLoaded(() => {
this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
this.modal_title = salla.lang.get('pages.products.size_guides');
});
}
/**
* Show the size-guide modal window
*/
async open(product_id) {
this.modal.setTitle(this.modal_title);
this.modal.open();
return await salla.api.withoutNotifier(() => salla.product.getSizeGuides(product_id))
.then((response) => {
this.guides = response.data;
})
.catch(e => {
console.log(e);
this.hasError = true;
this.placeholder_description = e.response?.data?.error?.message || e.response?.data;
})
.finally(() => this.modal.stopLoading());
}
/**
*
* Hide the size-guide modal window
*/
async close() {
return this.modal.close();
}
showPlaceholder() {
return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
}
render() {
return (h("salla-modal", { key: 'ee92769c8a6ef18fa3817c39dbf26a6a4bff23a8', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '3d969a0a2c77b8f873dcb934ed2421537cb964e4', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: 'e018072d407a6c44f8481c08efc59a991a0eb3fd', slot: "loading" }, h("div", { key: '0667c648322893ad770faf98cebe245917ff63f4', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '758a611fa61eda549a6decc541c11da1115a2f2f', height: '15px', width: '25%' }), h("div", { key: '8ab9e86a59b4cbb9a03458599a7fef9bd8243573', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '01c47a9a1776c53ce84034bb0c0decf8485fcd6a', height: '40px' }), h("salla-skeleton", { key: '65aee0267fc69e08993fe57df2722dd5b90900ae', height: '40px' }), h("salla-skeleton", { key: '250836e73e41353588a08c15ae619730617a96d3', height: '40px' }), h("salla-skeleton", { key: 'f69fe0eac766ecb7441ea41b43e679921211e8c1', height: '40px' })), h("div", { key: '5e9d83171dba98fb4beb8ab149ae7f075f528c26', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '259f2f0fe3e0e4ed568119ca3967541785b4875d', height: '15px', width: '25%' }), h("salla-skeleton", { key: '0f66a4bc8e1a426f19787775e39fdc526e5635ab', height: '10px', width: '75%' }), h("salla-skeleton", { key: 'ae62c34708c5f4b6ece5eb3caf13b867b2c1e17c', height: '10px', width: '50%' }), h("salla-skeleton", { key: 'c3a03c44c2452d4dd37eaf6d3927e2ae8ef885fd', height: '10px', width: '75%' }), h("salla-skeleton", { key: 'fb42a6a8dd803f8cef6e5990a5f2e17e6e87bbfc', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'b972cba0a06ae46f09fa4c8a352a780e9b620445', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'ac3d5c03485c0d64dc3d868c8f1588565167b60e', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'ec3a83f4eb22bc42d6df5f37bb04b9da54edf309', height: '10px', width: '45%' }), h("salla-skeleton", { key: '62e8d10fae559f7abe3ed3088c03e4fa5e2230b4', height: '10px', width: '30%' })))), h("slot", { key: '59ab1d26dde5103727840c81c4e855638403bf13', name: "header" }), !this.hasError && !!this.guides ?
[
h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
]
: this.showPlaceholder(), h("slot", { key: 'efd65db973af6678c45c97b5021702dc0585f621', name: "footer" })));
}
get host() { return this; }
static get style() { return sallaProductSizeGuideCss; }
}, [4, "salla-product-size-guide", {
"guides": [32],
"productId": [32],
"placeholder_title": [32],
"placeholder_description": [32],
"modal_title": [32],
"hasError": [32],
"open": [64],
"close": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-product-size-guide", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-tab-content", "salla-tab-header", "salla-tabs"];
components.forEach(tagName => { switch (tagName) {
case "salla-product-size-guide":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaProductSizeGuide$1);
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "salla-placeholder":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "salla-skeleton":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-tab-content":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-tab-header":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-tabs":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const SallaProductSizeGuide = SallaProductSizeGuide$1;
const defineCustomElement = defineCustomElement$1;
export { SallaProductSizeGuide, defineCustomElement };