@salla.sa/twilight-components
Version:
Salla Web Component
864 lines (827 loc) • 1.42 MB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as getDefaultExportFromCjs, F as Fragment, i as axios } from './index-DWStDVKB.js';
import { a as anime } from './anime.es-CgtvEd63.js';
import { A as ArrowDownIcon, S as SpecialDiscountIcon } from './special-discount-yRO-ZESF.js';
import { I as IconVerified } from './check-uTyAzPSy.js';
import { H as Helper } from './Helper-CzEjEM5j.js';
import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
import { S as ShoppingBag } from './shopping-bag-DiKTtDW5.js';
import { M as MailIcon } from './mail-DmgxDvXL.js';
import { w as whatsapp$1 } from './whatsapp2-DWksgowB.js';
import { f as facebook, t as twitter } from './twitter-Dz7o69vX.js';
import { G as GiftIcon } from './gift-C0JNGIpa.js';
import { C as CameraIcon } from './camera-C6jIkM-X.js';
var PendingOrdersIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
<title>cart</title>
<path d="M15.426 28.084c0-1.412-0.85-2.684-2.156-3.226-1.305-0.54-2.807-0.241-3.805 0.758-0.999 0.998-1.298 2.5-0.758 3.805 0.54 1.303 1.815 2.155 3.226 2.155 1.928-0.003 3.49-1.564 3.492-3.492h0.001zM10.597 28.084h0.001c0-0.54 0.326-1.027 0.825-1.235 0.498-0.206 1.074-0.091 1.455 0.29 0.383 0.382 0.497 0.957 0.29 1.456-0.208 0.5-0.695 0.825-1.235 0.825-0.355 0-0.695-0.142-0.944-0.391-0.251-0.251-0.392-0.591-0.392-0.946h-0.001l0.001 0.001zM28.23 28.084c0-1.412-0.85-2.684-2.155-3.226-1.305-0.54-2.807-0.241-3.806 0.758s-1.297 2.5-0.756 3.805c0.54 1.303 1.813 2.155 3.226 2.155 1.927-0.003 3.49-1.564 3.491-3.492zM23.401 28.084c0-0.54 0.326-1.027 0.825-1.235 0.5-0.206 1.075-0.091 1.457 0.29s0.497 0.957 0.289 1.456c-0.206 0.5-0.693 0.825-1.233 0.825-0.738 0-1.337-0.599-1.337-1.337l-0.001 0.001zM1.953 0.234l-0.342-0.059c-0.29-0.064-0.594-0.004-0.839 0.166-0.247 0.169-0.414 0.436-0.463 0.734-0.050 0.3 0.023 0.607 0.201 0.85s0.444 0.402 0.738 0.44l0.341 0.059c1.825 0.324 3.248 1.794 3.548 3.662l1.981 12.369h-0.001c0.218 1.387 0.913 2.651 1.96 3.563s2.379 1.412 3.754 1.41h14.242c0.601 0 1.088-0.498 1.088-1.112s-0.487-1.112-1.088-1.112h-14.242c-1.679-0.001-3.139-1.183-3.525-2.854h11.463c1.614 0.004 3.188-0.518 4.493-1.49 1.305-0.973 2.271-2.346 2.762-3.918l1.298-4.136c0.145-0.455 0.065-0.953-0.213-1.336-0.278-0.385-0.72-0.608-1.187-0.602h-20.467l-0.181-1.141c-0.218-1.367-0.849-2.631-1.802-3.615-0.954-0.983-2.184-1.64-3.518-1.878h-0.001zM26.946 9.096l-0.993 3.169v-0.001c-0.353 1.122-1.044 2.101-1.975 2.796s-2.056 1.067-3.208 1.067h-11.833l-1.125-7.042 19.134 0.011z"></path>
</svg>
`;
var WalletIcon$1 = `<!-- 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>full-wallet</title>
<path d="M29 12h-26c-0.668-0.008-1.284-0.226-1.787-0.59l0.009 0.006c-0.744-0.552-1.222-1.428-1.222-2.416 0-1.657 1.343-3 2.999-3h6c0.552 0 1 0.448 1 1s-0.448 1-1 1v0h-6c-0.552 0-1 0.448-1 1 0 0.326 0.156 0.616 0.397 0.798l0.002 0.002c0.167 0.12 0.374 0.194 0.599 0.2l0.001 0h26c0.552 0 1 0.448 1 1s-0.448 1-1 1v0zM27 12c-0.552 0-1-0.448-1-1v0-3h-3c-0.552 0-1-0.448-1-1s0.448-1 1-1v0h4c0.552 0 1 0.448 1 1v0 4c0 0.552-0.448 1-1 1v0zM29 30h-26c-1.657 0-3-1.343-3-3v0-18c0-0.552 0.448-1 1-1s1 0.448 1 1v0 18c0 0.552 0.448 1 1 1v0h25v-5c0-0.552 0.448-1 1-1s1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM29 18c-0.552 0-1-0.448-1-1v0-6c0-0.552 0.448-1 1-1s1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM31 24h-7c-2.209 0-4-1.791-4-4s1.791-4 4-4v0h7c0.552 0 1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM24 18c-1.105 0-2 0.895-2 2s0.895 2 2 2v0h6v-4zM25 12c-0.001 0-0.001 0-0.002 0-0.389 0-0.726-0.222-0.891-0.546l-0.003-0.006-3.552-7.106-2.306 1.152c-0.13 0.066-0.284 0.105-0.447 0.105-0.552 0-1-0.448-1-1 0-0.39 0.223-0.727 0.548-0.892l0.006-0.003 3.2-1.6c0.13-0.067 0.284-0.106 0.447-0.106 0.39 0 0.727 0.223 0.892 0.548l0.003 0.006 4 8c0.067 0.13 0.106 0.285 0.106 0.448 0 0.552-0.448 1-1 1v0zM21 12c-0.001 0-0.001 0-0.002 0-0.389 0-0.726-0.222-0.891-0.546l-0.003-0.006-3.552-7.106-15.104 7.552c-0.13 0.066-0.284 0.105-0.447 0.105-0.552 0-1-0.448-1-1 0-0.39 0.223-0.727 0.548-0.892l0.006-0.003 16-8c0.13-0.067 0.284-0.106 0.447-0.106 0.39 0 0.727 0.223 0.892 0.548l0.003 0.006 4 8c0.067 0.13 0.106 0.285 0.106 0.448 0 0.552-0.448 1-1 1-0.001 0-0.001 0-0.002 0h0z"></path>
</svg>
`;
const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
const SallaAddProductButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.success = createEvent(this, "success");
this.failed = createEvent(this, "failed");
this.hostAttributes = {};
/**
* Product Status.Defaults to `sale`
*/
this.productStatus = 'sale';
/**
* Product type. Defaults to `product`
*/
this.productType = 'product';
this.selectedOptions = [];
this.buyNowText = salla.lang.get('pages.products.buy_now');
salla.lang.onLoaded(() => {
this.buyNowText = salla.lang.get('pages.products.buy_now');
});
}
getLabel() {
if (this.productStatus === 'sale' && this.supportStickyBar && window.innerWidth <= 768 && this.showQuickBuy && this.isApplePayActive) {
return PendingOrdersIcon;
}
if (this.productStatus === 'sale' && this.productType === 'booking') {
return salla.lang.get('pages.cart.book_now');
}
if (this.productStatus === 'sale') {
return salla.lang.get('pages.cart.add_to_cart');
}
if (this.productType !== 'donating') {
return salla.lang.get('pages.products.out_of_stock');
}
// donating
return salla.lang.get('pages.products.donation_exceed');
}
addProductToCart(event) {
var _a;
if (this.productType === 'booking') {
event.preventDefault();
return this.addBookingProduct();
}
// we want to ignore the click action when the type of button is submit a form
if (this.hostAttributes.type === 'submit') {
return false;
}
event.preventDefault();
(_a = this.btn) === null || _a === void 0 ? void 0 : _a.disable();
/**
* by default the quick add is just an alias for add item function
* but its work only when the id is the only value is passed via the object
* so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
*/
const data = Object.entries({
id: this.productId,
donation_amount: this.donatingAmount,
quantity: this.quantity,
endpoint: 'quickAdd'
}).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {});
return salla.cart.addItem(data)
.then(response => {
var _a;
this.selectedOptions = [];
(_a = this.btn) === null || _a === void 0 ? void 0 : _a.enable();
this.success.emit(response);
})
.catch(error => { var _a; this.failed.emit(error); (_a = this.btn) === null || _a === void 0 ? void 0 : _a.enable(); });
}
addBookingProduct() {
if (salla.config.isGuest()) {
salla.auth.api.setAfterLoginEvent('booking::add', this.productId);
salla.event.dispatch('login::open');
return;
}
return salla.booking.add(this.productId)
.then(resp => this.success.emit(resp))
.catch(error => this.failed.emit(error));
}
getBtnAttributes() {
for (let i = 0; i < this.host.attributes.length; i++) {
if (!['id', 'class'].includes(this.host.attributes[i].name)) {
this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
}
}
return this.hostAttributes;
}
getQuickBuyBtnAttributes() {
return Object.assign(Object.assign({}, this.getBtnAttributes()), { type: this.supportStickyBar && window.innerWidth <= 768 ? 'plain' : this.productType == 'donating' ? 'donate' : 'buy' });
}
miniCheckoutWidget() {
let storeId = salla.config.get('store.id');
if (!storeId) {
return;
}
return h("salla-mini-checkout-widget", { language: salla.lang.locale, "store-id": storeId, config: { user: salla.config.get('user') }, products: [this.productId], api: salla.config.get('store.api'), outline: true, "form-selector": "form.product-form", class: "s-add-product-button-mini-checkout" }, h("div", { slot: "widget-label", class: "s-add-product-button-mini-checkout-content" }, h("span", { innerHTML: WalletIcon$1 }), this.buyNowText));
}
componentWillLoad() {
return salla.onReady()
.then(() => {
var _a, _b, _c;
// this to fix not added hydrated class to html element after components loaded
document.documentElement.classList.add('hydrated');
this.showQuickBuy = this.quickBuy
&& salla.config.get('store.settings.buy_now')
&& this.productStatus == 'sale'
&& this.productType !== 'booking';
this.isApplePayActive = ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePayments())
&& ((_b = salla.config.get('store.settings.payments')) === null || _b === void 0 ? void 0 : _b.includes('apple_pay'))
&& salla.config.get('store.settings.is_salla_gateway', false);
this.passedLabel = this.host.innerHTML.replace('<!---->', '').trim();
if (!!this.passedLabel && window.innerWidth >= 768) {
return (_c = this.btn) === null || _c === void 0 ? void 0 : _c.setText(this.passedLabel);
}
if (this.host.getAttribute('type') === 'submit' && this.supportStickyBar) {
window.addEventListener('resize', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText((window.innerWidth >= 768 && !!this.passedLabel) ? this.passedLabel : this.getLabel()); });
}
});
}
render() {
var _a;
//TODO:: find a better fix, this is a patch for issue that duplicates the buttons more than twice @see the screenshot inside this folder
if ((_a = this.host.closest('.swiper-slide')) === null || _a === void 0 ? void 0 : _a.classList.contains('swiper-slide-duplicate')) {
return '';
}
if (this.hasSubscribedOptions) {
return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true }), h("span", { class: "s-hidden" }, h("slot", null))));
}
if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("span", { class: "s-hidden" }, h("slot", null))));
}
return h(Host, { class: {
's-add-product-button-with-quick-buy': this.showQuickBuy,
's-add-product-button-with-sticky-bar': this.supportStickyBar,
's-add-product-button-with-apple-pay': this.showQuickBuy && this.isApplePayActive
} }, h("div", { class: {
's-add-product-button-main': this.showQuickBuy,
'w-full': !document.getElementById('fast-checkout-js') || ['financial_support', 'donating'].includes(this.productType) // This is a temporary fix until all themes fully support the fast checkout -- To be removed later
} }, h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }), h("slot", null)), this.showQuickBuy && !!document.getElementById('fast-checkout-js') && !['financial_support', 'donating'].includes(this.productType) ? this.miniCheckoutWidget() : ''), this.showQuickBuy && this.isApplePayActive ? h("salla-quick-buy", Object.assign({}, this.getQuickBuyBtnAttributes())) : '');
}
componentDidLoad() {
if (!this.notifyOptionsAvailability) {
return;
}
salla.event.on('product-options::change', async (data) => {
var _a, _b;
if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
return;
}
this.hasSubscribedOptions = false;
this.selectedOptions = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptions());
this.hasOutOfStockOption = await ((_b = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _b === void 0 ? void 0 : _b.hasOutOfStockOption());
let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
return;
}
if (salla.config.isGuest()) {
const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
}
else {
this.hasSubscribedOptions = this.subscribedOptions && this.subscribedOptions !== 'null' && this.subscribedOptions !== '[]' ? JSON.parse(this.subscribedOptions).some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id))) : false;
}
});
}
componentDidRender() {
var _a, _b;
//if label not passed, get label
if (!!this.passedLabel && (!this.supportStickyBar || window.innerWidth >= 768)) {
// if passed label, set it
(_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(this.passedLabel);
return;
}
(_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(this.getLabel());
salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(this.getLabel()); });
}
get host() { return getElement(this); }
};
SallaAddProductButton.style = sallaAddProductButtonCss;
var infoIcon = `<!-- 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>info</title>
<path d="M16 13.333c-0.737 0-1.333 0.596-1.333 1.333v9.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-9.333c0-0.737-0.596-1.333-1.333-1.333zM16 7.987c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
</svg>
`;
var shoppingBag = `<!-- 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>shopping-bag2</title>
<path d="M29.2 8.133c0 0 0-0.133-0.133-0.133 0 0 0-0.133-0.133-0.133l-4-5.333c-0.133-0.4-0.533-0.533-0.933-0.533h-16c-0.4 0-0.8 0.133-1.067 0.533l-4 5.333c0 0 0 0.133-0.133 0.133 0 0 0 0.133-0.133 0.133 0 0.267 0 0.4 0 0.533v18.667c0 2.267 1.733 4 4 4h18.667c2.267 0 4-1.733 4-4v-18.667c0-0.133 0-0.267-0.133-0.533zM8.667 4.667h14.667l2 2.667h-18.667l2-2.667zM25.333 28.667h-18.667c-0.8 0-1.333-0.533-1.333-1.333v-17.333h21.333v17.333c0 0.8-0.533 1.333-1.333 1.333zM21.333 12.667c-0.8 0-1.333 0.533-1.333 1.333 0 2.267-1.733 4-4 4s-4-1.733-4-4c0-0.8-0.533-1.333-1.333-1.333s-1.333 0.533-1.333 1.333c0 3.733 2.933 6.667 6.667 6.667s6.667-2.933 6.667-6.667c0-0.8-0.533-1.333-1.333-1.333z"></path>
</svg>
`;
const sallaBottomAlertCss = ":host{display:block}";
const SallaBottomAlert = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.storeId = salla.config.get('store.id');
this.template = salla.config.get('store.template');
this.loading = false;
this.templateData = {};
this.defaultMessage = salla.lang.get('common.elements.experimental_and_available_store');
this.defaultActionLabel = salla.lang.get('common.elements.know_more');
this.storeFeatures = salla.lang.get('common.elements.store_features');
this.storeDetails = salla.lang.get('common.elements.store_details');
this.storePrice = salla.lang.getWithDefault('common.elements.store_price', 'سعر المتجر');
this.theDeveloper = salla.lang.get('common.elements.the_developer');
this.templateInformation = salla.lang.get('common.elements.template_information');
this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
this.isRtl = salla.config.get('theme.is_rtl', true);
/**
* Alert Type
* */
this.type = 'popup';
salla.lang.onLoaded(() => {
this.defaultMessage = salla.lang.get('common.elements.experimental_and_available_store');
this.defaultActionLabel = salla.lang.get('common.elements.know_more');
this.storeFeatures = salla.lang.get('common.elements.store_features');
this.storeDetails = salla.lang.get('common.elements.store_details');
this.templateInformation = salla.lang.get('common.elements.template_information');
this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price', 'سعر المتجر');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price', 'Store Price');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.the_developer', 'المطور');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.the_developer', 'the developer');
setTimeout(() => {
this.storePrice = salla.lang.get('common.elements.store_price');
this.theDeveloper = salla.lang.get('common.elements.the_developer');
}, 100);
});
}
open() {
return this.modal.open()
.then(() => this.handleTemplateRequest());
}
getDefaultMessage() {
return this.isRtl ? this.defaultMessage.substring(0, this.defaultMessage.lastIndexOf(" ")) : this.defaultMessage.split(" ").slice(0, -2).join(" ");
}
handleTemplateRequest() {
if (Object.keys(this.templateData).length) {
return;
}
this.modal.loading();
return salla.api.request(`/store/template`, {}, 'get', { 'Store-Identifier': this.storeId })
.then((res) => {
this.modal.setTitle(this.templateInformation);
this.templateData = res.data;
this.modal.stopLoading();
})
.catch(() => {
this.modal.close();
});
}
handleAction() {
if (this.type === 'link') {
window.location.href = this.actionUrl;
}
if (this.type === 'popup') {
this.open();
}
}
popup() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
return (h("salla-modal", { class: "s-bottom-alert-modal", ref: modal => this.modal = modal, "no-padding": true }, Object.keys(this.templateData).length ?
[h("div", { class: "s-bottom-alert-modal-inner s-scrollbar" }, Array.isArray((_a = this.templateData) === null || _a === void 0 ? void 0 : _a.screenshots) && ((_c = (_b = this.templateData) === null || _b === void 0 ? void 0 : _b.screenshots) === null || _c === void 0 ? void 0 : _c.length) ? h("div", { class: "s-bottom-alert-modal-cover" }, h("img", { src: (_d = this.templateData) === null || _d === void 0 ? void 0 : _d.screenshots[0], alt: "" })) : '', h("div", { class: { "s-bottom-alert-modal-content": true, "s-bottom-alert-modal-content-extra-padding": this.templateData.price } }, ((_e = this.templateData) === null || _e === void 0 ? void 0 : _e.description) ?
[h("div", { class: "s-bottom-alert-modal-content-title" }, this.storeDetails), h("div", { class: "s-bottom-alert-modal-content-description", innerHTML: (_f = this.templateData) === null || _f === void 0 ? void 0 : _f.description }), h("hr", null)
] : '', ((_g = this.templateData) === null || _g === void 0 ? void 0 : _g.features) ? [h("div", { class: "s-bottom-alert-modal-content-title" }, this.storeFeatures), h("div", { class: "s-bottom-alert-modal-content-features", innerHTML: (_h = this.templateData) === null || _h === void 0 ? void 0 : _h.features })
] : '', Array.isArray((_j = this.templateData) === null || _j === void 0 ? void 0 : _j.screenshots) && ((_l = (_k = this.templateData) === null || _k === void 0 ? void 0 : _k.screenshots) === null || _l === void 0 ? void 0 : _l.length) > 1 ?
h("salla-slider", { id: 'template-screenshots', type: 'carousel', class: "s-bottom-alert-modal-content-screenshots" }, h("div", { slot: 'items' }, (_m = this.templateData) === null || _m === void 0 ? void 0 : _m.screenshots.map((screenshot) => {
return h("div", { class: "s-bottom-alert-modal-content-screenshot" }, h("img", { src: screenshot, alt: "" }));
})))
: '', ((_o = this.templateData) === null || _o === void 0 ? void 0 : _o.extra_info) ?
h("div", { class: "s-bottom-alert-modal-content-description", innerHTML: (_p = this.templateData) === null || _p === void 0 ? void 0 : _p.description })
: ''), ((_q = this.templateData) === null || _q === void 0 ? void 0 : _q.link) ?
h("div", { class: "s-bottom-alert-modal-content-footer" }, this.templateData.price && h("div", { class: "s-bottom-alert-modal-price-wrapper" }, h("div", null, this.storePrice), h("div", { class: "s-bottom-alert-modal-price-wrapper-amount", innerHTML: salla.money((_r = this.templateData) === null || _r === void 0 ? void 0 : _r.price) })), h("salla-button", { color: 'primary', size: "medium", width: 'wide', href: (_s = this.templateData) === null || _s === void 0 ? void 0 : _s.link }, h("i", { innerHTML: shoppingBag }), this.buyTheTemplate)) : '')] : ''));
}
render() {
const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
const developer = hasTemplate && this.template.developer;
const hasDeveloper = developer !== undefined;
const developerName = hasDeveloper && (developer === null || developer === void 0 ? void 0 : developer.name);
const developerUrl = null; //hasDeveloper && developer.url;
return (h(Host, { key: '54afc00bdffa94ff3717f2ba6ddd2ed82534cb4a', class: "s-bottom-alert-wrapper" }, h("div", { key: '634f4f43d9ffada203efa37f1e4e56b5afc61c99', class: "s-bottom-alert-content" }, h("div", { key: '83796d918d9773926cee99cb6891f5c5a9e1151f', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: 'e4f4e9f715868c07c5c425085542ada70aa6f76b', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", null, this.getDefaultMessage(), " ", h("a", { href: "#", class: {
"s-bottom-alert-message-highlight": true,
"s-bottom-alert-message-link": developerUrl,
}, target: "", "aria-label": "Developer" }, developerName ? developerName : this.theDeveloper), " ", h("span", { class: "s-bottom-alert-message-splitter" }, "|"), " ", this.storePrice, ":", " ", h("span", { class: "s-bottom-alert-message-highlight", innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage)), this.type !== 'banner' && (h("div", { key: '82e089d7d9a5975cac5476e4dd1adf196b4492fe', class: "s-bottom-alert-action" }, h("salla-button", { key: '29f693dfd29da4f8d11e519729738fcd5aaad974', href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel))), this.type === 'popup' && this.popup())));
}
get host() { return getElement(this); }
};
SallaBottomAlert.style = sallaBottomAlertCss;
var ArrowLeftIcon = `<!-- 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>keyboard_arrow_left</title>
<path d="M20.563 22.104l-1.875 1.875-8-8 8-8 1.875 1.875-6.125 6.125z"></path>
</svg>
`;
var ArrowRightIcon = `<!-- 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>keyboard_arrow_right</title>
<path d="M11.438 22.479l6.125-6.125-6.125-6.125 1.875-1.875 8 8-8 8z"></path>
</svg>
`;
const sallaBreadcrumbCss = ":host{display:block}";
const SallaBreadcrumb = class {
constructor(hostRef) {
registerInstance(this, hostRef);
var _a, _b;
this.sessionStorageKey = "breadcrumb_snapshot";
this.itemSlot = ((_a = this.host.querySelector('[slot="item"]')) === null || _a === void 0 ? void 0 : _a.outerHTML) || `<li class="s-breadcrumb-item"><a href={url}>{title}</a></li>`;
this.iconSlot = (_b = this.host.querySelector('[slot="icon"]')) === null || _b === void 0 ? void 0 : _b.outerHTML;
}
componentWillLoad() {
return (new Promise(resolve => salla.onReady(() => salla.lang.onLoaded(resolve))))
.then(() => {
if (salla.url.is_page('index')) {
throw new Error('salla-breadcrumb:: breadcrumb not supported on home page');
}
})
.then(() => {
if (!salla.config.get('theme.settings.is_breadcrumbs_enabled', true)) {
throw new Error('salla-breadcrumb:: merchant disabled the feature');
}
})
.then(() => {
var _a;
const page = salla.config.get("page");
if (!page || !page.slug) {
salla.logger.error('salla-breadcrumbs:: page object not existed on salla.config.get("page")!');
this.breadcrumbs = [];
return;
}
let sessionBreadcrumbs = this.getSessionBreadcrumbs();
if (page.slug === "product.single" && sessionBreadcrumbs && sessionBreadcrumbs.length > 0) {
sessionBreadcrumbs.push({
title: page.title,
url: page.url
});
this.breadcrumbs = this.setBreadcrumbsFromArray(sessionBreadcrumbs);
this.storeBreadcrumbSnapshot();
}
else if (sessionBreadcrumbs && sessionBreadcrumbs.length > 0) {
if (this.isNewPage(page, sessionBreadcrumbs)) {
this.breadcrumbs = this.generateBreadcrumbs(page);
this.storeBreadcrumbSnapshot();
}
else {
this.breadcrumbs = this.setBreadcrumbsFromArray(sessionBreadcrumbs);
}
}
else {
this.breadcrumbs = this.generateBreadcrumbs(page);
this.storeBreadcrumbSnapshot();
}
if ((_a = this.breadcrumbs) === null || _a === void 0 ? void 0 : _a.length) {
this.breadcrumbs[this.breadcrumbs.length - 1].is_last = true;
}
return this.breadcrumbs;
})
.catch((error) => {
salla.logger.error('salla-breadcrumb:: unexpected error!', error);
this.breadcrumbs = [];
});
}
getSessionBreadcrumbs() {
if (new URLSearchParams(window.location.search).get('from') === 'search-bar') {
return [];
}
return JSON.parse(sessionStorage.getItem(this.sessionStorageKey) || '[]');
}
/**
* Helper function to determine if we're navigating to a new page that requires updating the session storage.
*/
isNewPage(page, sessionBreadcrumbs) {
// Check if the last breadcrumb in sessionStorage matches the current page's URL.
const lastBreadcrumb = sessionBreadcrumbs[sessionBreadcrumbs.length - 1];
return (lastBreadcrumb === null || lastBreadcrumb === void 0 ? void 0 : lastBreadcrumb.url) !== page.url; // If the URLs don't match, it's a new page.
}
setBreadcrumbsFromArray(breadcrumbArray) {
return breadcrumbArray.map((item, index) => (Object.assign(Object.assign({}, item), { is_last: index === breadcrumbArray.length - 1 })));
}
/**
* Sanitizes the breadcrumb title by splitting it on the `|` character and returning
* the part based on `preferedIndex`. If no separator is found, returns the trimmed title.
*
* @param {string} title - The title to sanitize.
* @param {number} [preferedIndex=1] - Index of the part to return (0 for first, 1 for second).
* @returns {string} - The sanitized title.
*/
sanitizeBreadcrumbTitle(title, preferedIndex = 1) {
if (!title.includes('|')) {
return title.trim();
}
return title.split('|').map(part => part.trim())[preferedIndex];
}
generateBreadcrumbs(page) {
var _a, _b;
let breadcrumbs = [];
//TODO:: check what is the need from this?
if (page.slug === 'product.single') {
const previousPage = this.getSessionBreadcrumbs();
if (previousPage.length > 0 && ((_a = previousPage[1]) === null || _a === void 0 ? void 0 : _a.url) === ((_b = page.parent) === null || _b === void 0 ? void 0 : _b.url)) {
return this.setBreadcrumbsFromArray([...previousPage, page]);
}
}
// Start with the current page
let currentPage = page;
// Traverse up to the parent pages
while (currentPage) {
if (currentPage.title) {
breadcrumbs.unshift({
title: currentPage.title,
url: currentPage.url,
});
}
currentPage = currentPage.parent;
}
// Additional logic based on page slug or title
if (page.slug.includes("customer") && page.slug !== 'customer.profile') {
breadcrumbs.unshift({ title: salla.lang.get('common.titles.profile'), url: salla.url.get('profile') });
}
if (page.slug.includes('blog')) {
breadcrumbs.unshift({ title: salla.lang.get('blocks.footer.blog'), url: salla.url.get('blog') });
}
if (page.slug === 'brands.single') {
breadcrumbs.unshift({ title: salla.lang.get('common.titles.brands'), url: salla.url.get('brands') });
}
if (!page.title && page.slug === 'loyalty') {
breadcrumbs.unshift({ title: salla.lang.get('common.titles.loyalty_program'), url: salla.url.get('loyalty') });
}
// Add home breadcrumb
breadcrumbs.unshift({ title: salla.lang.get('common.titles.home'), url: salla.url.get('') });
return breadcrumbs;
}
storeBreadcrumbSnapshot() {
try {
const page = salla.config.get("page");
// Skip storing breadcrumbs for product.single page
if ((page === null || page === void 0 ? void 0 : page.slug) === 'product.single') {
return;
}
const items = [...this.breadcrumbs];
// Find the last item and update its URL
const lastItemIndex = items.length - 1;
if (lastItemIndex >= 0) {
items[lastItemIndex].url = window.location.href;
}
const breadcrumbSnapshot = JSON.stringify(items);
sessionStorage.setItem(this.sessionStorageKey, breadcrumbSnapshot);
}
catch (error) {
salla.logger.error('salla-breadcrumb:: Failed to store breadcrumb snapshot in sessionStorage.', error);
}
}
render() {
if (this.breadcrumbs.length <= 1) {
salla.log('salla-breadcrumb:: There is no breadcrumbs!');
return null;
}
return (h("ol", { class: {
"s-breadcrumb-wrapper": true,
"s-breadcrumb-dark": salla.url.is_page('loyalty'),
"s-breadcrumb-primary-reverse": salla.config.get('page.slug').includes('customer')
} }, this.breadcrumbs.map(item => {
const isProductSingle = salla.config.get('page.slug') === "product.single";
const title = (isProductSingle && item.is_last) ? item.title : this.sanitizeBreadcrumbTitle(item.title);
const itemHTML = this.itemSlot.replace(/\{url\}/g, item.url).replace(/\{title\}/g, title);
return [
h("div", { class: "s-breadcrumb-slot", innerHTML: itemHTML }),
this.getArrowDomForItem(item)
];
})));
}
getArrowDomForItem(item) {
if (item.is_last) {
return '';
}
let iconDom = this.iconSlot || (salla.config.get('theme.is_rtl', true) ? ArrowLeftIcon : ArrowRightIcon);
return h("li", { class: "s-breadcrumb-arrow" }, h("div", { class: { "s-breadcrumb-icon-slot": true, "s-breadcrumb-default-icon": !this.iconSlot }, innerHTML: iconDom }));
}
/**
* Lifecycle method called after the component is rendered.
* - Reduces the number of elements in the DOM.
* - Removes unnecessary slots parent elements.
* - Replaces the last anchor tag in the breadcrumb with its content.
*/
componentDidRender() {
var _a, _b, _c;
// Reduces the number of elements in the DOM
this.host.querySelectorAll('.s-breadcrumb-slot').forEach(el => el.replaceWith(el.firstChild));
this.host.querySelectorAll('.s-breadcrumb-icon-slot.s-breadcrumb-default-icon').forEach(el => el.replaceWith(el.querySelector('svg')));
// Removes the slots parent elements if exists
(_a = this.host.querySelector('[slot="item"]')) === null || _a === void 0 ? void 0 : _a.remove();
(_b = this.host.querySelector('[slot="icon"]')) === null || _b === void 0 ? void 0 : _b.remove();
let lastEl = (_c = this.host.querySelectorAll('.s-breadcrumb-item')[this.breadcrumbs.length - 1]) === null || _c === void 0 ? void 0 : _c.querySelector('a');
lastEl && lastEl.replaceWith(lastEl.firstChild);
}
get host() { return getElement(this); }
};
SallaBreadcrumb.style = sallaBreadcrumbCss;
const sallaButtonCss = "";
const SallaButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.hostAttributes = {};
/**
* Button Type
*/
this.shape = 'btn';
/**
* Button Color
*/
this.color = 'primary';
/**
* Button Fill
*/
this.fill = 'solid';
/**
* Button Size
*/
this.size = 'medium';
/**
* Button Width
*/
this.width = 'normal';
/**
* Is the button currently loading
*/
this.loading = false;
/**
* Is the button currently disabled
*/
this.disabled = false;
/**
* If there is need to change loader position, pass the position
*/
this.loaderPosition = 'after';
/**
* Determines the type of the rendered button.
* By default, the type is set to "button," making it a general-purpose button.
* Setting `type` to "submit" makes the button behave as a submit button within a form, triggering form submission.
* Possible values for `type` include "button," "submit," "reset," and "menu.".
*
* Possible values and their usage are as follows:
* "button" (default, used for general button functionality),
* "reset" (resets form fields to their default values), and
* "menu" (represents a button that, when activated, displays a context menu).
*/
this.type = "button";
}
/**
* Run loading animation
*/
async load() {
if (this.loaderPosition == 'center')
this.text.classList.add('s-button-hide');
this.host.setAttribute('loading', '');
return this.host;
}
/**
* Stop loading animation
*/
async stop() {
this.host.removeAttribute('loading');
this.host.querySelector('button').removeAttribute('loading');
if (this.loaderPosition == 'center')
this.text.classList.remove('s-button-hide');
return this.host;
}
/**
* Changing the body of the button
* @param html
*/
async setText(html) {
this.text.innerHTML = html;
return this.host;
}
/**
* Add `disabled` attribute
*/
async disable() {
this.host.setAttribute('disabled', '');
return this.host;
}
/**
* Remove `disabled` attribute
*/
async enable() {
this.host.removeAttribute('disabled');
return this.host;
}
getBtnAttributes() {
for (let i = 0; i < this.host.attributes.length; i++) {
if (!['color', 'fill', 'size', 'width', 'id'].includes(this.host.attributes[i].name)) {
this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
}
}
this.hostAttributes.type = this.hostAttributes.type || this.type;
this.hostAttributes.class +=
' s-button-element s-button-' + this.shape
+ ' s-button-' + (this.fill == "none" ? 'fill-none' : this.fill)
+ (this.size != "medium" ? ' s-button-' + this.size : '')
+ (this.width != "normal" ? ' s-button-' + this.width : '')
+ (this.shape == "link" ? ' s-button-' + this.color + '-link' : '')
+ (this.shape != "link" && this.fill != 'outline' ? ' s-button-' + this.color : '')
+ (this.fill == 'outline' ? ' s-button-' + this.color + '-outline' : '')
+ (this.disabled ? ' s-button-disabled ' : '')
+ (this.shape == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
return this.hostAttributes;
}
button() {
return (h("button", Object.assign({}, this.getBtnAttributes(), { disabled: this.disabled }), h("span", { class: "s-button-text", ref: el => this.text = el }, h("slot", null)), this.loading ? h("span", { class: "s-button-loader" }) : ''));
}
render() {
var _a;
//TODO:: find a better fix, this is a patch for issue that duplicates the buttons twice @see the screenshot inside this folder
return ((_a = this.host.closest('.swiper-slide')) === null || _a === void 0 ? void 0 : _a.classList.contains('swiper-slide-duplicate'))
? ''
: (h(Host, { class: "s-button-wrap" }, this.href ? h("a", { href: this.href }, this.button()) : this.button()));
}
get host() { return getElement(this); }
};
SallaButton.style = sallaButtonCss;
const sallaCartSummaryCss = "";
const SallaCartSummary = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.cartSummaryCount = salla.storage.get('cart.summary.count') || 0;
this.cartSummaryTotal = salla.storage.get('cart.summary.total') || 0;
this.cartLabel = salla.config.get('user.language_code') === 'ar' ? 'السلة' : 'Cart';
salla.cart.event.onUpdated((response) => {
this.cartSummaryCount = response.count || 0;
this.cartSummaryTotal = response.total || 0;
});
}
/**
* Animate product Image to cart summary
* @param image the image element to animate
*/
async animateToCart(image) {
document.querySelectorAll('.s-cart-thumb').forEach(el => el.remove());
if (!(image === null || image === void 0 ? void 0 : image.src)) {
salla.log('Failed to get the img element');
return;
}
let cartBtn = this.host.querySelector('#s-cart-icon'), btnOffset = cartBtn.getBoundingClientRect(), btnTop = btnOffset.top + window.scrollY, btnLeft = btnOffset.left + window.scrollX;
// get thumb position ---
let position = image.getBoundingClientRect(), width = image.offsetWidth + 'px', height = image.offsetHeight + 'px', top = position.top, left = position.left;
// create thumb img element ---
let img = document.createElement("img");
img.src = image.getAttribute('src');
img.className = "s-cart-thumb";
img.setAttribute("style", "object-fit:cover; width:" + width + '; height:' + height + '; top:' + top + 'px; left:' + left + 'px;z-index:99999999; ');
document.body.append(img);
let cartThumb = document.querySelector('.s-cart-thumb');
cartBtn.classList.remove('animated', 'rubberBand');
// start timeline ---
let cartThumbAnime = new anime.timeline();
cartThumbAnime.add({
targets: cartThumb,
width: [150, 30],
height: [150, 30],
top: [top, window.scrollY > 0 ? btnTop - window.scrollY - 40 : btnTop - 40],
left: [left, btnLeft],
borderRadius: ['20%', '50%'],
easing: 'easeOutExpo',
duration: 1200,
}, '+=200')
.add({
targets: cartThumb,
width: [30, 0],
height: [30, 0],
opacity: [1, 0],
easing: 'easeOutExpo',
top: [window.scrollY > 0 ? btnTop - window.scrollY - 40 : btnTop - 40, window.scrollY > 0 ? btnTop - window.scrollY + 10 : btnTop + 10],
left: [btnLeft, btnLeft + 10],
}, '-=500')
.add({
complete: function () {
cartBtn.classList.add('animated', 'rubberBand');
cartThumb.remove();
},
}, '-=1700');
}
/**
* Some times it renderes with main domain, something like `https://salla.sa/cart`, because salla is not loaded,
* here, we are sure it will not be rendred unless salla is ready
*/
componentWillLoad() {
return new Promise(resolve => salla.onReady(resolve));
}
render() {
return (h(Host, { key: 'f536afae4840b08133a82698fab4b4df6d479e14' }, h("a", { key: '26185bdeec4028f6fe936e5a0970fec799761bdd', class: "s-cart-summary-wrapper", href: salla.url.get('cart') }, h("div", { key: '817fb77ac1feedd59d23b35a53648382aa3e300c', id: "s-cart-icon" }, h("slot", { key: '3d0601960d662d63988b44f1745d222c43f8ecd7', name: "icon" }, h("i", { key: '27da6c6fe8da8bd634fad5e39b9b62ec061694b1', class: "s-cart-summary-icon", innerHTML: PendingOrdersIcon }))), h("span", { key: 'e1a63ea518c783207d85a657778fb739bc1f386f', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '4133fd68ef50ff54609718274f3daa2f87511a3b', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: 'ec133e448903ec65c42cc7ec35984ca90bbb9a1c', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'c0e06bab8d8032e37e4059dfce54135f89a6a8d3', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
}
get host() { return getElement(this); }
};
SallaCartSummary.style = sallaCartSummaryCss;
var vanillaPicker$1 = {exports: {}};
/*!
* vanilla-picker v2.12.3
* https://vanilla-picker.js.org
*
* Copyright 2017-2024 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
* Released under the ISC license.
*/
var vanillaPicker = vanillaPicker$1.exports;
var hasRequiredVanillaPicker;
function requireVanillaPicker () {
if (hasRequiredVanillaPicker) return vanillaPicker$1.exports;
hasRequiredVanillaPicker = 1;
(function (module, exports) {
(function (global, factory) {
module.exports = factory() ;
})(vanillaPicker, (function () {
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var slicedToArray = function () {
function sliceIterator(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"]) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
return function (arr, i) {
if (Array.isArray(arr)) {
return arr;
} else if (Symbol.iterator in Object(arr)) {
return sliceIterator(arr, i);
} else {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
};
}();
String.prototype.startsWith = String.prototype.startsWith || function (needle) {
return this.indexOf(needle) === 0;
};
String.prototype.padStart = String.prototype.padStart || function (len, pad) {
var str = this;while (str.length < len) {
str = pad + str;
}return str;
};
var colorNames = { cb: '0f8ff', tqw: 'aebd7', q: '-ffff', qmrn: '7fffd4', zr: '0ffff', bg: '5f5dc', bsq: 'e4c4', bck: '---', nch: 'ebcd', b: '--ff', bvt: '8a2be2', brwn: 'a52a2a', brw: 'deb887', ctb: '5f9ea0', hrt: '7fff-', chcT: 'd2691e', cr: '7f50', rnw: '6495ed', crns: '8dc', crms: 'dc143c', cn: '-ffff', Db: '--8b', Dcn: '-8b8b', Dgnr: 'b8860b', Dgr: 'a9a9a9', Dgrn: '-64-', Dkhk: 'bdb76b', Dmgn: '8b-8b', Dvgr: '556b2f', Drng: '8c-', Drch: '9932cc', Dr: '8b--', Dsmn: 'e9967a', Dsgr: '8fbc8f', DsTb: '483d8b', DsTg: '2f4f4f', Dtrq: '-ced1', Dvt: '94-d3', ppnk: '1493', pskb: '-bfff', mgr: '696969', grb: '1e90ff', rbrc: 'b22222', rwht: 'af0', stg: '228b22', chs: '-ff', gnsb: 'dcdcdc', st: '8f8ff', g: 'd7-', gnr: 'daa520', gr: '808080', grn: '-8-0', grnw: 'adff2f', hnw: '0fff0', htpn: '69b4', nnr: 'cd5c5c', ng: '4b-82', vr: '0', khk: '0e68c', vnr: 'e6e6fa', nrb: '0f5', wngr: '7cfc-', mnch: 'acd', Lb: 'add8e6', Lcr: '08080', Lcn: 'e0ffff', Lgnr: 'afad2', Lgr: 'd3d3d3', Lgrn: '90ee90', Lpnk: 'b6c1', Lsmn: 'a07a', Lsgr: '20b2aa', Lskb: '87cefa', LsTg: '778899', Lstb: 'b0c4de', Lw: 'e0', m: '-ff-', mgrn: '32cd32', nn: 'af0e6', mgnt: '-ff', mrn: '8--0', mqm: '66cdaa', mmb: '--cd', mmrc: 'ba55d3', mmpr: '9370db', msg: '3cb371', mmsT: '7b68ee', '': '-fa9a', mtr: '48d1cc', mmvt: 'c71585', mnLb: '191970', ntc: '5fffa', mstr: 'e4e1', mccs: 'e4b5', vjw: 'dead', nv: '--80', c: 'df5e6', v: '808-0', vrb: '6b8e23', rng: 'a5-', rngr: '45-', rch: 'da70d6', pgnr: 'eee8aa', pgrn: '98fb98', ptrq: 'afeeee', pvtr: 'db7093', ppwh: 'efd5', pchp: 'dab9', pr: 'cd853f', pnk: 'c0cb', pm: 'dda0dd', pwrb: 'b0e0e6', prp: '8-080', cc: '663399', r: '--', sbr: 'bc8f8f', rb: '4169e1', sbrw: '8b4513', smn: 'a8072', nbr: '4a460', sgrn: '2e8b57', ssh: '5ee', snn: 'a0522d', svr: 'c0c0c0', skb: '87ceeb', sTb: '6a5acd', sTgr: '708090', snw: 'afa', n: '-ff7f', stb: '4682b4', tn: 'd2b48c', t: '-8080', thst: 'd8bfd8', tmT: '6347', trqs: '40e0d0', vt: 'ee82ee', whT: '5deb3', wht: '', hts: '5f5f5', w: '-', wgrn: '9acd32' };
function printNum(num) {
var decs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var str = decs > 0 ? num.toFixed(decs).replace(/0+$/, '').replace(/\.$/, '') : num.toString();
return str || '0';
}
var Color = function () {
function Color(r, g, b, a) {
classCallCheck(this, Color);
var that = this;
function parseString(input) {
if (input.startsWith('hsl')) {
var _input$match$map = input.match(/([\-\d\.e]+)/g).map(Number),
_input$match$map2 = slicedToArray(_input$match$map, 4),
h = _input$match$map2[0],
s = _input$match$map2[1],
l = _input$match$map2[2],
_a = _input$match$map2[3];
if (_a === undefined) {
_a = 1;
}
h /= 360;
s /= 100;
l /= 100;
that.hsla = [h, s, l, _a];
} else if (input.startsWith('rgb')) {
var _input$match$map3 =