@salla.sa/twilight-components 2.13.17 → 2.13.19

package/dist/twilight/p-c7f23f03.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import{r as t,c as i,h as o,H as s,g as n}from"./p-294dad80.js";import{C as e}from"./p-0186ffc1.js";import{C as a}from"./p-4f6a5307.js";var l;(function(t){t["COLOR"]="color";t["DATE"]="date";t["DATETIME"]="datetime";t["DONATION"]="donation";t["IMAGE"]="image";t["MULTIPLE_OPTIONS"]="multiple-options";t["NUMBER"]="number";t["SINGLE_OPTION"]="single-option";t["SPLITTER"]="splitter";t["TEXT"]="text";t["TEXTAREA"]="textarea";t["THUMBNAIL"]="thumbnail";t["TIME"]="time";t["RADIO"]="radio";t["CHECKBOX"]="checkbox";t["MAP"]="map";t["FILE"]="file";t["COLOR_PICKER"]="color_picker"})(l||(l={}));var r;(function(t){t["Sar"]="SAR"})(r||(r={}));const p=`\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>file-upload</title>\n<path d="M21.333 24c0.341 0 0.683-0.131 0.943-0.391 0.521-0.521 0.521-1.364 0-1.885l-5.333-5.333c-0.123-0.123-0.271-0.22-0.433-0.288-0.327-0.135-0.693-0.135-1.019 0-0.163 0.068-0.311 0.165-0.433 0.288l-5.333 5.333c-0.521 0.521-0.521 1.364 0 1.885s1.364 0.521 1.885 0l3.057-3.057v10.115c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-10.115l3.057 3.057c0.26 0.26 0.601 0.391 0.943 0.391zM28.943 9.724l-9.333-9.333c-0.249-0.251-0.589-0.391-0.943-0.391h-12c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h4c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-4c-0.735 0-1.333-0.599-1.333-1.333v-24c0-0.735 0.599-1.333 1.333-1.333h11.448l8.552 8.552v16.781c0 0.735-0.599 1.333-1.333 1.333h-4c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h4c2.205 0 4-1.795 4-4v-17.333c0-0.353-0.14-0.693-0.391-0.943z"></path>\n</svg>\n`;const d="";const c=class{constructor(s){t(this,s);this.changed=i(this,"changed",7);this.fileTypes={pdf:"application/pdf",png:"image/png",jpg:"image/jpeg",word:"application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",exl:"application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",txt:"text/plain"};this.outSkus=[];this.handleDonationOptions=(t,i,o)=>{if(i=="custom"&&o=="input"){salla.helpers.inputDigitsOnly(t.target);salla.event.emit("product-options::donation-changed",{id:this.productId,price:t.target.value});return}t.preventDefault();t.stopPropagation();this.isCustomDonation=t.target.value==="custom";if(this.donationInput){if(t.target.value==="custom"){this.donationInput.value="";this.donationInput.focus()}else{this.donationInput.value=t.target.value}if(i=="custom"){return}salla.event.emit("product-options::donation-changed",{id:this.productId,price:t.target.value})}};this.hideLabel=t=>{if(t.type===l.DONATION&&(t.donation&&!t.donation.can_donate)){return true}return false};this.getExpireDonationMessage=t=>{if(!t.donation){return}let i=t.donation.target_amount<=t.donation.collected_amount;return o("div",{class:{"s-product-options-donation-message":true,"s-product-options-donation-completed":i,"s-product-options-donation-expired":!i}},o("p",null,t.donation.target_message),o("span",null,i?salla.money(t.donation.target_amount):""))};this.optionsData=undefined;this.outOfStockText="";this.donationAmount=salla.lang.get("pages.products.donation_amount");this.selectDonationAmount=salla.lang.getWithDefault("pages.products.select_donation_amount","تحديد مبلغ التبرع");this.selectAmount=salla.lang.getWithDefault("pages.products.select_amount","اختر المبلغ");this.isCustomDonation=false;this.selectedOptions=[];this.canDisabled=undefined;this.selectedSkus=undefined;this.selectedOutSkus=undefined;this.productId=salla.config.get("page.id");this.options=undefined;this.canDisabled=!salla.config.get("store.settings.product.notify_options_availability");salla.lang.onLoaded((()=>{this.outOfStockText=salla.lang.get("pages.products.out_of_stock");this.donationAmount=salla.lang.get("pages.products.donation_amount");this.selectDonationAmount=salla.lang.getWithDefault("pages.products.select_donation_amount","تحديد مبلغ التبرع");this.selectAmount=salla.lang.getWithDefault("pages.products.select_amount","اختر المبلغ")}));if(this.options){try{this.setOptionsData(Array.isArray(this.options)?this.options:JSON.parse(this.options));return}catch(t){salla.log("Bad json passed via options prop")}}if(!Array.isArray(this.optionsData)){salla.log("Options is not an array[] ---\x3e ",this.optionsData);this.setOptionsData([])}if(this.productId&&!salla.url.is_page("cart")){salla.api.product.getDetails(this.productId,["options"]).then((t=>this.setOptionsData(t.data.options)))}}setOptionsData(t){var i,o;this.optionsData=t;let s=this;(o=(i=this.optionsData[0])===null||i===void 0?void 0:i.details)===null||o===void 0?void 0:o.forEach((function(t){Object.entries(t.skus_availability||{}).filter((t=>!t[1])).map((t=>s.outSkus.push(Number(t[0]))))}))}async getSelectedOptionsData(){let t={};let i=this.host.getElementSallaData();i.forEach((function(i,o){o.startsWith("options[")&&(t[o.replace("options[","").replace("]","")]=i)}));return t}async reportValidity(){let t=this.host.querySelectorAll("[required]");let i=true;for(let o=0;o<t.length;o++){if("reportValidity"in t[o]&&!t[o].reportValidity()){i=false}}return i}async hasOutOfStockOption(){var t,i;return this.selectedOptions.some((t=>t.is_out))||((t=this.selectedSkus)===null||t===void 0?void 0:t.length)&&((i=this.selectedSkus)===null||i===void 0?void 0:i.every((t=>this.outSkus.includes(t))))}async getSelectedOptions(){return this.selectedOptions}async getOption(t){return this.optionsData.find((i=>i.id===t))}invalidHandler(t,i){const o=t.target.closest(".s-product-options-option");if(!salla.url.is_page("cart")){o.scrollIntoView({behavior:"smooth",block:"center"})}o.classList.add("s-product-options-option-error")}changedHandler(t,i){let o={event:t,option:i,detail:null};if(i.details){let s=i.details.find((i=>Number(i.id)===Number(t.target.value)));o.detail=s}let s=t.target.closest(".s-product-options-option");if(t.target.value||(i.type==l.FILE||i.type==l.IMAGE)&&t.type==="added"||i.type==l.MAP&&t.type==="selected"&&(t.target.lat&&t.target.lng)){setTimeout((()=>{s.classList.remove("s-product-options-option-error")}),200)}const n=this.selectedOptions.findIndex((t=>t.option_id===o.option.id));n>-1?this.selectedOptions[n]=Object.assign(Object.assign({},o.detail),{option_id:o.option.id}):this.selectedOptions.push(Object.assign(Object.assign({},o.detail),{option_id:o.option.id}));if(i.type==l.DONATION){salla.event.emit("product-options::donation-changed",{id:this.productId,price:t.target.value})}this.setSelectedSkus();this.handleRequiredMultipleOptions(i);this.changed.emit(o);salla.event.emit("product-options::change",o)}setSelectedSkus(){this.selectedSkus=this.selectedOptions.map((t=>Object.keys(t.skus_availability||{}))).reduce(((t,i)=>t.filter((t=>i.includes(t))))).map((t=>Number(t)))}handleRequiredMultipleOptions(t){if(t.type!==l.MULTIPLE_OPTIONS||!t.required){return}const i=this.host.querySelector(`[data-option-id="${t.id}"]`);const o=i.querySelectorAll("input:checked").length;i.querySelectorAll("input").forEach((t=>t.toggleAttribute("required",!o)))}getLatLng(t,i){return t?t.split(",")[i=="lat"?0:1]:""}getDisplayForType(t){if(this[`${t.type}Option`]){return this[`${t.type}Option`](t)}if(t.type===l.COLOR_PICKER){return this.colorPickerOption(t)}if(t.type===l.MULTIPLE_OPTIONS){return this.multipleOptions(t)}if(t.type===l.SINGLE_OPTION){return this.singleOption(t)}salla.log(`Couldn't find options type(${t.type})😢`);return""}getOptionShownWhen(t){return t.visibility_condition?{"data-show-when":`options[${t.visibility_condition.option}] ${t.visibility_condition.operator} ${t.visibility_condition.value}`}:{}}componentWillLoad(){this.outOfStockText=salla.lang.get("pages.products.out_of_stock");return salla.api.cart.getCurrentCartId()}componentDidRender(){var t,i;if(((t=this.optionsData)===null||t===void 0?void 0:t.length)==0&&!this.optionsData.some((t=>t.type==l.DONATION))){return}let o=(i=this.optionsData.find((t=>t.type==l.DONATION)))===null||i===void 0?void 0:i.details.find((t=>t.is_selected));if(!o){return}setTimeout((()=>{salla.event.emit("product-options::donation-changed",{id:this.productId,price:o.additional_price})}),1e3)}render(){var t;if(((t=this.optionsData)===null||t===void 0?void 0:t.length)==0){return}return o(s,{class:"s-product-options-wrapper"},o("salla-conditional-fields",null,this.optionsData.map((t=>o("div",Object.assign({class:`s-product-options-option-container${t.visibility_condition?" hidden":""}`,"data-option-id":t.id},this.getOptionShownWhen(t)),t.name=="splitter"?this.splitterOption():o("div",{class:"s-product-options-option","data-option-type":t.type,"data-option-required":`${t.required}`},o("label",{htmlFor:"options["+t.id+"]",class:`s-product-options-option-label ${this.hideLabel(t)?"s-product-options-option-label-hidden":""}`},o("b",null,t.name,t.required&&o("span",null," * ")," "),o("small",null,t.placeholder)),o("div",{class:`s-product-options-option-content ${this.hideLabel(t)?"s-product-options-option-content-full-width":""}`},this.getDisplayForType(t))))))))}donationOption(t,i){var s,n;return o("div",{class:"s-product-options-donation-wrapper"},((s=t.donation)===null||s===void 0?void 0:s.can_donate)?[t.donation?o("div",{class:"s-product-options-donation-progress"},o("salla-progress-bar",{donation:t.donation})):"",t.details.length?[o("h4",null,this.selectAmount),o("div",{class:"s-product-options-donation-options"},t.details.map(((t,i)=>o("div",{class:"s-product-options-donation-options-item"},o("input",{id:`donation-option-${i}`,type:"radio",name:"donating_option",checked:t.is_selected,value:t.additional_price,onChange:i=>this.handleDonationOptions(i,t,"option")}),o("label",{htmlFor:`donation-option-${i}`},o("span",null,salla.money(t.name)))))),((n=t.donation)===null||n===void 0?void 0:n.custom_amount_enabled)?o("div",{class:"s-product-options-donation-options-item"},o("input",{id:`donation-option-custom`,type:"radio",name:"donating_option",value:"custom",onChange:t=>this.handleDonationOptions(t,"custom","option")}),o("label",{htmlFor:`donation-option-custom`},o("span",null," ",this.selectDonationAmount," "))):"")]:"",o("div",{class:{"s-product-options-donation-input-group":true,shown:!t.details.length||t.details.length&&this.isCustomDonation}},o("input",{type:"text",id:"donating-amount",name:"donation_amount",class:"s-form-control",ref:t=>this.donationInput=t,value:t.details.length&&t.details.some((t=>t.is_selected))?t.details.find((t=>t.is_selected)).additional_price:t.value,placeholder:t.placeholder,onInput:t=>this.handleDonationOptions(t,"custom","input"),onBlur:i=>this.changedHandler(i,t),onInvalid:i=>this.invalidHandler(i,t)}),o("span",{class:"s-product-options-donation-amount-currency"},salla.config.currency(salla.config.get("user.currency_code")).symbol))]:this.getExpireDonationMessage(t))}fileUploader(t,i=null){return o("salla-file-upload",Object.assign({},i||{},{"payload-name":"file",value:t.value,"instant-upload":true,name:`options[${t.id}]`,required:!t.visibility_condition&&t.required,height:"120px",onAdded:i=>this.changedHandler(i,t),url:salla.cart.api.getUploadImageEndpoint(),"form-data":{cart_item_id:this.productId,product_id:this.productId},onInvalidInput:i=>this.invalidHandler(i,t),class:{"s-product-options-image-input":true,required:t.required}}),o("div",{class:"s-product-options-filepond-placeholder"},o("span",{class:"s-product-options-filepond-placeholder-icon",innerHTML:i.accept&&i.accept.split(",").every((t=>t.includes("image")))?a:p}),o("p",{class:"s-product-options-filepond-placeholder-text"},salla.lang.get("common.uploader.drag_and_drop")),o("span",{class:"filepond--label-action"},salla.lang.get("common.uploader.browse"))))}imageOption(t){return this.fileUploader(t,{accept:"image/png,image/jpeg,image/jpg,image/gif"})}fileOption(t){let i=t.details.map((t=>this.fileTypes[t.name])).filter(Boolean);return(i===null||i===void 0?void 0:i.length)?this.fileUploader(t,{accept:i.join(",")}):"File types not selected."}numberOption(t){return o("input",{type:"text",value:t.value,class:"s-form-control",required:!t.visibility_condition&&t.required,name:`options[${t.id}]`,placeholder:t.placeholder,onBlur:i=>this.changedHandler(i,t),onInvalid:i=>this.invalidHandler(i,t),onInput:t=>salla.helpers.inputDigitsOnly(t.target)})}splitterOption(){return o("div",{class:"s-product-options-splitter"})}textOption(t){return o("div",{class:"s-product-options-text"},o("input",{type:"text",value:t.value,class:"s-form-control",required:!t.visibility_condition&&t.required,name:`options[${t.id}]`,placeholder:t.placeholder,onInvalid:i=>this.invalidHandler(i,t),onInput:i=>this.changedHandler(i,t)}))}textareaOption(t){return o("div",{class:"s-product-options-textarea"},o("div",{class:"mt-1"},o("textarea",{rows:4,value:t.value,class:"s-form-control",required:!t.visibility_condition&&t.required,id:`options[${t.id}]`,name:`options[${t.id}]`,placeholder:t.placeholder,onInvalid:i=>this.invalidHandler(i,t),onInput:i=>this.changedHandler(i,t)})))}mapOption(t){return o("salla-map",{zoom:15,lat:this.getLatLng(t.value,"lat"),lng:this.getLatLng(t.value,"lng"),name:`options[${t.id}]`,searchable:true,required:t.required,onInvalidInput:i=>this.invalidHandler(i,t),onSelected:i=>this.changedHandler(i,t)})}colorPickerOption(t){return o("salla-color-picker",{onSubmitted:i=>this.changedHandler(i,t),name:`options[${t.id}]`,required:!t.visibility_condition&&t.required,onInvalidInput:i=>this.invalidHandler(i,t),color:t.value})}timeOption(t){return o("salla-datetime-picker",{noCalendar:true,enableTime:true,dateFormat:"h:i K",value:t.value,placeholder:t.name,required:!t.visibility_condition&&t.required,name:`options[${t.id}]`,class:"s-product-options-time-element",onInvalidInput:i=>this.invalidHandler(i,t),onPicked:i=>this.changedHandler(i,t)})}dateOption(t){return o("div",{class:"s-product-options-date-element"},o("salla-datetime-picker",{value:t.value,placeholder:t.name,required:!t.visibility_condition&&t.required,minDate:new Date,name:`options[${t.id}]`,onInvalidInput:i=>this.invalidHandler(i,t),onPicked:i=>this.changedHandler(i,t)}))}datetimeOption(t){return o("div",{class:"s-product-options-datetime-element"},o("salla-datetime-picker",{enableTime:true,value:t.value,dateFormat:"Y-m-d G:i:K",placeholder:t.name,required:!t.visibility_condition&&t.required,name:`options[${t.id}]`,maxDate:t.to_date_time,minDate:t.from_date_time,onInvalidInput:i=>this.invalidHandler(i,t),onPicked:i=>this.changedHandler(i,t)}))}getOptionDetailName(t,i=true,o){if(o&&o==l.COLOR){return t.name+(i&&this.isOptionDetailOut(t)?` <br/> <p> ${this.outOfStockText} </p>`:"")+(t.additional_price?` <p> (${salla.money(t.additional_price)}) </p>`:"")}return t.name+(i&&this.isOptionDetailOut(t)?` - ${this.outOfStockText}`:"")+(t.additional_price?` (${salla.money(t.additional_price)})`:"")}isOptionDetailOut(t){var i;if(t.is_out||!t.skus_availability||!((i=this.selectedSkus)===null||i===void 0?void 0:i.length)){return t.is_out}let o=this.selectedOptions.filter((i=>i.id==t.id)).length;if(o&&this.selectedOptions.length==1){return false}if(o){let i=this.selectedSkus.filter((t=>this.outSkus.includes(t)));return Object.keys(t.skus_availability).some((t=>i.includes(Number(t))))}return this.selectedOptions.some((i=>i.is_out&&i.option_id!==t.option_id))}singleOption(t){return o("div",null,o("select",{name:`options[${t.id}]`,required:!t.visibility_condition&&t.required,class:"s-form-control",onInvalid:i=>this.invalidHandler(i,t),onChange:i=>this.changedHandler(i,t)},o("option",{value:""},t.placeholder),t===null||t===void 0?void 0:t.details.map((t=>o("option",{value:t.id,disabled:this.canDisabled&&this.isOptionDetailOut(t),selected:t.is_selected},this.getOptionDetailName(t))))))}multipleOptions(t){let i=t.required&&!t.details.some((t=>t.is_selected))&&!t.visibility_condition;return o("div",{class:{"s-product-options-multiple-options-wrapper":true,required:t.required}},t===null||t===void 0?void 0:t.details.map((s=>o("div",null,o("input",{type:"checkbox",value:s.id,disabled:this.isOptionDetailOut(s),checked:s.is_selected,required:i,name:`options[${t.id}][]`,id:`field-${t.id}-${s.id}`,onChange:i=>this.changedHandler(i,t),onInvalid:i=>this.invalidHandler(i,t),"aria-describedby":`options[${t.id}]-description`}),o("label",{htmlFor:`field-${t.id}-${s.id}`},this.getOptionDetailName(s))))))}colorOption(t){return o("fieldset",{class:"s-product-options-colors-wrapper"},t===null||t===void 0?void 0:t.details.map((i=>o("div",{class:"s-product-options-colors-item"},o("input",{type:"radio",value:i.id,required:!t.visibility_condition&&t.required,checked:i.is_selected,name:`options[${t.id}]`,disabled:this.canDisabled&&this.isOptionDetailOut(i),id:`color-${this.productId}-${t.id}-${i.id}`,onInvalid:i=>this.invalidHandler(i,t),onChange:i=>this.changedHandler(i,t)}),o("label",{htmlFor:`color-${this.productId}-${t.id}-${i.id}`},o("span",{style:{"background-color":i.color}}),o("div",{innerHTML:this.getOptionDetailName(i,true,t.type)}))))))}thumbnailOption(t){return o("div",{class:"s-product-options-thumbnails-wrapper"},t.details.map((i=>o("div",null,o("input",{type:"radio",value:i.id,"data-itemid":i.id,required:!t.visibility_condition&&t.required,checked:i.is_selected,name:`options[${t.id}]`,"data-img-id":i.option_value,disabled:this.canDisabled&&this.isOptionDetailOut(i),id:`option_${this.productId}-${t.id}_${i.id}`,onInvalid:i=>this.invalidHandler(i,t),onChange:i=>this.changedHandler(i,t)}),o("label",{htmlFor:`option_${this.productId}-${t.id}_${i.id}`,"data-img-id":i.option_value,class:"go-to-slide"},o("img",{"data-src":i.image,src:i.image,title:i.name,alt:i.name}),o("span",{innerHTML:e,class:"s-product-options-thumbnails-icon"}),this.isOptionDetailOut(i)?[o("small",{class:"s-product-options-thumbnails-stock-badge"},this.outOfStockText),this.canDisabled?o("div",{class:"s-product-options-thumbnails-badge-overlay"}):""]:""),o("p",null,this.getOptionDetailName(i,false)," ")))))}get host(){return n(this)}};c.style=d;export{c as salla_product_options};
+//# sourceMappingURL=p-c7f23f03.entry.js.map

package/dist/twilight/{p-af0f70cd.entry.js.map → p-c7f23f03.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["DisplayType","Currency","sallaProductOptionsCss","SallaProductOptions","constructor","hostRef","this","fileTypes","pdf","png","jpg","word","exl","txt","outSkus","handleDonationOptions","event","detail","type","salla","helpers","inputDigitsOnly","target","emit","id","productId","price","value","preventDefault","stopPropagation","isCustomDonation","donationInput","focus","hideLabel","option","DONATION","donation","can_donate","getExpireDonationMessage","completed","target_amount","collected_amount","h","class","target_message","money","lang","get","getWithDefault","config","canDisabled","onLoaded","outOfStockText","donationAmount","selectDonationAmount","selectAmount","options","setOptionsData","Array","isArray","JSON","parse","e","log","optionsData","url","is_page","api","product","getDetails","then","resp","data","that","_b","_a","details","forEach","Object","entries","skus_availability","filter","sku","map","push","Number","getSelectedOptionsData","selectedOptions","formData","host","getElementSallaData","key","startsWith","replace","reportValidity","requiredElements","querySelectorAll","pass","i","length","hasOutOfStockOption","some","is_out","selectedSkus","every","includes","getSelectedOptions","getOption","option_id","find","invalidHandler","closestProductOption","closest","scrollIntoView","behavior","block","classList","add","changedHandler","optionElement","FILE","IMAGE","MAP","lat","lng","setTimeout","remove","index","findIndex","assign","setSelectedSkus","handleRequiredMultipleOptions","changed","keys","reduce","p","c","MULTIPLE_OPTIONS","required","optionContainer","querySelector","hasChecked","input","toggleAttribute","getLatLng","split","getDisplayForType","COLOR_PICKER","colorPickerOption","multipleOptions","SINGLE_OPTION","singleOption","getOptionShownWhen","visibility_condition","operator","componentWillLoad","cart","getCurrentCartId","componentDidRender","selectedDonationOption","is_selected","additional_price","render","Host","name","splitterOption","htmlFor","placeholder","donationOption","checked","onChange","custom_amount_enabled","shown","ref","el","onInput","onBlur","onInvalid","currency","symbol","fileUploader","additions","height","onAdded","getUploadImageEndpoint","cart_item_id","product_id","onInvalidInput","innerHTML","accept","CameraIcon","FileIcon","imageOption","fileOption","types","Boolean","join","numberOption","textOption","textareaOption","rows","mapOption","zoom","searchable","onSelected","onSubmitted","color","timeOption","noCalendar","enableTime","dateFormat","onPicked","dateOption","minDate","Date","datetimeOption","maxDate","to_date_time","from_date_time","getOptionDetailName","outOfStock","optionType","COLOR","isOptionDetailOut","isDetailSelected","outSelectableSkus","disabled","selected","is_required","colorOption","style","thumbnailOption","option_value","image","src","title","alt","CheckCircleIcon"],"sources":["src/components/salla-product-options/interfaces.ts","src/components/salla-product-options/salla-product-options.scss?tag=salla-product-options","src/components/salla-product-options/salla-product-options.tsx"],"sourcesContent":["export enum DisplayType {\n  COLOR = \"color\",\n  DATE = \"date\",\n  DATETIME = \"datetime\",\n  DONATION = \"donation\",\n  IMAGE = \"image\",\n  MULTIPLE_OPTIONS = \"multiple-options\",\n  NUMBER = \"number\",\n  SINGLE_OPTION = \"single-option\",\n  SPLITTER = \"splitter\",\n  TEXT = \"text\",\n  TEXTAREA = \"textarea\",\n  THUMBNAIL = \"thumbnail\",\n  TIME = \"time\",\n  RADIO = \"radio\",\n  CHECKBOX = \"checkbox\",\n  MAP = \"map\",\n  FILE = \"file\", // similar to image type (file-uploader component)\n  COLOR_PICKER = \"color_picker\"\n\n}\n\nexport interface ProductDetail {\n  id: string;\n  sku: string;\n  name: string;\n  description: string;\n  url: string;\n  promotion_title: string;\n  subtitle: string;\n  type: string;\n  status: string;\n  price: number;\n  sale_price: number;\n  regular_price: number;\n  starting_price: null;\n  quantity: number;\n  max_quantity: number;\n  discount_ends: number;\n  is_taxable: boolean;\n  has_read_more: boolean;\n  can_add_note: boolean;\n  can_show_remained_quantity: boolean;\n  can_upload_file: boolean;\n  has_custom_form: boolean;\n  is_on_sale: boolean;\n  is_hidden_quantity: boolean;\n  is_available: boolean;\n  is_out_of_stock: boolean;\n  weight: null;\n  calories: null;\n  image: SimpleImage;\n  brand: Brand;\n  donation?: ProductDonation;\n  images: Image[];\n  tags: Tag[];\n  notify_availability: null;\n  rating: Rating;\n  options: Option[];\n  sold_quantity: number;\n  category: Category;\n}\n\nexport interface SimpleImage {\n  url: string;\n  alt: string;\n}\n\nexport interface Category {\n  name: string;\n  url: string;\n  icon: string;\n}\n\nexport interface ProductDonation {\n  target_message?: string;\n  collected_amount?: number;\n  target_amount?: number;\n  target_percent?: number;\n  target_end_date?: string;\n  can_donate: boolean;\n  custom_amount_enabled: boolean;\n}\n\nexport interface Image {\n  id: number;\n  url: string;\n  main: boolean;\n  three_d_image_url: string;\n  alt: string;\n  video_url: string;\n  type: string;\n  sort: number;\n}\n\nexport interface Option {\n  id: number;\n  name: string;\n  required: boolean;\n  type: string;\n  placeholder: string;\n  option_type: string;\n  not_same_day_order: boolean;\n  availability_range: number;\n  from_date_time: null;\n  to_date_time: null;\n  visibility_condition?: { option: number, operator: \"=\" | \"!=\", value: number };\n  details?: Detail[];\n  condition_attributes: string;\n  value?: any;\n  donation?: Donation\n}\n\nexport interface Donation {\n  custom_amount_enabled: boolean;\n  target_message?: string;\n  target_date: string | \"2023-04-18\";\n  target_end_date: string | \"2023-04-18\";\n  target_amount: number;\n  collected_amount: number;\n  can_donate: boolean;\n}\n\nexport interface Detail {\n  id: number;\n  option_id: number;\n  name: string;\n  additional_price: number;\n  option_value: null | string;\n  image: null | string;\n  color: null | string;\n  is_out: boolean;\n  skus_availability?: { [sku_id: number]: boolean };\n  is_selected: boolean;\n}\n\nexport interface Brand {\n  id: string;\n  url: string;\n  name: string;\n  logo: string;\n}\n\nexport interface PreTaxPrice {\n  amount: number;\n  currency: Currency;\n}\n\nexport enum Currency {\n  Sar = \"SAR\",\n}\n\nexport interface Promotion {\n  title: string;\n  sub_title: string;\n}\n\nexport interface Rating {\n  count: number;\n  stars: number;\n}\n\nexport interface Tag {\n  name: string;\n  url: string;\n}\n","\n.s-product-options{\n  &-wrapper{\n\n  }\n  &-option-container{\n\n  }\n  &-option{\n\n  }\n  &-option-label{\n\n  }\n  &-option-content{\n\n  }\n  &-colors-wrapper{\n\n  }\n  &-date-element{\n\n  }\n  &-time-element{\n    \n  }\n  &-datetime-element{\n\n  }\n  &-image-input{\n\n  }\n  &-multiple-options-wrapper{\n\n  }\n  &-splitter{\n\n  }\n  &-text{\n\n  }\n  &-textarea{\n\n  }\n  &-thumbnails-wrapper{\n\n  }\n}","import { Component, Prop, h, State, Element, Host, Event, EventEmitter, Method } from '@stencil/core';\nimport { Option, DisplayType, Detail } from './interfaces';\nimport CheckCircleIcon from '../../assets/svg/check.svg';\nimport CameraIcon from '../../assets/svg/camera.svg';\nimport FileIcon from '../../assets/svg/file-upload.svg';\n\n\n@Component({\n  tag: 'salla-product-options',\n  styleUrl: 'salla-product-options.scss',\n})\nexport class SallaProductOptions {\n\n  constructor() {\n    this.canDisabled = !salla.config.get('store.settings.product.notify_options_availability');\n    salla.lang.onLoaded(() => {\n      this.outOfStockText = salla.lang.get(\"pages.products.out_of_stock\");\n      this.donationAmount = salla.lang.get('pages.products.donation_amount');\n      this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');\n      this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');\n    });\n\n    if (this.options) {\n      try {\n        this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));\n        return;\n      } catch (e) {\n        salla.log('Bad json passed via options prop');\n      }\n    }\n    if (!Array.isArray(this.optionsData)) {\n      salla.log('Options is not an array[] ---> ', this.optionsData);\n      this.setOptionsData([]);\n    }\n\n    if (this.productId && !salla.url.is_page('cart')) {\n      salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));\n    }\n  }\n\n  private setOptionsData(optionsData: Option[]) {\n    this.optionsData = optionsData;\n    let that = this\n    this.optionsData[0]?.details?.forEach(function (detail) {\n      Object.entries(detail.skus_availability || {})\n        .filter(sku => !sku[1])\n        .map(sku => that.outSkus.push(Number(sku[0])));\n    });\n  }\n\n  @Element() host: HTMLElement;\n\n  private fileTypes: Object = {\n    pdf: 'application/pdf',\n    png: 'image/png',\n    jpg: 'image/jpeg',\n    word: 'application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    exl: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n    txt: 'text/plain',\n  };\n\n  @State() optionsData: Option[];\n  @State() outOfStockText: string = ''\n  @State() donationAmount: string = salla.lang.get('pages.products.donation_amount')\n  @State() selectDonationAmount: string = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع')\n  @State() selectAmount: string = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ')\n  @State() isCustomDonation: boolean = false;\n  @State() selectedOptions: Array<any> = [];\n  @State() canDisabled: boolean;\n  @State() selectedSkus?: Array<string | number>;\n  @State() selectedOutSkus?: Array<string | number>;\n  private outSkus: Array<string | number> = [];\n  private donationInput?: HTMLInputElement;\n\n  /**\n   * The id of the product to which the options are going to be fetched for.\n   */\n  @Prop() productId: number = salla.config.get('page.id');\n\n  /**\n   * Product detail information.\n   */\n  @Prop() options: string;\n\n  /**\n   * Get the id's of the selected options.\n   * */\n  @Method()\n  async getSelectedOptionsData() {\n    let selectedOptions = {}\n    let formData = (this.host as any).getElementSallaData();\n    formData.forEach(function (value, key) {\n      key.startsWith('options[') && (selectedOptions[key.replace('options[', '').replace(']', '')] = value);\n    });\n    return selectedOptions;\n  }\n\n  /**\n   * Report options form validity.\n   * */\n  @Method()\n  async reportValidity() {\n    let requiredElements: Array<HTMLInputElement> = this.host.querySelectorAll('[required]') as any;\n    let pass = true;\n    for (let i = 0; i < requiredElements.length; i++) {\n      //if there is only one invalid option, return false\n      if ('reportValidity' in requiredElements[i] && !requiredElements[i].reportValidity()) {\n        pass = false;\n      }\n    }\n    return pass;\n  }\n\n  /**\n   * Return true if there is any out of stock options are selected and vise versa.\n   * */\n  @Method()\n  async hasOutOfStockOption() {\n    return this.selectedOptions.some(option => option.is_out) || (this.selectedSkus?.length && this.selectedSkus?.every(sku => this.outSkus.includes(sku)));\n  }\n\n  /**\n   * Get selected options.\n   * */\n  @Method()\n  async getSelectedOptions() {\n    return this.selectedOptions;\n  }\n\n  /**\n   * Get a specific option by its id.\n   * */\n  @Method()\n  async getOption(option_id) {\n    return this.optionsData.find(option => option.id === option_id);\n  }\n\n  /**\n   * An event that emitted when any option is changed.\n   */\n  @Event() changed: EventEmitter;\n\n  // @ts-ignore\n  private invalidHandler(event, option: Option) {\n    const closestProductOption = (event.target as HTMLInputElement).closest('.s-product-options-option') as HTMLElement;\n    if (!salla.url.is_page('cart')) {\n      closestProductOption.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    }\n    closestProductOption.classList.add('s-product-options-option-error');\n  }\n\n  private changedHandler(event, option) {\n    let data = { event: event, option: option, detail: null };\n    if (option.details) {\n      let detail = option.details.find((detail) => {\n        return Number(detail.id) === Number(event.target.value);\n      });\n      data.detail = detail\n    }\n\n    let optionElement = event.target.closest('.s-product-options-option');\n    if (event.target.value\n      || ((option.type == DisplayType.FILE || option.type == DisplayType.IMAGE) && event.type === 'added')\n      || (option.type == DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {\n      setTimeout(() => {\n        optionElement.classList.remove('s-product-options-option-error');\n      }, 200);\n    }\n\n    const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);\n    index > -1 ? this.selectedOptions[index] = {\n      ...data.detail,\n      option_id: data.option.id\n    } : this.selectedOptions.push({ ...data.detail, option_id: data.option.id })\n\n    if (option.type == DisplayType.DONATION) {\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n    }\n    this.setSelectedSkus();\n    this.handleRequiredMultipleOptions(option);\n    this.changed.emit(data);\n    salla.event.emit('product-options::change', data);\n  }\n\n\n  private handleDonationOptions = (event, detail, type) => {\n    if (detail == 'custom' && type == 'input') {\n      salla.helpers.inputDigitsOnly(event.target)\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    this.isCustomDonation = event.target.value === 'custom';\n    if (this.donationInput) {\n      if (event.target.value === 'custom') {\n        this.donationInput.value = '';\n        this.donationInput.focus()\n      } else {\n        this.donationInput.value = event.target.value;\n      }\n      if (detail == 'custom') {\n        return\n      }\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n    }\n  }\n\n  private hideLabel = (option) => {\n    if (option.type === DisplayType.DONATION && (option.donation && !option.donation.can_donate)) {\n      return true;\n    }\n    return false;\n  }\n\n  private getExpireDonationMessage = (option) => {\n    if (!option.donation) {\n      return;\n    }\n    let completed = option.donation.target_amount <= option.donation.collected_amount;\n    return <div class={{ \"s-product-options-donation-message\": true, \"s-product-options-donation-completed\": completed, \"s-product-options-donation-expired\": !completed }}>\n      <p>{option.donation.target_message}</p>\n      <span>{completed ? salla.money(option.donation.target_amount) : ''}</span>\n    </div>\n  }\n  /**\n   * loop throw all selected details, then get common sku, if it's only one, means we selected all of them;\n   */\n  private setSelectedSkus() {\n    this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))\n      .reduce((p, c) => p.filter(e => c.includes(e)))\n      .map(sku => Number(sku));\n  }\n\n  private handleRequiredMultipleOptions(option) {\n    if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {\n      return;\n    }\n    const optionContainer = this.host.querySelector(`[data-option-id=\"${option.id}\"]`);\n    const hasChecked = optionContainer.querySelectorAll('input:checked').length;\n    optionContainer.querySelectorAll('input').forEach(input => input.toggleAttribute('required', !hasChecked));\n  }\n\n  private getLatLng(value, type: 'lat' | 'lng') {\n    return value\n      ? value.split(',')[type == 'lat' ? 0 : 1]\n      : '';\n  }\n\n  private getDisplayForType(option: Option) {\n    if (this[`${option.type}Option`]) {\n      return this[`${option.type}Option`](option);\n    }\n\n    if (option.type === DisplayType.COLOR_PICKER) {\n      return this.colorPickerOption(option)\n    }\n\n    if (option.type === DisplayType.MULTIPLE_OPTIONS) {\n      return this.multipleOptions(option);\n    }\n\n    if (option.type === DisplayType.SINGLE_OPTION) {\n      return this.singleOption(option);\n    }\n    salla.log(`Couldn't find options type(${option.type})😢`);\n    return '';\n  }\n\n  protected getOptionShownWhen(option: Option) {\n    return option.visibility_condition\n      ? { \"data-show-when\": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }\n      : {};\n  }\n\n  //we need the cart Id for productOption Image\n  componentWillLoad() {\n    this.outOfStockText = salla.lang.get('pages.products.out_of_stock')\n    return salla.api.cart.getCurrentCartId();\n  }\n\n  componentDidRender() {\n      if (this.optionsData?.length == 0 && !this.optionsData.some(option => option.type == DisplayType.DONATION)) {\n        return;\n      }\n      let selectedDonationOption =  this.optionsData.find(option => option.type == DisplayType.DONATION)?.details.find(detail => detail.is_selected);\n      if (!selectedDonationOption) {\n        return;\n      }\n      setTimeout(() => {\n        salla.event.emit('product-options::donation-changed', {\n          id: this.productId,\n          price: selectedDonationOption.additional_price\n        });\n      }, 1000);\n  }\n\n  render() {\n    if (this.optionsData?.length == 0) {\n      return;\n    }\n\n    return (\n      <Host class=\"s-product-options-wrapper\">\n        {/* TODO:: move salla-conditional-field logic to here, no need of another component*/}\n        <salla-conditional-fields>\n          {this.optionsData.map((option: Option) =>\n            <div class={`s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`}\n              data-option-id={option.id}\n              {...this.getOptionShownWhen(option)}>\n              {option.name == 'splitter' ?\n                this.splitterOption()\n                : <div class=\"s-product-options-option\" data-option-type={option.type}\n                  data-option-required={`${option.required}`}>\n                  <label htmlFor={'options[' + option.id + ']'} class={`s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}`}>\n                    <b>\n                      {option.name}\n                      {option.required && <span> * </span>} </b>\n                    <small>{option.placeholder}</small>\n                  </label>\n                  <div class={`s-product-options-option-content ${this.hideLabel(option) ? 's-product-options-option-content-full-width' : ''}`}>\n                    {this.getDisplayForType(option)}\n                  </div>\n                </div>}\n            </div>\n          )}\n        </salla-conditional-fields>\n      </Host>\n    );\n\n  }\n\n  //@ts-ignore\n  private donationOption(option: Option, product: Product) {\n    return <div class=\"s-product-options-donation-wrapper\">\n\n      {option.donation?.can_donate ? [\n        option.donation ?\n          <div class=\"s-product-options-donation-progress\">\n            <salla-progress-bar donation={option.donation}>\n            </salla-progress-bar>\n          </div>\n          : '',\n        option.details.length ?\n          [<h4>{this.selectAmount}</h4>,\n          <div class=\"s-product-options-donation-options\">\n            {option.details.map((detail, i) =>\n              <div class=\"s-product-options-donation-options-item\">\n                <input id={`donation-option-${i}`} type=\"radio\" name=\"donating_option\" checked={detail.is_selected} value={detail.additional_price} onChange={e => this.handleDonationOptions(e, detail, 'option')} />\n                <label htmlFor={`donation-option-${i}`}>\n                  <span>{salla.money(detail.name)}</span>\n                </label>\n              </div>\n            )}\n            {option.donation?.custom_amount_enabled ?\n              <div class=\"s-product-options-donation-options-item\">\n                <input id={`donation-option-custom`} type=\"radio\" name=\"donating_option\" value=\"custom\" onChange={e => this.handleDonationOptions(e, 'custom', 'option')} />\n                <label htmlFor={`donation-option-custom`}>\n                  <span> {this.selectDonationAmount} </span>\n                </label>\n              </div>\n              : ''\n            }\n          </div>] : '',\n\n        <div class={{ \"s-product-options-donation-input-group\": true, \"shown\": !option.details.length || (option.details.length && this.isCustomDonation) }}>\n          <input\n            type=\"text\"\n            id=\"donating-amount\"\n            name=\"donation_amount\"\n            class=\"s-form-control\"\n            ref={el => this.donationInput = el as HTMLInputElement}\n            value={\n              option.details.length\n                && option.details.some(detail => detail.is_selected)\n                ? option.details.find(detail => detail.is_selected).additional_price\n                : option.value}\n            // required\n            placeholder={option.placeholder}\n            onInput={e => this.handleDonationOptions(e, 'custom', 'input')}\n            onBlur={e => this.changedHandler(e, option)}\n            onInvalid={(e) => this.invalidHandler(e, option)}\n          />\n          {/* value={option.value} */}\n          <span class=\"s-product-options-donation-amount-currency\">\n            {salla.config.currency(salla.config.get('user.currency_code')).symbol}\n          </span>\n        </div>\n      ] :\n        this.getExpireDonationMessage(option)\n      }\n    </div>\n  }\n\n  private fileUploader(option: Option, additions: Object | null = null) {\n    return <salla-file-upload\n      {...(additions || {})}\n      payload-name=\"file\"\n      value={option.value}\n      instant-upload={true}\n      name={`options[${option.id}]`}\n      required={!option.visibility_condition && option.required}\n      height=\"120px\"\n      onAdded={(e) => this.changedHandler(e, option)}\n      url={salla.cart.api.getUploadImageEndpoint()}\n      form-data={{ cart_item_id: this.productId, product_id: this.productId }}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      class={{ \"s-product-options-image-input\": true, required: option.required }}\n    >\n      <div class=\"s-product-options-filepond-placeholder\">\n        <span class=\"s-product-options-filepond-placeholder-icon\"\n          innerHTML={(additions as any).accept && (additions as any).accept.split(',').every(type => type.includes('image'))\n            ? CameraIcon\n            : FileIcon}\n        />\n        <p class=\"s-product-options-filepond-placeholder-text\">{salla.lang.get('common.uploader.drag_and_drop')}</p>\n        <span class=\"filepond--label-action\">{salla.lang.get('common.uploader.browse')}</span>\n      </div>\n    </salla-file-upload>\n  }\n\n  //@ts-ignore\n  private imageOption(option: Option) {\n    return this.fileUploader(option, { accept: 'image/png,image/jpeg,image/jpg,image/gif' });\n  }\n\n  //@ts-ignore\n  private fileOption(option: Option) {\n    let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);\n    return types?.length\n      ? this.fileUploader(option, { accept: types.join(',') })\n      : 'File types not selected.';\n  }\n\n  // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption\n  //@ts-ignore\n  private numberOption(option: Option) {\n    return <input\n      type=\"text\"\n      value={option.value}\n      class=\"s-form-control\"\n      required={!option.visibility_condition && option.required}\n      name={`options[${option.id}]`}\n      placeholder={option.placeholder}\n      onBlur={e => this.changedHandler(e, option)}\n      onInvalid={(e) => this.invalidHandler(e, option)}\n      onInput={e => salla.helpers.inputDigitsOnly(e.target)} />\n  }\n\n  //@ts-ignore\n  private splitterOption() {\n    return <div class=\"s-product-options-splitter\" />\n  }\n\n  //@ts-ignore\n  private textOption(option: Option) {\n    return <div class=\"s-product-options-text\">\n      <input\n        type=\"text\"\n        value={option.value}\n        class='s-form-control'\n        required={!option.visibility_condition && option.required}\n        name={`options[${option.id}]`}\n        placeholder={option.placeholder}\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onInput={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  //@ts-ignore\n  private textareaOption(option: Option) {\n    //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great\n    return <div class=\"s-product-options-textarea\">\n      <div class=\"mt-1\">\n        <textarea\n          rows={4}\n          value={option.value}\n          class=\"s-form-control\"\n          required={!option.visibility_condition && option.required}\n          id={`options[${option.id}]`}\n          name={`options[${option.id}]`}\n          placeholder={option.placeholder}\n          onInvalid={(e) => this.invalidHandler(e, option)}\n          onInput={(e) => this.changedHandler(e, option)} />\n      </div>\n    </div>\n  }\n\n  //@ts-ignore\n  private mapOption(option: Option) {\n    return <salla-map\n      zoom={15}\n      lat={this.getLatLng(option.value, 'lat')}\n      lng={this.getLatLng(option.value, 'lng')}\n      name={`options[${option.id}]`}\n      searchable={true}\n      required={option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onSelected={e => this.changedHandler(e, option)} />\n  }\n\n  private colorPickerOption(option: Option) {\n    return <salla-color-picker\n      onSubmitted={e => this.changedHandler(e, option)}\n      name={`options[${option.id}]`}\n      required={!option.visibility_condition && option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      color={option.value} />\n  }\n\n  /**\n   * ============= Date Time options =============\n   */\n  //@ts-ignore\n  private timeOption(option: Option) {\n    return <salla-datetime-picker\n      noCalendar={true}\n      enableTime={true}\n      dateFormat=\"h:i K\"\n      value={option.value}\n      placeholder={option.name}\n      required={!option.visibility_condition && option.required}\n      name={`options[${option.id}]`}\n      class=\"s-product-options-time-element\"\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onPicked={e => this.changedHandler(e, option)} />\n  }\n\n  //@ts-ignore\n  private dateOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-date-element\">\n      <salla-datetime-picker\n        value={option.value}\n        placeholder={option.name}\n        required={!option.visibility_condition && option.required}\n        minDate={new Date()}\n        name={`options[${option.id}]`}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  //@ts-ignore\n  private datetimeOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-datetime-element\">\n      <salla-datetime-picker\n        enableTime={true}\n        value={option.value}\n        dateFormat=\"Y-m-d G:i:K\"\n        placeholder={option.name}\n        required={!option.visibility_condition && option.required}\n        name={`options[${option.id}]`}\n        maxDate={option.to_date_time}\n        minDate={option.from_date_time}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  /**\n   * ============= Advanced options =============\n   */\n  protected getOptionDetailName(detail: Detail, outOfStock: boolean = true, optionType?: string) {\n    if (optionType && optionType == DisplayType.COLOR) {\n      return detail.name\n        + ((outOfStock && this.isOptionDetailOut(detail)) ? ` <br/> <p> ${this.outOfStockText} </p>` : '')\n        + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price)}) </p>` : '');\n    }\n\n    return detail.name\n      + ((outOfStock && this.isOptionDetailOut(detail)) ? ` - ${this.outOfStockText}` : '')\n      + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');\n  }\n\n\n  protected isOptionDetailOut(detail: Detail) {\n    if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {\n      return detail.is_out;\n    }\n\n    let isDetailSelected = this.selectedOptions.filter(option => option.id == detail.id).length;\n    //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet\n    if (isDetailSelected && this.selectedOptions.length == 1) {\n      return false;\n    }\n\n    //if current details has sku in the possible outSkus it's out for sure\n    if (isDetailSelected) {\n      //here we will get the possible outSkus for current selected options\n      let outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));\n      return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)))\n    }\n\n    return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id)\n\n  }\n\n  private singleOption(option: Option) {\n    return <div>\n      <select name={`options[${option.id}]`}\n        required={!option.visibility_condition && option.required}\n        class=\"s-form-control\"\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onChange={e => this.changedHandler(e, option)}>\n        <option value=\"\">{option.placeholder}</option>\n        {\n          option?.details.map((detail: Detail) => {\n            return <option value={detail.id} disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n              selected={detail.is_selected}>\n              {this.getOptionDetailName(detail)}\n            </option>\n          })\n        }\n      </select>\n    </div>\n  }\n\n  private multipleOptions(option: Option) {\n    let is_required = option.required && !option.details.some(detail => detail.is_selected) && !option.visibility_condition;\n    return <div class={{ \"s-product-options-multiple-options-wrapper\": true, 'required': option.required }}>\n      {\n        option?.details.map((detail: Detail) => {\n          return <div>\n            <input type=\"checkbox\"\n              value={detail.id}\n              disabled={this.isOptionDetailOut(detail)}\n              checked={detail.is_selected}\n              required={is_required}\n              name={`options[${option.id}][]`}\n              id={`field-${option.id}-${detail.id}`}\n              onChange={(e) => this.changedHandler(e, option)}\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              aria-describedby={`options[${option.id}]-description`} />\n            <label htmlFor={`field-${option.id}-${detail.id}`}>{this.getOptionDetailName(detail)}</label>\n          </div>\n        })\n      }\n    </div>\n  }\n\n  //@ts-ignore\n  private colorOption(option: Option) {\n    return <fieldset class=\"s-product-options-colors-wrapper\">\n      {\n        option?.details.map((detail) =>\n          <div class=\"s-product-options-colors-item\">\n            <input type=\"radio\"\n              value={detail.id}\n              required={!option.visibility_condition && option.required}\n              checked={detail.is_selected}\n              name={`options[${option.id}]`}\n              disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n              id={`color-${this.productId}-${option.id}-${detail.id}`}\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              onChange={e => this.changedHandler(e, option)} />\n            <label htmlFor={`color-${this.productId}-${option.id}-${detail.id}`}>\n              <span style={{ \"background-color\": detail.color }} />\n              <div innerHTML={this.getOptionDetailName(detail, true, option.type)}></div>\n            </label>\n          </div>\n        )\n      }\n    </fieldset>\n  }\n\n  //@ts-ignore\n  private thumbnailOption(option: Option) {\n    return <div class=\"s-product-options-thumbnails-wrapper\">\n      {option.details.map((detail: Detail) => {\n        return <div>\n          <input type=\"radio\"\n            value={detail.id}\n            data-itemid={detail.id} //todo:: why need this? it's already in the value!\n            required={!option.visibility_condition && option.required}\n            checked={detail.is_selected}\n            name={`options[${option.id}]`}\n            data-img-id={detail.option_value}\n            disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n            id={`option_${this.productId}-${option.id}_${detail.id}`}\n            onInvalid={(e) => this.invalidHandler(e, option)}\n            onChange={(e) => this.changedHandler(e, option)} />\n          <label htmlFor={`option_${this.productId}-${option.id}_${detail.id}`}\n            data-img-id={detail.option_value}\n            class=\"go-to-slide\">\n            <img data-src={detail.image} src={detail.image} title={detail.name} alt={detail.name} />\n            <span innerHTML={CheckCircleIcon} class=\"s-product-options-thumbnails-icon\" />\n            {this.isOptionDetailOut(detail) ?\n              [\n                <small class=\"s-product-options-thumbnails-stock-badge\">{this.outOfStockText}</small>,\n                this.canDisabled ? <div class=\"s-product-options-thumbnails-badge-overlay\" /> : '',\n              ]\n              : ''}\n          </label>\n          <p>{this.getOptionDetailName(detail, false)} </p>\n        </div>\n      })}\n    </div>\n  }\n}\n"],"mappings":";;;2GAAA,IAAYA,GAAZ,SAAYA,GACVA,EAAA,iBACAA,EAAA,eACAA,EAAA,uBACAA,EAAA,uBACAA,EAAA,iBACAA,EAAA,uCACAA,EAAA,mBACAA,EAAA,iCACAA,EAAA,uBACAA,EAAA,eACAA,EAAA,uBACAA,EAAA,yBACAA,EAAA,eACAA,EAAA,iBACAA,EAAA,uBACAA,EAAA,aACAA,EAAA,eACAA,EAAA,8BAED,EApBD,CAAYA,MAAW,KAoJvB,IAAYC,GAAZ,SAAYA,GACVA,EAAA,YACD,EAFD,CAAYA,MAAQ,K,u/BCpJpB,MAAMC,EAAyB,G,MCWlBC,EAAmB,MAE9B,WAAAC,CAAAC,G,2CAuCQC,KAAAC,UAAoB,CAC1BC,IAAK,kBACLC,IAAK,YACLC,IAAK,aACLC,KAAM,gIACNC,IAAK,yJACLC,IAAK,cAaCP,KAAAQ,QAAkC,GAqHlCR,KAAAS,sBAAwB,CAACC,EAAOC,EAAQC,KAC9C,GAAID,GAAU,UAAYC,GAAQ,QAAS,CACzCC,MAAMC,QAAQC,gBAAgBL,EAAMM,QACpCH,MAAMH,MAAMO,KAAK,oCAAqC,CACpDC,GAAIlB,KAAKmB,UACTC,MAAOV,EAAMM,OAAOK,QAEtB,M,CAEFX,EAAMY,iBACNZ,EAAMa,kBACNvB,KAAKwB,iBAAmBd,EAAMM,OAAOK,QAAU,SAC/C,GAAIrB,KAAKyB,cAAe,CACtB,GAAIf,EAAMM,OAAOK,QAAU,SAAU,CACnCrB,KAAKyB,cAAcJ,MAAQ,GAC3BrB,KAAKyB,cAAcC,O,KACd,CACL1B,KAAKyB,cAAcJ,MAAQX,EAAMM,OAAOK,K,CAE1C,GAAIV,GAAU,SAAU,CACtB,M,CAEFE,MAAMH,MAAMO,KAAK,oCAAqC,CACpDC,GAAIlB,KAAKmB,UACTC,MAAOV,EAAMM,OAAOK,O,GAKlBrB,KAAA2B,UAAaC,IACnB,GAAIA,EAAOhB,OAASlB,EAAYmC,WAAaD,EAAOE,WAAaF,EAAOE,SAASC,YAAa,CAC5F,OAAO,I,CAET,OAAO,KAAK,EAGN/B,KAAAgC,yBAA4BJ,IAClC,IAAKA,EAAOE,SAAU,CACpB,M,CAEF,IAAIG,EAAYL,EAAOE,SAASI,eAAiBN,EAAOE,SAASK,iBACjE,OAAOC,EAAA,OAAKC,MAAO,CAAE,qCAAsC,KAAM,uCAAwCJ,EAAW,sCAAuCA,IACzJG,EAAA,SAAIR,EAAOE,SAASQ,gBACpBF,EAAA,YAAOH,EAAYpB,MAAM0B,MAAMX,EAAOE,SAASI,eAAiB,IAC5D,E,+CA1K0B,G,oBACArB,MAAM2B,KAAKC,IAAI,kC,0BACT5B,MAAM2B,KAAKE,eAAe,wCAAyC,qB,kBAC3E7B,MAAM2B,KAAKE,eAAe,+BAAgC,e,sBACrD,M,qBACE,G,qGAUX7B,MAAM8B,OAAOF,IAAI,W,uBA/D3CzC,KAAK4C,aAAe/B,MAAM8B,OAAOF,IAAI,sDACrC5B,MAAM2B,KAAKK,UAAS,KAClB7C,KAAK8C,eAAiBjC,MAAM2B,KAAKC,IAAI,+BACrCzC,KAAK+C,eAAiBlC,MAAM2B,KAAKC,IAAI,kCACrCzC,KAAKgD,qBAAuBnC,MAAM2B,KAAKE,eAAe,wCAAyC,qBAC/F1C,KAAKiD,aAAepC,MAAM2B,KAAKE,eAAe,+BAAgC,cAAc,IAG9F,GAAI1C,KAAKkD,QAAS,CAChB,IACElD,KAAKmD,eAAeC,MAAMC,QAAQrD,KAAKkD,SAAWlD,KAAKkD,QAAUI,KAAKC,MAAMvD,KAAKkD,UACjF,M,CACA,MAAOM,GACP3C,MAAM4C,IAAI,mC,EAGd,IAAKL,MAAMC,QAAQrD,KAAK0D,aAAc,CACpC7C,MAAM4C,IAAI,qCAAmCzD,KAAK0D,aAClD1D,KAAKmD,eAAe,G,CAGtB,GAAInD,KAAKmB,YAAcN,MAAM8C,IAAIC,QAAQ,QAAS,CAChD/C,MAAMgD,IAAIC,QAAQC,WAAW/D,KAAKmB,UAAW,CAAC,YAAY6C,MAAKC,GAAQjE,KAAKmD,eAAec,EAAKC,KAAKhB,U,EAIjG,cAAAC,CAAeO,G,QACrB1D,KAAK0D,YAAcA,EACnB,IAAIS,EAAOnE,MACXoE,GAAAC,EAAArE,KAAK0D,YAAY,MAAE,MAAAW,SAAA,SAAAA,EAAEC,WAAO,MAAAF,SAAA,SAAAA,EAAEG,SAAQ,SAAU5D,GAC9C6D,OAAOC,QAAQ9D,EAAO+D,mBAAqB,IACxCC,QAAOC,IAAQA,EAAI,KACnBC,KAAID,GAAOT,EAAK3D,QAAQsE,KAAKC,OAAOH,EAAI,M,IA0C/C,4BAAMI,GACJ,IAAIC,EAAkB,GACtB,IAAIC,EAAYlF,KAAKmF,KAAaC,sBAClCF,EAASX,SAAQ,SAAUlD,EAAOgE,GAChCA,EAAIC,WAAW,cAAgBL,EAAgBI,EAAIE,QAAQ,WAAY,IAAIA,QAAQ,IAAK,KAAOlE,E,IAEjG,OAAO4D,C,CAOT,oBAAMO,GACJ,IAAIC,EAA4CzF,KAAKmF,KAAKO,iBAAiB,cAC3E,IAAIC,EAAO,KACX,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAAiBI,OAAQD,IAAK,CAEhD,GAAI,mBAAoBH,EAAiBG,KAAOH,EAAiBG,GAAGJ,iBAAkB,CACpFG,EAAO,K,EAGX,OAAOA,C,CAOT,yBAAMG,G,QACJ,OAAO9F,KAAKiF,gBAAgBc,MAAKnE,GAAUA,EAAOoE,YAAY3B,EAAArE,KAAKiG,gBAAY,MAAA5B,SAAA,SAAAA,EAAEwB,WAAUzB,EAAApE,KAAKiG,gBAAY,MAAA7B,SAAA,SAAAA,EAAE8B,OAAMtB,GAAO5E,KAAKQ,QAAQ2F,SAASvB,K,CAOnJ,wBAAMwB,GACJ,OAAOpG,KAAKiF,e,CAOd,eAAMoB,CAAUC,GACd,OAAOtG,KAAK0D,YAAY6C,MAAK3E,GAAUA,EAAOV,KAAOoF,G,CAS/C,cAAAE,CAAe9F,EAAOkB,GAC5B,MAAM6E,EAAwB/F,EAAMM,OAA4B0F,QAAQ,6BACxE,IAAK7F,MAAM8C,IAAIC,QAAQ,QAAS,CAC9B6C,EAAqBE,eAAe,CAAEC,SAAU,SAAUC,MAAO,U,CAEnEJ,EAAqBK,UAAUC,IAAI,iC,CAG7B,cAAAC,CAAetG,EAAOkB,GAC5B,IAAIsC,EAAO,CAAExD,MAAOA,EAAOkB,OAAQA,EAAQjB,OAAQ,MACnD,GAAIiB,EAAO0C,QAAS,CAClB,IAAI3D,EAASiB,EAAO0C,QAAQiC,MAAM5F,GACzBoE,OAAOpE,EAAOO,MAAQ6D,OAAOrE,EAAMM,OAAOK,SAEnD6C,EAAKvD,OAASA,C,CAGhB,IAAIsG,EAAgBvG,EAAMM,OAAO0F,QAAQ,6BACzC,GAAIhG,EAAMM,OAAOK,QACVO,EAAOhB,MAAQlB,EAAYwH,MAAQtF,EAAOhB,MAAQlB,EAAYyH,QAAUzG,EAAME,OAAS,SACxFgB,EAAOhB,MAAQlB,EAAY0H,KAAO1G,EAAME,OAAS,aAAeF,EAAMM,OAAOqG,KAAO3G,EAAMM,OAAOsG,KAAO,CAC5GC,YAAW,KACTN,EAAcH,UAAUU,OAAO,iCAAiC,GAC/D,I,CAGL,MAAMC,EAAQzH,KAAKiF,gBAAgByC,WAAU9F,GAAUA,EAAO0E,YAAcpC,EAAKtC,OAAOV,KACxFuG,GAAS,EAAIzH,KAAKiF,gBAAgBwC,GAAMjD,OAAAmD,OAAAnD,OAAAmD,OAAA,GACnCzD,EAAKvD,QAAM,CACd2F,UAAWpC,EAAKtC,OAAOV,KACrBlB,KAAKiF,gBAAgBH,KAAIN,OAAAmD,OAAAnD,OAAAmD,OAAA,GAAMzD,EAAKvD,QAAM,CAAE2F,UAAWpC,EAAKtC,OAAOV,MAEvE,GAAIU,EAAOhB,MAAQlB,EAAYmC,SAAU,CACvChB,MAAMH,MAAMO,KAAK,oCAAqC,CACpDC,GAAIlB,KAAKmB,UACTC,MAAOV,EAAMM,OAAOK,O,CAGxBrB,KAAK4H,kBACL5H,KAAK6H,8BAA8BjG,GACnC5B,KAAK8H,QAAQ7G,KAAKiD,GAClBrD,MAAMH,MAAMO,KAAK,0BAA2BiD,E,CAqDtC,eAAA0D,GACN5H,KAAKiG,aAAejG,KAAKiF,gBAAgBJ,KAAIlE,GAAU6D,OAAOuD,KAAKpH,EAAO+D,mBAAqB,MAC5FsD,QAAO,CAACC,EAAGC,IAAMD,EAAEtD,QAAOnB,GAAK0E,EAAE/B,SAAS3C,OAC1CqB,KAAID,GAAOG,OAAOH,I,CAGf,6BAAAiD,CAA8BjG,GACpC,GAAIA,EAAOhB,OAASlB,EAAYyI,mBAAqBvG,EAAOwG,SAAU,CACpE,M,CAEF,MAAMC,EAAkBrI,KAAKmF,KAAKmD,cAAc,oBAAoB1G,EAAOV,QAC3E,MAAMqH,EAAaF,EAAgB3C,iBAAiB,iBAAiBG,OACrEwC,EAAgB3C,iBAAiB,SAASnB,SAAQiE,GAASA,EAAMC,gBAAgB,YAAaF,I,CAGxF,SAAAG,CAAUrH,EAAOT,GACvB,OAAOS,EACHA,EAAMsH,MAAM,KAAK/H,GAAQ,MAAQ,EAAI,GACrC,E,CAGE,iBAAAgI,CAAkBhH,GACxB,GAAI5B,KAAK,GAAG4B,EAAOhB,cAAe,CAChC,OAAOZ,KAAK,GAAG4B,EAAOhB,cAAcgB,E,CAGtC,GAAIA,EAAOhB,OAASlB,EAAYmJ,aAAc,CAC5C,OAAO7I,KAAK8I,kBAAkBlH,E,CAGhC,GAAIA,EAAOhB,OAASlB,EAAYyI,iBAAkB,CAChD,OAAOnI,KAAK+I,gBAAgBnH,E,CAG9B,GAAIA,EAAOhB,OAASlB,EAAYsJ,cAAe,CAC7C,OAAOhJ,KAAKiJ,aAAarH,E,CAE3Bf,MAAM4C,IAAI,8BAA8B7B,EAAOhB,WAC/C,MAAO,E,CAGC,kBAAAsI,CAAmBtH,GAC3B,OAAOA,EAAOuH,qBACV,CAAE,iBAAkB,WAAWvH,EAAOuH,qBAAqBvH,WAAWA,EAAOuH,qBAAqBC,YAAYxH,EAAOuH,qBAAqB9H,SAC1I,E,CAIN,iBAAAgI,GACErJ,KAAK8C,eAAiBjC,MAAM2B,KAAKC,IAAI,+BACrC,OAAO5B,MAAMgD,IAAIyF,KAAKC,kB,CAGxB,kBAAAC,G,QACI,KAAInF,EAAArE,KAAK0D,eAAW,MAAAW,SAAA,SAAAA,EAAEwB,SAAU,IAAM7F,KAAK0D,YAAYqC,MAAKnE,GAAUA,EAAOhB,MAAQlB,EAAYmC,WAAW,CAC1G,M,CAEF,IAAI4H,GAA0BrF,EAAApE,KAAK0D,YAAY6C,MAAK3E,GAAUA,EAAOhB,MAAQlB,EAAYmC,cAAS,MAAAuC,SAAA,SAAAA,EAAEE,QAAQiC,MAAK5F,GAAUA,EAAO+I,cAClI,IAAKD,EAAwB,CAC3B,M,CAEFlC,YAAW,KACT1G,MAAMH,MAAMO,KAAK,oCAAqC,CACpDC,GAAIlB,KAAKmB,UACTC,MAAOqI,EAAuBE,kBAC9B,GACD,I,CAGP,MAAAC,G,MACE,KAAIvF,EAAArE,KAAK0D,eAAW,MAAAW,SAAA,SAAAA,EAAEwB,SAAU,EAAG,CACjC,M,CAGF,OACEzD,EAACyH,EAAI,CAACxH,MAAM,6BAEVD,EAAA,gCACGpC,KAAK0D,YAAYmB,KAAKjD,GACrBQ,EAAA,MAAAoC,OAAAmD,OAAA,CAAKtF,MAAO,qCAAqCT,EAAOuH,qBAAuB,UAAY,KAAI,iBAC7EvH,EAAOV,IACnBlB,KAAKkJ,mBAAmBtH,IAC3BA,EAAOkI,MAAQ,WACd9J,KAAK+J,iBACH3H,EAAA,OAAKC,MAAM,2BAA0B,mBAAmBT,EAAOhB,KAAI,uBAC7C,GAAGgB,EAAOwG,YAChChG,EAAA,SAAO4H,QAAS,WAAapI,EAAOV,GAAK,IAAKmB,MAAO,kCAAkCrC,KAAK2B,UAAUC,GAAU,wCAA0C,MACxJQ,EAAA,SACGR,EAAOkI,KACPlI,EAAOwG,UAAYhG,EAAA,mBAAgB,KACtCA,EAAA,aAAQR,EAAOqI,cAEjB7H,EAAA,OAAKC,MAAO,oCAAoCrC,KAAK2B,UAAUC,GAAU,8CAAgD,MACtH5B,KAAK4I,kBAAkBhH,S,CAYlC,cAAAsI,CAAetI,EAAgBkC,G,QACrC,OAAO1B,EAAA,OAAKC,MAAM,wCAEfgC,EAAAzC,EAAOE,YAAQ,MAAAuC,SAAA,SAAAA,EAAEtC,YAAa,CAC7BH,EAAOE,SACLM,EAAA,OAAKC,MAAM,uCACTD,EAAA,sBAAoBN,SAAUF,EAAOE,YAGrC,GACJF,EAAO0C,QAAQuB,OACb,CAACzD,EAAA,UAAKpC,KAAKiD,cACXb,EAAA,OAAKC,MAAM,sCACRT,EAAO0C,QAAQO,KAAI,CAAClE,EAAQiF,IAC3BxD,EAAA,OAAKC,MAAM,2CACTD,EAAA,SAAOlB,GAAI,mBAAmB0E,IAAKhF,KAAK,QAAQkJ,KAAK,kBAAkBK,QAASxJ,EAAO+I,YAAarI,MAAOV,EAAOgJ,iBAAkBS,SAAU5G,GAAKxD,KAAKS,sBAAsB+C,EAAG7C,EAAQ,YACzLyB,EAAA,SAAO4H,QAAS,mBAAmBpE,KACjCxD,EAAA,YAAOvB,MAAM0B,MAAM5B,EAAOmJ,aAI/B1F,EAAAxC,EAAOE,YAAQ,MAAAsC,SAAA,SAAAA,EAAEiG,uBAChBjI,EAAA,OAAKC,MAAM,2CACTD,EAAA,SAAOlB,GAAI,yBAA0BN,KAAK,QAAQkJ,KAAK,kBAAkBzI,MAAM,SAAS+I,SAAU5G,GAAKxD,KAAKS,sBAAsB+C,EAAG,SAAU,YAC/IpB,EAAA,SAAO4H,QAAS,0BACd5H,EAAA,gBAAQpC,KAAKgD,qBAAoB,OAGnC,KAEI,GAEZZ,EAAA,OAAKC,MAAO,CAAE,yCAA0C,KAAMiI,OAAU1I,EAAO0C,QAAQuB,QAAWjE,EAAO0C,QAAQuB,QAAU7F,KAAKwB,mBAC9HY,EAAA,SACExB,KAAK,OACLM,GAAG,kBACH4I,KAAK,kBACLzH,MAAM,iBACNkI,IAAKC,GAAMxK,KAAKyB,cAAgB+I,EAChCnJ,MACEO,EAAO0C,QAAQuB,QACVjE,EAAO0C,QAAQyB,MAAKpF,GAAUA,EAAO+I,cACtC9H,EAAO0C,QAAQiC,MAAK5F,GAAUA,EAAO+I,cAAaC,iBAClD/H,EAAOP,MAEb4I,YAAarI,EAAOqI,YACpBQ,QAASjH,GAAKxD,KAAKS,sBAAsB+C,EAAG,SAAU,SACtDkH,OAAQlH,GAAKxD,KAAKgH,eAAexD,EAAG5B,GACpC+I,UAAYnH,GAAMxD,KAAKwG,eAAehD,EAAG5B,KAG3CQ,EAAA,QAAMC,MAAM,8CACTxB,MAAM8B,OAAOiI,SAAS/J,MAAM8B,OAAOF,IAAI,uBAAuBoI,UAInE7K,KAAKgC,yBAAyBJ,G,CAK5B,YAAAkJ,CAAalJ,EAAgBmJ,EAA2B,MAC9D,OAAO3I,EAAA,oBAAAoC,OAAAmD,OAAA,GACAoD,GAAa,GAAE,gBACP,OACb1J,MAAOO,EAAOP,MAAK,iBACH,KAChByI,KAAM,WAAWlI,EAAOV,MACxBkH,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD4C,OAAO,QACPC,QAAUzH,GAAMxD,KAAKgH,eAAexD,EAAG5B,GACvC+B,IAAK9C,MAAMyI,KAAKzF,IAAIqH,yBAAwB,YACjC,CAAEC,aAAcnL,KAAKmB,UAAWiK,WAAYpL,KAAKmB,WAC5DkK,eAAiB7H,GAAMxD,KAAKwG,eAAehD,EAAG5B,GAC9CS,MAAO,CAAE,gCAAiC,KAAM+F,SAAUxG,EAAOwG,YAEjEhG,EAAA,OAAKC,MAAM,0CACTD,EAAA,QAAMC,MAAM,8CACViJ,UAAYP,EAAkBQ,QAAWR,EAAkBQ,OAAO5C,MAAM,KAAKzC,OAAMtF,GAAQA,EAAKuF,SAAS,WACrGqF,EACAC,IAENrJ,EAAA,KAAGC,MAAM,+CAA+CxB,MAAM2B,KAAKC,IAAI,kCACvEL,EAAA,QAAMC,MAAM,0BAA0BxB,MAAM2B,KAAKC,IAAI,4B,CAMnD,WAAAiJ,CAAY9J,GAClB,OAAO5B,KAAK8K,aAAalJ,EAAQ,CAAE2J,OAAQ,4C,CAIrC,UAAAI,CAAW/J,GACjB,IAAIgK,EAAQhK,EAAO0C,QAAQO,KAAIlE,GAAUX,KAAKC,UAAUU,EAAOmJ,QAAOnF,OAAOkH,SAC7E,OAAOD,IAAK,MAALA,SAAK,SAALA,EAAO/F,QACV7F,KAAK8K,aAAalJ,EAAQ,CAAE2J,OAAQK,EAAME,KAAK,OAC/C,0B,CAKE,YAAAC,CAAanK,GACnB,OAAOQ,EAAA,SACLxB,KAAK,OACLS,MAAOO,EAAOP,MACdgB,MAAM,iBACN+F,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD0B,KAAM,WAAWlI,EAAOV,MACxB+I,YAAarI,EAAOqI,YACpBS,OAAQlH,GAAKxD,KAAKgH,eAAexD,EAAG5B,GACpC+I,UAAYnH,GAAMxD,KAAKwG,eAAehD,EAAG5B,GACzC6I,QAASjH,GAAK3C,MAAMC,QAAQC,gBAAgByC,EAAExC,S,CAI1C,cAAA+I,GACN,OAAO3H,EAAA,OAAKC,MAAM,8B,CAIZ,UAAA2J,CAAWpK,GACjB,OAAOQ,EAAA,OAAKC,MAAM,0BAChBD,EAAA,SACExB,KAAK,OACLS,MAAOO,EAAOP,MACdgB,MAAM,iBACN+F,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD0B,KAAM,WAAWlI,EAAOV,MACxB+I,YAAarI,EAAOqI,YACpBU,UAAYnH,GAAMxD,KAAKwG,eAAehD,EAAG5B,GACzC6I,QAASjH,GAAKxD,KAAKgH,eAAexD,EAAG5B,K,CAKnC,cAAAqK,CAAerK,GAErB,OAAOQ,EAAA,OAAKC,MAAM,8BAChBD,EAAA,OAAKC,MAAM,QACTD,EAAA,YACE8J,KAAM,EACN7K,MAAOO,EAAOP,MACdgB,MAAM,iBACN+F,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjDlH,GAAI,WAAWU,EAAOV,MACtB4I,KAAM,WAAWlI,EAAOV,MACxB+I,YAAarI,EAAOqI,YACpBU,UAAYnH,GAAMxD,KAAKwG,eAAehD,EAAG5B,GACzC6I,QAAUjH,GAAMxD,KAAKgH,eAAexD,EAAG5B,M,CAMvC,SAAAuK,CAAUvK,GAChB,OAAOQ,EAAA,aACLgK,KAAM,GACN/E,IAAKrH,KAAK0I,UAAU9G,EAAOP,MAAO,OAClCiG,IAAKtH,KAAK0I,UAAU9G,EAAOP,MAAO,OAClCyI,KAAM,WAAWlI,EAAOV,MACxBmL,WAAY,KACZjE,SAAUxG,EAAOwG,SACjBiD,eAAiB7H,GAAMxD,KAAKwG,eAAehD,EAAG5B,GAC9C0K,WAAY9I,GAAKxD,KAAKgH,eAAexD,EAAG5B,I,CAGpC,iBAAAkH,CAAkBlH,GACxB,OAAOQ,EAAA,sBACLmK,YAAa/I,GAAKxD,KAAKgH,eAAexD,EAAG5B,GACzCkI,KAAM,WAAWlI,EAAOV,MACxBkH,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjDiD,eAAiB7H,GAAMxD,KAAKwG,eAAehD,EAAG5B,GAC9C4K,MAAO5K,EAAOP,O,CAOV,UAAAoL,CAAW7K,GACjB,OAAOQ,EAAA,yBACLsK,WAAY,KACZC,WAAY,KACZC,WAAW,QACXvL,MAAOO,EAAOP,MACd4I,YAAarI,EAAOkI,KACpB1B,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD0B,KAAM,WAAWlI,EAAOV,MACxBmB,MAAM,iCACNgJ,eAAiB7H,GAAMxD,KAAKwG,eAAehD,EAAG5B,GAC9CiL,SAAUrJ,GAAKxD,KAAKgH,eAAexD,EAAG5B,I,CAIlC,UAAAkL,CAAWlL,GAEjB,OAAOQ,EAAA,OAAKC,MAAM,kCAChBD,EAAA,yBACEf,MAAOO,EAAOP,MACd4I,YAAarI,EAAOkI,KACpB1B,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD2E,QAAS,IAAIC,KACblD,KAAM,WAAWlI,EAAOV,MACxBmK,eAAiB7H,GAAMxD,KAAKwG,eAAehD,EAAG5B,GAC9CiL,SAAUrJ,GAAKxD,KAAKgH,eAAexD,EAAG5B,K,CAKpC,cAAAqL,CAAerL,GAErB,OAAOQ,EAAA,OAAKC,MAAM,sCAChBD,EAAA,yBACEuK,WAAY,KACZtL,MAAOO,EAAOP,MACduL,WAAW,cACX3C,YAAarI,EAAOkI,KACpB1B,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD0B,KAAM,WAAWlI,EAAOV,MACxBgM,QAAStL,EAAOuL,aAChBJ,QAASnL,EAAOwL,eAChB/B,eAAiB7H,GAAMxD,KAAKwG,eAAehD,EAAG5B,GAC9CiL,SAAUrJ,GAAKxD,KAAKgH,eAAexD,EAAG5B,K,CAOlC,mBAAAyL,CAAoB1M,EAAgB2M,EAAsB,KAAMC,GACxE,GAAIA,GAAcA,GAAc7N,EAAY8N,MAAO,CACjD,OAAO7M,EAAOmJ,MACRwD,GAActN,KAAKyN,kBAAkB9M,GAAW,cAAcX,KAAK8C,sBAAwB,KAC5FnC,EAAOgJ,iBAAmB,SAAS9I,MAAM0B,MAAM5B,EAAOgJ,0BAA4B,G,CAGzF,OAAOhJ,EAAOmJ,MACRwD,GAActN,KAAKyN,kBAAkB9M,GAAW,MAAMX,KAAK8C,iBAAmB,KAC/EnC,EAAOgJ,iBAAmB,KAAK9I,MAAM0B,MAAM5B,EAAOgJ,qBAAuB,G,CAItE,iBAAA8D,CAAkB9M,G,MAC1B,GAAIA,EAAOqF,SAAWrF,EAAO+D,sBAAsBL,EAAArE,KAAKiG,gBAAY,MAAA5B,SAAA,SAAAA,EAAEwB,QAAQ,CAC5E,OAAOlF,EAAOqF,M,CAGhB,IAAI0H,EAAmB1N,KAAKiF,gBAAgBN,QAAO/C,GAAUA,EAAOV,IAAMP,EAAOO,KAAI2E,OAErF,GAAI6H,GAAoB1N,KAAKiF,gBAAgBY,QAAU,EAAG,CACxD,OAAO,K,CAIT,GAAI6H,EAAkB,CAEpB,IAAIC,EAAoB3N,KAAKiG,aAAatB,QAAOC,GAAO5E,KAAKQ,QAAQ2F,SAASvB,KAC9E,OAAOJ,OAAOuD,KAAKpH,EAAO+D,mBAAmBqB,MAAKnB,GAAO+I,EAAkBxH,SAASpB,OAAOH,K,CAG7F,OAAO5E,KAAKiF,gBAAgBc,MAAKnE,GAAUA,EAAOoE,QAAUpE,EAAO0E,YAAc3F,EAAO2F,W,CAIlF,YAAA2C,CAAarH,GACnB,OAAOQ,EAAA,WACLA,EAAA,UAAQ0H,KAAM,WAAWlI,EAAOV,MAC9BkH,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD/F,MAAM,iBACNsI,UAAYnH,GAAMxD,KAAKwG,eAAehD,EAAG5B,GACzCwI,SAAU5G,GAAKxD,KAAKgH,eAAexD,EAAG5B,IACtCQ,EAAA,UAAQf,MAAM,IAAIO,EAAOqI,aAEvBrI,IAAM,MAANA,SAAM,SAANA,EAAQ0C,QAAQO,KAAKlE,GACZyB,EAAA,UAAQf,MAAOV,EAAOO,GAAI0M,SAAU5N,KAAK4C,aAAe5C,KAAKyN,kBAAkB9M,GACpFkN,SAAUlN,EAAO+I,aAChB1J,KAAKqN,oBAAoB1M,O,CAQ9B,eAAAoI,CAAgBnH,GACtB,IAAIkM,EAAclM,EAAOwG,WAAaxG,EAAO0C,QAAQyB,MAAKpF,GAAUA,EAAO+I,gBAAiB9H,EAAOuH,qBACnG,OAAO/G,EAAA,OAAKC,MAAO,CAAE,6CAA8C,KAAM+F,SAAYxG,EAAOwG,WAExFxG,IAAM,MAANA,SAAM,SAANA,EAAQ0C,QAAQO,KAAKlE,GACZyB,EAAA,WACLA,EAAA,SAAOxB,KAAK,WACVS,MAAOV,EAAOO,GACd0M,SAAU5N,KAAKyN,kBAAkB9M,GACjCwJ,QAASxJ,EAAO+I,YAChBtB,SAAU0F,EACVhE,KAAM,WAAWlI,EAAOV,QACxBA,GAAI,SAASU,EAAOV,MAAMP,EAAOO,KACjCkJ,SAAW5G,GAAMxD,KAAKgH,eAAexD,EAAG5B,GACxC+I,UAAYnH,GAAMxD,KAAKwG,eAAehD,EAAG5B,GAAO,mBAC9B,WAAWA,EAAOV,oBACtCkB,EAAA,SAAO4H,QAAS,SAASpI,EAAOV,MAAMP,EAAOO,MAAOlB,KAAKqN,oBAAoB1M,O,CAQ/E,WAAAoN,CAAYnM,GAClB,OAAOQ,EAAA,YAAUC,MAAM,oCAEnBT,IAAM,MAANA,SAAM,SAANA,EAAQ0C,QAAQO,KAAKlE,GACnByB,EAAA,OAAKC,MAAM,iCACTD,EAAA,SAAOxB,KAAK,QACVS,MAAOV,EAAOO,GACdkH,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD+B,QAASxJ,EAAO+I,YAChBI,KAAM,WAAWlI,EAAOV,MACxB0M,SAAU5N,KAAK4C,aAAe5C,KAAKyN,kBAAkB9M,GACrDO,GAAI,SAASlB,KAAKmB,aAAaS,EAAOV,MAAMP,EAAOO,KACnDyJ,UAAYnH,GAAMxD,KAAKwG,eAAehD,EAAG5B,GACzCwI,SAAU5G,GAAKxD,KAAKgH,eAAexD,EAAG5B,KACxCQ,EAAA,SAAO4H,QAAS,SAAShK,KAAKmB,aAAaS,EAAOV,MAAMP,EAAOO,MAC7DkB,EAAA,QAAM4L,MAAO,CAAE,mBAAoBrN,EAAO6L,SAC1CpK,EAAA,OAAKkJ,UAAWtL,KAAKqN,oBAAoB1M,EAAQ,KAAMiB,EAAOhB,Y,CASlE,eAAAqN,CAAgBrM,GACtB,OAAOQ,EAAA,OAAKC,MAAM,wCACfT,EAAO0C,QAAQO,KAAKlE,GACZyB,EAAA,WACLA,EAAA,SAAOxB,KAAK,QACVS,MAAOV,EAAOO,GAAE,cACHP,EAAOO,GACpBkH,UAAWxG,EAAOuH,sBAAwBvH,EAAOwG,SACjD+B,QAASxJ,EAAO+I,YAChBI,KAAM,WAAWlI,EAAOV,MAAK,cAChBP,EAAOuN,aACpBN,SAAU5N,KAAK4C,aAAe5C,KAAKyN,kBAAkB9M,GACrDO,GAAI,UAAUlB,KAAKmB,aAAaS,EAAOV,MAAMP,EAAOO,KACpDyJ,UAAYnH,GAAMxD,KAAKwG,eAAehD,EAAG5B,GACzCwI,SAAW5G,GAAMxD,KAAKgH,eAAexD,EAAG5B,KAC1CQ,EAAA,SAAO4H,QAAS,UAAUhK,KAAKmB,aAAaS,EAAOV,MAAMP,EAAOO,KAAI,cACrDP,EAAOuN,aACpB7L,MAAM,eACND,EAAA,kBAAezB,EAAOwN,MAAOC,IAAKzN,EAAOwN,MAAOE,MAAO1N,EAAOmJ,KAAMwE,IAAK3N,EAAOmJ,OAChF1H,EAAA,QAAMkJ,UAAWiD,EAAiBlM,MAAM,sCACvCrC,KAAKyN,kBAAkB9M,GACtB,CACEyB,EAAA,SAAOC,MAAM,4CAA4CrC,KAAK8C,gBAC9D9C,KAAK4C,YAAcR,EAAA,OAAKC,MAAM,+CAAkD,IAEhF,IAEND,EAAA,SAAIpC,KAAKqN,oBAAoB1M,EAAQ,OAAM,Q"}
+{"version":3,"names":["DisplayType","Currency","sallaProductOptionsCss","SallaProductOptions","constructor","hostRef","this","fileTypes","pdf","png","jpg","word","exl","txt","outSkus","handleDonationOptions","event","detail","type","salla","helpers","inputDigitsOnly","target","emit","id","productId","price","value","preventDefault","stopPropagation","isCustomDonation","donationInput","focus","hideLabel","option","DONATION","donation","can_donate","getExpireDonationMessage","completed","target_amount","collected_amount","h","class","target_message","money","lang","get","getWithDefault","config","canDisabled","onLoaded","outOfStockText","donationAmount","selectDonationAmount","selectAmount","options","setOptionsData","Array","isArray","JSON","parse","e","log","optionsData","url","is_page","api","product","getDetails","then","resp","data","that","_b","_a","details","forEach","Object","entries","skus_availability","filter","sku","map","push","Number","getSelectedOptionsData","selectedOptions","formData","host","getElementSallaData","key","startsWith","replace","reportValidity","requiredElements","querySelectorAll","pass","i","length","hasOutOfStockOption","some","is_out","selectedSkus","every","includes","getSelectedOptions","getOption","option_id","find","invalidHandler","closestProductOption","closest","scrollIntoView","behavior","block","classList","add","changedHandler","optionElement","FILE","IMAGE","MAP","lat","lng","setTimeout","remove","index","findIndex","assign","setSelectedSkus","handleRequiredMultipleOptions","changed","keys","reduce","p","c","MULTIPLE_OPTIONS","required","optionContainer","querySelector","hasChecked","input","toggleAttribute","getLatLng","split","getDisplayForType","COLOR_PICKER","colorPickerOption","multipleOptions","SINGLE_OPTION","singleOption","getOptionShownWhen","visibility_condition","operator","componentWillLoad","cart","getCurrentCartId","componentDidRender","selectedDonationOption","is_selected","additional_price","render","Host","name","splitterOption","htmlFor","placeholder","donationOption","checked","onChange","custom_amount_enabled","shown","ref","el","onInput","onBlur","onInvalid","currency","symbol","fileUploader","additions","height","onAdded","getUploadImageEndpoint","cart_item_id","product_id","onInvalidInput","innerHTML","accept","CameraIcon","FileIcon","imageOption","fileOption","types","Boolean","join","numberOption","textOption","textareaOption","rows","mapOption","zoom","searchable","onSelected","onSubmitted","color","timeOption","noCalendar","enableTime","dateFormat","onPicked","dateOption","minDate","Date","datetimeOption","maxDate","to_date_time","from_date_time","getOptionDetailName","outOfStock","optionType","COLOR","isOptionDetailOut","isDetailSelected","outSelectableSkus","disabled","selected","is_required","colorOption","style","thumbnailOption","option_value","image","src","title","alt","CheckCircleIcon"],"sources":["src/components/salla-product-options/interfaces.ts","src/components/salla-product-options/salla-product-options.scss?tag=salla-product-options","src/components/salla-product-options/salla-product-options.tsx"],"sourcesContent":["export enum DisplayType {\n  COLOR = \"color\",\n  DATE = \"date\",\n  DATETIME = \"datetime\",\n  DONATION = \"donation\",\n  IMAGE = \"image\",\n  MULTIPLE_OPTIONS = \"multiple-options\",\n  NUMBER = \"number\",\n  SINGLE_OPTION = \"single-option\",\n  SPLITTER = \"splitter\",\n  TEXT = \"text\",\n  TEXTAREA = \"textarea\",\n  THUMBNAIL = \"thumbnail\",\n  TIME = \"time\",\n  RADIO = \"radio\",\n  CHECKBOX = \"checkbox\",\n  MAP = \"map\",\n  FILE = \"file\", // similar to image type (file-uploader component)\n  COLOR_PICKER = \"color_picker\"\n\n}\n\nexport interface ProductDetail {\n  id: string;\n  sku: string;\n  name: string;\n  description: string;\n  url: string;\n  promotion_title: string;\n  subtitle: string;\n  type: string;\n  status: string;\n  price: number;\n  sale_price: number;\n  regular_price: number;\n  starting_price: null;\n  quantity: number;\n  max_quantity: number;\n  discount_ends: number;\n  is_taxable: boolean;\n  has_read_more: boolean;\n  can_add_note: boolean;\n  can_show_remained_quantity: boolean;\n  can_upload_file: boolean;\n  has_custom_form: boolean;\n  is_on_sale: boolean;\n  is_hidden_quantity: boolean;\n  is_available: boolean;\n  is_out_of_stock: boolean;\n  weight: null;\n  calories: null;\n  image: SimpleImage;\n  brand: Brand;\n  donation?: ProductDonation;\n  images: Image[];\n  tags: Tag[];\n  notify_availability: null;\n  rating: Rating;\n  options: Option[];\n  sold_quantity: number;\n  category: Category;\n}\n\nexport interface SimpleImage {\n  url: string;\n  alt: string;\n}\n\nexport interface Category {\n  name: string;\n  url: string;\n  icon: string;\n}\n\nexport interface ProductDonation {\n  target_message?: string;\n  collected_amount?: number;\n  target_amount?: number;\n  target_percent?: number;\n  target_end_date?: string;\n  can_donate: boolean;\n  custom_amount_enabled: boolean;\n}\n\nexport interface Image {\n  id: number;\n  url: string;\n  main: boolean;\n  three_d_image_url: string;\n  alt: string;\n  video_url: string;\n  type: string;\n  sort: number;\n}\n\nexport interface Option {\n  id: number;\n  name: string;\n  required: boolean;\n  type: string;\n  placeholder: string;\n  option_type: string;\n  not_same_day_order: boolean;\n  availability_range: number;\n  from_date_time: null;\n  to_date_time: null;\n  visibility_condition?: { option: number, operator: \"=\" | \"!=\", value: number };\n  details?: Detail[];\n  condition_attributes: string;\n  value?: any;\n  donation?: Donation\n}\n\nexport interface Donation {\n  custom_amount_enabled: boolean;\n  target_message?: string;\n  target_date: string | \"2023-04-18\";\n  target_end_date: string | \"2023-04-18\";\n  target_amount: number;\n  collected_amount: number;\n  can_donate: boolean;\n}\n\nexport interface Detail {\n  id: number;\n  option_id: number;\n  name: string;\n  additional_price: number;\n  option_value: null | string;\n  image: null | string;\n  color: null | string;\n  is_out: boolean;\n  skus_availability?: { [sku_id: number]: boolean };\n  is_selected: boolean;\n}\n\nexport interface Brand {\n  id: string;\n  url: string;\n  name: string;\n  logo: string;\n}\n\nexport interface PreTaxPrice {\n  amount: number;\n  currency: Currency;\n}\n\nexport enum Currency {\n  Sar = \"SAR\",\n}\n\nexport interface Promotion {\n  title: string;\n  sub_title: string;\n}\n\nexport interface Rating {\n  count: number;\n  stars: number;\n}\n\nexport interface Tag {\n  name: string;\n  url: string;\n}\n","\n.s-product-options{\n  &-wrapper{\n\n  }\n  &-option-container{\n\n  }\n  &-option{\n\n  }\n  &-option-label{\n\n  }\n  &-option-content{\n\n  }\n  &-colors-wrapper{\n\n  }\n  &-date-element{\n\n  }\n  &-time-element{\n    \n  }\n  &-datetime-element{\n\n  }\n  &-image-input{\n\n  }\n  &-multiple-options-wrapper{\n\n  }\n  &-splitter{\n\n  }\n  &-text{\n\n  }\n  &-textarea{\n\n  }\n  &-thumbnails-wrapper{\n\n  }\n}","import { Component, Prop, h, State, Element, Host, Event, EventEmitter, Method } from '@stencil/core';\nimport { Option, DisplayType, Detail } from './interfaces';\nimport CheckCircleIcon from '../../assets/svg/check.svg';\nimport CameraIcon from '../../assets/svg/camera.svg';\nimport FileIcon from '../../assets/svg/file-upload.svg';\n\n\n@Component({\n  tag: 'salla-product-options',\n  styleUrl: 'salla-product-options.scss',\n})\nexport class SallaProductOptions {\n\n  constructor() {\n    this.canDisabled = !salla.config.get('store.settings.product.notify_options_availability');\n    salla.lang.onLoaded(() => {\n      this.outOfStockText = salla.lang.get(\"pages.products.out_of_stock\");\n      this.donationAmount = salla.lang.get('pages.products.donation_amount');\n      this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');\n      this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');\n    });\n\n    if (this.options) {\n      try {\n        this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));\n        return;\n      } catch (e) {\n        salla.log('Bad json passed via options prop');\n      }\n    }\n    if (!Array.isArray(this.optionsData)) {\n      salla.log('Options is not an array[] ---> ', this.optionsData);\n      this.setOptionsData([]);\n    }\n\n    if (this.productId && !salla.url.is_page('cart')) {\n      salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));\n    }\n  }\n\n  private setOptionsData(optionsData: Option[]) {\n    this.optionsData = optionsData;\n    let that = this\n    this.optionsData[0]?.details?.forEach(function (detail) {\n      Object.entries(detail.skus_availability || {})\n        .filter(sku => !sku[1])\n        .map(sku => that.outSkus.push(Number(sku[0])));\n    });\n  }\n\n  @Element() host: HTMLElement;\n\n  private fileTypes: Object = {\n    pdf: 'application/pdf',\n    png: 'image/png',\n    jpg: 'image/jpeg',\n    word: 'application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    exl: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n    txt: 'text/plain',\n  };\n\n  @State() optionsData: Option[];\n  @State() outOfStockText: string = ''\n  @State() donationAmount: string = salla.lang.get('pages.products.donation_amount')\n  @State() selectDonationAmount: string = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع')\n  @State() selectAmount: string = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ')\n  @State() isCustomDonation: boolean = false;\n  @State() selectedOptions: Array<any> = [];\n  @State() canDisabled: boolean;\n  @State() selectedSkus?: Array<string | number>;\n  @State() selectedOutSkus?: Array<string | number>;\n  private outSkus: Array<string | number> = [];\n  private donationInput?: HTMLInputElement;\n\n  /**\n   * The id of the product to which the options are going to be fetched for.\n   */\n  @Prop() productId: number = salla.config.get('page.id');\n\n  /**\n   * Product detail information.\n   */\n  @Prop() options: string;\n\n  /**\n   * Get the id's of the selected options.\n   * */\n  @Method()\n  async getSelectedOptionsData() {\n    let selectedOptions = {}\n    let formData = (this.host as any).getElementSallaData();\n    formData.forEach(function (value, key) {\n      key.startsWith('options[') && (selectedOptions[key.replace('options[', '').replace(']', '')] = value);\n    });\n    return selectedOptions;\n  }\n\n  /**\n   * Report options form validity.\n   * */\n  @Method()\n  async reportValidity() {\n    let requiredElements: Array<HTMLInputElement> = this.host.querySelectorAll('[required]') as any;\n    let pass = true;\n    for (let i = 0; i < requiredElements.length; i++) {\n      //if there is only one invalid option, return false\n      if ('reportValidity' in requiredElements[i] && !requiredElements[i].reportValidity()) {\n        pass = false;\n      }\n    }\n    return pass;\n  }\n\n  /**\n   * Return true if there is any out of stock options are selected and vise versa.\n   * */\n  @Method()\n  async hasOutOfStockOption() {\n    return this.selectedOptions.some(option => option.is_out) || (this.selectedSkus?.length && this.selectedSkus?.every(sku => this.outSkus.includes(sku)));\n  }\n\n  /**\n   * Get selected options.\n   * */\n  @Method()\n  async getSelectedOptions() {\n    return this.selectedOptions;\n  }\n\n  /**\n   * Get a specific option by its id.\n   * */\n  @Method()\n  async getOption(option_id) {\n    return this.optionsData.find(option => option.id === option_id);\n  }\n\n  /**\n   * An event that emitted when any option is changed.\n   */\n  @Event() changed: EventEmitter;\n\n  // @ts-ignore\n  private invalidHandler(event, option: Option) {\n    const closestProductOption = (event.target as HTMLInputElement).closest('.s-product-options-option') as HTMLElement;\n    if (!salla.url.is_page('cart')) {\n      closestProductOption.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    }\n    closestProductOption.classList.add('s-product-options-option-error');\n  }\n\n  private changedHandler(event, option) {\n    let data = { event: event, option: option, detail: null };\n    if (option.details) {\n      let detail = option.details.find((detail) => {\n        return Number(detail.id) === Number(event.target.value);\n      });\n      data.detail = detail\n    }\n\n    let optionElement = event.target.closest('.s-product-options-option');\n    if (event.target.value\n      || ((option.type == DisplayType.FILE || option.type == DisplayType.IMAGE) && event.type === 'added')\n      || (option.type == DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {\n      setTimeout(() => {\n        optionElement.classList.remove('s-product-options-option-error');\n      }, 200);\n    }\n\n    const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);\n    index > -1 ? this.selectedOptions[index] = {\n      ...data.detail,\n      option_id: data.option.id\n    } : this.selectedOptions.push({ ...data.detail, option_id: data.option.id })\n\n    if (option.type == DisplayType.DONATION) {\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n    }\n    this.setSelectedSkus();\n    this.handleRequiredMultipleOptions(option);\n    this.changed.emit(data);\n    salla.event.emit('product-options::change', data);\n  }\n\n\n  private handleDonationOptions = (event, detail, type) => {\n    if (detail == 'custom' && type == 'input') {\n      salla.helpers.inputDigitsOnly(event.target)\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    this.isCustomDonation = event.target.value === 'custom';\n    if (this.donationInput) {\n      if (event.target.value === 'custom') {\n        this.donationInput.value = '';\n        this.donationInput.focus()\n      } else {\n        this.donationInput.value = event.target.value;\n      }\n      if (detail == 'custom') {\n        return\n      }\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n    }\n  }\n\n  private hideLabel = (option) => {\n    if (option.type === DisplayType.DONATION && (option.donation && !option.donation.can_donate)) {\n      return true;\n    }\n    return false;\n  }\n\n  private getExpireDonationMessage = (option) => {\n    if (!option.donation) {\n      return;\n    }\n    let completed = option.donation.target_amount <= option.donation.collected_amount;\n    return <div class={{ \"s-product-options-donation-message\": true, \"s-product-options-donation-completed\": completed, \"s-product-options-donation-expired\": !completed }}>\n      <p>{option.donation.target_message}</p>\n      <span>{completed ? salla.money(option.donation.target_amount) : ''}</span>\n    </div>\n  }\n  /**\n   * loop throw all selected details, then get common sku, if it's only one, means we selected all of them;\n   */\n  private setSelectedSkus() {\n    this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))\n      .reduce((p, c) => p.filter(e => c.includes(e)))\n      .map(sku => Number(sku));\n  }\n\n  private handleRequiredMultipleOptions(option) {\n    if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {\n      return;\n    }\n    const optionContainer = this.host.querySelector(`[data-option-id=\"${option.id}\"]`);\n    const hasChecked = optionContainer.querySelectorAll('input:checked').length;\n    optionContainer.querySelectorAll('input').forEach(input => input.toggleAttribute('required', !hasChecked));\n  }\n\n  private getLatLng(value, type: 'lat' | 'lng') {\n    return value\n      ? value.split(',')[type == 'lat' ? 0 : 1]\n      : '';\n  }\n\n  private getDisplayForType(option: Option) {\n    if (this[`${option.type}Option`]) {\n      return this[`${option.type}Option`](option);\n    }\n\n    if (option.type === DisplayType.COLOR_PICKER) {\n      return this.colorPickerOption(option)\n    }\n\n    if (option.type === DisplayType.MULTIPLE_OPTIONS) {\n      return this.multipleOptions(option);\n    }\n\n    if (option.type === DisplayType.SINGLE_OPTION) {\n      return this.singleOption(option);\n    }\n    salla.log(`Couldn't find options type(${option.type})😢`);\n    return '';\n  }\n\n  protected getOptionShownWhen(option: Option) {\n    return option.visibility_condition\n      ? { \"data-show-when\": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }\n      : {};\n  }\n\n  //we need the cart Id for productOption Image\n  componentWillLoad() {\n    this.outOfStockText = salla.lang.get('pages.products.out_of_stock')\n    return salla.api.cart.getCurrentCartId();\n  }\n\n  componentDidRender() {\n      if (this.optionsData?.length == 0 && !this.optionsData.some(option => option.type == DisplayType.DONATION)) {\n        return;\n      }\n      let selectedDonationOption =  this.optionsData.find(option => option.type == DisplayType.DONATION)?.details.find(detail => detail.is_selected);\n      if (!selectedDonationOption) {\n        return;\n      }\n      setTimeout(() => {\n        salla.event.emit('product-options::donation-changed', {\n          id: this.productId,\n          price: selectedDonationOption.additional_price\n        });\n      }, 1000);\n  }\n\n  render() {\n    if (this.optionsData?.length == 0) {\n      return;\n    }\n\n    return (\n      <Host class=\"s-product-options-wrapper\">\n        {/* TODO:: move salla-conditional-field logic to here, no need of another component*/}\n        <salla-conditional-fields>\n          {this.optionsData.map((option: Option) =>\n            <div class={`s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`}\n              data-option-id={option.id}\n              {...this.getOptionShownWhen(option)}>\n              {option.name == 'splitter' ?\n                this.splitterOption()\n                : <div class=\"s-product-options-option\" data-option-type={option.type}\n                  data-option-required={`${option.required}`}>\n                  <label htmlFor={'options[' + option.id + ']'} class={`s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}`}>\n                    <b>\n                      {option.name}\n                      {option.required && <span> * </span>} </b>\n                    <small>{option.placeholder}</small>\n                  </label>\n                  <div class={`s-product-options-option-content ${this.hideLabel(option) ? 's-product-options-option-content-full-width' : ''}`}>\n                    {this.getDisplayForType(option)}\n                  </div>\n                </div>}\n            </div>\n          )}\n        </salla-conditional-fields>\n      </Host>\n    );\n\n  }\n\n  //@ts-ignore\n  private donationOption(option: Option, product: Product) {\n    return <div class=\"s-product-options-donation-wrapper\">\n\n      {option.donation?.can_donate ? [\n        option.donation ?\n          <div class=\"s-product-options-donation-progress\">\n            <salla-progress-bar donation={option.donation}>\n            </salla-progress-bar>\n          </div>\n          : '',\n        option.details.length ?\n          [<h4>{this.selectAmount}</h4>,\n          <div class=\"s-product-options-donation-options\">\n            {option.details.map((detail, i) =>\n              <div class=\"s-product-options-donation-options-item\">\n                <input id={`donation-option-${i}`} type=\"radio\" name=\"donating_option\" checked={detail.is_selected} value={detail.additional_price} onChange={e => this.handleDonationOptions(e, detail, 'option')} />\n                <label htmlFor={`donation-option-${i}`}>\n                  <span>{salla.money(detail.name)}</span>\n                </label>\n              </div>\n            )}\n            {option.donation?.custom_amount_enabled ?\n              <div class=\"s-product-options-donation-options-item\">\n                <input id={`donation-option-custom`} type=\"radio\" name=\"donating_option\" value=\"custom\" onChange={e => this.handleDonationOptions(e, 'custom', 'option')} />\n                <label htmlFor={`donation-option-custom`}>\n                  <span> {this.selectDonationAmount} </span>\n                </label>\n              </div>\n              : ''\n            }\n          </div>] : '',\n\n        <div class={{ \"s-product-options-donation-input-group\": true, \"shown\": !option.details.length || (option.details.length && this.isCustomDonation) }}>\n          <input\n            type=\"text\"\n            id=\"donating-amount\"\n            name=\"donation_amount\"\n            class=\"s-form-control\"\n            ref={el => this.donationInput = el as HTMLInputElement}\n            value={\n              option.details.length\n                && option.details.some(detail => detail.is_selected)\n                ? option.details.find(detail => detail.is_selected).additional_price\n                : option.value}\n            // required\n            placeholder={option.placeholder}\n            onInput={e => this.handleDonationOptions(e, 'custom', 'input')}\n            onBlur={e => this.changedHandler(e, option)}\n            onInvalid={(e) => this.invalidHandler(e, option)}\n          />\n          {/* value={option.value} */}\n          <span class=\"s-product-options-donation-amount-currency\">\n            {salla.config.currency(salla.config.get('user.currency_code')).symbol}\n          </span>\n        </div>\n      ] :\n        this.getExpireDonationMessage(option)\n      }\n    </div>\n  }\n\n  private fileUploader(option: Option, additions: Object | null = null) {\n    return <salla-file-upload\n      {...(additions || {})}\n      payload-name=\"file\"\n      value={option.value}\n      instant-upload={true}\n      name={`options[${option.id}]`}\n      required={!option.visibility_condition && option.required}\n      height=\"120px\"\n      onAdded={(e) => this.changedHandler(e, option)}\n      url={salla.cart.api.getUploadImageEndpoint()}\n      form-data={{ cart_item_id: this.productId, product_id: this.productId }}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      class={{ \"s-product-options-image-input\": true, required: option.required }}\n    >\n      <div class=\"s-product-options-filepond-placeholder\">\n        <span class=\"s-product-options-filepond-placeholder-icon\"\n          innerHTML={(additions as any).accept && (additions as any).accept.split(',').every(type => type.includes('image'))\n            ? CameraIcon\n            : FileIcon}\n        />\n        <p class=\"s-product-options-filepond-placeholder-text\">{salla.lang.get('common.uploader.drag_and_drop')}</p>\n        <span class=\"filepond--label-action\">{salla.lang.get('common.uploader.browse')}</span>\n      </div>\n    </salla-file-upload>\n  }\n\n  //@ts-ignore\n  private imageOption(option: Option) {\n    return this.fileUploader(option, { accept: 'image/png,image/jpeg,image/jpg,image/gif' });\n  }\n\n  //@ts-ignore\n  private fileOption(option: Option) {\n    let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);\n    return types?.length\n      ? this.fileUploader(option, { accept: types.join(',') })\n      : 'File types not selected.';\n  }\n\n  // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption\n  //@ts-ignore\n  private numberOption(option: Option) {\n    return <input\n      type=\"text\"\n      value={option.value}\n      class=\"s-form-control\"\n      required={!option.visibility_condition && option.required}\n      name={`options[${option.id}]`}\n      placeholder={option.placeholder}\n      onBlur={e => this.changedHandler(e, option)}\n      onInvalid={(e) => this.invalidHandler(e, option)}\n      onInput={e => salla.helpers.inputDigitsOnly(e.target)} />\n  }\n\n  //@ts-ignore\n  private splitterOption() {\n    return <div class=\"s-product-options-splitter\" />\n  }\n\n  //@ts-ignore\n  private textOption(option: Option) {\n    return <div class=\"s-product-options-text\">\n      <input\n        type=\"text\"\n        value={option.value}\n        class='s-form-control'\n        required={!option.visibility_condition && option.required}\n        name={`options[${option.id}]`}\n        placeholder={option.placeholder}\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onInput={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  //@ts-ignore\n  private textareaOption(option: Option) {\n    //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great\n    return <div class=\"s-product-options-textarea\">\n      <div class=\"mt-1\">\n        <textarea\n          rows={4}\n          value={option.value}\n          class=\"s-form-control\"\n          required={!option.visibility_condition && option.required}\n          id={`options[${option.id}]`}\n          name={`options[${option.id}]`}\n          placeholder={option.placeholder}\n          onInvalid={(e) => this.invalidHandler(e, option)}\n          onInput={(e) => this.changedHandler(e, option)} />\n      </div>\n    </div>\n  }\n\n  //@ts-ignore\n  private mapOption(option: Option) {\n    return <salla-map\n      zoom={15}\n      lat={this.getLatLng(option.value, 'lat')}\n      lng={this.getLatLng(option.value, 'lng')}\n      name={`options[${option.id}]`}\n      searchable={true}\n      required={option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onSelected={e => this.changedHandler(e, option)} />\n  }\n\n  private colorPickerOption(option: Option) {\n    return <salla-color-picker\n      onSubmitted={e => this.changedHandler(e, option)}\n      name={`options[${option.id}]`}\n      required={!option.visibility_condition && option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      color={option.value} />\n  }\n\n  /**\n   * ============= Date Time options =============\n   */\n  //@ts-ignore\n  private timeOption(option: Option) {\n    return <salla-datetime-picker\n      noCalendar={true}\n      enableTime={true}\n      dateFormat=\"h:i K\"\n      value={option.value}\n      placeholder={option.name}\n      required={!option.visibility_condition && option.required}\n      name={`options[${option.id}]`}\n      class=\"s-product-options-time-element\"\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onPicked={e => this.changedHandler(e, option)} />\n  }\n\n  //@ts-ignore\n  private dateOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-date-element\">\n      <salla-datetime-picker\n        value={option.value}\n        placeholder={option.name}\n        required={!option.visibility_condition && option.required}\n        minDate={new Date()}\n        name={`options[${option.id}]`}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  //@ts-ignore\n  private datetimeOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-datetime-element\">\n      <salla-datetime-picker\n        enableTime={true}\n        value={option.value}\n        dateFormat=\"Y-m-d G:i:K\"\n        placeholder={option.name}\n        required={!option.visibility_condition && option.required}\n        name={`options[${option.id}]`}\n        maxDate={option.to_date_time}\n        minDate={option.from_date_time}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  /**\n   * ============= Advanced options =============\n   */\n  protected getOptionDetailName(detail: Detail, outOfStock: boolean = true, optionType?: string) {\n    if (optionType && optionType == DisplayType.COLOR) {\n      return detail.name\n        + ((outOfStock && this.isOptionDetailOut(detail)) ? ` <br/> <p> ${this.outOfStockText} </p>` : '')\n        + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price)}) </p>` : '');\n    }\n\n    return detail.name\n      + ((outOfStock && this.isOptionDetailOut(detail)) ? ` - ${this.outOfStockText}` : '')\n      + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');\n  }\n\n\n  protected isOptionDetailOut(detail: Detail) {\n    if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {\n      return detail.is_out;\n    }\n\n    let isDetailSelected = this.selectedOptions.filter(option => option.id == detail.id).length;\n    //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet\n    if (isDetailSelected && this.selectedOptions.length == 1) {\n      return false;\n    }\n\n    //if current details has sku in the possible outSkus it's out for sure\n    if (isDetailSelected) {\n      //here we will get the possible outSkus for current selected options\n      let outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));\n      return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)))\n    }\n\n    return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id)\n\n  }\n\n  private singleOption(option: Option) {\n    return <div>\n      <select name={`options[${option.id}]`}\n        required={!option.visibility_condition && option.required}\n        class=\"s-form-control\"\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onChange={e => this.changedHandler(e, option)}>\n        <option value=\"\">{option.placeholder}</option>\n        {\n          option?.details.map((detail: Detail) => {\n            return <option value={detail.id} disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n              selected={detail.is_selected}>\n              {this.getOptionDetailName(detail)}\n            </option>\n          })\n        }\n      </select>\n    </div>\n  }\n\n  private multipleOptions(option: Option) {\n    let is_required = option.required && !option.details.some(detail => detail.is_selected) && !option.visibility_condition;\n    return <div class={{ \"s-product-options-multiple-options-wrapper\": true, 'required': option.required }}>\n      {\n        option?.details.map((detail: Detail) => {\n          return <div>\n            <input type=\"checkbox\"\n              value={detail.id}\n              disabled={this.isOptionDetailOut(detail)}\n              checked={detail.is_selected}\n              required={is_required}\n              name={`options[${option.id}][]`}\n              id={`field-${option.id}-${detail.id}`}\n              onChange={(e) => this.changedHandler(e, option)}\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              aria-describedby={`options[${option.id}]-description`} />\n            <label htmlFor={`field-${option.id}-${detail.id}`}>{this.getOptionDetailName(detail)}</label>\n          </div>\n        })\n      }\n    </div>\n  }\n\n  //@ts-ignore\n  private colorOption(option: Option) {\n    return <fieldset class=\"s-product-options-colors-wrapper\">\n      {\n        option?.details.map((detail) =>\n          <div class=\"s-product-options-colors-item\">\n            <input type=\"radio\"\n              value={detail.id}\n              required={!option.visibility_condition && option.required}\n              checked={detail.is_selected}\n              name={`options[${option.id}]`}\n              disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n              id={`color-${this.productId}-${option.id}-${detail.id}`}\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              onChange={e => this.changedHandler(e, option)} />\n            <label htmlFor={`color-${this.productId}-${option.id}-${detail.id}`}>\n              <span style={{ \"background-color\": detail.color }} />\n              <div innerHTML={this.getOptionDetailName(detail, true, option.type)}></div>\n            </label>\n          </div>\n        )\n      }\n    </fieldset>\n  }\n\n  //@ts-ignore\n  private thumbnailOption(option: Option) {\n    return <div class=\"s-product-options-thumbnails-wrapper\">\n      {option.details.map((detail: Detail) => {\n        return <div>\n          <input type=\"radio\"\n            value={detail.id}\n            data-itemid={detail.id} //todo:: why need this? it's already in the value!\n            required={!option.visibility_condition && option.required}\n            checked={detail.is_selected}\n            name={`options[${option.id}]`}\n            data-img-id={detail.option_value}\n            disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n            id={`option_${this.productId}-${option.id}_${detail.id}`}\n            onInvalid={(e) => this.invalidHandler(e, option)}\n            onChange={(e) => this.changedHandler(e, option)} />\n          <label htmlFor={`option_${this.productId}-${option.id}_${detail.id}`}\n            data-img-id={detail.option_value}\n            class=\"go-to-slide\">\n            <img data-src={detail.image} src={detail.image} title={detail.name} alt={detail.name} />\n            <span innerHTML={CheckCircleIcon} class=\"s-product-options-thumbnails-icon\" />\n            {this.isOptionDetailOut(detail) ?\n              [\n                <small class=\"s-product-options-thumbnails-stock-badge\">{this.outOfStockText}</small>,\n                this.canDisabled ? <div class=\"s-product-options-thumbnails-badge-overlay\" /> : '',\n              ]\n              : ''}\n          </label>\n          <p>{this.getOptionDetailName(detail, false)} </p>\n        </div>\n      })}\n    </div>\n  }\n}\n"],"mappings":"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"}

package/dist/twilight/{p-25656ae8.entry.js → p-c8c265d7.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{r as s,h as t,H as i,g as e}from"./p-dd9b5ccb.js";import{H as r}from"./p-75432730.js";const d="";const u=class{constructor(t){s(this,t);this.blockTitle=undefined;this.subTitle=undefined;this.sliderId=undefined;this.displayAllUrl=undefined;this.autoplay=undefined;this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.sliderConfig=undefined;this.productCardComponent="custom-salla-product-card";this.productsData=undefined;this.isReady=undefined;this.sourceValueIsValid=undefined;this.hasCustomComponent=undefined;this.apiUrl="";this.parsedSourceValue=undefined}componentWillLoad(){return r.onSallaReadyPromise((s=>{this.sourceValueIsValid=!!(this.getSourceValue()||this.isSourceWithoutValue());if(!this.sourceValueIsValid){salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);return s(true)}this.hasCustomComponent=!!customElements.get(this.productCardComponent);if(this.source==="json"){this.productsData=this.getSourceValue();this.isReady=true;return s(true)}if(this.getSource()=="related"&&!salla.config.get("store.settings.product.related_products_enabled")){this.isReady=false;return s(true)}return r.fetchProducts(this.getSource(),this.getSourceValue(),this.limit).then((t=>{this.productsData=t.data;this.isReady=true;salla.event.emit("salla-products-slider::products.fetched",t.data);s(t)}))}))}isSourceWithoutValue(){return["offers","latest","sales"].includes(this.getSource())}getItemHTML(s){this.getSource()==="landing-page"&&(s.url="");if(this.hasCustomComponent&&this.productCardComponent.toLowerCase()=="custom-salla-product-card"){return t("div",{class:"s-products-slider-card"},t("custom-salla-product-card",{product:s,source:this.getSource(),"source-value":this.getSourceValue()}))}if(this.hasCustomComponent){const i=document.createElement(this.productCardComponent);i.setAttribute("product",JSON.stringify(s));i.setAttribute("source",this.getSource());i.setAttribute("source-value",this.getSourceValue());return t("div",{class:"s-products-slider-card",innerHTML:i.outerHTML})}return t("div",{class:"s-products-slider-card"},t("salla-product-card",{"show-quantity":this.getSource()=="landing-page","hide-add-btn":this.getSource()=="landing-page","shadow-on-hover":true,product:s}))}canRender(){return this.sourceValueIsValid&&this.isReady}getSource(){return r.getProductsSource(this.source)}getSourceValue(){return r.getProductsSourceValue(this.source,this.sourceValue)}render(){var s;if(!this.canRender()){return}return t(i,{class:"s-products-slider-wrapper"},t("salla-slider",{class:"s-products-slider-slider",id:this.sliderId||`s-products-slider-${Math.random().toString(36).substr(2,9)}`,"auto-play":this.autoplay,type:"carousel","block-title":this.blockTitle,"block-subTitle":this.subTitle,"display-all-url":this.displayAllUrl,sliderConfig:this.sliderConfig?this.sliderConfig:null},t("div",{slot:"items"},(s=this.productsData)===null||s===void 0?void 0:s.map((s=>this.getItemHTML(s))))))}get host(){return e(this)}};u.style=d;export{u as salla_products_slider};
-//# sourceMappingURL=p-25656ae8.entry.js.map
+import{r as s,h as t,H as i,g as e}from"./p-294dad80.js";import{H as r}from"./p-75432730.js";const d="";const u=class{constructor(t){s(this,t);this.blockTitle=undefined;this.subTitle=undefined;this.sliderId=undefined;this.displayAllUrl=undefined;this.autoplay=undefined;this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.sliderConfig=undefined;this.productCardComponent="custom-salla-product-card";this.productsData=undefined;this.isReady=undefined;this.sourceValueIsValid=undefined;this.hasCustomComponent=undefined;this.apiUrl="";this.parsedSourceValue=undefined}componentWillLoad(){return r.onSallaReadyPromise((s=>{this.sourceValueIsValid=!!(this.getSourceValue()||this.isSourceWithoutValue());if(!this.sourceValueIsValid){salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);return s(true)}this.hasCustomComponent=!!customElements.get(this.productCardComponent);if(this.source==="json"){this.productsData=this.getSourceValue();this.isReady=true;return s(true)}if(this.getSource()=="related"&&!salla.config.get("store.settings.product.related_products_enabled")){this.isReady=false;return s(true)}return r.fetchProducts(this.getSource(),this.getSourceValue(),this.limit).then((t=>{this.productsData=t.data;this.isReady=true;salla.event.emit("salla-products-slider::products.fetched",t.data);s(t)}))}))}isSourceWithoutValue(){return["offers","latest","sales"].includes(this.getSource())}getItemHTML(s){this.getSource()==="landing-page"&&(s.url="");if(this.hasCustomComponent&&this.productCardComponent.toLowerCase()=="custom-salla-product-card"){return t("div",{class:"s-products-slider-card"},t("custom-salla-product-card",{product:s,source:this.getSource(),"source-value":this.getSourceValue()}))}if(this.hasCustomComponent){const i=document.createElement(this.productCardComponent);i.setAttribute("product",JSON.stringify(s));i.setAttribute("source",this.getSource());i.setAttribute("source-value",this.getSourceValue());return t("div",{class:"s-products-slider-card",innerHTML:i.outerHTML})}return t("div",{class:"s-products-slider-card"},t("salla-product-card",{"show-quantity":this.getSource()=="landing-page","hide-add-btn":this.getSource()=="landing-page","shadow-on-hover":true,product:s}))}canRender(){return this.sourceValueIsValid&&this.isReady}getSource(){return r.getProductsSource(this.source)}getSourceValue(){return r.getProductsSourceValue(this.source,this.sourceValue)}render(){var s;if(!this.canRender()){return}return t(i,{class:"s-products-slider-wrapper"},t("salla-slider",{class:"s-products-slider-slider",id:this.sliderId||`s-products-slider-${Math.random().toString(36).substr(2,9)}`,"auto-play":this.autoplay,type:"carousel","block-title":this.blockTitle,"block-subTitle":this.subTitle,"display-all-url":this.displayAllUrl,sliderConfig:this.sliderConfig?this.sliderConfig:null},t("div",{slot:"items"},(s=this.productsData)===null||s===void 0?void 0:s.map((s=>this.getItemHTML(s))))))}get host(){return e(this)}};u.style=d;export{u as salla_products_slider};
+//# sourceMappingURL=p-c8c265d7.entry.js.map

package/dist/twilight/{p-9a7f3e65.system.entry.js → p-d1b7315f.system.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Crafted with ❤ by Salla
  */
-System.register(["./p-548cb28d.system.js"],(function(i){"use strict";var t,n;return{setters:[function(i){t=i.r;n=i.h}],execute:function(){var s="";var o=i("salla_notification_item",function(){function i(i){t(this,i);this.notification=undefined}i.prototype.render=function(){return n("a",{href:this.notification.url,class:{"s-notifications-item":true,"s-notifications-item-read":!this.notification.is_new}},n("span",{class:"s-notifications-item-icon"},n("i",{class:{"s-notifications-item-icon sicon-bell-ring":true,"s-notifications-item-icon-new":this.notification.is_new}})),n("div",{class:"s-notifications-item-content"},n("div",{class:"s-notifications-item-content-leading"},n("h4",null,this.notification.title),n("p",null,this.notification.sub_title)),n("span",{class:"s-notifications-item-content-trailing"},n("i",{class:"sicon-time s-notifications-item-content-trailing-icon"}),n("span",null,this.notification.date))))};return i}());o.style=s}}}));
-//# sourceMappingURL=p-9a7f3e65.system.entry.js.map
+System.register(["./p-eebd57c0.system.js"],(function(i){"use strict";var t,n;return{setters:[function(i){t=i.r;n=i.h}],execute:function(){var s="";var o=i("salla_notification_item",function(){function i(i){t(this,i);this.notification=undefined}i.prototype.render=function(){return n("a",{href:this.notification.url,class:{"s-notifications-item":true,"s-notifications-item-read":!this.notification.is_new}},n("span",{class:"s-notifications-item-icon"},n("i",{class:{"s-notifications-item-icon sicon-bell-ring":true,"s-notifications-item-icon-new":this.notification.is_new}})),n("div",{class:"s-notifications-item-content"},n("div",{class:"s-notifications-item-content-leading"},n("h4",null,this.notification.title),n("p",null,this.notification.sub_title)),n("span",{class:"s-notifications-item-content-trailing"},n("i",{class:"sicon-time s-notifications-item-content-trailing-icon"}),n("span",null,this.notification.date))))};return i}());o.style=s}}}));
+//# sourceMappingURL=p-d1b7315f.system.entry.js.map

package/dist/twilight/{p-041f94a6.entry.js → p-d41dfff7.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{r as t,c as i,h as s,H as e}from"./p-dd9b5ccb.js";const l="salla-loyalty-prize-item:hover{-webkit-box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important;box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important}";const a=class{constructor(s){t(this,s);this.prizeItemSelected=i(this,"prizeItemSelected",7);this.item=undefined}onPrizeItemClick(){this.prizeItemSelected.emit(this.item)}render(){return s(e,null,s("div",{onClick:this.onPrizeItemClick.bind(this)},s("img",{class:"s-loyalty-prize-item-image",src:this.item.image,alt:this.item.name}),s("div",{class:"s-loyalty-prize-item-title"},this.item.name),s("div",{class:"s-loyalty-prize-item-subtitle"},this.item.description),s("div",{class:"s-loyalty-prize-item-points"},this.item.cost_points," Points")))}};a.style=l;export{a as salla_loyalty_prize_item};
-//# sourceMappingURL=p-041f94a6.entry.js.map
+import{r as t,c as i,h as s,H as e}from"./p-294dad80.js";const l="salla-loyalty-prize-item:hover{-webkit-box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important;box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important}";const a=class{constructor(s){t(this,s);this.prizeItemSelected=i(this,"prizeItemSelected",7);this.item=undefined}onPrizeItemClick(){this.prizeItemSelected.emit(this.item)}render(){return s(e,null,s("div",{onClick:this.onPrizeItemClick.bind(this)},s("img",{class:"s-loyalty-prize-item-image",src:this.item.image,alt:this.item.name}),s("div",{class:"s-loyalty-prize-item-title"},this.item.name),s("div",{class:"s-loyalty-prize-item-subtitle"},this.item.description),s("div",{class:"s-loyalty-prize-item-points"},this.item.cost_points," Points")))}};a.style=l;export{a as salla_loyalty_prize_item};
+//# sourceMappingURL=p-d41dfff7.entry.js.map

package/dist/twilight/{p-3d58cecc.entry.js → p-d5e825e0.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{r as s,h as i,H as t,g as a}from"./p-dd9b5ccb.js";const l=":host{display:block}";const e=class{constructor(i){s(this,i);var t,a,l;this.payments=salla.config.get("store.settings.payments");this.placeholderImage=salla.url.cdn(`images/s-empty.png`);this.withSbc=undefined;this.sbcId=undefined;this.withMadeInKsa=undefined;this.paymentSlot=((t=this.host.querySelector('[slot="payment"]'))===null||t===void 0?void 0:t.innerHTML)||`<li class="s-payments-list-item"><img class="lazy" width="100%" height="100%" src="${this.placeholderImage}" data-src="{image}" alt={name} /><li>`;this.sbcSlot=((a=this.host.querySelector('[slot="sbc"]'))===null||a===void 0?void 0:a.innerHTML)||`<li class="s-payments-list-item"><a target="_blank" href="{link}"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy s-payments-sbc-image" alt="SBC"/></a><li>`;this.codSlot=((l=this.host.querySelector('[slot="cod"]'))===null||l===void 0?void 0:l.innerHTML)||`<li class="s-payments-list-item"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy" alt="COD"/><li>`;salla.onReady((()=>{this.payments=salla.config.get("store.settings.payments");this.placeholderImage=salla.url.cdn(`images/s-empty.png`)}))}render(){return i(t,{class:"s-payments-list"},this.withMadeInKsa&&i("li",{class:"s-payments-list-item"},i("img",{class:"lazy",width:"100%",height:"100%",decoding:"async",loading:"lazy","data-src":salla.url.cdn(`images/made-in-ksa.svg`),alt:"made in KSA certified"})),this.payments.map((s=>i("div",{id:"payment-slot",innerHTML:this.paymentSlot.replace(/\{image\}/g,salla.url.cdn(`images/payment/${s}_mini.png`)).replace(/\{payment\}/g,s)}))),i("div",{id:"cod-slot",innerHTML:this.codSlot.replace(/\{image\}/g,salla.url.cdn(`images/payment/cod_mini.png`))}),this.withSbc&&this.sbcId&&i("div",{id:"sbc-slot",innerHTML:this.sbcSlot.replace(/\{image\}/g,salla.url.cdn(`images/sbc.png`)).replace(/\{link\}/g,`https://eauthenticate.saudibusiness.gov.sa/certificate-details/${this.sbcId}`)}))}componentDidLoad(){var s;(s=document.lazyLoadInstance)===null||s===void 0?void 0:s.update(this.host.querySelectorAll(".lazy"));this.host.querySelectorAll(".lazy").forEach((s=>{s.addEventListener("load",(()=>{s.setAttribute("width","100%");s.setAttribute("height","100%")}))}))}componentDidRender(){var s,i,t;this.host.querySelectorAll("#payment-slot").forEach((s=>s.replaceWith(s.firstChild)));this.host.querySelectorAll("#sbc-slot").forEach((s=>s.replaceWith(s.firstChild)));this.host.querySelectorAll("#cod-slot").forEach((s=>s.replaceWith(s.firstChild)));(s=this.host.querySelector('[slot="payment"]'))===null||s===void 0?void 0:s.remove();(i=this.host.querySelector('[slot="sbc"]'))===null||i===void 0?void 0:i.remove();(t=this.host.querySelector('[slot="cod"]'))===null||t===void 0?void 0:t.remove()}get host(){return a(this)}};e.style=l;export{e as salla_payments};
-//# sourceMappingURL=p-3d58cecc.entry.js.map
+import{r as s,h as i,H as t,g as a}from"./p-294dad80.js";const l=":host{display:block}";const e=class{constructor(i){s(this,i);var t,a,l;this.payments=salla.config.get("store.settings.payments");this.placeholderImage=salla.url.cdn(`images/s-empty.png`);this.withSbc=undefined;this.sbcId=undefined;this.withMadeInKsa=undefined;this.paymentSlot=((t=this.host.querySelector('[slot="payment"]'))===null||t===void 0?void 0:t.innerHTML)||`<li class="s-payments-list-item"><img class="lazy" width="100%" height="100%" src="${this.placeholderImage}" data-src="{image}" alt={name} /><li>`;this.sbcSlot=((a=this.host.querySelector('[slot="sbc"]'))===null||a===void 0?void 0:a.innerHTML)||`<li class="s-payments-list-item"><a target="_blank" href="{link}"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy s-payments-sbc-image" alt="SBC"/></a><li>`;this.codSlot=((l=this.host.querySelector('[slot="cod"]'))===null||l===void 0?void 0:l.innerHTML)||`<li class="s-payments-list-item"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy" alt="COD"/><li>`;salla.onReady((()=>{this.payments=salla.config.get("store.settings.payments");this.placeholderImage=salla.url.cdn(`images/s-empty.png`)}))}render(){return i(t,{class:"s-payments-list"},this.withMadeInKsa&&i("li",{class:"s-payments-list-item"},i("img",{class:"lazy",width:"100%",height:"100%",decoding:"async",loading:"lazy","data-src":salla.url.cdn(`images/made-in-ksa.svg`),alt:"made in KSA certified"})),this.payments.map((s=>i("div",{id:"payment-slot",innerHTML:this.paymentSlot.replace(/\{image\}/g,salla.url.cdn(`images/payment/${s}_mini.png`)).replace(/\{payment\}/g,s)}))),i("div",{id:"cod-slot",innerHTML:this.codSlot.replace(/\{image\}/g,salla.url.cdn(`images/payment/cod_mini.png`))}),this.withSbc&&this.sbcId&&i("div",{id:"sbc-slot",innerHTML:this.sbcSlot.replace(/\{image\}/g,salla.url.cdn(`images/sbc.png`)).replace(/\{link\}/g,`https://eauthenticate.saudibusiness.gov.sa/certificate-details/${this.sbcId}`)}))}componentDidLoad(){var s;(s=document.lazyLoadInstance)===null||s===void 0?void 0:s.update(this.host.querySelectorAll(".lazy"));this.host.querySelectorAll(".lazy").forEach((s=>{s.addEventListener("load",(()=>{s.setAttribute("width","100%");s.setAttribute("height","100%")}))}))}componentDidRender(){var s,i,t;this.host.querySelectorAll("#payment-slot").forEach((s=>s.replaceWith(s.firstChild)));this.host.querySelectorAll("#sbc-slot").forEach((s=>s.replaceWith(s.firstChild)));this.host.querySelectorAll("#cod-slot").forEach((s=>s.replaceWith(s.firstChild)));(s=this.host.querySelector('[slot="payment"]'))===null||s===void 0?void 0:s.remove();(i=this.host.querySelector('[slot="sbc"]'))===null||i===void 0?void 0:i.remove();(t=this.host.querySelector('[slot="cod"]'))===null||t===void 0?void 0:t.remove()}get host(){return a(this)}};e.style=l;export{e as salla_payments};
+//# sourceMappingURL=p-d5e825e0.entry.js.map

package/dist/twilight/{p-37d0c076.entry.js → p-e218f9e3.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{r as t,h as s,g as i}from"./p-dd9b5ccb.js";import{a}from"./p-5a803ecc.js";const e=":host{display:block}";const l=class{constructor(s){t(this,s);var i;this.position=undefined;this.advertisements=undefined;this.advertIcon=undefined;this.currentSlug=salla.config.get("page.slug");salla.onReady((()=>{this.currentSlug=salla.config.get("page.slug")}));this.advSlot=((i=this.host.querySelector('[slot="adv"]'))===null||i===void 0?void 0:i.innerHTML)||`<div class="s-advertisement-content"><h2 class="s-advertisement-content-main">{iconElem}{urlElem}</h2>{closeElem}</div>\n    `}isNotVisible(t){return!!salla.storage.get(`statusAd-${t.id}`)}setCanDisplayFlag(t,s){if(!s){salla.storage.set(`statusAd-${t.id}`,"dismissed");a({targets:this.host,opacity:[1,0],duration:300,height:[this.host.clientHeight,0],easing:"easeInOutQuad"})}}render(){if(Array.isArray(this.advertisements)&&!this.advertisements.length||!this.advertisements){return}return this.advertisements.map((t=>s("div",{class:{"s-hidden":this.isNotVisible(t),"s-advertisement":true},"data-id":t.id,style:{"background-color":t.colors.bg,color:t.colors.text}},s("div",{id:"adv-slot",innerHTML:this.advSlot.replace("{iconElem}",`<i class="s-advertisement-content-icon ${t.icon}"></i>`).replace("{urlElem}",t.url?`<a href="${t.url}" target="${t.target}">${t.description}</a>`:t.description).replace("{closeElem}",`<button class="s-advertisement-action" aria-label="close-alert"><i class="sicon-cancel"></i></button>`).replace("{icon}",t.icon).replace("{url}",t.url).replace("{target}",t.target).replace("{description}",t.description).replace("{bg_color}",t.colors.bg).replace("{text_color}",t.colors.text)}))))}async componentWillLoad(){await salla.api.advertisement.fetch(this.currentSlug).then((t=>{let s=t.data;if(Array.isArray(s)&&s.length>0){for(const t of s){if(!salla.storage.get(`statusAd-${t.id}`)){this.advertisements=[t];break}}}}))}componentDidRender(){var t;if(Array.isArray(this.advertisements)&&!this.advertisements.length||!this.advertisements){return}setTimeout((()=>{let t=this.host.querySelector(".s-advertisement-action");if(t){t.addEventListener("click",(()=>this.setCanDisplayFlag(this.advertisements[0],false)))}}));this.host.querySelectorAll("#adv-slot").forEach((t=>t===null||t===void 0?void 0:t.replaceWith(t===null||t===void 0?void 0:t.firstChild)));(t=this.host.querySelector('[slot="adv"]'))===null||t===void 0?void 0:t.remove();a({targets:this.host,opacity:[0,1],duration:300,height:[0,this.host.clientHeight],easing:"easeInOutQuad"})}get host(){return i(this)}};l.style=e;export{l as salla_advertisement};
-//# sourceMappingURL=p-37d0c076.entry.js.map
+import{r as t,h as s,g as i}from"./p-294dad80.js";import{a}from"./p-5a803ecc.js";const e=":host{display:block}";const l=class{constructor(s){t(this,s);var i;this.position=undefined;this.advertisements=undefined;this.advertIcon=undefined;this.currentSlug=salla.config.get("page.slug");salla.onReady((()=>{this.currentSlug=salla.config.get("page.slug")}));this.advSlot=((i=this.host.querySelector('[slot="adv"]'))===null||i===void 0?void 0:i.innerHTML)||`<div class="s-advertisement-content"><h2 class="s-advertisement-content-main">{iconElem}{urlElem}</h2>{closeElem}</div>\n    `}isNotVisible(t){return!!salla.storage.get(`statusAd-${t.id}`)}setCanDisplayFlag(t,s){if(!s){salla.storage.set(`statusAd-${t.id}`,"dismissed");a({targets:this.host,opacity:[1,0],duration:300,height:[this.host.clientHeight,0],easing:"easeInOutQuad"})}}render(){if(Array.isArray(this.advertisements)&&!this.advertisements.length||!this.advertisements){return}return this.advertisements.map((t=>s("div",{class:{"s-hidden":this.isNotVisible(t),"s-advertisement":true},"data-id":t.id,style:{"background-color":t.colors.bg,color:t.colors.text}},s("div",{id:"adv-slot",innerHTML:this.advSlot.replace("{iconElem}",`<i class="s-advertisement-content-icon ${t.icon}"></i>`).replace("{urlElem}",t.url?`<a href="${t.url}" target="${t.target}">${t.description}</a>`:t.description).replace("{closeElem}",`<button class="s-advertisement-action" aria-label="close-alert"><i class="sicon-cancel"></i></button>`).replace("{icon}",t.icon).replace("{url}",t.url).replace("{target}",t.target).replace("{description}",t.description).replace("{bg_color}",t.colors.bg).replace("{text_color}",t.colors.text)}))))}async componentWillLoad(){await salla.api.advertisement.fetch(this.currentSlug).then((t=>{let s=t.data;if(Array.isArray(s)&&s.length>0){for(const t of s){if(!salla.storage.get(`statusAd-${t.id}`)){this.advertisements=[t];break}}}}))}componentDidRender(){var t;if(Array.isArray(this.advertisements)&&!this.advertisements.length||!this.advertisements){return}setTimeout((()=>{let t=this.host.querySelector(".s-advertisement-action");if(t){t.addEventListener("click",(()=>this.setCanDisplayFlag(this.advertisements[0],false)))}}));this.host.querySelectorAll("#adv-slot").forEach((t=>t===null||t===void 0?void 0:t.replaceWith(t===null||t===void 0?void 0:t.firstChild)));(t=this.host.querySelector('[slot="adv"]'))===null||t===void 0?void 0:t.remove();a({targets:this.host,opacity:[0,1],duration:300,height:[0,this.host.clientHeight],easing:"easeInOutQuad"})}get host(){return i(this)}};l.style=e;export{l as salla_advertisement};
+//# sourceMappingURL=p-e218f9e3.entry.js.map

package/dist/twilight/{p-2768c606.entry.js → p-e6bb10f0.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{r as i,h as t}from"./p-dd9b5ccb.js";const s="";const n=class{constructor(t){i(this,t);this.notification=undefined}render(){return t("a",{href:this.notification.url,class:{"s-notifications-item":true,"s-notifications-item-read":!this.notification.is_new}},t("span",{class:"s-notifications-item-icon"},t("i",{class:{"s-notifications-item-icon sicon-bell-ring":true,"s-notifications-item-icon-new":this.notification.is_new}})),t("div",{class:"s-notifications-item-content"},t("div",{class:"s-notifications-item-content-leading"},t("h4",null,this.notification.title),t("p",null,this.notification.sub_title)),t("span",{class:"s-notifications-item-content-trailing"},t("i",{class:"sicon-time s-notifications-item-content-trailing-icon"}),t("span",null,this.notification.date))))}};n.style=s;export{n as salla_notification_item};
-//# sourceMappingURL=p-2768c606.entry.js.map
+import{r as i,h as t}from"./p-294dad80.js";const s="";const n=class{constructor(t){i(this,t);this.notification=undefined}render(){return t("a",{href:this.notification.url,class:{"s-notifications-item":true,"s-notifications-item-read":!this.notification.is_new}},t("span",{class:"s-notifications-item-icon"},t("i",{class:{"s-notifications-item-icon sicon-bell-ring":true,"s-notifications-item-icon-new":this.notification.is_new}})),t("div",{class:"s-notifications-item-content"},t("div",{class:"s-notifications-item-content-leading"},t("h4",null,this.notification.title),t("p",null,this.notification.sub_title)),t("span",{class:"s-notifications-item-content-trailing"},t("i",{class:"sicon-time s-notifications-item-content-trailing-icon"}),t("span",null,this.notification.date))))}};n.style=s;export{n as salla_notification_item};
+//# sourceMappingURL=p-e6bb10f0.entry.js.map

package/dist/twilight/{p-89564b2e.entry.js → p-e7aa06ff.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{r as s,h as a,H as t,g as i}from"./p-dd9b5ccb.js";const e=":host{display:block}";const l=class{constructor(a){s(this,a);var t;this.apps=salla.config.get("store.apps");this.hideTitle=undefined;this.appsTitle=undefined;this.vertical=undefined;this.appSlot=((t=this.host.querySelector('[slot="app"]'))===null||t===void 0?void 0:t.innerHTML)||`<img alt={name} src={icon} />`;salla.onReady((()=>{this.apps=salla.config.get("store.apps")}));salla.lang.onLoaded((()=>{this.appsTitle=salla.lang.get("blocks.footer.download_apps")}))}getAppsArray(){return Object.entries(this.apps).map((([s,a])=>({name:s,value:a})))}render(){const s=this.getAppsArray();if(Array.isArray(s)&&!s.length){return}return a(t,{class:"s-apps-icons"},!this.hideTitle&&a("h3",null,this.appsTitle),a("div",{class:{"s-apps-icons-list":true,vertical:this.vertical}},s.map(((s,t)=>a("a",{key:t,href:s.value,rel:"noreferrer",target:"_blank",class:"s-apps-icons-item",id:"app-slot",innerHTML:this.appSlot.replace(/\{icon\}/g,salla.url.cdn(`images/${s.name}.png`)).replace(/\{name\}/g,s.name)})))))}componentDidRender(){var s;(s=this.host.querySelector('[slot="app"]'))===null||s===void 0?void 0:s.remove()}get host(){return i(this)}};l.style=e;export{l as salla_apps_icons};
-//# sourceMappingURL=p-89564b2e.entry.js.map
+import{r as s,h as a,H as t,g as i}from"./p-294dad80.js";const e=":host{display:block}";const l=class{constructor(a){s(this,a);var t;this.apps=salla.config.get("store.apps");this.hideTitle=undefined;this.appsTitle=undefined;this.vertical=undefined;this.appSlot=((t=this.host.querySelector('[slot="app"]'))===null||t===void 0?void 0:t.innerHTML)||`<img alt={name} src={icon} />`;salla.onReady((()=>{this.apps=salla.config.get("store.apps")}));salla.lang.onLoaded((()=>{this.appsTitle=salla.lang.get("blocks.footer.download_apps")}))}getAppsArray(){return Object.entries(this.apps).map((([s,a])=>({name:s,value:a})))}render(){const s=this.getAppsArray();if(Array.isArray(s)&&!s.length){return}return a(t,{class:"s-apps-icons"},!this.hideTitle&&a("h3",null,this.appsTitle),a("div",{class:{"s-apps-icons-list":true,vertical:this.vertical}},s.map(((s,t)=>a("a",{key:t,href:s.value,rel:"noreferrer",target:"_blank",class:"s-apps-icons-item",id:"app-slot",innerHTML:this.appSlot.replace(/\{icon\}/g,salla.url.cdn(`images/${s.name}.png`)).replace(/\{name\}/g,s.name)})))))}componentDidRender(){var s;(s=this.host.querySelector('[slot="app"]'))===null||s===void 0?void 0:s.remove()}get host(){return i(this)}};l.style=e;export{l as salla_apps_icons};
+//# sourceMappingURL=p-e7aa06ff.entry.js.map

package/dist/twilight/{p-a54fbc9b.system.entry.js → p-ed382e13.system.entry.js}

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(e,t,r,i){function n(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,o){function a(e){try{l(i.next(e))}catch(e){o(e)}}function s(e){try{l(i["throw"](e))}catch(e){o(e)}}function l(e){e.done?r(e.value):n(e.value).then(a,s)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,n,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(r=0)),r)try{if(i=1,n&&(o=s[0]&2?n["return"]:s[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;if(n=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;n=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){r.label=s[1];break}if(s[0]===6&&r.label<o[1]){r.label=o[1];o=s;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(s);break}if(o[2])r.ops.pop();r.trys.pop();continue}s=t.call(e,r)}catch(e){s=[6,e];n=0}finally{i=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};
 /*!
  * Crafted with ❤ by Salla
- */System.register(["./p-548cb28d.system.js","./p-8f7b9e36.system.js","./p-9e0b1704.system.js"],(function(e){"use strict";var t,r,i,n,o,a,s;return{setters:[function(e){t=e.r;r=e.c;i=e.h;n=e.H;o=e.g},function(e){a=e.a},function(e){s=e.H}],execute:function(){var l='\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>shopping-bag</title>\n<path d="M28 10.667h-4v-2.667c0-4.412-3.588-8-8-8s-8 3.588-8 8v2.667h-4c-0.736 0-1.333 0.596-1.333 1.333v13.333c0 3.676 2.991 6.667 6.667 6.667h13.333c3.676 0 6.667-2.991 6.667-6.667v-13.333c0-0.737-0.597-1.333-1.333-1.333zM10.667 8c0-2.941 2.392-5.333 5.333-5.333s5.333 2.392 5.333 5.333v2.667h-10.667zM26.667 25.333c0 2.205-1.795 4-4 4h-13.333c-2.205 0-4-1.795-4-4v-12h2.667v2.667c0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-2.667h10.667v2.667c0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-2.667h2.667z"></path>\n</svg>\n';var c="";var u=e("salla_products_list",function(){function e(e){var i=this;t(this,e);this.productsFetched=r(this,"productsFetched",7);this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.sortBy=undefined;this.filtersResults=undefined;this.horizontalCards=undefined;this.autoload=false;this.loadMoreText=undefined;this.productCardComponent="custom-salla-product-card";this.page=1;this.nextPage=undefined;this.hasInfiniteScroll=undefined;this.hasCustomComponent=undefined;this.sourceValueIsValid=undefined;this.placeholderText=salla.lang.get("pages.categories.no_products");this.endOfText=salla.lang.get("common.elements.end_of_content");this.failedLoadMore=salla.lang.get("common.elements.failed_to_load_more");this.currentPage=salla.config.get("page");this.currentCategoryIdFilter=undefined;this.isReady=undefined;this.showPlaceholder=undefined;this.parsedFilters=undefined;salla.lang.onLoaded((function(){i.placeholderText=salla.lang.get("pages.categories.no_products");i.endOfText=salla.lang.get("common.elements.end_of_content");i.failedLoadMore=salla.lang.get("common.elements.failed_to_load_more")}))}e.prototype.connectedCallback=function(){var e=this;salla.event.on("salla-filters::changed",(function(t){return e.setFilters(t)}))};e.prototype.setFilters=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!e||JSON.stringify(e)===JSON.stringify(this.parsedFilters)){return[2]}window.scrollTo({top:0,behavior:"smooth"});this.parsedFilters=JSON.parse(JSON.stringify(e));if(this.currentPage.slug=="product.index"&&this.parsedFilters&&this.parsedFilters.category_id){this.currentCategoryIdFilter=[this.parsedFilters.category_id]}return[2,this.reload()]}))}))};e.prototype.reload=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){!this.autoload&&this.loadMoreWrapper&&(this.loadMoreWrapper.style.display="none");this.hasInfiniteScroll&&salla.infiniteScroll.destroy(this.infiniteScroll);this.buildNextPageUrl();this.wrapper.innerHTML="";if(this.hasInfiniteScroll){this.init()}else{this.getInitialData()}if(this.showPlaceholder){this.showPlaceholder=false;this.placeholderLoader=document.createElement("div");this.placeholderLoader.classList.add("s-products-list-loading-wrapper");this.placeholderLoader.style.display="inherit";this.placeholderLoader.innerHTML='<span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader"></span>';this.host.insertAdjacentElement("afterend",this.placeholderLoader)}return[2]}))}))};e.prototype.isFilterable=function(){return salla.config.get("store.settings.product.filters")&&this.filtersResults};e.prototype.isSourceWithoutValue=function(){return["offers","latest","sales"].includes(this.getSource())};e.prototype.animateItems=function(){a({targets:"salla-products-list salla-product-card",opacity:[0,1],duration:1200,translateY:[20,0],delay:function(e,t){return t*100}})};e.prototype.initBaseNextPageUrl=function(e){var t=this;this.nextPage=salla.url.api("products?source=".concat(e));if(this.limit){this.nextPage+="&per_page=".concat(this.limit>32?32:this.limit)}if(this.sortBy){this.nextPage+="&sort=".concat(this.sortBy)}this.nextPage+="&filterable=1";var r=function(e,r){if(["string","number"].includes(typeof r)){i.nextPage+="&filters[".concat(encodeURIComponent(e),"]=").concat(encodeURIComponent(r))}else if(Array.isArray(r)){r.forEach((function(r){return t.nextPage+="&filters[".concat(encodeURIComponent(e),"][]=").concat(encodeURIComponent(r))}))}else if(typeof r==="object"){for(var n=0,o=Object.entries(r);n<o.length;n++){var a=o[n],s=a[0],l=a[1];i.nextPage+="&filters[".concat(encodeURIComponent(e),"][").concat(encodeURIComponent(s),"]=").concat(encodeURIComponent(l))}}};var i=this;for(var n=0,o=Object.entries(this.parsedFilters||{});n<o.length;n++){var a=o[n],s=a[0],l=a[1];r(s,l)}};e.prototype.buildNextPageUrl=function(){var e=this.getSource();if(e==="json"){return}this.initBaseNextPageUrl(e);if(this.isSourceWithoutValue()){return}if(["search","related","landing-page"].includes(e)){this.nextPage+="&source_value=".concat(this.getSourceValue());return}try{this.nextPage+="&source_value[]=".concat(this.getSourceValue().join("&source_value[]="))}catch(t){salla.logger.warn('source-value prop should be array of ids ex source-value="[1,2,3]" for the source ['.concat(e,"]"));this.sourceValueIsValid=false}};e.prototype.loading=function(e,t){if(e===void 0){e=true}if(t===void 0){t=false}if(!e){if(!this.autoload){this.btnLoader&&(this.btnLoader.style.display="none")}this.loader&&(this.loader.style.display="none")}else{var r=t&&!this.autoload?this.btnLoader:this.loader;r&&(r.style.display="inherit")}};e.prototype.getItemHTML=function(e){this.getSource()==="landing-page"&&(e.url="");var t=this.hasCustomComponent?this.productCardComponent:"salla-product-card";var r=document.createElement(t);r.product=e;this.applyLandingPageStyles(r);this.applyHorizontalCardStyles(r);return r};e.prototype.applyLandingPageStyles=function(e){if(this.getSource()==="landing-page"&&!this.hasCustomComponent){e.toggleAttribute("hide-add-btn",true);e.classList.add("s-product-card-fit-height")}};e.prototype.applyHorizontalCardStyles=function(e){if(!this.horizontalCards){return}e.setAttribute("horizontal",true);if(!this.hasCustomComponent){e.setAttribute("shadow-on-hover",true)}};e.prototype.getSource=function(){return s.getProductsSource(this.source)};e.prototype.getSourceValue=function(){return this.currentCategoryIdFilter?this.currentCategoryIdFilter:s.getProductsSourceValue(this.source,this.sourceValue)};e.prototype.appendDataLayer=function(e){if(typeof dataLayer!=="object"||!Array.isArray(dataLayer)){return}dataLayer.push({event:"impressions",ecommerce:{currencyCode:salla.config.currency().code,impressions:e.map((function(e,t){var r,i,n;return{id:e.id,name:e.name,price:e.price,brand:((r=e.brand)===null||r===void 0?void 0:r.name)||"",quantity:e.quantity,categories:[{name:((i=e.category)===null||i===void 0?void 0:i.name)||salla.config.get("page.title"),id:salla.config.get("page.id")}],category:((n=e.category)===null||n===void 0?void 0:n.name)||salla.config.get("page.title"),position:t+1}}))}})};e.prototype.initiateInfiniteScroll=function(){var e=this;var t,r,i;if(!this.hasInfiniteScroll){return}this.infiniteScroll=salla.infiniteScroll.initiate(this.wrapper,this.wrapper,{path:function(){return e.nextPage},history:false,nextPage:this.nextPage,scrollThreshold:this.autoload?100:false,loadOnScroll:this.autoload},true);(t=this.infiniteScroll)===null||t===void 0?void 0:t.on("request",(function(){e.loading(true,e.autoload?false:true)}));(r=this.infiniteScroll)===null||r===void 0?void 0:r.on("load",(function(t){var r;if(!((r=t.data)===null||r===void 0?void 0:r.length)&&e.infiniteScroll.pageIndex==2){e.showPlaceholder=true;salla.infiniteScroll.destroy(e.infiniteScroll);e.loading(false);e.placeholderLoader&&e.placeholderLoader.remove();return}else{e.showPlaceholder=false}e.infiniteScroll.appendItems(e.handleResponse(t));if(e.infiniteScroll.pageIndex==2){if(!e.autoload&&e.nextPage){e.loadMoreWrapper.style.display="block"}e.animateItems()}}));(i=this.infiniteScroll)===null||i===void 0?void 0:i.on("error",(function(){e.status.querySelector(".s-infinite-scroll-error").classList.remove("s-hidden");e.placeholderLoader&&e.placeholderLoader.remove();e.loading(false)}));salla.onReady((function(){return salla.infiniteScroll.loadNextPage(e.infiniteScroll)}))};e.prototype.getInitialData=function(){var e=this;this.loading();return s.fetchProducts(this.getSource(),this.getSourceValue(),this.limit).then((function(t){if(!t.data.length){e.showPlaceholder=true;e.placeholderLoader&&e.placeholderLoader.remove();e.loading(false);return}if(!e.firstPageResponse){e.firstPageResponse=t;e.nextPage=t.cursor?t.cursor.next:e.nextPage;return}e.handleResponse(t).forEach((function(t){return e.wrapper.append(t)}))}))};e.prototype.loadMore=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){(e=this.infiniteScroll)===null||e===void 0?void 0:e.loadNextPage();return[2]}))}))};e.prototype.componentWillLoad=function(){var e=this;return s.onSallaReadyPromise((function(t){e.hasCustomComponent=!!customElements.get(e.productCardComponent);e.sourceValueIsValid=!!(e.getSourceValue()||e.isSourceWithoutValue());e.hasInfiniteScroll=!["json","selected","related","landing-page"].includes(e.getSource())&&!e.limit;var r=new URLSearchParams(window.location.search);try{e.sortBy=e.sortBy||r.get("sort")||r.get("by");e.parsedFilters=s.extractFiltersFromUrl(r);if(e.parsedFilters&&e.parsedFilters.category_id){e.currentCategoryIdFilter=[e.parsedFilters.category_id]}}catch(e){salla.logger.warn("failed to get filters from url",e.message)}e.buildNextPageUrl();e.isReady=true;if(!e.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(e.getSource(),"]"));return t()}if(e.hasInfiniteScroll){return t()}if(e.getSource()==="json"){if(!e.getSourceValue().length){e.showPlaceholder=true;return t()}setTimeout((function(){var t=e.getSourceValue();t.map((function(t){return e.wrapper.append(e.getItemHTML(t))}))}));return t()}if(e.getSource()==="selected"&&!e.getSourceValue().length){e.showPlaceholder=true;return t()}return e.getInitialData().then((function(){return t(true)}))}))};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.render=function(){var e=this;if(!this.canRender()){return""}if(this.showPlaceholder){return i("div",{class:"s-products-list-placeholder"},i("span",{innerHTML:l}),i("p",null,this.placeholderText))}return i(n,{class:"s-products-list"},i("div",{class:{"s-products-list-wrapper":true,"s-products-list-horizontal-cards":this.horizontalCards&&!this.filtersResults,"s-products-list-vertical-cards":!this.horizontalCards&&!this.filtersResults,"s-products-list-filters-results":this.filtersResults},ref:function(t){return e.wrapper=t}}),i("div",{class:"s-infinite-scroll-status",ref:function(t){return e.status=t}},i("p",{class:"s-infinite-scroll-last infinite-scroll-last s-hidden"},this.endOfText),i("p",{class:"s-infinite-scroll-error infinite-scroll-error s-hidden"},this.failedLoadMore)),i("div",{class:"s-products-list-loading-wrapper",style:{display:"none"},ref:function(t){return e.loader=t}},i("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader"})),this.hasInfiniteScroll&&this.nextPage&&!this.autoload?i("div",{class:"s-infinite-scroll-wrapper",style:{display:"none"},ref:function(t){return e.loadMoreWrapper=t}},i("button",{onClick:function(){return e.loadMore()},class:"s-infinite-scroll-btn s-button-btn s-button-primary"},i("span",{class:"s-button-text s-infinite-scroll-btn-text"},this.loadMoreText?this.loadMoreText:salla.lang.get("common.elements.load_more")),i("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader",ref:function(t){return e.btnLoader=t},style:{display:"none"}}))):"")};e.prototype.componentDidLoad=function(){var e=this;this.hasInfiniteScroll&&this.init();this.firstPageResponse&&this.handleResponse(this.firstPageResponse,false).forEach((function(t){return e.wrapper.append(t)}))};e.prototype.init=function(){this.initiateInfiniteScroll();this.loading()};e.prototype.handleResponse=function(e,t){var r=this;if(t===void 0){t=true}var i,n,o,a,l,c;if(!e){return[]}var u=this.getSource();var d="";if(((i=e.cursor)===null||i===void 0?void 0:i.current)===1){d=s.getPageTitleForSource(u);try{if(this.getSource()==="search"){d=salla.lang.get("common.elements.search_about",{word:this.getSourceValue()})}else if(!d){var h=this.parsedFilters.category_id||this.getSourceValue()[0];d=((a=(o=(n=e.filters.find((function(e){return e.key=="category_id"})))===null||n===void 0?void 0:n.values)===null||o===void 0?void 0:o.find((function(e){return e.key==h})))===null||a===void 0?void 0:a.value)||""}d+=(d?" - ":"")+salla.lang.choice("blocks.header.products_count",(l=e.data)===null||l===void 0?void 0:l.length);if(e.data.length===15){d=d.replace(e.data.length,salla.lang.get("common.elements.more_than")+" "+e.data.length)}e.title=d}catch(e){}s.generateProductSchema(e.data)}this.appendDataLayer(e.data);salla.event.emit("salla-products-list::products.fetched",e);this.productsFetched.emit(e);if(e.filters&&this.isFilterable()){this.filtersResults=true;salla.event.emit("filters::fetched",{filters:e.filters})}else if(this.isFilterable()){salla.event.emit("filters::hidden")}if(t){this.nextPage=e.cursor?e.cursor.next:this.nextPage}this.loading(false);this.placeholderLoader&&this.placeholderLoader.remove();if(this.hasInfiniteScroll&&!this.nextPage){this.infiniteScroll.option({scrollThreshold:false,loadOnScroll:false});this.status.querySelector(".s-infinite-scroll-last").classList.remove("s-hidden")}return((c=e.data)===null||c===void 0?void 0:c.map((function(e){return r.getItemHTML(e)})))||[]};Object.defineProperty(e.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});return e}());u.style=c}}}));
-//# sourceMappingURL=p-a54fbc9b.system.entry.js.map
+ */System.register(["./p-eebd57c0.system.js","./p-8f7b9e36.system.js","./p-9e0b1704.system.js"],(function(e){"use strict";var t,r,i,n,o,a,s;return{setters:[function(e){t=e.r;r=e.c;i=e.h;n=e.H;o=e.g},function(e){a=e.a},function(e){s=e.H}],execute:function(){var l='\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>shopping-bag</title>\n<path d="M28 10.667h-4v-2.667c0-4.412-3.588-8-8-8s-8 3.588-8 8v2.667h-4c-0.736 0-1.333 0.596-1.333 1.333v13.333c0 3.676 2.991 6.667 6.667 6.667h13.333c3.676 0 6.667-2.991 6.667-6.667v-13.333c0-0.737-0.597-1.333-1.333-1.333zM10.667 8c0-2.941 2.392-5.333 5.333-5.333s5.333 2.392 5.333 5.333v2.667h-10.667zM26.667 25.333c0 2.205-1.795 4-4 4h-13.333c-2.205 0-4-1.795-4-4v-12h2.667v2.667c0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-2.667h10.667v2.667c0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-2.667h2.667z"></path>\n</svg>\n';var c="";var u=e("salla_products_list",function(){function e(e){var i=this;t(this,e);this.productsFetched=r(this,"productsFetched",7);this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.sortBy=undefined;this.filtersResults=undefined;this.horizontalCards=undefined;this.autoload=false;this.loadMoreText=undefined;this.productCardComponent="custom-salla-product-card";this.page=1;this.nextPage=undefined;this.hasInfiniteScroll=undefined;this.hasCustomComponent=undefined;this.sourceValueIsValid=undefined;this.placeholderText=salla.lang.get("pages.categories.no_products");this.endOfText=salla.lang.get("common.elements.end_of_content");this.failedLoadMore=salla.lang.get("common.elements.failed_to_load_more");this.currentPage=salla.config.get("page");this.currentCategoryIdFilter=undefined;this.isReady=undefined;this.showPlaceholder=undefined;this.parsedFilters=undefined;salla.lang.onLoaded((function(){i.placeholderText=salla.lang.get("pages.categories.no_products");i.endOfText=salla.lang.get("common.elements.end_of_content");i.failedLoadMore=salla.lang.get("common.elements.failed_to_load_more")}))}e.prototype.connectedCallback=function(){var e=this;salla.event.on("salla-filters::changed",(function(t){return e.setFilters(t)}))};e.prototype.setFilters=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!e||JSON.stringify(e)===JSON.stringify(this.parsedFilters)){return[2]}window.scrollTo({top:0,behavior:"smooth"});this.parsedFilters=JSON.parse(JSON.stringify(e));if(this.currentPage.slug=="product.index"&&this.parsedFilters&&this.parsedFilters.category_id){this.currentCategoryIdFilter=[this.parsedFilters.category_id]}return[2,this.reload()]}))}))};e.prototype.reload=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){!this.autoload&&this.loadMoreWrapper&&(this.loadMoreWrapper.style.display="none");this.hasInfiniteScroll&&salla.infiniteScroll.destroy(this.infiniteScroll);this.buildNextPageUrl();this.wrapper.innerHTML="";if(this.hasInfiniteScroll){this.init()}else{this.getInitialData()}if(this.showPlaceholder){this.showPlaceholder=false;this.placeholderLoader=document.createElement("div");this.placeholderLoader.classList.add("s-products-list-loading-wrapper");this.placeholderLoader.style.display="inherit";this.placeholderLoader.innerHTML='<span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader"></span>';this.host.insertAdjacentElement("afterend",this.placeholderLoader)}return[2]}))}))};e.prototype.isFilterable=function(){return salla.config.get("store.settings.product.filters")&&this.filtersResults};e.prototype.isSourceWithoutValue=function(){return["offers","latest","sales"].includes(this.getSource())};e.prototype.animateItems=function(){a({targets:"salla-products-list salla-product-card",opacity:[0,1],duration:1200,translateY:[20,0],delay:function(e,t){return t*100}})};e.prototype.initBaseNextPageUrl=function(e){var t=this;this.nextPage=salla.url.api("products?source=".concat(e));if(this.limit){this.nextPage+="&per_page=".concat(this.limit>32?32:this.limit)}if(this.sortBy){this.nextPage+="&sort=".concat(this.sortBy)}this.nextPage+="&filterable=1";var r=function(e,r){if(["string","number"].includes(typeof r)){i.nextPage+="&filters[".concat(encodeURIComponent(e),"]=").concat(encodeURIComponent(r))}else if(Array.isArray(r)){r.forEach((function(r){return t.nextPage+="&filters[".concat(encodeURIComponent(e),"][]=").concat(encodeURIComponent(r))}))}else if(typeof r==="object"){for(var n=0,o=Object.entries(r);n<o.length;n++){var a=o[n],s=a[0],l=a[1];i.nextPage+="&filters[".concat(encodeURIComponent(e),"][").concat(encodeURIComponent(s),"]=").concat(encodeURIComponent(l))}}};var i=this;for(var n=0,o=Object.entries(this.parsedFilters||{});n<o.length;n++){var a=o[n],s=a[0],l=a[1];r(s,l)}};e.prototype.buildNextPageUrl=function(){var e=this.getSource();if(e==="json"){return}this.initBaseNextPageUrl(e);if(this.isSourceWithoutValue()){return}if(["search","related","landing-page"].includes(e)){this.nextPage+="&source_value=".concat(this.getSourceValue());return}try{this.nextPage+="&source_value[]=".concat(this.getSourceValue().join("&source_value[]="))}catch(t){salla.logger.warn('source-value prop should be array of ids ex source-value="[1,2,3]" for the source ['.concat(e,"]"));this.sourceValueIsValid=false}};e.prototype.loading=function(e,t){if(e===void 0){e=true}if(t===void 0){t=false}if(!e){if(!this.autoload){this.btnLoader&&(this.btnLoader.style.display="none")}this.loader&&(this.loader.style.display="none")}else{var r=t&&!this.autoload?this.btnLoader:this.loader;r&&(r.style.display="inherit")}};e.prototype.getItemHTML=function(e){this.getSource()==="landing-page"&&(e.url="");var t=this.hasCustomComponent?this.productCardComponent:"salla-product-card";var r=document.createElement(t);r.product=e;this.applyLandingPageStyles(r);this.applyHorizontalCardStyles(r);return r};e.prototype.applyLandingPageStyles=function(e){if(this.getSource()==="landing-page"&&!this.hasCustomComponent){e.toggleAttribute("hide-add-btn",true);e.classList.add("s-product-card-fit-height")}};e.prototype.applyHorizontalCardStyles=function(e){if(!this.horizontalCards){return}e.setAttribute("horizontal",true);if(!this.hasCustomComponent){e.setAttribute("shadow-on-hover",true)}};e.prototype.getSource=function(){return s.getProductsSource(this.source)};e.prototype.getSourceValue=function(){return this.currentCategoryIdFilter?this.currentCategoryIdFilter:s.getProductsSourceValue(this.source,this.sourceValue)};e.prototype.appendDataLayer=function(e){if(typeof dataLayer!=="object"||!Array.isArray(dataLayer)){return}dataLayer.push({event:"impressions",ecommerce:{currencyCode:salla.config.currency().code,impressions:e.map((function(e,t){var r,i,n;return{id:e.id,name:e.name,price:e.price,brand:((r=e.brand)===null||r===void 0?void 0:r.name)||"",quantity:e.quantity,categories:[{name:((i=e.category)===null||i===void 0?void 0:i.name)||salla.config.get("page.title"),id:salla.config.get("page.id")}],category:((n=e.category)===null||n===void 0?void 0:n.name)||salla.config.get("page.title"),position:t+1}}))}})};e.prototype.initiateInfiniteScroll=function(){var e=this;var t,r,i;if(!this.hasInfiniteScroll){return}this.infiniteScroll=salla.infiniteScroll.initiate(this.wrapper,this.wrapper,{path:function(){return e.nextPage},history:false,nextPage:this.nextPage,scrollThreshold:this.autoload?100:false,loadOnScroll:this.autoload},true);(t=this.infiniteScroll)===null||t===void 0?void 0:t.on("request",(function(){e.loading(true,e.autoload?false:true)}));(r=this.infiniteScroll)===null||r===void 0?void 0:r.on("load",(function(t){var r;if(!((r=t.data)===null||r===void 0?void 0:r.length)&&e.infiniteScroll.pageIndex==2){e.showPlaceholder=true;salla.infiniteScroll.destroy(e.infiniteScroll);e.loading(false);e.placeholderLoader&&e.placeholderLoader.remove();return}else{e.showPlaceholder=false}e.infiniteScroll.appendItems(e.handleResponse(t));if(e.infiniteScroll.pageIndex==2){if(!e.autoload&&e.nextPage){e.loadMoreWrapper.style.display="block"}e.animateItems()}}));(i=this.infiniteScroll)===null||i===void 0?void 0:i.on("error",(function(){e.status.querySelector(".s-infinite-scroll-error").classList.remove("s-hidden");e.placeholderLoader&&e.placeholderLoader.remove();e.loading(false)}));salla.onReady((function(){return salla.infiniteScroll.loadNextPage(e.infiniteScroll)}))};e.prototype.getInitialData=function(){var e=this;this.loading();return s.fetchProducts(this.getSource(),this.getSourceValue(),this.limit).then((function(t){if(!t.data.length){e.showPlaceholder=true;e.placeholderLoader&&e.placeholderLoader.remove();e.loading(false);return}if(!e.firstPageResponse){e.firstPageResponse=t;e.nextPage=t.cursor?t.cursor.next:e.nextPage;return}e.handleResponse(t).forEach((function(t){return e.wrapper.append(t)}))}))};e.prototype.loadMore=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){(e=this.infiniteScroll)===null||e===void 0?void 0:e.loadNextPage();return[2]}))}))};e.prototype.componentWillLoad=function(){var e=this;return s.onSallaReadyPromise((function(t){e.hasCustomComponent=!!customElements.get(e.productCardComponent);e.sourceValueIsValid=!!(e.getSourceValue()||e.isSourceWithoutValue());e.hasInfiniteScroll=!["json","selected","related","landing-page"].includes(e.getSource())&&!e.limit;var r=new URLSearchParams(window.location.search);try{e.sortBy=e.sortBy||r.get("sort")||r.get("by");e.parsedFilters=s.extractFiltersFromUrl(r);if(e.parsedFilters&&e.parsedFilters.category_id){e.currentCategoryIdFilter=[e.parsedFilters.category_id]}}catch(e){salla.logger.warn("failed to get filters from url",e.message)}e.buildNextPageUrl();e.isReady=true;if(!e.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(e.getSource(),"]"));return t()}if(e.hasInfiniteScroll){return t()}if(e.getSource()==="json"){if(!e.getSourceValue().length){e.showPlaceholder=true;return t()}setTimeout((function(){var t=e.getSourceValue();t.map((function(t){return e.wrapper.append(e.getItemHTML(t))}))}));return t()}if(e.getSource()==="selected"&&!e.getSourceValue().length){e.showPlaceholder=true;return t()}return e.getInitialData().then((function(){return t(true)}))}))};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.render=function(){var e=this;if(!this.canRender()){return""}if(this.showPlaceholder){return i("div",{class:"s-products-list-placeholder"},i("span",{innerHTML:l}),i("p",null,this.placeholderText))}return i(n,{class:"s-products-list"},i("div",{class:{"s-products-list-wrapper":true,"s-products-list-horizontal-cards":this.horizontalCards&&!this.filtersResults,"s-products-list-vertical-cards":!this.horizontalCards&&!this.filtersResults,"s-products-list-filters-results":this.filtersResults},ref:function(t){return e.wrapper=t}}),i("div",{class:"s-infinite-scroll-status",ref:function(t){return e.status=t}},i("p",{class:"s-infinite-scroll-last infinite-scroll-last s-hidden"},this.endOfText),i("p",{class:"s-infinite-scroll-error infinite-scroll-error s-hidden"},this.failedLoadMore)),i("div",{class:"s-products-list-loading-wrapper",style:{display:"none"},ref:function(t){return e.loader=t}},i("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader"})),this.hasInfiniteScroll&&this.nextPage&&!this.autoload?i("div",{class:"s-infinite-scroll-wrapper",style:{display:"none"},ref:function(t){return e.loadMoreWrapper=t}},i("button",{onClick:function(){return e.loadMore()},class:"s-infinite-scroll-btn s-button-btn s-button-primary"},i("span",{class:"s-button-text s-infinite-scroll-btn-text"},this.loadMoreText?this.loadMoreText:salla.lang.get("common.elements.load_more")),i("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader",ref:function(t){return e.btnLoader=t},style:{display:"none"}}))):"")};e.prototype.componentDidLoad=function(){var e=this;this.hasInfiniteScroll&&this.init();this.firstPageResponse&&this.handleResponse(this.firstPageResponse,false).forEach((function(t){return e.wrapper.append(t)}))};e.prototype.init=function(){this.initiateInfiniteScroll();this.loading()};e.prototype.handleResponse=function(e,t){var r=this;if(t===void 0){t=true}var i,n,o,a,l,c;if(!e){return[]}var u=this.getSource();var d="";if(((i=e.cursor)===null||i===void 0?void 0:i.current)===1){d=s.getPageTitleForSource(u);try{if(this.getSource()==="search"){d=salla.lang.get("common.elements.search_about",{word:this.getSourceValue()})}else if(!d){var h=this.parsedFilters.category_id||this.getSourceValue()[0];d=((a=(o=(n=e.filters.find((function(e){return e.key=="category_id"})))===null||n===void 0?void 0:n.values)===null||o===void 0?void 0:o.find((function(e){return e.key==h})))===null||a===void 0?void 0:a.value)||""}d+=(d?" - ":"")+salla.lang.choice("blocks.header.products_count",(l=e.data)===null||l===void 0?void 0:l.length);if(e.data.length===15){d=d.replace(e.data.length,salla.lang.get("common.elements.more_than")+" "+e.data.length)}e.title=d}catch(e){}s.generateProductSchema(e.data)}this.appendDataLayer(e.data);salla.event.emit("salla-products-list::products.fetched",e);this.productsFetched.emit(e);if(e.filters&&this.isFilterable()){this.filtersResults=true;salla.event.emit("filters::fetched",{filters:e.filters})}else if(this.isFilterable()){salla.event.emit("filters::hidden")}if(t){this.nextPage=e.cursor?e.cursor.next:this.nextPage}this.loading(false);this.placeholderLoader&&this.placeholderLoader.remove();if(this.hasInfiniteScroll&&!this.nextPage){this.infiniteScroll.option({scrollThreshold:false,loadOnScroll:false});this.status.querySelector(".s-infinite-scroll-last").classList.remove("s-hidden")}return((c=e.data)===null||c===void 0?void 0:c.map((function(e){return r.getItemHTML(e)})))||[]};Object.defineProperty(e.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});return e}());u.style=c}}}));
+//# sourceMappingURL=p-ed382e13.system.entry.js.map