@salla.sa/twilight-components 2.9.32 → 2.9.34

package/dist/collection/components/salla-sheet/salla-sheet.js

@@ -0,0 +1,210 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, h, State, Prop, Method } from '@stencil/core';
+export class SallaSheet {
+  constructor() {
+    /**
+     *
+     */
+    this.position = 'bottom';
+    /**
+     *
+     */
+    this.width = 600;
+    /**
+     *
+     */
+    this.height = 300;
+    /**
+     *
+     */
+    this.sheetColor = "#ffffff";
+    /**
+     *
+     */
+    this.persistent = false;
+    this.flag = false;
+  }
+  // private showHideSheet() {
+  //   this.flag = !this.flag;
+  // }
+  getMainClass() {
+    return {
+      "s-sheet-overlay": true,
+      "active": this.flag,
+    };
+  }
+  // private getOverlayStyle() {
+  //   return {
+  //     "align-items": this.position == "top" ? "flex-start" : "flex-end",
+  //     "justify-content": this.position == "left" ? "flex-start" : "flex-end"
+  //   }
+  // }
+  //
+  // private getContainerStyle() {
+  //   return {
+  //     "width": `${this.width}px`,
+  //     "min-height": `${this.height}px`,
+  //     "background-color": this.sheetColor,
+  //     // "transform": 'translateY(100%)',
+  //     // "transition": "transform 0.4s ease-in-out"
+  //   }
+  // }
+  /**
+   *
+   * @returns
+   */
+  open() {
+    this.flag = true;
+  }
+  /**
+   *
+   * @returns
+   */
+  close() {
+    this.flag = false;
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", { name: 'widget' },
+        h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.open() }, "Show/Hide")),
+      h("div", { class: this.getMainClass(), onClick: () => this.persistent ? null : this.close() },
+        h("div", { class: "s-sheet-container" },
+          h("slot", null)))));
+  }
+  static get is() { return "salla-sheet"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-sheet.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-sheet.css"]
+  }; }
+  static get properties() { return {
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'top' | 'bottom' | 'left' | 'right'",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "'bottom'"
+    },
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "600"
+    },
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "300"
+    },
+    "sheetColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sheet-color",
+      "reflect": false,
+      "defaultValue": "\"#ffffff\""
+    },
+    "persistent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "persistent",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "flag": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {},
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {},
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    }
+  }; }
+}

package/dist/collection/components/salla-user-menu/interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

package/dist/collection/components/salla-user-menu/salla-user-menu.js

@@ -0,0 +1,239 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, h, State, Element, Prop } from '@stencil/core';
+// Icons
+import ArrowDown from "../../assets/svg/keyboard_arrow_down.svg";
+import BellRing from "../../assets/svg/bell-ring.svg";
+import OrderIcon from "../../assets/svg/box-bankers.svg";
+import PendingOrdersIcon from "../../assets/svg/cart.svg";
+import WishListIcon from "../../assets/svg/star.svg";
+import ProfileIcon from "../../assets/svg/user-circle.svg";
+import LogoutIcon from "../../assets/svg/send-out.svg";
+import Cancel from "../../assets/svg/cancel.svg";
+/**
+ * @slot trigger - Replaces trigger widget, has replaceable props `{avatar}`, `{hello}`, `{first_name}`, `{last_name}`, `{icon}`.
+ */
+export class SallaUserMenu {
+  constructor() {
+    var _a;
+    this.items = {
+      notifications: BellRing,
+      orders: OrderIcon,
+      pending_orders: PendingOrdersIcon,
+      wishlist: WishListIcon,
+      profile: ProfileIcon,
+      logout: LogoutIcon,
+    };
+    this.accountLoading = false;
+    this.opened = false;
+    this.notifications = salla.lang.get("common.titles.notifications");
+    this.orders = salla.lang.get("common.titles.orders");
+    this.pending_orders = salla.lang.get("common.titles.pending_orders");
+    this.wishlist = salla.lang.get("common.titles.wishlist");
+    this.profile = salla.lang.get("common.titles.profile");
+    this.logout = salla.lang.get("blocks.header.logout");
+    this.hello = salla.lang.get("pages.checkout.hello");
+    this.first_name = salla.storage.get('user.first_name') || '';
+    this.last_name = salla.storage.get('user.last_name') || '';
+    this.avatar = salla.storage.get('user.avatar') || salla.url.cdn('images/avatar.png');
+    this.badges = {
+      notifications: salla.helpers.number(salla.storage.get('user.notifications') || 0),
+      pending_orders: salla.helpers.number(salla.storage.get('user.pending_orders') || 0)
+    };
+    /**
+     * To display only the list without the dropdown functionality
+     */
+    this.inline = false;
+    /**
+     * To display the trigger as an avatar only
+     */
+    this.avatarOnly = false;
+    /**
+     * To display the dropdown header in mobile sheet
+     */
+    this.showHeader = false;
+    /**
+     * To Make the dropdown menu relative to parent element or not
+     */
+    this.relativeDropdown = false;
+    this.onClickOutside = () => {
+      this.opened = false;
+    };
+    this.OrderUpdate = 0;
+    salla.lang.onLoaded(() => {
+      this.notifications = salla.lang.get("common.titles.notifications");
+      this.orders = salla.lang.get("common.titles.orders");
+      this.pending_orders = salla.lang.get("common.titles.pending_orders");
+      this.wishlist = salla.lang.get("common.titles.wishlist");
+      this.profile = salla.lang.get("common.titles.profile");
+      this.hello = salla.lang.get("pages.checkout.hello");
+      this.logout = salla.lang.get("blocks.header.logout");
+    });
+    this.triggerSlot = ((_a = this.host.querySelector('[slot="trigger"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<div class="s-user-menu-trigger"><img class="s-user-menu-trigger-avatar" src="{avatar}" alt="{first_name}{last_name}" /><div class="s-user-menu-trigger-content"><span class="s-user-menu-trigger-hello">{hello}</span><p class="s-user-menu-trigger-name">{first_name} {last_name}</p></div> <i class="s-user-menu-trigger-icon">{icon}</i></div>';
+    //if user info fetched before one hour get fresh data
+    if (salla.config.isUser() && ((Date.now() - (salla.storage.get('user.fetched_at') || 0)) / 1000 / 60) > 30) {
+      this.fetchFreshProfile();
+    }
+  }
+  fetchFreshProfile() {
+    salla.profile.api.info()
+      .then((res) => {
+      this.badges.pending_orders = salla.helpers.number(res.data.pending_orders || 0);
+      this.badges.notifications = salla.helpers.number(res.data.notifications || 0);
+      this.first_name = res.data.first_name;
+      this.last_name = res.data.last_name;
+      this.avatar = res.data.avatar || salla.url.cdn('images/avatar.png');
+    });
+  }
+  async open(e) {
+    this.opened = !this.opened;
+    e.stopPropagation();
+    if (this.opened) {
+      window.addEventListener('click', this.onClickOutside);
+    }
+  }
+  getTheHeader() {
+    return h("div", { class: { 's-user-menu-trigger-slot': true, 's-user-menu-trigger-avatar-only': this.avatarOnly }, id: 'trigger-slot', onClick: (e) => this.open(e), innerHTML: this.triggerSlot
+        .replace(/\{hello\}/g, this.hello)
+        .replace(/\{first_name\}/g, this.first_name)
+        .replace(/\{last_name\}/g, this.last_name)
+        .replace(/\{avatar\}/g, this.avatar)
+        .replace(/\{icon\}/g, ArrowDown) });
+  }
+  getMenuItem(item, i) {
+    //todo:: enhancement support slot here
+    return h("li", { class: {
+        's-user-menu-dropdown-item': true,
+        's-user-menu-dropdown-item-logout': i + 1 == Object.entries(this.items).length
+      } },
+      h("a", { href: salla.url.get(item[0]) },
+        h("i", { innerHTML: item[1] }, " "),
+        h("span", { class: "s-user-menu-dropdown-item-title" }, this[item[0]]),
+        (this.badges[item[0]] && this.badges[item[0]] != '٠')
+          ? h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[item[0]])
+          : ""));
+  }
+  render() {
+    //todo:: reduce class names, they are too long
+    return (h(Host, null, this.inline ?
+      h("ul", { class: "s-user-menu-inline" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i)))
+      : h("div", { class: { 's-user-menu-wrapper': true, 's-user-menu-relative-dropdown': this.relativeDropdown } },
+        this.getTheHeader(),
+        h("div", { class: { 's-user-menu-toggler': true, 'opened': this.opened } },
+          h("div", { class: "s-user-menu-dropdown", onClick: (e) => e.stopPropagation() },
+            this.showHeader ? h("div", { class: "s-user-menu-dropdown-header" },
+              h("img", { src: this.avatar, alt: `${this.first_name} ${this.last_name}` }),
+              h("div", { class: "s-user-menu-dropdown-header-content" },
+                h("span", null, this.hello),
+                h("p", null,
+                  this.first_name,
+                  " ",
+                  this.last_name)),
+              h("button", { class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => this.opened = false })) : '',
+            h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
+  }
+  componentShouldUpdate() {
+    if (!this.opened) {
+      window.removeEventListener('click', this.onClickOutside);
+    }
+  }
+  static get is() { return "salla-user-menu"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-user-menu.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-user-menu.css"]
+  }; }
+  static get properties() { return {
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "To display only the list without the dropdown functionality"
+      },
+      "attribute": "inline",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "avatarOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "To display the trigger as an avatar only"
+      },
+      "attribute": "avatar-only",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "showHeader": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "To display the dropdown header in mobile sheet"
+      },
+      "attribute": "show-header",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "relativeDropdown": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "To Make the dropdown menu relative to parent element or not"
+      },
+      "attribute": "relative-dropdown",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "accountLoading": {},
+    "opened": {},
+    "notifications": {},
+    "orders": {},
+    "pending_orders": {},
+    "wishlist": {},
+    "profile": {},
+    "logout": {},
+    "hello": {},
+    "first_name": {},
+    "last_name": {},
+    "avatar": {},
+    "badges": {},
+    "OrderUpdate": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/global/app-dev.js

@@ -4,32 +4,35 @@
 import './app';
 salla.event.setMaxListeners(100);
 export default function () {
-  // salla.init({
-  //   debug: true,
-  //   store: {
-  //     url: process.env.URL,
-  //     api: process.env.API,
-  //     id: process.env.STORE_ID,
-  //     logo: "https://salla-dev.s3.eu-central-1.amazonaws.com/logo/logo-fashion.jpg",
-  //   },
-  //   user: {
-  //     // todo :: read the user data from storage
-  //     // "id": process.env.USER_ID,
-  //     "type": "guest",
-  //     // "email": "demo@demo.com",
-  //     // "mobile": "+966555555555",
-  //     // "currency_code": "SAR",
-  //     // "country_code": "SA",
-  //     language_code: document.documentElement.lang,
-  //   }
-  // });
-  //
-  // // this is required to bypass cloudflare in stage
-  // if (salla.api.axios) {
-  //   salla.api.axios.defaults.headers.common['CF-Access-Client-Id'] = process.env.CF_ACCESS_ID;
-  //   salla.api.axios.defaults.headers.common['CF-Access-Client-Secret'] = process.env.CF_ACCESS_SECRET;
-  // } else {
-  //   salla.api.defaults.headers.common['CF-Access-Client-Id'] = process.env.CF_ACCESS_ID;
-  //   salla.api.defaults.headers.common['CF-Access-Client-Secret'] = process.env.CF_ACCESS_SECRET;
-  // }
+  salla.init({
+    debug: true,
+    store: {
+      url: process.env.URL,
+      api: process.env.API,
+      id: process.env.STORE_ID,
+      logo: "https://salla-dev.s3.eu-central-1.amazonaws.com/logo/logo-fashion.jpg",
+    },
+    user: {
+      // todo :: read the user data from storage
+      avatar: "https://cdn.salla.sa/customer_profiles/9itOm11DeKS87n8kNkMjIarFZa8bSBMqW02IKq58.png",
+      birthday: "1986-02-11",
+      currency: "SAR",
+      email: "demo@demo.com",
+      first_name: "DEEmo",
+      gender: "male",
+      id: 1938424344,
+      language: "ar",
+      last_name: "Account",
+      phone: { code: "+966", number: 555555555, country: "SA" }
+    }
+  });
+  // this is required to bypass cloudflare in stage
+  if (salla.api.axios) {
+    salla.api.axios.defaults.headers.common['CF-Access-Client-Id'] = process.env.CF_ACCESS_ID;
+    salla.api.axios.defaults.headers.common['CF-Access-Client-Secret'] = process.env.CF_ACCESS_SECRET;
+  }
+  else {
+    salla.api.defaults.headers.common['CF-Access-Client-Id'] = process.env.CF_ACCESS_ID;
+    salla.api.defaults.headers.common['CF-Access-Client-Secret'] = process.env.CF_ACCESS_SECRET;
+  }
 }

package/dist/components/bell-ring.js

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const BellRing = `<!-- 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>bell-ring</title>
+<path d="M2.667 13.333v-4c0-2.592 0.748-5.107 2.161-7.271 0.404-0.616 0.231-1.443-0.387-1.845-0.616-0.401-1.443-0.228-1.845 0.388-1.699 2.599-2.596 5.617-2.596 8.728v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333zM25.333 15.647v-6.313c0-5.147-4.188-9.333-9.333-9.333s-9.333 4.187-9.333 9.333v6.312l-5.157 9.027c-0.236 0.413-0.235 0.92 0.004 1.331 0.239 0.412 0.679 0.664 1.153 0.664h8c0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333h8c0.475 0 0.915-0.252 1.153-0.664 0.239-0.411 0.24-0.917 0.004-1.331zM16 29.333c-1.471 0-2.667-1.196-2.667-2.667h5.333c0 1.472-1.196 2.667-2.667 2.667zM4.965 24l4.193-7.339c0.113-0.2 0.175-0.429 0.175-0.661v-6.667c0-3.676 2.991-6.667 6.667-6.667s6.667 2.991 6.667 6.667v6.667c0 0.232 0.061 0.46 0.176 0.661l4.192 7.339zM29.403 0.603c-0.403-0.616-1.232-0.789-1.845-0.387-0.617 0.403-0.791 1.229-0.387 1.845 1.415 2.165 2.163 4.68 2.163 7.272v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-3.112-0.899-6.132-2.597-8.731z"></path>
+</svg>
+`;
+
+export { BellRing as B };

package/dist/components/cart.js

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const PendingOrdersIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
+<title>cart</title>
+<path d="M15.426 28.084c0-1.412-0.85-2.684-2.156-3.226-1.305-0.54-2.807-0.241-3.805 0.758-0.999 0.998-1.298 2.5-0.758 3.805 0.54 1.303 1.815 2.155 3.226 2.155 1.928-0.003 3.49-1.564 3.492-3.492h0.001zM10.597 28.084h0.001c0-0.54 0.326-1.027 0.825-1.235 0.498-0.206 1.074-0.091 1.455 0.29 0.383 0.382 0.497 0.957 0.29 1.456-0.208 0.5-0.695 0.825-1.235 0.825-0.355 0-0.695-0.142-0.944-0.391-0.251-0.251-0.392-0.591-0.392-0.946h-0.001l0.001 0.001zM28.23 28.084c0-1.412-0.85-2.684-2.155-3.226-1.305-0.54-2.807-0.241-3.806 0.758s-1.297 2.5-0.756 3.805c0.54 1.303 1.813 2.155 3.226 2.155 1.927-0.003 3.49-1.564 3.491-3.492zM23.401 28.084c0-0.54 0.326-1.027 0.825-1.235 0.5-0.206 1.075-0.091 1.457 0.29s0.497 0.957 0.289 1.456c-0.206 0.5-0.693 0.825-1.233 0.825-0.738 0-1.337-0.599-1.337-1.337l-0.001 0.001zM1.953 0.234l-0.342-0.059c-0.29-0.064-0.594-0.004-0.839 0.166-0.247 0.169-0.414 0.436-0.463 0.734-0.050 0.3 0.023 0.607 0.201 0.85s0.444 0.402 0.738 0.44l0.341 0.059c1.825 0.324 3.248 1.794 3.548 3.662l1.981 12.369h-0.001c0.218 1.387 0.913 2.651 1.96 3.563s2.379 1.412 3.754 1.41h14.242c0.601 0 1.088-0.498 1.088-1.112s-0.487-1.112-1.088-1.112h-14.242c-1.679-0.001-3.139-1.183-3.525-2.854h11.463c1.614 0.004 3.188-0.518 4.493-1.49 1.305-0.973 2.271-2.346 2.762-3.918l1.298-4.136c0.145-0.455 0.065-0.953-0.213-1.336-0.278-0.385-0.72-0.608-1.187-0.602h-20.467l-0.181-1.141c-0.218-1.367-0.849-2.631-1.802-3.615-0.954-0.983-2.184-1.64-3.518-1.878h-0.001zM26.946 9.096l-0.993 3.169v-0.001c-0.353 1.122-1.044 2.101-1.975 2.796s-2.056 1.067-3.208 1.067h-11.833l-1.125-7.042 19.134 0.011z"></path>
+</svg>
+`;
+
+export { PendingOrdersIcon as P };

package/dist/components/index.d.ts

@@ -26,6 +26,7 @@ export { SallaRatingStars as SallaRatingStars } from '../types/components/salla-
 export { SallaScopees as SallaScopes } from '../types/components/salla-scopes/salla-scopes';
 export { SallaSearch as SallaSearch } from '../types/components/salla-search/salla-search';
 export { SallaSelect as SallaSelect } from '../types/components/salla-select/salla-select';
+export { SallaSheet as SallaSheet } from '../types/components/salla-sheet/salla-sheet';
 export { SallaSkeleton as SallaSkeleton } from '../types/components/salla-skeleton/salla-skeleton';
 export { SallaSocialShare as SallaSocialShare } from '../types/components/salla-social-share/salla-social-share';
 export { SallaSwiper as SallaSwiper } from '../types/components/salla-swiper/salla-swiper';
@@ -33,6 +34,7 @@ export { SallaTabContent as SallaTabContent } from '../types/components/salla-ta
 export { SallaTabHeader as SallaTabHeader } from '../types/components/salla-tabs/salla-tab-header';
 export { SallaTabs as SallaTabs } from '../types/components/salla-tabs/salla-tabs';
 export { SallaTelInput as SallaTelInput } from '../types/components/salla-tel-input/salla-tel-input';
+export { SallaUserMenu as SallaUserMenu } from '../types/components/salla-user-menu/salla-user-menu';
 export { SallaUserSettings as SallaUserSettings } from '../types/components/salla-user-settings/salla-user-settings';
 export { SallaVerify as SallaVerify } from '../types/components/salla-verify/salla-verify';