@salla.sa/twilight-components
Version:
Salla Web Component
125 lines (124 loc) • 6.99 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h } from "@stencil/core";
import PencilRuler from "../../assets/svg/pencil-ruler.svg";
/**
* @slot header - The upper section of the component.Empty by default.
* @slot footer - The bottom section of the component.Empty by default.
*/
export class SallaProductSizeGuide {
constructor() {
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 => {
var _a, _b, _c, _d;
console.log(e);
this.hasError = true;
this.placeholder_description = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.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: '699786199af2cdc74818aa57551bf2b22c5f9264', 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: 'b95eda5781405930bc46d90e13fcac7dbd8bb180', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '5ea35ef0600015befd245dda231cacc5f6e5d010', slot: "loading" }, h("div", { key: 'e431c0580bbb57402d18c0047ed8dda33230f4aa', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '7e89402e3f035f2f18e6af9570be29ef04418ce0', height: '15px', width: '25%' }), h("div", { key: '8b4a14c39772eb4d7a08605215c0e96766b770cb', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '6b1c4a2c4d84529a4b626e685f58824014025fed', height: '40px' }), h("salla-skeleton", { key: '2d0b2ac3e7bca353f152ca364613cb076ab4650f', height: '40px' }), h("salla-skeleton", { key: '1f08827866f66f9e22d9f8323a3e62bf07d7157e', height: '40px' }), h("salla-skeleton", { key: '5d5b9b2761b3b31b6f2916ff664d7f5a5dfa0739', height: '40px' })), h("div", { key: 'f25b2874b58bf70fd2becc3ddd97dcb23421e0d6', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '6c420337744cb02d96ab42aa17b3f53df924c043', height: '15px', width: '25%' }), h("salla-skeleton", { key: '9a3ef8d6828942bf1c8678ff4293c4218d68311b', height: '10px', width: '75%' }), h("salla-skeleton", { key: 'a3b61294dc57ee19e1345578f2b0b63aecfaecb1', height: '10px', width: '50%' }), h("salla-skeleton", { key: '90bba66715d6408933ff496d6f58350833897a79', height: '10px', width: '75%' }), h("salla-skeleton", { key: '445d1a4f433cbb5b864179a8c83b4ea99628b5a7', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'b4009ded4c3d968bba45abf54ba44daf1d4790f0', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'ebb6995df4f9dc4a62e7e1ba51758d416022ef1e', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'dc07d721f1856f15767c6b6660040e4fe2449862', height: '10px', width: '45%' }), h("salla-skeleton", { key: 'c359c49a38626b47c1a6248988f3c840e85953d4', height: '10px', width: '30%' })))), h("slot", { key: 'be558946a3c514e5e3ece9995fa547c72583cab8', 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: '347f1d9d7e946215c3c3203994cba0d9a9c2f66d', name: "footer" })));
}
static get is() { return "salla-product-size-guide"; }
static get originalStyleUrls() {
return {
"$": ["salla-product-size-guide.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-product-size-guide.css"]
};
}
static get states() {
return {
"guides": {},
"productId": {},
"placeholder_title": {},
"placeholder_description": {},
"modal_title": {},
"hasError": {}
};
}
static get methods() {
return {
"open": {
"complexType": {
"signature": "(product_id: number) => Promise<any>",
"parameters": [{
"name": "product_id",
"type": "number",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<any>"
},
"docs": {
"text": "Show the size-guide modal window",
"tags": []
}
},
"close": {
"complexType": {
"signature": "() => Promise<HTMLElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
},
"return": "Promise<HTMLElement>"
},
"docs": {
"text": "\nHide the size-guide modal window",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=salla-product-size-guide.js.map