npm - @salla.sa/twilight-components - Versions diffs - 2.12.15 → 2.12.17 - Mend

@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

package/dist/cjs/salla-conditional-fields.cjs.entry.js CHANGED Viewed

@@ -64,6 +64,21 @@ const SallaConditionalFields = class {
         field.classList.remove('hidden');
         field.querySelectorAll('[name]').forEach((input) => {
           input.removeAttribute('disabled');
+          // Return required attribute to the input if the option is required
+          const closestProductOption = input.closest('.s-product-options-option');
+          if (closestProductOption.dataset.optionRequired === 'true') {
+            input.setAttribute('required', '');
+          }
+          // Handle multiple checkboxes with same name and required attribute
+          if (input.getAttribute('type') === 'checkbox') {
+            const checkboxes = Array.from(document.querySelectorAll(`input[type="checkbox"][name="${input.getAttribute('name')}"]`));
+            const isAnyChecked = checkboxes.some((checkbox) => checkbox.checked);
+            if (isAnyChecked) {
+              checkboxes.forEach((checkbox) => {
+                checkbox.removeAttribute('required');
+              });
+            }
+          }
           //To handle focus on hidden input error
           if (!['checkbox'].includes(input.getAttribute('type')) && field.getElementsByClassName('required').length) {
             input.setAttribute('required', '');

package/dist/cjs/salla-conditional-fields.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-conditional-fields.entry.cjs.js","mappings":"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~~UAGlC~~,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC,MAAM,EAAE;YACzG,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;WACpC;SACF,CAAC,CAAC;OACJ;WAAM;QACL,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC5C,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;OAC3B;KACF,CAAC,CAAC;GACN;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;;;MAE3D,IAAI,UAAU,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,CAAC,OAAO,CAAC,kBAAkB,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;MACnF,IAAI,CAAC,UAAU,EAAE;QACf,OAAO;OACR;MAED,IAAI,CAAC,aAAa,CAAC;QACjB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,GAAG,UAAU,GAAG,IAAI,CAAC;OAChE,CAAC,CAAA;KACH,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,qBAAa,CACR,EACP;GACH;;;;;;","names":["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"],"version":3}
1	+ {"file":"salla-conditional-fields.entry.cjs.js","mappings":"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","names":["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"],"version":3}

package/dist/cjs/salla-installment.cjs.entry.js CHANGED Viewed

@@ -29,6 +29,13 @@ const SallaInstallment = class {
       }
       this.renderInstallments();
     });
+    salla.event.on('product::price.updated', ({ data }) => {
+      if (!data.price || data.price == this.price) {
+        return;
+      }
+      this.price = data.price;
+      this.renderInstallments(true);
+    });
   }
   render() {
     return (index.h(index.Host, null, this.tamaraIsActive ?
@@ -39,13 +46,19 @@ const SallaInstallment = class {
       index.h("div", { class: "spotii-wrapper" }, index.h("div", { class: "spotii-promo" }))
       : ''));
   }
-  renderInstallments() {
+  renderInstallments(isUpdating = false) {
     // Tamara
     if (this.tamaraIsActive) {
-      var script = document.createElement('script');
-      script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
-      document.head.appendChild(script);
-      script.onload = () => {
+      if (isUpdating) {
+        var oldTamaraScript = document.querySelector('script[src="https://cdn.tamara.co/widget/product-widget.min.js"]');
+        if (oldTamaraScript) {
+          oldTamaraScript.remove();
+        }
+      }
+      var tamaraScript = document.createElement('script');
+      tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
+      document.head.appendChild(tamaraScript);
+      tamaraScript.onload = () => {
         window.TamaraProductWidget.init({ lang: this.language });
         setTimeout(() => {
           window.TamaraProductWidget.render();
@@ -54,10 +67,27 @@ const SallaInstallment = class {
     }
     // tabby
     if (this.tabbyIsActive) {
-      var script = document.createElement('script');
-      script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
-      document.head.appendChild(script);
-      script.onload = () => {
+      if (isUpdating) {
+        // remove #tabbyPromoWrapper and re append it
+        var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');
+        if (oldTabbyWrapper) {
+          oldTabbyWrapper.remove();
+        }
+        var tabbyPromoWrapper = document.createElement('div');
+        tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');
+        var tabbyPromo = document.createElement('div');
+        tabbyPromo.setAttribute('id', 'tabbyPromo');
+        tabbyPromoWrapper.appendChild(tabbyPromo);
+        this.host.appendChild(tabbyPromoWrapper);
+        var oldTabbyScript = document.querySelector('script[src="https://checkout.tabby.ai/tabby-promo.js"]');
+        if (oldTabbyScript) {
+          oldTabbyScript.remove();
+        }
+      }
+      var tabbyScript = document.createElement('script');
+      tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
+      document.head.appendChild(tabbyScript);
+      tabbyScript.onload = () => {
         const TabbyPromo = window.TabbyPromo;
         new TabbyPromo({
           selector: '#tabbyPromo',
@@ -69,11 +99,27 @@ const SallaInstallment = class {
           element.setAttribute('aria-label', 'Tabby Logo');
         });
       };
-      //this is workaround to remove the default border and add margin
+      // this is a workaround to remove the default border and add margin
       this.removeTabbyBorder();
     }
     // Spotii
     if (this.spotiiIsActive) {
+      if (isUpdating) {
+        var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');
+        if (oldSpotiiWrapper) {
+          oldSpotiiWrapper.remove();
+        }
+        var spotiiPromoWrapper = document.createElement('div');
+        spotiiPromoWrapper.classList.add('spotii-wrapper');
+        var spotiiPromo = document.createElement('div');
+        spotiiPromo.classList.add('spotii-promo');
+        spotiiPromoWrapper.appendChild(spotiiPromo);
+        this.host.appendChild(spotiiPromoWrapper);
+        var oldSpotiiScript = document.querySelector('script[src="' + salla.url.cdn('js/price-widget-ar-salla.js') + '"]');
+        if (oldSpotiiScript) {
+          oldSpotiiScript.remove();
+        }
+      }
       let amount = salla.money((Number(this.price) / 3).toFixed(2));
       let isRTL = salla.config.get('theme.is_rtl', true);
       window.spotiiConfig = {
@@ -90,10 +136,10 @@ const SallaInstallment = class {
         // forcedShow: false,
         // merchantID: null,
       };
-      var script = document.createElement('script');
-      script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
-      document.head.appendChild(script);
-      // script.onload = () => {
+      var spotiiScript = document.createElement('script');
+      spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
+      document.head.appendChild(spotiiScript);
+      // spotiiScript.onload = () => {
       //   // setTimeout()
       // }
     }
@@ -119,6 +165,7 @@ const SallaInstallment = class {
       }
     }, this.tabbyRemoveBorderTries * 500);
   }
+  get host() { return index.getElement(this); }
 };
 SallaInstallment.style = sallaInstallmentCss;

package/dist/cjs/salla-installment.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-installment.entry.cjs.js","mappings":"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","names":["h","Host"],"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"],"version":3}
1	+ {"file":"salla-installment.entry.cjs.js","mappings":"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","names":["h","Host"],"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"],"version":3}

package/dist/cjs/salla-product-options.cjs.entry.js CHANGED Viewed

@@ -288,7 +288,7 @@ const SallaProductOptions = class {
       this.getExpireDonationMessage(option));
   }
   fileUploader(option, additions = null) {
-    return index.h("salla-file-upload", Object.assign({}, (additions || {}), { "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, required: option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), class: { "s-product-options-image-input": true, required: option.required } }), index.h("div", { class: "s-product-options-filepond-placeholder" }, index.h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept && additions.accept.split(',').every(type => type.includes('image'))
+    return index.h("salla-file-upload", Object.assign({}, (additions || {}), { "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, required: !option.visibility_condition && option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), class: { "s-product-options-image-input": true, required: option.required } }), index.h("div", { class: "s-product-options-filepond-placeholder" }, index.h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept && additions.accept.split(',').every(type => type.includes('image'))
         ? camera.CameraIcon
         : FileIcon }), index.h("p", { class: "s-product-options-filepond-placeholder-text" }, salla.lang.get('common.uploader.drag_and_drop')), index.h("span", { class: "filepond--label-action" }, salla.lang.get('common.uploader.browse'))));
   }
@@ -306,7 +306,7 @@ const SallaProductOptions = class {
   // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption
   //@ts-ignore
   numberOption(option) {
-    return index.h("input", { type: "text", value: option.value, class: "s-form-control", required: option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
+    return index.h("input", { type: "text", value: option.value, class: "s-form-control", required: !option.visibility_condition && option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
   }
   //@ts-ignore
   splitterOption() {
@@ -314,36 +314,36 @@ const SallaProductOptions = class {
   }
   //@ts-ignore
   textOption(option) {
-    return index.h("div", { class: "s-product-options-text" }, index.h("input", { type: "text", value: option.value, class: 's-form-control', required: option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onInput: e => this.changedHandler(e, option) }));
+    return index.h("div", { class: "s-product-options-text" }, index.h("input", { type: "text", value: option.value, class: 's-form-control', required: !option.visibility_condition && option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onInput: e => this.changedHandler(e, option) }));
   }
   //@ts-ignore
   textareaOption(option) {
     //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great
-    return index.h("div", { class: "s-product-options-textarea" }, index.h("div", { class: "mt-1" }, index.h("textarea", { rows: 4, value: option.value, class: "s-form-control", required: option.required, id: `options[${option.id}]`, name: `options[${option.id}]`, placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onInput: (e) => this.changedHandler(e, option) })));
+    return index.h("div", { class: "s-product-options-textarea" }, index.h("div", { class: "mt-1" }, index.h("textarea", { rows: 4, value: option.value, class: "s-form-control", required: !option.visibility_condition && option.required, id: `options[${option.id}]`, name: `options[${option.id}]`, placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onInput: (e) => this.changedHandler(e, option) })));
   }
   //@ts-ignore
   mapOption(option) {
     return index.h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: `options[${option.id}]`, searchable: true, required: option.required, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
   }
   colorPickerOption(option) {
-    return index.h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: `options[${option.id}]`, required: option.required, onInvalidInput: (e) => this.invalidHandler(e, option), color: option.value });
+    return index.h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: `options[${option.id}]`, required: !option.visibility_condition && option.required, onInvalidInput: (e) => this.invalidHandler(e, option), color: option.value });
   }
   /**
    * ============= Date Time options =============
    */
   //@ts-ignore
   timeOption(option) {
-    return index.h("salla-datetime-picker", { noCalendar: true, enableTime: true, dateFormat: "h:i K", value: option.value, placeholder: option.name, required: option.required, name: `options[${option.id}]`, class: "s-product-options-time-element", onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) });
+    return index.h("salla-datetime-picker", { noCalendar: true, enableTime: true, dateFormat: "h:i K", value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, name: `options[${option.id}]`, class: "s-product-options-time-element", onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) });
   }
   //@ts-ignore
   dateOption(option) {
     //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
-    return index.h("div", { class: "s-product-options-date-element" }, index.h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: option.required, minDate: new Date(), name: `options[${option.id}]`, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
+    return index.h("div", { class: "s-product-options-date-element" }, index.h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, minDate: new Date(), name: `options[${option.id}]`, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
   }
   //@ts-ignore
   datetimeOption(option) {
     //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
-    return index.h("div", { class: "s-product-options-datetime-element" }, index.h("salla-datetime-picker", { enableTime: true, value: option.value, dateFormat: "Y-m-d G:i:K", placeholder: option.name, required: option.required, name: `options[${option.id}]`, maxDate: option.to_date_time, minDate: option.from_date_time, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
+    return index.h("div", { class: "s-product-options-datetime-element" }, index.h("salla-datetime-picker", { enableTime: true, value: option.value, dateFormat: "Y-m-d G:i:K", placeholder: option.name, required: !option.visibility_condition && option.required, name: `options[${option.id}]`, maxDate: option.to_date_time, minDate: option.from_date_time, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
   }
   /**
    * ============= Advanced options =============
@@ -377,25 +377,25 @@ const SallaProductOptions = class {
     return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
   }
   singleOption(option) {
-    return index.h("div", null, index.h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control", onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }, index.h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
+    return index.h("div", null, index.h("select", { name: `options[${option.id}]`, required: !option.visibility_condition && option.required, class: "s-form-control", onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }, index.h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
       option.details.map((detail) => {
         return index.h("option", { value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail));
       })));
   }
   multipleOptions(option) {
-    let is_required = option.required && !option.details.some(detail => detail.is_selected);
+    let is_required = option.required && !option.details.some(detail => detail.is_selected) && !option.visibility_condition;
     return index.h("div", { class: { "s-product-options-multiple-options-wrapper": true, 'required': option.required } }, option === null || option === void 0 ? void 0 : option.details.map((detail) => {
       return index.h("div", null, index.h("input", { type: "checkbox", value: detail.id, disabled: this.isOptionDetailOut(detail), checked: detail.is_selected, required: is_required, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: (e) => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), "aria-describedby": `options[${option.id}]-description` }), index.h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
     }));
   }
   //@ts-ignore
   colorOption(option) {
-    return index.h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => index.h("div", { class: "s-product-options-colors-item" }, index.h("input", { type: "radio", value: detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `color-${this.productId}-${option.id}-${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }), index.h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, index.h("span", { style: { "background-color": detail.color } }), index.h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
+    return index.h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => index.h("div", { class: "s-product-options-colors-item" }, index.h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: `options[${option.id}]`, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `color-${this.productId}-${option.id}-${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }), index.h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, index.h("span", { style: { "background-color": detail.color } }), index.h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
   }
   //@ts-ignore
   thumbnailOption(option) {
     return index.h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-      return index.h("div", null, index.h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `option_${this.productId}-${option.id}_${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), index.h("label", { htmlFor: `option_${this.productId}-${option.id}_${detail.id}`, "data-img-id": detail.option_value, class: "go-to-slide" }, index.h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), index.h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+      return index.h("div", null, index.h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `option_${this.productId}-${option.id}_${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), index.h("label", { htmlFor: `option_${this.productId}-${option.id}_${detail.id}`, "data-img-id": detail.option_value, class: "go-to-slide" }, index.h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), index.h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
         [
           index.h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
           this.canDisabled ? index.h("div", { class: "s-product-options-thumbnails-badge-overlay" }) : '',