@salla.sa/twilight-components 1.0.12 → 1.0.13

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

@@ -1,31 +0,0 @@
-import { Component, h } from '@stencil/core';
-export class SallaLogin {
-  render() {
-    return (h("salla-modal", { id: "salla-login", title: "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639" },
-      h("div", { id: "showLoginMethods" },
-        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"),
-        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" },
-          h("div", { class: "flex-shrink-0" },
-            h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" },
-              h("i", { class: "sicon-mail" }))),
-          h("div", { class: "flex-1 min-w-0" },
-            h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" },
-              h("div", { class: "flex-1" },
-                h("span", { class: "absolute inset-0", "aria-hidden": "true" }),
-                h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"),
-                h("h6", { class: "font-boldf" }, "\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A")),
-              h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))),
-        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" },
-          h("div", { class: "flex-shrink-0" },
-            h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" },
-              h("i", { class: "sicon-phone" }))),
-          h("div", { class: "flex-1 min-w-0" },
-            h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" },
-              h("div", { class: "flex-1" },
-                h("span", { class: "absolute inset-0", "aria-hidden": "true" }),
-                h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"),
-                h("h6", { class: "font-boldf" }, "\u0627\u0644\u0647\u0627\u062A\u0641")),
-              h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))))));
-  }
-  static get is() { return "salla-login"; }
-}

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

@@ -1,316 +0,0 @@
-import { Component, h, Prop, Host, Element, Event, Watch, Method } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-//todo:: button component
-export class SallaModal {
-  constructor() {
-    this.error = false;
-    this.success = false;
-    this.isClosable = true;
-    this.modalWidth = 'w-96'; //todo use friendly names
-    this.visible = false;
-    this.subTitle = '';
-    this.icon = '';
-    salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
-    salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
-    this.title = this.host.title;
-    this.host.removeAttribute('title');
-  }
-  handleVisible(newValue) {
-    if (!newValue) {
-      this.toggleModal(false);
-      this.close.emit();
-      return;
-    }
-    this.host.classList.remove('hidden');
-    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
-    this.ready.emit();
-  }
-  async show() {
-    this.host.setAttribute('visible', '');
-    return this.host;
-  }
-  async hide() {
-    this.host.removeAttribute('visible');
-    return this.host;
-  }
-  async setTitle(title) {
-    this.title = title;
-    return this.host;
-  }
-  toggleModal(isOpen) {
-    //todo:: use ref
-    Helper.toggleElement(this.host.querySelector('.s-modal-overlay'), 'ease-out duration-300 opacity-100', 'opacity-0', () => isOpen)
-      .toggleElement(this.host.querySelector('.s-modal-body'), 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100', //add these classes
-    'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', //remove these classes
-    () => isOpen)
-      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
-    if (!isOpen) {
-      setTimeout(() => this.host.classList.add('hidden'), 350);
-    }
-  }
-  closeModal() {
-    if (!this.isClosable) {
-      return;
-    }
-    this.host.removeAttribute('visible');
-  }
-  //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" },
-      h("div", { class: "s-modal-wrapper" },
-        h("div", { class: "s-modal-overlay", onClick: () => this.closeModal() }),
-        h("span", { class: "s-modal-spacer" }, "\u200B"),
-        h("div", { class: 's-modal-body ' + this.modalWidth },
-          h("div", { class: { 's-modal-header': true,
-              'text-center': this.icon != '' } },
-            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,
-                  } }))
-              : '',
-            h("div", { class: "s-modal-title", innerHTML: this.title }),
-            h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle })),
-          h("slot", null),
-          h("slot", { name: "footer" })))));
-  }
-  static get is() { return "salla-modal"; }
-  static get properties() { return {
-    "error": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "error",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "success": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "success",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isClosable": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-closable",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "modalWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "modal-width",
-      "reflect": true,
-      "defaultValue": "'w-96'"
-    },
-    "visible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "visible",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "subTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sub-title",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
-  static get events() { return [{
-      "method": "ready",
-      "name": "ready",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setTitle": {
-      "complexType": {
-        "signature": "(title: any) => Promise<HTMLElement>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "visible",
-      "methodName": "handleVisible"
-    }]; }
-}

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

@@ -1,316 +0,0 @@
-import { Component, Host, h, Prop, Watch, Element, Method } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-export class SallaProductAvailability {
-  constructor() {
-    this.isUser = Helper.isUser();
-    this.buttonText = salla.lang.get('pages.products.notify_availability');
-    this.countryCode = salla.config.country_code || 'SA';
-    this.subscribe = salla.lang.get('common.elements.submit');
-    this.cancel = salla.lang.get('common.elements.cancel');
-    this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
-    this.mobileLabel = salla.lang.get('common.elements.mobile');
-    this.emailLabel = salla.lang.get('common.elements.email');
-    this.mobilePlaceholder = salla.lang.get('common.elements.mobile_placeholder');
-    this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
-    this.productId = salla.config.page.id;
-    this.subscribed = salla.lang.get('pages.products.notify_availability_success');
-    if (this.isUser) {
-      return;
-    }
-    this.channelsWatcher(this.channels);
-    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-    this.host.removeAttribute('title');
-  }
-  channelsWatcher(newValue) {
-    this.channels_ = newValue.split(',');
-  }
-  async submit() {
-    if (this.isUser) {
-      return salla.api.product.availabilitySubscribe(this.productId)
-        .then(() => {
-        salla.success(this.subscribed);
-      }) //no need to wait until finishing alert animation
-        .then(() => this.host.remove());
-    }
-    let data = { id: this.productId, country_code: this.countryCode };
-    if (this.mobile.value !== '') {
-      data['mobile'] = this.mobile.value;
-    }
-    if (this.email.value !== '') {
-      data['email'] = this.email.value;
-    }
-    return this.btn.load()
-      .then(() => this.btn.disable())
-      .then(() => salla.api.product.availabilitySubscribe(data))
-      .then(() => {
-      salla.success(this.subscribed);
-    }) //no need to wait until finishing alert animation
-      .then(() => this.btn.stop())
-      .then(() => this.modal.hide())
-      .then(() => this.host.remove())
-      .catch(() => this.btn.stop() && this.btn.enable());
-  }
-  render() {
-    return (h(Host, null,
-      h("slot", null,
-        h("salla-button", { onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)),
-      this.isUser ? '' : this.renderModal()));
-  }
-  renderModal() {
-    return (h("salla-modal", { ref: modal => this.modal = modal, id: "product-availability-modal", title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", modalWidth: "w-full" },
-      h("div", { class: "s-product-availability-body" },
-        this.channels_.includes('email') ? [
-          h("label", { class: "s-product-availability-label" }, this.emailLabel),
-          h("input", { class: "s-product-availability-input", placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" })
-        ] : '',
-        this.channels_.includes('sms') ? [
-          h("label", { class: "s-product-availability-label" }, this.mobileLabel),
-          h("input", { class: "s-product-availability-input", placeholder: this.mobilePlaceholder, ref: el => this.mobile = el, type: "text" }),
-          h("input", { type: "hidden", value: this.countryCode }),
-        ] : ''),
-      h("div", { slot: "footer", class: "common-anime flex justify-between space-s-4" },
-        h("salla-button", { ref: btn => this.btn = btn, class: "w-full", onClick: () => this.submit() }, this.subscribe),
-        h("salla-button", { class: "w-full", color: "outline" }, this.cancel))));
-  }
-  static get is() { return "salla-product-availability"; }
-  static get properties() { return {
-    "channels": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "channels",
-      "reflect": false
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "button-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('pages.products.notify_availability')"
-    },
-    "countryCode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "country-code",
-      "reflect": false,
-      "defaultValue": "salla.config.country_code || 'SA'"
-    },
-    "subscribe": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "subscribe",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.submit')"
-    },
-    "cancel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "cancel",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.cancel')"
-    },
-    "subTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sub-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('pages.products.notify_availability_subtitle')"
-    },
-    "mobileLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mobile-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.mobile')"
-    },
-    "emailLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "email-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.email')"
-    },
-    "mobilePlaceholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mobile-placeholder",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.mobile_placeholder')"
-    },
-    "emailPlaceholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "email-placeholder",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.email_placeholder')"
-    },
-    "productId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "product-id",
-      "reflect": false,
-      "defaultValue": "salla.config.page.id"
-    },
-    "subscribed": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "subscribed",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('pages.products.notify_availability_success')"
-    }
-  }; }
-  static get methods() { return {
-    "submit": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "channels",
-      "methodName": "channelsWatcher"
-    }]; }
-}

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

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}