@salla.sa/twilight-components
Version:
Salla Web Component
234 lines (229 loc) • 16.2 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { R as Rate } from './star2.js';
import { d as defineCustomElement$9 } from './salla-add-product-button2.js';
import { d as defineCustomElement$8 } from './salla-button2.js';
import { d as defineCustomElement$7 } from './salla-count-down2.js';
import { d as defineCustomElement$6 } from './salla-loading2.js';
import { d as defineCustomElement$5 } from './salla-modal2.js';
import { d as defineCustomElement$4 } from './salla-product-availability2.js';
import { d as defineCustomElement$3 } from './salla-progress-bar2.js';
import { d as defineCustomElement$2 } from './salla-quick-buy2.js';
import { d as defineCustomElement$1 } from './salla-tel-input2.js';
var Heart = `<!-- 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>heart</title>
<path d="M23.333 2.267c-3.547 0-5.779 1.605-7.333 3.061-1.555-1.456-3.787-3.061-7.333-3.061-5.955 0-8.667 5.045-8.667 9.733 0 8.503 10.147 14.735 15.513 16.841 0.156 0.061 0.321 0.092 0.487 0.092s0.331-0.031 0.487-0.092c5.367-2.107 15.513-8.339 15.513-16.841 0-4.688-2.712-9.733-8.667-9.733zM16 26.161c-5.537-2.309-13.333-7.799-13.333-14.161 0-3.517 1.856-7.067 6-7.067 2.983 0 4.656 1.451 6.384 3.203 0.5 0.508 1.399 0.508 1.899 0 1.728-1.752 3.401-3.203 6.384-3.203 4.144 0 6 3.549 6 7.067 0 6.363-7.796 11.852-13.333 14.161z"></path>
</svg>
`;
const sallaProductCardCss = ".s-product-card-image::before{font-family:\"sallaicons\";content:\"\\ec1f\" !important}.s-product-card-content-pie-svg circle{transition:stroke-dashoffset 1s linear;-webkit-transition:stroke-dashoffset 1s linear;-moz-transition:stroke-dashoffset 1s linear;-ms-transition:stroke-dashoffset 1s linear;-o-transition:stroke-dashoffset 1s linear;stroke:#E8EDF2;stroke-width:2px;stroke-linecap:round;fill:none}.s-product-card-content-pie-svg-bar{stroke:var(--color-primary) !important;stroke-dasharray:100 100;stroke-dashoffset:100}";
const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard extends HTMLElement {
constructor() {
super();
this.__registerHost();
// Store configs
salla.onReady(() => {
this.fitImageHeight = salla.config.get('store.settings.product.fit_type');
salla.wishlist.event.onAdded((_res, id) => this.toggleFavoriteIcon(true, id));
salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));
this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
});
// Language
salla.lang.onLoaded(() => {
this.remained = salla.lang.get('pages.products.remained');
this.donationAmount = salla.lang.get('pages.products.donation_amount');
this.startingPrice = salla.lang.get('pages.products.starting_price');
this.addToCart = salla.lang.get('pages.cart.add_to_cart');
this.outOfStock = salla.lang.get('pages.products.out_of_stock');
});
// Parse product data
if (!this.product) {
return;
}
try {
this.productData = typeof this.product == 'object' ? this.product : JSON.parse(this.product);
}
catch (e) {
salla.log('Bad json passed via product prop');
}
}
// Private Methods
initCircleBar() {
let qty = this.productData.quantity, total = this.productData.quantity > 100 ? this.productData.quantity * 2 : 100, roundPercent = (qty / total) * 100, bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'), strokeDashOffsetValue = 100 - roundPercent;
bar.style.strokeDashoffset = strokeDashOffsetValue;
}
toggleFavoriteIcon(isAdded = true, id = null) {
var _a;
if (id && id !== this.productData.id) {
return;
}
(_a = this.wishlistBtn) === null || _a === void 0 ? void 0 : _a.classList.toggle('s-product-card-wishlist-added', isAdded);
}
formatDate(date) {
let d = new Date(date);
return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
}
getProductBadge() {
var _a, _b, _c;
if (this.productData.promotion_title) {
return h("div", { class: "s-product-card-promotion-title" }, this.productData.promotion_title);
}
if (this.showQuantity && ((_a = this.productData) === null || _a === void 0 ? void 0 : _a.quantity)) {
return h("div", { class: "s-product-card-quantity" }, this.remained, " ", salla.helpers.number((_b = this.productData) === null || _b === void 0 ? void 0 : _b.quantity));
}
if (this.showQuantity && ((_c = this.productData) === null || _c === void 0 ? void 0 : _c.is_out_of_stock)) {
return h("div", { class: "s-product-card-out-badge" }, this.outOfStock);
}
return '';
}
getPriceFormat(price) {
if (!price || price == 0) {
return salla.config.get('store.settings.product.show_price_as_dash') ? '-' : '';
}
return salla.money(price);
}
getProductPrice() {
var _a, _b, _c;
if (this.productData.is_on_sale) {
return h("div", { class: "s-product-card-sale-price" }, h("h4", { innerHTML: this.getPriceFormat(this.productData.sale_price) }), h("span", { innerHTML: this.getPriceFormat((_a = this.productData) === null || _a === void 0 ? void 0 : _a.regular_price) }));
}
if (this.productData.starting_price) {
return h("div", { class: "s-product-card-starting-price" }, h("p", null, this.startingPrice), h("h4", { innerHTML: this.getPriceFormat((_b = this.productData) === null || _b === void 0 ? void 0 : _b.starting_price) }));
}
return h("h4", { class: "s-product-card-price", innerHTML: this.getPriceFormat((_c = this.productData) === null || _c === void 0 ? void 0 : _c.price) });
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
const classes = {
's-product-card-entry': true,
's-product-card-vertical': !this.horizontal && !this.fullImage && !this.minimal,
's-product-card-horizontal': this.horizontal && !this.fullImage && !this.minimal,
's-product-card-fit-height': this.fitImageHeight && !this.isSpecial && !this.fullImage && !this.minimal,
's-product-card-special': this.isSpecial,
's-product-card-full-image': this.fullImage,
's-product-card-minimal': this.minimal,
's-product-card-donation': (_a = this.productData) === null || _a === void 0 ? void 0 : _a.donation,
's-product-card-shadow': this.shadowOnHover,
's-product-card-out-of-stock': (_b = this.productData) === null || _b === void 0 ? void 0 : _b.is_out_of_stock,
};
const hrefProp = ((_c = this.productData) === null || _c === void 0 ? void 0 : _c.url) ? { href: this.productData.url, title: `Learn more about ${(_d = this.productData) === null || _d === void 0 ? void 0 : _d.name}` } : {};
return (h(Host, { key: 'e512a0d22ca4227a185af8e83d182ce2cd5fed3a', id: `product-${(_e = this.productData) === null || _e === void 0 ? void 0 : _e.id}`, class: classes }, h("div", { key: '636534bb9ab50192f46c357dc27c9401a3912812', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", Object.assign({ key: '699aaa033db4d3f9b1a402391591927b41e4059c' }, hrefProp), h("img", { key: '2c9ea209cdd648ec56574f202c5d5db5d5aa6a2b', class: `s-product-card-image-${salla.url.is_placeholder((_g = (_f = this.productData) === null || _f === void 0 ? void 0 : _f.image) === null || _g === void 0 ? void 0 : _g.url)
? 'contain'
: this.fitImageHeight
? this.fitImageHeight
: 'cover'} lazy`, src: this.placeholder, alt: ((_j = (_h = this.productData) === null || _h === void 0 ? void 0 : _h.image) === null || _j === void 0 ? void 0 : _j.alt) || ((_k = this.productData) === null || _k === void 0 ? void 0 : _k.name), "data-src": ((_m = (_l = this.productData) === null || _l === void 0 ? void 0 : _l.image) === null || _m === void 0 ? void 0 : _m.url) || ((_o = this.productData) === null || _o === void 0 ? void 0 : _o.thumbnail) }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", Object.assign({ key: 'f12b8e463757652fafd8454614c6afa898d316e0' }, hrefProp, { class: "s-product-card-overlay" })), !this.horizontal && !this.fullImage ?
h("salla-button", { shape: "icon", fill: "none", color: "light", "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id) }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '87ec313d8dd18f68a72cbe84c3688ff3fcb83941', class: "s-product-card-content" }, this.isSpecial && ((_p = this.productData) === null || _p === void 0 ? void 0 : _p.quantity) ?
h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number((_q = this.productData) === null || _q === void 0 ? void 0 : _q.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
: '', h("div", { key: '4421107f3e0a72a483ed61ca981b5914663e8794', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '822fbd3421c4f8977105a43fa30501f534c68681', class: "s-product-card-content-title" }, h("a", Object.assign({ key: '42ee223ba10ec357706a4356c8c2f3d2f2f4055b' }, hrefProp), (_r = this.productData) === null || _r === void 0 ? void 0 : _r.name)), ((_s = this.productData) === null || _s === void 0 ? void 0 : _s.subtitle) && !this.minimal ?
h("p", { class: "s-product-card-content-subtitle" }, (_t = this.productData) === null || _t === void 0 ? void 0 : _t.subtitle)
: ''), ((_u = this.productData) === null || _u === void 0 ? void 0 : _u.donation) && !this.minimal && !this.fullImage ?
[h("salla-progress-bar", { donation: (_v = this.productData) === null || _v === void 0 ? void 0 : _v.donation }), h("div", { class: "s-product-card-donation-input" }, ((_x = (_w = this.productData) === null || _w === void 0 ? void 0 : _w.donation) === null || _x === void 0 ? void 0 : _x.can_donate) ?
[h("label", { htmlFor: "donation-amount" }, this.donationAmount, " ", h("span", null, "*")), h("input", { type: "text", onInput: e => {
salla.helpers.inputDigitsOnly(e.target);
this.addBtn.donatingAmount = e.target.value;
}, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
: '')]
: '', h("div", { key: '73d07c123741c003a2a0f7568347131008e320b7', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), ((_z = (_y = this.productData) === null || _y === void 0 ? void 0 : _y.rating) === null || _z === void 0 ? void 0 : _z.stars) && !this.minimal ?
h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Rate }), h("span", null, this.productData.rating.stars))
: ''), this.isSpecial && this.productData.discount_ends
? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
: '', !this.hideAddBtn ?
h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)), this.horizontal || this.fullImage ?
h("salla-button", { shape: "icon", fill: "none", color: "light", ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
: '')
: '')));
}
componentDidLoad() {
var _a, _b, _c;
(_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update(this.host.querySelectorAll('.lazy'));
if (((_b = this.productData) === null || _b === void 0 ? void 0 : _b.quantity) && this.isSpecial) {
this.initCircleBar();
}
if (!salla.config.isGuest() && salla.storage.get('salla::wishlist', []).includes((_c = this.productData) === null || _c === void 0 ? void 0 : _c.id)) {
this.toggleFavoriteIcon();
}
}
static get assetsDirs() { return ["assets"]; }
get host() { return this; }
static get style() { return sallaProductCardCss; }
}, [4, "salla-product-card", {
"product": [1],
"horizontal": [4],
"shadowOnHover": [4, "shadow-on-hover"],
"hideAddBtn": [4, "hide-add-btn"],
"fullImage": [4, "full-image"],
"minimal": [4],
"isSpecial": [4, "is-special"],
"showQuantity": [4, "show-quantity"],
"productData": [32],
"fitImageHeight": [32],
"remained": [32],
"outOfStock": [32],
"donationAmount": [32],
"startingPrice": [32],
"addToCart": [32],
"placeholder": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-product-card", "salla-add-product-button", "salla-button", "salla-count-down", "salla-loading", "salla-modal", "salla-product-availability", "salla-progress-bar", "salla-quick-buy", "salla-tel-input"];
components.forEach(tagName => { switch (tagName) {
case "salla-product-card":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaProductCard);
}
break;
case "salla-add-product-button":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "salla-count-down":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-product-availability":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-progress-bar":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-quick-buy":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "salla-tel-input":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { SallaProductCard as S, defineCustomElement as d };
//# sourceMappingURL=salla-product-card2.js.map
//# sourceMappingURL=salla-product-card2.js.map