@salla.sa/twilight-components 1.0.5 → 1.0.6

package/dist/cjs/index.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const sallaLogin = require('./salla-login-3ec94029.js');
+const sallaSearch = require('./salla-search-2b1d67e4.js');
+require('./index-e9451c82.js');
+
+
+
+exports.SallaLogin = sallaLogin.SallaLogin;
+exports.SallaSearch = sallaSearch.SallaSearch;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e9451c82.js');
+
+/*
+ Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["salla-login_2.cjs",[[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1]}]]],["salla-currency-language.cjs",[[4,"salla-currency-language",{"show":[64],"hide":[64]}]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/salla-currency-language.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e9451c82.js');
+const Helper = require('./Helper-8c75b6ac.js');
+
+const SallaCurrencyLanguage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    Helper.Helper.setHost(this.host);
+  }
+  async show() {
+    this.modal.setAttribute('visible', '');
+  }
+  async hide() {
+    this.modal.removeAttribute('visible');
+  }
+  submit() {
+    this.hide()
+      .then(() => {
+      let code = Helper.Helper.val('[name=currency]:checked');
+      if (code !== salla.config.currency.code) {
+        return salla.currency.api.change(code);
+      }
+    }).then(() => {
+      let language = Helper.Helper.val('[name=lang]:checked');
+      if (language !== salla.config.language.code) {
+        window.location.href = salla.config.languages.filter(lang => lang.code === language)[0].url;
+      }
+    });
+  }
+  render() {
+    return (index.h("salla-modal", { id: "lang-currency-modal", class: "hidden" }, index.h("slot", { name: "header" }, index.h("div", { slot: "header" })), index.h("div", { class: "s-currency-language-inner" }, salla.config.languages
+      ? index.h("div", { class: "s-currency-language-section" }, index.h("label", { class: "s-currency-language-title" }, salla.lang.get('common.titles.language')), index.h("fieldset", { class: "s-currency-language-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')), index.h("div", { class: "s-currency-language-section-inner" }, salla.config.languages.map(lang => index.h("div", { class: "flex items-center" }, index.h("input", { id: 'lang-' + lang.code.toLowerCase(), class: "s-currency-language-input", name: "lang", checked: salla.config.language.code == lang.code, type: "radio", value: lang.code }), index.h("label", { htmlFor: 'lang-' + lang.code.toLowerCase(), class: "s-currency-language-label" }, index.h("span", null, lang.name), index.h("div", { class: 's-currency-language-flag flag iti__flag iti__' + lang.country_code })))))))
+      : '', salla.config.currencies
+      ? index.h("div", { class: "s-currency-language-section" }, index.h("label", { class: "s-currency-language-title" }, salla.lang.get('common.titles.currency')), index.h("fieldset", { class: "s-currency-language-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')), index.h("div", { class: "s-currency-language-section-inner" }, salla.config.currencies.map(currency => index.h("div", { class: "s-currency-language-item" }, index.h("input", { class: "s-currency-language-input", checked: salla.config.currency.code == currency.code, id: 'currency-' + currency.code, name: "currency", type: "radio", value: currency.code }), index.h("label", { class: "s-currency-language-label", htmlFor: 'currency-' + currency.code }, index.h("span", null, currency.name), index.h("small", { class: "s-currency-language-currency" }, currency.code)))))))
+      : ''), index.h("p", { slot: "footer" }, index.h("slot", { name: "footer" }, index.h("button", { type: "button", class: "s-currency-language-submit", onClick: () => this.submit() }, salla.lang.get('common.elements.ok'))))));
+  }
+  componentDidRender() {
+    this.modal = document.querySelector('#lang-currency-modal');
+  }
+  get host() { return index.getElement(this); }
+};
+
+exports.salla_currency_language = SallaCurrencyLanguage;

package/dist/cjs/salla-login-3ec94029.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const index = require('./index-e9451c82.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;

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

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const sallaLogin = require('./salla-login-3ec94029.js');
+const index = require('./index-e9451c82.js');
+const Helper = require('./Helper-8c75b6ac.js');
+
+const SallaModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ready = index.createEvent(this, "ready", 7);
+    this.close = index.createEvent(this, "close", 7);
+    this.error = false;
+    this.success = false;
+    this.visible = false;
+    this.subTitle = '';
+    this.icon = 'sicon-cancel';
+  }
+  handleVisible(newValue) {
+    return newValue === true
+      ? this.show()
+      : this.hide();
+  }
+  show() {
+    this.host.classList.remove('hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.ready.emit();
+  }
+  hide() {
+    this.toggleModal(false);
+    this.close.emit();
+  }
+  toggleModal(isOpen) {
+    Helper.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);
+    }
+  }
+  render() {
+    this.host.id = this.host.id || 'salla-modal';
+    return (index.h(index.Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", onClick: () => this.host.removeAttribute('visible') }), index.h("span", { class: "s-modal-spacer" }, "\u200B"), index.h("div", { class: "s-modal-body" }, index.h("slot", { name: "header" }, index.h("div", { class: "s-modal-header" }, index.h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.host.removeAttribute('visible'), type: "button" }, index.h("span", { class: "sicon-cancel" })), index.h("div", { class: "s-modal-title" }, this.host.title), index.h("p", { class: "s-modal-sub-title" }, this.subTitle), this.error || this.success
+      ? index.h("div", { class: { 's-modal-icon': true, 'bg-red-100': this.error, 'bg-green-100': this.success } }, index.h("i", { class: { [this.icon]: true, 'text-red-600': this.error, 'text-green-600': this.success } }))
+      : '')), index.h("slot", null), index.h("slot", { name: "footer" })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "visible": ["handleVisible"]
+  }; }
+};
+
+exports.salla_login = sallaLogin.SallaLogin;
+exports.salla_modal = SallaModal;

package/dist/{twilight-components/search-modal-ee69bd04.js → cjs/salla-search-2b1d67e4.js}

@@ -1,8 +1,10 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-d2312a61.js';
+'use strict';
 
-const SearchModal = class {
+const index = require('./index-e9451c82.js');
+
+const SallaSearch = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.fetchStatus = '';
     this.showModal = false;
     /**
@@ -72,23 +74,23 @@ const SearchModal = class {
         .replace("{price}", (_a = item.price) === null || _a === void 0 ? void 0 : _a.after)
         .replace("{url}", item.url)
         .replace("{thumb}", item.thumb);
-      return (h("div", { class: "s-search-modal-product", innerHTML: product }));
+      return (index.h("div", { class: "s-search-modal-product", innerHTML: product }));
     }
     else {
-      return (h("div", { class: "s-search-modal-product" }, h("a", { target: "_blank", href: item.url, class: "s-search-modal-product-image-container" }, h("img", { class: "s-search-modal-product-image", src: item.thumb })), h("div", { class: "s-search-modal-product-details" }, h("div", { class: "s-search-modal-product-title" }, item.title), h("div", { class: "s-search-modal-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
+      return (index.h("div", { class: "s-search-modal-product" }, index.h("a", { target: "_blank", href: item.url, class: "s-search-modal-product-image-container" }, index.h("img", { class: "s-search-modal-product-image", src: item.thumb })), index.h("div", { class: "s-search-modal-product-details" }, index.h("div", { class: "s-search-modal-product-title" }, item.title), index.h("div", { class: "s-search-modal-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
     }
   }
   render() {
-    return (h(Host, { class: "s-search-modal" }, h("button", { type: "button", onClick: this.openSearch, class: "s-search-modal-search-button-icon" }, this.hasSearchIconSlot ? (h("slot", { name: "search-icon" })) : (h("i", { class: "sicon-search font-bold" }))), this.showModal && (h("div", { class: "s-search-modal-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } }, h("div", { class: "s-search-modal-wrapper", onClick: this.closeSearch }, h("div", { class: "s-search-modal-inner", onClick: e => {
+    return (index.h(index.Host, { class: "s-search-modal" }, index.h("button", { type: "button", onClick: this.openSearch, class: "s-search-modal-search-button-icon" }, this.hasSearchIconSlot ? (index.h("slot", { name: "search-icon" })) : (index.h("i", { class: "sicon-search font-bold" }))), this.showModal && (index.h("div", { class: "s-search-modal-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } }, index.h("div", { class: "s-search-modal-wrapper", onClick: this.closeSearch }, index.h("div", { class: "s-search-modal-inner", onClick: e => {
         e.stopPropagation();
-      } }, h("div", { class: "s-search-modal-search-box-container" }, h("div", { class: !this.showResult
+      } }, index.h("div", { class: "s-search-modal-search-box-container" }, index.h("div", { class: !this.showResult
         ? 's-search-modal-search-box-inner'
-        : 's-search-modal-search-box-inner-open' }, h("input", { class: "s-search-modal-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }), this.fetchStatus != 'loading' ? (h("button", { class: "s-search-modal-search-icon" }, h("i", { class: "sicon-search" }))) : (h("span", { class: "s-search-modal-spinner" }, h("span", { class: "s-search-modal-spinner-loader" }))))), h("div", { class: "s-search-modal-search-results" }, this.fetchStatus === 'error' && (h("p", { class: "s-search-modal-no-results error p-4 text-sm text-gray-text" }, this.noResultsText)), this.results &&
+        : 's-search-modal-search-box-inner-open' }, index.h("input", { class: "s-search-modal-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }), this.fetchStatus != 'loading' ? (index.h("button", { class: "s-search-modal-search-icon" }, index.h("i", { class: "sicon-search" }))) : (index.h("span", { class: "s-search-modal-spinner" }, index.h("span", { class: "s-search-modal-spinner-loader" }))))), index.h("div", { class: "s-search-modal-search-results" }, this.fetchStatus === 'error' && (index.h("p", { class: "s-search-modal-no-results error p-4 text-sm text-gray-text" }, this.noResultsText)), this.results &&
       this.results.map(item => {
         return this.getProduct(item);
       }))))))));
   }
-  get hostElement() { return getElement(this); }
+  get hostElement() { return index.getElement(this); }
 };
 
-export { SearchModal as S };
+exports.SallaSearch = SallaSearch;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const sallaSearch = require('./salla-search-2b1d67e4.js');
+require('./index-e9451c82.js');
+
+
+
+exports.salla_search = sallaSearch.SallaSearch;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-e9451c82.js');
+
+/*
+ Stencil Client Patch Browser v2.8.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('twilight-components.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["salla-login_2.cjs",[[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1]}]]],["salla-currency-language.cjs",[[4,"salla-currency-language",{"show":[64],"hide":[64]}]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
+});

package/dist/collection/Helpers/Helper.js

@@ -0,0 +1,16 @@
+class Helper extends salla.AppHelpers {
+  setHost(host) {
+    this.host = host;
+  }
+  getElement(selector) {
+    return this.host.querySelector(selector);
+  }
+  getAttribute(selector, attribute) {
+    var _a;
+    return (_a = this.getElement(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute);
+  }
+  val(selector) {
+    return this.getAttribute(selector, 'value');
+  }
+}
+export default new Helper;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,15 @@
+{
+  "entries": [
+    "./components/login/salla-login.js",
+    "./components/search/salla-search.js",
+    "./components/currency-language/salla-currency-language.js",
+    "./components/modal/salla-modal.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.8.1",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/currency-language/salla-currency-language.js

@@ -0,0 +1,97 @@
+import { Component, Element, h, Method } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaCurrencyLanguage {
+  constructor() {
+    Helper.setHost(this.host);
+  }
+  async show() {
+    this.modal.setAttribute('visible', '');
+  }
+  async hide() {
+    this.modal.removeAttribute('visible');
+  }
+  submit() {
+    this.hide()
+      .then(() => {
+      let code = Helper.val('[name=currency]:checked');
+      if (code !== salla.config.currency.code) {
+        return salla.currency.api.change(code);
+      }
+    }).then(() => {
+      let language = Helper.val('[name=lang]:checked');
+      if (language !== salla.config.language.code) {
+        window.location.href = salla.config.languages.filter(lang => lang.code === language)[0].url;
+      }
+    });
+  }
+  render() {
+    return (h("salla-modal", { id: "lang-currency-modal", class: "hidden" },
+      h("slot", { name: "header" },
+        h("div", { slot: "header" })),
+      h("div", { class: "s-currency-language-inner" },
+        salla.config.languages
+          ? h("div", { class: "s-currency-language-section" },
+            h("label", { class: "s-currency-language-title" }, salla.lang.get('common.titles.language')),
+            h("fieldset", { class: "s-currency-language-fieldset" },
+              h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')),
+              h("div", { class: "s-currency-language-section-inner" }, salla.config.languages.map(lang => h("div", { class: "flex items-center" },
+                h("input", { id: 'lang-' + lang.code.toLowerCase(), class: "s-currency-language-input", name: "lang", checked: salla.config.language.code == lang.code, type: "radio", value: lang.code }),
+                h("label", { htmlFor: 'lang-' + lang.code.toLowerCase(), class: "s-currency-language-label" },
+                  h("span", null, lang.name),
+                  h("div", { class: 's-currency-language-flag flag iti__flag iti__' + lang.country_code })))))))
+          : '',
+        salla.config.currencies
+          ? h("div", { class: "s-currency-language-section" },
+            h("label", { class: "s-currency-language-title" }, salla.lang.get('common.titles.currency')),
+            h("fieldset", { class: "s-currency-language-fieldset" },
+              h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')),
+              h("div", { class: "s-currency-language-section-inner" }, salla.config.currencies.map(currency => h("div", { class: "s-currency-language-item" },
+                h("input", { class: "s-currency-language-input", checked: salla.config.currency.code == currency.code, id: 'currency-' + currency.code, name: "currency", type: "radio", value: currency.code }),
+                h("label", { class: "s-currency-language-label", htmlFor: 'currency-' + currency.code },
+                  h("span", null, currency.name),
+                  h("small", { class: "s-currency-language-currency" }, currency.code)))))))
+          : ''),
+      h("p", { slot: "footer" },
+        h("slot", { name: "footer" },
+          h("button", { type: "button", class: "s-currency-language-submit", onClick: () => this.submit() }, salla.lang.get('common.elements.ok'))))));
+  }
+  componentDidRender() {
+    this.modal = document.querySelector('#lang-currency-modal');
+  }
+  static get is() { return "salla-currency-language"; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/generate-summary.js

@@ -0,0 +1,35 @@
+var fs = require('fs'), path = require('path'), util = require('util');
+
+var dirToJSON = function (dir, done) {
+  var results = [];
+
+  function recWalk(d, res) {
+    var list = fs.readdirSync(d);
+    list.forEach((name) => {
+      var file = path.resolve(d, name);
+      var stat = fs.statSync(file);
+      if (stat && stat.isDirectory()) {
+        var title;
+        if (name) {
+          title = 'salla-' + name
+        }
+        res.push({ title: title, file: name + '/readme.md' });
+      }
+    });
+  }
+
+  try {
+    recWalk(dir, results);
+    done(null, results);
+  } catch (err) {
+    done(err);
+  }
+};
+
+dirToJSON("src/components", function (err, results) {
+  if (err) console.log(err);
+  else fs.writeFile('src/components/summary.json', JSON.stringify(results), 'utf8', function (err) {
+    if (err) throw err;
+    console.log('Saved!');
+  });
+});

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

@@ -0,0 +1,31 @@
+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/modal/salla-modal.js

@@ -0,0 +1,184 @@
+import { Component, h, Prop, Host, Element, Event, Watch } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaModal {
+  constructor() {
+    this.error = false;
+    this.success = false;
+    this.visible = false;
+    this.subTitle = '';
+    this.icon = 'sicon-cancel';
+  }
+  handleVisible(newValue) {
+    return newValue === true
+      ? this.show()
+      : this.hide();
+  }
+  show() {
+    this.host.classList.remove('hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.ready.emit();
+  }
+  hide() {
+    this.toggleModal(false);
+    this.close.emit();
+  }
+  toggleModal(isOpen) {
+    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);
+    }
+  }
+  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.host.removeAttribute('visible') }),
+        h("span", { class: "s-modal-spacer" }, "\u200B"),
+        h("div", { class: "s-modal-body" },
+          h("slot", { name: "header" },
+            h("div", { class: "s-modal-header" },
+              h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.host.removeAttribute('visible'), type: "button" },
+                h("span", { class: "sicon-cancel" })),
+              h("div", { class: "s-modal-title" }, this.host.title),
+              h("p", { class: "s-modal-sub-title" }, this.subTitle),
+              this.error || this.success
+                ? h("div", { class: { 's-modal-icon': true, 'bg-red-100': this.error, 'bg-green-100': this.success } },
+                  h("i", { class: { [this.icon]: true, 'text-red-600': this.error, 'text-green-600': this.success } }))
+                : '')),
+          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"
+    },
+    "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": "'sicon-cancel'"
+    }
+  }; }
+  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 elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "visible",
+      "methodName": "handleVisible"
+    }]; }
+}