@salla.sa/twilight-components 1.0.19 → 1.0.21

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

@@ -1,459 +0,0 @@
-import { Component, h, Prop, Host, Element, Event, Watch, Method, State } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-/**
- * @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.width = 'md';
-    this.visible = false;
-    this.isLoading = false;
-    this.subTitleFirst = false;
-    this.subTitle = '';
-    this.icon = '';
-    this.imageIcon = '';
-    Helper.setHost(this.host);
-    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');
-    (_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.modalClosed.emit();
-      return;
-    }
-    this.host.classList.remove('hidden');
-    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
-    this.modalOpened.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;
-  }
-  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]') || 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);
-    }
-  }
-  closeModal() {
-    if (!this.isClosable) {
-      return;
-    }
-    this.host.removeAttribute('visible');
-  }
-  //todo:: pref for each modal
-  render() {
-    this.host.id = this.host.id || 'salla-modal';
-    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 ' + '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.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 {
-    "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"
-    },
-    "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,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-closable",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'",
-        "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "width",
-      "reflect": true,
-      "defaultValue": "'md'"
-    },
-    "visible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "visible",
-      "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,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sub-title-first",
-      "reflect": false,
-      "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": "''"
-    },
-    "imageIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "image-icon",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
-  static get states() { return {
-    "title": {}
-  }; }
-  static get events() { return [{
-      "method": "modalOpened",
-      "name": "modalOpened",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "modalClosed",
-      "name": "modalClosed",
-      "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": []
-      }
-    },
-    "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"; }
-  static get watchers() { return [{
-      "propName": "visible",
-      "methodName": "handleVisible"
-    }]; }
-}

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

@@ -1,81 +0,0 @@
-import { Component, h, Element, Method, State } from '@stencil/core';
-export class SallaOffer {
-  constructor() {
-    this.offer = null;
-    salla.offer.event.onExisted(data => {
-      //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
-      if (salla.localStore.get('remember-offer-' + data.offer.offer_id)) {
-        salla.log('User selected to don\'t show this offer again.');
-        return;
-      }
-      this.show(data.product_id);
-    });
-  }
-  async show(productId) {
-    this.modal.show()
-      .then(() => salla.api.offer.details(productId))
-      //TODO:: make sure there is only one offer
-      .then(response => this.offer = response.data[0])
-      .then(() => console.log(this.offer));
-  }
-  rememberMe(event) {
-    salla.localStore.set('remember-offer-' + this.offer.id, event.target.checked);
-  }
-  render() {
-    var _a, _b;
-    return h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
-      ? [h("div", { class: "s-offer-header" },
-          h("b", { class: "s-offer-title" }, this.offer.name),
-          h("h3", { class: "s-offer-subtitle" }, this.offer.message)),
-        h("div", { class: "s-offer-body" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
-          ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-badge" },
-            h("i", { class: "s-offer-badge-icon sicon-tag" }),
-            h("span", { class: "s-offer-badge-text" }, category.name)))
-          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-product" },
-            "- ",
-            product.name))),
-        h("div", { class: "s-offer-footer" },
-          this.offer.expiry_date ?
-            h("p", { class: "s-offer-expiry" },
-              salla.lang.get('pages.products.offer_expires_in'),
-              " ",
-              this.offer.expiry_date)
-            : '',
-          h("label", { class: "s-offer-remember-label" },
-            h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }),
-            "\u00A0 ",
-            salla.lang.get('common.remember_my_choice'))),
-      ] : '');
-  }
-  componentDidRender() {
-    //todo:: now from where there is hidden attributes to the doms🤔
-    //todo:: add animation
-    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
-  }
-  static get is() { return "salla-offer"; }
-  static get states() { return {
-    "offer": {}
-  }; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "(productId: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}