@salla.sa/twilight-components 1.0.75 → 1.0.77

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

@@ -32,11 +32,11 @@ export declare class SallaRatingModal {
   /**
    * Show the rating modal
    */
-  show(): Promise<NodeJS.Timeout>;
+  open(): Promise<NodeJS.Timeout>;
   /**
    * Show the rating modal
    */
-  hide(): Promise<HTMLElement>;
+  close(): Promise<HTMLElement>;
   private handleWizard;
   private showActiveStep;
   private previousTab;

package/dist/types/components/salla-tel-input/salla-tel-input.d.ts

@@ -4,7 +4,11 @@ export declare class SallaTelInput {
   /**
    * Current mobile number
    */
-  mobile: string;
+  phone: string;
+  /**
+   * input name
+   */
+  name: string;
   /**
    * Current country_code
    */
@@ -28,7 +32,7 @@ export declare class SallaTelInput {
    * @return {{mobile:number,countryCode:'SA'|string}}
    */
   getValues(): Promise<{
-    mobile: string;
+    [x: string]: string;
     countryCode: string;
   }>;
   /**

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

@@ -4,6 +4,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @slot after-footer - placeholder position
  */
 export declare class SallaVerifyModal {
+  constructor();
   private modal;
   private code;
   private btn;
@@ -18,10 +19,6 @@ export declare class SallaVerifyModal {
    * Should render component without modal
    */
   withoutModal: boolean;
-  /**
-   * Submitting url, default will use salla api auth: `salla.api.auth.verify`
-   */
-  url?: string;
   /**
    * Verifying method
    */
@@ -35,17 +32,20 @@ export declare class SallaVerifyModal {
    */
   verified: EventEmitter;
   title: string;
-  constructor();
+  /**
+   * to use: `salla.api.auth.verify` or `salla.profile.verify`
+   */
+  isProfileVerify: boolean;
   /**
    * Get current code
    * @return {string}
    */
   getCode(): Promise<string>;
   /**
-   * Show verifying modal
+   * Open verifying modal
    * @param data
    */
-  show(data: any): Promise<void>;
+  open(data: any): Promise<void>;
   private toggleOTPSubmit;
   private reset;
   private resendTimer;

package/dist/types/components.d.ts

@@ -93,6 +93,10 @@ export namespace Components {
     interface SallaConditionalFields {
     }
     interface SallaInfiniteScroll {
+        /**
+          * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
+         */
+        "autoload": boolean;
         /**
           * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
          */
@@ -105,10 +109,6 @@ export namespace Components {
           * Next Page element
          */
         "nextPage": string;
-        /**
-          * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
-         */
-        "nextPageAutoload": boolean;
     }
     interface SallaInstallment {
         "currency": string;
@@ -116,16 +116,16 @@ export namespace Components {
         "price": string;
     }
     interface SallaLocalizationModal {
-        "currency": string;
         /**
           * Hide the component
          */
-        "hide": () => Promise<HTMLElement>;
+        "close": () => Promise<HTMLElement>;
+        "currency": string;
         "language": string;
         /**
-          * Show the component
+          * open the component
          */
-        "show": () => Promise<boolean>;
+        "open": () => Promise<boolean>;
         "submit": () => Promise<void>;
     }
     interface SallaLoginModal {
@@ -142,15 +142,15 @@ export namespace Components {
          */
         "isMobileAllowed": boolean;
         /**
-          * Show login component
+          * Open login component
          */
-        "show": () => Promise<HTMLElement>;
+        "open": () => Promise<HTMLElement>;
     }
     interface SallaModal {
         /**
-          * hide the modal
+          * close the modal
          */
-        "hide": () => Promise<HTMLElement>;
+        "close": () => Promise<HTMLElement>;
         /**
           * Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`
          */
@@ -170,6 +170,10 @@ export namespace Components {
          */
         "loading": () => Promise<HTMLElement>;
         "noPadding": boolean;
+        /**
+          * Open the modal
+         */
+        "open": () => Promise<HTMLElement>;
         /**
           * The position of the modal
          */
@@ -179,10 +183,6 @@ export namespace Components {
           * @param modalTitle
          */
         "setTitle": (modalTitle: any) => Promise<HTMLElement>;
-        /**
-          * Show the modal
-         */
-        "show": () => Promise<HTMLElement>;
         /**
           * Stop the loading
          */
@@ -190,7 +190,7 @@ export namespace Components {
         "subTitle": string;
         "subTitleFirst": boolean;
         /**
-          * Show the modal on rendering
+          * open the modal on rendering
          */
         "visible": boolean;
         /**
@@ -203,7 +203,7 @@ export namespace Components {
           * Show the available offers for the product
           * @param product_id
          */
-        "show": (product_id: number) => Promise<any>;
+        "open": (product_id: number) => Promise<any>;
         /**
           * Show offer details
           * @param offer
@@ -245,15 +245,15 @@ export namespace Components {
         /**
           * Show the rating modal
          */
-        "hide": () => Promise<HTMLElement>;
+        "close": () => Promise<HTMLElement>;
         /**
-          * The order id, to rate on its products & shipping
+          * Show the rating modal
          */
-        "orderId": number;
+        "open": () => Promise<NodeJS.Timeout>;
         /**
-          * Show the rating modal
+          * The order id, to rate on its products & shipping
          */
-        "show": () => Promise<NodeJS.Timeout>;
+        "orderId": number;
     }
     interface SallaRatingStars {
         "name": string;
@@ -274,16 +274,20 @@ export namespace Components {
           * Get current values
           * @return
          */
-        "getValues": () => Promise<{ mobile: string; countryCode: string; }>;
+        "getValues": () => Promise<{ [x: string]: string; countryCode: string; }>;
         /**
           * Is current data valid or not
           * @return
          */
         "isValid": () => Promise<boolean>;
+        /**
+          * input name
+         */
+        "name": string;
         /**
           * Current mobile number
          */
-        "mobile": string;
+        "phone": string;
     }
     interface SallaVerifyModal {
         /**
@@ -296,18 +300,14 @@ export namespace Components {
          */
         "getCode": () => Promise<string>;
         /**
-          * Show verifying modal
+          * Open verifying modal
           * @param data
          */
-        "show": (data: any) => Promise<void>;
+        "open": (data: any) => Promise<void>;
         /**
           * Verifying method
          */
         "type": 'mobile' | 'email';
-        /**
-          * Submitting url, default will use salla api auth: `salla.api.auth.verify`
-         */
-        "url"?: string;
         /**
           * Should render component without modal
          */
@@ -504,6 +504,10 @@ declare namespace LocalJSX {
     interface SallaConditionalFields {
     }
     interface SallaInfiniteScroll {
+        /**
+          * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
+         */
+        "autoload"?: boolean;
         /**
           * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
          */
@@ -516,10 +520,6 @@ declare namespace LocalJSX {
           * Next Page element
          */
         "nextPage"?: string;
-        /**
-          * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
-         */
-        "nextPageAutoload"?: boolean;
     }
     interface SallaInstallment {
         "currency"?: string;
@@ -569,7 +569,7 @@ declare namespace LocalJSX {
         "subTitle"?: string;
         "subTitleFirst"?: boolean;
         /**
-          * Show the modal on rendering
+          * open the modal on rendering
          */
         "visible"?: boolean;
         /**
@@ -617,10 +617,14 @@ declare namespace LocalJSX {
          */
         "countryCode"?: string;
         /**
-          * Current mobile number
+          * input name
          */
-        "mobile"?: string;
+        "name"?: string;
         "onEnterClicked"?: (event: CustomEvent<any>) => void;
+        /**
+          * Current mobile number
+         */
+        "phone"?: string;
     }
     interface SallaVerifyModal {
         /**
@@ -635,10 +639,6 @@ declare namespace LocalJSX {
           * Verifying method
          */
         "type"?: 'mobile' | 'email';
-        /**
-          * Submitting url, default will use salla api auth: `salla.api.auth.verify`
-         */
-        "url"?: string;
         /**
           * Should render component without modal
          */

package/example/dist/demo.js

@@ -1,4 +1,4 @@
-let counter = 1;
+let counter = 6;
 salla.infiniteScroll.event.onAppend((doc, url, nodes) => nodes.forEach(node => node.innerText = counter++));
 
 salla.event.on('rating::ready', rating => rating.order = {
@@ -75,7 +75,7 @@ function showOffer() {
     "name"          : "Buy one and get one free from the following products",
     "message"       : "New Offer",
     "expiry_date"   : "2022-12-31",
-    "formatted_date": "31 ديسمبر 2022",
+    "formatted_date": "31 Des 2022",
     "get"           : {
       "products": [
         {
@@ -142,3 +142,12 @@ function showOffer() {
     }
   });
 }
+
+
+function getTelValues(){
+  const tel = document.querySelector('.tel-input-methods'),
+        msg = document.querySelector('#get-values');
+        tel.getValues().then((result)=>{
+          msg.innerText = `Mobile: ${result.mobile}, countryCode: ${result.countryCode}`;
+        })
+}

package/example/dist/tailwind.css

@@ -710,8 +710,8 @@ video {
   grid-column: span 3 / span 3;
 }
 
-.col-span-2 {
-  grid-column: span 2 / span 2;
+.col-span-6 {
+  grid-column: span 6 / span 6;
 }
 
 .mx-auto {
@@ -724,11 +724,6 @@ video {
   margin-bottom: -0.25rem;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .ml-6 {
   margin-left: 1.5rem;
 }
@@ -801,6 +796,10 @@ video {
   margin-bottom: 2rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .block {
   display: block;
 }
@@ -861,10 +860,6 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
 .grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
@@ -873,6 +868,10 @@ video {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -893,10 +892,6 @@ video {
   gap: 1.5rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-x-8 {
   -moz-column-gap: 2rem;
        column-gap: 2rem;
@@ -948,6 +943,14 @@ video {
   border-radius: 0.375rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -956,10 +959,6 @@ video {
   border-left-width: 1px;
 }
 
-.border-dashed {
-  border-style: dashed;
-}
-
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgba(244, 244, 245, var(--tw-border-opacity));
@@ -970,6 +969,11 @@ video {
   border-color: rgba(228, 228, 231, var(--tw-border-opacity));
 }
 
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
@@ -1005,8 +1009,33 @@ video {
   background-color: rgba(250, 245, 255, var(--tw-bg-opacity));
 }
 
-.p-3 {
-  padding: 0.75rem;
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(220, 252, 231, var(--tw-bg-opacity));
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
+}
+
+.bg-yellow-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 249, 195, var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
+}
+
+.bg-purple-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 232, 255, var(--tw-bg-opacity));
+}
+
+.p-4 {
+  padding: 1rem;
 }
 
 .px-4 {
@@ -1059,11 +1088,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1124,6 +1148,10 @@ video {
   font-weight: 600;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -1152,11 +1180,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1664,6 +1687,7 @@ video {
 }
 
 .s-button-text {
+  pointer-events: none;
   display: flex;
   align-items: center;
   transition-property: opacity;
@@ -1919,7 +1943,6 @@ video {
 }
 
 .s-login-modal-input {
-  margin-bottom: 1rem;
   height: 2.5rem;
   width: 100%;
   border-radius: 0.375rem;
@@ -2752,7 +2775,7 @@ video {
 }
 
 .s-offer-modal-next-btn {
-  --tw-translate-x: -100%;
+  --tw-translate-x: 100%;
   transform: var(--tw-transform);
 }
 
@@ -2765,7 +2788,7 @@ video {
 }
 
 .s-offer-modal-prev-btn {
-  --tw-translate-x: 100%;
+  --tw-translate-x: -100%;
   transform: var(--tw-transform);
 }
 
@@ -2784,6 +2807,10 @@ video {
   opacity: 1;
 }
 
+.s-product-availability-wrap {
+  width: 100%;
+}
+
 .s-product-availability-subscribed {
   display: flex;
   width: 100%;
@@ -2833,7 +2860,6 @@ video {
 }
 
 .s-product-availability-input {
-  margin-bottom: 1rem;
   height: 2.5rem;
   width: 100%;
   border-radius: 0.375rem;
@@ -3545,15 +3571,27 @@ video {
   display: flex;
   width: 100%;
   align-items: center;
-  justify-content: space-between;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
   color: var(--color-main);
 }
 
+.s-search-product-regular-price {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgba(161, 161, 170, var(--tw-text-opacity));
+  text-decoration: line-through;
+}
+
+.s-search-product-not-available {
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-filter);
+}
+
 .s-tel-input-control {
-  margin-bottom: 1rem;
   height: 2.5rem;
   width: 100%;
   border-radius: 0.375rem;
@@ -3583,7 +3621,7 @@ video {
 .s-tel-input-error-msg {
   margin-bottom: 0.625rem;
   display: block;
-  height: 1rem;
+  height: 1.5rem;
   padding-top: 0.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
@@ -3643,8 +3681,10 @@ video {
   border-color: rgba(228, 228, 231, var(--tw-border-opacity));
   padding-left: 0.5rem;
   padding-right: 0.5rem;
+  text-align: center;
   font-size: 1.125rem;
   line-height: 1.75rem;
+  font-weight: 700;
   transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -3726,6 +3766,11 @@ video {
   background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
 }
 
+.me-6 {
+  -webkit-margin-end: 1.5rem;
+          margin-inline-end: 1.5rem;
+}
+
 .hover\:text-primary:hover {
   color: var(--color-main);
 }