@salla.sa/twilight-components 2.14.353 → 2.14.354

package/dist/esm/salla-conditional-offer.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-6mr785rH.js';
+import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
 
 var DiscountType;
 (function (DiscountType) {

package/dist/esm/salla-contacts.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-6mr785rH.js';
-import { w as whatsapp } from './whatsapp2-DWksgowB.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { W as WhatsappIcon } from './whatsapp2-CgR-T_ZS.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
 
 var mobile = `<!-- Generated by IcoMoon.io -->
@@ -32,7 +32,7 @@ const SallaContacts = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.contacts = salla.config.get('store.contacts');
-        this.iconsList = { mobile, whatsapp, phone, telegram, email: MailIcon };
+        this.iconsList = { mobile, whatsapp: WhatsappIcon, phone, telegram, email: MailIcon };
         this.contactSlot = this.host.querySelector('[slot="contact"]')?.innerHTML || `<a href={link} class="s-contacts-item"><span class="s-contacts-icon">{icon}</span>${!this.iconsOnly && "<span class='unicode'>{value}</span>"}</a>`;
         salla.onReady(() => {
             this.contacts = salla.config.get('store.contacts');

package/dist/esm/salla-count-down_2.entry.js

@@ -0,0 +1,299 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { S as Star } from './star2-D4oPi1Ov.js';
+
+const sallaCountDownCss = "";
+
+const SallaCountDown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The size of the count down
+         * */
+        this.size = 'md';
+        /**
+         * The color of the count down
+         * */
+        this.color = 'dark';
+        /**
+         * The digits lang to show in the count down
+         * */
+        this.digits = 'auto';
+        this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
+        this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
+        this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
+        this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
+        this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
+        this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
+        this.offerEnded = false;
+        this.days = this.number(0);
+        this.hours = this.number(0);
+        this.minutes = this.number(0);
+        this.seconds = this.number(0);
+        salla.lang.onLoaded(() => {
+            this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
+            this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
+            this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
+            this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
+            this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
+            this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
+        });
+        if (this.date && this.isValidDate(this.date)) {
+            this.startCountDown();
+        }
+    }
+    /**
+     * End the count down
+     * */
+    async endCountDown() {
+        clearInterval(this.countInterval);
+        this.offerEnded = true;
+        this.days = this.number(0);
+        this.hours = this.number(0);
+        this.minutes = this.number(0);
+        this.seconds = this.number(0);
+    }
+    componentWillLoad() {
+        if (typeof this.preOrder === 'string') {
+            try {
+                this.normalizedPreOrder = JSON.parse(this.preOrder);
+            }
+            catch {
+                this.normalizedPreOrder = undefined;
+            }
+        }
+        else {
+            this.normalizedPreOrder = this.preOrder;
+        }
+        if (this.normalizedPreOrder?.end_date) {
+            this.date = this.normalizedPreOrder.end_date;
+            if (this.date && this.isValidDate(this.date)) {
+                this.startCountDown();
+            }
+        }
+    }
+    isValidDate(date) {
+        let dateHasDashes = date.includes('-'), dateParts = date.split(' '), testedDate;
+        if (dateHasDashes) {
+            testedDate = dateParts[0].replace(/-/g, '/');
+        }
+        else {
+            testedDate = dateParts[0];
+        }
+        return !isNaN(Date.parse(testedDate));
+    }
+    number(digit) {
+        return salla.helpers.number(digit, this.digits === 'en');
+    }
+    startCountDown() {
+        let countDownDate = new Date(this.date.replace(/-/g, '/'));
+        if (this.endOfDay || this.date.split(' ').length === 1) {
+            countDownDate.setHours(23, 59, 59, 999);
+        }
+        let countDownTime = countDownDate.getTime();
+        this.countInterval = setInterval(() => {
+            let now = new Date().getTime();
+            let distance = countDownTime - now;
+            this.days = this.number(Math.floor(distance / (1000 * 60 * 60 * 24)));
+            this.hours = this.number(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
+            this.minutes = this.number(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
+            this.seconds = this.number(Math.floor((distance % (1000 * 60)) / 1000));
+            if (distance < 0) {
+                this.endCountDown();
+            }
+        }, 1000);
+    }
+    renderCountDown() {
+        return (h("ul", { class: `s-count-down-list ${this.boxed ? 's-count-down-boxed' : ''} ${this.offerEnded ? 's-count-down-ended' : ''} s-count-down-${this.size} s-count-down-${this.color}` }, h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.seconds), this.labeled && h("div", { class: "s-count-down-item-label" }, this.secondsLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.minutes), this.labeled && h("div", { class: "s-count-down-item-label" }, this.minutesLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.hours), this.labeled && h("div", { class: "s-count-down-item-label" }, this.hoursLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.days), this.labeled && h("div", { class: "s-count-down-item-label" }, this.daysLabel))));
+    }
+    renderInvalidDate() {
+        return h("div", { class: "s-count-down-text-center" }, this.invalidDate);
+    }
+    renderOfferEnded() {
+        return h("div", { class: "s-count-down-end-text" }, !!this.endText ? this.endText : this.endLabel);
+    }
+    renderPreOrderToBeAvailableOn() {
+        if (!this.normalizedPreOrder?.availability_date ||
+            !this.isValidDate(this.normalizedPreOrder?.availability_date))
+            return null;
+        return (h("div", { class: "s-count-down-info-message" }, h("i", { class: "sicon-info" }), h("span", null, salla.lang.getWithDefault('pages.products.expected_to_be', 'متوقَّع توفُّره بتاريخ:')), h("span", null, new Date(this.normalizedPreOrder?.availability_date).toLocaleDateString(salla.lang.locale, {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }))));
+    }
+    renderPreOrderCountDown() {
+        if (!this.normalizedPreOrder?.activate_countdown)
+            return null;
+        return (h("div", { class: "s-count-down-pre-order-container" }, h("p", { class: "text-sm " }, salla.lang.getWithDefault('pages.products.pre_order_ends_in', 'ينتهي الطلب المسبق خلال:')), this.renderCountDown()));
+    }
+    renderPreOrder() {
+        return (h("div", null, typeof this.normalizedPreOrder === 'object' &&
+            this.normalizedPreOrder?.availability_date &&
+            this.renderPreOrderToBeAvailableOn(), this.renderPreOrderCountDown()));
+    }
+    renderPrefixText() {
+        if (!this.prefixText)
+            return null;
+        return h("span", { class: "s-count-down-prefix-text" }, this.prefixText);
+    }
+    renderButton() {
+        if (!this.withButton || !this.buttonText)
+            return null;
+        return h("salla-button", { color: "primary", size: "medium", href: this.buttonHref }, this.buttonIcon ? h("i", { class: this.buttonIcon }) : null, h("span", null, this.buttonText));
+    }
+    renderContent() {
+        if (!this.date)
+            return null;
+        if (!this.isValidDate(this.date)) {
+            return this.renderInvalidDate();
+        }
+        if (this.preOrder) {
+            return this.renderPreOrder();
+        }
+        return this.renderCountDown();
+    }
+    render() {
+        return (h(Host, { key: '11e7cf7cf77bbde82d990107b7ccda8f1fc9ad6f', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+    }
+};
+SallaCountDown.style = sallaCountDownCss;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // 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) {
+        if (id && id !== this.productData.id) {
+            return;
+        }
+        this.wishlistBtn?.classList.toggle('s-product-card-wishlist-added', isAdded);
+    }
+    formatDate(date) {
+        let d = new Date(date);
+        return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+    }
+    getProductBadge() {
+        if (this.productData.promotion_title) {
+            return h("div", { class: "s-product-card-promotion-title" }, this.productData.promotion_title);
+        }
+        if (this.showQuantity && this.productData?.quantity) {
+            return h("div", { class: "s-product-card-quantity" }, this.remained, " ", salla.helpers.number(this.productData?.quantity));
+        }
+        if (this.showQuantity && this.productData?.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() {
+        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(this.productData?.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(this.productData?.starting_price) }));
+        }
+        return h("h4", { class: "s-product-card-price", innerHTML: this.getPriceFormat(this.productData?.price) });
+    }
+    render() {
+        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': this.productData?.donation,
+            's-product-card-shadow': this.shadowOnHover,
+            's-product-card-out-of-stock': this.productData?.is_out_of_stock,
+        };
+        const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
+        return (h(Host, { key: '95347f86f3dc0354a057290ce41f74aef0a66282', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '86927cbc56a2ea92a8e18c44c8999ee1d6f82b4d', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '6294925bce0a46287389a9423b16199cf92919fd', ...hrefProp }, h("img", { key: '74e0d9fae7c61e0e3e0e20e38166d64618c8ca3d', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+                ? 'contain'
+                : this.fitImageHeight
+                    ? this.fitImageHeight
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'fd2db94c99d91815b13141460a8c4538aae4a53b', ...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: '9f4f39db770a394d9719664cd77111aef1c575f4', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+            h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.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: 'eab2c5f49112dd490733e0b6f1e8c30ad9670690', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '5fadc35b2bf704903bf38128c390f71ec0a8b910', class: "s-product-card-content-title" }, h("a", { key: '7e0767efef938e20ed4c2592a0abec812a9caf86', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
+            h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
+            : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
+            [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.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: 'f29cdbd8b8bb715583ecb6c6bcc571c64341ee39', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
+            h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), 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() {
+        document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
+        if (this.productData?.quantity && this.isSpecial) {
+            this.initCircleBar();
+        }
+        if (!salla.config.isGuest() && salla.storage.get('salla::wishlist', []).includes(this.productData?.id)) {
+            this.toggleFavoriteIcon();
+        }
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get host() { return getElement(this); }
+};
+SallaProductCard.style = sallaProductCardCss;
+
+export { SallaCountDown as salla_count_down, SallaProductCard as salla_product_card };

package/dist/esm/salla-custom-fields.entry.js

@@ -1,8 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h } from './index-6mr785rH.js';
-import { C as CameraIcon, F as FormFieldTypes } from './interfaces-CBT_Nxny.js';
+import { r as registerInstance, c as createEvent, h } from './index-B74h9G6a.js';
+import { C as CameraIcon } from './camera-C6jIkM-X.js';
+import { F as FormFieldTypes } from './interfaces-OF8QcbMM.js';
 
 const sallaCustomFieldsCss = ":host{display:block}";
 

package/dist/esm/salla-filters-widget.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-6mr785rH.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B74h9G6a.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import './anime.es-CgtvEd63.js';

package/dist/esm/salla-filters.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-6mr785rH.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B74h9G6a.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import './anime.es-CgtvEd63.js';