@salla.sa/twilight-components 2.14.353 → 2.14.355

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B5soIVRX.js');
+var index = require('./index-DgOViweO.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-DgOViweO.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-B5soIVRX.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaAppInstallAlertCss = ":host{display:block}";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B5soIVRX.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaAppsIconsCss = ":host{display:block}";
 
@@ -11,7 +11,7 @@ const SallaAppsIcons = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.apps = salla.config.get('store.apps');
-        this.appSlot = this.host.querySelector('[slot="app"]')?.innerHTML || `<img alt={name} src={icon} width="135" height="40" />`;
+        this.appSlot = this.host.querySelector('[slot="app"]')?.innerHTML || `<img alt="{name}" src="{icon}" width="135" height="40" decoding="async" loading="lazy" />`;
         salla.onReady(() => {
             this.apps = salla.config.get('store.apps');
         });