@salla.sa/twilight-components 1.6.2 → 1.6.4

package/dist/components/salla-gifting.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaGifting extends Components.SallaGifting, HTMLElement {}
+export const SallaGifting: {
+  prototype: SallaGifting;
+  new (): SallaGifting;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-gifting.js

@@ -0,0 +1,499 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { A as ArrowRightIcon } from './arrow-right.js';
+import { L as LeftArrow, d as defineCustomElement$3 } from './salla-swiper2.js';
+import { C as Cancel } from './cancel.js';
+import { d as defineCustomElement$b } from './salla-button2.js';
+import { d as defineCustomElement$a } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$9 } from './salla-file-upload2.js';
+import { d as defineCustomElement$8 } from './salla-list-tile2.js';
+import { d as defineCustomElement$7 } from './salla-loading2.js';
+import { d as defineCustomElement$6 } from './salla-modal2.js';
+import { d as defineCustomElement$5 } from './salla-placeholder2.js';
+import { d as defineCustomElement$4 } from './salla-skeleton2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
+
+const Images = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>images</title>
+<path d="M22.667 29.333h-13.333c-3.676 0-6.667-2.991-6.667-6.667v-13.333c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v13.333c0 5.145 4.187 9.333 9.333 9.333h13.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333zM22.667 5.333c-2.205 0-4 1.795-4 4s1.795 4 4 4 4-1.795 4-4-1.795-4-4-4zM22.667 10.667c-0.735 0-1.333-0.597-1.333-1.333s0.599-1.333 1.333-1.333 1.333 0.597 1.333 1.333-0.599 1.333-1.333 1.333zM25.333 0h-13.333c-3.676 0-6.667 2.991-6.667 6.667v13.333c0 1.055 0.268 2.040 0.707 2.927 0.039 0.099 0.088 0.188 0.151 0.277 1.137 2.053 3.301 3.463 5.809 3.463h13.333c3.676 0 6.667-2.991 6.667-6.667v-13.333c0-3.676-2.991-6.667-6.667-6.667zM12 24c-1.244 0-2.344-0.583-3.077-1.476l5.721-7.047 6.629 8.523zM29.333 20c0 2.205-1.795 4-4 4h-0.68l-8.933-11.485c-0.251-0.32-0.633-0.511-1.039-0.515h-0.015c-0.401 0-0.781 0.181-1.035 0.492l-5.632 6.935v-12.76c0-2.205 1.795-4 4-4h13.333c2.205 0 4 1.795 4 4z"></path>
+</svg>
+`;
+
+const GiftSharing = `<!-- 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>gift-sharing</title>
+<path d="M5 32h-4c-0.552 0-1-0.448-1-1v0-14c0-0.552 0.448-1 1-1v0h4c0.552 0 1 0.448 1 1v0 14c0 0.552-0.448 1-1 1v0zM2 30h2v-12h-2zM19.32 30h-14.32v-2h14.32c0.693-0.005 1.329-0.242 1.837-0.637l-0.007 0.005 8.45-6.568c0.216-0.16 0.365-0.402 0.399-0.679l0-0.005c0.005-0.036 0.007-0.077 0.007-0.119 0-0.226-0.078-0.434-0.209-0.599l0.002 0.002c-0.16-0.216-0.401-0.364-0.677-0.399l-0.005-0.001c-0.034-0.004-0.073-0.007-0.113-0.007-0.227 0-0.436 0.078-0.601 0.208l0.002-0.002-7.126 5.526c-1.003 0.793-2.285 1.273-3.68 1.274h-6.6v-2h6.6c0.926-0.001 1.777-0.32 2.45-0.852l-0.008 0.006 7.126-5.526c0.492-0.39 1.122-0.625 1.807-0.625 0.135 0 0.268 0.009 0.398 0.027l-0.015-0.002c0.824 0.102 1.534 0.524 2.011 1.137l0.005 0.007c0.39 0.494 0.625 1.127 0.625 1.814 0 0.136-0.009 0.27-0.027 0.402l0.002-0.015c-0.106 0.819-0.529 1.523-1.141 1.995l-0.007 0.005-8.458 6.578c-0.834 0.649-1.894 1.043-3.047 1.050h-0.002zM11 26c-0.552 0-1-0.448-1-1s0.448-1 1-1v0c2.406-0.004 4.415-1.703 4.894-3.967l0.006-0.033h-10.9c-0.552 0-1-0.448-1-1s0.448-1 1-1v0h12c0.552 0 1 0.448 1 1v0c0 3.866-3.134 7-7 7v0zM24 12h-16c-1.105 0-2-0.895-2-2v0-2c0-1.105 0.895-2 2-2v0h16c1.105 0 2 0.895 2 2v0 2c0 1.105-0.895 2-2 2v0zM24 10v0zM8 8v2h16v-2zM23 18c-0.552 0-1-0.448-1-1v0-6c0-0.552 0.448-1 1-1s1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM9 16c-0.552 0-1-0.448-1-1v0-4c0-0.552 0.448-1 1-1s1 0.448 1 1v0 4c0 0.552-0.448 1-1 1v0zM16 16c-0.552 0-1-0.448-1-1v0-8c0-0.552 0.448-1 1-1s1 0.448 1 1v0 8c0 0.552-0.448 1-1 1v0zM16 8c-0.552-0-1-0.448-1-1 0-0.077 0.009-0.151 0.025-0.223l-0.001 0.007c0.314-1.849 0.963-3.5 1.887-4.961l-0.033 0.055c0.539-0.521 1.274-0.842 2.084-0.842 1.657 0 3 1.343 3 3 0 0.81-0.321 1.545-0.843 2.085l0.001-0.001c-1.405 0.891-3.056 1.541-4.824 1.845l-0.080 0.011c-0.065 0.015-0.139 0.024-0.216 0.024h-0zM19 3c-0.001 0-0.001 0-0.002 0-0.276 0-0.525 0.112-0.706 0.292l0-0c-0.391 0.669-0.703 1.444-0.897 2.264l-0.011 0.058c0.878-0.205 1.653-0.517 2.363-0.93l-0.041 0.022c0.18-0.181 0.292-0.43 0.292-0.706 0-0.551-0.446-0.999-0.998-1h-0zM16 8c-0.077-0-0.151-0.009-0.223-0.025l0.007 0.001c-1.848-0.315-3.499-0.965-4.959-1.888l0.055 0.032c-0.521-0.539-0.842-1.274-0.842-2.084 0-1.657 1.343-3 3-3 0.81 0 1.545 0.321 2.085 0.843l-0.001-0.001c0.891 1.405 1.541 3.056 1.845 4.824l0.011 0.080c0.015 0.066 0.024 0.141 0.024 0.218 0 0.552-0.448 1-1 1-0.001 0-0.001 0-0.002 0h0zM13 3c-0.001 0-0.001 0-0.002 0-0.552 0-1 0.448-1 1 0 0.277 0.112 0.527 0.294 0.708l0 0c0.669 0.391 1.444 0.703 2.264 0.897l0.058 0.011c-0.205-0.878-0.517-1.653-0.93-2.363l0.022 0.041c-0.181-0.181-0.43-0.293-0.706-0.294h-0z"></path>
+</svg>
+`;
+
+const sallaGiftingCss = ".s-gifting-steps-wrapper{transition:0.2s cubic-bezier(0.55, 0, 0.1, 1) 0s}.is-current-step-2 .gift-step-1,.is-current-step-1 .gift-step-2{pointer-events:none}.is-current-step-1 .gift-step-2{transform:translateX(105%)}.s-gifting-modal .s-modal-body::-webkit-scrollbar{display:none}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}";
+
+const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.currentStep = 1;
+    this.showCalendar = false;
+    this.showGiftText = false;
+    this.currentLang = '';
+    this.parentClass = "is-current-step-1";
+    this.errors = {};
+    this.gift = undefined;
+    // @State() selectedImage: GiftImage = undefined;
+    this.selectedGiftTextOption = undefined;
+    this.showTextArea = false;
+    /// Gift Form Data
+    this.selectedImage = undefined;
+    this.uploadedImage = undefined;
+    this.selectedText = undefined;
+    this.hasError = false;
+    this.timeZone = null;
+    salla.lang.onLoaded(() => {
+      this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
+      this.step1Elems = document.querySelectorAll('.gift-step-1 .anime-item');
+      this.step2Elems = document.querySelectorAll('.gift-step-2 .anime-item');
+      this.imageCover = document.querySelector('.s-gifting-modal-uploader');
+      this.stepsWrapper = document.querySelector('.steps-wrapper');
+      this.textSelect = document.querySelector('.s-gifting-selectText');
+      this.customTextArea = document.querySelector('.s-gifting-textarea');
+      this.calendarFormGroup = document.querySelector('.s-gifting-calendar');
+      this.sectionTitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love');
+      this.sectionSubtitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love_message');
+      this.sectionBtnText = salla.lang.get('blocks.buy_as_gift.send_as_a_gift');
+      this.giftDetails = salla.lang.get('blocks.buy_as_gift.gift_details');
+      this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
+      this.selectGiftMessage = salla.lang.get('blocks.buy_as_gift.select_gift_message');
+      this.giftCustomText = salla.lang.get('blocks.buy_as_gift.gift_custom_text');
+      this.textId = salla.lang.get('blocks.buy_as_gift.text_id');
+      this.incorrectGiftText = salla.lang.get('blocks.buy_as_gift.incorrect_gift_text');
+      this.nextStep = salla.lang.get('blocks.buy_as_gift.next_step');
+      this.senderNameLabel = salla.lang.get('blocks.buy_as_gift.sender_name');
+      this.receiverNameFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_name');
+      this.receiverMobileFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_mobile');
+      this.receiverEmailFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_email');
+      this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
+      this.sendLater = salla.lang.get('blocks.buy_as_gift.send_later');
+      this.selectSendDateAndTime = salla.lang.get('blocks.buy_as_gift.select_send_date_and_time');
+      this.canNotEditOrderAfterSelectDate = salla.lang.get('blocks.buy_as_gift.can_not_edit_order_after_select_date');
+      this.sendGift = salla.lang.get('blocks.buy_as_gift.send_gift');
+      this.donationRequired = salla.lang.get('pages.products.donation_amount_required');
+      this.currentLang = salla.lang.locale;
+    });
+  }
+  /**
+   * Show the gifting modal window
+   */
+  async open() {
+    this.modal.open();
+    return await salla.api.withoutNotifier(salla.product.getGiftDetails(this.productId)
+      .then((response) => {
+      this.gift = response.data;
+      this.senderName = this.gift.sender_name;
+    })
+      .catch(e => {
+      var _a, _b, _c, _d;
+      this.hasError = true;
+      this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
+    })
+      .finally(() => this.modal.stopLoading()));
+  }
+  /**
+  *
+  * Hide the gifting modal window
+  */
+  async close() {
+    return this.modal.close();
+  }
+  /**
+  *
+  * Update the modal height based on the changes on the inner elements height for a specific step OR just a pass a new fixed height
+  */
+  async setWrapperHeight(asStep = 1, delay = 250, additionSpace = 0, newHeight = 0) {
+    let currentStep = document.querySelector(`.gift-step-${asStep}`);
+    setTimeout(() => {
+      let currentStepHeight = currentStep.offsetHeight;
+      if (newHeight) {
+        this.stepsWrapper.style.height = `${newHeight}px`;
+      }
+      else {
+        this.stepsWrapper.style.height = currentStepHeight + additionSpace + 'px';
+      }
+    }, delay);
+  }
+  toggleCalendar() {
+    this.showCalendar = !this.showCalendar;
+    this.setWrapperHeight(2, 150, 0);
+  }
+  toggleGiftText(event) {
+    this.textSelect.classList.remove('s-form-has-error');
+    let dataID = event.target.children[event.target.selectedIndex].getAttribute('data-id');
+    let customID = dataID == "custom";
+    this.showGiftText = customID;
+    // dataID ? this.selectedGiftTextOption = dataID : this.selectedGiftTextOption = undefined;
+    if (dataID) {
+      this.selectedGiftTextOption = dataID;
+      this.setWrapperHeight(1, 150, 0);
+    }
+    else {
+      this.selectedGiftTextOption = undefined;
+      this.setWrapperHeight(1, 150, -25);
+    }
+  }
+  /**
+  *
+  * Go to the step 2
+  */
+  async goToStep2() {
+    if (!this.selectedGiftTextOption) {
+      this.textSelect.classList.add('s-form-has-error');
+      this.customTextArea.classList.remove('s-form-has-error');
+      return;
+    }
+    else if (this.selectedGiftTextOption == 'custom' && !this.selectedText) {
+      this.textSelect.classList.remove('s-form-has-error');
+      this.customTextArea.classList.add('s-form-has-error');
+      return;
+    }
+    else {
+      this.textSelect.classList.remove('s-form-has-error');
+      this.customTextArea.classList.remove('s-form-has-error');
+    }
+    this.setWrapperHeight(2, 600, 0);
+    let stepNextAnime = new anime.timeline();
+    stepNextAnime.add({
+      targets: this.step1Elems,
+      opacity: [1, 0],
+      translateX: [0, 50],
+      delay: anime.stagger(70),
+      // easing: 'easeOutExpo',
+      duration: 1200,
+    })
+      .add({
+      targets: '.gift-step-2',
+      translateX: ['-110%', 0],
+      opacity: [0, 1],
+    }, '-=1800')
+      .add({
+      targets: this.step2Elems,
+      opacity: [0, 1],
+      translateX: [-50, 0],
+      delay: anime.stagger(70),
+      duration: 1200,
+      complete: () => {
+        this.step2Elems.forEach(item => {
+          item.classList.remove('opacity-0');
+          item.removeAttribute('style');
+        });
+      }
+    }, '-=1200');
+    this.currentStep = 2;
+    this.stepsWrapper.classList.remove('is-current-step-1', 'is-current-step-2');
+    this.stepsWrapper.classList.add(`is-current-step-${this.currentStep}`);
+  }
+  /**
+    *
+    * Go to the step 1
+    */
+  goToStep1() {
+    let stepBackAnime = new anime.timeline({
+      autoplay: false,
+    });
+    stepBackAnime.add({
+      targets: this.step2Elems,
+      opacity: [1, 0],
+      translateX: [0, -50],
+      delay: anime.stagger(70),
+      // easing: 'easeOutExpo',
+      duration: 1200,
+    })
+      .add({
+      targets: '.gift-step-1',
+      translateX: ['110%', 0],
+      opacity: [0, 1],
+    }, '-=1800')
+      .add({
+      targets: this.step1Elems,
+      opacity: [0, 1],
+      translateX: [50, 0],
+      delay: anime.stagger(70),
+      duration: 1200,
+      complete: () => {
+        this.step1Elems.forEach(item => {
+          item.classList.remove('opacity-0');
+          item.removeAttribute('style');
+        });
+      }
+    }, '-=1200');
+    stepBackAnime.play();
+    this.setWrapperHeight(1, 600, 0);
+    this.currentStep = 1;
+    this.stepsWrapper.classList.remove('is-current-step-1', 'is-current-step-2');
+    this.stepsWrapper.classList.add(`is-current-step-${this.currentStep}`);
+  }
+  getFilepondPlaceholder() {
+    return `<div class="s-gifting-filepond-placeholder"><span class="s-gifting-filepond-placeholder-icon">${Images}</span><p class="s-gifting-filepond-placeholder-text">${this.selectImageOrUpload ? this.selectImageOrUpload : ''}</p></div>`;
+  }
+  setPreview(image) {
+    this.imageCover.classList.add('has-bg');
+    var bg = document.querySelector('.filepond-bg') ? document.querySelector('.filepond-bg') : document.createElement('div');
+    bg.classList.add('filepond-bg');
+    bg.classList.remove('s-hidden');
+    bg.style.backgroundImage = "url('" + image.url + "')";
+    this.imageCover.querySelector('.filepond--root').appendChild(bg);
+    this.uploadedImage = image.url;
+    if (!!this.gift && this.gift.gift_images.length) {
+      this.setWrapperHeight(1, 150, 0);
+    }
+  }
+  removePreview() {
+    this.imageCover.classList.remove('has-bg');
+    let bg = document.querySelector('.filepond-bg');
+    bg.removeAttribute('style');
+    bg.classList.add('s-hidden');
+    this.handleRemoveImage();
+  }
+  handleTextAreaChange(event) {
+    this.selectedText = event.target.value;
+    this.customTextArea.classList.remove('s-form-has-error');
+  }
+  handleSenderName(event) {
+    this.senderName = event.target.value;
+  }
+  handleReceiverName(event) {
+    this.receiverName = event.target.value;
+  }
+  handleRemoveImage() {
+    this.uploadedImage = '';
+    if (!!this.gift && this.gift.gift_images.length) {
+      this.setWrapperHeight(1, 150, 0);
+    }
+  }
+  // private handleReceiverEmail(event) {
+  //   this.receiverEmail = event.target.value;
+  // }
+  handlePhoneInputChange(event) {
+    let phone = event.detail;
+    this.receiverMobile = phone.number;
+    this.receiverCountryCode = phone.country_code;
+  }
+  handleDateTimePicker(event) {
+    this.deliveryDate = event.detail;
+  }
+  getCalendarClasses() {
+    return {
+      "s-form-group": true,
+      "anime-item": true,
+      "opacity-0": true,
+      "s-gifting-calendar": true,
+      "shown": this.showCalendar,
+      "hide": !this.showCalendar,
+      "s-form-has-error": !!this.errors && this.errors['deliver_at']
+    };
+  }
+  // TODO: make it default server config --> add it to file-upload
+  getServerConfig() {
+    return {
+      process: async (_fieldName, file, _metadata, load, error, _progress, abort, _transfer, _options) => {
+        const formData = new FormData();
+        formData.append("image_url", file, file.name);
+        return await salla.product.uploadGiftImage(formData)
+          .then((resp) => {
+          this.uploadedImage = resp.data.url;
+          load('success');
+          file.metadata = `_${new Date().getTime()}`;
+          if (!!this.gift && this.gift.gift_images.length) {
+            this.setWrapperHeight(1, 150, 0);
+          }
+        }).catch(e => {
+          console.log(e);
+          error('error');
+        })
+          .finally(() => {
+          return {
+            abort: () => {
+              abort();
+            },
+          };
+        });
+      }
+    };
+  }
+  async submitForm() {
+    var _a;
+    this.calendarFormGroup.classList.remove('s-form-has-error');
+    if (!!this.errors) {
+      this.errors = {};
+      this.setWrapperHeight(2, 150, 0);
+    }
+    if (this.showCalendar && !this.deliveryDate) {
+      this.calendarFormGroup.classList.add('s-form-has-error');
+      return;
+    }
+    let payload = {
+      text: this.selectedText,
+      sender_name: this.senderName,
+      quantity: 1,
+      deliver_at: this.showCalendar ? this.deliveryDate : null,
+      image_url: (_a = this.uploadedImage) !== null && _a !== void 0 ? _a : this.selectedImage,
+      receiver: {
+        name: this.receiverName,
+        country_code: this.receiverCountryCode,
+        mobile: this.receiverMobile
+      }
+    };
+    return await salla.product.addGiftToCart(this.productId, payload, true).then((resp) => {
+      console.log(resp);
+    }).catch((e) => {
+      if (e.response.status == 422) {
+        this.errors = e.response.data.error.fields;
+      }
+      else {
+        console.log(e);
+      }
+      this.setWrapperHeight(2, 150, 0);
+    });
+  }
+  render() {
+    var _a, _b;
+    return [
+      h("div", null, h("salla-list-tile", { class: "s-gifting-widget" }, h("div", { slot: "title" }, h("h3", null, this.sectionTitle)), h("div", { slot: "subtitle" }, h("div", null, this.sectionSubtitle)), h("div", { slot: "action" }, h("salla-button", { class: "s-gifting-widget-action", color: "gray", onClick: () => this.open() }, h("span", { innerHTML: GiftSharing }), " \u00A0", h("span", null, this.sectionBtnText)))), h("salla-modal", { id: 'salla-gifting-modal', isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-gifting-skeleton" }, h("div", { class: "s-gifting-modal-header" }, h("salla-skeleton", { type: 'circle', height: '5rem', width: '5rem' }), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { height: '15px', width: '150px' })))), h("div", { class: "s-gifting-skeleton-content" }, h("salla-skeleton", { height: '10px', width: '150px' }), h("salla-skeleton", { height: '230px' }), h("salla-skeleton", { height: '10px', width: '150px' }), h("salla-skeleton", { height: '30px' }), h("salla-skeleton", { height: '40px' })))), h("slot", { name: "header" }), !!this.hasError ?
+        h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage))
+        :
+          [
+            h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: GiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
+            h("div", { class: "s-gifting-steps-wrapper steps-wrapper" }, h("div", { class: "s-gifting-step-one gift-step-1" }, h("div", { class: "s-gifting-modal-uploader-title anime-item opacity-0" }, this.selectImageForYourGift), h("div", { class: "s-gifting-modal-uploader anime-item opacity-0" }, h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), serverConfig: this.getServerConfig(), onRemove: () => this.handleRemoveImage() }, " ")), h("div", { class: "anime-item opacity-0" }, !this.uploadedImage && !!this.gift && this.gift.gift_images.length > 0 ?
+              h("salla-swiper", { "space-between-items": "10", "item-per-view": "4" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` })))
+              : "", h("div", { class: "s-form-group s-gifting-selectText anime-item opacity-0" }, h("label", { htmlFor: "gift-text-selection", class: "s-form-label" }, this.selectGiftMessage), h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), (_b = this.gift) === null || _b === void 0 ? void 0 :
+              _b.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)), h("option", { "data-id": "custom" }, this.giftCustomText))), h("div", { class: this.showGiftText ? "s-form-group anime-item opacity-0 s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide" }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" }))), h("div", { class: "anime-item opacity-0" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, h("span", null, this.nextStep))))), h("div", { class: "s-gifting-step-two gift-step-2" }, h("div", { class: this.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ? h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''), h("div", { class: this.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''), h("div", { class: this.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''), h("div", { class: "anime-item opacity-0" }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" }, h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses() }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d H:i", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, h("a", { href: "#!", innerHTML: this.currentLang == 'ar' ? ArrowRightIcon : LeftArrow, onClick: () => this.goToStep1() }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
+          ], h("slot", { name: "footer" })))
+    ];
+  }
+  static get style() { return sallaGiftingCss; }
+}, [4, "salla-gifting", {
+    "productId": [2, "product-id"],
+    "sectionTitle": [32],
+    "sectionSubtitle": [32],
+    "sectionBtnText": [32],
+    "giftDetails": [32],
+    "selectImageForYourGift": [32],
+    "selectImageOrUpload": [32],
+    "selectGiftMessage": [32],
+    "giftCustomText": [32],
+    "textId": [32],
+    "incorrectGiftText": [32],
+    "nextStep": [32],
+    "senderNameLabel": [32],
+    "receiverNameFieldLabel": [32],
+    "receiverMobileFieldLabel": [32],
+    "receiverEmailFieldLabel": [32],
+    "emailPlaceholder": [32],
+    "sendLater": [32],
+    "selectSendDateAndTime": [32],
+    "canNotEditOrderAfterSelectDate": [32],
+    "sendGift": [32],
+    "donationRequired": [32],
+    "step1Elems": [32],
+    "step2Elems": [32],
+    "stepsWrapper": [32],
+    "imageCover": [32],
+    "textSelect": [32],
+    "customTextArea": [32],
+    "calendarFormGroup": [32],
+    "currentStep": [32],
+    "showCalendar": [32],
+    "showGiftText": [32],
+    "currentLang": [32],
+    "parentClass": [32],
+    "errors": [32],
+    "gift": [32],
+    "selectedGiftTextOption": [32],
+    "showTextArea": [32],
+    "selectedImage": [32],
+    "uploadedImage": [32],
+    "selectedText": [32],
+    "senderName": [32],
+    "errorMessage": [32],
+    "hasError": [32],
+    "quantity": [32],
+    "deliveryDate": [32],
+    "timeZone": [32],
+    "receiverName": [32],
+    "receiverMobile": [32],
+    "receiverCountryCode": [32],
+    "receiverEmail": [32],
+    "open": [64],
+    "close": [64],
+    "goToStep2": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-gifting", "salla-button", "salla-datetime-picker", "salla-file-upload", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-swiper", "salla-tel-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-gifting":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaGifting$1);
+      }
+      break;
+    case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "salla-datetime-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "salla-file-upload":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "salla-list-tile":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "salla-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "salla-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "salla-placeholder":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "salla-skeleton":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-swiper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-tel-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaGifting = SallaGifting$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaGifting, defineCustomElement };