@salla.sa/twilight-components 2.14.38 → 2.14.40
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.
- package/dist/cjs/{app-globals-b6f5d986.js → app-globals-6da6c1dc.js} +3 -3
- package/dist/cjs/app-globals-6da6c1dc.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/salla-add-product-button_48.cjs.entry.js.map +1 -1
- package/dist/cjs/salla-booking-field_2.cjs.entry.js +9 -13
- package/dist/cjs/salla-booking-field_2.cjs.entry.js.map +1 -1
- package/dist/cjs/salla-payments.cjs.entry.js +3 -3
- package/dist/cjs/salla-payments.cjs.entry.js.map +1 -1
- package/dist/cjs/twilight.cjs.js +1 -1
- package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js +9 -13
- package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js.map +1 -1
- package/dist/collection/components/salla-payments/salla-payments.js +3 -3
- package/dist/collection/components/salla-payments/salla-payments.js.map +1 -1
- package/dist/components/index.js +2 -2
- package/dist/components/index.js.map +1 -1
- package/dist/components/salla-conditional-fields2.js +9 -13
- package/dist/components/salla-conditional-fields2.js.map +1 -1
- package/dist/components/salla-payments.js +3 -3
- package/dist/components/salla-payments.js.map +1 -1
- package/dist/components/salla-quick-buy2.js.map +1 -1
- package/dist/esm/{app-globals-9c9225a7.js → app-globals-54b35df8.js} +3 -3
- package/dist/esm/app-globals-54b35df8.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/salla-add-product-button_48.entry.js.map +1 -1
- package/dist/esm/salla-booking-field_2.entry.js +9 -13
- package/dist/esm/salla-booking-field_2.entry.js.map +1 -1
- package/dist/esm/salla-payments.entry.js +3 -3
- package/dist/esm/salla-payments.entry.js.map +1 -1
- package/dist/esm/twilight.js +1 -1
- package/dist/esm-es5/{app-globals-9c9225a7.js → app-globals-54b35df8.js} +3 -3
- package/dist/{twilight/p-71830393.system.js.map → esm-es5/app-globals-54b35df8.js.map} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/salla-add-product-button_48.entry.js.map +1 -1
- package/dist/esm-es5/salla-booking-field_2.entry.js +1 -1
- package/dist/esm-es5/salla-booking-field_2.entry.js.map +1 -1
- package/dist/esm-es5/salla-payments.entry.js +1 -1
- package/dist/esm-es5/salla-payments.entry.js.map +1 -1
- package/dist/esm-es5/twilight.js +1 -1
- package/dist/twilight/{p-ee43190e.system.entry.js → p-1738a61e.system.entry.js} +2 -2
- package/dist/twilight/p-1738a61e.system.entry.js.map +1 -0
- package/dist/twilight/p-4f5aa38b.entry.js +5 -0
- package/dist/twilight/p-4f5aa38b.entry.js.map +1 -0
- package/dist/twilight/{p-2f036c53.system.js → p-6ad782b3.system.js} +2 -2
- package/dist/twilight/{p-f0dd4217.entry.js → p-6b82ee90.entry.js} +2 -2
- package/dist/twilight/p-6b82ee90.entry.js.map +1 -0
- package/dist/twilight/p-a3e8ed53.entry.js.map +1 -1
- package/dist/twilight/{p-7d79e66d.system.entry.js → p-afdc10ed.system.entry.js} +2 -2
- package/dist/twilight/p-afdc10ed.system.entry.js.map +1 -0
- package/dist/twilight/{p-71830393.system.js → p-bdc20110.system.js} +2 -2
- package/dist/{esm-es5/app-globals-9c9225a7.js.map → twilight/p-bdc20110.system.js.map} +1 -1
- package/dist/twilight/{p-dfcd47a6.js → p-ce054ee5.js} +2 -2
- package/dist/twilight/{p-dfcd47a6.js.map → p-ce054ee5.js.map} +1 -1
- package/dist/twilight/p-ebd108c0.system.entry.js.map +1 -1
- package/dist/twilight/twilight.esm.js +1 -1
- package/dist/twilight/twilight.js +1 -1
- package/package.json +5 -5
- package/dist/cjs/app-globals-b6f5d986.js.map +0 -1
- package/dist/esm/app-globals-9c9225a7.js.map +0 -1
- package/dist/twilight/p-7d79e66d.system.entry.js.map +0 -1
- package/dist/twilight/p-a69f32dc.entry.js +0 -5
- package/dist/twilight/p-a69f32dc.entry.js.map +0 -1
- package/dist/twilight/p-ee43190e.system.entry.js.map +0 -1
- package/dist/twilight/p-f0dd4217.entry.js.map +0 -1
- package/dist/types/global.d.ts +0 -20
- /package/dist/twilight/{p-2f036c53.system.js.map → p-6ad782b3.system.js.map} +0 -0
|
@@ -33,40 +33,40 @@ const SallaConditionalFields = /*@__PURE__*/ proxyCustomElement(class SallaCondi
|
|
|
33
33
|
var _a;
|
|
34
34
|
salla.event.emit('salla-onditional-fields::change', event);
|
|
35
35
|
salla.log('Received the change event: ', event);
|
|
36
|
-
if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
|
|
37
|
-
salla.log('Ignore the change because is not
|
|
36
|
+
if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox', 'radio'].includes(event.target.getAttribute('type'))) {
|
|
37
|
+
salla.log('Ignore the change because is not a supported input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
|
-
// to extract the option id from the input name, the supported names are name[*] and name[*][]
|
|
41
40
|
let optionId = event.target.name.replace('[]', '');
|
|
42
41
|
let isMultiple = event.target.getAttribute('type') === 'checkbox';
|
|
43
|
-
|
|
42
|
+
let isRadio = event.target.getAttribute('type') === 'radio';
|
|
43
|
+
salla.log('Trying to find all elements with condition:', `[data-show-when^="${optionId}"]`);
|
|
44
44
|
this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
|
|
45
45
|
.forEach((field) => {
|
|
46
46
|
let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
|
|
47
47
|
let value = field === null || field === void 0 ? void 0 : field.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();
|
|
48
|
-
// let isSelected = isMultiple ? event.target?.checked : value === event.target.value;
|
|
49
48
|
let isSelected;
|
|
50
49
|
if (isMultiple) {
|
|
51
|
-
// @ts-ignore
|
|
52
50
|
let selectedValues = Array.from(this.host.querySelectorAll(`input[name="${event.target.name}"]:checked`), e => e === null || e === void 0 ? void 0 : e.value);
|
|
53
51
|
isSelected = selectedValues.includes(value.toString());
|
|
54
52
|
}
|
|
53
|
+
else if (isRadio) {
|
|
54
|
+
// Handle radio inputs.
|
|
55
|
+
isSelected = event.target.checked && event.target.value === value;
|
|
56
|
+
}
|
|
55
57
|
else {
|
|
56
58
|
isSelected = value === event.target.value;
|
|
57
59
|
}
|
|
58
|
-
salla.log('The input is ',
|
|
60
|
+
salla.log('The input is ', isMultiple ? 'Multiple' : isRadio ? 'Radio' : 'Single', ' value:', isSelected);
|
|
59
61
|
let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);
|
|
60
62
|
if (showTheInput) {
|
|
61
63
|
field.classList.remove('hidden');
|
|
62
64
|
field.querySelectorAll('[name]').forEach((input) => {
|
|
63
65
|
input.removeAttribute('disabled');
|
|
64
|
-
// Return required attribute to the input if the option is required
|
|
65
66
|
const closestProductOption = input.closest('.s-product-options-option');
|
|
66
67
|
if (closestProductOption.dataset.optionRequired === 'true') {
|
|
67
68
|
input.setAttribute('required', '');
|
|
68
69
|
}
|
|
69
|
-
// Handle multiple checkboxes with same name and required attribute
|
|
70
70
|
if (input.getAttribute('type') === 'checkbox') {
|
|
71
71
|
const checkboxes = Array.from(document.querySelectorAll(`input[type="checkbox"][name="${input.getAttribute('name')}"]`));
|
|
72
72
|
const isAnyChecked = checkboxes.some((checkbox) => checkbox.checked);
|
|
@@ -76,10 +76,6 @@ const SallaConditionalFields = /*@__PURE__*/ proxyCustomElement(class SallaCondi
|
|
|
76
76
|
});
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
//To handle focus on hidden input error
|
|
80
|
-
if (!['checkbox'].includes(input.getAttribute('type')) && field.getElementsByClassName('required').length) {
|
|
81
|
-
input.setAttribute('required', '');
|
|
82
|
-
}
|
|
83
79
|
});
|
|
84
80
|
}
|
|
85
81
|
else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"salla-conditional-fields2.js","mappings":";;;;;MASa,sBAAsB;;;;;EAIzB,cAAc,CAAC,QAAQ;IAC7B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,QAAQ,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkB;MAC/F,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MAC9B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;MAC5C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC,CAAC;GACJ;EAEO,aAAa,CAAC,KAAK;IACzB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;;MAE7C,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;MACnC,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;MAClC,IAAI,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,WAAW,EAAE,MAAK,QAAQ,EAAE;QAC9C,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;OACjB;MACD,IAAI,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;;QAExF,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;OACvB;KACF,CAAC,CAAC;GACJ;EAGD,aAAa,CAAC,KAAK;;IACjB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,iCAAiC,EAAE,KAAK,CAAC,CAAC;IAC3D,KAAK,CAAC,GAAG,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;IAEhD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE;
|
|
1
|
+
{"file":"salla-conditional-fields2.js","mappings":";;;;;MASa,sBAAsB;;;;;EAIzB,cAAc,CAAC,QAAQ;IAC7B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,QAAQ,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkB;MAC/F,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MAC9B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;MAC5C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC,CAAC;GACJ;EAEO,aAAa,CAAC,KAAK;IACzB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;;MAE7C,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;MACnC,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;MAClC,IAAI,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,WAAW,EAAE,MAAK,QAAQ,EAAE;QAC9C,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;OACjB;MACD,IAAI,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;;QAExF,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;OACvB;KACF,CAAC,CAAC;GACJ;EAGD,aAAa,CAAC,KAAK;;IACjB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,iCAAiC,EAAE,KAAK,CAAC,CAAC;IAC3D,KAAK,CAAC,GAAG,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;IAEhD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE;MACrI,KAAK,CAAC,GAAG,CAAC,sDAAsD,IAAI,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,OAAO,KAAI,KAAK,CAAC,CAAC,CAAC;MACtG,OAAO;KACR;IAED,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACnD,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,CAAC;IAClE,IAAI,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IAE5D,KAAK,CAAC,GAAG,CAAC,6CAA6C,EAAE,qBAAqB,QAAQ,IAAI,CAAC,CAAC;IAE5F,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,QAAQ,IAAI,CAAC;OAC1D,OAAO,CAAC,CAAC,KAAkB;MAC1B,IAAI,OAAO,GAAG,EAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA,CAAC;MACtD,IAAI,KAAK,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,kBAAkB,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;MAC7E,IAAI,UAAU,CAAC;MACf,IAAI,UAAU,EAAE;QACd,IAAI,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,KAAK,CAAC,MAAM,CAAC,IAAI,YAAY,CAAC,EAAE,CAAC,IAAK,CAAsB,aAAtB,CAAC,uBAAD,CAAC,CAAuB,KAAK,CAAC,CAAC;QAC/I,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;OACxD;WAAM,IAAI,OAAO,EAAE;;QAElB,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;OACnE;WAAM;QACL,UAAU,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;OAC3C;MAED,KAAK,CAAC,GAAG,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;MAE1G,IAAI,YAAY,GAAG,CAAC,OAAO,IAAI,UAAU,MAAM,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC;MACxE,IAAI,YAAY,EAAE;QAChB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACjC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;UAC7C,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;UAElC,MAAM,oBAAoB,GAAI,KAA0B,CAAC,OAAO,CAAC,2BAA2B,CAAgB,CAAC;UAC7G,IAAI,oBAAoB,CAAC,OAAO,CAAC,cAAc,KAAK,MAAM,EAAE;YAC1D,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;WACpC;UAED,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,EAAE;YAC7C,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,gCAAgC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAuB,CAAC;YAC/I,MAAM,YAAY,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,CAAC,CAAC;YACrE,IAAI,YAAY,EAAE;cAChB,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;gBAC1B,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;eACtC,CAAC,CAAC;aACJ;WACF;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,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;","names":[],"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', 'radio'].includes(event.target.getAttribute('type'))) {\n salla.log('Ignore the change because is not a supported input: ' + (event?.target?.tagName || 'N/A'));\n return;\n }\n\n let optionId = event.target.name.replace('[]', '');\n let isMultiple = event.target.getAttribute('type') === 'checkbox';\n let isRadio = event.target.getAttribute('type') === 'radio';\n\n salla.log('Trying to find all elements 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;\n if (isMultiple) {\n let selectedValues = Array.from(this.host.querySelectorAll(`input[name=\"${event.target.name}\"]:checked`), e => (e as HTMLInputElement)?.value);\n isSelected = selectedValues.includes(value.toString());\n } else if (isRadio) {\n // Handle radio inputs.\n isSelected = event.target.checked && event.target.value === value;\n } else {\n isSelected = value === event.target.value;\n }\n\n salla.log('The input is ', isMultiple ? 'Multiple' : isRadio ? 'Radio' : '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 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 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 });\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}
|
|
@@ -34,14 +34,14 @@ const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments ext
|
|
|
34
34
|
render() {
|
|
35
35
|
const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
|
|
36
36
|
const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
|
|
37
|
-
return (h(Host, { class: "s-payments-list-wrap" }, madeInKSA && h("li", { class: "s-payments-list-item" }, h("img", { class: "lazy", width: "100%", height: "100%", decoding: "async", loading: "lazy", "data-src": salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })),
|
|
37
|
+
return (h(Host, { class: "s-payments-list-wrap" }, h("ul", { class: "s-payments-list" }, madeInKSA && h("li", { class: "s-payments-list-item" }, h("img", { class: "lazy", width: "100%", height: "100%", decoding: "async", loading: "lazy", "data-src": salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
|
|
38
38
|
h("div", { id: "cod-slot", innerHTML: this.codSlot
|
|
39
39
|
.replace(/\{image\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58)) }) :
|
|
40
40
|
h("div", { id: "payment-slot", innerHTML: this.paymentSlot
|
|
41
41
|
.replace(/\{image\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))
|
|
42
|
-
.replace(/\{payment\}/g, payment) })))
|
|
42
|
+
.replace(/\{payment\}/g, payment) }))), sbcId && h("div", { id: "sbc-slot", innerHTML: this.sbcSlot
|
|
43
43
|
.replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
|
|
44
|
-
.replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) })));
|
|
44
|
+
.replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
|
|
45
45
|
}
|
|
46
46
|
componentDidLoad() {
|
|
47
47
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"salla-payments.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCWlCA,eAAa;;;;mBAUqB,EAAE;;EAE/C,iBAAiB;IACf,OAAO,KAAK,CAAC,OAAO,EAAE;OACnB,IAAI,CAAC;;MACJ,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;QACpC,IAAI;UACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACzC;QAAC,OAAO,KAAK,EAAE;UACd,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,qDAAqD,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;UACxF,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;SACnB;OACF;MACD,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;MAC5D,IAAI,CAAC,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,0CAAE,SAAS,KAAI,sFAAsF,IAAI,CAAC,gBAAgB,2CAA2C,CAAC;MACpO,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,SAAS,KAAI,2GAA2G,IAAI,CAAC,gBAAgB,0EAA0E,CAAC;MAChR,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,SAAS,KAAI,0EAA0E,IAAI,CAAC,gBAAgB,iDAAiD,CAAC;MACtN,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;KAC7D,CAAC,CAAA;GACL;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;IAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IACtG,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB,
|
|
1
|
+
{"file":"salla-payments.js","mappings":"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","names":["SallaPayments"],"sources":["src/components/salla-payments/salla-payments.scss?tag=salla-payments","src/components/salla-payments/salla-payments.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n/**\n * @slot payment - Replaces payment item, has replaceable props `{image}`, `{payment}`.\n * @slot sbc - Replaces SBC certificate item, has replaceable props `{image}`.\n * @slot cod - Replaces COD item, has replaceable props `{image}`.\n */\n@Component({\n tag: 'salla-payments',\n styleUrl: 'salla-payments.scss'\n})\n\nexport class SallaPayments {\n @Element() host: HTMLElement;\n private paymentSlot: string;\n private sbcSlot: string;\n private codSlot: string;\n private payments: string[];\n private placeholderImage: string;\n /**\n * Array of the payments/items that are not supported, ex: [\"sbc\", \"made-in-ksa\", \"cod\", \"mada\", \"\"].\n */\n @Prop({ mutable: true }) exclude: string[] = [];\n\n componentWillLoad() {\n return salla.onReady()\n .then(() => {\n if (typeof this.exclude === 'string') {\n try {\n this.exclude = JSON.parse(this.exclude);\n } catch (error) {\n salla.logger.error('salla-payments:: failed to parse the exclude props!', this.exclude);\n this.exclude = [];\n }\n }\n this.placeholderImage = salla.url.cdn(`images/s-empty.png`);\n this.paymentSlot = this.host.querySelector('[slot=\"payment\"]')?.innerHTML || `<li class=\"s-payments-list-item\"><img class=\"lazy\" width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src=\"{image}\" alt={payment} /><li>`;\n this.sbcSlot = this.host.querySelector('[slot=\"sbc\"]')?.innerHTML || `<li class=\"s-payments-list-item\"><a target=\"_blank\" href=\"{link}\"> <img width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src={image} class=\"lazy s-payments-sbc-image\" alt=\"SBC\"/></a><li>`;\n this.codSlot = this.host.querySelector('[slot=\"cod\"]')?.innerHTML || `<li class=\"s-payments-list-item\"> <img width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src={image} class=\"lazy\" alt=\"COD\"/><li>`;\n this.payments = salla.config.get('store.settings.payments');\n })\n }\n \n render() {\n const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');\n const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');\n return (\n <Host class=\"s-payments-list-wrap\">\n { }\n <ul class=\"s-payments-list\">\n {madeInKSA && <li class=\"s-payments-list-item\">\n <img class=\"lazy\" width=\"100%\" height=\"100%\" decoding=\"async\" loading=\"lazy\" data-src={salla.url.cdn(`images/made-in-ksa.svg`, 58, 58)} alt=\"made in KSA certified\" />\n </li>}\n\n {/* Dynamic methods */}\n {this.payments.map((payment) => (\n payment == \"cod\" ?\n <div id=\"cod-slot\" innerHTML={this.codSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58))}>\n </div> :\n <div id=\"payment-slot\" innerHTML={this.paymentSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))\n .replace(/\\{payment\\}/g, payment)}>\n </div>\n ))}\n\n {/* SBC certificate */}\n {sbcId && <div id=\"sbc-slot\" innerHTML={this.sbcSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))\n .replace(/\\{link\\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`)}>\n </div>}\n </ul>\n </Host>\n );\n }\n componentDidLoad() {\n //todo:: double check about the following workaround, it looks not normal\n document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));\n // fix lazy loaded images that have 100% width and height\n this.host.querySelectorAll('.lazy').forEach((img) => {\n img.addEventListener('load', () => {\n img.setAttribute('width', \"100%\");\n img.setAttribute('height', \"100%\");\n });\n });\n }\n componentDidRender() {\n //todo:: double check about the following workaround to reduce the dom length, it looks unusal\n this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelectorAll('#sbc-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelectorAll('#cod-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"payment\"]')?.remove();\n this.host.querySelector('[slot=\"sbc\"]')?.remove();\n this.host.querySelector('[slot=\"cod\"]')?.remove();\n }\n}\n"],"version":3}
|