@salla.sa/twilight-components 2.14.341 → 2.14.342
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/salla-accordion_62.cjs.entry.js +23 -14
- package/dist/collection/components/salla-product-options/salla-product-options.js +21 -12
- package/dist/collection/components/salla-quantity-input/salla-quantity-input.js +2 -2
- package/dist/components/salla-product-options2.js +21 -12
- package/dist/components/salla-quantity-input.js +2 -2
- package/dist/esm/salla-accordion_62.entry.js +23 -14
- package/dist/twilight/{p-acc84896.entry.js → p-5387fddc.entry.js} +2 -2
- package/dist/twilight/twilight.esm.js +1 -1
- package/package.json +1 -1
|
@@ -7822,32 +7822,41 @@ const SallaProductOptions = class {
|
|
|
7822
7822
|
* The id of the product to which the options are going to be fetched for.
|
|
7823
7823
|
*/
|
|
7824
7824
|
this.productId = salla.config.get('page.id');
|
|
7825
|
-
this.handleDonationOptions = (event, detail, type) => {
|
|
7825
|
+
this.handleDonationOptions = (event, detail, type, _option) => {
|
|
7826
|
+
// Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
|
|
7826
7827
|
if (detail === 'custom' && type === 'input') {
|
|
7827
|
-
|
|
7828
|
+
const inputTarget = event.target;
|
|
7829
|
+
salla.helpers.inputDigitsOnly(inputTarget);
|
|
7828
7830
|
salla.event.emit('product-options::donation-changed', {
|
|
7829
7831
|
id: this.productId,
|
|
7830
|
-
price:
|
|
7832
|
+
price: inputTarget.value
|
|
7831
7833
|
});
|
|
7834
|
+
inputTarget.dispatchEvent(new window.Event('change', { bubbles: true }));
|
|
7832
7835
|
return;
|
|
7833
7836
|
}
|
|
7834
|
-
|
|
7835
|
-
event.
|
|
7836
|
-
|
|
7837
|
+
// Tab (radio) change: get value from the radio that fired.
|
|
7838
|
+
const value = type === 'option' ? String(event.target?.value ?? '') : '';
|
|
7839
|
+
if (type === 'option' && detail === 'custom') {
|
|
7840
|
+
// "Custom" tab: stop propagation so form does not see change until user types in donating-amount input.
|
|
7841
|
+
event.preventDefault();
|
|
7842
|
+
event.stopPropagation();
|
|
7843
|
+
event.stopImmediatePropagation();
|
|
7844
|
+
}
|
|
7845
|
+
this.isCustomDonation = value === 'custom';
|
|
7837
7846
|
if (this.donationInput) {
|
|
7838
|
-
if (
|
|
7847
|
+
if (value === 'custom') {
|
|
7839
7848
|
this.donationInput.value = '';
|
|
7840
7849
|
this.donationInput.focus();
|
|
7841
7850
|
}
|
|
7842
7851
|
else {
|
|
7843
|
-
this.donationInput.value =
|
|
7852
|
+
this.donationInput.value = value;
|
|
7844
7853
|
}
|
|
7845
7854
|
if (detail === 'custom') {
|
|
7846
7855
|
return;
|
|
7847
7856
|
}
|
|
7848
7857
|
salla.event.emit('product-options::donation-changed', {
|
|
7849
7858
|
id: this.productId,
|
|
7850
|
-
price:
|
|
7859
|
+
price: value
|
|
7851
7860
|
});
|
|
7852
7861
|
}
|
|
7853
7862
|
};
|
|
@@ -8319,15 +8328,15 @@ const SallaProductOptions = class {
|
|
|
8319
8328
|
index.h("div", { key: option.id, class: "s-product-options-donation-progress" }, index.h("salla-progress-bar", { donation: option.donation }))
|
|
8320
8329
|
: '',
|
|
8321
8330
|
option.details.length ?
|
|
8322
|
-
[index.h("h4", { key: option.id }, this.selectAmount), index.h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => index.h("div", { key: option.id, class: "s-product-options-donation-options-item" }, index.h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option') }), index.h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, index.h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
|
|
8323
|
-
index.h("div", { class: "s-product-options-donation-options-item" }, index.h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option') }), index.h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, index.h("span", null, " ", this.selectDonationAmount, " ")))
|
|
8331
|
+
[index.h("h4", { key: option.id }, this.selectAmount), index.h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => index.h("div", { key: option.id, class: "s-product-options-donation-options-item" }, index.h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option', option) }), index.h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, index.h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
|
|
8332
|
+
index.h("div", { class: "s-product-options-donation-options-item" }, index.h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option', option) }), index.h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, index.h("span", null, " ", this.selectDonationAmount, " ")))
|
|
8324
8333
|
: '')] : '',
|
|
8325
8334
|
index.h("div", { key: option.id, class: { "s-product-options-donation-input-group": true, "shown": !option.details.length || (option.details.length && this.isCustomDonation) } }, index.h("input", { type: "text", id: "donating-amount", name: "donation_amount", class: "s-form-control", ref: el => { this.donationInput = el; }, value: option.details.length
|
|
8326
8335
|
&& option.details.some(detail => detail.is_selected)
|
|
8327
8336
|
? option.details.find(detail => detail.is_selected).additional_price
|
|
8328
8337
|
: option.value,
|
|
8329
8338
|
// required
|
|
8330
|
-
placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input'), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), index.h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
|
|
8339
|
+
placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input', option), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), index.h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
|
|
8331
8340
|
] :
|
|
8332
8341
|
this.getExpireDonationMessage(option));
|
|
8333
8342
|
}
|
|
@@ -9550,7 +9559,7 @@ const SallaQuantityInput = class {
|
|
|
9550
9559
|
}
|
|
9551
9560
|
async componentWillLoad() {
|
|
9552
9561
|
await salla.onReady();
|
|
9553
|
-
this.disableInput = salla.config.get('store.settings.product.manual_quantity');
|
|
9562
|
+
this.disableInput = !salla.config.get('store.settings.product.manual_quantity');
|
|
9554
9563
|
this.quantity = parseInt(this.host.getAttribute('value')) || 1;
|
|
9555
9564
|
this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
|
|
9556
9565
|
this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
|
|
@@ -9602,7 +9611,7 @@ const SallaQuantityInput = class {
|
|
|
9602
9611
|
if (!inputAttributes['aria-label'] && !inputAttributes['aria-labelledby']) {
|
|
9603
9612
|
inputAttributes['aria-label'] = salla.lang.getWithDefault('common.elements.quantity', 'Quantity');
|
|
9604
9613
|
}
|
|
9605
|
-
return (index.h(index.Host, { key: '
|
|
9614
|
+
return (index.h(index.Host, { key: 'ba636a941071cccc06a8fbcadf7a3ff93d88f4d0', class: "s-quantity-input" }, index.h("div", { key: '5fbe227ca172661fb8edc32940f586e7e26c8d46', class: "s-quantity-input-container" }, index.h("button", { key: 'dbdb3cbac199c2fb73ef49dcdb513ebd38f5f3b5', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? index.h("span", { innerHTML: Add }) : '', index.h("slot", { key: 'f117c437e73134ab4fe949c61190e38e4db81e44', name: "increment-button" })), index.h("input", { key: 'c41fd5bbb8760171462d3a5cc54ebe9ae54747fc', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", readOnly: this.disableInput, value: this.quantity }), index.h("button", { key: '94ea2537b3deb379d9a07233e49d60fb3982784e', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? index.h("span", { innerHTML: Minus }) : '', index.h("slot", { key: '4756e4069e6e16f92de72eefa99d48c3793d58cf', name: "decrement-button" })))));
|
|
9606
9615
|
}
|
|
9607
9616
|
get host() { return index.getElement(this); }
|
|
9608
9617
|
static get watchers() { return {
|
|
@@ -36,32 +36,41 @@ export class SallaProductOptions {
|
|
|
36
36
|
* The id of the product to which the options are going to be fetched for.
|
|
37
37
|
*/
|
|
38
38
|
this.productId = salla.config.get('page.id');
|
|
39
|
-
this.handleDonationOptions = (event, detail, type) => {
|
|
39
|
+
this.handleDonationOptions = (event, detail, type, _option) => {
|
|
40
|
+
// Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
|
|
40
41
|
if (detail === 'custom' && type === 'input') {
|
|
41
|
-
|
|
42
|
+
const inputTarget = event.target;
|
|
43
|
+
salla.helpers.inputDigitsOnly(inputTarget);
|
|
42
44
|
salla.event.emit('product-options::donation-changed', {
|
|
43
45
|
id: this.productId,
|
|
44
|
-
price:
|
|
46
|
+
price: inputTarget.value
|
|
45
47
|
});
|
|
48
|
+
inputTarget.dispatchEvent(new window.Event('change', { bubbles: true }));
|
|
46
49
|
return;
|
|
47
50
|
}
|
|
48
|
-
|
|
49
|
-
event.
|
|
50
|
-
|
|
51
|
+
// Tab (radio) change: get value from the radio that fired.
|
|
52
|
+
const value = type === 'option' ? String(event.target?.value ?? '') : '';
|
|
53
|
+
if (type === 'option' && detail === 'custom') {
|
|
54
|
+
// "Custom" tab: stop propagation so form does not see change until user types in donating-amount input.
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
event.stopPropagation();
|
|
57
|
+
event.stopImmediatePropagation();
|
|
58
|
+
}
|
|
59
|
+
this.isCustomDonation = value === 'custom';
|
|
51
60
|
if (this.donationInput) {
|
|
52
|
-
if (
|
|
61
|
+
if (value === 'custom') {
|
|
53
62
|
this.donationInput.value = '';
|
|
54
63
|
this.donationInput.focus();
|
|
55
64
|
}
|
|
56
65
|
else {
|
|
57
|
-
this.donationInput.value =
|
|
66
|
+
this.donationInput.value = value;
|
|
58
67
|
}
|
|
59
68
|
if (detail === 'custom') {
|
|
60
69
|
return;
|
|
61
70
|
}
|
|
62
71
|
salla.event.emit('product-options::donation-changed', {
|
|
63
72
|
id: this.productId,
|
|
64
|
-
price:
|
|
73
|
+
price: value
|
|
65
74
|
});
|
|
66
75
|
}
|
|
67
76
|
};
|
|
@@ -533,15 +542,15 @@ export class SallaProductOptions {
|
|
|
533
542
|
h("div", { key: option.id, class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
|
|
534
543
|
: '',
|
|
535
544
|
option.details.length ?
|
|
536
|
-
[h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option') }), h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
|
|
537
|
-
h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option') }), h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, h("span", null, " ", this.selectDonationAmount, " ")))
|
|
545
|
+
[h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option', option) }), h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
|
|
546
|
+
h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option', option) }), h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, h("span", null, " ", this.selectDonationAmount, " ")))
|
|
538
547
|
: '')] : '',
|
|
539
548
|
h("div", { key: option.id, class: { "s-product-options-donation-input-group": true, "shown": !option.details.length || (option.details.length && this.isCustomDonation) } }, h("input", { type: "text", id: "donating-amount", name: "donation_amount", class: "s-form-control", ref: el => { this.donationInput = el; }, value: option.details.length
|
|
540
549
|
&& option.details.some(detail => detail.is_selected)
|
|
541
550
|
? option.details.find(detail => detail.is_selected).additional_price
|
|
542
551
|
: option.value,
|
|
543
552
|
// required
|
|
544
|
-
placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input'), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
|
|
553
|
+
placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input', option), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
|
|
545
554
|
] :
|
|
546
555
|
this.getExpireDonationMessage(option));
|
|
547
556
|
}
|
|
@@ -38,7 +38,7 @@ export class SallaQuantityInput {
|
|
|
38
38
|
}
|
|
39
39
|
async componentWillLoad() {
|
|
40
40
|
await salla.onReady();
|
|
41
|
-
this.disableInput = salla.config.get('store.settings.product.manual_quantity');
|
|
41
|
+
this.disableInput = !salla.config.get('store.settings.product.manual_quantity');
|
|
42
42
|
this.quantity = parseInt(this.host.getAttribute('value')) || 1;
|
|
43
43
|
this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
|
|
44
44
|
this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
|
|
@@ -90,7 +90,7 @@ export class SallaQuantityInput {
|
|
|
90
90
|
if (!inputAttributes['aria-label'] && !inputAttributes['aria-labelledby']) {
|
|
91
91
|
inputAttributes['aria-label'] = salla.lang.getWithDefault('common.elements.quantity', 'Quantity');
|
|
92
92
|
}
|
|
93
|
-
return (h(Host, { key: '
|
|
93
|
+
return (h(Host, { key: 'ba636a941071cccc06a8fbcadf7a3ff93d88f4d0', class: "s-quantity-input" }, h("div", { key: '5fbe227ca172661fb8edc32940f586e7e26c8d46', class: "s-quantity-input-container" }, h("button", { key: 'dbdb3cbac199c2fb73ef49dcdb513ebd38f5f3b5', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: 'f117c437e73134ab4fe949c61190e38e4db81e44', name: "increment-button" })), h("input", { key: 'c41fd5bbb8760171462d3a5cc54ebe9ae54747fc', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: '94ea2537b3deb379d9a07233e49d60fb3982784e', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: '4756e4069e6e16f92de72eefa99d48c3793d58cf', name: "decrement-button" })))));
|
|
94
94
|
}
|
|
95
95
|
static get is() { return "salla-quantity-input"; }
|
|
96
96
|
static get originalStyleUrls() {
|
|
@@ -86,32 +86,41 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
|
|
|
86
86
|
* The id of the product to which the options are going to be fetched for.
|
|
87
87
|
*/
|
|
88
88
|
this.productId = salla.config.get('page.id');
|
|
89
|
-
this.handleDonationOptions = (event, detail, type) => {
|
|
89
|
+
this.handleDonationOptions = (event, detail, type, _option) => {
|
|
90
|
+
// Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
|
|
90
91
|
if (detail === 'custom' && type === 'input') {
|
|
91
|
-
|
|
92
|
+
const inputTarget = event.target;
|
|
93
|
+
salla.helpers.inputDigitsOnly(inputTarget);
|
|
92
94
|
salla.event.emit('product-options::donation-changed', {
|
|
93
95
|
id: this.productId,
|
|
94
|
-
price:
|
|
96
|
+
price: inputTarget.value
|
|
95
97
|
});
|
|
98
|
+
inputTarget.dispatchEvent(new window.Event('change', { bubbles: true }));
|
|
96
99
|
return;
|
|
97
100
|
}
|
|
98
|
-
|
|
99
|
-
event.
|
|
100
|
-
|
|
101
|
+
// Tab (radio) change: get value from the radio that fired.
|
|
102
|
+
const value = type === 'option' ? String(event.target?.value ?? '') : '';
|
|
103
|
+
if (type === 'option' && detail === 'custom') {
|
|
104
|
+
// "Custom" tab: stop propagation so form does not see change until user types in donating-amount input.
|
|
105
|
+
event.preventDefault();
|
|
106
|
+
event.stopPropagation();
|
|
107
|
+
event.stopImmediatePropagation();
|
|
108
|
+
}
|
|
109
|
+
this.isCustomDonation = value === 'custom';
|
|
101
110
|
if (this.donationInput) {
|
|
102
|
-
if (
|
|
111
|
+
if (value === 'custom') {
|
|
103
112
|
this.donationInput.value = '';
|
|
104
113
|
this.donationInput.focus();
|
|
105
114
|
}
|
|
106
115
|
else {
|
|
107
|
-
this.donationInput.value =
|
|
116
|
+
this.donationInput.value = value;
|
|
108
117
|
}
|
|
109
118
|
if (detail === 'custom') {
|
|
110
119
|
return;
|
|
111
120
|
}
|
|
112
121
|
salla.event.emit('product-options::donation-changed', {
|
|
113
122
|
id: this.productId,
|
|
114
|
-
price:
|
|
123
|
+
price: value
|
|
115
124
|
});
|
|
116
125
|
}
|
|
117
126
|
};
|
|
@@ -583,15 +592,15 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
|
|
|
583
592
|
h("div", { key: option.id, class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
|
|
584
593
|
: '',
|
|
585
594
|
option.details.length ?
|
|
586
|
-
[h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option') }), h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
|
|
587
|
-
h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option') }), h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, h("span", null, " ", this.selectDonationAmount, " ")))
|
|
595
|
+
[h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option', option) }), h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
|
|
596
|
+
h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option', option) }), h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, h("span", null, " ", this.selectDonationAmount, " ")))
|
|
588
597
|
: '')] : '',
|
|
589
598
|
h("div", { key: option.id, class: { "s-product-options-donation-input-group": true, "shown": !option.details.length || (option.details.length && this.isCustomDonation) } }, h("input", { type: "text", id: "donating-amount", name: "donation_amount", class: "s-form-control", ref: el => { this.donationInput = el; }, value: option.details.length
|
|
590
599
|
&& option.details.some(detail => detail.is_selected)
|
|
591
600
|
? option.details.find(detail => detail.is_selected).additional_price
|
|
592
601
|
: option.value,
|
|
593
602
|
// required
|
|
594
|
-
placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input'), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
|
|
603
|
+
placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input', option), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
|
|
595
604
|
] :
|
|
596
605
|
this.getExpireDonationMessage(option));
|
|
597
606
|
}
|
|
@@ -42,7 +42,7 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuantit
|
|
|
42
42
|
}
|
|
43
43
|
async componentWillLoad() {
|
|
44
44
|
await salla.onReady();
|
|
45
|
-
this.disableInput = salla.config.get('store.settings.product.manual_quantity');
|
|
45
|
+
this.disableInput = !salla.config.get('store.settings.product.manual_quantity');
|
|
46
46
|
this.quantity = parseInt(this.host.getAttribute('value')) || 1;
|
|
47
47
|
this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
|
|
48
48
|
this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
|
|
@@ -94,7 +94,7 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuantit
|
|
|
94
94
|
if (!inputAttributes['aria-label'] && !inputAttributes['aria-labelledby']) {
|
|
95
95
|
inputAttributes['aria-label'] = salla.lang.getWithDefault('common.elements.quantity', 'Quantity');
|
|
96
96
|
}
|
|
97
|
-
return (h(Host, { key: '
|
|
97
|
+
return (h(Host, { key: 'ba636a941071cccc06a8fbcadf7a3ff93d88f4d0', class: "s-quantity-input" }, h("div", { key: '5fbe227ca172661fb8edc32940f586e7e26c8d46', class: "s-quantity-input-container" }, h("button", { key: 'dbdb3cbac199c2fb73ef49dcdb513ebd38f5f3b5', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: 'f117c437e73134ab4fe949c61190e38e4db81e44', name: "increment-button" })), h("input", { key: 'c41fd5bbb8760171462d3a5cc54ebe9ae54747fc', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: '94ea2537b3deb379d9a07233e49d60fb3982784e', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: '4756e4069e6e16f92de72eefa99d48c3793d58cf', name: "decrement-button" })))));
|
|
98
98
|
}
|
|
99
99
|
get host() { return this; }
|
|
100
100
|
static get watchers() { return {
|
|
@@ -7802,32 +7802,41 @@ const SallaProductOptions = class {
|
|
|
7802
7802
|
* The id of the product to which the options are going to be fetched for.
|
|
7803
7803
|
*/
|
|
7804
7804
|
this.productId = salla.config.get('page.id');
|
|
7805
|
-
this.handleDonationOptions = (event, detail, type) => {
|
|
7805
|
+
this.handleDonationOptions = (event, detail, type, _option) => {
|
|
7806
|
+
// Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
|
|
7806
7807
|
if (detail === 'custom' && type === 'input') {
|
|
7807
|
-
|
|
7808
|
+
const inputTarget = event.target;
|
|
7809
|
+
salla.helpers.inputDigitsOnly(inputTarget);
|
|
7808
7810
|
salla.event.emit('product-options::donation-changed', {
|
|
7809
7811
|
id: this.productId,
|
|
7810
|
-
price:
|
|
7812
|
+
price: inputTarget.value
|
|
7811
7813
|
});
|
|
7814
|
+
inputTarget.dispatchEvent(new window.Event('change', { bubbles: true }));
|
|
7812
7815
|
return;
|
|
7813
7816
|
}
|
|
7814
|
-
|
|
7815
|
-
event.
|
|
7816
|
-
|
|
7817
|
+
// Tab (radio) change: get value from the radio that fired.
|
|
7818
|
+
const value = type === 'option' ? String(event.target?.value ?? '') : '';
|
|
7819
|
+
if (type === 'option' && detail === 'custom') {
|
|
7820
|
+
// "Custom" tab: stop propagation so form does not see change until user types in donating-amount input.
|
|
7821
|
+
event.preventDefault();
|
|
7822
|
+
event.stopPropagation();
|
|
7823
|
+
event.stopImmediatePropagation();
|
|
7824
|
+
}
|
|
7825
|
+
this.isCustomDonation = value === 'custom';
|
|
7817
7826
|
if (this.donationInput) {
|
|
7818
|
-
if (
|
|
7827
|
+
if (value === 'custom') {
|
|
7819
7828
|
this.donationInput.value = '';
|
|
7820
7829
|
this.donationInput.focus();
|
|
7821
7830
|
}
|
|
7822
7831
|
else {
|
|
7823
|
-
this.donationInput.value =
|
|
7832
|
+
this.donationInput.value = value;
|
|
7824
7833
|
}
|
|
7825
7834
|
if (detail === 'custom') {
|
|
7826
7835
|
return;
|
|
7827
7836
|
}
|
|
7828
7837
|
salla.event.emit('product-options::donation-changed', {
|
|
7829
7838
|
id: this.productId,
|
|
7830
|
-
price:
|
|
7839
|
+
price: value
|
|
7831
7840
|
});
|
|
7832
7841
|
}
|
|
7833
7842
|
};
|
|
@@ -8299,15 +8308,15 @@ const SallaProductOptions = class {
|
|
|
8299
8308
|
h("div", { key: option.id, class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
|
|
8300
8309
|
: '',
|
|
8301
8310
|
option.details.length ?
|
|
8302
|
-
[h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option') }), h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
|
|
8303
|
-
h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option') }), h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, h("span", null, " ", this.selectDonationAmount, " ")))
|
|
8311
|
+
[h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option', option) }), h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
|
|
8312
|
+
h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option', option) }), h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, h("span", null, " ", this.selectDonationAmount, " ")))
|
|
8304
8313
|
: '')] : '',
|
|
8305
8314
|
h("div", { key: option.id, class: { "s-product-options-donation-input-group": true, "shown": !option.details.length || (option.details.length && this.isCustomDonation) } }, h("input", { type: "text", id: "donating-amount", name: "donation_amount", class: "s-form-control", ref: el => { this.donationInput = el; }, value: option.details.length
|
|
8306
8315
|
&& option.details.some(detail => detail.is_selected)
|
|
8307
8316
|
? option.details.find(detail => detail.is_selected).additional_price
|
|
8308
8317
|
: option.value,
|
|
8309
8318
|
// required
|
|
8310
|
-
placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input'), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
|
|
8319
|
+
placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input', option), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
|
|
8311
8320
|
] :
|
|
8312
8321
|
this.getExpireDonationMessage(option));
|
|
8313
8322
|
}
|
|
@@ -9530,7 +9539,7 @@ const SallaQuantityInput = class {
|
|
|
9530
9539
|
}
|
|
9531
9540
|
async componentWillLoad() {
|
|
9532
9541
|
await salla.onReady();
|
|
9533
|
-
this.disableInput = salla.config.get('store.settings.product.manual_quantity');
|
|
9542
|
+
this.disableInput = !salla.config.get('store.settings.product.manual_quantity');
|
|
9534
9543
|
this.quantity = parseInt(this.host.getAttribute('value')) || 1;
|
|
9535
9544
|
this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
|
|
9536
9545
|
this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
|
|
@@ -9582,7 +9591,7 @@ const SallaQuantityInput = class {
|
|
|
9582
9591
|
if (!inputAttributes['aria-label'] && !inputAttributes['aria-labelledby']) {
|
|
9583
9592
|
inputAttributes['aria-label'] = salla.lang.getWithDefault('common.elements.quantity', 'Quantity');
|
|
9584
9593
|
}
|
|
9585
|
-
return (h(Host, { key: '
|
|
9594
|
+
return (h(Host, { key: 'ba636a941071cccc06a8fbcadf7a3ff93d88f4d0', class: "s-quantity-input" }, h("div", { key: '5fbe227ca172661fb8edc32940f586e7e26c8d46', class: "s-quantity-input-container" }, h("button", { key: 'dbdb3cbac199c2fb73ef49dcdb513ebd38f5f3b5', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: 'f117c437e73134ab4fe949c61190e38e4db81e44', name: "increment-button" })), h("input", { key: 'c41fd5bbb8760171462d3a5cc54ebe9ae54747fc', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: '94ea2537b3deb379d9a07233e49d60fb3982784e', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: '4756e4069e6e16f92de72eefa99d48c3793d58cf', name: "decrement-button" })))));
|
|
9586
9595
|
}
|
|
9587
9596
|
get host() { return getElement(this); }
|
|
9588
9597
|
static get watchers() { return {
|