@salla.sa/twilight-components 1.0.15 → 1.0.17

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

@@ -1,14 +1,20 @@
-import { Component, h, Prop, Host, Element, Event, Watch, Method } from '@stencil/core';
+import { Component, h, Prop, Host, Element, Event, Watch, Method, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
-//todo:: button component
+/**
+ * @slot body - The content of modal
+ * @slot footer - The footer of modal
+ */
 export class SallaModal {
   constructor() {
     var _a;
+    //todo:: unite three colors (error, success, primary) in one prop
     this.error = false;
     this.success = false;
+    this.primary = false;
     this.isClosable = true;
-    this.modalWidth = 'w-96'; //todo use friendly names
+    this.width = 'md';
     this.visible = false;
+    this.isLoading = false;
     this.subTitleFirst = false;
     this.subTitle = '';
     this.icon = '';
@@ -18,17 +24,17 @@ export class SallaModal {
     salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
     this.title = this.host.title;
     this.host.removeAttribute('title');
-    (_a = Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body');
+    (_a = Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
   }
   handleVisible(newValue) {
     if (!newValue) {
       this.toggleModal(false);
-      this.close.emit();
+      this.modalClosed.emit();
       return;
     }
     this.host.classList.remove('hidden');
     setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
-    this.ready.emit();
+    this.modalOpened.emit();
   }
   async show() {
     this.host.setAttribute('visible', '');
@@ -42,10 +48,20 @@ export class SallaModal {
     this.title = title;
     return this.host;
   }
+  async loading() {
+    this.isLoading = true;
+    return this.host;
+  }
+  async stopLoading() {
+    this.isLoading = false;
+    return this.host;
+  }
   toggleModal(isOpen) {
-    Helper.toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.host.querySelector('[slot=body]'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+    Helper
+      // .toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.host.querySelector('[slot=body]') || this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+      //todo:: use united class names
       .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
       setTimeout(() => this.host.classList.add('hidden'), 350);
@@ -60,39 +76,45 @@ export class SallaModal {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" },
+    return (
+    //todo:: use suitable class name instead of hidden
+    h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" },
       h("div", { class: "s-modal-wrapper" },
         h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
         h("span", { class: "s-modal-spacer" }, "\u200B"),
         h("slot", { name: "body" },
-          h("div", { class: 's-modal-body ' + this.modalWidth },
-            h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } },
-              this.isClosable ?
-                h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" },
-                  h("span", { class: "sicon-cancel" }))
-                : '',
-              this.error || this.success || this.icon
-                ? h("div", { class: {
-                    's-modal-icon': true,
-                    's-modal-bg-error': this.error,
-                    's-modal-bg-success': this.success,
-                    's-modal-bg-normal': !this.error && !this.success
-                  } },
-                  h("i", { class: {
-                      [this.icon]: true,
-                      's-modal-text-error': this.error,
-                      's-modal-text-success': this.success,
-                    } }))
-                : this.imageIcon ?
-                  h("img", { class: "s-modal-header-img", src: this.imageIcon })
+          h("div", { class: 's-modal-body ' + 's-modal-' + this.width, slot: "body" }, this.isLoading
+            ? h("span", null, "Loading...")
+            : [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } },
+                this.isClosable ?
+                  //todo:: remove cursor-pointer
+                  h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" },
+                    h("span", { class: "sicon-cancel" }))
                   : '',
-              this.title || this.subTitle ?
-                h("div", { class: "s-modal-header-content" },
-                  h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }),
-                  h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
-                : ''),
-            h("slot", null),
-            h("slot", { name: "footer" }))))));
+                this.error || this.success || this.icon
+                  ? h("div", { class: {
+                      's-modal-icon': true,
+                      '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
+                    } },
+                    h("i", { class: {
+                        [this.icon]: true,
+                        's-modal-text-error': this.error,
+                        's-modal-text-success': this.success,
+                      } }))
+                  : this.imageIcon ?
+                    h("img", { class: "s-modal-header-img", src: this.imageIcon })
+                    : '',
+                this.title || this.subTitle ?
+                  h("div", { class: "s-modal-header-content" },
+                    h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }),
+                    h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
+                  : ''),
+              h("slot", null),
+              h("slot", { name: "footer" })
+            ])))));
   }
   static get is() { return "salla-modal"; }
   static get properties() { return {
@@ -132,6 +154,24 @@ export class SallaModal {
       "reflect": false,
       "defaultValue": "false"
     },
+    "primary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "isClosable": {
       "type": "boolean",
       "mutable": true,
@@ -150,12 +190,12 @@ export class SallaModal {
       "reflect": false,
       "defaultValue": "true"
     },
-    "modalWidth": {
+    "width": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'",
+        "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
         "references": {}
       },
       "required": false,
@@ -164,9 +204,9 @@ export class SallaModal {
         "tags": [],
         "text": ""
       },
-      "attribute": "modal-width",
+      "attribute": "width",
       "reflect": true,
-      "defaultValue": "'w-96'"
+      "defaultValue": "'md'"
     },
     "visible": {
       "type": "boolean",
@@ -186,6 +226,24 @@ export class SallaModal {
       "reflect": true,
       "defaultValue": "false"
     },
+    "isLoading": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "subTitleFirst": {
       "type": "boolean",
       "mutable": false,
@@ -259,9 +317,12 @@ export class SallaModal {
       "defaultValue": "''"
     }
   }; }
+  static get states() { return {
+    "title": {}
+  }; }
   static get events() { return [{
-      "method": "ready",
-      "name": "ready",
+      "method": "modalOpened",
+      "name": "modalOpened",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -275,8 +336,8 @@ export class SallaModal {
         "references": {}
       }
     }, {
-      "method": "close",
-      "name": "close",
+      "method": "modalClosed",
+      "name": "modalClosed",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -350,6 +411,44 @@ export class SallaModal {
         "text": "",
         "tags": []
       }
+    },
+    "loading": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "stopLoading": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -0,0 +1,40 @@
+import { Component, h, Element, Method } from '@stencil/core';
+export class SallaOffer {
+  constructor() {
+    salla.offer.event.onExisted(data => this.show(data.offer.offer_id));
+  }
+  async show(offerId) {
+    this.modal.show();
+    console.log(offerId);
+  }
+  render() {
+    return h("salla-modal", { ref: modal => this.modal = modal, "is-loading": true },
+      h("slot", null));
+  }
+  componentDidLoad() {
+    //
+  }
+  static get is() { return "salla-offer"; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "(offerId: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -54,7 +54,7 @@ export class SallaProductAvailability {
       this.isUser || this.isSubscribed ? '' : this.renderModal()));
   }
   renderModal() {
-    return (h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", modalWidth: "w-96" },
+    return (h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "md" },
       h("div", { class: "s-product-availability-body" },
         this.channels_.includes('email') ? [
           h("label", { class: "s-product-availability-label" }, this.emailLabel),

package/dist/collection/components/salla-rating/salla-rating.css

@@ -1,3 +1,7 @@
 :host {
   display: block;
 }
+
+.unicode{
+  unicode-bidi: plaintext;
+}