@salla.sa/twilight-components 2.14.37 → 2.14.39

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 (48) hide show
  1. package/dist/cjs/{app-globals-7e9cc854.js → app-globals-6da6c1dc.js} +3 -3
  2. package/dist/cjs/{app-globals-7e9cc854.js.map → app-globals-6da6c1dc.js.map} +1 -1
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/salla-add-product-button_48.cjs.entry.js.map +1 -1
  5. package/dist/cjs/salla-booking-field_2.cjs.entry.js +9 -13
  6. package/dist/cjs/salla-booking-field_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/twilight.cjs.js +1 -1
  8. package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js +9 -13
  9. package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js.map +1 -1
  10. package/dist/components/index.js +2 -2
  11. package/dist/components/index.js.map +1 -1
  12. package/dist/components/salla-conditional-fields2.js +9 -13
  13. package/dist/components/salla-conditional-fields2.js.map +1 -1
  14. package/dist/components/salla-quick-buy2.js.map +1 -1
  15. package/dist/esm/{app-globals-2bc94380.js → app-globals-54b35df8.js} +3 -3
  16. package/dist/esm/{app-globals-2bc94380.js.map → app-globals-54b35df8.js.map} +1 -1
  17. package/dist/esm/loader.js +1 -1
  18. package/dist/esm/salla-add-product-button_48.entry.js.map +1 -1
  19. package/dist/esm/salla-booking-field_2.entry.js +9 -13
  20. package/dist/esm/salla-booking-field_2.entry.js.map +1 -1
  21. package/dist/esm/twilight.js +1 -1
  22. package/dist/esm-es5/app-globals-54b35df8.js +25 -0
  23. package/dist/{twilight/p-81956171.system.js.map → esm-es5/app-globals-54b35df8.js.map} +1 -1
  24. package/dist/esm-es5/loader.js +1 -1
  25. package/dist/esm-es5/salla-add-product-button_48.entry.js.map +1 -1
  26. package/dist/esm-es5/salla-booking-field_2.entry.js +1 -1
  27. package/dist/esm-es5/salla-booking-field_2.entry.js.map +1 -1
  28. package/dist/esm-es5/twilight.js +1 -1
  29. package/dist/twilight/{p-ee43190e.system.entry.js → p-1738a61e.system.entry.js} +2 -2
  30. package/dist/twilight/p-1738a61e.system.entry.js.map +1 -0
  31. package/dist/twilight/p-4f5aa38b.entry.js +5 -0
  32. package/dist/twilight/p-4f5aa38b.entry.js.map +1 -0
  33. package/dist/twilight/{p-ac3f5ba2.system.js → p-6ad782b3.system.js} +2 -2
  34. package/dist/twilight/p-a3e8ed53.entry.js.map +1 -1
  35. package/dist/twilight/{p-81956171.system.js → p-bdc20110.system.js} +2 -2
  36. package/dist/{esm-es5/app-globals-2bc94380.js.map → twilight/p-bdc20110.system.js.map} +1 -1
  37. package/dist/twilight/{p-d03e6297.js → p-ce054ee5.js} +2 -2
  38. package/dist/twilight/{p-d03e6297.js.map → p-ce054ee5.js.map} +1 -1
  39. package/dist/twilight/p-ebd108c0.system.entry.js.map +1 -1
  40. package/dist/twilight/twilight.esm.js +1 -1
  41. package/dist/twilight/twilight.js +1 -1
  42. package/package.json +5 -5
  43. package/dist/esm-es5/app-globals-2bc94380.js +0 -25
  44. package/dist/twilight/p-a69f32dc.entry.js +0 -5
  45. package/dist/twilight/p-a69f32dc.entry.js.map +0 -1
  46. package/dist/twilight/p-ee43190e.system.entry.js.map +0 -1
  47. package/dist/types/global.d.ts +0 -20
  48. /package/dist/twilight/{p-ac3f5ba2.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 support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
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
- salla.log('Trying to find all the element with condition:', `[data-show-when^="${optionId}"]`);
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 ', (isMultiple ? 'Multiple' : 'Single'), ' value:', isSelected);
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":"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","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'].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}
1
+ {"file":"salla-conditional-fields2.js","mappings":"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","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}