@salla.sa/twilight-components
Version:
Salla Web Component
4 lines • 12.7 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import{r as e,h as t,H as s,a}from"./p-BQQ2x3w_.js";import{P as l}from"./p-DY4LZmNP.js";import{I as o}from"./p-C-tzSDxw.js";const i=class{constructor(t){e(this,t),this.variant="info"}renderIcon(){const e=this.icon||this.variant;if("none"===e)return null;switch(e){case"success":return t("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"currentColor"},t("path",{d:"M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z"}));case"warning":return t("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"currentColor"},t("path",{d:"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"}));case"error":return t("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"currentColor"},t("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 t("span",{innerHTML:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n<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"/>\n</svg>\n'})}}render(){return t(s,{key:"3b5dd808399eeda5d930454542cd41cca26b0cc3",class:`s-alert-wrapper s-alert-${this.variant}`},t("span",{key:"4f58234774d1afc790fb83bff983ca9366faa349",class:"s-alert-icon"},this.renderIcon()),t("span",{key:"10eb3f87e6e77dcc5406a24f866feee1cc1f46ef",class:"s-alert-text"},this.message,t("slot",{key:"3656e15aeb25fb7285e88f694c090bad3b32dfbd"})))}};i.style=":host{display:block}";const n=class{constructor(t){e(this,t),this.storeId=salla.config.get("store.id"),this.template=salla.config.get("store.template"),this.loading=!1,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",!0),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","تفاصيل أكثر"),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","المتاجر الجاهزة"),this.moreDetailsLabel=salla.lang.getWithDefault("common.elements.more_details","More Details")}),100)}))}componentDidLoad(){this.template&&"object"==typeof this.template&&Object.keys(this.template).length>0&&this.fetchTemplateData()}open(){return this.drawer.open()}fetchTemplateData(){if(!Object.keys(this.templateData).length)return this.loading=!0,salla.api.request("/store/template",{},"get",{"Store-Identifier":this.storeId}).then((e=>{this.templateData=e.data,this.loading=!1})).catch((()=>{this.loading=!1}))}handleAction(){"link"===this.type&&(window.location.href=this.actionUrl),"popup"===this.type&&this.open()}popup(){return t("salla-drawer",{class:"s-bottom-alert-modal",ref:e=>this.drawer=e,"no-padding":!0,onLoad:()=>{this.drawer&&Object.keys(this.templateData).length&&this.drawer.setTitle(this.storeDetails+" "+this.storeName)}},Object.keys(this.templateData).length?[t("div",{class:"s-bottom-alert-modal-inner s-scrollbar"},t("div",{class:{"s-bottom-alert-modal-content":!0}},this.templateData?.features?[t("div",{class:"s-bottom-alert-modal-content-title"},t("i",{innerHTML:o,class:"s-bottom-alert-modal-content-icon"}),t("span",null,this.storeFeatures)),t("div",{class:"s-bottom-alert-modal-content-features",innerHTML:this.templateData?.features})]:""),t("div",{class:{"s-bottom-alert-modal-content":!0,"s-bottom-alert-modal-content-extra-padding":this.templateData?.price}},this.templateData?.features?[t("div",{class:"s-bottom-alert-modal-content-title"},t("i",{innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>money-card</title>\n<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>\n</svg>\n',class:"s-bottom-alert-modal-content-icon"}),t("span",null,this.storePriceDetails)),t("div",{class:"s-bottom-alert-modal-content-price-details"},this.templateData?.price_details?.items.map((e=>t("div",{class:"s-bottom-alert-modal-content-price-details-item"},t("i",{innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>check-circle</title>\n<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>\n</svg>\n',class:"s-bottom-alert-modal-content-price-details-item-icon"}),t("span",{class:"s-bottom-alert-modal-content-price-details-item-name"},e.name),t("span",{class:"s-bottom-alert-modal-content-price-details-item-price",innerHTML:salla.money(e.price)})))))]:""),this.templateData?.link?t("div",{class:"s-bottom-alert-modal-content-footer"},t("salla-button",{color:"primary",size:"medium",width:"wide",href:this.templateData?.link},t("i",{innerHTML:l}),this.buyTheTemplate)):"")]:"")}render(){const e=this.template&&"object"==typeof this.template&&Object.keys(this.template).length>0;return t(s,{key:"e5f273d72875760e30d99d419b247137583bc450",class:"s-bottom-alert-wrapper "+(e?"s-bottom-alert-wrapper-with-template":"")},e&&t("div",{key:"1db37d7c67aae449f41a9a3ed83489b2a0653cef",class:"s-bottom-alert-logo-section"},t("img",{key:"18701cd3d807042b4d852f283d43a6855282f791",src:"https://cdn.salla.network/images/logo/logo-light.svg",alt:"Salla",class:"s-bottom-alert-logo"}),t("span",{key:"66bb3f9b3c00aee5c2694d5ddb142e753ae7fa1a",class:"s-bottom-alert-logo-text"},this.readyStores)),t("div",{key:"01d47c9ec38370b83bdb3fdc29291f55e1b3aa42",class:"s-bottom-alert-content"},t("div",{key:"5380873bf9d393c0fa18da196e1bfb675a8c9c9b",class:"flex items-center gap-2"},t("div",{key:"882382de35a7c9a767e2eb90305c8a973d01ac21",class:"s-bottom-alert-icon"},t("i",this.icon?{class:this.icon}:{innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>info</title>\n<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>\n</svg>\n'})),t("div",{key:"dfbaa427fd4e8b755a479e0b5459422e44a95f59",class:"s-bottom-alert-message"},this.message?this.message:e?t("span",{class:"flex flex-wrap items-center gap-1"},this.defaultMessage,t("span",{class:{"s-bottom-alert-message-highlight":!0},"aria-label":"Developer"},this.salla),t("span",{innerHTML:salla.money(this.template.price)})):this.defaultMessage)),"banner"!==this.type&&t("div",{key:"327ef4b5ecdab7d994418c033a78c2531eb28de5",class:e?"s-bottom-alert-actions-group":"s-bottom-alert-action"},e?this.loading?t("salla-loading",{size:"20"}):t("div",{class:"s-bottom-alert-actions-group-container"},t("a",{class:"s-bottom-alert-action-link",onClick:()=>this.handleAction()},this.actionLabel||this.moreDetailsLabel),this.templateData?.link?t("button",{type:"button",class:"s-bottom-alert-action-purchase-button",onClick:()=>window.open(this.templateData?.link,"_blank")},this.buyTheTemplate):null):t("salla-button",{href:this.actionUrl,size:"medium",onClick:()=>this.handleAction(),width:"normal"},this.actionLabel||this.defaultActionLabel)),"popup"===this.type&&this.popup()))}get host(){return a(this)}};n.style=":host{display:block}";export{i as salla_alert,n as salla_bottom_alert}