@salla.sa/twilight-components 2.14.352 → 2.14.354

package/dist/cjs/salla-advertisement.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Z-cyrNSM.js');
+var index = require('./index-Ce40E8tZ.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 
 const sallaAdvertisementCss = ":host{display:block}";

package/dist/cjs/salla-alert_2.cjs.entry.js

@@ -0,0 +1,194 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+var index = require('./index-Ce40E8tZ.js');
+var cart = require('./cart-s-x1Fshk.js');
+var image = require('./image-BoZ6Hums.js');
+
+var informationIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99935 18.3332C5.39697 18.3332 1.66602 14.6022 1.66602 9.99984C1.66602 5.39746 5.39697 1.6665 9.99935 1.6665C14.6017 1.6665 18.3327 5.39746 18.3327 9.99984C18.3327 14.6022 14.6017 18.3332 9.99935 18.3332ZM9.99935 16.6665C13.6813 16.6665 16.666 13.6818 16.666 9.99984C16.666 6.31794 13.6813 3.33317 9.99935 3.33317C6.31745 3.33317 3.33268 6.31794 3.33268 9.99984C3.33268 13.6818 6.31745 16.6665 9.99935 16.6665ZM9.16602 5.83317H10.8327V7.49984H9.16602V5.83317ZM9.16602 9.1665H10.8327V14.1665H9.16602V9.1665Z" fill="#417AC8"/>
+</svg>
+`;
+
+const sallaAlertCss = ":host{display:block}";
+
+const SallaAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Variant theme */
+        this.variant = 'info';
+    }
+    renderIcon() {
+        const type = this.icon || this.variant;
+        if (type === 'none')
+            return null;
+        switch (type) {
+            case 'success':
+                return (index.h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, index.h("path", { d: "M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z" })));
+            case 'warning':
+                return (index.h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, index.h("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })));
+            case 'error':
+                return (index.h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, index.h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 \n                     10 10 10-4.48 10-10S17.52 2 12 2zm5 \n                     13.59L15.59 17 12 13.41 8.41 17 \n                     7 15.59 10.59 12 7 8.41 8.41 7 \n                     12 10.59 15.59 7 17 8.41 13.41 \n                     12 17 15.59z" })));
+            default:
+                return index.h("span", { innerHTML: informationIcon });
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '3b5dd808399eeda5d930454542cd41cca26b0cc3', class: `s-alert-wrapper s-alert-${this.variant}` }, index.h("span", { key: '4f58234774d1afc790fb83bff983ca9366faa349', class: "s-alert-icon" }, this.renderIcon()), index.h("span", { key: '10eb3f87e6e77dcc5406a24f866feee1cc1f46ef', class: "s-alert-text" }, this.message, index.h("slot", { key: '3656e15aeb25fb7285e88f694c090bad3b32dfbd' }))));
+    }
+};
+SallaAlert.style = sallaAlertCss;
+
+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 moneyIcon = `<!-- 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>money-card</title>
+<path d="M17.333 14.667h-2.667c-0.736 0-1.333-0.599-1.333-1.333s0.597-1.333 1.333-1.333h4c0.737 0 1.333-0.597 1.333-1.333s-0.596-1.333-1.333-1.333h-1.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333c-2.205 0-4 1.795-4 4s1.795 4 4 4h2.667c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-4c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h1.333v1.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-1.333c2.205 0 4-1.795 4-4s-1.795-4-4-4zM28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.736-0.597 1.333-1.333 1.333h-24c-0.736 0-1.333-0.597-1.333-1.333v-18.667c0-0.735 0.597-1.333 1.333-1.333h24c0.736 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+var checkCircleIcon = `<!-- 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>check-circle</title>
+<path d="M19.557 11.26l-4.593 6.891-2.891-1.927c-0.616-0.411-1.441-0.243-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l4 2.667c0.228 0.152 0.485 0.224 0.739 0.224 0.431 0 0.855-0.208 1.111-0.593l5.333-8c0.409-0.612 0.244-1.441-0.369-1.849-0.616-0.411-1.443-0.243-1.849 0.369zM16 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>
+`;
+
+const sallaBottomAlertCss = ":host{display:block}";
+
+const SallaBottomAlert = class {
+    constructor(hostRef) {
+        index.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.getWithDefault('common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
+        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.storePriceDetails = salla.lang.getWithDefault('common.elements.store_price_details', 'السعر يشمل');
+        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);
+        this.storeName = salla.config.get('store.name');
+        this.salla = salla.lang.getWithDefault('common.elements.salla', 'سلة');
+        this.readyStores = salla.lang.getWithDefault('common.elements.ready_stores', 'المتاجر الجاهزة');
+        this.moreDetailsLabel = salla.lang.getWithDefault('common.elements.more_details', 'تفاصيل أكثر');
+        /**
+         * 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.more_details', 'تفاصيل أكثر');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.more_details', 'More Details');
+            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');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price_details', 'السعر يشمل');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price_details', 'Price Includes');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.salla', 'سلة');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.salla', 'Salla');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_is_available_for_purchase', 'This ready store is available for purchase from');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.ready_stores', 'المتاجر الجاهزة');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.ready_stores', 'Ready Stores');
+            setTimeout(() => {
+                this.storePrice = salla.lang.get('common.elements.store_price');
+                this.theDeveloper = salla.lang.get('common.elements.the_developer');
+                this.storePriceDetails = salla.lang.getWithDefault('common.elements.store_price_details', 'السعر يشمل');
+                this.salla = salla.lang.getWithDefault('common.elements.salla', 'سلة');
+                this.defaultMessage = salla.lang.getWithDefault('common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
+                this.readyStores = salla.lang.getWithDefault('common.elements.ready_stores', 'المتاجر الجاهزة');
+                // Initialize moreDetailsLabel after translations loaded
+                this.moreDetailsLabel = salla.lang.getWithDefault('common.elements.more_details', 'More Details');
+            }, 100);
+        });
+    }
+    componentDidLoad() {
+        // Fetch template data on mount if there's a template
+        if (this.template &&
+            typeof this.template === 'object' &&
+            Object.keys(this.template).length > 0) {
+            this.fetchTemplateData();
+        }
+    }
+    open() {
+        return this.drawer.open();
+    }
+    fetchTemplateData() {
+        if (Object.keys(this.templateData).length) {
+            return;
+        }
+        this.loading = true;
+        return salla.api
+            .request(`/store/template`, {}, 'get', { 'Store-Identifier': this.storeId })
+            .then(res => {
+            this.templateData = res.data;
+            this.loading = false;
+        })
+            .catch(() => {
+            this.loading = false;
+        });
+    }
+    handleAction() {
+        if (this.type === 'link') {
+            window.location.href = this.actionUrl;
+        }
+        if (this.type === 'popup') {
+            this.open();
+        }
+    }
+    popup() {
+        return (index.h("salla-drawer", { class: "s-bottom-alert-modal", ref: drawer => (this.drawer = drawer), "no-padding": true, onLoad: () => {
+                if (this.drawer && Object.keys(this.templateData).length) {
+                    this.drawer.setTitle(this.storeDetails + ' ' + this.storeName);
+                }
+            } }, Object.keys(this.templateData).length
+            ? [
+                index.h("div", { class: "s-bottom-alert-modal-inner s-scrollbar" }, index.h("div", { class: { 's-bottom-alert-modal-content': true } }, this.templateData?.features
+                    ? [
+                        index.h("div", { class: "s-bottom-alert-modal-content-title" }, index.h("i", { innerHTML: image.ImageIcon, class: "s-bottom-alert-modal-content-icon" }), index.h("span", null, this.storeFeatures)),
+                        index.h("div", { class: "s-bottom-alert-modal-content-features", innerHTML: this.templateData?.features }),
+                    ]
+                    : ''), index.h("div", { class: {
+                        's-bottom-alert-modal-content': true,
+                        's-bottom-alert-modal-content-extra-padding': this.templateData?.price,
+                    } }, this.templateData?.features
+                    ? [
+                        index.h("div", { class: "s-bottom-alert-modal-content-title" }, index.h("i", { innerHTML: moneyIcon, class: "s-bottom-alert-modal-content-icon" }), index.h("span", null, this.storePriceDetails)),
+                        index.h("div", { class: "s-bottom-alert-modal-content-price-details" }, this.templateData?.price_details?.items.map(item => (index.h("div", { class: "s-bottom-alert-modal-content-price-details-item" }, index.h("i", { innerHTML: checkCircleIcon, class: "s-bottom-alert-modal-content-price-details-item-icon" }), index.h("span", { class: "s-bottom-alert-modal-content-price-details-item-name" }, item.name), index.h("span", { class: "s-bottom-alert-modal-content-price-details-item-price", innerHTML: salla.money(item.price) }))))),
+                    ]
+                    : ''), this.templateData?.link ? (index.h("div", { class: "s-bottom-alert-modal-content-footer" }, index.h("salla-button", { color: "primary", size: "medium", width: "wide", href: this.templateData?.link }, index.h("i", { innerHTML: cart.PendingOrdersIcon }), this.buyTheTemplate))) : ('')),
+            ]
+            : ''));
+    }
+    render() {
+        const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
+        return (index.h(index.Host, { key: 'e5f273d72875760e30d99d419b247137583bc450', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (index.h("div", { key: '1db37d7c67aae449f41a9a3ed83489b2a0653cef', class: "s-bottom-alert-logo-section" }, index.h("img", { key: '18701cd3d807042b4d852f283d43a6855282f791', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), index.h("span", { key: '66bb3f9b3c00aee5c2694d5ddb142e753ae7fa1a', class: "s-bottom-alert-logo-text" }, this.readyStores))), index.h("div", { key: '01d47c9ec38370b83bdb3fdc29291f55e1b3aa42', class: "s-bottom-alert-content" }, index.h("div", { key: '5380873bf9d393c0fa18da196e1bfb675a8c9c9b', class: "flex items-center gap-2" }, index.h("div", { key: '882382de35a7c9a767e2eb90305c8a973d01ac21', class: "s-bottom-alert-icon" }, this.icon ? index.h("i", { class: this.icon }) : index.h("i", { innerHTML: infoIcon })), index.h("div", { key: 'dfbaa427fd4e8b755a479e0b5459422e44a95f59', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (index.h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, index.h("span", { class: {
+                's-bottom-alert-message-highlight': true,
+            }, "aria-label": "Developer" }, this.salla), index.h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (index.h("div", { key: '327ef4b5ecdab7d994418c033a78c2531eb28de5', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (index.h("salla-loading", { size: "20" })) : (index.h("div", { class: "s-bottom-alert-actions-group-container" }, index.h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (index.h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (index.h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
+    }
+    get host() { return index.getElement(this); }
+};
+SallaBottomAlert.style = sallaBottomAlertCss;
+
+exports.salla_alert = SallaAlert;
+exports.salla_bottom_alert = SallaBottomAlert;

package/dist/cjs/salla-app-install-alert.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Z-cyrNSM.js');
+var index = require('./index-Ce40E8tZ.js');
 
 const sallaAppInstallAlertCss = ":host{display:block}";
 
@@ -31,12 +31,17 @@ const SallaAppInstallAlert = class {
     }
     /**
      * Check if the website opens from mobile or tablet devices only (android/ios).
+     * Uses matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed).
+     * Guards against SSR/non-browser contexts (window, navigator, document).
      *
-     * @param {number} screen the width of the biggest screen to be checked
+     * @param {number} screen the width of the biggest screen to be checked (default 1024)
      * @returns {boolean} true if it is mobile or tablet else false
      */
     isMobileOrTabletDevice(screen = 1024) {
-        const screenWidth = window.innerWidth <= screen;
+        if (typeof window === 'undefined' || typeof navigator === 'undefined' || typeof document === 'undefined') {
+            return false;
+        }
+        const screenWidth = window.matchMedia(`(max-width: ${screen}px)`).matches;
         const userAgentCheck = /Macintosh|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
         const hasTouch = 'ontouchstart' in window ||
             'ontouchend' in document ||

package/dist/cjs/salla-apps-icons.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Z-cyrNSM.js');
+var index = require('./index-Ce40E8tZ.js');
 
 const sallaAppsIconsCss = ":host{display:block}";