@salla.sa/twilight-components 1.0.53 → 1.0.55

package/dist/types/components.d.ts

@@ -17,13 +17,17 @@ export namespace Components {
     }
     interface SallaButton {
         /**
-          * Button Style
+          * Button Type
          */
-        "btnStyle": 'primary' | 'outline' | 'outline-primary' | 'danger' | 'link' | 'link-danger';
+        "buttonType": 'link' | 'icon' | 'btn';
+        /**
+          * Button Color
+         */
+        "color": 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark';
         /**
           * Add `disabled` attribute
          */
-        "disable": () => Promise<void>;
+        "disable": () => Promise<HTMLElement>;
         /**
           * Is the button currently disabled
          */
@@ -31,11 +35,15 @@ export namespace Components {
         /**
           * Remove `disabled` attribute
          */
-        "enable": () => Promise<void>;
+        "enable": () => Promise<HTMLElement>;
+        /**
+          * Button Fill
+         */
+        "fill": 'solid' | 'outline' | 'none';
         /**
-          * Circle Button with icon
+          * Button with href as normal link
          */
-        "icon": boolean;
+        "href": string;
         /**
           * Run loading animation
          */
@@ -48,15 +56,15 @@ export namespace Components {
           * Is the button currently loading
          */
         "loading": boolean;
-        /**
-          * Mini Circle Button with icon
-         */
-        "miniIcon": boolean;
         /**
           * Changing the body of the button
           * @param html
          */
         "setText": (html: string) => Promise<HTMLElement>;
+        /**
+          * Button Size
+         */
+        "size": 'small' | 'large' | 'medium';
         /**
           * Stop loading animation
          */
@@ -65,6 +73,10 @@ export namespace Components {
           * Is the button wide
          */
         "wide": boolean;
+        /**
+          * Button Width
+         */
+        "width": 'wide' | 'normal';
     }
     interface SallaInfiniteScroll {
         /**
@@ -360,17 +372,25 @@ declare namespace LocalJSX {
     }
     interface SallaButton {
         /**
-          * Button Style
+          * Button Type
+         */
+        "buttonType"?: 'link' | 'icon' | 'btn';
+        /**
+          * Button Color
          */
-        "btnStyle"?: 'primary' | 'outline' | 'outline-primary' | 'danger' | 'link' | 'link-danger';
+        "color"?: 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark';
         /**
           * Is the button currently disabled
          */
         "disabled"?: boolean;
         /**
-          * Circle Button with icon
+          * Button Fill
          */
-        "icon"?: boolean;
+        "fill"?: 'solid' | 'outline' | 'none';
+        /**
+          * Button with href as normal link
+         */
+        "href"?: string;
         /**
           * If there is need to change loader position, pass the position
          */
@@ -380,13 +400,17 @@ declare namespace LocalJSX {
          */
         "loading"?: boolean;
         /**
-          * Mini Circle Button with icon
+          * Button Size
          */
-        "miniIcon"?: boolean;
+        "size"?: 'small' | 'large' | 'medium';
         /**
           * Is the button wide
          */
         "wide"?: boolean;
+        /**
+          * Button Width
+         */
+        "width"?: 'wide' | 'normal';
     }
     interface SallaInfiniteScroll {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "license": "MIT",
   "keywords": [
     "twilight",

package/dist/twilight-components/p-17ebe444.entry.js

@@ -1 +0,0 @@
-export{S as salla_login_modal}from"./p-10ea748b.js";import"./p-cb1c59a2.js";import"./p-ed1c00c5.js";

package/dist/twilight-components/p-669a9b08.entry.js

@@ -1 +0,0 @@
-import{r as s,h as a,g as o}from"./p-cb1c59a2.js";import{H as e}from"./p-ed1c00c5.js";const l=class{constructor(a){var o,l;s(this,a),this.offer=null,this.offer_expires_in=salla.lang.get("pages.products.offer_expires_in"),this.remember_my_choice=salla.lang.get("commone.remember_my_choice"),e.setHost(this.host),salla.event.on("languages::translations.loaded",(()=>{this.offer_expires_in=salla.lang.get("pages.products.offer_expires_in"),this.remember_my_choice=salla.lang.get("common.remember_my_choice")})),this.categorySlot=(null===(o=e.getElement('[slot="category"]'))||void 0===o?void 0:o.innerHTML)||'<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>',this.productSlot=(null===(l=e.getElement('[slot="product"]'))||void 0===l?void 0:l.innerHTML)||this.defaultProductSlot(),salla.offer.event.onExisted((s=>{salla.storage.get("remember-offer-"+s.offer.offer_id)?salla.log("User selected to don't show this offer again."):this.show(s.product_id)}))}async show(s){return salla.api.offer.details(s).then((s=>this.showOffer(s.data[0])))}async showOffer(s){return this.offer=s,this.offer_name=s.name,this.offer_message=s.message,this.modal.show()}rememberMe(s){salla.storage.set("remember-offer-"+this.offer.id,s.target.checked)}addItem(){return this.load(),salla.cart.api.quickAdd(this.dataset.id).finally((()=>this.stop()))}defaultProductSlot(){return'<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a><div class="s-offer-modal-product-info">   <a href={url} class="s-offer-modal-product-name">{name}</a>   <div class="s-offer-modal-product-price">{price}</div></div>'}render(){var s,o;return a("salla-modal",{id:"salla-offer-modal","sub-title-first":!0,icon:"sicon-special-discount",title:"عروض رائعة في انتظارك، ماذا نتنظر!","sub-title":this.offer_message,ref:s=>this.modal=s,"is-loading":null===this.offer},null!==this.offer?[a("div",{class:"s-offer-modal-scrolled-slider-wrap"},a("div",{class:"s-offer-modal-body s-offer-modal-scrolled-slider"},(null===(s=this.offer.get.categories)||void 0===s?void 0:s.length)>0?this.offer.get.categories.map((s=>a("a",{href:s.urls.customer,class:"s-offer-modal-badge s-offer-modal-slider-item",innerHTML:this.categorySlot.replace(/\{name\}/g,s.name).replace(/\{url\}/g,s.urls.customer)}))):null===(o=this.offer.get.products)||void 0===o?void 0:o.map((s=>a("div",{class:"s-offer-modal-product s-offer-modal-slider-item",id:"product_"+s.id,innerHTML:this.productSlot.replace(/\{name\}/g,s.name).replace(/\{url\}/g,s.url).replace(/\{image\}/g,s.thumbnail).replace(/\{price\}/g,s.has_special_price?salla.money(s.price)+'<span class="s-offer-modal-product-old-price">'+salla.money(s.regular_price)+"</span>":salla.money(s.price))},a("div",{class:"s-offer-modal-btn-wrap"},a("salla-button",{wide:!0,"btn-style":"outline-primary","data-id":s.id,"loader-position":"center",onClick:this.addItem},salla.lang.get("pages.cart.add_to_cart"))))))),a("div",{class:"s-offer-modal-slider-nav"},a("button",{class:"s-offer-modal-nav-btn s-offer-modal-prev-btn"},a("span",{class:"s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right"})),a("button",{class:"s-offer-modal-nav-btn s-offer-modal-next-btn"},a("span",{class:"s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left"})))),a("div",{class:"s-offer-modal-footer",slot:"footer"},this.offer.expiry_date?a("p",{class:"s-offer-modal-expiry"},this.offer_expires_in," ",this.offer.expiry_date):"",a("label",{class:"s-offer-modal-remember-label"},a("input",{type:"checkbox",onChange:s=>this.rememberMe(s),class:"s-offer-modal-remember-input"}),"  ",this.remember_my_choice))]:"")}componentDidRender(){if(this.modal.querySelectorAll("[hidden]").forEach((s=>s.removeAttribute("hidden"))),this.offer&&window.screen.width>639){let s=this.host.querySelector(".s-offer-modal-scrolled-slider-wrap"),a=this.host.querySelector(".s-offer-modal-scrolled-slider"),o=this.host.querySelectorAll(".s-offer-modal-nav-btn"),e=this.host.querySelector(".s-offer-modal-next-btn"),l=this.host.querySelector(".s-offer-modal-prev-btn"),r=this.host.querySelectorAll(".s-offer-modal-slider-item"),t=20,i=0,d=3,f=r[0].offsetWidth,n=r.length*f,c=s.offsetWidth,m=n-c,h=!!document.body.classList.contains("rtl");m>t&&e.classList.add("s-offer-modal-btn-is-active"),window.onresize=function(){c=s.offsetWidth,m=n-c},a.addEventListener("scroll",(function(){let s=Math.abs(a.scrollLeft),o=m-t;s<=t?(e.classList.add("s-offer-modal-btn-is-active"),l.classList.remove("s-offer-modal-btn-is-active")):s<o?(e.classList.add("s-offer-modal-btn-is-active"),l.classList.add("s-offer-modal-btn-is-active")):s>=o&&(e.classList.remove("s-offer-modal-btn-is-active"),l.classList.add("s-offer-modal-btn-is-active"))})),o.forEach((s=>{s.addEventListener("click",(function(){s.classList.contains("s-offer-modal-next-btn")?i++:i--,a.scrollTo({top:0,left:f*d*i*(h?-1:1),behavior:"smooth"})}))}))}}get host(){return o(this)}};l.style="#salla-offer-modal .s-offer-modal-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-modal-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-modal-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";export{l as salla_offer_modal}

package/dist/twilight-components/p-78b10bac.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,H as o,g as n}from"./p-cb1c59a2.js";const e=class{constructor(s){t(this,s),this.btnStyle="primary",this.icon=!1,this.miniIcon=!1,this.loading=!1,this.disabled=!1,this.loaderPosition="after",this.wide=!1,this.hostAttributes={};for(let t=0;t<this.host.attributes.length;t++)this.hostAttributes[this.host.attributes[t].name]=this.host.attributes[t].value;this.hostAttributes.type=this.hostAttributes.type||"button",this.hostAttributes.class+=(this.icon?" s-button-icon s-button-loader-center":" s-button-btn s-button-loader-"+this.loaderPosition)+(this.wide?" s-button-wide ":"")+(this.disabled?" s-button-disabled ":" s-button-"+this.btnStyle)+(this.miniIcon?" s-button-mini-icon ":""),delete this.hostAttributes["btn-style"],delete this.hostAttributes.id,this.wide&&this.host.classList.add("s-button-wide")}async load(){return"center"==this.loaderPosition&&this.text.classList.add("s-button-hide"),this.host.setAttribute("loading",""),this.host}async stop(){return this.host.removeAttribute("loading"),"center"==this.loaderPosition&&this.text.classList.remove("s-button-hide"),this.host}async setText(t){return this.text.innerHTML=t,this.host}async disable(){this.host.setAttribute("disabled","")}async enable(){this.host.removeAttribute("disabled")}handleVisible(t,s){this.btn.classList.remove("btn-"+s),this.btn.classList.add("btn-"+t)}render(){return s(o,{class:"s-button-wrap"},s("button",Object.assign({ref:t=>this.btn=t},this.hostAttributes,{disabled:this.disabled}),s("span",{class:"s-button-text",ref:t=>this.text=t},s("slot",null)),this.loading?s("span",{class:"s-button-loader"}):""))}get host(){return n(this)}static get watchers(){return{btnStyle:["handleVisible"]}}};e.style="salla-button{pointer-events:none}salla-button[type=submit]{-webkit-appearance:none}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-text{opacity:0}.s-button-wrap .s-button-icon:not(:disabled),.s-button-wrap .s-button-btn:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start .s-button-loader{position:absolute;right:8px}.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr]{left:8px;right:auto}.s-button-wrap .s-button-loader-end .s-button-loader{position:absolute;left:8px}.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr]{right:8px;left:auto}.s-button-wrap .s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0 !important}.s-button-wrap .s-button-mini-icon .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-danger .s-button-loader::before,.s-button-wrap .s-button-outline-danger .s-button-loader::before{border-top-color:#f87171;border-left-color:#f87171}";export{e as salla_button}

package/dist/twilight-components/p-f0f51a3c.entry.js

@@ -1 +0,0 @@
-import{r as s,c as i,h as t,H as e,g as l}from"./p-cb1c59a2.js";import{H as a}from"./p-ed1c00c5.js";const r=class{constructor(t){s(this,t),this.verified=i(this,"verified",7),this.initiated=!1,this.by="sms",this.autoReload=!0,a.setHost(this.host),this.withoutModal?this.modal={show:()=>"",hide:()=>""}:salla.event.on("profile::verify.mobile",(s=>{this.url="profile/verify-mobile",this.show(s)})),salla.event.on("languages::translations.loaded",(()=>{var s;this.title=salla.lang.get("pages.profile.verify_title"),null===(s=this.btn)||void 0===s||s.setText(salla.lang.get("pages.profile.verify"))}))}async getCode(){return this.code.value}async show(s){var i;this.data=s,this.resendTimer(),this.otpInputs=this.host.querySelectorAll(".s-verify-modal-input"),this.initiated||(a.on("input",".s-verify-modal-input",(s=>salla.helpers.digitsOnly(s.target))),a.onKeyUp(".s-verify-modal-input",(s=>{var i,t,e,l;let a=s.keyCode||s.charCode;s.target.value?(null===(i=s.target.nextElementSibling)||void 0===i||i.focus(),null===(t=s.target.nextElementSibling)||void 0===t||t.select()):[8,46].includes(a)&&(null===(e=s.target.previousElementSibling)||void 0===e||e.focus(),null===(l=s.target.previousElementSibling)||void 0===l||l.select()),this.toggleOTPSubmit()})),a.on("paste",".s-verify-modal-input",(s=>{let i=s.clipboardData.getData("text").toArabicDigits().replace(/[^0-9.]/g,"").replace("..",".");this.otpInputs.forEach(((s,t)=>s.value=i[t]||"")),this.toggleOTPSubmit(),setTimeout((()=>this.otpInputs[3].focus()),100)})),this.initiated=!0),this.reset(),!this.withoutModal&&(null===(i=this.modal)||void 0===i||i.setTitle(this.title)),this.modal.show()}toggleOTPSubmit(){let s=[];if(this.otpInputs.forEach((i=>i.value&&s.push(i.value))),this.code.value=s.join(""),4===s.length)return this.btn.removeAttribute("disabled"),void this.btn.click();this.btn.setAttribute("disabled","")}reset(){this.otpInputs.forEach((s=>s.value="")),this.code.value="",this.otpInputs[0].focus()}resendTimer(){a.showElement(this.resendMessage).hideElement(this.resend);let s=30,i=setInterval((()=>{-1===s?(clearTimeout(i),a.hideElement(this.resendMessage).showElement(this.resend)):(this.timer.innerHTML=`${s>=10?s:"0"+s} : 00`,s--)}),1e3)}resendCode(){return this.btn.stop().then((()=>this.btn.disable())).then((()=>{this.otpInputs.forEach((s=>s.value="")),this.otpInputs[0].focus()})).then((()=>salla.api.auth.resend(Object.assign({resend_by:this.by},this.data)))).then((()=>this.resendTimer())).catch((()=>this.resendTimer()))}submit(){let s=Object.assign({code:this.code.value},this.data);return this.btn.load().then((()=>this.btn.disable())).then((()=>this.url?salla.api.auth.request(this.url,s):salla.api.auth.verify("sms"==this.by?"mobile":this.by,s))).then((s=>this.verified.emit(s))).then((()=>this.btn.stop()&&this.btn.disable())).then((()=>this.modal.hide())).then((()=>this.autoReload&&window.location.reload())).catch((()=>this.btn.stop()&&this.btn.enable()&&this.reset()))}render(){return this.withoutModal?this.myBody():t("salla-modal",{icon:"sicon-android-phone",width:"xs",id:"s-verify-modal",ref:s=>this.modal=s,title:this.title},this.myBody())}myBody(){return t(e,{id:"s-verify-modal"},t("div",{class:"s-verify-modal-message",innerHTML:salla.lang.get("pages.profile.verify_message")}),t("input",{type:"hidden",name:"code",maxlength:"4",required:!0,ref:s=>this.code=s}),t("div",{class:"s-verify-modal-codes",dir:"ltr"},[1,2,3,4].map((()=>t("input",{type:"text",maxlength:"1",class:"s-verify-modal-input",required:!0})))),t("div",{slot:"footer",class:"s-verify-modal-footer"},t("salla-button",{class:"s-verify-modal-submit","loader-position":"center",disabled:!0,onClick:()=>this.submit(),ref:s=>this.btn=s},salla.lang.get("pages.profile.verify")),t("p",{class:"s-verify-modal-resend-message",ref:s=>this.resendMessage=s},salla.lang.get("blocks.header.resend_after"),t("b",{class:"s-verify-modal-timer",ref:s=>this.timer=s})),t("a",{href:"#",class:"s-verify-modal-resend",onClick:()=>this.resendCode(),ref:s=>this.resend=s},salla.lang.get("blocks.comments.submit"))),t("slot",{name:"after-footer"}))}get host(){return l(this)}};r.style="salla-verify-modal{display:block}";export{r as salla_verify_modal}