@salla.sa/twilight-components 2.11.10 → 2.11.11

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 (13) hide show
  1. package/dist/cjs/salla-button_37.cjs.entry.js +24 -13
  2. package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js +23 -12
  3. package/dist/collection/components/salla-product-options/salla-product-options.js +1 -1
  4. package/dist/components/salla-conditional-fields2.js +23 -12
  5. package/dist/components/salla-product-options.js +1 -1
  6. package/dist/esm/salla-button_37.entry.js +24 -13
  7. package/dist/esm-es5/salla-button_37.entry.js +2 -2
  8. package/dist/twilight/{p-184f8592.system.entry.js → p-bb361b66.system.entry.js} +5 -5
  9. package/dist/twilight/p-c71ec183.system.js +1 -1
  10. package/dist/twilight/{p-301c6601.entry.js → p-ee192b12.entry.js} +2 -2
  11. package/dist/twilight/twilight.esm.js +1 -1
  12. package/dist/types/components/salla-conditional-fields/salla-conditional-fields.d.ts +2 -0
  13. package/package.json +2 -2
package/dist/cjs/salla-button_37.cjs.entry.js CHANGED
@@ -2710,6 +2710,27 @@ const SallaConditionalFields = class {
2710
2710
  constructor(hostRef) {
2711
2711
  index.registerInstance(this, hostRef);
2712
2712
  }
2713
+ hideAllOptions(optionId) {
2714
+ this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
2715
+ field.classList.add('hidden');
2716
+ this.hideAllOptions(field.dataset.optionId);
2717
+ this.disableInputs(field);
2718
+ });
2719
+ }
2720
+ disableInputs(field) {
2721
+ field.querySelectorAll('[name]').forEach((input) => {
2722
+ var _a;
2723
+ input.setAttribute('disabled', '');
2724
+ input.removeAttribute('required');
2725
+ if (((_a = input === null || input === void 0 ? void 0 : input.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'select') {
2726
+ input.value = '';
2727
+ }
2728
+ if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
2729
+ // @ts-ignore
2730
+ input.checked = false;
2731
+ }
2732
+ });
2733
+ }
2713
2734
  changeHandler(event) {
2714
2735
  var _a;
2715
2736
  salla.event.emit('salla-onditional-fields::change', event);
@@ -2749,19 +2770,9 @@ const SallaConditionalFields = class {
2749
2770
  });
2750
2771
  }
2751
2772
  else {
2773
+ this.hideAllOptions(field.dataset.optionId);
2752
2774
  field.classList.add('hidden');
2753
- field.querySelectorAll('[name]').forEach((input) => {
2754
- input.setAttribute('disabled', '');
2755
- input.removeAttribute('required');
2756
- if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
2757
- // @ts-ignore
2758
- input.checked = false;
2759
- }
2760
- //firing this event will show errors, so don't run it when pageLoading.
2761
- // if (this.optionsAlreadyInitiated) {
2762
- // salla.document.event.fireEvent(input, 'change', {'bubbles': true});
2763
- // }
2764
- });
2775
+ this.disableInputs(field);
2765
2776
  }
2766
2777
  });
2767
2778
  }
@@ -23432,7 +23443,7 @@ const SallaProductOptions = class {
23432
23443
  if (this.optionsData.length == 0) {
23433
23444
  return;
23434
23445
  }
23435
- return (index.h(index.Host, { class: "s-product-options-wrapper" }, index.h("salla-conditional-fields", null, this.optionsData.map((option) => index.h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}` }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
23446
+ return (index.h(index.Host, { class: "s-product-options-wrapper" }, index.h("salla-conditional-fields", null, this.optionsData.map((option) => index.h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`, "data-option-id": option.id }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
23436
23447
  this.splitterOption()
23437
23448
  : index.h("div", { class: "s-product-options-option" }, index.h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" }, index.h("b", null, option.name, option.required && index.h("span", null, " * "), " "), index.h("small", null, option.placeholder)), index.h("div", { class: "s-product-options-option-content" }, this.getDisplayForType(option))))))));
23438
23449
  }
package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js CHANGED
@@ -7,6 +7,27 @@ import { Component, Element, Host, Listen, h } from '@stencil/core';
7
7
  * the dom you can put it like this data-show-when="{name of the field} {= or !=} {value of the field}"
8
8
  */
9
9
  export class SallaConditionalFields {
10
+ hideAllOptions(optionId) {
11
+ this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
12
+ field.classList.add('hidden');
13
+ this.hideAllOptions(field.dataset.optionId);
14
+ this.disableInputs(field);
15
+ });
16
+ }
17
+ disableInputs(field) {
18
+ field.querySelectorAll('[name]').forEach((input) => {
19
+ var _a;
20
+ input.setAttribute('disabled', '');
21
+ input.removeAttribute('required');
22
+ if (((_a = input === null || input === void 0 ? void 0 : input.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'select') {
23
+ input.value = '';
24
+ }
25
+ if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
26
+ // @ts-ignore
27
+ input.checked = false;
28
+ }
29
+ });
30
+ }
10
31
  changeHandler(event) {
11
32
  var _a;
12
33
  salla.event.emit('salla-onditional-fields::change', event);
@@ -46,19 +67,9 @@ export class SallaConditionalFields {
46
67
  });
47
68
  }
48
69
  else {
70
+ this.hideAllOptions(field.dataset.optionId);
49
71
  field.classList.add('hidden');
50
- field.querySelectorAll('[name]').forEach((input) => {
51
- input.setAttribute('disabled', '');
52
- input.removeAttribute('required');
53
- if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
54
- // @ts-ignore
55
- input.checked = false;
56
- }
57
- //firing this event will show errors, so don't run it when pageLoading.
58
- // if (this.optionsAlreadyInitiated) {
59
- // salla.document.event.fireEvent(input, 'change', {'bubbles': true});
60
- // }
61
- });
72
+ this.disableInputs(field);
62
73
  }
63
74
  });
64
75
  }
package/dist/collection/components/salla-product-options/salla-product-options.js CHANGED
@@ -83,7 +83,7 @@ export class SallaProductOptions {
83
83
  return;
84
84
  }
85
85
  return (h(Host, { class: "s-product-options-wrapper" },
86
- h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}` }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
86
+ h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`, "data-option-id": option.id }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
87
87
  this.splitterOption()
88
88
  : h("div", { class: "s-product-options-option" },
89
89
  h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" },
package/dist/components/salla-conditional-fields2.js CHANGED
@@ -8,6 +8,27 @@ const SallaConditionalFields = /*@__PURE__*/ proxyCustomElement(class extends HT
8
8
  super();
9
9
  this.__registerHost();
10
10
  }
11
+ hideAllOptions(optionId) {
12
+ this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
13
+ field.classList.add('hidden');
14
+ this.hideAllOptions(field.dataset.optionId);
15
+ this.disableInputs(field);
16
+ });
17
+ }
18
+ disableInputs(field) {
19
+ field.querySelectorAll('[name]').forEach((input) => {
20
+ var _a;
21
+ input.setAttribute('disabled', '');
22
+ input.removeAttribute('required');
23
+ if (((_a = input === null || input === void 0 ? void 0 : input.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'select') {
24
+ input.value = '';
25
+ }
26
+ if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
27
+ // @ts-ignore
28
+ input.checked = false;
29
+ }
30
+ });
31
+ }
11
32
  changeHandler(event) {
12
33
  var _a;
13
34
  salla.event.emit('salla-onditional-fields::change', event);
@@ -47,19 +68,9 @@ const SallaConditionalFields = /*@__PURE__*/ proxyCustomElement(class extends HT
47
68
  });
48
69
  }
49
70
  else {
71
+ this.hideAllOptions(field.dataset.optionId);
50
72
  field.classList.add('hidden');
51
- field.querySelectorAll('[name]').forEach((input) => {
52
- input.setAttribute('disabled', '');
53
- input.removeAttribute('required');
54
- if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
55
- // @ts-ignore
56
- input.checked = false;
57
- }
58
- //firing this event will show errors, so don't run it when pageLoading.
59
- // if (this.optionsAlreadyInitiated) {
60
- // salla.document.event.fireEvent(input, 'change', {'bubbles': true});
61
- // }
62
- });
73
+ this.disableInputs(field);
63
74
  }
64
75
  });
65
76
  }
package/dist/components/salla-product-options.js CHANGED
@@ -145,7 +145,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
145
145
  if (this.optionsData.length == 0) {
146
146
  return;
147
147
  }
148
- return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}` }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
148
+ return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`, "data-option-id": option.id }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
149
149
  this.splitterOption()
150
150
  : h("div", { class: "s-product-options-option" }, h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: "s-product-options-option-content" }, this.getDisplayForType(option))))))));
151
151
  }
package/dist/esm/salla-button_37.entry.js CHANGED
@@ -2706,6 +2706,27 @@ const SallaConditionalFields = class {
2706
2706
  constructor(hostRef) {
2707
2707
  registerInstance(this, hostRef);
2708
2708
  }
2709
+ hideAllOptions(optionId) {
2710
+ this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
2711
+ field.classList.add('hidden');
2712
+ this.hideAllOptions(field.dataset.optionId);
2713
+ this.disableInputs(field);
2714
+ });
2715
+ }
2716
+ disableInputs(field) {
2717
+ field.querySelectorAll('[name]').forEach((input) => {
2718
+ var _a;
2719
+ input.setAttribute('disabled', '');
2720
+ input.removeAttribute('required');
2721
+ if (((_a = input === null || input === void 0 ? void 0 : input.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'select') {
2722
+ input.value = '';
2723
+ }
2724
+ if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
2725
+ // @ts-ignore
2726
+ input.checked = false;
2727
+ }
2728
+ });
2729
+ }
2709
2730
  changeHandler(event) {
2710
2731
  var _a;
2711
2732
  salla.event.emit('salla-onditional-fields::change', event);
@@ -2745,19 +2766,9 @@ const SallaConditionalFields = class {
2745
2766
  });
2746
2767
  }
2747
2768
  else {
2769
+ this.hideAllOptions(field.dataset.optionId);
2748
2770
  field.classList.add('hidden');
2749
- field.querySelectorAll('[name]').forEach((input) => {
2750
- input.setAttribute('disabled', '');
2751
- input.removeAttribute('required');
2752
- if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
2753
- // @ts-ignore
2754
- input.checked = false;
2755
- }
2756
- //firing this event will show errors, so don't run it when pageLoading.
2757
- // if (this.optionsAlreadyInitiated) {
2758
- // salla.document.event.fireEvent(input, 'change', {'bubbles': true});
2759
- // }
2760
- });
2771
+ this.disableInputs(field);
2761
2772
  }
2762
2773
  });
2763
2774
  }
@@ -23428,7 +23439,7 @@ const SallaProductOptions = class {
23428
23439
  if (this.optionsData.length == 0) {
23429
23440
  return;
23430
23441
  }
23431
- return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}` }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
23442
+ return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`, "data-option-id": option.id }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
23432
23443
  this.splitterOption()
23433
23444
  : h("div", { class: "s-product-options-option" }, h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: "s-product-options-option-content" }, this.getDisplayForType(option))))))));
23434
23445
  }