@salla.sa/twilight-components 2.12.15 → 2.12.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/cjs/salla-conditional-fields.cjs.entry.js +15 -0
  2. package/dist/cjs/salla-conditional-fields.cjs.entry.js.map +1 -1
  3. package/dist/cjs/salla-installment.cjs.entry.js +61 -14
  4. package/dist/cjs/salla-installment.cjs.entry.js.map +1 -1
  5. package/dist/cjs/salla-product-options.cjs.entry.js +12 -12
  6. package/dist/cjs/salla-product-options.cjs.entry.js.map +1 -1
  7. package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js +15 -0
  8. package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js.map +1 -1
  9. package/dist/collection/components/salla-installment/salla-installment.js +61 -14
  10. package/dist/collection/components/salla-installment/salla-installment.js.map +1 -1
  11. package/dist/collection/components/salla-product-options/salla-product-options.js +12 -12
  12. package/dist/collection/components/salla-product-options/salla-product-options.js.map +1 -1
  13. package/dist/components/salla-conditional-fields2.js +15 -0
  14. package/dist/components/salla-conditional-fields2.js.map +1 -1
  15. package/dist/components/salla-installment.js +61 -14
  16. package/dist/components/salla-installment.js.map +1 -1
  17. package/dist/components/salla-product-options.js +12 -12
  18. package/dist/components/salla-product-options.js.map +1 -1
  19. package/dist/esm/salla-conditional-fields.entry.js +15 -0
  20. package/dist/esm/salla-conditional-fields.entry.js.map +1 -1
  21. package/dist/esm/salla-installment.entry.js +62 -15
  22. package/dist/esm/salla-installment.entry.js.map +1 -1
  23. package/dist/esm/salla-product-options.entry.js +12 -12
  24. package/dist/esm/salla-product-options.entry.js.map +1 -1
  25. package/dist/esm-es5/salla-conditional-fields.entry.js +1 -1
  26. package/dist/esm-es5/salla-conditional-fields.entry.js.map +1 -1
  27. package/dist/esm-es5/salla-installment.entry.js +1 -1
  28. package/dist/esm-es5/salla-installment.entry.js.map +1 -1
  29. package/dist/esm-es5/salla-product-options.entry.js +2 -2
  30. package/dist/esm-es5/salla-product-options.entry.js.map +1 -1
  31. package/dist/twilight/{p-05c909d3.entry.js → p-329ded9e.entry.js} +2 -2
  32. package/dist/twilight/{p-05c909d3.entry.js.map → p-329ded9e.entry.js.map} +1 -1
  33. package/dist/twilight/p-5e28ad7e.system.js +1 -1
  34. package/dist/twilight/p-c320d65a.entry.js +5 -0
  35. package/dist/twilight/p-c320d65a.entry.js.map +1 -0
  36. package/dist/twilight/p-d80d1435.system.entry.js +5 -0
  37. package/dist/twilight/p-d80d1435.system.entry.js.map +1 -0
  38. package/dist/twilight/p-db380dfd.system.entry.js +5 -0
  39. package/dist/twilight/p-db380dfd.system.entry.js.map +1 -0
  40. package/dist/twilight/p-e422014b.system.entry.js +5 -0
  41. package/dist/twilight/{p-4fd4227c.system.entry.js.map → p-e422014b.system.entry.js.map} +1 -1
  42. package/dist/twilight/p-e9437753.entry.js +5 -0
  43. package/dist/twilight/p-e9437753.entry.js.map +1 -0
  44. package/dist/twilight/twilight.esm.js +1 -1
  45. package/dist/types/components/salla-installment/salla-installment.d.ts +2 -1
  46. package/package.json +3 -3
  47. package/dist/twilight/p-0973f52a.system.entry.js +0 -5
  48. package/dist/twilight/p-0973f52a.system.entry.js.map +0 -1
  49. package/dist/twilight/p-4fd4227c.system.entry.js +0 -5
  50. package/dist/twilight/p-5f0dffdf.entry.js +0 -5
  51. package/dist/twilight/p-5f0dffdf.entry.js.map +0 -1
  52. package/dist/twilight/p-81e2622b.entry.js +0 -5
  53. package/dist/twilight/p-81e2622b.entry.js.map +0 -1
  54. package/dist/twilight/p-f0b2503a.system.entry.js +0 -5
  55. package/dist/twilight/p-f0b2503a.system.entry.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"names":["SallaConditionalFields","prototype","hideAllOptions","optionId","_this","this","host","querySelectorAll","concat","forEach","field","classList","add","dataset","disableInputs","input","setAttribute","removeAttribute","_a","tagName","toLowerCase","value","includes","getAttribute","hasOwnProperty","checked","changeHandler","event","salla","emit","log","target","name","replace","isMultiple","isEqual","showWhen","trim","isSelected","selectedValues","Array","from","e","toString","showTheInput","remove","getElementsByClassName","length","componentDidRender","optionName","querySelector","render","h","Host"],"sources":["src/components/salla-conditional-fields/salla-conditional-fields.tsx"],"sourcesContent":["import { Component, Element, Host, Listen, h } from '@stencil/core';\n\n/**\n * its to easy to use, currenlty its support select & checkbox input as trigger for show/hide the dom\n * the dom you can put it like this data-show-when=\"{name of the field} {= or !=} {value of the field}\"\n */\n@Component({\n tag: 'salla-conditional-fields'\n})\nexport class SallaConditionalFields {\n\n @Element() host: HTMLElement;\n\n private hideAllOptions(optionId) {\n this.host.querySelectorAll(`[data-show-when^=\"options[${optionId}\"]`).forEach((field: HTMLElement) => {\n field.classList.add('hidden');\n this.hideAllOptions(field.dataset.optionId);\n this.disableInputs(field);\n });\n }\n\n private disableInputs(field) {\n field.querySelectorAll('[name]').forEach((input) => {\n\n input.setAttribute('disabled', '');\n input.removeAttribute('required');\n if (input?.tagName?.toLowerCase() === 'select') {\n input.value = ''\n }\n if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {\n // @ts-ignore\n input.checked = false;\n }\n });\n }\n \n @Listen('change')\n changeHandler(event) {\n salla.event.emit('salla-onditional-fields::change', event);\n salla.log('Received the change event: ', event);\n\n if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {\n salla.log('Ignore the change because is not support input: ' + (event?.target?.tagName || 'N/A'));\n return;\n }\n\n // to extract the option id from the input name, the supported names are name[*] and name[*][]\n let optionId = event.target.name.replace('[]', '');\n let isMultiple = event.target.getAttribute('type') === 'checkbox';\n\n\n salla.log('Trying to find all the element with condition:', `[data-show-when^=\"${optionId}\"]`);\n\n this.host.querySelectorAll(`[data-show-when^=\"${optionId}\"]`)\n .forEach((field: HTMLElement) => {\n let isEqual = !field?.dataset.showWhen.includes('!=');\n let value = field?.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();\n // let isSelected = isMultiple ? event.target?.checked : value === event.target.value;\n let isSelected;\n\n if (isMultiple) {\n // @ts-ignore\n let selectedValues = Array.from(this.host.querySelectorAll(`input[name=\"${event.target.name}\"]:checked`), e => e?.value);\n isSelected = selectedValues.includes(value.toString());\n } else {\n isSelected = value === event.target.value;\n }\n\n salla.log('The input is ', (isMultiple ? 'Multiple' : 'Single'), ' value:', isSelected);\n\n let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);\n if (showTheInput) {\n field.classList.remove('hidden');\n field.querySelectorAll('[name]').forEach((input) => {\n input.removeAttribute('disabled');\n\n //To handle focus on hidden input error\n if (!['checkbox'].includes(input.getAttribute('type')) && field.getElementsByClassName('required').length) {\n input.setAttribute('required', '');\n }\n });\n } else {\n this.hideAllOptions(field.dataset.optionId);\n field.classList.add('hidden');\n this.disableInputs(field);\n }\n });\n }\n\n componentDidRender() {\n this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {\n // @ts-ignore\n let optionName = field?.dataset?.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();\n if (!optionName) {\n return;\n }\n\n this.changeHandler({\n target: this.host.querySelector('[name^=\"' + optionName + '\"]')\n })\n });\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["SallaConditionalFields","prototype","hideAllOptions","optionId","_this","this","host","querySelectorAll","concat","forEach","field","classList","add","dataset","disableInputs","input","setAttribute","removeAttribute","_a","tagName","toLowerCase","value","includes","getAttribute","hasOwnProperty","checked","changeHandler","event","salla","emit","log","target","name","replace","isMultiple","isEqual","showWhen","trim","isSelected","selectedValues","Array","from","e","toString","showTheInput","remove","closestProductOption","closest","optionRequired","checkboxes","document","isAnyChecked","some","checkbox","getElementsByClassName","length","componentDidRender","optionName","querySelector","render","h","Host"],"sources":["src/components/salla-conditional-fields/salla-conditional-fields.tsx"],"sourcesContent":["import { Component, Element, Host, Listen, h } from '@stencil/core';\n\n/**\n * its to easy to use, currenlty its support select & checkbox input as trigger for show/hide the dom\n * the dom you can put it like this data-show-when=\"{name of the field} {= or !=} {value of the field}\"\n */\n@Component({\n tag: 'salla-conditional-fields'\n})\nexport class SallaConditionalFields {\n\n @Element() host: HTMLElement;\n\n private hideAllOptions(optionId) {\n this.host.querySelectorAll(`[data-show-when^=\"options[${optionId}\"]`).forEach((field: HTMLElement) => {\n field.classList.add('hidden');\n this.hideAllOptions(field.dataset.optionId);\n this.disableInputs(field);\n });\n }\n\n private disableInputs(field) {\n field.querySelectorAll('[name]').forEach((input) => {\n\n input.setAttribute('disabled', '');\n input.removeAttribute('required');\n if (input?.tagName?.toLowerCase() === 'select') {\n input.value = ''\n }\n if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {\n // @ts-ignore\n input.checked = false;\n }\n });\n }\n \n @Listen('change')\n changeHandler(event) {\n salla.event.emit('salla-onditional-fields::change', event);\n salla.log('Received the change event: ', event);\n\n if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {\n salla.log('Ignore the change because is not support input: ' + (event?.target?.tagName || 'N/A'));\n return;\n }\n\n // to extract the option id from the input name, the supported names are name[*] and name[*][]\n let optionId = event.target.name.replace('[]', '');\n let isMultiple = event.target.getAttribute('type') === 'checkbox';\n\n\n salla.log('Trying to find all the element with condition:', `[data-show-when^=\"${optionId}\"]`);\n\n this.host.querySelectorAll(`[data-show-when^=\"${optionId}\"]`)\n .forEach((field: HTMLElement) => {\n let isEqual = !field?.dataset.showWhen.includes('!=');\n let value = field?.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();\n // let isSelected = isMultiple ? event.target?.checked : value === event.target.value;\n let isSelected;\n\n if (isMultiple) {\n // @ts-ignore\n let selectedValues = Array.from(this.host.querySelectorAll(`input[name=\"${event.target.name}\"]:checked`), e => e?.value);\n isSelected = selectedValues.includes(value.toString());\n } else {\n isSelected = value === event.target.value;\n }\n\n salla.log('The input is ', (isMultiple ? 'Multiple' : 'Single'), ' value:', isSelected);\n\n let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);\n if (showTheInput) {\n field.classList.remove('hidden');\n field.querySelectorAll('[name]').forEach((input) => {\n input.removeAttribute('disabled');\n\n\n // Return required attribute to the input if the option is required\n const closestProductOption = (input as HTMLInputElement).closest('.s-product-options-option') as HTMLElement;\n if (closestProductOption.dataset.optionRequired === 'true') {\n input.setAttribute('required', '');\n }\n\n\n // Handle multiple checkboxes with same name and required attribute \n if (input.getAttribute('type') === 'checkbox') {\n const checkboxes = Array.from(document.querySelectorAll(`input[type=\"checkbox\"][name=\"${input.getAttribute('name')}\"]`)) as HTMLInputElement[];\n const isAnyChecked = checkboxes.some((checkbox) => checkbox.checked); \n if (isAnyChecked) {\n checkboxes.forEach((checkbox) => {\n checkbox.removeAttribute('required');\n });\n }\n }\n //To handle focus on hidden input error\n if (!['checkbox'].includes(input.getAttribute('type')) && field.getElementsByClassName('required').length) {\n input.setAttribute('required', '');\n }\n });\n } else {\n this.hideAllOptions(field.dataset.optionId);\n field.classList.add('hidden');\n this.disableInputs(field);\n }\n });\n }\n\n componentDidRender() {\n this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {\n // @ts-ignore\n let optionName = field?.dataset?.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();\n if (!optionName) {\n return;\n }\n\n this.changeHandler({\n target: this.host.querySelector('[name^=\"' + optionName + '\"]')\n })\n });\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Crafted with ❤ by Salla
3
3
  */
4
- import{r as registerInstance,h,H as Host}from"./index-c5e788f5.js";var sallaInstallmentCss="salla-installment:empty{display:none}#tabbyPromoWrapper{background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#tabbyPromoWrapper:hover{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;-webkit-box-shadow:none;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--color-text);font-size:var(--font-sm);line-height:1.25;padding:18px 20px 18px 100px !important;background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.tamara-product-widget:hover,.spotii-wrapper:hover{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}.tamara-product-widget .spotii-logo,.spotii-wrapper .spotii-logo{float:left;margin:0 0 0 -75px}.ltr .tamara-product-widget,.ltr .spotii-wrapper{text-align:left;padding:18px 100px 18px 20px !important}.ltr .tamara-product-widget .spotii-logo,.ltr .spotii-wrapper .spotii-logo{float:right;margin:0 -75px 0 0}.ltr .tamara-product-widget .spotii-product-widget,.ltr .spotii-wrapper .spotii-product-widget{text-align:left !important}.spotii-wrapper{margin-bottom:20px}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm) !important;margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px;top:18px;margin:0 !important}.ltr .tamara-product-widget .tamara-logo{right:20px;left:auto}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}";var SallaInstallment=function(){function t(t){var r=this;registerInstance(this,t);this.tabbyBorderRemoved=false;this.tabbyRemoveBorderTries=0;this.price=undefined;this.language=salla.config.get("user.language_code");this.currency=salla.config.get("user.currency_code");this.tamaraIsActive=undefined;this.tabbyIsActive=undefined;this.spotiiIsActive=undefined;salla.lang.onLoaded((function(){var t=salla.config.get("store.settings.installments");if(t){r.tamaraIsActive=t.includes("tamara_installment");r.tabbyIsActive=t.includes("tabby_installment");r.spotiiIsActive=t.includes("spotii_pay")}r.renderInstallments()}))}t.prototype.render=function(){return h(Host,null,this.tamaraIsActive?h("div",{class:"tamara-product-widget","data-price":this.price,"data-currency":this.currency,"data-lang":this.language,"data-payment-type":"installment"}):"",this.tabbyIsActive?h("div",{id:"tabbyPromoWrapper"},h("div",{id:"tabbyPromo"})):"",this.spotiiIsActive?h("div",{class:"spotii-wrapper"},h("div",{class:"spotii-promo"})):"")};t.prototype.renderInstallments=function(){var t=this;if(this.tamaraIsActive){var r=document.createElement("script");r.setAttribute("src","https://cdn.tamara.co/widget/product-widget.min.js");document.head.appendChild(r);r.onload=function(){window.TamaraProductWidget.init({lang:t.language});setTimeout((function(){window.TamaraProductWidget.render()}),300)}}if(this.tabbyIsActive){var r=document.createElement("script");r.setAttribute("src","https://checkout.tabby.ai/tabby-promo.js");document.head.appendChild(r);r.onload=function(){var r=window.TabbyPromo;new r({selector:"#tabbyPromo",currency:t.currency,price:t.price,lang:t.language});document.querySelectorAll(".tabby-promo-snippet__logo").forEach((function(t){t.setAttribute("aria-label","Tabby Logo")}))};this.removeTabbyBorder()}if(this.spotiiIsActive){var a=salla.money((Number(this.price)/3).toFixed(2));var o=salla.config.get("theme.is_rtl",true);window.spotiiConfig={targetXPath:[".spotii-wrapper"],renderToPath:[".spotii-promo"],numberOfPayment:3,currency:this.currency,templateLine:"${textOne} ${number} ${textTwo} "+a+"${logo} ${info}",textOne:o?"جزء الدفع على":"Split it into",textTwo:o?"أقساط متساوية بدون تكاليف اضافية بقيمة":"payments of",textThree:"مع",price:this.price};var r=document.createElement("script");r.setAttribute("src",salla.url.cdn("js/price-widget-ar-salla.js"));document.head.appendChild(r)}};t.prototype.removeTabbyBorder=function(){var t=this;if(this.tabbyBorderRemoved||this.tabbyRemoveBorderTries>5){return}this.tabbyRemoveBorderTries++;setTimeout((function(){var r=document.querySelector("#tabbyPromo>div>div");r=r?r.shadowRoot.querySelector('div[class^="styles__tabby-promo-snippet--"]'):null;if(r){r.style="border: none; margin: 15px 0!important;";t.tabbyBorderRemoved=true}else{t.removeTabbyBorder()}}),this.tabbyRemoveBorderTries*500)};return t}();SallaInstallment.style=sallaInstallmentCss;export{SallaInstallment as salla_installment};
4
+ import{r as registerInstance,h,H as Host,g as getElement}from"./index-c5e788f5.js";var sallaInstallmentCss="salla-installment:empty{display:none}#tabbyPromoWrapper{background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#tabbyPromoWrapper:hover{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;-webkit-box-shadow:none;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--color-text);font-size:var(--font-sm);line-height:1.25;padding:18px 20px 18px 100px !important;background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.tamara-product-widget:hover,.spotii-wrapper:hover{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}.tamara-product-widget .spotii-logo,.spotii-wrapper .spotii-logo{float:left;margin:0 0 0 -75px}.ltr .tamara-product-widget,.ltr .spotii-wrapper{text-align:left;padding:18px 100px 18px 20px !important}.ltr .tamara-product-widget .spotii-logo,.ltr .spotii-wrapper .spotii-logo{float:right;margin:0 -75px 0 0}.ltr .tamara-product-widget .spotii-product-widget,.ltr .spotii-wrapper .spotii-product-widget{text-align:left !important}.spotii-wrapper{margin-bottom:20px}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm) !important;margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px;top:18px;margin:0 !important}.ltr .tamara-product-widget .tamara-logo{right:20px;left:auto}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}";var SallaInstallment=function(){function t(t){var e=this;registerInstance(this,t);this.tabbyBorderRemoved=false;this.tabbyRemoveBorderTries=0;this.price=undefined;this.language=salla.config.get("user.language_code");this.currency=salla.config.get("user.currency_code");this.tamaraIsActive=undefined;this.tabbyIsActive=undefined;this.spotiiIsActive=undefined;salla.lang.onLoaded((function(){var t=salla.config.get("store.settings.installments");if(t){e.tamaraIsActive=t.includes("tamara_installment");e.tabbyIsActive=t.includes("tabby_installment");e.spotiiIsActive=t.includes("spotii_pay")}e.renderInstallments()}));salla.event.on("product::price.updated",(function(t){var r=t.data;if(!r.price||r.price==e.price){return}e.price=r.price;e.renderInstallments(true)}))}t.prototype.render=function(){return h(Host,null,this.tamaraIsActive?h("div",{class:"tamara-product-widget","data-price":this.price,"data-currency":this.currency,"data-lang":this.language,"data-payment-type":"installment"}):"",this.tabbyIsActive?h("div",{id:"tabbyPromoWrapper"},h("div",{id:"tabbyPromo"})):"",this.spotiiIsActive?h("div",{class:"spotii-wrapper"},h("div",{class:"spotii-promo"})):"")};t.prototype.renderInstallments=function(t){var e=this;if(t===void 0){t=false}if(this.tamaraIsActive){if(t){var r=document.querySelector('script[src="https://cdn.tamara.co/widget/product-widget.min.js"]');if(r){r.remove()}}var a=document.createElement("script");a.setAttribute("src","https://cdn.tamara.co/widget/product-widget.min.js");document.head.appendChild(a);a.onload=function(){window.TamaraProductWidget.init({lang:e.language});setTimeout((function(){window.TamaraProductWidget.render()}),300)}}if(this.tabbyIsActive){if(t){var o=this.host.querySelector("#tabbyPromoWrapper");if(o){o.remove()}var i=document.createElement("div");i.setAttribute("id","tabbyPromoWrapper");var s=document.createElement("div");s.setAttribute("id","tabbyPromo");i.appendChild(s);this.host.appendChild(i);var p=document.querySelector('script[src="https://checkout.tabby.ai/tabby-promo.js"]');if(p){p.remove()}}var n=document.createElement("script");n.setAttribute("src","https://checkout.tabby.ai/tabby-promo.js");document.head.appendChild(n);n.onload=function(){var t=window.TabbyPromo;new t({selector:"#tabbyPromo",currency:e.currency,price:e.price,lang:e.language});document.querySelectorAll(".tabby-promo-snippet__logo").forEach((function(t){t.setAttribute("aria-label","Tabby Logo")}))};this.removeTabbyBorder()}if(this.spotiiIsActive){if(t){var d=this.host.querySelector(".spotii-wrapper");if(d){d.remove()}var b=document.createElement("div");b.classList.add("spotii-wrapper");var l=document.createElement("div");l.classList.add("spotii-promo");b.appendChild(l);this.host.appendChild(b);var c=document.querySelector('script[src="'+salla.url.cdn("js/price-widget-ar-salla.js")+'"]');if(c){c.remove()}}var m=salla.money((Number(this.price)/3).toFixed(2));var u=salla.config.get("theme.is_rtl",true);window.spotiiConfig={targetXPath:[".spotii-wrapper"],renderToPath:[".spotii-promo"],numberOfPayment:3,currency:this.currency,templateLine:"${textOne} ${number} ${textTwo} "+m+"${logo} ${info}",textOne:u?"جزء الدفع على":"Split it into",textTwo:u?"أقساط متساوية بدون تكاليف اضافية بقيمة":"payments of",textThree:"مع",price:this.price};var h=document.createElement("script");h.setAttribute("src",salla.url.cdn("js/price-widget-ar-salla.js"));document.head.appendChild(h)}};t.prototype.removeTabbyBorder=function(){var t=this;if(this.tabbyBorderRemoved||this.tabbyRemoveBorderTries>5){return}this.tabbyRemoveBorderTries++;setTimeout((function(){var e=document.querySelector("#tabbyPromo>div>div");e=e?e.shadowRoot.querySelector('div[class^="styles__tabby-promo-snippet--"]'):null;if(e){e.style="border: none; margin: 15px 0!important;";t.tabbyBorderRemoved=true}else{t.removeTabbyBorder()}}),this.tabbyRemoveBorderTries*500)};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaInstallment.style=sallaInstallmentCss;export{SallaInstallment as salla_installment};
5
5
  //# sourceMappingURL=salla-installment.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["sallaInstallmentCss","SallaInstallment","hostRef","_this","this","tabbyBorderRemoved","tabbyRemoveBorderTries","salla","config","get","lang","onLoaded","installment","tamaraIsActive","includes","tabbyIsActive","spotiiIsActive","renderInstallments","prototype","render","h","Host","class","price","currency","language","id","script","document","createElement","setAttribute","head","appendChild","onload","window","TamaraProductWidget","init","setTimeout","TabbyPromo","selector","querySelectorAll","forEach","element","removeTabbyBorder","amount","money","Number","toFixed","isRTL","spotiiConfig","targetXPath","renderToPath","numberOfPayment","templateLine","textOne","textTwo","textThree","url","cdn","promo","querySelector","shadowRoot","style"],"sources":["src/components/salla-installment/salla-installment.scss?tag=salla-installment","src/components/salla-installment/salla-installment.tsx"],"sourcesContent":["/*\n The whole installment methods is a third-party widgets,\n So there aren't a custom classes (as other components) to style them.\n*/\n\nsalla-installment:empty {\n display: none;\n}\n/*\n* Installment::Tabby\n*/\n#tabbyPromoWrapper {\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n margin-bottom: 20px;\n\n .salla-y &{\n border: 1px solid var(--color-grey-dark);\n border-radius: 12px\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n\n #tabbyPromo {\n * {\n font-family: var(--font-main);\n }\n\n > div > div {\n max-width: none;\n //padding: 15px;\n box-shadow: none;\n border: none;\n }\n\n .tabby-promo-snippet {\n max-width: 100%;\n min-height: 100px;\n padding: 18px 20px;\n // border-color: var(--color-grey-dark);\n border: none !important;\n\n\n &__text, &__link {\n font-size: var(--font-sm);\n color: var(--color-text) !important;\n }\n\n &__link {\n font-weight: bold;\n }\n }\n }\n}\n\n.tabby-promo-wrapper {\n #tabby-promo {\n font-family: var(--font-main) !important;\n\n .tabby-promo {\n &__feature-title {\n font-size: var(--font-md);\n }\n\n &__feature-desc {\n font-size: var(--font-sm);\n line-height: 20px;\n }\n }\n }\n}\n\n/*\n* Installment::Tamara & Spotii\n*/\n.tamara-product-widget{\n margin-bottom: 20px;\n}\n\n.tamara-product-widget,\n.spotii-wrapper {\n min-height: 100px;\n position: relative;\n color: var(--color-text);\n font-size: var(--font-sm);\n line-height: 1.25;\n padding: 18px 20px 18px 100px !important;\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n\n .salla-y &{\n border-radius: 12px;\n border: 1px solid var(--color-grey-dark);\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n .spotii-logo {\n float: left;\n margin: 0 0 0 -75px;\n }\n}\n.ltr .tamara-product-widget,\n.ltr .spotii-wrapper{\n text-align: left;\n padding: 18px 100px 18px 20px !important;\n .spotii-logo {\n float: right;\n margin: 0 -75px 0 0;\n }\n .spotii-product-widget {\n text-align: left !important;\n }\n}\n\n.spotii-wrapper {\n margin-bottom: 20px;\n .spotii-promo {\n font-size: var(--font-md);\n }\n\n .spotii-product-widget {\n font-size: var(--font-sm) !important;\n margin-top: 10px;\n }\n}\n\n.tamara-product-widget{\n .tamara-logo {\n position: absolute;\n left: 20px;\n top: 18px;\n margin: 0 !important;\n\n .ltr &{\n right: 20px;\n left: auto;\n }\n }\n\n span {\n font-family: var(--font-main);\n font-size: var(--font-sm);\n color: var(--color-text);\n\n &:last-child {\n display: block;\n position: relative;\n margin-top: 8px;\n }\n }\n}\n\n.tamara-popup {\n &__wrap {\n overflow: auto !important;\n }\n}\n","import {Component, Host, h, Prop, State} from '@stencil/core';\n\n@Component({\n tag: 'salla-installment',\n styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n private tabbyBorderRemoved: boolean = false;\n private tabbyRemoveBorderTries: number = 0;\n\n constructor() {\n salla.lang.onLoaded(() => {\n const installment = salla.config.get('store.settings.installments');\n if (installment) {\n this.tamaraIsActive = installment.includes('tamara_installment');\n this.tabbyIsActive = installment.includes('tabby_installment');\n this.spotiiIsActive = installment.includes('spotii_pay');\n }\n this.renderInstallments();\n });\n }\n\n /**\n * Current product price\n */\n @Prop() price: string;\n /**\n * Language code\n */\n @Prop() language: string = salla.config.get('user.language_code');\n /**\n * Currency code\n */\n @Prop() currency: string = salla.config.get('user.currency_code');\n\n @State() tamaraIsActive: boolean;\n @State() tabbyIsActive: boolean;\n @State() spotiiIsActive: boolean;\n\n render() {\n return (\n <Host>\n {this.tamaraIsActive ?\n <div class=\"tamara-product-widget\"\n data-price={this.price}\n data-currency={this.currency}\n data-lang={this.language}\n data-payment-type=\"installment\">\n </div>\n : ''}\n\n {this.tabbyIsActive ?\n <div id=\"tabbyPromoWrapper\">\n <div id=\"tabbyPromo\"></div>\n </div>\n : ''}\n\n {this.spotiiIsActive ?\n <div class=\"spotii-wrapper\">\n {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n <div class=\"spotii-promo\"></div>\n </div>\n : ''}\n </Host>\n );\n }\n\n renderInstallments() {\n // Tamara\n if (this.tamaraIsActive) {\n var script = document.createElement('script');\n script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n document.head.appendChild(script);\n script.onload = () => {\n window.TamaraProductWidget.init({lang: this.language})\n setTimeout(() => {\n window.TamaraProductWidget.render()\n }, 300)\n }\n }\n\n // tabby\n if (this.tabbyIsActive) {\n var script = document.createElement('script');\n script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n document.head.appendChild(script);\n script.onload = () => {\n const TabbyPromo = window.TabbyPromo;\n new TabbyPromo({\n selector: '#tabbyPromo',\n currency: this.currency,\n price: this.price,\n lang: this.language,\n });\n document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n element.setAttribute('aria-label', 'Tabby Logo')\n });\n }\n //this is workaround to remove the default border and add margin\n this.removeTabbyBorder();\n }\n\n // Spotii\n if (this.spotiiIsActive) {\n let amount = salla.money((Number(this.price) / 3).toFixed(2));\n let isRTL = salla.config.get('theme.is_rtl', true);\n window.spotiiConfig = {\n targetXPath: ['.spotii-wrapper'],\n renderToPath: ['.spotii-promo'],\n numberOfPayment: 3,\n currency: this.currency,\n templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n //todo:: translate these\n textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n textThree: \"مع\",\n price: this.price,\n // forcedShow: false,\n // merchantID: null,\n }\n\n var script = document.createElement('script');\n\n script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n document.head.appendChild(script);\n // script.onload = () => {\n // // setTimeout()\n // }\n }\n\n }\n\n /**\n * this is workaround to remove the default border and add margin\n * we will try to remove tabby border 5 times for 7.5 seconds\n */\n removeTabbyBorder() {\n if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n return;\n }\n this.tabbyRemoveBorderTries++;\n setTimeout(() => {\n let promo: any = document.querySelector('#tabbyPromo>div>div');\n promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n if (promo) {\n promo.style = 'border: none; margin: 15px 0!important;';\n this.tabbyBorderRemoved = true;\n } else {\n this.removeTabbyBorder();\n }\n }, this.tabbyRemoveBorderTries * 500)\n }\n}\n"],"mappings":";;;mEAAA,IAAMA,oBAAsB,ovG,ICOfC,iBAAgB,WAI3B,SAAAA,EAAAC,GAAA,IAAAC,EAAAC,K,yBAHQA,KAAAC,mBAA8B,MAC9BD,KAAAE,uBAAiC,E,mCAqBdC,MAAMC,OAAOC,IAAI,sB,cAIjBF,MAAMC,OAAOC,IAAI,sB,yFAtB1CF,MAAMG,KAAKC,UAAS,WAClB,IAAMC,EAAcL,MAAMC,OAAOC,IAAI,+BACrC,GAAIG,EAAa,CACfT,EAAKU,eAAiBD,EAAYE,SAAS,sBAC3CX,EAAKY,cAAgBH,EAAYE,SAAS,qBAC1CX,EAAKa,eAAiBJ,EAAYE,SAAS,a,CAE7CX,EAAKc,oB,IAqBThB,EAAAiB,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,KACFjB,KAAKS,eACJO,EAAA,OAAKE,MAAM,wBAAuB,aACjBlB,KAAKmB,MAAK,gBACPnB,KAAKoB,SAAQ,YACjBpB,KAAKqB,SAAQ,oBACN,gBAErB,GAEHrB,KAAKW,cACJK,EAAA,OAAKM,GAAG,qBACNN,EAAA,OAAKM,GAAG,gBAER,GAEHtB,KAAKY,eACJI,EAAA,OAAKE,MAAM,kBAETF,EAAA,OAAKE,MAAM,kBAEX,G,EAKVrB,EAAAiB,UAAAD,mBAAA,eAAAd,EAAAC,KAEE,GAAIA,KAAKS,eAAgB,CACvB,IAAIc,EAASC,SAASC,cAAc,UACpCF,EAAOG,aAAa,MAAO,sDAC3BF,SAASG,KAAKC,YAAYL,GAC1BA,EAAOM,OAAS,WACdC,OAAOC,oBAAoBC,KAAK,CAAC1B,KAAMP,EAAKsB,WAC5CY,YAAW,WACTH,OAAOC,oBAAoBhB,Q,GAC1B,I,EAKP,GAAIf,KAAKW,cAAe,CACtB,IAAIY,EAASC,SAASC,cAAc,UACpCF,EAAOG,aAAa,MAAO,4CAC3BF,SAASG,KAAKC,YAAYL,GAC1BA,EAAOM,OAAS,WACd,IAAMK,EAAaJ,OAAOI,WAC1B,IAAIA,EAAW,CACbC,SAAU,cACVf,SAAUrB,EAAKqB,SACfD,MAAOpB,EAAKoB,MACZb,KAAMP,EAAKsB,WAEbG,SAASY,iBAAiB,8BAA8BC,SAAQ,SAAUC,GACxEA,EAAQZ,aAAa,aAAc,a,KAIvC1B,KAAKuC,mB,CAIP,GAAIvC,KAAKY,eAAgB,CACvB,IAAI4B,EAASrC,MAAMsC,OAAOC,OAAO1C,KAAKmB,OAAS,GAAGwB,QAAQ,IAC1D,IAAIC,EAAQzC,MAAMC,OAAOC,IAAI,eAAgB,MAC7CyB,OAAOe,aAAe,CACpBC,YAAa,CAAC,mBACdC,aAAc,CAAC,iBACfC,gBAAiB,EACjB5B,SAAUpB,KAAKoB,SACf6B,aAAc,mCAAqCT,EAAS,kBAE5DU,QAASN,EAAQ,gBAAkB,gBACnCO,QAASP,EAAQ,yCAA2C,cAC5DQ,UAAW,KACXjC,MAAOnB,KAAKmB,OAKd,IAAII,EAASC,SAASC,cAAc,UAEpCF,EAAOG,aAAa,MAAOvB,MAAMkD,IAAIC,IAAI,gCACzC9B,SAASG,KAAKC,YAAYL,E,GAY9B1B,EAAAiB,UAAAyB,kBAAA,eAAAxC,EAAAC,KACE,GAAIA,KAAKC,oBAAsBD,KAAKE,uBAAyB,EAAG,CAC9D,M,CAEFF,KAAKE,yBACL+B,YAAW,WACT,IAAIsB,EAAa/B,SAASgC,cAAc,uBACxCD,EAAQA,EAAQA,EAAME,WAAWD,cAAc,+CAAiD,KAChG,GAAID,EAAO,CACTA,EAAMG,MAAQ,0CACd3D,EAAKE,mBAAqB,I,KACrB,CACLF,EAAKwC,mB,IAENvC,KAAKE,uBAAyB,I,WAhJR,G"}
1
+ {"version":3,"names":["sallaInstallmentCss","SallaInstallment","hostRef","_this","this","tabbyBorderRemoved","tabbyRemoveBorderTries","salla","config","get","lang","onLoaded","installment","tamaraIsActive","includes","tabbyIsActive","spotiiIsActive","renderInstallments","event","on","_a","data","price","prototype","render","h","Host","class","currency","language","id","isUpdating","oldTamaraScript","document","querySelector","remove","tamaraScript","createElement","setAttribute","head","appendChild","onload","window","TamaraProductWidget","init","setTimeout","oldTabbyWrapper","host","tabbyPromoWrapper","tabbyPromo","oldTabbyScript","tabbyScript","TabbyPromo","selector","querySelectorAll","forEach","element","removeTabbyBorder","oldSpotiiWrapper","spotiiPromoWrapper","classList","add","spotiiPromo","oldSpotiiScript","url","cdn","amount","money","Number","toFixed","isRTL","spotiiConfig","targetXPath","renderToPath","numberOfPayment","templateLine","textOne","textTwo","textThree","spotiiScript","promo","shadowRoot","style"],"sources":["src/components/salla-installment/salla-installment.scss?tag=salla-installment","src/components/salla-installment/salla-installment.tsx"],"sourcesContent":["/*\n The whole installment methods is a third-party widgets,\n So there aren't a custom classes (as other components) to style them.\n*/\n\nsalla-installment:empty {\n display: none;\n}\n/*\n* Installment::Tabby\n*/\n#tabbyPromoWrapper {\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n margin-bottom: 20px;\n\n .salla-y &{\n border: 1px solid var(--color-grey-dark);\n border-radius: 12px\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n\n #tabbyPromo {\n * {\n font-family: var(--font-main);\n }\n\n > div > div {\n max-width: none;\n //padding: 15px;\n box-shadow: none;\n border: none;\n }\n\n .tabby-promo-snippet {\n max-width: 100%;\n min-height: 100px;\n padding: 18px 20px;\n // border-color: var(--color-grey-dark);\n border: none !important;\n\n\n &__text, &__link {\n font-size: var(--font-sm);\n color: var(--color-text) !important;\n }\n\n &__link {\n font-weight: bold;\n }\n }\n }\n}\n\n.tabby-promo-wrapper {\n #tabby-promo {\n font-family: var(--font-main) !important;\n\n .tabby-promo {\n &__feature-title {\n font-size: var(--font-md);\n }\n\n &__feature-desc {\n font-size: var(--font-sm);\n line-height: 20px;\n }\n }\n }\n}\n\n/*\n* Installment::Tamara & Spotii\n*/\n.tamara-product-widget{\n margin-bottom: 20px;\n}\n\n.tamara-product-widget,\n.spotii-wrapper {\n min-height: 100px;\n position: relative;\n color: var(--color-text);\n font-size: var(--font-sm);\n line-height: 1.25;\n padding: 18px 20px 18px 100px !important;\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n\n .salla-y &{\n border-radius: 12px;\n border: 1px solid var(--color-grey-dark);\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n .spotii-logo {\n float: left;\n margin: 0 0 0 -75px;\n }\n}\n.ltr .tamara-product-widget,\n.ltr .spotii-wrapper{\n text-align: left;\n padding: 18px 100px 18px 20px !important;\n .spotii-logo {\n float: right;\n margin: 0 -75px 0 0;\n }\n .spotii-product-widget {\n text-align: left !important;\n }\n}\n\n.spotii-wrapper {\n margin-bottom: 20px;\n .spotii-promo {\n font-size: var(--font-md);\n }\n\n .spotii-product-widget {\n font-size: var(--font-sm) !important;\n margin-top: 10px;\n }\n}\n\n.tamara-product-widget{\n .tamara-logo {\n position: absolute;\n left: 20px;\n top: 18px;\n margin: 0 !important;\n\n .ltr &{\n right: 20px;\n left: auto;\n }\n }\n\n span {\n font-family: var(--font-main);\n font-size: var(--font-sm);\n color: var(--color-text);\n\n &:last-child {\n display: block;\n position: relative;\n margin-top: 8px;\n }\n }\n}\n\n.tamara-popup {\n &__wrap {\n overflow: auto !important;\n }\n}\n","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n tag: 'salla-installment',\n styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n private tabbyBorderRemoved: boolean = false;\n private tabbyRemoveBorderTries: number = 0;\n @Element() host: HTMLElement;\n constructor() {\n salla.lang.onLoaded(() => {\n const installment = salla.config.get('store.settings.installments');\n if (installment) {\n this.tamaraIsActive = installment.includes('tamara_installment');\n this.tabbyIsActive = installment.includes('tabby_installment');\n this.spotiiIsActive = installment.includes('spotii_pay');\n }\n this.renderInstallments();\n });\n\n salla.event.on('product::price.updated', ({ data }) => {\n if (!data.price || data.price == this.price) {\n return;\n }\n this.price = data.price;\n this.renderInstallments(true);\n });\n }\n\n /**\n * Current product price\n */\n @Prop() price: string;\n /**\n * Language code\n */\n @Prop() language: string = salla.config.get('user.language_code');\n /**\n * Currency code\n */\n @Prop() currency: string = salla.config.get('user.currency_code');\n\n @State() tamaraIsActive: boolean;\n @State() tabbyIsActive: boolean;\n @State() spotiiIsActive: boolean;\n\n render() {\n return (\n <Host>\n {this.tamaraIsActive ?\n <div class=\"tamara-product-widget\"\n data-price={this.price}\n data-currency={this.currency}\n data-lang={this.language}\n data-payment-type=\"installment\">\n </div>\n : ''}\n\n {this.tabbyIsActive ?\n <div id=\"tabbyPromoWrapper\">\n <div id=\"tabbyPromo\"></div>\n </div>\n : ''}\n\n {this.spotiiIsActive ?\n <div class=\"spotii-wrapper\">\n {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n <div class=\"spotii-promo\"></div>\n </div>\n : ''}\n </Host>\n );\n }\n\n renderInstallments(isUpdating: boolean = false) {\n // Tamara\n if (this.tamaraIsActive) {\n if (isUpdating) {\n var oldTamaraScript = document.querySelector('script[src=\"https://cdn.tamara.co/widget/product-widget.min.js\"]');\n if (oldTamaraScript) {\n oldTamaraScript.remove();\n }\n }\n\n var tamaraScript = document.createElement('script');\n tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n document.head.appendChild(tamaraScript);\n tamaraScript.onload = () => {\n window.TamaraProductWidget.init({ lang: this.language });\n setTimeout(() => {\n window.TamaraProductWidget.render();\n }, 300);\n };\n }\n\n // tabby\n if (this.tabbyIsActive) {\n if (isUpdating) {\n\n // remove #tabbyPromoWrapper and re append it\n var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');\n if (oldTabbyWrapper) {\n oldTabbyWrapper.remove();\n }\n\n var tabbyPromoWrapper = document.createElement('div');\n tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');\n var tabbyPromo = document.createElement('div');\n tabbyPromo.setAttribute('id', 'tabbyPromo');\n tabbyPromoWrapper.appendChild(tabbyPromo);\n this.host.appendChild(tabbyPromoWrapper);\n\n var oldTabbyScript = document.querySelector('script[src=\"https://checkout.tabby.ai/tabby-promo.js\"]');\n if (oldTabbyScript) {\n oldTabbyScript.remove();\n }\n }\n\n var tabbyScript = document.createElement('script');\n tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n document.head.appendChild(tabbyScript);\n tabbyScript.onload = () => {\n const TabbyPromo = window.TabbyPromo;\n new TabbyPromo({\n selector: '#tabbyPromo',\n currency: this.currency,\n price: this.price,\n lang: this.language,\n });\n document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n element.setAttribute('aria-label', 'Tabby Logo');\n });\n }\n // this is a workaround to remove the default border and add margin\n this.removeTabbyBorder();\n }\n\n // Spotii\n if (this.spotiiIsActive) {\n if (isUpdating) {\n\n var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');\n if (oldSpotiiWrapper) {\n oldSpotiiWrapper.remove();\n }\n\n var spotiiPromoWrapper = document.createElement('div');\n spotiiPromoWrapper.classList.add('spotii-wrapper');\n var spotiiPromo = document.createElement('div');\n spotiiPromo.classList.add('spotii-promo');\n spotiiPromoWrapper.appendChild(spotiiPromo);\n this.host.appendChild(spotiiPromoWrapper);\n var oldSpotiiScript = document.querySelector('script[src=\"' + salla.url.cdn('js/price-widget-ar-salla.js') + '\"]');\n if (oldSpotiiScript) {\n oldSpotiiScript.remove();\n }\n }\n\n let amount = salla.money((Number(this.price) / 3).toFixed(2));\n let isRTL = salla.config.get('theme.is_rtl', true);\n window.spotiiConfig = {\n targetXPath: ['.spotii-wrapper'],\n renderToPath: ['.spotii-promo'],\n numberOfPayment: 3,\n currency: this.currency,\n templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n //todo:: translate these\n textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n textThree: \"مع\",\n price: this.price,\n // forcedShow: false,\n // merchantID: null,\n };\n\n var spotiiScript = document.createElement('script');\n spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n document.head.appendChild(spotiiScript);\n // spotiiScript.onload = () => {\n // // setTimeout()\n // }\n }\n }\n\n\n /**\n * this is workaround to remove the default border and add margin\n * we will try to remove tabby border 5 times for 7.5 seconds\n */\n removeTabbyBorder() {\n if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n return;\n }\n this.tabbyRemoveBorderTries++;\n setTimeout(() => {\n let promo: any = document.querySelector('#tabbyPromo>div>div');\n promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n if (promo) {\n promo.style = 'border: none; margin: 15px 0!important;';\n this.tabbyBorderRemoved = true;\n } else {\n this.removeTabbyBorder();\n }\n }, this.tabbyRemoveBorderTries * 500)\n }\n}\n"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
- var __awaiter=this&&this.__awaiter||function(t,n,e,o){function i(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,a){function r(t){try{l(o.next(t))}catch(t){a(t)}}function s(t){try{l(o["throw"](t))}catch(t){a(t)}}function l(t){t.done?e(t.value):i(t.value).then(r,s)}l((o=o.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,i,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(n){return l([t,n])}}function l(s){if(o)throw new TypeError("Generator is already executing.");while(r&&(r=0,s[0]&&(e=0)),e)try{if(o=1,i&&(a=s[0]&2?i["return"]:s[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,s[1])).done)return a;if(i=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:e.label++;return{value:s[1],done:false};case 5:e.label++;i=s[1];s=[0];continue;case 7:s=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){e=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){e.label=s[1];break}if(s[0]===6&&e.label<a[1]){e.label=a[1];a=s;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(s);break}if(a[2])e.ops.pop();e.trys.pop();continue}s=n.call(t,e)}catch(t){s=[6,t];i=0}finally{o=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};
1
+ var __awaiter=this&&this.__awaiter||function(t,n,e,i){function o(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,a){function r(t){try{l(i.next(t))}catch(t){a(t)}}function s(t){try{l(i["throw"](t))}catch(t){a(t)}}function l(t){t.done?e(t.value):o(t.value).then(r,s)}l((i=i.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,o,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(n){return l([t,n])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(r&&(r=0,s[0]&&(e=0)),e)try{if(i=1,o&&(a=s[0]&2?o["return"]:s[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,s[1])).done)return a;if(o=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:e.label++;return{value:s[1],done:false};case 5:e.label++;o=s[1];s=[0];continue;case 7:s=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){e=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){e.label=s[1];break}if(s[0]===6&&e.label<a[1]){e.label=a[1];a=s;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(s);break}if(a[2])e.ops.pop();e.trys.pop();continue}s=n.call(t,e)}catch(t){s=[6,t];o=0}finally{i=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};
2
2
  /*!
3
3
  * Crafted with ❤ by Salla
4
- */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c5e788f5.js";import{C as CameraIcon}from"./camera-647ab50f.js";var DisplayType;(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"})(DisplayType||(DisplayType={}));var Currency;(function(t){t["Sar"]="SAR"})(Currency||(Currency={}));var CheckCircleIcon='\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>check</title>\n<path d="M27.521 6.976c-0.569-0.472-1.407-0.393-1.879 0.171l-12.567 15.080-7.003-4.668c-0.615-0.411-1.441-0.244-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l8 5.333c0.227 0.149 0.484 0.223 0.739 0.223 0.384 0 0.763-0.165 1.027-0.48l13.333-16c0.471-0.565 0.393-1.407-0.171-1.877z"></path>\n</svg>\n';var FileIcon='\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';var sallaProductOptionsCss="";var SallaProductOptions=function(){function t(t){var n=this;registerInstance(this,t);this.changed=createEvent(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=function(t){t.preventDefault();t.stopPropagation();n.isCustomDonation=t.target.value==="custom";if(n.donationInput){if(t.target.value==="custom"){n.donationInput.value="";n.donationInput.focus()}else{n.donationInput.value=t.target.value}}};this.hideLabel=function(t){if(t.type===DisplayType.DONATION&&(t.donation&&!t.donation.can_donate)){return true}return false};this.getExpireDonationMessage=function(t){if(!t.donation){return}var n=t.donation.target_amount<=t.donation.collected_amount;return h("div",{class:{"s-product-options-donation-message":true,"s-product-options-donation-completed":n,"s-product-options-donation-expired":!n}},h("p",null,t.donation.target_message),h("span",null,n?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.products.notify_options_availability");salla.lang.onLoaded((function(){n.outOfStockText=salla.lang.get("pages.products.out_of_stock");n.donationAmount=salla.lang.get("pages.products.donation_amount");n.selectDonationAmount=salla.lang.getWithDefault("pages.products.select_donation_amount","تحديد مبلغ التبرع");n.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((function(t){return n.setOptionsData(t.data.options)}))}}t.prototype.setOptionsData=function(t){var n,e;this.optionsData=t;var o=this;(e=(n=this.optionsData[0])===null||n===void 0?void 0:n.details)===null||e===void 0?void 0:e.forEach((function(t){Object.entries(t.skus_availability||{}).filter((function(t){return!t[1]})).map((function(t){return o.outSkus.push(Number(t[0]))}))}))};t.prototype.getSelectedOptionsData=function(){return __awaiter(this,void 0,void 0,(function(){var t,n;return __generator(this,(function(e){t={};n=this.host.getElementSallaData();n.forEach((function(n,e){e.startsWith("options[")&&(t[e.replace("options[","").replace("]","")]=n)}));return[2,t]}))}))};t.prototype.reportValidity=function(){return __awaiter(this,void 0,void 0,(function(){var t,n,e;return __generator(this,(function(o){t=this.host.querySelectorAll("[required]");n=true;for(e=0;e<t.length;e++){if("reportValidity"in t[e]&&!t[e].reportValidity()){n=false}}return[2,n]}))}))};t.prototype.hasOutOfStockOption=function(){return __awaiter(this,void 0,void 0,(function(){var t,n;var e=this;return __generator(this,(function(o){return[2,this.selectedOptions.some((function(t){return t.is_out}))||((t=this.selectedSkus)===null||t===void 0?void 0:t.length)&&((n=this.selectedSkus)===null||n===void 0?void 0:n.every((function(t){return e.outSkus.includes(t)})))]}))}))};t.prototype.getSelectedOptions=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.selectedOptions]}))}))};t.prototype.getOption=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){return[2,this.optionsData.find((function(n){return n.id===t}))]}))}))};t.prototype.invalidHandler=function(t,n){var e=t.target.closest(".s-product-options-option");if(!salla.url.is_page("cart")){e.scrollIntoView({behavior:"smooth",block:"center"})}e.classList.add("s-product-options-option-error")};t.prototype.changedHandler=function(t,n){var e={event:t,option:n,detail:null};if(n.details){var o=n.details.find((function(n){return Number(n.id)===Number(t.target.value)}));e.detail=o}var i=t.target.closest(".s-product-options-option");if(t.target.value||(n.type==DisplayType.FILE||n.type==DisplayType.IMAGE)&&t.type==="added"||n.type==DisplayType.MAP&&t.type==="selected"&&(t.target.lat&&t.target.lng)){setTimeout((function(){i.classList.remove("s-product-options-option-error")}),200)}var a=this.selectedOptions.findIndex((function(t){return t.option_id===e.option.id}));a>-1?this.selectedOptions[a]=Object.assign(Object.assign({},e.detail),{option_id:e.option.id}):this.selectedOptions.push(Object.assign(Object.assign({},e.detail),{option_id:e.option.id}));this.setSelectedSkus();this.handleRequiredMultipleOptions(n);this.changed.emit(e);salla.event.emit("product-options::change",e)};t.prototype.setSelectedSkus=function(){this.selectedSkus=this.selectedOptions.map((function(t){return Object.keys(t.skus_availability||{})})).reduce((function(t,n){return t.filter((function(t){return n.includes(t)}))})).map((function(t){return Number(t)}))};t.prototype.handleRequiredMultipleOptions=function(t){if(t.type!==DisplayType.MULTIPLE_OPTIONS||!t.required){return}var n=this.host.querySelector('[data-option-id="'.concat(t.id,'"]'));var e=n.querySelectorAll("input:checked").length;n.querySelectorAll("input").forEach((function(t){return t.toggleAttribute("required",!e)}))};t.prototype.getLatLng=function(t,n){return t?t.split(",")[n=="lat"?0:1]:""};t.prototype.getDisplayForType=function(t){if(this["".concat(t.type,"Option")]){return this["".concat(t.type,"Option")](t)}if(t.type===DisplayType.COLOR_PICKER){return this.colorPickerOption(t)}if(t.type===DisplayType.MULTIPLE_OPTIONS){return this.multipleOptions(t)}if(t.type===DisplayType.SINGLE_OPTION){return this.singleOption(t)}salla.log("Couldn't find options type(".concat(t.type,")😢"));return""};t.prototype.getOptionShownWhen=function(t){return t.visibility_condition?{"data-show-when":"options[".concat(t.visibility_condition.option,"] ").concat(t.visibility_condition.operator," ").concat(t.visibility_condition.value)}:{}};t.prototype.componentWillLoad=function(){this.outOfStockText=salla.lang.get("pages.products.out_of_stock");return salla.api.cart.getCurrentCartId()};t.prototype.render=function(){var t=this;var n;if(((n=this.optionsData)===null||n===void 0?void 0:n.length)==0){return}return h(Host,{class:"s-product-options-wrapper"},h("salla-conditional-fields",null,this.optionsData.map((function(n){return h("div",Object.assign({class:"s-product-options-option-container".concat(n.visibility_condition?" hidden":""),"data-option-id":n.id},t.getOptionShownWhen(n)),n.name=="splitter"?t.splitterOption():h("div",{class:"s-product-options-option","data-option-type":n.type,"data-option-required":"".concat(n.required)},h("label",{htmlFor:"options["+n.id+"]",class:"s-product-options-option-label ".concat(t.hideLabel(n)?"s-product-options-option-label-hidden":"")},h("b",null,n.name,n.required&&h("span",null," * ")," "),h("small",null,n.placeholder)),h("div",{class:"s-product-options-option-content ".concat(t.hideLabel(n)?"s-product-options-option-content-full-width":"")},t.getDisplayForType(n))))}))))};t.prototype.donationOption=function(t,n){var e=this;var o,i;return h("div",{class:"s-product-options-donation-wrapper"},((o=t.donation)===null||o===void 0?void 0:o.can_donate)?[t.donation?h("div",{class:"s-product-options-donation-progress"},h("salla-progress-bar",{donation:t.donation})):"",t.details.length?[h("h4",null,this.selectAmount),h("div",{class:"s-product-options-donation-options"},t.details.map((function(t,n){return h("div",{class:"s-product-options-donation-options-item"},h("input",{id:"donation-option-".concat(n),type:"radio",name:"donating_option",checked:t.is_selected,value:t.additional_price,onChange:function(t){return e.handleDonationOptions(t)}}),h("label",{htmlFor:"donation-option-".concat(n)},h("span",null,salla.money(t.name))))})),((i=t.donation)===null||i===void 0?void 0:i.custom_amount_enabled)?h("div",{class:"s-product-options-donation-options-item"},h("input",{id:"donation-option-custom",type:"radio",name:"donating_option",value:"custom",onChange:function(t){return e.handleDonationOptions(t)}}),h("label",{htmlFor:"donation-option-custom"},h("span",null," ",this.selectDonationAmount," "))):"")]:"",h("div",{class:{"s-product-options-donation-input-group":true,shown:!t.details.length||t.details.length&&this.isCustomDonation}},h("input",{type:"text",id:"donating-amount",name:"donation_amount",class:"s-form-control",ref:function(t){return e.donationInput=t},value:t.details.length&&t.details.some((function(t){return t.is_selected}))?t.details.find((function(t){return t.is_selected})).additional_price:t.value,placeholder:t.placeholder,onInput:function(t){return salla.helpers.inputDigitsOnly(t.target)},onBlur:function(n){return e.changedHandler(n,t)},onInvalid:function(n){return e.invalidHandler(n,t)}}),h("span",{class:"s-product-options-donation-amount-currency"},salla.config.currency(salla.config.get("user.currency_code")).symbol))]:this.getExpireDonationMessage(t))};t.prototype.fileUploader=function(t,n){var e=this;if(n===void 0){n=null}return h("salla-file-upload",Object.assign({},n||{},{"payload-name":"file",value:t.value,"instant-upload":true,name:"options[".concat(t.id,"]"),required:t.required,height:"120px",onAdded:function(n){return e.changedHandler(n,t)},url:salla.cart.api.getUploadImageEndpoint(),"form-data":{cart_item_id:this.productId,product_id:this.productId},onInvalidInput:function(n){return e.invalidHandler(n,t)},class:{"s-product-options-image-input":true,required:t.required}}),h("div",{class:"s-product-options-filepond-placeholder"},h("span",{class:"s-product-options-filepond-placeholder-icon",innerHTML:n.accept&&n.accept.split(",").every((function(t){return t.includes("image")}))?CameraIcon:FileIcon}),h("p",{class:"s-product-options-filepond-placeholder-text"},salla.lang.get("common.uploader.drag_and_drop")),h("span",{class:"filepond--label-action"},salla.lang.get("common.uploader.browse"))))};t.prototype.imageOption=function(t){return this.fileUploader(t,{accept:"image/png,image/jpeg,image/jpg,image/gif"})};t.prototype.fileOption=function(t){var n=this;var e=t.details.map((function(t){return n.fileTypes[t.name]})).filter(Boolean);return(e===null||e===void 0?void 0:e.length)?this.fileUploader(t,{accept:e.join(",")}):"File types not selected."};t.prototype.numberOption=function(t){var n=this;return h("input",{type:"text",value:t.value,class:"s-form-control",required:t.required,name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onBlur:function(e){return n.changedHandler(e,t)},onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(t){return salla.helpers.inputDigitsOnly(t.target)}})};t.prototype.splitterOption=function(){return h("div",{class:"s-product-options-splitter"})};t.prototype.textOption=function(t){var n=this;return h("div",{class:"s-product-options-text"},h("input",{type:"text",value:t.value,class:"s-form-control",required:t.required,name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(e){return n.changedHandler(e,t)}}))};t.prototype.textareaOption=function(t){var n=this;return h("div",{class:"s-product-options-textarea"},h("div",{class:"mt-1"},h("textarea",{rows:4,value:t.value,class:"s-form-control",required:t.required,id:"options[".concat(t.id,"]"),name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(e){return n.changedHandler(e,t)}})))};t.prototype.mapOption=function(t){var n=this;return h("salla-map",{zoom:15,lat:this.getLatLng(t.value,"lat"),lng:this.getLatLng(t.value,"lng"),name:"options[".concat(t.id,"]"),searchable:true,required:t.required,onInvalidInput:function(e){return n.invalidHandler(e,t)},onSelected:function(e){return n.changedHandler(e,t)}})};t.prototype.colorPickerOption=function(t){var n=this;return h("salla-color-picker",{onSubmitted:function(e){return n.changedHandler(e,t)},name:"options[".concat(t.id,"]"),required:t.required,onInvalidInput:function(e){return n.invalidHandler(e,t)},color:t.value})};t.prototype.timeOption=function(t){var n=this;return h("salla-datetime-picker",{noCalendar:true,enableTime:true,dateFormat:"h:i K",value:t.value,placeholder:t.name,required:t.required,name:"options[".concat(t.id,"]"),class:"s-product-options-time-element",onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}})};t.prototype.dateOption=function(t){var n=this;return h("div",{class:"s-product-options-date-element"},h("salla-datetime-picker",{value:t.value,placeholder:t.name,required:t.required,minDate:new Date,name:"options[".concat(t.id,"]"),onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}}))};t.prototype.datetimeOption=function(t){var n=this;return h("div",{class:"s-product-options-datetime-element"},h("salla-datetime-picker",{enableTime:true,value:t.value,dateFormat:"Y-m-d G:i:K",placeholder:t.name,required:t.required,name:"options[".concat(t.id,"]"),maxDate:t.to_date_time,minDate:t.from_date_time,onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}}))};t.prototype.getOptionDetailName=function(t,n,e){if(n===void 0){n=true}if(e&&e==DisplayType.COLOR){return t.name+(n&&this.isOptionDetailOut(t)?" <br/> <p> ".concat(this.outOfStockText," </p>"):"")+(t.additional_price?" <p> (".concat(salla.money(t.additional_price),") </p>"):"")}return t.name+(n&&this.isOptionDetailOut(t)?" - ".concat(this.outOfStockText):"")+(t.additional_price?" (".concat(salla.money(t.additional_price),")"):"")};t.prototype.isOptionDetailOut=function(t){var n=this;var e;if(t.is_out||!t.skus_availability||!((e=this.selectedSkus)===null||e===void 0?void 0:e.length)){return t.is_out}var o=this.selectedOptions.filter((function(n){return n.id==t.id})).length;if(o&&this.selectedOptions.length==1){return false}if(o){var i=this.selectedSkus.filter((function(t){return n.outSkus.includes(t)}));return Object.keys(t.skus_availability).some((function(t){return i.includes(Number(t))}))}return this.selectedOptions.some((function(n){return n.is_out&&n.option_id!==t.option_id}))};t.prototype.singleOption=function(t){var n=this;return h("div",null,h("select",{name:"options[".concat(t.id,"]"),required:t.required,class:"s-form-control",onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}},h("option",{value:""},t.placeholder),t===null||t===void 0?void 0:t.details.map((function(t){return h("option",{value:t.id,disabled:n.canDisabled&&n.isOptionDetailOut(t),selected:t.is_selected},n.getOptionDetailName(t))}))))};t.prototype.multipleOptions=function(t){var n=this;var e=t.required&&!t.details.some((function(t){return t.is_selected}));return h("div",{class:{"s-product-options-multiple-options-wrapper":true,required:t.required}},t===null||t===void 0?void 0:t.details.map((function(o){return h("div",null,h("input",{type:"checkbox",value:o.id,disabled:n.isOptionDetailOut(o),checked:o.is_selected,required:e,name:"options[".concat(t.id,"][]"),id:"field-".concat(t.id,"-").concat(o.id),onChange:function(e){return n.changedHandler(e,t)},onInvalid:function(e){return n.invalidHandler(e,t)},"aria-describedby":"options[".concat(t.id,"]-description")}),h("label",{htmlFor:"field-".concat(t.id,"-").concat(o.id)},n.getOptionDetailName(o)))})))};t.prototype.colorOption=function(t){var n=this;return h("fieldset",{class:"s-product-options-colors-wrapper"},t===null||t===void 0?void 0:t.details.map((function(e){return h("div",{class:"s-product-options-colors-item"},h("input",{type:"radio",value:e.id,required:t.required,checked:e.is_selected,name:"options[".concat(t.id,"]"),disabled:n.canDisabled&&n.isOptionDetailOut(e),id:"color-".concat(n.productId,"-").concat(t.id,"-").concat(e.id),onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}}),h("label",{htmlFor:"color-".concat(n.productId,"-").concat(t.id,"-").concat(e.id)},h("span",{style:{"background-color":e.color}}),h("div",{innerHTML:n.getOptionDetailName(e,true,t.type)})))})))};t.prototype.thumbnailOption=function(t){var n=this;return h("div",{class:"s-product-options-thumbnails-wrapper"},t.details.map((function(e){return h("div",null,h("input",{type:"radio",value:e.id,"data-itemid":e.id,required:t.required,checked:e.is_selected,name:"options[".concat(t.id,"]"),"data-img-id":e.option_value,disabled:n.canDisabled&&n.isOptionDetailOut(e),id:"option_".concat(n.productId,"-").concat(t.id,"_").concat(e.id),onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}}),h("label",{htmlFor:"option_".concat(n.productId,"-").concat(t.id,"_").concat(e.id),"data-img-id":e.option_value,class:"go-to-slide"},h("img",{"data-src":e.image,src:e.image,title:e.name,alt:e.name}),h("span",{innerHTML:CheckCircleIcon,class:"s-product-options-thumbnails-icon"}),n.isOptionDetailOut(e)?[h("small",{class:"s-product-options-thumbnails-stock-badge"},n.outOfStockText),n.canDisabled?h("div",{class:"s-product-options-thumbnails-badge-overlay"}):""]:""),h("p",null,n.getOptionDetailName(e,false)," "))})))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaProductOptions.style=sallaProductOptionsCss;export{SallaProductOptions as salla_product_options};
4
+ */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c5e788f5.js";import{C as CameraIcon}from"./camera-647ab50f.js";var DisplayType;(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"})(DisplayType||(DisplayType={}));var Currency;(function(t){t["Sar"]="SAR"})(Currency||(Currency={}));var CheckCircleIcon='\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>check</title>\n<path d="M27.521 6.976c-0.569-0.472-1.407-0.393-1.879 0.171l-12.567 15.080-7.003-4.668c-0.615-0.411-1.441-0.244-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l8 5.333c0.227 0.149 0.484 0.223 0.739 0.223 0.384 0 0.763-0.165 1.027-0.48l13.333-16c0.471-0.565 0.393-1.407-0.171-1.877z"></path>\n</svg>\n';var FileIcon='\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';var sallaProductOptionsCss="";var SallaProductOptions=function(){function t(t){var n=this;registerInstance(this,t);this.changed=createEvent(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=function(t){t.preventDefault();t.stopPropagation();n.isCustomDonation=t.target.value==="custom";if(n.donationInput){if(t.target.value==="custom"){n.donationInput.value="";n.donationInput.focus()}else{n.donationInput.value=t.target.value}}};this.hideLabel=function(t){if(t.type===DisplayType.DONATION&&(t.donation&&!t.donation.can_donate)){return true}return false};this.getExpireDonationMessage=function(t){if(!t.donation){return}var n=t.donation.target_amount<=t.donation.collected_amount;return h("div",{class:{"s-product-options-donation-message":true,"s-product-options-donation-completed":n,"s-product-options-donation-expired":!n}},h("p",null,t.donation.target_message),h("span",null,n?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.products.notify_options_availability");salla.lang.onLoaded((function(){n.outOfStockText=salla.lang.get("pages.products.out_of_stock");n.donationAmount=salla.lang.get("pages.products.donation_amount");n.selectDonationAmount=salla.lang.getWithDefault("pages.products.select_donation_amount","تحديد مبلغ التبرع");n.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((function(t){return n.setOptionsData(t.data.options)}))}}t.prototype.setOptionsData=function(t){var n,e;this.optionsData=t;var i=this;(e=(n=this.optionsData[0])===null||n===void 0?void 0:n.details)===null||e===void 0?void 0:e.forEach((function(t){Object.entries(t.skus_availability||{}).filter((function(t){return!t[1]})).map((function(t){return i.outSkus.push(Number(t[0]))}))}))};t.prototype.getSelectedOptionsData=function(){return __awaiter(this,void 0,void 0,(function(){var t,n;return __generator(this,(function(e){t={};n=this.host.getElementSallaData();n.forEach((function(n,e){e.startsWith("options[")&&(t[e.replace("options[","").replace("]","")]=n)}));return[2,t]}))}))};t.prototype.reportValidity=function(){return __awaiter(this,void 0,void 0,(function(){var t,n,e;return __generator(this,(function(i){t=this.host.querySelectorAll("[required]");n=true;for(e=0;e<t.length;e++){if("reportValidity"in t[e]&&!t[e].reportValidity()){n=false}}return[2,n]}))}))};t.prototype.hasOutOfStockOption=function(){return __awaiter(this,void 0,void 0,(function(){var t,n;var e=this;return __generator(this,(function(i){return[2,this.selectedOptions.some((function(t){return t.is_out}))||((t=this.selectedSkus)===null||t===void 0?void 0:t.length)&&((n=this.selectedSkus)===null||n===void 0?void 0:n.every((function(t){return e.outSkus.includes(t)})))]}))}))};t.prototype.getSelectedOptions=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.selectedOptions]}))}))};t.prototype.getOption=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){return[2,this.optionsData.find((function(n){return n.id===t}))]}))}))};t.prototype.invalidHandler=function(t,n){var e=t.target.closest(".s-product-options-option");if(!salla.url.is_page("cart")){e.scrollIntoView({behavior:"smooth",block:"center"})}e.classList.add("s-product-options-option-error")};t.prototype.changedHandler=function(t,n){var e={event:t,option:n,detail:null};if(n.details){var i=n.details.find((function(n){return Number(n.id)===Number(t.target.value)}));e.detail=i}var o=t.target.closest(".s-product-options-option");if(t.target.value||(n.type==DisplayType.FILE||n.type==DisplayType.IMAGE)&&t.type==="added"||n.type==DisplayType.MAP&&t.type==="selected"&&(t.target.lat&&t.target.lng)){setTimeout((function(){o.classList.remove("s-product-options-option-error")}),200)}var a=this.selectedOptions.findIndex((function(t){return t.option_id===e.option.id}));a>-1?this.selectedOptions[a]=Object.assign(Object.assign({},e.detail),{option_id:e.option.id}):this.selectedOptions.push(Object.assign(Object.assign({},e.detail),{option_id:e.option.id}));this.setSelectedSkus();this.handleRequiredMultipleOptions(n);this.changed.emit(e);salla.event.emit("product-options::change",e)};t.prototype.setSelectedSkus=function(){this.selectedSkus=this.selectedOptions.map((function(t){return Object.keys(t.skus_availability||{})})).reduce((function(t,n){return t.filter((function(t){return n.includes(t)}))})).map((function(t){return Number(t)}))};t.prototype.handleRequiredMultipleOptions=function(t){if(t.type!==DisplayType.MULTIPLE_OPTIONS||!t.required){return}var n=this.host.querySelector('[data-option-id="'.concat(t.id,'"]'));var e=n.querySelectorAll("input:checked").length;n.querySelectorAll("input").forEach((function(t){return t.toggleAttribute("required",!e)}))};t.prototype.getLatLng=function(t,n){return t?t.split(",")[n=="lat"?0:1]:""};t.prototype.getDisplayForType=function(t){if(this["".concat(t.type,"Option")]){return this["".concat(t.type,"Option")](t)}if(t.type===DisplayType.COLOR_PICKER){return this.colorPickerOption(t)}if(t.type===DisplayType.MULTIPLE_OPTIONS){return this.multipleOptions(t)}if(t.type===DisplayType.SINGLE_OPTION){return this.singleOption(t)}salla.log("Couldn't find options type(".concat(t.type,")😢"));return""};t.prototype.getOptionShownWhen=function(t){return t.visibility_condition?{"data-show-when":"options[".concat(t.visibility_condition.option,"] ").concat(t.visibility_condition.operator," ").concat(t.visibility_condition.value)}:{}};t.prototype.componentWillLoad=function(){this.outOfStockText=salla.lang.get("pages.products.out_of_stock");return salla.api.cart.getCurrentCartId()};t.prototype.render=function(){var t=this;var n;if(((n=this.optionsData)===null||n===void 0?void 0:n.length)==0){return}return h(Host,{class:"s-product-options-wrapper"},h("salla-conditional-fields",null,this.optionsData.map((function(n){return h("div",Object.assign({class:"s-product-options-option-container".concat(n.visibility_condition?" hidden":""),"data-option-id":n.id},t.getOptionShownWhen(n)),n.name=="splitter"?t.splitterOption():h("div",{class:"s-product-options-option","data-option-type":n.type,"data-option-required":"".concat(n.required)},h("label",{htmlFor:"options["+n.id+"]",class:"s-product-options-option-label ".concat(t.hideLabel(n)?"s-product-options-option-label-hidden":"")},h("b",null,n.name,n.required&&h("span",null," * ")," "),h("small",null,n.placeholder)),h("div",{class:"s-product-options-option-content ".concat(t.hideLabel(n)?"s-product-options-option-content-full-width":"")},t.getDisplayForType(n))))}))))};t.prototype.donationOption=function(t,n){var e=this;var i,o;return h("div",{class:"s-product-options-donation-wrapper"},((i=t.donation)===null||i===void 0?void 0:i.can_donate)?[t.donation?h("div",{class:"s-product-options-donation-progress"},h("salla-progress-bar",{donation:t.donation})):"",t.details.length?[h("h4",null,this.selectAmount),h("div",{class:"s-product-options-donation-options"},t.details.map((function(t,n){return h("div",{class:"s-product-options-donation-options-item"},h("input",{id:"donation-option-".concat(n),type:"radio",name:"donating_option",checked:t.is_selected,value:t.additional_price,onChange:function(t){return e.handleDonationOptions(t)}}),h("label",{htmlFor:"donation-option-".concat(n)},h("span",null,salla.money(t.name))))})),((o=t.donation)===null||o===void 0?void 0:o.custom_amount_enabled)?h("div",{class:"s-product-options-donation-options-item"},h("input",{id:"donation-option-custom",type:"radio",name:"donating_option",value:"custom",onChange:function(t){return e.handleDonationOptions(t)}}),h("label",{htmlFor:"donation-option-custom"},h("span",null," ",this.selectDonationAmount," "))):"")]:"",h("div",{class:{"s-product-options-donation-input-group":true,shown:!t.details.length||t.details.length&&this.isCustomDonation}},h("input",{type:"text",id:"donating-amount",name:"donation_amount",class:"s-form-control",ref:function(t){return e.donationInput=t},value:t.details.length&&t.details.some((function(t){return t.is_selected}))?t.details.find((function(t){return t.is_selected})).additional_price:t.value,placeholder:t.placeholder,onInput:function(t){return salla.helpers.inputDigitsOnly(t.target)},onBlur:function(n){return e.changedHandler(n,t)},onInvalid:function(n){return e.invalidHandler(n,t)}}),h("span",{class:"s-product-options-donation-amount-currency"},salla.config.currency(salla.config.get("user.currency_code")).symbol))]:this.getExpireDonationMessage(t))};t.prototype.fileUploader=function(t,n){var e=this;if(n===void 0){n=null}return h("salla-file-upload",Object.assign({},n||{},{"payload-name":"file",value:t.value,"instant-upload":true,name:"options[".concat(t.id,"]"),required:!t.visibility_condition&&t.required,height:"120px",onAdded:function(n){return e.changedHandler(n,t)},url:salla.cart.api.getUploadImageEndpoint(),"form-data":{cart_item_id:this.productId,product_id:this.productId},onInvalidInput:function(n){return e.invalidHandler(n,t)},class:{"s-product-options-image-input":true,required:t.required}}),h("div",{class:"s-product-options-filepond-placeholder"},h("span",{class:"s-product-options-filepond-placeholder-icon",innerHTML:n.accept&&n.accept.split(",").every((function(t){return t.includes("image")}))?CameraIcon:FileIcon}),h("p",{class:"s-product-options-filepond-placeholder-text"},salla.lang.get("common.uploader.drag_and_drop")),h("span",{class:"filepond--label-action"},salla.lang.get("common.uploader.browse"))))};t.prototype.imageOption=function(t){return this.fileUploader(t,{accept:"image/png,image/jpeg,image/jpg,image/gif"})};t.prototype.fileOption=function(t){var n=this;var e=t.details.map((function(t){return n.fileTypes[t.name]})).filter(Boolean);return(e===null||e===void 0?void 0:e.length)?this.fileUploader(t,{accept:e.join(",")}):"File types not selected."};t.prototype.numberOption=function(t){var n=this;return h("input",{type:"text",value:t.value,class:"s-form-control",required:!t.visibility_condition&&t.required,name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onBlur:function(e){return n.changedHandler(e,t)},onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(t){return salla.helpers.inputDigitsOnly(t.target)}})};t.prototype.splitterOption=function(){return h("div",{class:"s-product-options-splitter"})};t.prototype.textOption=function(t){var n=this;return h("div",{class:"s-product-options-text"},h("input",{type:"text",value:t.value,class:"s-form-control",required:!t.visibility_condition&&t.required,name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(e){return n.changedHandler(e,t)}}))};t.prototype.textareaOption=function(t){var n=this;return h("div",{class:"s-product-options-textarea"},h("div",{class:"mt-1"},h("textarea",{rows:4,value:t.value,class:"s-form-control",required:!t.visibility_condition&&t.required,id:"options[".concat(t.id,"]"),name:"options[".concat(t.id,"]"),placeholder:t.placeholder,onInvalid:function(e){return n.invalidHandler(e,t)},onInput:function(e){return n.changedHandler(e,t)}})))};t.prototype.mapOption=function(t){var n=this;return h("salla-map",{zoom:15,lat:this.getLatLng(t.value,"lat"),lng:this.getLatLng(t.value,"lng"),name:"options[".concat(t.id,"]"),searchable:true,required:t.required,onInvalidInput:function(e){return n.invalidHandler(e,t)},onSelected:function(e){return n.changedHandler(e,t)}})};t.prototype.colorPickerOption=function(t){var n=this;return h("salla-color-picker",{onSubmitted:function(e){return n.changedHandler(e,t)},name:"options[".concat(t.id,"]"),required:!t.visibility_condition&&t.required,onInvalidInput:function(e){return n.invalidHandler(e,t)},color:t.value})};t.prototype.timeOption=function(t){var n=this;return h("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[".concat(t.id,"]"),class:"s-product-options-time-element",onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}})};t.prototype.dateOption=function(t){var n=this;return h("div",{class:"s-product-options-date-element"},h("salla-datetime-picker",{value:t.value,placeholder:t.name,required:!t.visibility_condition&&t.required,minDate:new Date,name:"options[".concat(t.id,"]"),onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}}))};t.prototype.datetimeOption=function(t){var n=this;return h("div",{class:"s-product-options-datetime-element"},h("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[".concat(t.id,"]"),maxDate:t.to_date_time,minDate:t.from_date_time,onInvalidInput:function(e){return n.invalidHandler(e,t)},onPicked:function(e){return n.changedHandler(e,t)}}))};t.prototype.getOptionDetailName=function(t,n,e){if(n===void 0){n=true}if(e&&e==DisplayType.COLOR){return t.name+(n&&this.isOptionDetailOut(t)?" <br/> <p> ".concat(this.outOfStockText," </p>"):"")+(t.additional_price?" <p> (".concat(salla.money(t.additional_price),") </p>"):"")}return t.name+(n&&this.isOptionDetailOut(t)?" - ".concat(this.outOfStockText):"")+(t.additional_price?" (".concat(salla.money(t.additional_price),")"):"")};t.prototype.isOptionDetailOut=function(t){var n=this;var e;if(t.is_out||!t.skus_availability||!((e=this.selectedSkus)===null||e===void 0?void 0:e.length)){return t.is_out}var i=this.selectedOptions.filter((function(n){return n.id==t.id})).length;if(i&&this.selectedOptions.length==1){return false}if(i){var o=this.selectedSkus.filter((function(t){return n.outSkus.includes(t)}));return Object.keys(t.skus_availability).some((function(t){return o.includes(Number(t))}))}return this.selectedOptions.some((function(n){return n.is_out&&n.option_id!==t.option_id}))};t.prototype.singleOption=function(t){var n=this;return h("div",null,h("select",{name:"options[".concat(t.id,"]"),required:!t.visibility_condition&&t.required,class:"s-form-control",onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}},h("option",{value:""},t.placeholder),t===null||t===void 0?void 0:t.details.map((function(t){return h("option",{value:t.id,disabled:n.canDisabled&&n.isOptionDetailOut(t),selected:t.is_selected},n.getOptionDetailName(t))}))))};t.prototype.multipleOptions=function(t){var n=this;var e=t.required&&!t.details.some((function(t){return t.is_selected}))&&!t.visibility_condition;return h("div",{class:{"s-product-options-multiple-options-wrapper":true,required:t.required}},t===null||t===void 0?void 0:t.details.map((function(i){return h("div",null,h("input",{type:"checkbox",value:i.id,disabled:n.isOptionDetailOut(i),checked:i.is_selected,required:e,name:"options[".concat(t.id,"][]"),id:"field-".concat(t.id,"-").concat(i.id),onChange:function(e){return n.changedHandler(e,t)},onInvalid:function(e){return n.invalidHandler(e,t)},"aria-describedby":"options[".concat(t.id,"]-description")}),h("label",{htmlFor:"field-".concat(t.id,"-").concat(i.id)},n.getOptionDetailName(i)))})))};t.prototype.colorOption=function(t){var n=this;return h("fieldset",{class:"s-product-options-colors-wrapper"},t===null||t===void 0?void 0:t.details.map((function(e){return h("div",{class:"s-product-options-colors-item"},h("input",{type:"radio",value:e.id,required:!t.visibility_condition&&t.required,checked:e.is_selected,name:"options[".concat(t.id,"]"),disabled:n.canDisabled&&n.isOptionDetailOut(e),id:"color-".concat(n.productId,"-").concat(t.id,"-").concat(e.id),onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}}),h("label",{htmlFor:"color-".concat(n.productId,"-").concat(t.id,"-").concat(e.id)},h("span",{style:{"background-color":e.color}}),h("div",{innerHTML:n.getOptionDetailName(e,true,t.type)})))})))};t.prototype.thumbnailOption=function(t){var n=this;return h("div",{class:"s-product-options-thumbnails-wrapper"},t.details.map((function(e){return h("div",null,h("input",{type:"radio",value:e.id,"data-itemid":e.id,required:!t.visibility_condition&&t.required,checked:e.is_selected,name:"options[".concat(t.id,"]"),"data-img-id":e.option_value,disabled:n.canDisabled&&n.isOptionDetailOut(e),id:"option_".concat(n.productId,"-").concat(t.id,"_").concat(e.id),onInvalid:function(e){return n.invalidHandler(e,t)},onChange:function(e){return n.changedHandler(e,t)}}),h("label",{htmlFor:"option_".concat(n.productId,"-").concat(t.id,"_").concat(e.id),"data-img-id":e.option_value,class:"go-to-slide"},h("img",{"data-src":e.image,src:e.image,title:e.name,alt:e.name}),h("span",{innerHTML:CheckCircleIcon,class:"s-product-options-thumbnails-icon"}),n.isOptionDetailOut(e)?[h("small",{class:"s-product-options-thumbnails-stock-badge"},n.outOfStockText),n.canDisabled?h("div",{class:"s-product-options-thumbnails-badge-overlay"}):""]:""),h("p",null,n.getOptionDetailName(e,false)," "))})))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaProductOptions.style=sallaProductOptionsCss;export{SallaProductOptions as salla_product_options};
5
5
  //# sourceMappingURL=salla-product-options.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["DisplayType","Currency","sallaProductOptionsCss","SallaProductOptions","class_1","hostRef","_this","this","fileTypes","pdf","png","jpg","word","exl","txt","outSkus","handleDonationOptions","event","preventDefault","stopPropagation","isCustomDonation","target","value","donationInput","focus","hideLabel","option","type","DONATION","donation","can_donate","getExpireDonationMessage","completed","target_amount","collected_amount","h","class","target_message","salla","money","lang","get","getWithDefault","config","canDisabled","onLoaded","outOfStockText","donationAmount","selectDonationAmount","selectAmount","options","setOptionsData","Array","isArray","JSON","parse","e","log","optionsData","productId","url","is_page","api","product","getDetails","then","resp","data","prototype","that","_b","_a","details","forEach","detail","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","id","invalidHandler","closestProductOption","closest","scrollIntoView","behavior","block","classList","add","changedHandler","optionElement","FILE","IMAGE","MAP","lat","lng","setTimeout","remove","index","findIndex","assign","setSelectedSkus","handleRequiredMultipleOptions","changed","emit","keys","reduce","p","c","MULTIPLE_OPTIONS","required","optionContainer","querySelector","concat","hasChecked","input","toggleAttribute","getLatLng","split","getDisplayForType","COLOR_PICKER","colorPickerOption","multipleOptions","SINGLE_OPTION","singleOption","getOptionShownWhen","visibility_condition","operator","componentWillLoad","cart","getCurrentCartId","render","Host","name","splitterOption","htmlFor","placeholder","donationOption","checked","is_selected","additional_price","onChange","custom_amount_enabled","shown","ref","el","onInput","helpers","inputDigitsOnly","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_1","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.products.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 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) => {\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 }\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 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)} />\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)} />\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 => salla.helpers.inputDigitsOnly(e.target)}\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.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.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.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.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.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.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.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.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.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);\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.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.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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"}
1
+ {"version":3,"names":["DisplayType","Currency","sallaProductOptionsCss","SallaProductOptions","class_1","hostRef","_this","this","fileTypes","pdf","png","jpg","word","exl","txt","outSkus","handleDonationOptions","event","preventDefault","stopPropagation","isCustomDonation","target","value","donationInput","focus","hideLabel","option","type","DONATION","donation","can_donate","getExpireDonationMessage","completed","target_amount","collected_amount","h","class","target_message","salla","money","lang","get","getWithDefault","config","canDisabled","onLoaded","outOfStockText","donationAmount","selectDonationAmount","selectAmount","options","setOptionsData","Array","isArray","JSON","parse","e","log","optionsData","productId","url","is_page","api","product","getDetails","then","resp","data","prototype","that","_b","_a","details","forEach","detail","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","id","invalidHandler","closestProductOption","closest","scrollIntoView","behavior","block","classList","add","changedHandler","optionElement","FILE","IMAGE","MAP","lat","lng","setTimeout","remove","index","findIndex","assign","setSelectedSkus","handleRequiredMultipleOptions","changed","emit","keys","reduce","p","c","MULTIPLE_OPTIONS","required","optionContainer","querySelector","concat","hasChecked","input","toggleAttribute","getLatLng","split","getDisplayForType","COLOR_PICKER","colorPickerOption","multipleOptions","SINGLE_OPTION","singleOption","getOptionShownWhen","visibility_condition","operator","componentWillLoad","cart","getCurrentCartId","render","Host","name","splitterOption","htmlFor","placeholder","donationOption","checked","is_selected","additional_price","onChange","custom_amount_enabled","shown","ref","el","onInput","helpers","inputDigitsOnly","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_1","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.products.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 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) => {\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 }\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 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)} />\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)} />\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 => salla.helpers.inputDigitsOnly(e.target)}\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":";;;yJAAA,IAAYA,aAAZ,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,0BAAW,KAoJvB,IAAYC,UAAZ,SAAYA,GACVA,EAAA,YACD,EAFD,CAAYA,oBAAQ,K,g+CCpJpB,IAAMC,uBAAyB,G,ICWlBC,oBAAmB,WAE9B,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,K,oEAuCQA,KAAAC,UAAoB,CAC1BC,IAAK,kBACLC,IAAK,YACLC,IAAK,aACLC,KAAM,gIACNC,IAAK,yJACLC,IAAK,cAaCP,KAAAQ,QAAkC,GA+GlCR,KAAAS,sBAAwB,SAACC,GAC/BA,EAAMC,iBACND,EAAME,kBACNb,EAAKc,iBAAmBH,EAAMI,OAAOC,QAAU,SAC/C,GAAIhB,EAAKiB,cAAe,CACtB,GAAIN,EAAMI,OAAOC,QAAU,SAAU,CACnChB,EAAKiB,cAAcD,MAAQ,GAC3BhB,EAAKiB,cAAcC,O,KACd,CACLlB,EAAKiB,cAAcD,MAAQL,EAAMI,OAAOC,K,IAKtCf,KAAAkB,UAAY,SAACC,GACnB,GAAIA,EAAOC,OAAS3B,YAAY4B,WAAaF,EAAOG,WAAaH,EAAOG,SAASC,YAAa,CAC5F,OAAO,I,CAET,OAAO,K,EAGDvB,KAAAwB,yBAA2B,SAACL,GAClC,IAAIA,EAAOG,SAAS,CAClB,M,CAEF,IAAIG,EAAYN,EAAOG,SAASI,eAAiBP,EAAOG,SAASK,iBACjE,OAAOC,EAAA,OAAKC,MAAO,CAAC,qCAAsC,KAAM,uCAAwCJ,EAAW,sCAAuCA,IACxJG,EAAA,SAAIT,EAAOG,SAASQ,gBACpBF,EAAA,YAAOH,EAAYM,MAAMC,MAAMb,EAAOG,SAASI,eAAiB,I,iDApJlC,G,oBACAK,MAAME,KAAKC,IAAI,kC,0BACTH,MAAME,KAAKE,eAAe,wCAAyC,qB,kBAC3EJ,MAAME,KAAKE,eAAe,+BAAgC,e,sBACrD,M,qBACE,G,qGAUXJ,MAAMK,OAAOF,IAAI,W,uBA/D3ClC,KAAKqC,aAAeN,MAAMK,OAAOF,IAAI,uDACrCH,MAAME,KAAKK,UAAS,WAClBvC,EAAKwC,eAAiBR,MAAME,KAAKC,IAAI,+BACrCnC,EAAKyC,eAAiBT,MAAME,KAAKC,IAAI,kCACrCnC,EAAK0C,qBAAuBV,MAAME,KAAKE,eAAe,wCAAyC,qBAC/FpC,EAAK2C,aAAeX,MAAME,KAAKE,eAAe,+BAAgC,c,IAGhF,GAAInC,KAAK2C,QAAS,CAChB,IACE3C,KAAK4C,eAAeC,MAAMC,QAAQ9C,KAAK2C,SAAW3C,KAAK2C,QAAUI,KAAKC,MAAMhD,KAAK2C,UACjF,M,CACA,MAAOM,GACPlB,MAAMmB,IAAI,mC,EAGd,IAAKL,MAAMC,QAAQ9C,KAAKmD,aAAc,CACpCpB,MAAMmB,IAAI,qCAAmClD,KAAKmD,aAClDnD,KAAK4C,eAAe,G,CAGtB,GAAI5C,KAAKoD,YAAcrB,MAAMsB,IAAIC,QAAQ,QAAS,CAChDvB,MAAMwB,IAAIC,QAAQC,WAAWzD,KAAKoD,UAAW,CAAC,YAAYM,MAAK,SAAAC,GAAQ,OAAA5D,EAAK6C,eAAee,EAAKC,KAAKjB,QAA9B,G,EAInE9C,EAAAgE,UAAAjB,eAAA,SAAeO,G,QACrBnD,KAAKmD,YAAcA,EACnB,IAAIW,EAAO9D,MACX+D,GAAAC,EAAAhE,KAAKmD,YAAY,MAAE,MAAAa,SAAA,SAAAA,EAAEC,WAAO,MAAAF,SAAA,SAAAA,EAAEG,SAAQ,SAAUC,GAC9CC,OAAOC,QAAQF,EAAOG,mBAAqB,IACxCC,QAAO,SAAAC,GAAO,OAACA,EAAI,EAAL,IACdC,KAAI,SAAAD,GAAO,OAAAV,EAAKtD,QAAQkE,KAAKC,OAAOH,EAAI,IAA7B,G,KA0CZ3E,EAAAgE,UAAAe,uBAAN,W,6FACMC,EAAkB,GAClBC,EAAY9E,KAAK+E,KAAaC,sBAClCF,EAASZ,SAAQ,SAAUnD,EAAOkE,GAChCA,EAAIC,WAAW,cAAgBL,EAAgBI,EAAIE,QAAQ,WAAY,IAAIA,QAAQ,IAAK,KAAOpE,E,IAEjG,SAAO8D,E,QAOHhF,EAAAgE,UAAAuB,eAAN,W,+FACMC,EAA4CrF,KAAK+E,KAAKO,iBAAiB,cACvEC,EAAO,KACX,IAASC,EAAI,EAAGA,EAAIH,EAAiBI,OAAQD,IAAK,CAEhD,GAAI,mBAAoBH,EAAiBG,KAAOH,EAAiBG,GAAGJ,iBAAkB,CACpFG,EAAO,K,EAGX,SAAOA,E,QAOH1F,EAAAgE,UAAA6B,oBAAN,W,wGACE,SAAO1F,KAAK6E,gBAAgBc,MAAK,SAAAxE,GAAU,OAAAA,EAAOyE,MAAP,OAAmB5B,EAAAhE,KAAK6F,gBAAY,MAAA7B,SAAA,SAAAA,EAAEyB,WAAU1B,EAAA/D,KAAK6F,gBAAY,MAAA9B,SAAA,SAAAA,EAAE+B,OAAM,SAAAtB,GAAO,OAAAzE,EAAKS,QAAQuF,SAASvB,EAAtB,K,QAOvH3E,EAAAgE,UAAAmC,mBAAN,W,qFACE,SAAOhG,KAAK6E,gB,QAORhF,EAAAgE,UAAAoC,UAAN,SAAgBC,G,qFACd,SAAOlG,KAAKmD,YAAYgD,MAAK,SAAAhF,GAAU,OAAAA,EAAOiF,KAAOF,CAAd,I,QASjCrG,EAAAgE,UAAAwC,eAAA,SAAe3F,EAAOS,GAC5B,IAAMmF,EAAwB5F,EAAMI,OAA4ByF,QAAQ,6BACxE,IAAKxE,MAAMsB,IAAIC,QAAQ,QAAS,CAC9BgD,EAAqBE,eAAe,CAAEC,SAAU,SAAUC,MAAO,U,CAEnEJ,EAAqBK,UAAUC,IAAI,iC,EAG7B/G,EAAAgE,UAAAgD,eAAA,SAAenG,EAAOS,GAC5B,IAAIyC,EAAO,CAAElD,MAAOA,EAAOS,OAAQA,EAAQgD,OAAQ,MACnD,GAAIhD,EAAO8C,QAAS,CAClB,IAAIE,EAAShD,EAAO8C,QAAQkC,MAAK,SAAChC,GAChC,OAAOQ,OAAOR,EAAOiC,MAAQzB,OAAOjE,EAAMI,OAAOC,M,IAEnD6C,EAAKO,OAASA,C,CAGhB,IAAI2C,EAAgBpG,EAAMI,OAAOyF,QAAQ,6BACzC,GAAI7F,EAAMI,OAAOC,QACVI,EAAOC,MAAQ3B,YAAYsH,MAAQ5F,EAAOC,MAAQ3B,YAAYuH,QAAUtG,EAAMU,OAAS,SACxFD,EAAOC,MAAQ3B,YAAYwH,KAAOvG,EAAMU,OAAS,aAAeV,EAAMI,OAAOoG,KAAOxG,EAAMI,OAAOqG,KAAO,CAC5GC,YAAW,WACTN,EAAcH,UAAUU,OAAO,iC,GAC9B,I,CAGL,IAAMC,EAAQtH,KAAK6E,gBAAgB0C,WAAU,SAAApG,GAAU,OAAAA,EAAO+E,YAActC,EAAKzC,OAAOiF,EAAjC,IACvDkB,GAAS,EAAItH,KAAK6E,gBAAgByC,GAAMlD,OAAAoD,OAAApD,OAAAoD,OAAA,GACnC5D,EAAKO,QAAM,CACd+B,UAAWtC,EAAKzC,OAAOiF,KACrBpG,KAAK6E,gBAAgBH,KAAIN,OAAAoD,OAAApD,OAAAoD,OAAA,GAAM5D,EAAKO,QAAM,CAAE+B,UAAWtC,EAAKzC,OAAOiF,MAEvEpG,KAAKyH,kBACLzH,KAAK0H,8BAA8BvG,GACnCnB,KAAK2H,QAAQC,KAAKhE,GAClB7B,MAAMrB,MAAMkH,KAAK,0BAA2BhE,E,EAsCtC/D,EAAAgE,UAAA4D,gBAAA,WACNzH,KAAK6F,aAAe7F,KAAK6E,gBAAgBJ,KAAI,SAAAN,GAAU,OAAAC,OAAOyD,KAAK1D,EAAOG,mBAAqB,GAAxC,IACpDwD,QAAO,SAACC,EAAGC,GAAM,OAAAD,EAAExD,QAAO,SAAAtB,GAAK,OAAA+E,EAAEjC,SAAS9C,EAAX,GAAd,IACjBwB,KAAI,SAAAD,GAAO,OAAAG,OAAOH,EAAP,G,EAGR3E,EAAAgE,UAAA6D,8BAAA,SAA8BvG,GACpC,GAAIA,EAAOC,OAAS3B,YAAYwI,mBAAqB9G,EAAO+G,SAAU,CACpE,M,CAEF,IAAMC,EAAkBnI,KAAK+E,KAAKqD,cAAc,oBAAAC,OAAoBlH,EAAOiF,GAAE,OAC7E,IAAMkC,EAAaH,EAAgB7C,iBAAiB,iBAAiBG,OACrE0C,EAAgB7C,iBAAiB,SAASpB,SAAQ,SAAAqE,GAAS,OAAAA,EAAMC,gBAAgB,YAAaF,EAAnC,G,EAGrDzI,EAAAgE,UAAA4E,UAAA,SAAU1H,EAAOK,GACvB,OAAOL,EACHA,EAAM2H,MAAM,KAAKtH,GAAQ,MAAQ,EAAI,GACrC,E,EAGEvB,EAAAgE,UAAA8E,kBAAA,SAAkBxH,GACxB,GAAInB,KAAK,GAAAqI,OAAGlH,EAAOC,KAAI,WAAW,CAChC,OAAOpB,KAAK,GAAAqI,OAAGlH,EAAOC,KAAI,WAAUD,E,CAGtC,GAAIA,EAAOC,OAAS3B,YAAYmJ,aAAc,CAC5C,OAAO5I,KAAK6I,kBAAkB1H,E,CAGhC,GAAIA,EAAOC,OAAS3B,YAAYwI,iBAAkB,CAChD,OAAOjI,KAAK8I,gBAAgB3H,E,CAG9B,GAAIA,EAAOC,OAAS3B,YAAYsJ,cAAe,CAC7C,OAAO/I,KAAKgJ,aAAa7H,E,CAE3BY,MAAMmB,IAAI,8BAAAmF,OAA8BlH,EAAOC,KAAI,QACnD,MAAO,E,EAGCvB,EAAAgE,UAAAoF,mBAAA,SAAmB9H,GAC3B,OAAOA,EAAO+H,qBACV,CAAE,iBAAkB,WAAAb,OAAWlH,EAAO+H,qBAAqB/H,OAAM,MAAAkH,OAAKlH,EAAO+H,qBAAqBC,SAAQ,KAAAd,OAAIlH,EAAO+H,qBAAqBnI,QAC1I,E,EAINlB,EAAAgE,UAAAuF,kBAAA,WACEpJ,KAAKuC,eAAiBR,MAAME,KAAKC,IAAI,+BACrC,OAAOH,MAAMwB,IAAI8F,KAAKC,kB,EAGxBzJ,EAAAgE,UAAA0F,OAAA,eAAAxJ,EAAAC,K,MACE,KAAIgE,EAAAhE,KAAKmD,eAAW,MAAAa,SAAA,SAAAA,EAAEyB,SAAU,EAAG,CACjC,M,CAGF,OACE7D,EAAC4H,KAAI,CAAC3H,MAAM,6BAEVD,EAAA,gCACG5B,KAAKmD,YAAYsB,KAAI,SAACtD,GACrB,OAAAS,EAAA,MAAAwC,OAAAoD,OAAA,CAAK3F,MAAO,qCAAAwG,OAAqClH,EAAO+H,qBAAuB,UAAY,IAAI,iBAC7E/H,EAAOiF,IACnBrG,EAAKkJ,mBAAmB9H,IAC3BA,EAAOsI,MAAQ,WACd1J,EAAK2J,iBACH9H,EAAA,OAAKC,MAAM,2BAA0B,mBAAmBV,EAAOC,KAAI,uBAC7C,GAAAiH,OAAGlH,EAAO+G,WAChCtG,EAAA,SAAO+H,QAAS,WAAaxI,EAAOiF,GAAK,IAAKvE,MAAO,kCAAAwG,OAAkCtI,EAAKmB,UAAUC,GAAU,wCAA0C,KACxJS,EAAA,SACGT,EAAOsI,KACPtI,EAAO+G,UAAYtG,EAAA,mBAAgB,KACtCA,EAAA,aAAQT,EAAOyI,cAEjBhI,EAAA,OAAKC,MAAO,oCAAAwG,OAAoCtI,EAAKmB,UAAUC,GAAU,8CAAgD,KACtHpB,EAAK4I,kBAAkBxH,KAdhC,K,EA0BFtB,EAAAgE,UAAAgG,eAAA,SAAe1I,EAAgBqC,GAA/B,IAAAzD,EAAAC,K,QACN,OAAO4B,EAAA,OAAKC,MAAM,wCAEfmC,EAAA7C,EAAOG,YAAQ,MAAA0C,SAAA,SAAAA,EAAEzC,YAAa,CAC7BJ,EAAOG,SACLM,EAAA,OAAKC,MAAM,uCACTD,EAAA,sBAAoBN,SAAUH,EAAOG,YAGrC,GACJH,EAAO8C,QAAQwB,OACb,CAAC7D,EAAA,UAAK5B,KAAK0C,cACXd,EAAA,OAAKC,MAAM,sCACRV,EAAO8C,QAAQQ,KAAI,SAACN,EAAQqB,GAC3B,OAAA5D,EAAA,OAAKC,MAAM,2CACTD,EAAA,SAAOwE,GAAI,mBAAAiC,OAAmB7C,GAAKpE,KAAK,QAAQqI,KAAK,kBAAkBK,QAAS3F,EAAO4F,YAAahJ,MAAOoD,EAAO6F,iBAAkBC,SAAU,SAAAhH,GAAK,OAAAlD,EAAKU,sBAAsBwC,EAA3B,IACnJrB,EAAA,SAAO+H,QAAS,mBAAAtB,OAAmB7C,IACjC5D,EAAA,YAAOG,MAAMC,MAAMmC,EAAOsF,QAH9B,MAOD1F,EAAA5C,EAAOG,YAAQ,MAAAyC,SAAA,SAAAA,EAAEmG,uBAChBtI,EAAA,OAAKC,MAAM,2CACTD,EAAA,SAAOwE,GAAI,yBAA0BhF,KAAK,QAAQqI,KAAK,kBAAkB1I,MAAM,SAASkJ,SAAU,SAAAhH,GAAK,OAAAlD,EAAKU,sBAAsBwC,EAA3B,IACvGrB,EAAA,SAAO+H,QAAS,0BACd/H,EAAA,gBAAQ5B,KAAKyC,qBAAoB,OAGnC,KAEI,GAEZb,EAAA,OAAKC,MAAO,CAAE,yCAA0C,KAAMsI,OAAUhJ,EAAO8C,QAAQwB,QAAWtE,EAAO8C,QAAQwB,QAAUzF,KAAKa,mBAC9He,EAAA,SACER,KAAK,OACLgF,GAAG,kBACHqD,KAAK,kBACL5H,MAAM,iBACNuI,IAAK,SAAAC,GAAM,OAAAtK,EAAKiB,cAAgBqJ,CAArB,EACXtJ,MACEI,EAAO8C,QAAQwB,QACVtE,EAAO8C,QAAQ0B,MAAK,SAAAxB,GAAU,OAAAA,EAAO4F,WAAP,IAC/B5I,EAAO8C,QAAQkC,MAAK,SAAAhC,GAAU,OAAAA,EAAO4F,WAAP,IAAoBC,iBAClD7I,EAAOJ,MAEb6I,YAAazI,EAAOyI,YACpBU,QAAS,SAAArH,GAAK,OAAAlB,MAAMwI,QAAQC,gBAAgBvH,EAAEnC,OAAhC,EACd2J,OAAQ,SAAAxH,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,EACbuJ,UAAW,SAACzH,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,IAGpBS,EAAA,QAAMC,MAAM,8CACTE,MAAMK,OAAOuI,SAAS5I,MAAMK,OAAOF,IAAI,uBAAuB0I,UAIrE5K,KAAKwB,yBAAyBL,G,EAK1BtB,EAAAgE,UAAAgH,aAAA,SAAa1J,EAAgB2J,GAA7B,IAAA/K,EAAAC,KAA6B,GAAA8K,SAAA,GAAAA,EAAA,IAA+B,CAClE,OAAOlJ,EAAA,oBAAAwC,OAAAoD,OAAA,GACAsD,GAAa,GAAE,gBACP,OACb/J,MAAOI,EAAOJ,MAAK,iBACH,KAChB0I,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1B8B,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjD6C,OAAO,QACPC,QAAS,SAAC/H,GAAM,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,EAChBkC,IAAKtB,MAAMsH,KAAK9F,IAAI0H,yBAAwB,YACjC,CAAEC,aAAclL,KAAKoD,UAAW+H,WAAYnL,KAAKoD,WAC5DgI,eAAgB,SAACnI,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EACvBU,MAAO,CAAE,gCAAiC,KAAMqG,SAAU/G,EAAO+G,YAEjEtG,EAAA,OAAKC,MAAM,0CACTD,EAAA,QAAMC,MAAM,8CACVwJ,UAAYP,EAAkBQ,QAAWR,EAAkBQ,OAAO5C,MAAM,KAAK5C,OAAM,SAAA1E,GAAQ,OAAAA,EAAK2E,SAAS,QAAd,IACvFwF,WACAC,WAEN5J,EAAA,KAAGC,MAAM,+CAA+CE,MAAME,KAAKC,IAAI,kCACvEN,EAAA,QAAMC,MAAM,0BAA0BE,MAAME,KAAKC,IAAI,4B,EAMnDrC,EAAAgE,UAAA4H,YAAA,SAAYtK,GAClB,OAAOnB,KAAK6K,aAAa1J,EAAQ,CAAEmK,OAAQ,4C,EAIrCzL,EAAAgE,UAAA6H,WAAA,SAAWvK,GAAX,IAAApB,EAAAC,KACN,IAAI2L,EAAQxK,EAAO8C,QAAQQ,KAAI,SAAAN,GAAU,OAAApE,EAAKE,UAAUkE,EAAOsF,KAAtB,IAA6BlF,OAAOqH,SAC7E,OAAOD,IAAK,MAALA,SAAK,SAALA,EAAOlG,QACVzF,KAAK6K,aAAa1J,EAAQ,CAAEmK,OAAQK,EAAME,KAAK,OAC/C,0B,EAKEhM,EAAAgE,UAAAiI,aAAA,SAAa3K,GAAb,IAAApB,EAAAC,KACN,OAAO4B,EAAA,SACLR,KAAK,OACLL,MAAOI,EAAOJ,MACdc,MAAM,iBACNqG,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjDuB,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1BwD,YAAazI,EAAOyI,YACpBa,OAAQ,SAAAxH,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,EACbuJ,UAAW,SAACzH,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EAClBmJ,QAAS,SAAArH,GAAK,OAAAlB,MAAMwI,QAAQC,gBAAgBvH,EAAEnC,OAAhC,G,EAIVjB,EAAAgE,UAAA6F,eAAA,WACN,OAAO9H,EAAA,OAAKC,MAAM,8B,EAIZhC,EAAAgE,UAAAkI,WAAA,SAAW5K,GAAX,IAAApB,EAAAC,KACN,OAAO4B,EAAA,OAAKC,MAAM,0BAChBD,EAAA,SACER,KAAK,OACLL,MAAOI,EAAOJ,MACdc,MAAM,iBACNqG,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjDuB,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1BwD,YAAazI,EAAOyI,YACpBc,UAAW,SAACzH,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EAClBmJ,QAAS,SAAArH,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,I,EAKZtB,EAAAgE,UAAAmI,eAAA,SAAe7K,GAAf,IAAApB,EAAAC,KAEN,OAAO4B,EAAA,OAAKC,MAAM,8BAChBD,EAAA,OAAKC,MAAM,QACTD,EAAA,YACEqK,KAAM,EACNlL,MAAOI,EAAOJ,MACdc,MAAM,iBACNqG,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjD9B,GAAI,WAAAiC,OAAWlH,EAAOiF,GAAE,KACxBqD,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1BwD,YAAazI,EAAOyI,YACpBc,UAAW,SAACzH,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EAClBmJ,QAAS,SAACrH,GAAM,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,K,EAMhBtB,EAAAgE,UAAAqI,UAAA,SAAU/K,GAAV,IAAApB,EAAAC,KACN,OAAO4B,EAAA,aACLuK,KAAM,GACNjF,IAAKlH,KAAKyI,UAAUtH,EAAOJ,MAAO,OAClCoG,IAAKnH,KAAKyI,UAAUtH,EAAOJ,MAAO,OAClC0I,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1BgG,WAAY,KACZlE,SAAU/G,EAAO+G,SACjBkD,eAAgB,SAACnI,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EACvBkL,WAAY,SAAApJ,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,G,EAGbtB,EAAAgE,UAAAgF,kBAAA,SAAkB1H,GAAlB,IAAApB,EAAAC,KACN,OAAO4B,EAAA,sBACL0K,YAAa,SAAArJ,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,EAClBsI,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1B8B,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjDkD,eAAgB,SAACnI,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EACvBoL,MAAOpL,EAAOJ,O,EAOVlB,EAAAgE,UAAA2I,WAAA,SAAWrL,GAAX,IAAApB,EAAAC,KACN,OAAO4B,EAAA,yBACL6K,WAAY,KACZC,WAAY,KACZC,WAAW,QACX5L,MAAOI,EAAOJ,MACd6I,YAAazI,EAAOsI,KACpBvB,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjDuB,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1BvE,MAAM,iCACNuJ,eAAgB,SAACnI,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EACvByL,SAAU,SAAA3J,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,G,EAIXtB,EAAAgE,UAAAgJ,WAAA,SAAW1L,GAAX,IAAApB,EAAAC,KAEN,OAAO4B,EAAA,OAAKC,MAAM,kCAChBD,EAAA,yBACEb,MAAOI,EAAOJ,MACd6I,YAAazI,EAAOsI,KACpBvB,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjD4E,QAAS,IAAIC,KACbtD,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1BgF,eAAgB,SAACnI,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EACvByL,SAAU,SAAA3J,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,I,EAKbtB,EAAAgE,UAAAmJ,eAAA,SAAe7L,GAAf,IAAApB,EAAAC,KAEN,OAAO4B,EAAA,OAAKC,MAAM,sCAChBD,EAAA,yBACE8K,WAAY,KACZ3L,MAAOI,EAAOJ,MACd4L,WAAW,cACX/C,YAAazI,EAAOsI,KACpBvB,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjDuB,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1B6G,QAAS9L,EAAO+L,aAChBJ,QAAS3L,EAAOgM,eAChB/B,eAAgB,SAACnI,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EACvByL,SAAU,SAAA3J,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,I,EAOXtB,EAAAgE,UAAAuJ,oBAAA,SAAoBjJ,EAAgBkJ,EAA4BC,GAA5B,GAAAD,SAAA,GAAAA,EAAA,IAA0B,CACtE,GAAIC,GAAcA,GAAc7N,YAAY8N,MAAO,CACjD,OAAOpJ,EAAOsF,MACR4D,GAAcrN,KAAKwN,kBAAkBrJ,GAAW,cAAAkE,OAAcrI,KAAKuC,eAAc,SAAU,KAC5F4B,EAAO6F,iBAAmB,SAAA3B,OAAStG,MAAMC,MAAMmC,EAAO6F,kBAAiB,UAAW,G,CAGzF,OAAO7F,EAAOsF,MACR4D,GAAcrN,KAAKwN,kBAAkBrJ,GAAW,MAAAkE,OAAMrI,KAAKuC,gBAAmB,KAC/E4B,EAAO6F,iBAAmB,KAAA3B,OAAKtG,MAAMC,MAAMmC,EAAO6F,kBAAiB,KAAM,G,EAItEnK,EAAAgE,UAAA2J,kBAAA,SAAkBrJ,GAAlB,IAAApE,EAAAC,K,MACR,GAAImE,EAAOyB,SAAWzB,EAAOG,sBAAsBN,EAAAhE,KAAK6F,gBAAY,MAAA7B,SAAA,SAAAA,EAAEyB,QAAQ,CAC5E,OAAOtB,EAAOyB,M,CAGhB,IAAI6H,EAAmBzN,KAAK6E,gBAAgBN,QAAO,SAAApD,GAAU,OAAAA,EAAOiF,IAAMjC,EAAOiC,EAApB,IAAwBX,OAErF,GAAIgI,GAAoBzN,KAAK6E,gBAAgBY,QAAU,EAAG,CACxD,OAAO,K,CAIT,GAAIgI,EAAkB,CAEpB,IAAIC,EAAoB1N,KAAK6F,aAAatB,QAAO,SAAAC,GAAO,OAAAzE,EAAKS,QAAQuF,SAASvB,EAAtB,IACxD,OAAOJ,OAAOyD,KAAK1D,EAAOG,mBAAmBqB,MAAK,SAAAnB,GAAO,OAAAkJ,EAAkB3H,SAASpB,OAAOH,GAAlC,G,CAG3D,OAAOxE,KAAK6E,gBAAgBc,MAAK,SAAAxE,GAAU,OAAAA,EAAOyE,QAAUzE,EAAO+E,YAAc/B,EAAO+B,SAA7C,G,EAIrCrG,EAAAgE,UAAAmF,aAAA,SAAa7H,GAAb,IAAApB,EAAAC,KACN,OAAO4B,EAAA,WACLA,EAAA,UAAQ6H,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAChC8B,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjDrG,MAAM,iBACN6I,UAAW,SAACzH,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EAClB8I,SAAU,SAAAhH,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,GACfS,EAAA,UAAQb,MAAM,IAAII,EAAOyI,aAEvBzI,IAAM,MAANA,SAAM,SAANA,EAAQ8C,QAAQQ,KAAI,SAACN,GACnB,OAAOvC,EAAA,UAAQb,MAAOoD,EAAOiC,GAAIuH,SAAU5N,EAAKsC,aAAetC,EAAKyN,kBAAkBrJ,GACpFyJ,SAAUzJ,EAAO4F,aAChBhK,EAAKqN,oBAAoBjJ,G,OAQ9BtE,EAAAgE,UAAAiF,gBAAA,SAAgB3H,GAAhB,IAAApB,EAAAC,KACN,IAAI6N,EAAc1M,EAAO+G,WAAa/G,EAAO8C,QAAQ0B,MAAK,SAAAxB,GAAU,OAAAA,EAAO4F,WAAP,MAAwB5I,EAAO+H,qBACnG,OAAOtH,EAAA,OAAKC,MAAO,CAAE,6CAA8C,KAAMqG,SAAY/G,EAAO+G,WAExF/G,IAAM,MAANA,SAAM,SAANA,EAAQ8C,QAAQQ,KAAI,SAACN,GACnB,OAAOvC,EAAA,WACLA,EAAA,SAAOR,KAAK,WACVL,MAAOoD,EAAOiC,GACduH,SAAU5N,EAAKyN,kBAAkBrJ,GACjC2F,QAAS3F,EAAO4F,YAChB7B,SAAU2F,EACVpE,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,OAC1BA,GAAI,SAAAiC,OAASlH,EAAOiF,GAAE,KAAAiC,OAAIlE,EAAOiC,IACjC6D,SAAU,SAAChH,GAAM,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,EACjBuJ,UAAW,SAACzH,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EAA8B,mBAC9B,WAAAkH,OAAWlH,EAAOiF,GAAE,mBACxCxE,EAAA,SAAO+H,QAAS,SAAAtB,OAASlH,EAAOiF,GAAE,KAAAiC,OAAIlE,EAAOiC,KAAOrG,EAAKqN,oBAAoBjJ,I,MAQ/EtE,EAAAgE,UAAAiK,YAAA,SAAY3M,GAAZ,IAAApB,EAAAC,KACN,OAAO4B,EAAA,YAAUC,MAAM,oCAEnBV,IAAM,MAANA,SAAM,SAANA,EAAQ8C,QAAQQ,KAAI,SAACN,GACnB,OAAAvC,EAAA,OAAKC,MAAM,iCACTD,EAAA,SAAOR,KAAK,QACVL,MAAOoD,EAAOiC,GACd8B,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjD4B,QAAS3F,EAAO4F,YAChBN,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAC1BuH,SAAU5N,EAAKsC,aAAetC,EAAKyN,kBAAkBrJ,GACrDiC,GAAI,SAAAiC,OAAStI,EAAKqD,UAAS,KAAAiF,OAAIlH,EAAOiF,GAAE,KAAAiC,OAAIlE,EAAOiC,IACnDsE,UAAW,SAACzH,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EAClB8I,SAAU,SAAAhH,GAAK,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,IACjBS,EAAA,SAAO+H,QAAS,SAAAtB,OAAStI,EAAKqD,UAAS,KAAAiF,OAAIlH,EAAOiF,GAAE,KAAAiC,OAAIlE,EAAOiC,KAC7DxE,EAAA,QAAMmM,MAAO,CAAE,mBAAoB5J,EAAOoI,SAC1C3K,EAAA,OAAKyJ,UAAWtL,EAAKqN,oBAAoBjJ,EAAQ,KAAMhD,EAAOC,SAZlE,I,EAqBAvB,EAAAgE,UAAAmK,gBAAA,SAAgB7M,GAAhB,IAAApB,EAAAC,KACN,OAAO4B,EAAA,OAAKC,MAAM,wCACfV,EAAO8C,QAAQQ,KAAI,SAACN,GACnB,OAAOvC,EAAA,WACLA,EAAA,SAAOR,KAAK,QACVL,MAAOoD,EAAOiC,GAAE,cACHjC,EAAOiC,GACpB8B,UAAW/G,EAAO+H,sBAAwB/H,EAAO+G,SACjD4B,QAAS3F,EAAO4F,YAChBN,KAAM,WAAApB,OAAWlH,EAAOiF,GAAE,KAAG,cAChBjC,EAAO8J,aACpBN,SAAU5N,EAAKsC,aAAetC,EAAKyN,kBAAkBrJ,GACrDiC,GAAI,UAAAiC,OAAUtI,EAAKqD,UAAS,KAAAiF,OAAIlH,EAAOiF,GAAE,KAAAiC,OAAIlE,EAAOiC,IACpDsE,UAAW,SAACzH,GAAM,OAAAlD,EAAKsG,eAAepD,EAAG9B,EAAvB,EAClB8I,SAAU,SAAChH,GAAM,OAAAlD,EAAK8G,eAAe5D,EAAG9B,EAAvB,IACnBS,EAAA,SAAO+H,QAAS,UAAAtB,OAAUtI,EAAKqD,UAAS,KAAAiF,OAAIlH,EAAOiF,GAAE,KAAAiC,OAAIlE,EAAOiC,IAAI,cACrDjC,EAAO8J,aACpBpM,MAAM,eACND,EAAA,kBAAeuC,EAAO+J,MAAOC,IAAKhK,EAAO+J,MAAOE,MAAOjK,EAAOsF,KAAM4E,IAAKlK,EAAOsF,OAChF7H,EAAA,QAAMyJ,UAAWiD,gBAAiBzM,MAAM,sCACvC9B,EAAKyN,kBAAkBrJ,GACtB,CACEvC,EAAA,SAAOC,MAAM,4CAA4C9B,EAAKwC,gBAC9DxC,EAAKsC,YAAcT,EAAA,OAAKC,MAAM,+CAAkD,IAEhF,IAEND,EAAA,SAAI7B,EAAKqN,oBAAoBjJ,EAAQ,OAAM,K,sIAhpBrB,G"}