@salla.sa/twilight-components 1.6.3 → 1.6.4

package/dist/collection/components/salla-gifting/gift-schema.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

package/dist/collection/components/salla-gifting/intefaces.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

package/dist/collection/components/salla-gifting/salla-gifting.css

@@ -0,0 +1,20 @@
+.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>");
+}

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

@@ -0,0 +1,564 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import anime from 'animejs';
+import { Component, h, Prop, State, Method } from '@stencil/core';
+import Images from '../../assets/svg/images.svg';
+import RightArrow from '../../assets/svg/arrow-right.svg';
+import LeftArrow from '../../assets/svg/arrow-left.svg';
+import Cancel from '../../assets/svg/cancel.svg';
+import GiftSharing from '../../assets/svg/gift-sharing.svg';
+export class SallaGifting {
+  constructor() {
+    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' ? RightArrow : 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 is() { return "salla-gifting"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-gifting.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-gifting.css"]
+  }; }
+  static get properties() { return {
+    "productId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The product id for which the gifting system is required."
+      },
+      "attribute": "product-id",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "sectionTitle": {},
+    "sectionSubtitle": {},
+    "sectionBtnText": {},
+    "giftDetails": {},
+    "selectImageForYourGift": {},
+    "selectImageOrUpload": {},
+    "selectGiftMessage": {},
+    "giftCustomText": {},
+    "textId": {},
+    "incorrectGiftText": {},
+    "nextStep": {},
+    "senderNameLabel": {},
+    "receiverNameFieldLabel": {},
+    "receiverMobileFieldLabel": {},
+    "receiverEmailFieldLabel": {},
+    "emailPlaceholder": {},
+    "sendLater": {},
+    "selectSendDateAndTime": {},
+    "canNotEditOrderAfterSelectDate": {},
+    "sendGift": {},
+    "donationRequired": {},
+    "step1Elems": {},
+    "step2Elems": {},
+    "stepsWrapper": {},
+    "imageCover": {},
+    "textSelect": {},
+    "customTextArea": {},
+    "calendarFormGroup": {},
+    "currentStep": {},
+    "showCalendar": {},
+    "showGiftText": {},
+    "currentLang": {},
+    "parentClass": {},
+    "errors": {},
+    "gift": {},
+    "selectedGiftTextOption": {},
+    "showTextArea": {},
+    "selectedImage": {},
+    "uploadedImage": {},
+    "selectedText": {},
+    "senderName": {},
+    "errorMessage": {},
+    "hasError": {},
+    "quantity": {},
+    "deliveryDate": {},
+    "timeZone": {},
+    "receiverName": {},
+    "receiverMobile": {},
+    "receiverCountryCode": {},
+    "receiverEmail": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Show the gifting modal window",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "\nHide the gifting modal window",
+        "tags": []
+      }
+    },
+    "goToStep2": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "\nGo to the step 2",
+        "tags": []
+      }
+    }
+  }; }
+}