@salla.sa/twilight-components 1.0.6 → 1.0.7

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

@@ -0,0 +1,167 @@
+import { Component, Element, h, Method, Prop, Watch } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaButton {
+  constructor() {
+    this.kind = 'primary';
+    this.loading = false;
+    this.hostAttributes = {};
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+    }
+    this.hostAttributes['type'] = this.hostAttributes['type'] || 'button';
+    this.hostAttributes['class'] = (this.hostAttributes['class'] || '') + ' s-button-btn btn--has-loading btn-' + this.kind;
+    delete this.hostAttributes['kind'];
+    delete this.hostAttributes['id'];
+  }
+  async load() {
+    this.host.setAttribute('loading', '');
+    return this.host;
+  }
+  async stop() {
+    this.host.removeAttribute('loading');
+    return this.host;
+  }
+  async disable() {
+    this.btn.setAttribute('disabled', '');
+  }
+  async enable() {
+    this.btn.removeAttribute('disabled');
+  }
+  handleVisible(newKind, oldKind) {
+    this.btn.classList.remove('btn-' + oldKind);
+    this.btn.classList.add('btn-' + newKind);
+  }
+  handleLoading(newVal) {
+    Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
+  }
+  render() {
+    return (h("button", Object.assign({ ref: el => this.btn = el }, this.hostAttributes),
+      h("slot", null),
+      this.loading ? h("span", { class: "loader loader--small s-button-loader" }) : ''));
+  }
+  static get is() { return "salla-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-button.css"]
+  }; }
+  static get properties() { return {
+    "kind": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "kind",
+      "reflect": true,
+      "defaultValue": "'primary'"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get methods() { return {
+    "load": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "stop": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "disable": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "enable": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "kind",
+      "methodName": "handleVisible"
+    }, {
+      "propName": "loading",
+      "methodName": "handleLoading"
+    }]; }
+}

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

@@ -0,0 +1,106 @@
+import { Component, Element, h, Method } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaLocalization {
+  constructor() {
+    Helper.setHost(this.host);
+    salla.event.on('localization::show', () => this.show());
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  submit() {
+    let url;
+    this.btn.load()
+      .then(() => {
+      let code = Helper.val('[name=currency]:checked');
+      if (code !== salla.config.currency.code) {
+        url = window.location.href;
+        return salla.currency.api.change(code);
+      }
+      //binding
+    }).then(() => {
+      let language = Helper.val('[name=lang]:checked');
+      if (language !== salla.config.language.code) {
+        url = salla.config.languages.filter(lang => lang.code === language)[0].url;
+      }
+    }).then(() => this.btn.stop())
+      .then(() => this.hide())
+      .then(() => url && (window.location.href = url));
+  }
+  render() {
+    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal },
+      h("slot", { name: "header" },
+        h("div", { slot: "header" })),
+      h("div", { class: "s-localization-inner" },
+        salla.config.languages
+          ? h("div", { class: "s-localization-section" },
+            h("label", { class: "s-localization-title" }, salla.lang.get('common.titles.language')),
+            h("fieldset", { class: "s-localization-fieldset" },
+              h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')),
+              h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => h("div", { class: "flex items-center" },
+                h("input", { id: 'lang-' + lang.code.toLowerCase(), class: "s-localization-input", name: "lang", checked: salla.config.language.code == lang.code, type: "radio", value: lang.code }),
+                h("label", { htmlFor: 'lang-' + lang.code.toLowerCase(), class: "s-localization-label" },
+                  h("span", null, lang.name),
+                  h("div", { class: 's-localization-flag flag iti__flag iti__' + lang.country_code })))))))
+          : '',
+        salla.config.currencies
+          ? h("div", { class: "s-localization-section" },
+            h("label", { class: "s-localization-title" }, salla.lang.get('common.titles.currency')),
+            h("fieldset", { class: "s-localization-fieldset" },
+              h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')),
+              h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => h("div", { class: "s-localization-item" },
+                h("input", { class: "s-localization-input", checked: salla.config.currency.code == currency.code, id: 'currency-' + currency.code, name: "currency", type: "radio", value: currency.code }),
+                h("label", { class: "s-localization-label", htmlFor: 'currency-' + currency.code },
+                  h("span", null, currency.name),
+                  h("small", { class: "s-localization-currency" }, currency.code)))))))
+          : ''),
+      h("p", { slot: "footer" },
+        h("slot", { name: "footer" },
+          h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.submit(), class: "w-full" }, salla.lang.get('common.elements.ok'))))));
+  }
+  static get is() { return "salla-localization"; }
+  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": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/{modal → salla-modal}/salla-modal.js

@@ -1,26 +1,35 @@
-import { Component, h, Prop, Host, Element, Event, Watch } from '@stencil/core';
+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 = 'sicon-cancel';
+    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());
   }
   handleVisible(newValue) {
-    return newValue === true
-      ? this.show()
-      : this.hide();
-  }
-  show() {
+    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();
   }
-  hide() {
-    this.toggleModal(false);
-    this.close.emit();
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
   }
   toggleModal(isOpen) {
     Helper.toggleElement(this.host.querySelector('.s-modal-overlay'), 'ease-out duration-300 opacity-100', 'opacity-0', () => isOpen)
@@ -32,23 +41,35 @@ export class SallaModal {
       setTimeout(() => this.host.classList.add('hidden'), 350);
     }
   }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
   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("div", { class: "s-modal-overlay", onClick: () => this.closeModal() }),
         h("span", { class: "s-modal-spacer" }, "\u200B"),
-        h("div", { class: "s-modal-body" },
+        h("div", { class: 's-modal-body ' + this.modalWidth },
           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.isClosable ?
+                h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" },
+                  h("span", { class: "sicon-cancel" }))
+                : '',
               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("div", { class: { 's-modal-icon': true, 's-modal-bg-error': this.error, 's-modal-bg-success': 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.host.title }),
+              h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle }))),
           h("slot", null),
           h("slot", { name: "footer" })))));
   }
@@ -90,6 +111,42 @@ export class SallaModal {
       "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": false,
+      "defaultValue": "'w-96'"
+    },
     "visible": {
       "type": "boolean",
       "mutable": false,
@@ -176,6 +233,46 @@ export class SallaModal {
         "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": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "visible",

package/dist/collection/components/{search → salla-search}/salla-search.js

@@ -70,35 +70,35 @@ export class SallaSearch {
         .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 (h("div", { class: "s-search-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 (h("div", { class: "s-search-product" },
+        h("a", { target: "_blank", href: item.url, class: "s-search-product-image-container" },
+          h("img", { class: "s-search-product-image", src: item.thumb })),
+        h("div", { class: "s-search-product-details" },
+          h("div", { class: "s-search-product-title" }, item.title),
+          h("div", { class: "s-search-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 (h(Host, { class: "s-search" },
+      h("button", { type: "button", onClick: this.openSearch, class: "s-search-search-button-icon" }, this.hasSearchIconSlot ? (h("slot", { name: "search-icon" })) : (h("i", { class: "sicon-search font-bold" }))),
+      this.showModal && (h("div", { class: "s-search-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } },
+        h("div", { class: "s-search-wrapper", onClick: this.closeSearch },
+          h("div", { class: "s-search-inner", onClick: e => {
               e.stopPropagation();
             } },
-            h("div", { class: "s-search-modal-search-box-container" },
+            h("div", { class: "s-search-search-box-container" },
               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)),
+                  ? 's-search-search-box-inner'
+                  : 's-search-search-box-inner-open' },
+                h("input", { class: "s-search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }),
+                this.fetchStatus != 'loading' ? (h("button", { class: "s-search-search-icon" },
+                  h("i", { class: "sicon-search" }))) : (h("span", { class: "s-search-spinner" },
+                  h("span", { class: "s-search-spinner-loader" }))))),
+            h("div", { class: "s-search-search-results" },
+              this.fetchStatus === 'error' && (h("p", { class: "s-search-no-results error p-4 text-sm text-gray-text" }, this.noResultsText)),
               this.results &&
                 this.results.map(item => {
                   return this.getProduct(item);

package/dist/collection/index.js

@@ -1,2 +1,2 @@
-export * from './components/login/salla-login';
-export * from './components/search/salla-search';
+export * from './components/salla-login/salla-login';
+export * from './components/salla-search/salla-search';

package/dist/collection/plugins/tailwind-theme/generator.js

@@ -7,7 +7,7 @@ fs.readdirSync(componentsPath, {withFileTypes: true})
   .filter(parent => parent.isDirectory())
   .forEach(directory => {
   try {
-    components[directory.name] = require(path.resolve(componentsPath  , directory.name, 'utilities.json'));
+    components[directory.name.replace('salla-','')] = require(path.resolve(componentsPath  , directory.name, 'utilities.json'));
   } catch (e) {
     // ignore
   }