@salla.sa/twilight-components 1.0.15 → 1.0.17

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

@@ -0,0 +1 @@
+import{r as s,h as t,H as i,g as e,c as l}from"./p-cb1c59a2.js";import{H as a}from"./p-9bc28e0c.js";export{S as salla_login}from"./p-93c3ac79.js";const h=class{constructor(t){s(this,t),this.btnStyle="primary",this.loading=!1,this.disabled=!1,this.loaderPosition="before",this.wide=!1,this.hostAttributes={};for(let s=0;s<this.host.attributes.length;s++)this.hostAttributes[this.host.attributes[s].name]=this.host.attributes[s].value;this.hostAttributes.type=this.hostAttributes.type||"button",this.hostAttributes.class+=" s-button-btn btn--has-loading s-button-"+this.btnStyle+(this.wide?" s-button-wide ":"")+" loader-"+this.loaderPosition+("before"==this.loaderPosition?" s-button-loader-after":""),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"),this.host}async disable(){this.host.setAttribute("disabled","")}async enable(){this.host.removeAttribute("disabled")}handleVisible(s,t){this.btn.classList.remove("btn-"+t),this.btn.classList.add("btn-"+s)}handleLoading(s){a.toggleElement(this.btn,"btn--is-loading","btn--no-loading",(()=>s))}render(){return t(i,{class:"s-button-host-tag"},t("button",Object.assign({ref:s=>this.btn=s,disabled:this.disabled},this.hostAttributes),t("span",{class:"s-button-text",ref:s=>this.text=s},t("slot",null)),this.loading?t("span",{class:{"s-button-loader":!0,"s-button-loader-start":"start"===this.loaderPosition,"s-button-loader-end":"end"===this.loaderPosition,"s-button-loader-center":"center"===this.loaderPosition}}):""))}get host(){return e(this)}static get watchers(){return{btnStyle:["handleVisible"],loading:["handleLoading"]}}};h.style=":host{display:block}";const o=class{constructor(t){var i;s(this,t),this.modalOpened=l(this,"modalOpened",7),this.modalClosed=l(this,"modalClosed",7),this.error=!1,this.success=!1,this.primary=!1,this.isClosable=!0,this.width="md",this.visible=!1,this.isLoading=!1,this.subTitleFirst=!1,this.subTitle="",this.icon="",this.imageIcon="",a.setHost(this.host),salla.event.on("modal::open",(s=>s.dataset.target==this.host.id&&this.show())),salla.event.on("modal::close",(s=>s.dataset.target==this.host.id&&this.hide())),this.title=this.host.title,this.host.removeAttribute("title"),null===(i=a.getElement("[slot=body]"))||void 0===i||i.classList.add("s-modal-body","s-modal-"+this.width)}handleVisible(s){if(!s)return this.toggleModal(!1),void this.modalClosed.emit();this.host.classList.remove("hidden"),setTimeout((()=>this.toggleModal(!0))),this.modalOpened.emit()}async show(){return this.host.setAttribute("visible",""),this.host}async hide(){return this.host.removeAttribute("visible"),this.host}async setTitle(s){return this.title=s,this.host}async loading(){return this.isLoading=!0,this.host}async stopLoading(){return this.isLoading=!1,this.host}toggleModal(s){a.toggleElement(this.host.querySelector("[slot=body]")||this.host,"s-modal-entering","s-modal-leaving",(()=>s)).toggleElement(this.overlay,"s-modal-entering","s-modal-overlay-leaving",(()=>s)).toggleElement(document.body,"modal-is-open","modal-is-closed",(()=>s)),s||setTimeout((()=>this.host.classList.add("hidden")),350)}closeModal(){this.isClosable&&this.host.removeAttribute("visible")}render(){return this.host.id=this.host.id||"salla-modal",t(i,{class:"s-modal-container hidden","aria-modal":"true",role:"dialog"},t("div",{class:"s-modal-wrapper"},t("div",{class:"s-modal-overlay",ref:s=>this.overlay=s,onClick:()=>this.closeModal()}),t("span",{class:"s-modal-spacer"},"​"),t("slot",{name:"body"},t("div",{class:"s-modal-body s-modal-"+this.width,slot:"body"},this.isLoading?t("span",null,"Loading..."):[t("div",{class:{"s-modal-header":!0,"s-modal-is-center":""!=this.icon||""!=this.imageIcon}},this.isClosable?t("button",{class:"s-modal-close cursor-pointer",onClick:()=>this.closeModal(),type:"button"},t("span",{class:"sicon-cancel"})):"",this.error||this.success||this.icon?t("div",{class:{"s-modal-icon":!0,"s-modal-bg-error":this.error,"s-modal-bg-success":this.success,"s-modal-bg-normal":!this.error&&!this.success,"s-modal-bg-primary":this.primary}},t("i",{class:{[this.icon]:!0,"s-modal-text-error":this.error,"s-modal-text-success":this.success}})):this.imageIcon?t("img",{class:"s-modal-header-img",src:this.imageIcon}):"",this.title||this.subTitle?t("div",{class:"s-modal-header-content"},t("div",{class:{"s-modal-title":!0,"s-modal-title-below":this.subTitleFirst},innerHTML:this.title}),t("p",{class:{"s-modal-sub-title":!0},innerHTML:this.subTitle})):""),t("slot",null),t("slot",{name:"footer"})]))))}get host(){return e(this)}static get watchers(){return{visible:["handleVisible"]}}},r=class{constructor(t){s(this,t),this.verified=l(this,"verified",7),this.url="profile/verify-mobile",this.by="sms",this.autoReload=!0,a.setHost(this.host),this.withoutModal?this.modal={show:()=>"",hide:()=>""}:salla.event.on("profile::verify.mobile",(s=>this.show(s)))}async getCode(){return this.code.value}async show(s){return this.data=s,this.resendTimer(),this.otpInputs=document.querySelectorAll(".s-verify-input"),this.otpInputs[0].focus(),a.on("input",".s-verify-input",(s=>salla.helpers.digitsOnly(s.target))),a.onKeyUp(".s-verify-input",(s=>{var t,i,e,l;let a=s.keyCode||s.charCode;s.target.value?(null===(t=s.target.nextElementSibling)||void 0===t||t.focus(),null===(i=s.target.nextElementSibling)||void 0===i||i.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-input",(s=>{let t=s.clipboardData.getData("text").toArabicDigits().replace(/[^0-9.]/g,"").replace("..",".");this.otpInputs.forEach(((s,i)=>s.value=t[i]||"")),this.toggleOTPSubmit(),setTimeout((()=>this.otpInputs[3].focus()),100)})),this.modal.show()}toggleOTPSubmit(){let s=[];if(this.otpInputs.forEach((t=>t.value&&s.push(t.value))),this.code.value=s.join(""),4===s.length)return this.btn.removeAttribute("disabled"),void this.btn.click();this.btn.setAttribute("disabled","")}resendTimer(){a.showElement(this.resendMessage).hideElement(this.resend);let s=30,t=setInterval((()=>{-1===s?(clearTimeout(t),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(){return this.btn.load().then((()=>this.btn.disable())).then((()=>salla.document.api.request(this.url,Object.assign({code:this.code.value},this.data)))).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()))}render(){return this.withoutModal?this.myBody():t("salla-modal",{id:"s-verify",ref:s=>this.modal=s,title:salla.lang.get("pages.profile.verify_title")},this.myBody())}myBody(){return[t("div",{class:"s-verify-message",innerHTML:salla.lang.get("pages.profile.verify_message")}),t("label",{class:"s-verify-label"},salla.lang.get("pages.profile.verify_placeholder")),t("input",{type:"hidden",name:"code",maxlength:"4",required:!0,ref:s=>this.code=s}),t("div",{class:"s-verify-codes",dir:"ltr"},[1,2,3,4].map((()=>t("input",{type:"text",maxlength:"1",class:"s-verify-input",required:!0})))),t("div",{slot:"footer",class:"s-verify-footer"},t("salla-button",{class:"s-verify-submit",disabled:!0,onClick:()=>this.submit(),ref:s=>this.btn=s},salla.lang.get("pages.profile.verify")),t("p",{class:"s-verify-resend-message",ref:s=>this.resendMessage=s},salla.lang.get("blocks.header.resend_after"),t("b",{class:"s-verify-timer",ref:s=>this.timer=s})),t("a",{href:"#",class:"s-verify-resend",onClick:()=>this.resendCode(),ref:s=>this.resend=s},salla.lang.get("blocks.comments.submit")))]}get host(){return e(this)}};export{h as salla_button,o as salla_modal,r as salla_verify}

package/dist/twilight-components/twilight-components.esm.js

@@ -1 +1 @@
-import{p as e,b as s}from"./p-cb1c59a2.js";(()=>{const s=import.meta.url,l={};return""!==s&&(l.resourcesUrl=new URL(".",s).href),e(l)})().then((e=>s([["p-68c9f122",[[4,"salla-button",{btnStyle:[513,"btn-style"],loading:[516],disabled:[516],loaderPosition:[1,"loader-position"],wide:[4],load:[64],stop:[64],disable:[64],enable:[64]}]]],["p-010b8dfd",[[0,"salla-login"],[4,"salla-modal",{error:[4],success:[4],isClosable:[1028,"is-closable"],modalWidth:[513,"modal-width"],visible:[516],subTitleFirst:[4,"sub-title-first"],subTitle:[1,"sub-title"],icon:[1],imageIcon:[1,"image-icon"],show:[64],hide:[64],setTitle:[64]}]]],["p-8126278e",[[4,"salla-branches",{position:[1],displayAs:[1,"display-as"],browseProductsFrom:[1,"browse-products-from"],branches:[16],current:[1026],open:[32],selected:[32],isOpenedBefore:[32],show:[64],hide:[64]}]]],["p-50e70ad4",[[4,"salla-localization",{languagesTitle:[1,"languages-title"],currenciesTitle:[1,"currencies-title"],ok:[1],show:[64],hide:[64],submit:[64]}]]],["p-d584d0c7",[[4,"salla-product-availability",{channels:[1],buttonText:[1,"button-text"],countryCode:[1,"country-code"],subscribeText:[1,"subscribe-text"],cancelText:[1,"cancel-text"],subTitle:[1,"sub-title"],mobileLabel:[1,"mobile-label"],emailLabel:[1,"email-label"],mobilePlaceholder:[1,"mobile-placeholder"],emailPlaceholder:[1,"email-placeholder"],productId:[2,"product-id"],subscribedMessage:[1,"subscribed-message"],isSubscribed:[1028,"is-subscribed"],submit:[64]}]]],["p-b05450bc",[[0,"salla-rating",{orderId:[2,"order-id"],thanksMsg:[1,"thanks-msg"],isStoreRating:[4,"is-store-rating"],isProductsRating:[4,"is-products-rating"],isShippingRating:[4,"is-shipping-rating"],show:[64],hide:[64]}]]],["p-9d327a79",[[0,"salla-verify"]]],["p-32d29245",[[0,"salla-search",{placeholder:[1],noResultsText:[1,"no-results-text"],results:[32]},[[0,"close","onModalClose"]]]]]],e)));
+import{p as e,b as l}from"./p-cb1c59a2.js";(()=>{const l=import.meta.url,s={};return""!==l&&(s.resourcesUrl=new URL(".",l).href),e(s)})().then((e=>l([["p-fa2f0e64",[[0,"salla-login",{loginTypeTitle:[1,"login-type-title"],loginText:[1,"login-text"],smsLabel:[1,"sms-label"],mobileLabel:[1,"mobile-label"],emailLabel:[1,"email-label"],enterText:[1,"enter-text"],bySMSText:[1,"by-s-m-s-text"],byEmailText:[1,"by-email-text"],backText:[1,"back-text"],show:[64]},[[0,"verified","onVerified"],[0,"modalClosed","onModalClose"]]],[0,"salla-verify",{withoutModal:[4,"without-modal"],url:[1],by:[1],autoReload:[4,"auto-reload"],getCode:[64],show:[64]}],[4,"salla-button",{btnStyle:[513,"btn-style"],loading:[516],disabled:[516],loaderPosition:[1,"loader-position"],wide:[4],load:[64],stop:[64],disable:[64],enable:[64]}],[4,"salla-modal",{error:[4],success:[4],primary:[4],isClosable:[1028,"is-closable"],width:[513],visible:[516],isLoading:[1540,"is-loading"],subTitleFirst:[4,"sub-title-first"],subTitle:[1,"sub-title"],icon:[1],imageIcon:[1,"image-icon"],title:[32],show:[64],hide:[64],setTitle:[64],loading:[64],stopLoading:[64]}]]],["p-fa04c4b6",[[4,"salla-branches",{position:[1],displayAs:[1,"display-as"],browseProductsFrom:[1,"browse-products-from"],branches:[16],current:[1026],open:[32],selected:[32],isOpenedBefore:[32],show:[64],hide:[64]}]]],["p-a923a51e",[[4,"salla-localization",{languagesTitle:[1,"languages-title"],currenciesTitle:[1,"currencies-title"],ok:[1],show:[64],hide:[64],submit:[64]}]]],["p-33990e49",[[4,"salla-product-availability",{channels:[1],buttonText:[1,"button-text"],countryCode:[1,"country-code"],subscribeText:[1,"subscribe-text"],cancelText:[1,"cancel-text"],subTitle:[1,"sub-title"],mobileLabel:[1,"mobile-label"],emailLabel:[1,"email-label"],mobilePlaceholder:[1,"mobile-placeholder"],emailPlaceholder:[1,"email-placeholder"],productId:[2,"product-id"],subscribedMessage:[1,"subscribed-message"],isSubscribed:[1028,"is-subscribed"],submit:[64]}]]],["p-3cfede65",[[0,"salla-rating",{orderId:[2,"order-id"],thanksMsg:[1,"thanks-msg"],isStoreRating:[4,"is-store-rating"],isProductsRating:[4,"is-products-rating"],isShippingRating:[4,"is-shipping-rating"],show:[64],hide:[64]}]]],["p-648661c8",[[4,"salla-offer",{show:[64]}]]],["p-bc278b0e",[[0,"salla-search",{placeholder:[1],noResultsText:[1,"no-results-text"],results:[32]},[[0,"modalClosed","onModalClose"]]]]]],e)));

package/dist/types/components/salla-button/salla-button.d.ts

@@ -1,10 +1,11 @@
 export declare class SallaButton {
   constructor();
+  private text;
   host: HTMLElement;
-  btnStyle: string;
+  btnStyle: 'primary' | 'outline' | 'outline-primary' | 'danger';
   loading: boolean;
   disabled: boolean;
-  loaderPosition: string;
+  loaderPosition: 'start' | 'end' | 'center' | 'before';
   wide: boolean;
   load(): Promise<HTMLElement>;
   stop(): Promise<HTMLElement>;

package/dist/types/components/salla-localization/salla-localization.d.ts

@@ -1,3 +1,9 @@
+/**
+ * @slot header - The top of the modal.
+ * @slot footer - Replaces the bottom button.
+ * @slot language - Replaces language label, has replaceable props `{name}`, `{code}`, `{country_code}`.
+ * @slot currency - Replaces currency label, has replaceable props `{name}`, `{code}`, `{country_code}`.
+ */
 export declare class SallaLocalization {
   constructor();
   private modal;
@@ -12,6 +18,8 @@ export declare class SallaLocalization {
   host: HTMLElement;
   show(): Promise<HTMLElement>;
   hide(): Promise<HTMLElement>;
+  private onChangeCurrency;
+  private onChangeLanguage;
   submit(): Promise<void>;
   render(): any;
   /**

package/dist/types/components/salla-login/salla-login.d.ts

@@ -1,3 +1,42 @@
 export declare class SallaLogin {
+  constructor();
+  private modal;
+  private tab1;
+  private tab2;
+  private tab3;
+  private tab4;
+  private tab5;
+  private regMobile;
+  private regEmail;
+  private regMobileBlock;
+  private regEmailBlock;
+  private mobile;
+  private email;
+  private firstName;
+  private lastName;
+  private regType;
+  private readonly title;
+  host: HTMLElement;
+  loginTypeTitle: string;
+  loginText: string;
+  smsLabel: string;
+  mobileLabel: string;
+  emailLabel: string;
+  enterText: string;
+  bySMSText: string;
+  byEmailText: string;
+  backText: string;
+  /**
+   * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
+   */
+  onVerified(event: any): any;
+  onModalClose(): void;
+  show(): Promise<HTMLElement>;
+  private showTab;
+  private loginByEmail;
+  private loginBySMS;
+  private typing;
+  private newUser;
   render(): any;
+  componentDidRender(): void;
 }

package/dist/types/components/salla-modal/salla-modal.d.ts

@@ -1,24 +1,32 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot body - The content of modal
+ * @slot footer - The footer of modal
+ */
 export declare class SallaModal {
   constructor();
   error: boolean;
   success: boolean;
+  primary: boolean;
   isClosable: boolean;
-  modalWidth: string;
+  width: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
   visible: boolean;
+  isLoading: boolean;
   subTitleFirst: boolean;
   subTitle: string;
   icon: string;
   imageIcon: string;
-  private title;
+  title: string;
   private overlay;
   host: HTMLElement;
-  ready: EventEmitter;
-  close: EventEmitter;
+  modalOpened: EventEmitter;
+  modalClosed: EventEmitter;
   handleVisible(newValue: boolean): void;
   show(): Promise<HTMLElement>;
   hide(): Promise<HTMLElement>;
   setTitle(title: any): Promise<HTMLElement>;
+  loading(): Promise<HTMLElement>;
+  stopLoading(): Promise<HTMLElement>;
   private toggleModal;
   private closeModal;
   render(): any;

package/dist/types/components/salla-offer/salla-offer.d.ts

@@ -0,0 +1,8 @@
+export declare class SallaOffer {
+  private modal;
+  host: HTMLElement;
+  constructor();
+  show(offerId: number): Promise<void>;
+  render(): any;
+  componentDidLoad(): void;
+}

package/dist/types/components/salla-rating/salla-rating.d.ts

@@ -1,15 +1,29 @@
 export declare class SallaRating {
-  nextBtn: HTMLSallaButtonElement;
   constructor();
-  stars: Number[];
   order: any;
+  /**
+   * Ratted order Id
+  */
   orderId: number;
+  /**
+   * Display this message after sending user feedback
+  */
   thanksMsg: string;
+  /**
+   * Set to true to display store rating step
+  */
   isStoreRating: boolean;
+  /**
+   * Set to true to display products rating step
+  */
   isProductsRating: boolean;
+  /**
+   * Set to true to display shipping rating step
+  */
   isShippingRating: boolean;
-  ratingChain: Promise<void>;
-  stepsCount: number;
+  private ratingChain;
+  private stepsCount;
+  private nextBtn;
   private modal;
   host: HTMLElement;
   show(): Promise<HTMLElement>;
@@ -20,16 +34,16 @@ export declare class SallaRating {
   private handleWizard;
   private showActiveStep;
   private setModalHeight;
+  private handleSubmitRating;
+  private starsRating;
+  private highlightSelectedStars;
   private sendRating;
   private sendFeedback;
   private ratingValidation;
-  private getData;
-  private starsRating;
-  private highlightSelectedStars;
   render(): any;
   renderStoreRating(): any;
-  renderProductsRating(): any;
   renderShippingRating(): any;
+  renderProductsRating(): any;
   renderThanksView(): any;
-  getStarsRating(): any;
+  getStarsRating(size: any): any;
 }

package/dist/types/components/salla-verify/salla-verify.d.ts

@@ -1,6 +1,5 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SallaVerify {
-  constructor();
-  host: HTMLElement;
   private modal;
   private code;
   private btn;
@@ -8,12 +7,23 @@ export declare class SallaVerify {
   private timer;
   private resend;
   private otpInputs;
-  private mobile;
-  private country_code;
-  private show;
+  private data;
+  host: HTMLElement;
+  /**
+   * Should render component without modal
+   */
+  withoutModal: boolean;
+  url: string;
+  by: string;
+  autoReload: boolean;
+  verified: EventEmitter;
+  constructor();
+  getCode(): Promise<string>;
+  show(data: any): Promise<any>;
   private toggleOTPSubmit;
   private resendTimer;
-  private submit;
   private resendCode;
+  private submit;
   render(): any;
+  private myBody;
 }

package/dist/types/components.d.ts

@@ -16,12 +16,12 @@ export namespace Components {
         "show": () => Promise<HTMLElement>;
     }
     interface SallaButton {
-        "btnStyle": string;
+        "btnStyle": 'primary' | 'outline' | 'outline-primary' | 'danger';
         "disable": () => Promise<void>;
         "disabled": boolean;
         "enable": () => Promise<void>;
         "load": () => Promise<HTMLElement>;
-        "loaderPosition": string;
+        "loaderPosition": 'start' | 'end' | 'center' | 'before';
         "loading": boolean;
         "stop": () => Promise<HTMLElement>;
         "wide": boolean;
@@ -35,6 +35,16 @@ export namespace Components {
         "submit": () => Promise<void>;
     }
     interface SallaLogin {
+        "backText": string;
+        "byEmailText": string;
+        "bySMSText": string;
+        "emailLabel": string;
+        "enterText": string;
+        "loginText": string;
+        "loginTypeTitle": string;
+        "mobileLabel": string;
+        "show": () => Promise<HTMLElement>;
+        "smsLabel": string;
     }
     interface SallaModal {
         "error": boolean;
@@ -42,13 +52,20 @@ export namespace Components {
         "icon": string;
         "imageIcon": string;
         "isClosable": boolean;
-        "modalWidth": string;
+        "isLoading": boolean;
+        "loading": () => Promise<HTMLElement>;
+        "primary": boolean;
         "setTitle": (title: any) => Promise<HTMLElement>;
         "show": () => Promise<HTMLElement>;
+        "stopLoading": () => Promise<HTMLElement>;
         "subTitle": string;
         "subTitleFirst": boolean;
         "success": boolean;
         "visible": boolean;
+        "width": 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    }
+    interface SallaOffer {
+        "show": (offerId: number) => Promise<void>;
     }
     interface SallaProductAvailability {
         "buttonText": string;
@@ -68,11 +85,26 @@ export namespace Components {
     }
     interface SallaRating {
         "hide": () => Promise<HTMLElement>;
+        /**
+          * Set to true to display products rating step
+         */
         "isProductsRating": boolean;
+        /**
+          * Set to true to display shipping rating step
+         */
         "isShippingRating": boolean;
+        /**
+          * Set to true to display store rating step
+         */
         "isStoreRating": boolean;
+        /**
+          * Ratted order Id
+         */
         "orderId": number;
         "show": () => Promise<HTMLElement>;
+        /**
+          * Display this message after sending user feedback
+         */
         "thanksMsg": string;
     }
     interface SallaSearch {
@@ -86,6 +118,15 @@ export namespace Components {
         "placeholder": string;
     }
     interface SallaVerify {
+        "autoReload": boolean;
+        "by": string;
+        "getCode": () => Promise<string>;
+        "show": (data: any) => Promise<any>;
+        "url": string;
+        /**
+          * Should render component without modal
+         */
+        "withoutModal": boolean;
     }
 }
 declare global {
@@ -119,6 +160,12 @@ declare global {
         prototype: HTMLSallaModalElement;
         new (): HTMLSallaModalElement;
     };
+    interface HTMLSallaOfferElement extends Components.SallaOffer, HTMLStencilElement {
+    }
+    var HTMLSallaOfferElement: {
+        prototype: HTMLSallaOfferElement;
+        new (): HTMLSallaOfferElement;
+    };
     interface HTMLSallaProductAvailabilityElement extends Components.SallaProductAvailability, HTMLStencilElement {
     }
     var HTMLSallaProductAvailabilityElement: {
@@ -149,6 +196,7 @@ declare global {
         "salla-localization": HTMLSallaLocalizationElement;
         "salla-login": HTMLSallaLoginElement;
         "salla-modal": HTMLSallaModalElement;
+        "salla-offer": HTMLSallaOfferElement;
         "salla-product-availability": HTMLSallaProductAvailabilityElement;
         "salla-rating": HTMLSallaRatingElement;
         "salla-search": HTMLSallaSearchElement;
@@ -164,9 +212,9 @@ declare namespace LocalJSX {
         "position"?: string;
     }
     interface SallaButton {
-        "btnStyle"?: string;
+        "btnStyle"?: 'primary' | 'outline' | 'outline-primary' | 'danger';
         "disabled"?: boolean;
-        "loaderPosition"?: string;
+        "loaderPosition"?: 'start' | 'end' | 'center' | 'before';
         "loading"?: boolean;
         "wide"?: boolean;
     }
@@ -176,19 +224,32 @@ declare namespace LocalJSX {
         "ok"?: string;
     }
     interface SallaLogin {
+        "backText"?: string;
+        "byEmailText"?: string;
+        "bySMSText"?: string;
+        "emailLabel"?: string;
+        "enterText"?: string;
+        "loginText"?: string;
+        "loginTypeTitle"?: string;
+        "mobileLabel"?: string;
+        "smsLabel"?: string;
     }
     interface SallaModal {
         "error"?: boolean;
         "icon"?: string;
         "imageIcon"?: string;
         "isClosable"?: boolean;
-        "modalWidth"?: string;
-        "onClose"?: (event: CustomEvent<any>) => void;
-        "onReady"?: (event: CustomEvent<any>) => void;
+        "isLoading"?: boolean;
+        "onModalClosed"?: (event: CustomEvent<any>) => void;
+        "onModalOpened"?: (event: CustomEvent<any>) => void;
+        "primary"?: boolean;
         "subTitle"?: string;
         "subTitleFirst"?: boolean;
         "success"?: boolean;
         "visible"?: boolean;
+        "width"?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    }
+    interface SallaOffer {
     }
     interface SallaProductAvailability {
         "buttonText"?: string;
@@ -206,10 +267,25 @@ declare namespace LocalJSX {
         "subscribedMessage"?: string;
     }
     interface SallaRating {
+        /**
+          * Set to true to display products rating step
+         */
         "isProductsRating"?: boolean;
+        /**
+          * Set to true to display shipping rating step
+         */
         "isShippingRating"?: boolean;
+        /**
+          * Set to true to display store rating step
+         */
         "isStoreRating"?: boolean;
+        /**
+          * Ratted order Id
+         */
         "orderId"?: number;
+        /**
+          * Display this message after sending user feedback
+         */
         "thanksMsg"?: string;
     }
     interface SallaSearch {
@@ -223,6 +299,14 @@ declare namespace LocalJSX {
         "placeholder"?: string;
     }
     interface SallaVerify {
+        "autoReload"?: boolean;
+        "by"?: string;
+        "onVerified"?: (event: CustomEvent<any>) => void;
+        "url"?: string;
+        /**
+          * Should render component without modal
+         */
+        "withoutModal"?: boolean;
     }
     interface IntrinsicElements {
         "salla-branches": SallaBranches;
@@ -230,6 +314,7 @@ declare namespace LocalJSX {
         "salla-localization": SallaLocalization;
         "salla-login": SallaLogin;
         "salla-modal": SallaModal;
+        "salla-offer": SallaOffer;
         "salla-product-availability": SallaProductAvailability;
         "salla-rating": SallaRating;
         "salla-search": SallaSearch;
@@ -245,6 +330,7 @@ declare module "@stencil/core" {
             "salla-localization": LocalJSX.SallaLocalization & JSXBase.HTMLAttributes<HTMLSallaLocalizationElement>;
             "salla-login": LocalJSX.SallaLogin & JSXBase.HTMLAttributes<HTMLSallaLoginElement>;
             "salla-modal": LocalJSX.SallaModal & JSXBase.HTMLAttributes<HTMLSallaModalElement>;
+            "salla-offer": LocalJSX.SallaOffer & JSXBase.HTMLAttributes<HTMLSallaOfferElement>;
             "salla-product-availability": LocalJSX.SallaProductAvailability & JSXBase.HTMLAttributes<HTMLSallaProductAvailabilityElement>;
             "salla-rating": LocalJSX.SallaRating & JSXBase.HTMLAttributes<HTMLSallaRatingElement>;
             "salla-search": LocalJSX.SallaSearch & JSXBase.HTMLAttributes<HTMLSallaSearchElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "license": "MIT",
   "keywords": [
     "twilight",
@@ -67,6 +67,7 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
+    "@salla.sa/twilight": "^2.0.36",
     "store": "^2.0.12"
   }
 }

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

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0b5b5867.js');
-const Helper = require('./Helper-8852feaa.js');
-
-const sallaButtonCss = ":host{display:block}";
-
-const SallaButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.btnStyle = 'primary'; // outline, outline-primary ,danger
-    this.loading = false;
-    this.disabled = false;
-    this.loaderPosition = 'before';
-    this.wide = false;
-    this.hostAttributes = {};
-    //============= Initiate Button Attributes =============//
-    for (let i = 0; i < this.host.attributes.length; i++) {
-      this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
-    }
-    this.hostAttributes.type = this.hostAttributes.type || 'button';
-    this.hostAttributes.class += ' s-button-btn btn--has-loading '
-      + 'btn-' + this.btnStyle
-      + (this.wide ? ' s-button-wide ' : '')
-      + 'loader-' + this.loaderPosition
-      + (this.loaderPosition == 'before' ? ' flex-row-reverse' : '');
-    // if(this.hostAttributes.onclick){
-    //   this.hostAttributes.onclick=eval(this.hostAttributes.onclick);
-    // }
-    delete this.hostAttributes['btn-style'];
-    delete this.hostAttributes['id'];
-    if (this.wide) {
-      this.host.classList.add('s-button-wide');
-    }
-  }
-  async load() {
-    if (this.loaderPosition == 'center')
-      this.host.querySelector('.btn-text').classList.add('opacity-0');
-    this.host.setAttribute('loading', '');
-    return this.host;
-  }
-  async stop() {
-    this.host.removeAttribute('loading');
-    return this.host;
-  }
-  async disable() {
-    this.host.setAttribute('disabled', '');
-  }
-  async enable() {
-    this.host.removeAttribute('disabled');
-  }
-  handleVisible(newKind, oldKind) {
-    this.btn.classList.remove('btn-' + oldKind);
-    this.btn.classList.add('btn-' + newKind);
-  }
-  handleLoading(newVal) {
-    Helper.Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
-  }
-  render() {
-    return (index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: "btn-text transition-opacity duration-300" }, index.h("slot", null)), this.loading ? index.h("span", { class: {
-        'loader loader--small s-button-loader': true,
-        'absolute right-2': this.loaderPosition === 'start',
-        'absolute left-2': this.loaderPosition === 'end',
-        'absolute top-1/2 left-1/2 !-translate-x-1/2 !-translate-y-1/2 !m-0': this.loaderPosition === 'center',
-      } }) : ''));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "btnStyle": ["handleVisible"],
-    "loading": ["handleLoading"]
-  }; }
-};
-SallaButton.style = sallaButtonCss;
-
-exports.salla_button = SallaButton;

package/dist/cjs/salla-login-6a54572d.js

@@ -1,14 +0,0 @@
-'use strict';
-
-const index = require('./index-0b5b5867.js');
-
-const SallaLogin = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("salla-modal", { id: "salla-login", title: "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639" }, index.h("div", { id: "showLoginMethods" }, index.h("p", { class: "text-sm text-gray-text mb-5" }, "\u0627\u062E\u062A\u0631 \u0627\u0644\u0648\u0633\u064A\u0644\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629"), index.h("div", { id: "openEmailLogin", class: "mb-2.5 box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" }, index.h("i", { class: "sicon-mail" }))), index.h("div", { class: "flex-1 min-w-0" }, index.h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" }, index.h("div", { class: "flex-1" }, index.h("span", { class: "absolute inset-0", "aria-hidden": "true" }), index.h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"), index.h("h6", { class: "font-boldf" }, "\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A")), index.h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))), index.h("div", { class: "box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" }, index.h("i", { class: "sicon-phone" }))), index.h("div", { class: "flex-1 min-w-0" }, index.h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" }, index.h("div", { class: "flex-1" }, index.h("span", { class: "absolute inset-0", "aria-hidden": "true" }), index.h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"), index.h("h6", { class: "font-boldf" }, "\u0627\u0644\u0647\u0627\u062A\u0641")), index.h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))))));
-  }
-};
-
-exports.SallaLogin = SallaLogin;