@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-gifting.js

@@ -1,4 +1,735 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,h as i}from"@stencil/core/internal/client";import{a}from"./anime.es.js";import{I as l}from"./arrow-left.js";import{C as o}from"./cancel.js";import{d as r}from"./salla-button2.js";import{d as c}from"./salla-datetime-picker2.js";import{d as n}from"./salla-file-upload2.js";import{d as h}from"./salla-list-tile2.js";import{d}from"./salla-loading2.js";import{d as g}from"./salla-modal2.js";import{d as f}from"./salla-placeholder2.js";import{d as m}from"./salla-skeleton2.js";import{d as u}from"./salla-slider2.js";import{d as p}from"./salla-tel-input2.js";var b='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>gift-sharing</title>\n<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>\n</svg>\n';const v=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.defaultEvent="gifting:open",this.selectImageForYourGift=salla.lang.get("blocks.buy_as_gift.select_image_or_upload"),this.currentStep=1,this.showCalendar=!1,this.showGiftText=!1,this.currentLang="",this.parentClass="is-current-step-1",this.errors={},this.gift=void 0,this.selectedGiftTextOption=void 0,this.selectedCountryId=void 0,this.selectedCountryCode=void 0,this.loadingCities=!1,this.loadingRegions=!1,this.regions=[],this.selectedRegionId=void 0,this.isKSA=!1,this.step2Animated=!1,this.showTextArea=!1,this.selectedImage=void 0,this.uploadedImage=void 0,this.selectedText=void 0,this.hasError=!1,this.timeZone=null,this.receiverCountryCode=salla.config.get("store.scope.countries")?.[0]||salla.config.get("store.store_country")||"SA",this.hostId="salla-gifting-"+Math.random().toString(36).slice(2,10),this.formSelector="form.product-form, form.form--product-options",salla.lang.onLoaded((()=>{this.selectImageOrUpload=salla.lang.get("blocks.buy_as_gift.select_image_or_upload"),this.selectImageForYourGift=salla.lang.get("blocks.buy_as_gift.select_image_for_your_gift"),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.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.receiverCountryFieldLabel=salla.lang.get("blocks.buy_as_gift.receiver_country"),this.ksa=salla.lang.get("pages.checkout.ksa"),this.selectCity=salla.lang.get("pages.checkout.select_city"),this.selectCountry=salla.lang.get("pages.checkout.select_country"),this.selectCityInfo=salla.lang.get("blocks.buy_as_gift.city_info"),this.receiverCityFieldLabel=salla.lang.get("blocks.buy_as_gift.receiver_city"),this.receiverRegionFieldLabel=salla.lang.get("blocks.buy_as_gift.receiver_region")||salla.lang.get("pages.checkout.region"),this.selectRegion=salla.lang.get("pages.checkout.select_region"),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})),salla.event.on(this.defaultEvent,(()=>{this.open()}))}componentDidLoad(){salla.event.product.onPriceUpdated((()=>{const s=document.querySelector(".s-quantity-input-input");this.quantity=s?.value}))}getFormDataFromForm(){if(!this.formSelector)return null;const s=document.querySelector(this.formSelector);return s?new FormData(s):null}mergeObjectToFormData(s,t,e){for(let i in s){if(!s.hasOwnProperty(i)||null==s[i])continue;const a=e?`${e}[${i}]`:i;"object"!=typeof s[i]||null===s[i]||s[i]instanceof File?t.set(a,s[i]):this.mergeObjectToFormData(s[i],t,a)}return t}async open(){if(salla.config.isGuest())return salla.api.auth.setAfterLoginEvent(this.defaultEvent),void salla.event.dispatch("login::open",{withoutReload:!0});await this.modal.open();const s=this.productId?()=>salla.product.getGiftProductDetails(this.productId):()=>salla.cart.getGiftCartDetails();return await salla.api.withoutNotifier(s).then((s=>{this.gift=s.data,this.senderName=this.gift.sender_name})).catch((s=>{this.hasError=!0,this.errorMessage=s.response?.data?.error?.message||s.response?.data})).finally((()=>this.modal.stopLoading()))}async close(){return this.modal.close()}async setWrapperHeight(s=1,t=250,e=0,i=0){let a=document.querySelector(`#${this.hostId} .gift-step-${s}`);const l=()=>{this.stepsWrapper.style.height=i?i+"px":a.offsetHeight+e+"px"};this.step2Animated&&2===s?requestAnimationFrame(l):setTimeout(l,t)}toggleCalendar(){this.showCalendar=!this.showCalendar,this.setWrapperHeight(2,150,0)}toggleGiftText(s){this.textSelect?.classList.remove("s-form-has-error");let t=s.target.children[s.target.selectedIndex].getAttribute("data-id"),e="custom"==t;this.showGiftText=e,t?(this.selectedGiftTextOption=t,this.selectedText=e?void 0:s.target.value,this.setWrapperHeight(1,150,5)):(this.textArea.value="",this.selectedText=void 0,this.selectedGiftTextOption=void 0,this.setWrapperHeight(1,150,-15))}async goToStep2(){return this.selectedGiftTextOption?"custom"!=this.selectedGiftTextOption||this.selectedText?(this.textSelect.classList.remove("s-form-has-error"),this.customTextArea.classList.remove("s-form-has-error"),this.setWrapperHeight(2,600,0),(new a.timeline).add({targets:this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`),opacity:[1,0],translateX:[0,50],delay:a.stagger(70),duration:1200}).add({targets:".gift-step-2",translateX:["-110%",0],opacity:[0,1]},"-=1800").add({targets:this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`),opacity:[0,1],translateX:[-50,0],delay:a.stagger(70),duration:1200,complete:()=>{this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`).forEach((s=>{s.classList.remove("opacity-0"),s.removeAttribute("style")})),this.step2Animated=!0}},"-=1200"),this.currentStep=2,void(this.parentClass="is-current-step-"+this.currentStep)):(this.textSelect.classList.remove("s-form-has-error"),void this.customTextArea.classList.add("s-form-has-error")):(this.textSelect.classList.add("s-form-has-error"),void this.customTextArea.classList.remove("s-form-has-error"))}goToStep1(s){s.preventDefault();let t=new a.timeline({autoplay:!1});t.add({targets:this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`),opacity:[1,0],translateX:[0,-50],delay:a.stagger(70),duration:1200}).add({targets:".gift-step-1",translateX:["110%",0],opacity:[0,1]},"-=1800").add({targets:this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`),opacity:[0,1],translateX:[50,0],delay:a.stagger(70),duration:1200,complete:()=>{this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`).forEach((s=>{s.classList.remove("opacity-0"),s.removeAttribute("style")}))}},"-=1200"),t.play(),this.step2Animated=!1,this.setWrapperHeight(1,600,0),this.currentStep=1,this.parentClass="is-current-step-"+this.currentStep}getFilepondPlaceholder(){return`<div class="s-gifting-filepond-placeholder"><span class="s-gifting-filepond-placeholder-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>images</title>\n<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>\n</svg>\n</span><p class="s-gifting-filepond-placeholder-text">${this.selectImageOrUpload?this.selectImageOrUpload:""}</p></div>`}setPreview(s){this.uploader?.classList.add("has-bg");var t=document.querySelector(`#${this.hostId}.filepond-bg`)?document.querySelector(`#${this.hostId} .filepond-bg`):document.createElement("div");t.classList.add("filepond-bg"),t.classList.remove("s-hidden"),t.style.backgroundImage="url('"+s.url+"')",this.uploader?.querySelector(".filepond--root")?.appendChild(t),this.uploadedImage=s.url,this.gift&&this.gift.gift_images.length&&this.setWrapperHeight(1,150,0)}removePreview(){this.uploader.classList.remove("has-bg");let s=document.querySelector(`#${this.hostId} .filepond-bg`);s.removeAttribute("style"),s.classList.add("s-hidden"),this.handleRemoveImage()}handleTextAreaChange(s){this.selectedText=s.target.value,this.customTextArea.classList.remove("s-form-has-error")}clearError(s){if(this.errors?.[s]){const{[s]:t,...e}=this.errors;this.errors=e}}handleSenderName(s){this.senderName=s.target.value,this.clearError("sender_name")}handleReceiverName(s){this.receiverName=s.target.value,this.clearError("receiver.name")}handleReceiverCity(s){this.receiverCity=s.target.value,this.clearError("receiver.city_id")}async handleCountryChange(s){const t=Number(s.target.value);this.selectedCountryId=t,this.clearError("receiver.country");const e=this.gift?.countries?.find((s=>s.id==t));if(this.selectedCountryCode=e?.country_code,this.isKSA="SA"===e?.country_code,this.regions=[],this.selectedRegionId=void 0,this.gift={...this.gift,cities:[]},this.receiverCity=void 0,!t||0===this.gift?.countries?.length)return this.selectedCountryCode=void 0,this.isKSA=!1,void this.setWrapperHeight(2,0,0);if(this.isKSA){this.loadingRegions=!0,this.setWrapperHeight(2,0,0);try{const s=await salla.api.request(`shipping/countries/${t}/regions`);s&&s.data&&(this.regions=s.data)}catch(s){console.error("Error fetching regions:",s)}finally{this.loadingRegions=!1,this.setWrapperHeight(2,0,0)}}else{this.loadingCities=!0,this.setWrapperHeight(2,0,0);try{const s=await salla.api.request("shipping/cities?for_branch=0&country_id="+t);s&&s.data&&(this.gift={...this.gift,cities:s.data})}catch(s){console.error("Error fetching cities:",s)}finally{this.loadingCities=!1}}}async handleRegionChange(s){const t=Number(s.target.value);if(this.selectedRegionId=t,this.clearError("receiver.region"),this.gift={...this.gift,cities:[]},this.receiverCity=void 0,t){this.loadingCities=!0;try{const s=await salla.api.request(`shipping/cities?for_branch=0&country_id=${this.selectedCountryId}&region_id=${t}`);s&&s.data&&(this.gift={...this.gift,cities:s.data})}catch(s){console.error("Error fetching cities:",s)}finally{this.loadingCities=!1,this.setWrapperHeight(2,0,0)}}}handleUploadImage(s){this.uploadedImage=s,this.gift&&this.gift.gift_images.length&&this.setWrapperHeight(1,150,0)}handleRemoveImage(){this.uploadedImage="",this.gift&&this.gift.gift_images.length&&this.setWrapperHeight(1,150,0)}handlePhoneInputChange(s){let t=s.detail;this.receiverMobile=t.number,this.receiverCountryCode=t.country_code,this.clearError("receiver.mobile")}handleDateTimePicker(s){this.deliveryDate=s.detail}getCalendarClasses(){return{"s-form-group":!0,"anime-item":!0,"s-gifting-calendar":!0,shown:this.showCalendar,hide:!this.showCalendar,"s-form-has-error":!!this.errors&&this.errors.deliver_at}}async submitForm(){const s=document.querySelector("#donating-amount")?.value;if(this.calendarFormGroup.classList.remove("s-form-has-error"),this.errors&&(this.errors={},this.setWrapperHeight(2,150,0)),this.showCalendar&&!this.deliveryDate)return void this.calendarFormGroup.classList.add("s-form-has-error");const t=[{key:"sender_name",value:this.senderName,label:this.senderNameLabel},{key:"receiver.name",value:this.receiverName,label:this.receiverNameFieldLabel},{key:"receiver.mobile",value:this.receiverMobile,label:this.receiverMobileFieldLabel},...this.physicalProducts?[{key:"receiver.country",value:this.selectedCountryId,label:this.receiverCountryFieldLabel},...this.isKSA?[{key:"receiver.region",value:this.selectedRegionId,label:this.receiverRegionFieldLabel}]:[],{key:"receiver.city_id",value:this.receiverCity,label:this.receiverCityFieldLabel}]:[]],e={};if(t.forEach((({key:s,value:t,label:i})=>{t||(e[s]=salla.lang.get("common.errors.field_required",{attribute:i}))})),Object.keys(e).length)return this.errors=e,void this.setWrapperHeight(2,150,0);const i={text:this.selectedText,sender_name:this.senderName,quantity:this.quantity,deliver_at:this.showCalendar?this.deliveryDate:null,image_url:this.uploadedImage??this.selectedImage,donation_amount:s||null,receiver:{name:this.receiverName,mobile_country_code:this.receiverCountryCode,mobile:this.receiverMobile,...this.physicalProducts&&this.selectedCountryCode?{country_code:this.selectedCountryCode}:{},...this.physicalProducts&&this.selectedRegionId?{region_id:this.selectedRegionId}:{},...this.receiverCity&&this.physicalProducts?{city_id:this.receiverCity}:{}},has_apple_pay:salla.helpers.hasApplePay()};let a;this.productId&&this.formSelector&&(a=this.getFormDataFromForm()||new FormData,a=this.mergeObjectToFormData(i,a));const l=this.productId?()=>salla.product.addProductGiftToCart(this.productId,a,!0):()=>salla.cart.addCartGiftToCart(i,!0);return await l().then((()=>this.modal.close())).catch((s=>{s.response&&422==s.response.status?this.errors=s.response.data.error.fields:console.log(s),this.setWrapperHeight(2,150,0)}))}step2ItemClass(s=""){const t="anime-item"+(this.step2Animated?"":" opacity-0");return s?`${s} ${t}`:t}generateClass(){return{"s-gifting-widget":!0,"s-gifting-widget-vertical":!!this.vertical,"s-gifting-widget-horizontal":!this.vertical}}async handleGiftButtonClick(){if(this.productId&&this.formSelector){const s=document.querySelector(this.formSelector);if(!s)return void console.error("SallaGifting:: Form not found in the document!");if(!(s instanceof HTMLFormElement))return void console.error("SallaGifting:: The specified selector does not correspond to a form tag!");if(!s.reportValidity())return console.error("SallaGifting:: Form is not valid!"),void salla.error(salla.lang.get("common.messages.required_fields"))}const s=document.querySelector(`salla-product-options[product-id="${this.productId}"]`);!s||await s.reportValidity()?this.open():salla.error(salla.lang.get("common.messages.required_fields"))}render(){return[i("div",{key:"5d0eec8210f77d166c144704ec78bffcaf1f4ce0"},i("salla-list-tile",{key:"19cc20b4f70bbb8a7d267f60052db77589901962",class:this.generateClass()},i("div",{key:"1c3c52b5ac48e71a6ac26c60494657ac28d16457",slot:"title"},this.vertical?i("span",{innerHTML:b}):"",i("h3",{key:"e3379fb3ed39d1bc63500346058b26b883c3be13"},this.widgetTitle?this.widgetTitle:this.sectionTitle)),i("div",{key:"f6c2a522727546aa27cef725faa8be082da063da",slot:"subtitle"},i("div",{key:"7b58ad967f39fa2cc660369b72e73f8dc49f90dc"},this.widgetSubtitle?this.widgetSubtitle:this.sectionSubtitle)),i("div",{key:"848396dcd6ce6009ebc4cf1a209a055ad1adbf15",slot:"action"},i("salla-button",{key:"2ba69b670f1c958784c6f1dca6b2dd0b93f20859",color:"primary",fill:"outline",width:"wide",class:"s-gifting-widget-action",onClick:()=>this.handleGiftButtonClick()},i("slot",{key:"6ac9ac339e321fc9433465cfd75f299307ee7152",name:"widget-btn-content"},i("div",{key:"c61dd36375886c1ecf87f115e5248dca1af7efc9",class:"s-gifting-widget-action-content"},i("span",{key:"0c8a3630ba6b15889fc4bf3d55a1279cdf713400",innerHTML:b}),"  ",i("span",{key:"c9299ec752e5393f30a78e1e01d367be9e97ca50"},this.sectionBtnText)))))),i("salla-modal",{key:"9ee17e79f97eee59d25d9627d5b1cd4ada7cadb3",id:this.hostId,isLoading:!0,class:"s-gifting-modal",width:"sm",ref:s=>this.modal=s},i("div",{key:"aba3b6a4d3e903934c9b5e629119c3a3b5bc90ab",slot:"loading"},i("div",{key:"e03613cc85bf4024f63d2e256a2744ec78f7eabf",class:"s-gifting-skeleton"},i("div",{key:"01156691d540ce5ef5723902610a1da27fba3ddb",class:"s-gifting-modal-header"},i("salla-skeleton",{key:"e45b4868e4fa5633aeb22f758f75f5412290b179",type:"circle",height:"5rem",width:"5rem"}),i("h2",{key:"2b427d38dd6e0569e16de84ef46eb2052d23b739",class:"s-gifting-modal-title"},i("div",{key:"c4f9cb6f513e3ebd2e6ad209648a1f70bcafbcb5",class:"s-gifting-modal-badge-wrapper"},i("salla-skeleton",{key:"e684b682a4cca89262128cca13604b7aa9a83cd7",height:"15px",width:"150px"})))),i("div",{key:"2941865d68cd216b4dd82bb8279f6bcbaa062bf3",class:"s-gifting-skeleton-content"},i("salla-skeleton",{key:"7c4f4235a666930ceef3dc0b38809aea5ee5ce5c",height:"10px",width:"150px"}),i("salla-skeleton",{key:"0257f401762a11b0bf3da7db603b4e5f57bd1aae",height:"230px"}),i("salla-skeleton",{key:"cced26b189549fcee4eff3a3fbd943a5735b4c6c",height:"10px",width:"150px"}),i("salla-skeleton",{key:"f5893e5c631564c91bfe42c4102190d43f913947",height:"30px"}),i("salla-skeleton",{key:"64d3738017cf6732b429848c1de4ca16db1adc06",height:"40px"})))),i("slot",{key:"77d5bda8147f7f09d73b97fd7456121626b465a7",name:"header"}),this.hasError?i("salla-placeholder",{alignment:"center"},i("span",{slot:"title"},this.errorMessage||salla.lang.get("common.errors.empty_results")),i("span",{slot:"description"}," ")):[i("div",{class:"s-gifting-modal-header"},i("span",{class:"s-gifting-modal-icon"},i("span",{innerHTML:b})),i("h2",{class:"s-gifting-modal-title"},i("div",{class:"s-gifting-modal-badge-wrapper"},i("div",{class:"s-gifting-modal-badge"},i("span",null,i("span",null,this.currentStep),"/2")),i("span",null,this.giftDetails)))),i("div",{class:"s-gifting-steps-wrapper "+this.parentClass,ref:s=>this.stepsWrapper=s},i("div",{class:"s-gifting-step-one gift-step-1",ref:s=>this.step1Elems=s},i("div",{class:"s-gifting-modal-uploader-title anime-item"},this.selectImageForYourGift),i("div",{class:"s-gifting-modal-uploader anime-item",ref:s=>this.uploader=s},i("span",{class:"s-gifting-remove-preview",onClick:()=>this.removePreview(),innerHTML:o}),this.selectImageOrUpload&&i("salla-file-upload",{"instant-upload":!0,name:"image_url",url:salla.url.api(salla.product.api.getUrl("giftImage")),onUploaded:s=>this.handleUploadImage(s.detail),labelIdle:this.getFilepondPlaceholder(),onRemoved:()=>this.handleRemoveImage()})),i("div",{class:"anime-item"},!this.uploadedImage&&this.gift&&this.gift.gift_images&&this.gift.gift_images.length>0?i("salla-slider",{id:"gifting-slider",loop:!1,"controls-outer":!0,class:"s-gifting-slider",type:"carousel"},i("div",{slot:"items"},this.gift&&this.gift.gift_images?this.gift?.gift_images.map((s=>i("a",{class:"s-gifting-clickable s-gifting-image",onClick:()=>this.setPreview(s)},i("img",{style:{width:"120px"},src:s.url,alt:""+s.id})))):"")):""),i("div",{class:"anime-item"},i("div",{class:"s-form-group s-gifting-selectText",ref:s=>this.textSelect=s},i("select",{id:"gift-text-selection",name:"gift-text-selection",class:"s-form-control s-gifting-select",onChange:s=>this.toggleGiftText(s)},i("option",{"data-id":null,selected:!0},this.selectGiftMessage),this.gift&&this.gift.gift_texts?this.gift?.gift_texts.map((s=>i("option",{"data-id":s.id,value:s.text,key:s.id},s.text))):"",i("option",{"data-id":"custom"},this.giftCustomText))),i("div",{class:this.showGiftText?"s-form-group s-gifting-textarea shown":"s-form-group s-gifting-textarea hide",ref:s=>this.customTextArea=s},i("label",{htmlFor:"gift-custom-text",class:"s-form-label"},this.giftCustomText),i("div",{class:"mt-1"},i("textarea",{onInput:s=>this.handleTextAreaChange(s),rows:4,ref:s=>this.textArea=s,name:"gift-custom-text",id:"gift-custom-text",class:"s-form-control"})))),i("div",{class:"anime-item"},i("salla-button",{color:"primary",width:"wide",onClick:()=>this.goToStep2()},i("span",null,this.nextStep)))),i("div",{class:"s-gifting-step-two gift-step-2",ref:s=>this.step2Elems=s},i("div",{class:this.step2ItemClass(this.errors?.sender_name?"s-form-group s-form-has-error":"s-form-group")},i("label",{htmlFor:"sender_name",class:"s-form-label"},this.senderNameLabel),i("input",{type:"text",class:"s-form-control",name:"sender_name",id:"sender_name",value:this.senderName,onInput:s=>this.handleSenderName(s),placeholder:""}),this.errors&&this.errors.sender_name?i("span",{class:"s-gifting-error"},this.errors.sender_name):""),i("div",{class:this.step2ItemClass(this.errors?.["receiver.name"]?"s-form-group s-form-has-error":"s-form-group")},i("label",{htmlFor:"receiver_name",class:"s-form-label"},this.receiverNameFieldLabel),i("input",{type:"text",class:"s-form-control",name:"receiver_name",id:"receiver_name",value:"",onInput:s=>this.handleReceiverName(s),placeholder:""}),this.errors&&this.errors["receiver.name"]?i("span",{class:"s-gifting-error"},this.errors["receiver.name"]):""),i("div",{class:this.step2ItemClass(this.errors?.["receiver.mobile"]?"s-form-group s-form-has-error":"s-form-group")},i("label",{class:"s-form-label"},this.receiverMobileFieldLabel),i("salla-tel-input",{class:"s-gifting-tel-input",phone:this.receiverMobile,countryCode:this.receiverCountryCode,onPhoneEntered:s=>this.handlePhoneInputChange(s)}),this.errors&&this.errors["receiver.mobile"]?i("span",{class:"s-gifting-error"},this.errors["receiver.mobile"]):""),this.physicalProducts&&i("div",{class:this.step2ItemClass(this.errors?.["receiver.country"]?"s-form-group s-form-has-error":"s-form-group")},i("label",{class:"s-form-label"},this.receiverCountryFieldLabel),i("select",{name:"country",class:"s-form-control",onChange:s=>this.handleCountryChange(s),required:!0},i("option",{value:""},this.selectCountry),this.gift?.countries?.map((s=>i("option",{value:s.id},s.name)))),this.errors&&this.errors["receiver.country"]?i("span",{class:"s-gifting-error"},this.errors["receiver.country"]):""),this.physicalProducts&&this.isKSA&&i("div",{class:this.step2ItemClass(this.errors?.["receiver.region"]?"s-form-group s-form-has-error":"s-form-group")},i("label",{class:"s-form-label"},this.receiverRegionFieldLabel),i("select",{name:"region",class:"s-form-control",onChange:s=>this.handleRegionChange(s),disabled:this.loadingRegions},i("option",{value:"",selected:!0},this.loadingRegions?salla.lang.get("common.elements.loading"):this.selectRegion),this.regions?.map((s=>i("option",{value:s.id},s.name)))),this.errors&&this.errors["receiver.region"]?i("span",{class:"s-gifting-error"},this.errors["receiver.region"]):""),this.physicalProducts&&i("div",{class:this.step2ItemClass(this.errors?.["receiver.city_id"]?"s-form-group s-form-has-error":"s-form-group")},i("label",{class:"s-form-label"},this.receiverCityFieldLabel),i("select",{name:"city","aria-label":salla.lang.get("blocks.buy_as_gift.select_city"),class:"s-form-control",onChange:s=>this.handleReceiverCity(s),disabled:this.loadingCities||this.isKSA&&!this.selectedRegionId},i("option",{value:"",selected:!0},this.loadingCities?salla.lang.get("common.elements.loading"):this.selectCity),this.gift?.cities?.map((s=>i("option",{value:s.id},s.name)))),this.errors&&this.errors["receiver.city_id"]?i("span",{class:"s-gifting-error"},this.errors["receiver.city_id"]):""),this.physicalProducts&&i("div",{class:this.step2ItemClass("s-gifting-info")},i("span",{innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>alert</title>\n<path d="M16 13.333c-0.736 0-1.333 0.597-1.333 1.333v8c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-8c0-0.736-0.597-1.333-1.333-1.333zM16 9.327c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM27.313 4.687c-6.237-6.237-16.389-6.239-22.628 0-6.237 6.239-6.237 16.389 0 22.628 3.119 3.119 7.216 4.679 11.313 4.679s8.195-1.559 11.313-4.679c6.24-6.239 6.24-16.391 0.001-22.628zM25.428 25.428c-5.199 5.197-13.657 5.197-18.857 0-5.197-5.199-5.197-13.659 0-18.857 5.199-5.197 13.659-5.197 18.857 0 5.199 5.2 5.199 13.659 0 18.857z"></path>\n</svg>\n'}),i("span",null,this.selectCityInfo)),!this.physicalProducts&&i("div",{class:this.step2ItemClass()},i("label",{class:"s-gifting-schedule s-gifting-clickable",htmlFor:"schedule-"+this.hostId},i("input",{type:"checkbox",name:"schedule",id:"schedule-"+this.hostId,onChange:()=>this.toggleCalendar(),class:"s-checkbox"}),i("span",{class:"s-form-label"}," ",this.sendLater," "))),i("div",{class:this.getCalendarClasses(),ref:s=>this.calendarFormGroup=s},i("label",{class:"s-form-label"},this.selectSendDateAndTime),i("salla-datetime-picker",{value:this.deliveryDate,placeholder:this.selectSendDateAndTime,"enable-time":!0,"date-format":"Y-m-d h:i K",onPicked:s=>this.handleDateTimePicker(s)}),i("span",{class:"s-gifting-calendar-hint"},this.canNotEditOrderAfterSelectDate)),i("div",{class:this.step2ItemClass("s-gifting-step-two-footer")},i("a",{href:"#!",innerHTML:l,onClick:s=>this.goToStep1(s)}),i("salla-button",{onClick:()=>this.submitForm(),color:"primary",width:"wide"},i("span",null,this.sendGift)))))],i("slot",{key:"46da7ff69a3c10b75886a23936f2f9ad8ad0e7bf",name:"footer"})))]}static get style(){return".s-gifting-steps-wrapper{transition:0.2s cubic-bezier(0.55, 0, 0.1, 1) 0s}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' fill='gray' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");background-size:24px;background-repeat:no-repeat;background-position:99%;appearance:none}[dir=rtl] .s-gifting-select{background-position:5px}.s-gifting-widget-vertical .s-list-tile-item [slot=title]{display:flex;align-items:center;gap:1.5rem}.s-gifting-widget-vertical .s-list-tile-item-content{width:100%}"}},[260,"salla-gifting",{productId:[2,"product-id"],widgetTitle:[1,"widget-title"],widgetSubtitle:[1,"widget-subtitle"],physicalProducts:[4,"physical-products"],vertical:[4],formSelector:[1025,"form-selector"],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],receiverCountryFieldLabel:[32],ksa:[32],selectCountry:[32],selectCity:[32],selectCityInfo:[32],receiverCityFieldLabel:[32],receiverRegionFieldLabel:[32],selectRegion:[32],receiverEmailFieldLabel:[32],emailPlaceholder:[32],sendLater:[32],selectSendDateAndTime:[32],canNotEditOrderAfterSelectDate:[32],sendGift:[32],donationRequired:[32],currentStep:[32],showCalendar:[32],showGiftText:[32],currentLang:[32],parentClass:[32],errors:[32],gift:[32],selectedGiftTextOption:[32],selectedCountryId:[32],selectedCountryCode:[32],loadingCities:[32],loadingRegions:[32],regions:[32],selectedRegionId:[32],isKSA:[32],parsedFormData:[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],hostId:[32],receiverCity:[32],open:[64],close:[64],goToStep2:[64]}]);function y(){"undefined"!=typeof customElements&&["salla-gifting","salla-button","salla-datetime-picker","salla-file-upload","salla-list-tile","salla-loading","salla-modal","salla-placeholder","salla-skeleton","salla-slider","salla-tel-input"].forEach((t=>{switch(t){case"salla-gifting":customElements.get(s(t))||customElements.define(s(t),v);break;case"salla-button":customElements.get(s(t))||r();break;case"salla-datetime-picker":customElements.get(s(t))||c();break;case"salla-file-upload":customElements.get(s(t))||n();break;case"salla-list-tile":customElements.get(s(t))||h();break;case"salla-loading":customElements.get(s(t))||d();break;case"salla-modal":customElements.get(s(t))||g();break;case"salla-placeholder":customElements.get(s(t))||f();break;case"salla-skeleton":customElements.get(s(t))||m();break;case"salla-slider":customElements.get(s(t))||u();break;case"salla-tel-input":customElements.get(s(t))||p()}}))}y();const _=v,k=y;export{_ as SallaGifting,k as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { I as IconArrowLeft } from './arrow-left.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$3 } from './salla-slider2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
+
+var 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>
+`;
+
+var 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>
+`;
+
+var Alert = `<!-- 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>alert</title>
+<path d="M16 13.333c-0.736 0-1.333 0.597-1.333 1.333v8c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-8c0-0.736-0.597-1.333-1.333-1.333zM16 9.327c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM27.313 4.687c-6.237-6.237-16.389-6.239-22.628 0-6.237 6.239-6.237 16.389 0 22.628 3.119 3.119 7.216 4.679 11.313 4.679s8.195-1.559 11.313-4.679c6.24-6.239 6.24-16.391 0.001-22.628zM25.428 25.428c-5.199 5.197-13.657 5.197-18.857 0-5.197-5.199-5.197-13.659 0-18.857 5.199-5.197 13.659-5.197 18.857 0 5.199 5.2 5.199 13.659 0 18.857z"></path>
+</svg>
+`;
+
+const sallaGiftingCss = ".s-gifting-steps-wrapper{transition:0.2s cubic-bezier(0.55, 0, 0.1, 1) 0s}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' fill='gray' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");background-size:24px;background-repeat:no-repeat;background-position:99%;appearance:none}[dir=rtl] .s-gifting-select{background-position:5px}.s-gifting-widget-vertical .s-list-tile-item [slot=title]{display:flex;align-items:center;gap:1.5rem}.s-gifting-widget-vertical .s-list-tile-item-content{width:100%}";
+
+const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.defaultEvent = "gifting:open";
+        this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
+        this.currentStep = 1;
+        this.showCalendar = false;
+        this.showGiftText = false;
+        this.currentLang = '';
+        this.parentClass = "is-current-step-1";
+        this.errors = {};
+        this.gift = undefined;
+        this.selectedGiftTextOption = undefined;
+        this.selectedCountryId = undefined;
+        this.selectedCountryCode = undefined;
+        this.loadingCities = false;
+        this.loadingRegions = false;
+        this.regions = [];
+        this.selectedRegionId = undefined;
+        this.isKSA = false;
+        this.step2Animated = false;
+        this.showTextArea = false;
+        /// Gift Form Data
+        this.selectedImage = undefined;
+        this.uploadedImage = undefined;
+        this.selectedText = undefined;
+        this.hasError = false;
+        this.timeZone = null;
+        this.receiverCountryCode = salla.config.get('store.scope.countries')?.[0] || salla.config.get('store.store_country') || 'SA';
+        this.hostId = `salla-gifting-${Math.random().toString(36).slice(2, 10)}`;
+        /**
+         * The form selector to be used to get the form data
+         */
+        this.formSelector = 'form.product-form, form.form--product-options';
+        salla.lang.onLoaded(() => {
+            this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
+            this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
+            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.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.receiverCountryFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_country');
+            this.ksa = salla.lang.get('pages.checkout.ksa');
+            this.selectCity = salla.lang.get('pages.checkout.select_city');
+            this.selectCountry = salla.lang.get('pages.checkout.select_country');
+            this.selectCityInfo = salla.lang.get('blocks.buy_as_gift.city_info');
+            this.receiverCityFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_city');
+            this.receiverRegionFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_region') || salla.lang.get('pages.checkout.region');
+            this.selectRegion = salla.lang.get('pages.checkout.select_region');
+            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;
+        });
+        salla.event.on(this.defaultEvent, () => {
+            this.open();
+        });
+    }
+    componentDidLoad() {
+        salla.event.product.onPriceUpdated(() => {
+            const quantityInput = document.querySelector(`.s-quantity-input-input`);
+            // @ts-ignore
+            this.quantity = quantityInput?.value;
+        });
+    }
+    getFormDataFromForm() {
+        if (!this.formSelector)
+            return null;
+        const form = document.querySelector(this.formSelector);
+        if (!form)
+            return null;
+        return new FormData(form);
+    }
+    mergeObjectToFormData(obj, formData, namespace) {
+        for (let property in obj) {
+            if (!obj.hasOwnProperty(property) || obj[property] === undefined || obj[property] === null)
+                continue;
+            const formKey = namespace ? `${namespace}[${property}]` : property;
+            if (typeof obj[property] === 'object' && obj[property] !== null && !(obj[property] instanceof File)) {
+                this.mergeObjectToFormData(obj[property], formData, formKey);
+            }
+            else {
+                formData.set(formKey, obj[property]);
+            }
+        }
+        return formData;
+    }
+    /**
+     * Show / Open the gifting modal window
+    */
+    async open() {
+        if (salla.config.isGuest()) {
+            salla.api.auth.setAfterLoginEvent(this.defaultEvent);
+            salla.event.dispatch('login::open', { withoutReload: true });
+            return;
+        }
+        await this.modal.open();
+        // Determine the appropriate method to call based on the `physicalProducts` flag
+        const giftDetailsMethod = this.productId ? () => salla.product.getGiftProductDetails(this.productId) : () => salla.cart.getGiftCartDetails();
+        return await salla.api.withoutNotifier(giftDetailsMethod)
+            .then((response) => {
+            this.gift = response.data;
+            this.senderName = this.gift.sender_name;
+        })
+            .catch(e => {
+            this.hasError = true;
+            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+        })
+            .finally(() => this.modal.stopLoading());
+    }
+    /**
+     *
+     * Hide / close 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(`#${this.hostId} .gift-step-${asStep}`);
+        const updateHeight = () => {
+            let currentStepHeight = currentStep.offsetHeight;
+            if (newHeight) {
+                this.stepsWrapper.style.height = `${newHeight}px`;
+            }
+            else {
+                this.stepsWrapper.style.height = currentStepHeight + additionSpace + 'px';
+            }
+        };
+        if (this.step2Animated && asStep === 2) {
+            requestAnimationFrame(updateHeight);
+        }
+        else {
+            setTimeout(updateHeight, 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;
+        if (dataID) {
+            this.selectedGiftTextOption = dataID;
+            customID ? this.selectedText = undefined : this.selectedText = event.target.value;
+            this.setWrapperHeight(1, 150, 5);
+        }
+        else {
+            // empty textarea value
+            this.textArea.value = '';
+            this.selectedText = undefined;
+            this.selectedGiftTextOption = undefined;
+            this.setWrapperHeight(1, 150, -15);
+        }
+    }
+    /**
+     *
+     * 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.querySelectorAll(`#${this.hostId} .anime-item`),
+            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.querySelectorAll(`#${this.hostId} .anime-item`),
+            opacity: [0, 1],
+            translateX: [-50, 0],
+            delay: anime.stagger(70),
+            duration: 1200,
+            complete: () => {
+                this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`).forEach(item => {
+                    item.classList.remove('opacity-0');
+                    item.removeAttribute('style');
+                });
+                this.step2Animated = true;
+            }
+        }, '-=1200');
+        this.currentStep = 2;
+        this.parentClass = `is-current-step-${this.currentStep}`;
+    }
+    /**
+     *
+     * Go to the step 1
+     */
+    goToStep1(e) {
+        e.preventDefault();
+        let stepBackAnime = new anime.timeline({
+            autoplay: false,
+        });
+        stepBackAnime.add({
+            targets: this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`),
+            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.querySelectorAll(`#${this.hostId} .anime-item`),
+            opacity: [0, 1],
+            translateX: [50, 0],
+            delay: anime.stagger(70),
+            duration: 1200,
+            complete: () => {
+                this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`).forEach(item => {
+                    item.classList.remove('opacity-0');
+                    item.removeAttribute('style');
+                });
+            }
+        }, '-=1200');
+        stepBackAnime.play();
+        this.step2Animated = false;
+        this.setWrapperHeight(1, 600, 0);
+        this.currentStep = 1;
+        this.parentClass = `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.uploader?.classList.add('has-bg');
+        var bg = document.querySelector(`#${this.hostId}.filepond-bg`) ? document.querySelector(`#${this.hostId} .filepond-bg`) : document.createElement('div');
+        bg.classList.add('filepond-bg');
+        bg.classList.remove('s-hidden');
+        bg.style.backgroundImage = "url('" + image.url + "')";
+        this.uploader?.querySelector('.filepond--root')?.appendChild(bg);
+        this.uploadedImage = image.url;
+        if (!!this.gift && this.gift.gift_images.length) {
+            this.setWrapperHeight(1, 150, 0);
+        }
+    }
+    removePreview() {
+        this.uploader.classList.remove('has-bg');
+        let bg = document.querySelector(`#${this.hostId} .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');
+    }
+    clearError(key) {
+        if (this.errors?.[key]) {
+            const { [key]: _, ...rest } = this.errors;
+            this.errors = rest;
+        }
+    }
+    handleSenderName(event) {
+        this.senderName = event.target.value;
+        this.clearError('sender_name');
+    }
+    handleReceiverName(event) {
+        this.receiverName = event.target.value;
+        this.clearError('receiver.name');
+    }
+    handleReceiverCity(event) {
+        this.receiverCity = event.target.value;
+        this.clearError('receiver.city_id');
+    }
+    async handleCountryChange(event) {
+        const countryId = Number(event.target.value);
+        this.selectedCountryId = countryId;
+        this.clearError('receiver.country');
+        // Find the selected country and store its country_code
+        const selectedCountry = this.gift?.countries?.find(country => country.id == countryId);
+        this.selectedCountryCode = selectedCountry?.country_code;
+        this.isKSA = selectedCountry?.country_code === 'SA';
+        // Reset region and city
+        this.regions = [];
+        this.selectedRegionId = undefined;
+        this.gift = { ...this.gift, cities: [] };
+        this.receiverCity = undefined;
+        if (!countryId || this.gift?.countries?.length === 0) {
+            this.selectedCountryCode = undefined;
+            this.isKSA = false;
+            this.setWrapperHeight(2, 0, 0);
+            return;
+        }
+        if (this.isKSA) {
+            // For KSA, fetch regions first
+            this.loadingRegions = true;
+            this.setWrapperHeight(2, 0, 0);
+            try {
+                const response = await salla.api.request(`shipping/countries/${countryId}/regions`);
+                if (response && response.data) {
+                    this.regions = response.data;
+                }
+            }
+            catch (error) {
+                console.error('Error fetching regions:', error);
+            }
+            finally {
+                this.loadingRegions = false;
+                this.setWrapperHeight(2, 0, 0);
+            }
+        }
+        else {
+            // For non-KSA, fetch cities directly
+            this.loadingCities = true;
+            this.setWrapperHeight(2, 0, 0);
+            try {
+                const response = await salla.api.request(`shipping/cities?for_branch=0&country_id=${countryId}`);
+                if (response && response.data) {
+                    this.gift = { ...this.gift, cities: response.data };
+                }
+            }
+            catch (error) {
+                console.error('Error fetching cities:', error);
+            }
+            finally {
+                this.loadingCities = false;
+            }
+        }
+    }
+    async handleRegionChange(event) {
+        const regionId = Number(event.target.value);
+        this.selectedRegionId = regionId;
+        this.clearError('receiver.region');
+        // Reset city when region changes
+        this.gift = { ...this.gift, cities: [] };
+        this.receiverCity = undefined;
+        if (!regionId)
+            return;
+        this.loadingCities = true;
+        try {
+            const response = await salla.api.request(`shipping/cities?for_branch=0&country_id=${this.selectedCountryId}&region_id=${regionId}`);
+            if (response && response.data) {
+                this.gift = { ...this.gift, cities: response.data };
+            }
+        }
+        catch (error) {
+            console.error('Error fetching cities:', error);
+        }
+        finally {
+            this.loadingCities = false;
+            this.setWrapperHeight(2, 0, 0);
+        }
+    }
+    handleUploadImage(img) {
+        this.uploadedImage = img;
+        if (!!this.gift && this.gift.gift_images.length) {
+            this.setWrapperHeight(1, 150, 0);
+        }
+    }
+    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;
+        this.clearError('receiver.mobile');
+    }
+    handleDateTimePicker(event) {
+        this.deliveryDate = event.detail;
+    }
+    getCalendarClasses() {
+        return {
+            "s-form-group": true,
+            "anime-item": true,
+            "s-gifting-calendar": true,
+            "shown": this.showCalendar,
+            "hide": !this.showCalendar,
+            "s-form-has-error": !!this.errors && this.errors['deliver_at']
+        };
+    }
+    async submitForm() {
+        // @ts-ignore
+        const donatingAmount = (document.querySelector(`#donating-amount`))?.value;
+        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;
+        }
+        // Validate required fields
+        const requiredFields = [
+            { key: 'sender_name', value: this.senderName, label: this.senderNameLabel },
+            { key: 'receiver.name', value: this.receiverName, label: this.receiverNameFieldLabel },
+            { key: 'receiver.mobile', value: this.receiverMobile, label: this.receiverMobileFieldLabel },
+            ...(this.physicalProducts ? [
+                { key: 'receiver.country', value: this.selectedCountryId, label: this.receiverCountryFieldLabel },
+                ...(this.isKSA ? [{ key: 'receiver.region', value: this.selectedRegionId, label: this.receiverRegionFieldLabel }] : []),
+                { key: 'receiver.city_id', value: this.receiverCity, label: this.receiverCityFieldLabel },
+            ] : []),
+        ];
+        const validationErrors = {};
+        requiredFields.forEach(({ key, value, label }) => {
+            if (!value) {
+                validationErrors[key] = salla.lang.get('common.errors.field_required', { attribute: label });
+            }
+        });
+        if (Object.keys(validationErrors).length) {
+            this.errors = validationErrors;
+            this.setWrapperHeight(2, 150, 0);
+            return;
+        }
+        const giftPayload = {
+            text: this.selectedText,
+            sender_name: this.senderName,
+            quantity: this.quantity,
+            deliver_at: this.showCalendar ? this.deliveryDate : null,
+            image_url: this.uploadedImage ?? this.selectedImage,
+            donation_amount: donatingAmount ? donatingAmount : null,
+            receiver: {
+                name: this.receiverName,
+                mobile_country_code: this.receiverCountryCode,
+                mobile: this.receiverMobile,
+                ...(this.physicalProducts && this.selectedCountryCode ? { country_code: this.selectedCountryCode } : {}),
+                ...(this.physicalProducts && this.selectedRegionId ? { region_id: this.selectedRegionId } : {}),
+                ...(this.receiverCity && this.physicalProducts ? { city_id: this.receiverCity } : {})
+            },
+            has_apple_pay: salla.helpers.hasApplePay(),
+        };
+        let formData;
+        if (this.productId && this.formSelector) {
+            formData = this.getFormDataFromForm() || new FormData();
+            formData = this.mergeObjectToFormData(giftPayload, formData);
+        }
+        const addGiftMethod = this.productId
+            ? () => salla.product.addProductGiftToCart(this.productId, formData, true)
+            : () => salla.cart.addCartGiftToCart(giftPayload, true);
+        return await addGiftMethod()
+            .then(() => this.modal.close())
+            .catch((e) => {
+            if (e.response && e.response.status == 422) {
+                this.errors = e.response.data.error.fields;
+            }
+            else {
+                console.log(e);
+            }
+            this.setWrapperHeight(2, 150, 0);
+        });
+    }
+    step2ItemClass(extra = '') {
+        const base = `anime-item${this.step2Animated ? '' : ' opacity-0'}`;
+        return extra ? `${extra} ${base}` : base;
+    }
+    generateClass() {
+        return {
+            "s-gifting-widget": true,
+            "s-gifting-widget-vertical": !!this.vertical,
+            "s-gifting-widget-horizontal": !this.vertical
+        };
+    }
+    async handleGiftButtonClick() {
+        if (!!this.productId && this.formSelector) {
+            const form = document.querySelector(this.formSelector);
+            if (!form) {
+                console.error('SallaGifting:: Form not found in the document!');
+                return;
+            }
+            if (!(form instanceof HTMLFormElement)) {
+                console.error('SallaGifting:: The specified selector does not correspond to a form tag!');
+                return;
+            }
+            if (!form.reportValidity()) {
+                console.error('SallaGifting:: Form is not valid!');
+                salla.error(salla.lang.get('common.messages.required_fields'));
+                return;
+            }
+        }
+        const optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        if (optionsElement && !(await optionsElement.reportValidity())) {
+            salla.error(salla.lang.get('common.messages.required_fields'));
+            return;
+        }
+        this.open();
+    }
+    render() {
+        return [
+            h("div", { key: '5d0eec8210f77d166c144704ec78bffcaf1f4ce0' }, h("salla-list-tile", { key: '19cc20b4f70bbb8a7d267f60052db77589901962', class: this.generateClass() }, h("div", { key: '1c3c52b5ac48e71a6ac26c60494657ac28d16457', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'e3379fb3ed39d1bc63500346058b26b883c3be13' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'f6c2a522727546aa27cef725faa8be082da063da', slot: "subtitle" }, h("div", { key: '7b58ad967f39fa2cc660369b72e73f8dc49f90dc' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '848396dcd6ce6009ebc4cf1a209a055ad1adbf15', slot: "action" }, h("salla-button", { key: '2ba69b670f1c958784c6f1dca6b2dd0b93f20859', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '6ac9ac339e321fc9433465cfd75f299307ee7152', name: "widget-btn-content" }, h("div", { key: 'c61dd36375886c1ecf87f115e5248dca1af7efc9', class: "s-gifting-widget-action-content" }, h("span", { key: '0c8a3630ba6b15889fc4bf3d55a1279cdf713400', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'c9299ec752e5393f30a78e1e01d367be9e97ca50' }, this.sectionBtnText)))))), h("salla-modal", { key: '9ee17e79f97eee59d25d9627d5b1cd4ada7cadb3', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'aba3b6a4d3e903934c9b5e629119c3a3b5bc90ab', slot: "loading" }, h("div", { key: 'e03613cc85bf4024f63d2e256a2744ec78f7eabf', class: "s-gifting-skeleton" }, h("div", { key: '01156691d540ce5ef5723902610a1da27fba3ddb', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'e45b4868e4fa5633aeb22f758f75f5412290b179', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '2b427d38dd6e0569e16de84ef46eb2052d23b739', class: "s-gifting-modal-title" }, h("div", { key: 'c4f9cb6f513e3ebd2e6ad209648a1f70bcafbcb5', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'e684b682a4cca89262128cca13604b7aa9a83cd7', height: '15px', width: '150px' })))), h("div", { key: '2941865d68cd216b4dd82bb8279f6bcbaa062bf3', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '7c4f4235a666930ceef3dc0b38809aea5ee5ce5c', height: '10px', width: '150px' }), h("salla-skeleton", { key: '0257f401762a11b0bf3da7db603b4e5f57bd1aae', height: '230px' }), h("salla-skeleton", { key: 'cced26b189549fcee4eff3a3fbd943a5735b4c6c', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f5893e5c631564c91bfe42c4102190d43f913947', height: '30px' }), h("salla-skeleton", { key: '64d3738017cf6732b429848c1de4ca16db1adc06', height: '40px' })))), h("slot", { key: '77d5bda8147f7f09d73b97fd7456121626b465a7', name: "header" }), !!this.hasError ?
+                h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
+                :
+                    [
+                        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 " + this.parentClass, ref: el => this.stepsWrapper = el }, h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el }, h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), h("div", { class: "s-gifting-modal-uploader anime-item", ref: el => this.uploader = el }, h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && !!this.gift.gift_images && this.gift.gift_images.length > 0 ?
+                            h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
+                                this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { style: { "width": "120px" }, src: item.url, alt: `${item.id}` }))) : ''))
+                            : ""), h("div", { class: "anime-item" }, h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, 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), this.gift && this.gift.gift_texts ?
+                            this.gift?.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 s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, 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, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), h("div", { class: "anime-item" }, 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", ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, 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: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, 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: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, 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: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.physicalProducts &&
+                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.country'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverCountryFieldLabel), h("select", { name: "country", class: "s-form-control", onChange: (event) => this.handleCountryChange(event), required: true }, h("option", { value: "" }, this.selectCountry), this.gift?.countries?.map((country) => (h("option", { value: country.id }, country.name)))), this.errors && this.errors['receiver.country'] ?
+                                h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), this.physicalProducts && this.isKSA &&
+                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.region'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverRegionFieldLabel), h("select", { name: "region", class: "s-form-control", onChange: (event) => this.handleRegionChange(event), disabled: this.loadingRegions }, h("option", { value: "", selected: true }, this.loadingRegions ? salla.lang.get('common.elements.loading') : this.selectRegion), this.regions?.map((region) => (h("option", { value: region.id }, region.name)))), this.errors && this.errors['receiver.region'] ?
+                                h("span", { class: "s-gifting-error" }, this.errors['receiver.region']) : ''), this.physicalProducts &&
+                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), h("select", { name: "city", "aria-label": salla.lang.get('blocks.buy_as_gift.select_city'), class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId) }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
+                                h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.physicalProducts &&
+                            h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.physicalProducts && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, 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 K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, h("a", { href: "#!", innerHTML: IconArrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
+                    ], h("slot", { key: '46da7ff69a3c10b75886a23936f2f9ad8ad0e7bf', name: "footer" })))
+        ];
+    }
+    static get style() { return sallaGiftingCss; }
+}, [4, "salla-gifting", {
+        "productId": [2, "product-id"],
+        "widgetTitle": [1, "widget-title"],
+        "widgetSubtitle": [1, "widget-subtitle"],
+        "physicalProducts": [4, "physical-products"],
+        "vertical": [4],
+        "formSelector": [1025, "form-selector"],
+        "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],
+        "receiverCountryFieldLabel": [32],
+        "ksa": [32],
+        "selectCountry": [32],
+        "selectCity": [32],
+        "selectCityInfo": [32],
+        "receiverCityFieldLabel": [32],
+        "receiverRegionFieldLabel": [32],
+        "selectRegion": [32],
+        "receiverEmailFieldLabel": [32],
+        "emailPlaceholder": [32],
+        "sendLater": [32],
+        "selectSendDateAndTime": [32],
+        "canNotEditOrderAfterSelectDate": [32],
+        "sendGift": [32],
+        "donationRequired": [32],
+        "currentStep": [32],
+        "showCalendar": [32],
+        "showGiftText": [32],
+        "currentLang": [32],
+        "parentClass": [32],
+        "errors": [32],
+        "gift": [32],
+        "selectedGiftTextOption": [32],
+        "selectedCountryId": [32],
+        "selectedCountryCode": [32],
+        "loadingCities": [32],
+        "loadingRegions": [32],
+        "regions": [32],
+        "selectedRegionId": [32],
+        "isKSA": [32],
+        "parsedFormData": [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],
+        "hostId": [32],
+        "receiverCity": [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-slider", "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-slider":
+            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 };