@salla.sa/twilight-components 1.6.2 → 1.6.3

package/dist/esm/salla-quantity-input.entry.js

@@ -1,97 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-4e30ffd0.js';
-import { H as Helper } from './Helper-e1d414a5.js';
-
-const Add = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>add</title>
-<path d="M26.667 14.667h-9.333v-9.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v9.333h-9.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h9.333v9.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-9.333h9.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
-</svg>
-`;
-
-const Minus = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>minus</title>
-<path d="M26.667 14.667h-21.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h21.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
-</svg>
-`;
-
-const sallaQuantityInputCss = "";
-
-const SallaQuantityInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hostAttributes = {};
-    this.hasIncrementSlot = false;
-    this.hasDecrementSlot = false;
-    this.didLoaded = false;
-    this.quantity = 1;
-  }
-  /**
-   * Workaround to fire change event for the input.
-   */
-  watchPropHandler() {
-    if (!this.didLoaded) {
-      return;
-    }
-    Helper.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));
-  }
-  componentWillLoad() {
-    this.quantity = parseInt(this.host.getAttribute('value')) || 1;
-    this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
-    this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
-  }
-  componentDidLoad() {
-    this.didLoaded = true;
-    this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));
-  }
-  getInputAttributes() {
-    for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
-        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
-      }
-    }
-    return this.hostAttributes;
-  }
-  /**
-   * decrease quantity by one.
-   * @return HTMLSallaQuantityInputElement
-   */
-  async decrease() {
-    return this.setValue(this.quantity - 1);
-  }
-  /**
-   * increase quantity by one.
-   * @return HTMLSallaQuantityInputElement
-   */
-  async increase() {
-    return this.setValue(Number(this.quantity) + 1);
-  }
-  /**
-   * set quantity by one.
-   * @return HTMLSallaQuantityInputElement
-   */
-  async setValue(value) {
-    let maxQuantity = parseInt(this.host.getAttribute('max'));
-    if (maxQuantity && value > maxQuantity) {
-      value = maxQuantity;
-    }
-    if (value <= 1) {
-      value = 1;
-    }
-    this.quantity = value;
-    return this.host;
-  }
-  render() {
-    return (h(Host, { class: "s-quantity-input" }, h("div", { class: "s-quantity-input-container" }, h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { name: "increment-button" })), h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })), h("button", { class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { name: "decrement-button" })))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "quantity": ["watchPropHandler"]
-  }; }
-};
-SallaQuantityInput.style = sallaQuantityInputCss;
-
-export { SallaQuantityInput as salla_quantity_input };

package/dist/esm/salla-rating-modal.entry.js

@@ -1,165 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-4e30ffd0.js';
-import { H as Helper } from './Helper-e1d414a5.js';
-import { C as CheckCircle2 } from './check-circle2-f6e5f685.js';
-
-const ShippingFast = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>shipping-fast</title>
-<path d="M10.667 14.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h8c0.736 0 1.333-0.596 1.333-1.333zM9.333 18.667c-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333 5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM9.333 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667zM1.333 10.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.123 13.103l-3.147-3.935c-1.273-1.589-3.171-2.501-5.205-2.501h-1.437c0-2.205-1.795-4-4-4h-13.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h13.333c0.735 0 1.333 0.597 1.333 1.333v1.333c0 0.248 0.087 0.468 0.204 0.667-0.117 0.199-0.204 0.419-0.204 0.667v5.333c0 0.737 0.597 1.333 1.333 1.333h9.333v6.667h-1.333c-0.063 0-0.117 0.028-0.179 0.036-0.583-2.313-2.664-4.036-5.155-4.036-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c2.491 0 4.572-1.723 5.155-4.036 0.061 0.008 0.116 0.036 0.179 0.036h2.667c0.736 0 1.333-0.596 1.333-1.333v-8.399c0-0.905-0.311-1.792-0.877-2.499zM21.333 13.333v-4h1.437c1.221 0 2.36 0.547 3.124 1.501l1.997 2.499zM22.667 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z"></path>
-</svg>
-`;
-
-const sallaRatingModalCss = "";
-
-const SallaRatingModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.stepsCount = 0;
-    this.currentIndex = 0;
-    this.submitted = [];
-    /**
-     * The order id, to rate on its products & shipping
-     */
-    this.orderId = salla.config.get('page.id');
-    this.translationLoaded = false;
-    Helper.setHost(document);
-    salla.event.on('rating::open', () => this.open());
-    salla.lang.onLoaded(() => {
-      this.translationLoaded = true;
-    });
-  }
-  /**
-   * Show the rating modal
-   */
-  async open() {
-    return this.modal.open()
-      .then(() => this.order || salla.rating.api.order(this.orderId).then(res => this.order = res.data))
-      .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
-      .then(() => this.modal.stopLoading())
-      .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
-      .then(() => setTimeout(() => this.handleWizard(), 100));
-  }
-  /**
-   * Show the rating modal
-   */
-  async close() {
-    return this.modal.close();
-  }
-  // handle wizard
-  handleWizard() {
-    this.steps = this.modal.querySelectorAll(".s-rating-modal-step");
-    this.dots = this.modal.querySelectorAll(".s-rating-modal-step-dot");
-    this.showActiveStep();
-  }
-  showActiveStep(current = null) {
-    var _a;
-    this.currentTab = current || this.steps[this.currentIndex];
-    Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
-      .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
-    if (this.currentIndex != 0) {
-      // the animation
-      Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
-      setTimeout(() => Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
-    }
-    // Btn text
-    let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
-    this.nextBtn.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
-      : salla.lang.get('pages.rating.send_ratings'));
-    setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
-  }
-  previousTab() {
-    this.currentIndex > 0 && this.currentIndex--;
-    Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
-    this.showActiveStep();
-  }
-  submit() {
-    this.submittedBefore() || this.validate();
-    salla.config.canLeave = false;
-    this.nextBtn.load()
-      .then(() => this.submittedBefore() || this.sendFeedback())
-      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
-      .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
-      .then(() => this.showActiveStep())
-      .then(() => Helper.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
-      .finally(() => {
-      this.nextBtn.stop();
-      salla.config.canLeave = true;
-      this.currentIndex == this.stepsCount && this.showThankYou();
-      this.modal.isClosable = false;
-    });
-  }
-  submittedBefore() {
-    return this.submitted.includes(this.currentIndex);
-  }
-  validate(rating = null, type = null) {
-    if (!rating && this.currentTab.dataset.type == 'products') {
-      return this.currentTab.querySelectorAll('.rating-outer-form').forEach(rating => this.validate(rating, 'product'));
-    }
-    rating = rating || this.currentTab;
-    let stars = rating.querySelector('.rating_hidden_input').value;
-    let comment = rating.querySelector('.s-rating-modal-comment');
-    let validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
-    if (stars && comment.value && comment.value.length > 3) {
-      comment.classList.remove('s-has-error');
-      validationMessage.innerHTML = '';
-      return;
-    }
-    type = type || rating['dataset'].type;
-    Helper.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
-    throw validationMessage.innerHTML = stars
-      ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
-      : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');
-  }
-  sendFeedback() {
-    let data = {};
-    this.currentTab.querySelectorAll('[name]').forEach((input) => {
-      //decode names like `<input name="jamal[inner]" value="hi">` to be {name:jamal, value: {inner:"hi"}}
-      let inputData = salla.helpers.inputData(input.name, input.value, data);
-      data[inputData.name] = inputData.value;
-    });
-    if (Object.keys(data).length == 0) {
-      return;
-    }
-    data['order_id'] = this.orderId;
-    data['type'] = this.currentTab.dataset.type;
-    this.submitted.push(this.currentIndex);
-    return salla.rating.api[this.currentTab.dataset.type](data);
-  }
-  showThankYou() {
-    let seconds = 10;
-    let timeToClose = setInterval(() => {
-      this.thanksTime.innerHTML = '00:0' + (seconds--);
-      if (seconds > 0) {
-        return;
-      }
-      clearInterval(timeToClose);
-      this.thanksTime.remove();
-      this.close().then(() => window.location.reload());
-    }, 1000);
-    this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
-    this.showActiveStep(this.thanksTab);
-  }
-  render() {
-    return (h(Host, { class: "s-rating" }, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
-      ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
-          h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))
-          : '', this.order.products_enabled
-          ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("div", { class: "s-rating-modal-product-img-wrap" }, h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })), h("div", { class: "s-rating-modal-product-details" }, h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), h("div", { class: "s-rating-modal-stars-product" }, h("salla-rating-stars", { size: "small", name: `products[${index}][rating]` })), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" })))))
-          : '', this.order.shipping_enabled
-          ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
-            ? h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
-            : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }), h("div", { class: "s-rating-modal-title" }, " ", salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))
-          : '', h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }), h("h3", { class: "s-rating-modal-thanks-title" }, salla.lang.get('pages.rating.thanks')), h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
-      : '')));
-  }
-  componentDidLoad() {
-    salla.event.dispatch('rating::ready', this);
-  }
-  get host() { return getElement(this); }
-};
-SallaRatingModal.style = sallaRatingModalCss;
-
-export { SallaRatingModal as salla_rating_modal };

package/dist/esm/salla-rating-stars.entry.js

@@ -1,79 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-4e30ffd0.js';
-import { H as Helper } from './Helper-e1d414a5.js';
-import { S as Star2 } from './star2-b134fc74.js';
-
-const sallaRatingStarsCss = "";
-
-const SallaRatingStars = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Sets input name.
-     */
-    this.name = 'rating';
-    /**
-     * Sets the height and width of the component. Defaults to medium.
-     */
-    this.size = 'medium';
-  }
-  initiateRating() {
-    this.host.addEventListener('click', () => {
-      if (!this.startsElem)
-        return;
-      // Get the selected star - activeElement is not supported in safari
-      let activeStars = this.startsElem.querySelectorAll('.s-rating-stars-hovered');
-      let selected = activeStars[activeStars.length - 1];
-      if (!selected)
-        return;
-      let selectedIndex = selected.getAttribute('data-star');
-      this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
-      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
-      this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
-        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
-      // update aria-pressed attr status
-      this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
-      selected.setAttribute('aria-pressed', 'true');
-    });
-  }
-  highlightSelectedStars() {
-    var _a, _b;
-    let hoveredClass = 's-rating-stars-hovered', stars = (_a = this.startsElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.s-rating-stars-btn-star');
-    stars === null || stars === void 0 ? void 0 : stars.forEach((star, index) => {
-      star.addEventListener('mouseover', () => {
-        for (let i = 0; i <= index; i++) {
-          stars[i].classList.add(hoveredClass);
-        }
-      });
-      star.addEventListener('mouseout', () => star.classList.remove(hoveredClass));
-    });
-    (_b = this.startsElem) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
-  }
-  createStars(n) {
-    let stars = [];
-    for (let i = 0; i < 5; i++) {
-      stars.push(h("span", { class: {
-          's-rating-stars-btn-star': true,
-          ['s-rating-stars-' + this.size]: true,
-          's-rating-stars-selected': i < n
-        }, innerHTML: Star2 }));
-    }
-    return stars;
-  }
-  render() {
-    return (h(Host, null, this.value ?
-      h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
-      :
-        h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("span", { innerHTML: Star2 }))))));
-  }
-  componentDidLoad() {
-    this.initiateRating();
-    this.highlightSelectedStars();
-  }
-  get host() { return getElement(this); }
-};
-SallaRatingStars.style = sallaRatingStarsCss;
-
-export { SallaRatingStars as salla_rating_stars };