@salla.sa/twilight-components 2.11.26 → 2.11.28

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 (52) hide show
  1. package/dist/cjs/camera-058ddeeb.js +13 -0
  2. package/dist/cjs/index-1d2b3370.js +10 -2
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/{salla-button_37.cjs.entry.js → salla-button_36.cjs.entry.js} +59 -342
  5. package/dist/cjs/salla-conditional-fields.cjs.entry.js +99 -0
  6. package/dist/cjs/salla-product-options.cjs.entry.js +257 -0
  7. package/dist/cjs/twilight.cjs.js +1 -1
  8. package/dist/collection/collection-manifest.json +1 -0
  9. package/dist/collection/components/salla-product-options/salla-product-options.js +11 -4
  10. package/dist/collection/components/salla-progress-bar/salla-progress-bar.css +18 -0
  11. package/dist/collection/components/salla-progress-bar/salla-progress-bar.js +196 -0
  12. package/dist/collection/components/salla-slider/salla-slider.js +18 -2
  13. package/dist/collection/global/app-dev.js +5 -0
  14. package/dist/components/index.d.ts +1 -0
  15. package/dist/components/index.js +1 -0
  16. package/dist/components/salla-product-options.js +32 -21
  17. package/dist/components/salla-progress-bar.d.ts +11 -0
  18. package/dist/components/salla-progress-bar.js +9 -0
  19. package/dist/components/salla-progress-bar2.js +81 -0
  20. package/dist/components/salla-slider2.js +4 -2
  21. package/dist/esm/camera-647ab50f.js +11 -0
  22. package/dist/esm/index-f1d446ac.js +10 -2
  23. package/dist/esm/loader.js +1 -1
  24. package/dist/esm/{salla-button_37.entry.js → salla-button_36.entry.js} +58 -340
  25. package/dist/esm/salla-conditional-fields.entry.js +95 -0
  26. package/dist/esm/salla-product-options.entry.js +253 -0
  27. package/dist/esm/twilight.js +1 -1
  28. package/dist/esm-es5/camera-647ab50f.js +4 -0
  29. package/dist/esm-es5/index-f1d446ac.js +1 -1
  30. package/dist/esm-es5/loader.js +1 -1
  31. package/dist/esm-es5/salla-button_36.entry.js +53 -0
  32. package/dist/esm-es5/salla-conditional-fields.entry.js +4 -0
  33. package/dist/esm-es5/salla-product-options.entry.js +4 -0
  34. package/dist/esm-es5/twilight.js +1 -1
  35. package/dist/twilight/p-1b87ab66.system.js +1 -1
  36. package/dist/twilight/p-56830c52.system.entry.js +4 -0
  37. package/dist/twilight/p-643ea74e.entry.js +4 -0
  38. package/dist/twilight/p-7dcf1bf3.entry.js +36 -0
  39. package/dist/twilight/p-9b7452c1.entry.js +4 -0
  40. package/dist/twilight/p-ae899ce6.system.entry.js +53 -0
  41. package/dist/twilight/p-c328c14e.system.js +4 -0
  42. package/dist/twilight/p-ccd78636.js +4 -0
  43. package/dist/twilight/p-dbe8db94.system.entry.js +4 -0
  44. package/dist/twilight/twilight.esm.js +1 -1
  45. package/dist/types/components/salla-product-options/interfaces.d.ts +9 -0
  46. package/dist/types/components/salla-progress-bar/salla-progress-bar.d.ts +35 -0
  47. package/dist/types/components/salla-slider/salla-slider.d.ts +4 -0
  48. package/dist/types/components.d.ts +74 -0
  49. package/package.json +4 -4
  50. package/dist/esm-es5/salla-button_37.entry.js +0 -53
  51. package/dist/twilight/p-187222ed.system.entry.js +0 -53
  52. package/dist/twilight/p-a341ed7a.entry.js +0 -36
@@ -0,0 +1,99 @@
1
+ /*!
2
+ * Crafted with ❤ by Salla
3
+ */
4
+ 'use strict';
5
+
6
+ Object.defineProperty(exports, '__esModule', { value: true });
7
+
8
+ const index = require('./index-1d2b3370.js');
9
+
10
+ const SallaConditionalFields = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ }
14
+ hideAllOptions(optionId) {
15
+ this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
16
+ field.classList.add('hidden');
17
+ this.hideAllOptions(field.dataset.optionId);
18
+ this.disableInputs(field);
19
+ });
20
+ }
21
+ disableInputs(field) {
22
+ field.querySelectorAll('[name]').forEach((input) => {
23
+ var _a;
24
+ input.setAttribute('disabled', '');
25
+ input.removeAttribute('required');
26
+ if (((_a = input === null || input === void 0 ? void 0 : input.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'select') {
27
+ input.value = '';
28
+ }
29
+ if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
30
+ // @ts-ignore
31
+ input.checked = false;
32
+ }
33
+ });
34
+ }
35
+ changeHandler(event) {
36
+ var _a;
37
+ salla.event.emit('salla-onditional-fields::change', event);
38
+ salla.log('Received the change event: ', event);
39
+ if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
40
+ 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'));
41
+ return;
42
+ }
43
+ // to extract the option id from the input name, the supported names are name[*] and name[*][]
44
+ let optionId = event.target.name.replace('[]', '');
45
+ let isMultiple = event.target.getAttribute('type') === 'checkbox';
46
+ salla.log('Trying to find all the element with condition:', `[data-show-when^="${optionId}"]`);
47
+ this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
48
+ .forEach((field) => {
49
+ let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
50
+ let value = field === null || field === void 0 ? void 0 : field.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();
51
+ // let isSelected = isMultiple ? event.target?.checked : value === event.target.value;
52
+ let isSelected;
53
+ if (isMultiple) {
54
+ // @ts-ignore
55
+ let selectedValues = Array.from(this.host.querySelectorAll(`input[name="${event.target.name}"]:checked`), e => e === null || e === void 0 ? void 0 : e.value);
56
+ isSelected = selectedValues.includes(value.toString());
57
+ }
58
+ else {
59
+ isSelected = value === event.target.value;
60
+ }
61
+ salla.log('The input is ', (isMultiple ? 'Multiple' : 'Single'), ' value:', isSelected);
62
+ let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);
63
+ if (showTheInput) {
64
+ field.classList.remove('hidden');
65
+ field.querySelectorAll('[name]').forEach((input) => {
66
+ input.removeAttribute('disabled');
67
+ //To handle focus on hidden input error
68
+ if (!['checkbox'].includes(input.getAttribute('type')) && field.getElementsByClassName('required').length) {
69
+ input.setAttribute('required', '');
70
+ }
71
+ });
72
+ }
73
+ else {
74
+ this.hideAllOptions(field.dataset.optionId);
75
+ field.classList.add('hidden');
76
+ this.disableInputs(field);
77
+ }
78
+ });
79
+ }
80
+ componentDidRender() {
81
+ this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {
82
+ var _a;
83
+ // @ts-ignore
84
+ let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
85
+ if (!optionName) {
86
+ return;
87
+ }
88
+ this.changeHandler({
89
+ target: this.host.querySelector('[name^="' + optionName + '"]')
90
+ });
91
+ });
92
+ }
93
+ render() {
94
+ return (index.h(index.Host, null, index.h("slot", null)));
95
+ }
96
+ get host() { return index.getElement(this); }
97
+ };
98
+
99
+ exports.salla_conditional_fields = SallaConditionalFields;
@@ -0,0 +1,257 @@
1
+ /*!
2
+ * Crafted with ❤ by Salla
3
+ */
4
+ 'use strict';
5
+
6
+ Object.defineProperty(exports, '__esModule', { value: true });
7
+
8
+ const index = require('./index-1d2b3370.js');
9
+ const camera = require('./camera-058ddeeb.js');
10
+
11
+ var DisplayType;
12
+ (function (DisplayType) {
13
+ DisplayType["COLOR"] = "color";
14
+ DisplayType["DATE"] = "date";
15
+ DisplayType["DATETIME"] = "datetime";
16
+ DisplayType["DONATION"] = "donation";
17
+ DisplayType["IMAGE"] = "image";
18
+ DisplayType["MULTIPLE_OPTIONS"] = "multiple-options";
19
+ DisplayType["NUMBER"] = "number";
20
+ DisplayType["SINGLE_OPTION"] = "single-option";
21
+ DisplayType["SPLITTER"] = "splitter";
22
+ DisplayType["TEXT"] = "text";
23
+ DisplayType["TEXTAREA"] = "textarea";
24
+ DisplayType["THUMBNAIL"] = "thumbnail";
25
+ DisplayType["TIME"] = "time";
26
+ DisplayType["RADIO"] = "radio";
27
+ DisplayType["CHECKBOX"] = "checkbox";
28
+ DisplayType["MAP"] = "map";
29
+ DisplayType["FILE"] = "file";
30
+ DisplayType["COLOR_PICKER"] = "color_picker";
31
+ })(DisplayType || (DisplayType = {}));
32
+ var Currency;
33
+ (function (Currency) {
34
+ Currency["Sar"] = "SAR";
35
+ })(Currency || (Currency = {}));
36
+
37
+ const CheckCircleIcon = `<!-- Generated by IcoMoon.io -->
38
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
39
+ <title>check</title>
40
+ <path d="M27.521 6.976c-0.569-0.472-1.407-0.393-1.879 0.171l-12.567 15.080-7.003-4.668c-0.615-0.411-1.441-0.244-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l8 5.333c0.227 0.149 0.484 0.223 0.739 0.223 0.384 0 0.763-0.165 1.027-0.48l13.333-16c0.471-0.565 0.393-1.407-0.171-1.877z"></path>
41
+ </svg>
42
+ `;
43
+
44
+ const FileIcon = `<!-- Generated by IcoMoon.io -->
45
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
46
+ <title>file-upload</title>
47
+ <path d="M21.333 24c0.341 0 0.683-0.131 0.943-0.391 0.521-0.521 0.521-1.364 0-1.885l-5.333-5.333c-0.123-0.123-0.271-0.22-0.433-0.288-0.327-0.135-0.693-0.135-1.019 0-0.163 0.068-0.311 0.165-0.433 0.288l-5.333 5.333c-0.521 0.521-0.521 1.364 0 1.885s1.364 0.521 1.885 0l3.057-3.057v10.115c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-10.115l3.057 3.057c0.26 0.26 0.601 0.391 0.943 0.391zM28.943 9.724l-9.333-9.333c-0.249-0.251-0.589-0.391-0.943-0.391h-12c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h4c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-4c-0.735 0-1.333-0.599-1.333-1.333v-24c0-0.735 0.599-1.333 1.333-1.333h11.448l8.552 8.552v16.781c0 0.735-0.599 1.333-1.333 1.333h-4c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h4c2.205 0 4-1.795 4-4v-17.333c0-0.353-0.14-0.693-0.391-0.943z"></path>
48
+ </svg>
49
+ `;
50
+
51
+ const sallaProductOptionsCss = "";
52
+
53
+ const SallaProductOptions = class {
54
+ constructor(hostRef) {
55
+ index.registerInstance(this, hostRef);
56
+ this.colorSelected = index.createEvent(this, "colorSelected", 7);
57
+ this.thumbnailSelected = index.createEvent(this, "thumbnailSelected", 7);
58
+ this.singleSelectOptionSelected = index.createEvent(this, "singleSelectOptionSelected", 7);
59
+ this.donationMoneyEntered = index.createEvent(this, "donationMoneyEntered", 7);
60
+ this.textOptionEntered = index.createEvent(this, "textOptionEntered", 7);
61
+ this.textareaOptionEntered = index.createEvent(this, "textareaOptionEntered", 7);
62
+ this.numberOptionEntered = index.createEvent(this, "numberOptionEntered", 7);
63
+ this.itemsSelected = index.createEvent(this, "itemsSelected", 7);
64
+ this.dateTimeSelected = index.createEvent(this, "dateTimeSelected", 7);
65
+ this.dateSelected = index.createEvent(this, "dateSelected", 7);
66
+ this.timeSelected = index.createEvent(this, "timeSelected", 7);
67
+ this.colorPicked = index.createEvent(this, "colorPicked", 7);
68
+ this.locationSelected = index.createEvent(this, "locationSelected", 7);
69
+ this.fileTypes = {
70
+ pdf: 'application/pdf',
71
+ png: 'image/png',
72
+ jpg: 'image/jpeg',
73
+ word: 'application/msword',
74
+ exl: 'application/vnd.ms-excel',
75
+ txt: 'text/plain',
76
+ };
77
+ this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
78
+ this.donationAmount = salla.lang.get('pages.products.donation_amount');
79
+ /**
80
+ * The id of the product to which the options are going to be fetched for.
81
+ */
82
+ this.productId = salla.config.get('page.id');
83
+ salla.lang.onLoaded(() => {
84
+ this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
85
+ this.donationAmount = salla.lang.get('pages.products.donation_amount');
86
+ });
87
+ if (this.options) {
88
+ try {
89
+ this.optionsData = JSON.parse(this.options);
90
+ return;
91
+ }
92
+ catch (e) {
93
+ salla.log('Bad json passed via options prop');
94
+ }
95
+ }
96
+ if (Array.isArray(this.optionsData)) {
97
+ salla.log('Options is not an array[] ---> ', this.optionsData);
98
+ this.optionsData = [];
99
+ }
100
+ if (this.productId && !salla.url.is_page('cart')) {
101
+ salla.api.product.getDetails(this.productId, ['options']).then((resp) => {
102
+ this.optionsData = resp.data.options;
103
+ });
104
+ }
105
+ }
106
+ //todo:: typo here, but I think we will drop it anyway😌
107
+ handleMultiSelectFieldInput() {
108
+ var checkedBoxes = this.multipleOptionDom.querySelectorAll('input[type="checkbox"]:checked');
109
+ var multiSelectedItems = [];
110
+ for (let checkbox of checkedBoxes) {
111
+ multiSelectedItems.push(checkbox.value);
112
+ }
113
+ this.itemsSelected.emit(multiSelectedItems);
114
+ }
115
+ getLatLng(value, type) {
116
+ return value
117
+ ? value.split(',')[type == 'lat' ? 0 : 1]
118
+ : '';
119
+ }
120
+ getDisplayForType(option) {
121
+ if (this[`${option.type}Option`]) {
122
+ return this[`${option.type}Option`](option);
123
+ }
124
+ if (option.type === DisplayType.COLOR_PICKER) {
125
+ return this.colorPickerOption(option);
126
+ }
127
+ if (option.type === DisplayType.MULTIPLE_OPTIONS) {
128
+ return this.multipleOptions(option);
129
+ }
130
+ if (option.type === DisplayType.SINGLE_OPTION) {
131
+ return this.singleOption(option);
132
+ }
133
+ salla.log(`Couldn't find options type(${option.type})😢`);
134
+ return '';
135
+ }
136
+ getOptionShownWhen(option) {
137
+ return option.visibility_condition
138
+ ? { "data-show-when": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }
139
+ : {};
140
+ }
141
+ //we need the cart Id for productOption Image
142
+ componentWillLoad() {
143
+ return salla.api.cart.getCurrentCartId();
144
+ }
145
+ render() {
146
+ var _a;
147
+ if (((_a = this.optionsData) === null || _a === void 0 ? void 0 : _a.length) == 0) {
148
+ return;
149
+ }
150
+ 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' ?
151
+ this.splitterOption()
152
+ : 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))))))));
153
+ }
154
+ //@ts-ignore
155
+ donationOption(option, product) {
156
+ return index.h("div", { class: "s-product-options-donation-wrapper" }, option.donation ?
157
+ index.h("div", { class: "s-product-options-donation-progress" }, index.h("salla-progress-bar", { donation: option.donation }))
158
+ : '', index.h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.donationMoneyEntered.emit(e) }), index.h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
159
+ }
160
+ //todo:: why we need this way, use the native way!!
161
+ //@ts-ignore
162
+ selectThumbnail(e, value) {
163
+ this.thumbnailSelected.emit(e);
164
+ }
165
+ fileUploader(option, additions = null) {
166
+ return index.h("salla-file-upload", Object.assign({}, (additions || {}), { "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, height: "120px", url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, 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'))
167
+ ? camera.CameraIcon
168
+ : 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'))));
169
+ }
170
+ //@ts-ignore
171
+ imageOption(option) {
172
+ return this.fileUploader(option, { accept: 'image/png,image/jpeg,image/jpg,image/gif' });
173
+ }
174
+ //@ts-ignore
175
+ fileOption(option) {
176
+ let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
177
+ return (types === null || types === void 0 ? void 0 : types.length)
178
+ ? this.fileUploader(option, { accept: types.join(',') })
179
+ : 'File types not selected.';
180
+ }
181
+ //@ts-ignore
182
+ numberOption(option) {
183
+ 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.numberOptionEntered.emit(e), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
184
+ }
185
+ //@ts-ignore
186
+ splitterOption() {
187
+ return index.h("div", { class: "s-product-options-splitter" });
188
+ }
189
+ //@ts-ignore
190
+ textOption(option) {
191
+ 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, onInput: e => this.textOptionEntered.emit(e) }));
192
+ }
193
+ //@ts-ignore
194
+ textareaOption(option) {
195
+ //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great
196
+ 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, onInput: (e) => this.textareaOptionEntered.emit(e) })));
197
+ }
198
+ //@ts-ignore
199
+ mapOption(option) {
200
+ 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, onSelected: e => this.locationSelected.emit(e) });
201
+ }
202
+ colorPickerOption(option) {
203
+ return index.h("salla-color-picker", { onSubmitted: e => this.colorPicked.emit(e), name: `options[${option.id}]`, required: option.required, color: option.value || '#5dd5c4' });
204
+ }
205
+ /**
206
+ * ============= Date Time options =============
207
+ */
208
+ //@ts-ignore
209
+ timeOption(option) {
210
+ 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", onPicked: e => this.timeSelected.emit(e) });
211
+ }
212
+ //@ts-ignore
213
+ dateOption(option) {
214
+ //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
215
+ return index.h("div", { class: "s-product-options-date-element" }, index.h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: option.required, name: `options[${option.id}]`, onPicked: e => this.dateSelected.emit(e) }));
216
+ }
217
+ //@ts-ignore
218
+ datetimeOption(option) {
219
+ //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
220
+ 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, onPicked: e => this.dateTimeSelected.emit(e) }));
221
+ }
222
+ /**
223
+ * ============= Advanced options =============
224
+ */
225
+ getOptionDetailName(detail, outOfStock = true) {
226
+ return detail.name
227
+ + ((outOfStock && detail.is_out) ? ` - ${this.outOfStockText}` : '')
228
+ + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');
229
+ }
230
+ singleOption(option) {
231
+ return index.h("div", null, index.h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control" }, index.h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
232
+ option.details.map((detail) => {
233
+ return index.h("option", { value: detail.id, disabled: detail.is_out, selected: detail.is_selected, onChange: e => this.singleSelectOptionSelected.emit(e) }, this.getOptionDetailName(detail));
234
+ })));
235
+ }
236
+ multipleOptions(option) {
237
+ return index.h("div", { ref: element => this.multipleOptionDom = element, class: { "s-product-options-multiple-options-wrapper": true, 'required': option.required } }, option === null || option === void 0 ? void 0 : option.details.map((detail) => {
238
+ return index.h("div", null, index.h("input", { type: "checkbox", value: detail.id, disabled: detail.is_out, checked: detail.is_selected, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: () => this.handleMultiSelectFieldInput(), "aria-describedby": `options[${option.id}]-description` }), index.h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
239
+ }));
240
+ }
241
+ //@ts-ignore
242
+ colorOption(option) {
243
+ return index.h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => index.h("div", null, index.h("input", { type: "radio", value: detail.id, disabled: detail.is_out, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, id: `color-${this.productId}-${option.id}-${detail.id}`, onChange: e => this.colorSelected.emit(e) }), index.h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, index.h("span", { style: { "background-color": detail.color } }), index.h("p", null, this.getOptionDetailName(detail))))));
244
+ }
245
+ //@ts-ignore
246
+ thumbnailOption(option) {
247
+ return index.h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
248
+ return index.h("div", null, index.h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, disabled: detail.is_out, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, id: `option_${this.productId}-${option.id}_${detail.id}`, onChange: (e) => this.selectThumbnail(e, detail.option_value) }), 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" })), index.h("p", null, this.getOptionDetailName(detail, false), " "), detail.is_out ?
249
+ [index.h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText), index.h("div", { class: "s-product-options-thumbnails-badge-overlay" })]
250
+ : '');
251
+ }));
252
+ }
253
+ get host() { return index.getElement(this); }
254
+ };
255
+ SallaProductOptions.style = sallaProductOptionsCss;
256
+
257
+ exports.salla_product_options = SallaProductOptions;
@@ -78,5 +78,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
78
78
 
79
79
  patchBrowser().then(options => {
80
80
  appGlobals.globalScripts();
81
- return index.bootstrapLazy(JSON.parse("[[\"salla-button_37.cjs\",[[4,\"salla-gifting\",{\"productId\":[2,\"product-id\"],\"sectionTitle\":[32],\"sectionSubtitle\":[32],\"sectionBtnText\":[32],\"giftDetails\":[32],\"selectImageForYourGift\":[32],\"selectImageOrUpload\":[32],\"selectGiftMessage\":[32],\"giftCustomText\":[32],\"textId\":[32],\"incorrectGiftText\":[32],\"nextStep\":[32],\"senderNameLabel\":[32],\"receiverNameFieldLabel\":[32],\"receiverMobileFieldLabel\":[32],\"receiverEmailFieldLabel\":[32],\"emailPlaceholder\":[32],\"sendLater\":[32],\"selectSendDateAndTime\":[32],\"canNotEditOrderAfterSelectDate\":[32],\"sendGift\":[32],\"donationRequired\":[32],\"currentStep\":[32],\"showCalendar\":[32],\"showGiftText\":[32],\"currentLang\":[32],\"parentClass\":[32],\"errors\":[32],\"gift\":[32],\"selectedGiftTextOption\":[32],\"showTextArea\":[32],\"selectedImage\":[32],\"uploadedImage\":[32],\"selectedText\":[32],\"senderName\":[32],\"errorMessage\":[32],\"hasError\":[32],\"quantity\":[32],\"deliveryDate\":[32],\"timeZone\":[32],\"receiverName\":[32],\"receiverMobile\":[32],\"receiverCountryCode\":[32],\"receiverEmail\":[32],\"open\":[64],\"close\":[64],\"goToStep2\":[64]}],[4,\"salla-loyalty\",{\"prizePoints\":[8,\"prize-points\"],\"customerPoints\":[2,\"customer-points\"],\"prizeTitle\":[1,\"prize-title\"],\"allowEmail\":[4,\"allow-email\"],\"allowMobile\":[4,\"allow-mobile\"],\"requireEmail\":[4,\"require-email\"],\"guestMessage\":[1025,\"guest-message\"],\"loyaltyProgram\":[32],\"buttonLoading\":[32],\"selectedItem\":[32],\"askConfirmation\":[32],\"is_loggedin\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64],\"resetExchange\":[64],\"exchangeLoyaltyPoint\":[64]}],[0,\"salla-product-options\",{\"productId\":[2,\"product-id\"],\"options\":[1],\"optionsData\":[32],\"outOfStockText\":[32],\"donationAmount\":[32]}],[4,\"salla-product-size-guide\",{\"guides\":[32],\"productId\":[32],\"placeholder_title\":[32],\"placeholder_description\":[32],\"modal_title\":[32],\"hasError\":[32],\"open\":[64],\"close\":[64]}],[4,\"salla-login-modal\",{\"isEmailAllowed\":[1028,\"is-email-allowed\"],\"isMobileAllowed\":[1028,\"is-mobile-allowed\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"supportWebAuth\":[516,\"support-web-auth\"],\"currentTabName\":[32],\"regType\":[32],\"translationLoaded\":[32],\"title\":[32],\"emailErrorMsg\":[32],\"firstNameErrorMsg\":[32],\"lastNameErrorMsg\":[32],\"dragAndDrop\":[32],\"browseFromFiles\":[32],\"customFields\":[32],\"uploadedImage\":[32],\"open\":[64]},[[8,\"verified\",\"onVerified\"]]],[0,\"salla-offer-modal\",{\"offer\":[32],\"offer_name\":[32],\"offer_message\":[32],\"hasError\":[32],\"errorMessage\":[32],\"productID\":[32],\"translationLoaded\":[32],\"addToCartLabel\":[32],\"open\":[64],\"showOffer\":[64]}],[0,\"salla-rating-modal\",{\"orderId\":[2,\"order-id\"],\"order\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64]}],[4,\"salla-scopes\",{\"selection\":[1],\"searchDisplayLimit\":[2,\"search-display-limit\"],\"translationLoaded\":[32],\"mode\":[32],\"current_scope\":[32],\"scopes\":[32],\"originalScopesList\":[32],\"selected_scope\":[32],\"isOpenedBefore\":[32],\"hasError\":[32],\"loading\":[32],\"close\":[64],\"open\":[64],\"handleSubmit\":[64]}],[0,\"salla-localization-modal\",{\"language\":[1537],\"currency\":[1537],\"translationLoaded\":[32],\"languages\":[32],\"currencies\":[32],\"hasError\":[32],\"errorMessage\":[32],\"open\":[64],\"close\":[64],\"submit\":[64]}],[0,\"salla-quick-order\",{\"quickOrderTitle\":[1025,\"quick-order-title\"],\"subTitle\":[1025,\"sub-title\"],\"payButtonTitle\":[1025,\"pay-button-title\"],\"confirmPayButtonTitle\":[1025,\"confirm-pay-button-title\"],\"agreementText\":[1025,\"agreement-text\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"productId\":[1025,\"product-id\"],\"thanksMessage\":[1025,\"thanks-message\"],\"quickOrderStyle\":[1025,\"quick-order-style\"],\"user\":[32],\"isAvailable\":[32],\"oneClick\":[32],\"expanded\":[32],\"isTermsRequired\":[32],\"countryCode\":[32],\"submitSucess\":[32],\"placeHolderEmail\":[32],\"emailOptional\":[32],\"agreementShowText\":[32],\"agreementModalHead\":[32],\"userNameLabel\":[32],\"termsChecked\":[32]}],[0,\"salla-user-settings\",{\"isNotifiable\":[516,\"is-notifiable\"],\"deactivateAccount\":[32],\"promotionalMsgs\":[32],\"deactivateDesc\":[32],\"promotionalMsgsDesc\":[32],\"sorryForLeavingText\":[32],\"warningText\":[32],\"keepAccount\":[32],\"buttonLoading\":[32]}],[0,\"salla-search\",{\"inline\":[4],\"oval\":[4],\"height\":[2],\"translationLoaded\":[32],\"results\":[32],\"loading\":[32],\"typing\":[32],\"debounce\":[32],\"search_term\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[0,\"salla-comment-form\",{\"type\":[1537],\"showAvatar\":[4,\"show-avatar\"],\"itemId\":[1544,\"item-id\"],\"placeholder\":[32],\"submitText\":[32],\"canComment\":[32]}],[4,\"salla-social-share\",{\"url\":[513],\"urlName\":[513,\"url-name\"],\"platforms\":[513],\"opened\":[32],\"allPlatforms\":[32],\"platformIcons\":[32],\"convertedPlatforms\":[32],\"open\":[64]}],[4,\"salla-cart-summary\",{\"cartSummaryCount\":[32],\"cartSummaryTotal\":[32],\"animateToCart\":[64]}],[4,\"salla-infinite-scroll\",{\"nextPage\":[1,\"next-page\"],\"autoload\":[1028],\"container\":[1],\"item\":[1],\"loadMore\":[32],\"noMore\":[32],\"failedToLoad\":[32]}],[4,\"salla-quantity-input\",{\"quantity\":[32],\"decrease\":[64],\"increase\":[64],\"setValue\":[64]}],[0,\"salla-user-menu\",{\"inline\":[516],\"avatarOnly\":[516,\"avatar-only\"],\"showHeader\":[516,\"show-header\"],\"relativeDropdown\":[516,\"relative-dropdown\"],\"accountLoading\":[32],\"opened\":[32],\"notifications\":[32],\"orders\":[32],\"pending_orders\":[32],\"wishlist\":[32],\"profile\":[32],\"rating\":[32],\"logout\":[32],\"hello\":[32],\"first_name\":[32],\"last_name\":[32],\"avatar\":[32],\"badges\":[32],\"hasBadges\":[32],\"OrderUpdate\":[32]}],[0,\"salla-product-availability\",{\"channels\":[1],\"productId\":[2,\"product-id\"],\"isSubscribed\":[1028,\"is-subscribed\"],\"translationLoaded\":[32],\"title_\":[32],\"isVisitorSubscribed\":[32]}],[4,\"salla-map\",{\"name\":[1],\"required\":[4],\"readonly\":[4],\"searchable\":[1028],\"lat\":[1026],\"lng\":[1026],\"apiKey\":[1025,\"api-key\"],\"modalTitle\":[1,\"modal-title\"],\"zoom\":[1026],\"theme\":[1025],\"modalActivityTitle\":[32],\"confirmButtonTitle\":[32],\"locateButtonTitle\":[32],\"locateButtonEdit\":[32],\"searchInputValue\":[32],\"geolocationError\":[32],\"searchInput\":[32],\"mapInput\":[32],\"mapElement\":[32],\"open\":[64]}],[4,\"salla-verify\",{\"display\":[1],\"type\":[1025],\"autoReload\":[4,\"auto-reload\"],\"supportWebAuth\":[4,\"support-web-auth\"],\"translationLoaded\":[32],\"title\":[32],\"resendAfter\":[32],\"isProfileVerify\":[32],\"getCode\":[64],\"open\":[64]}],[4,\"salla-color-picker\",{\"name\":[1],\"required\":[4],\"color\":[1],\"format\":[1],\"showCancelButton\":[4,\"show-cancel-button\"],\"showTextField\":[4,\"show-text-field\"],\"enableAlpha\":[4,\"enable-alpha\"],\"widgetColor\":[32],\"setPickerOption\":[64],\"movePopUp\":[64],\"setColorValue\":[64],\"openPicker\":[64],\"closePicker\":[64],\"destroyPicker\":[64]}],[4,\"salla-conditional-fields\",null,[[0,\"change\",\"changeHandler\"]]],[0,\"salla-rating-stars\",{\"name\":[1],\"size\":[1],\"value\":[2]}],[0,\"salla-datetime-picker\",{\"value\":[1537],\"required\":[4],\"name\":[513],\"placeholder\":[1],\"allowInput\":[4,\"allow-input\"],\"allowInvalidPreload\":[4,\"allow-invalid-preload\"],\"altFormat\":[1,\"alt-format\"],\"altInput\":[4,\"alt-input\"],\"altInputClass\":[1,\"alt-input-class\"],\"appendTo\":[16],\"ariaDateFormat\":[1,\"aria-date-format\"],\"autoFillDefaultTime\":[4,\"auto-fill-default-time\"],\"clickOpens\":[4,\"click-opens\"],\"closeOnSelect\":[4,\"close-on-select\"],\"conjunction\":[1],\"dateFormat\":[1,\"date-format\"],\"defaultDate\":[8,\"default-date\"],\"defaultHour\":[2,\"default-hour\"],\"defaultMinute\":[2,\"default-minute\"],\"defaultSeconds\":[2,\"default-seconds\"],\"disable\":[16],\"disableMobile\":[4,\"disable-mobile\"],\"enable\":[16],\"enableSeconds\":[4,\"enable-seconds\"],\"enableTime\":[4,\"enable-time\"],\"formatDate\":[16],\"hourIncrement\":[2,\"hour-increment\"],\"inline\":[4],\"locale\":[1],\"maxDate\":[8,\"max-date\"],\"maxTime\":[8,\"max-time\"],\"minDate\":[8,\"min-date\"],\"minTime\":[8,\"min-time\"],\"minuteIncrement\":[2,\"minute-increment\"],\"mode\":[1],\"monthSelectorType\":[1,\"month-selector-type\"],\"nextArrow\":[1,\"next-arrow\"],\"noCalendar\":[4,\"no-calendar\"],\"dateParser\":[16],\"position\":[1],\"positionElement\":[16],\"prevArrow\":[1,\"prev-arrow\"],\"shorthandCurrentMonth\":[4,\"shorthand-current-month\"],\"static\":[4],\"showMonths\":[2,\"show-months\"],\"time_24hr\":[4,\"time_-2-4hr\"],\"weekNumbers\":[4,\"week-numbers\"],\"wrap\":[4]}],[4,\"salla-tab-content\",{\"name\":[1],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tab-header\",{\"name\":[1],\"activeClass\":[1,\"active-class\"],\"height\":[8],\"centered\":[4],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tabs\",{\"backgroundColor\":[1,\"background-color\"],\"vertical\":[4]},[[0,\"tabSelected\",\"onSelectedTab\"]]],[0,\"salla-file-upload\",{\"value\":[1537],\"files\":[513],\"height\":[513],\"cartItemId\":[1,\"cart-item-id\"],\"profileImage\":[516,\"profile-image\"],\"name\":[1537],\"payloadName\":[1,\"payload-name\"],\"accept\":[1537],\"fileId\":[2,\"file-id\"],\"url\":[1025],\"method\":[1],\"formData\":[1,\"form-data\"],\"required\":[4],\"maxFileSize\":[1,\"max-file-size\"],\"disabled\":[4],\"allowDrop\":[4,\"allow-drop\"],\"allowBrowse\":[4,\"allow-browse\"],\"allowPaste\":[4,\"allow-paste\"],\"allowMultiple\":[4,\"allow-multiple\"],\"allowReplace\":[4,\"allow-replace\"],\"allowRevert\":[4,\"allow-revert\"],\"allowRemove\":[4,\"allow-remove\"],\"allowProcess\":[4,\"allow-process\"],\"allowReorder\":[4,\"allow-reorder\"],\"storeAsFile\":[4,\"store-as-file\"],\"forceRevert\":[4,\"force-revert\"],\"maxFilesCount\":[2,\"max-files-count\"],\"maxParallelUploads\":[2,\"max-parallel-uploads\"],\"checkValidity\":[4,\"check-validity\"],\"itemInsertLocation\":[1,\"item-insert-location\"],\"itemInsertInterval\":[2,\"item-insert-interval\"],\"credits\":[4],\"dropOnPage\":[4,\"drop-on-page\"],\"dropOnElement\":[4,\"drop-on-element\"],\"dropValidation\":[4,\"drop-validation\"],\"ignoredFiles\":[16],\"instantUpload\":[1028,\"instant-upload\"],\"chunkUploads\":[4,\"chunk-uploads\"],\"chunkForce\":[4,\"chunk-force\"],\"chunkSize\":[2,\"chunk-size\"],\"chunkRetryDelays\":[16],\"labelDecimalSeparator\":[1,\"label-decimal-separator\"],\"labelThousandsSeparator\":[1,\"label-thousands-separator\"],\"labelIdle\":[1025,\"label-idle\"],\"iconRemove\":[1,\"icon-remove\"],\"iconProcess\":[1,\"icon-process\"],\"iconRetry\":[1,\"icon-retry\"],\"iconUndo\":[1,\"icon-undo\"],\"setOption\":[64]}],[4,\"salla-slider\",{\"blockTitle\":[513,\"block-title\"],\"blockSubtitle\":[513,\"block-subtitle\"],\"displayAllUrl\":[513,\"display-all-url\"],\"arrowsCentered\":[516,\"arrows-centered\"],\"verticalThumbs\":[516,\"vertical-thumbs\"],\"vertical\":[516],\"autoHeight\":[516,\"auto-height\"],\"showControls\":[516,\"show-controls\"],\"controlsOuter\":[516,\"controls-outer\"],\"showThumbsControls\":[4,\"show-thumbs-controls\"],\"autoPlay\":[4,\"auto-play\"],\"slidesPerView\":[1,\"slides-per-view\"],\"pagination\":[4],\"centered\":[4],\"loop\":[4],\"type\":[1],\"sliderConfig\":[520,\"slider-config\"],\"thumbsConfig\":[520,\"thumbs-config\"],\"currentIndex\":[32],\"isEnd\":[32],\"isBeginning\":[32],\"isRTL\":[32],\"swiperScript\":[32],\"displayAllTitle\":[32],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"slideToLoop\":[64],\"slideNextLoop\":[64],\"slidePrevLoop\":[64],\"slideReset\":[64],\"slideToClosest\":[64],\"update\":[64],\"updateAutoHeight\":[64],\"updateSlides\":[64],\"updateProgress\":[64],\"updateSlidesClasses\":[64],\"getSlides\":[64]}],[4,\"salla-list-tile\",{\"href\":[1],\"target\":[1]}],[0,\"salla-tel-input\",{\"phone\":[1025],\"name\":[1],\"countryCode\":[1025,\"country-code\"],\"mobileRequired\":[32],\"countryCodeLabel\":[32],\"mobileLabel\":[32],\"tooShort\":[32],\"tooLong\":[32],\"invalidCountryCode\":[32],\"invalidNumber\":[32],\"errorMap\":[32],\"getValues\":[64],\"isValid\":[64]}],[4,\"salla-placeholder\",{\"icon\":[1],\"alignment\":[1],\"iconSize\":[1,\"icon-size\"],\"translationLoaded\":[32]}],[0,\"salla-skeleton\",{\"type\":[1],\"width\":[1],\"height\":[1]}],[4,\"salla-modal\",{\"isClosable\":[1028,\"is-closable\"],\"width\":[513],\"position\":[513],\"visible\":[516],\"hasSkeleton\":[516,\"has-skeleton\"],\"isLoading\":[1540,\"is-loading\"],\"subTitleFirst\":[4,\"sub-title-first\"],\"noPadding\":[4,\"no-padding\"],\"subTitle\":[1,\"sub-title\"],\"centered\":[4],\"iconStyle\":[1,\"icon-style\"],\"modalTitle\":[32],\"open\":[64],\"close\":[64],\"setTitle\":[64],\"loading\":[64],\"stopLoading\":[64]},[[0,\"keyup\",\"handleKeyUp\"]]],[4,\"salla-button\",{\"shape\":[513],\"color\":[513],\"fill\":[513],\"size\":[513],\"width\":[513],\"loading\":[516],\"disabled\":[516],\"loaderPosition\":[1,\"loader-position\"],\"href\":[1],\"load\":[64],\"stop\":[64],\"setText\":[64],\"disable\":[64],\"enable\":[64]}],[0,\"salla-loading\",{\"size\":[8],\"width\":[8],\"color\":[1],\"bgColor\":[1,\"bg-color\"]}]]],[\"salla-add-product-button.cjs\",[[4,\"salla-add-product-button\",{\"channels\":[513],\"quantity\":[514],\"donatingAmount\":[514,\"donating-amount\"],\"productId\":[520,\"product-id\"],\"productStatus\":[513,\"product-status\"],\"productType\":[513,\"product-type\"]}]]],[\"salla-installment.cjs\",[[0,\"salla-installment\",{\"price\":[1],\"language\":[1],\"currency\":[1],\"tamaraIsActive\":[32],\"tabbyIsActive\":[32],\"spotiiIsActive\":[32]}]]],[\"salla-loyalty-prize-item.cjs\",[[0,\"salla-loyalty-prize-item\",{\"item\":[16]}]]],[\"salla-select.cjs\",[[0,\"salla-select\",{\"label\":[1],\"items\":[16],\"itemText\":[1,\"item-text\"],\"itemValue\":[1,\"item-value\"],\"itemDisabled\":[1,\"item-disabled\"],\"size\":[1],\"value\":[1032],\"autofocus\":[4],\"clearable\":[4],\"clearIcon\":[1,\"clear-icon\"],\"color\":[1],\"flat\":[4],\"disabled\":[4],\"loading\":[4],\"loadingColor\":[1,\"loading-color\"],\"hint\":[1],\"persistHint\":[4,\"persist-hint\"],\"placeholder\":[1],\"multiple\":[4],\"autocomplete\":[4],\"required\":[4],\"chips\":[4],\"shape\":[1],\"returnObject\":[4,\"return-object\"],\"hideDetail\":[4,\"hide-detail\"]}]]]]"), options);
81
+ return index.bootstrapLazy(JSON.parse("[[\"salla-button_36.cjs\",[[4,\"salla-gifting\",{\"productId\":[2,\"product-id\"],\"sectionTitle\":[32],\"sectionSubtitle\":[32],\"sectionBtnText\":[32],\"giftDetails\":[32],\"selectImageForYourGift\":[32],\"selectImageOrUpload\":[32],\"selectGiftMessage\":[32],\"giftCustomText\":[32],\"textId\":[32],\"incorrectGiftText\":[32],\"nextStep\":[32],\"senderNameLabel\":[32],\"receiverNameFieldLabel\":[32],\"receiverMobileFieldLabel\":[32],\"receiverEmailFieldLabel\":[32],\"emailPlaceholder\":[32],\"sendLater\":[32],\"selectSendDateAndTime\":[32],\"canNotEditOrderAfterSelectDate\":[32],\"sendGift\":[32],\"donationRequired\":[32],\"currentStep\":[32],\"showCalendar\":[32],\"showGiftText\":[32],\"currentLang\":[32],\"parentClass\":[32],\"errors\":[32],\"gift\":[32],\"selectedGiftTextOption\":[32],\"showTextArea\":[32],\"selectedImage\":[32],\"uploadedImage\":[32],\"selectedText\":[32],\"senderName\":[32],\"errorMessage\":[32],\"hasError\":[32],\"quantity\":[32],\"deliveryDate\":[32],\"timeZone\":[32],\"receiverName\":[32],\"receiverMobile\":[32],\"receiverCountryCode\":[32],\"receiverEmail\":[32],\"open\":[64],\"close\":[64],\"goToStep2\":[64]}],[4,\"salla-loyalty\",{\"prizePoints\":[8,\"prize-points\"],\"customerPoints\":[2,\"customer-points\"],\"prizeTitle\":[1,\"prize-title\"],\"allowEmail\":[4,\"allow-email\"],\"allowMobile\":[4,\"allow-mobile\"],\"requireEmail\":[4,\"require-email\"],\"guestMessage\":[1025,\"guest-message\"],\"loyaltyProgram\":[32],\"buttonLoading\":[32],\"selectedItem\":[32],\"askConfirmation\":[32],\"is_loggedin\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64],\"resetExchange\":[64],\"exchangeLoyaltyPoint\":[64]}],[4,\"salla-product-size-guide\",{\"guides\":[32],\"productId\":[32],\"placeholder_title\":[32],\"placeholder_description\":[32],\"modal_title\":[32],\"hasError\":[32],\"open\":[64],\"close\":[64]}],[4,\"salla-login-modal\",{\"isEmailAllowed\":[1028,\"is-email-allowed\"],\"isMobileAllowed\":[1028,\"is-mobile-allowed\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"supportWebAuth\":[516,\"support-web-auth\"],\"currentTabName\":[32],\"regType\":[32],\"translationLoaded\":[32],\"title\":[32],\"emailErrorMsg\":[32],\"firstNameErrorMsg\":[32],\"lastNameErrorMsg\":[32],\"dragAndDrop\":[32],\"browseFromFiles\":[32],\"customFields\":[32],\"uploadedImage\":[32],\"open\":[64]},[[8,\"verified\",\"onVerified\"]]],[0,\"salla-offer-modal\",{\"offer\":[32],\"offer_name\":[32],\"offer_message\":[32],\"hasError\":[32],\"errorMessage\":[32],\"productID\":[32],\"translationLoaded\":[32],\"addToCartLabel\":[32],\"open\":[64],\"showOffer\":[64]}],[0,\"salla-rating-modal\",{\"orderId\":[2,\"order-id\"],\"order\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64]}],[4,\"salla-scopes\",{\"selection\":[1],\"searchDisplayLimit\":[2,\"search-display-limit\"],\"translationLoaded\":[32],\"mode\":[32],\"current_scope\":[32],\"scopes\":[32],\"originalScopesList\":[32],\"selected_scope\":[32],\"isOpenedBefore\":[32],\"hasError\":[32],\"loading\":[32],\"close\":[64],\"open\":[64],\"handleSubmit\":[64]}],[0,\"salla-localization-modal\",{\"language\":[1537],\"currency\":[1537],\"translationLoaded\":[32],\"languages\":[32],\"currencies\":[32],\"hasError\":[32],\"errorMessage\":[32],\"open\":[64],\"close\":[64],\"submit\":[64]}],[0,\"salla-quick-order\",{\"quickOrderTitle\":[1025,\"quick-order-title\"],\"subTitle\":[1025,\"sub-title\"],\"payButtonTitle\":[1025,\"pay-button-title\"],\"confirmPayButtonTitle\":[1025,\"confirm-pay-button-title\"],\"agreementText\":[1025,\"agreement-text\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"productId\":[1025,\"product-id\"],\"thanksMessage\":[1025,\"thanks-message\"],\"quickOrderStyle\":[1025,\"quick-order-style\"],\"user\":[32],\"isAvailable\":[32],\"oneClick\":[32],\"expanded\":[32],\"isTermsRequired\":[32],\"countryCode\":[32],\"submitSucess\":[32],\"placeHolderEmail\":[32],\"emailOptional\":[32],\"agreementShowText\":[32],\"agreementModalHead\":[32],\"userNameLabel\":[32],\"termsChecked\":[32]}],[0,\"salla-user-settings\",{\"isNotifiable\":[516,\"is-notifiable\"],\"deactivateAccount\":[32],\"promotionalMsgs\":[32],\"deactivateDesc\":[32],\"promotionalMsgsDesc\":[32],\"sorryForLeavingText\":[32],\"warningText\":[32],\"keepAccount\":[32],\"buttonLoading\":[32]}],[0,\"salla-search\",{\"inline\":[4],\"oval\":[4],\"height\":[2],\"translationLoaded\":[32],\"results\":[32],\"loading\":[32],\"typing\":[32],\"debounce\":[32],\"search_term\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[0,\"salla-comment-form\",{\"type\":[1537],\"showAvatar\":[4,\"show-avatar\"],\"itemId\":[1544,\"item-id\"],\"placeholder\":[32],\"submitText\":[32],\"canComment\":[32]}],[4,\"salla-social-share\",{\"url\":[513],\"urlName\":[513,\"url-name\"],\"platforms\":[513],\"opened\":[32],\"allPlatforms\":[32],\"platformIcons\":[32],\"convertedPlatforms\":[32],\"open\":[64]}],[4,\"salla-cart-summary\",{\"cartSummaryCount\":[32],\"cartSummaryTotal\":[32],\"animateToCart\":[64]}],[4,\"salla-infinite-scroll\",{\"nextPage\":[1,\"next-page\"],\"autoload\":[1028],\"container\":[1],\"item\":[1],\"loadMore\":[32],\"noMore\":[32],\"failedToLoad\":[32]}],[4,\"salla-quantity-input\",{\"quantity\":[32],\"decrease\":[64],\"increase\":[64],\"setValue\":[64]}],[0,\"salla-user-menu\",{\"inline\":[516],\"avatarOnly\":[516,\"avatar-only\"],\"showHeader\":[516,\"show-header\"],\"relativeDropdown\":[516,\"relative-dropdown\"],\"accountLoading\":[32],\"opened\":[32],\"notifications\":[32],\"orders\":[32],\"pending_orders\":[32],\"wishlist\":[32],\"profile\":[32],\"rating\":[32],\"logout\":[32],\"hello\":[32],\"first_name\":[32],\"last_name\":[32],\"avatar\":[32],\"badges\":[32],\"hasBadges\":[32],\"OrderUpdate\":[32]}],[0,\"salla-product-availability\",{\"channels\":[1],\"productId\":[2,\"product-id\"],\"isSubscribed\":[1028,\"is-subscribed\"],\"translationLoaded\":[32],\"title_\":[32],\"isVisitorSubscribed\":[32]}],[4,\"salla-map\",{\"name\":[1],\"required\":[4],\"readonly\":[4],\"searchable\":[1028],\"lat\":[1026],\"lng\":[1026],\"apiKey\":[1025,\"api-key\"],\"modalTitle\":[1,\"modal-title\"],\"zoom\":[1026],\"theme\":[1025],\"modalActivityTitle\":[32],\"confirmButtonTitle\":[32],\"locateButtonTitle\":[32],\"locateButtonEdit\":[32],\"searchInputValue\":[32],\"geolocationError\":[32],\"searchInput\":[32],\"mapInput\":[32],\"mapElement\":[32],\"open\":[64]}],[4,\"salla-verify\",{\"display\":[1],\"type\":[1025],\"autoReload\":[4,\"auto-reload\"],\"supportWebAuth\":[4,\"support-web-auth\"],\"translationLoaded\":[32],\"title\":[32],\"resendAfter\":[32],\"isProfileVerify\":[32],\"getCode\":[64],\"open\":[64]}],[4,\"salla-color-picker\",{\"name\":[1],\"required\":[4],\"color\":[1],\"format\":[1],\"showCancelButton\":[4,\"show-cancel-button\"],\"showTextField\":[4,\"show-text-field\"],\"enableAlpha\":[4,\"enable-alpha\"],\"widgetColor\":[32],\"setPickerOption\":[64],\"movePopUp\":[64],\"setColorValue\":[64],\"openPicker\":[64],\"closePicker\":[64],\"destroyPicker\":[64]}],[0,\"salla-progress-bar\",{\"donation\":[1],\"target\":[1026],\"value\":[1026],\"header\":[1025],\"message\":[1025],\"unit\":[1025],\"color\":[1025]}],[0,\"salla-rating-stars\",{\"name\":[1],\"size\":[1],\"value\":[2]}],[0,\"salla-datetime-picker\",{\"value\":[1537],\"required\":[4],\"name\":[513],\"placeholder\":[1],\"allowInput\":[4,\"allow-input\"],\"allowInvalidPreload\":[4,\"allow-invalid-preload\"],\"altFormat\":[1,\"alt-format\"],\"altInput\":[4,\"alt-input\"],\"altInputClass\":[1,\"alt-input-class\"],\"appendTo\":[16],\"ariaDateFormat\":[1,\"aria-date-format\"],\"autoFillDefaultTime\":[4,\"auto-fill-default-time\"],\"clickOpens\":[4,\"click-opens\"],\"closeOnSelect\":[4,\"close-on-select\"],\"conjunction\":[1],\"dateFormat\":[1,\"date-format\"],\"defaultDate\":[8,\"default-date\"],\"defaultHour\":[2,\"default-hour\"],\"defaultMinute\":[2,\"default-minute\"],\"defaultSeconds\":[2,\"default-seconds\"],\"disable\":[16],\"disableMobile\":[4,\"disable-mobile\"],\"enable\":[16],\"enableSeconds\":[4,\"enable-seconds\"],\"enableTime\":[4,\"enable-time\"],\"formatDate\":[16],\"hourIncrement\":[2,\"hour-increment\"],\"inline\":[4],\"locale\":[1],\"maxDate\":[8,\"max-date\"],\"maxTime\":[8,\"max-time\"],\"minDate\":[8,\"min-date\"],\"minTime\":[8,\"min-time\"],\"minuteIncrement\":[2,\"minute-increment\"],\"mode\":[1],\"monthSelectorType\":[1,\"month-selector-type\"],\"nextArrow\":[1,\"next-arrow\"],\"noCalendar\":[4,\"no-calendar\"],\"dateParser\":[16],\"position\":[1],\"positionElement\":[16],\"prevArrow\":[1,\"prev-arrow\"],\"shorthandCurrentMonth\":[4,\"shorthand-current-month\"],\"static\":[4],\"showMonths\":[2,\"show-months\"],\"time_24hr\":[4,\"time_-2-4hr\"],\"weekNumbers\":[4,\"week-numbers\"],\"wrap\":[4]}],[4,\"salla-tab-content\",{\"name\":[1],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tab-header\",{\"name\":[1],\"activeClass\":[1,\"active-class\"],\"height\":[8],\"centered\":[4],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tabs\",{\"backgroundColor\":[1,\"background-color\"],\"vertical\":[4]},[[0,\"tabSelected\",\"onSelectedTab\"]]],[0,\"salla-file-upload\",{\"value\":[1537],\"files\":[513],\"height\":[513],\"cartItemId\":[1,\"cart-item-id\"],\"profileImage\":[516,\"profile-image\"],\"name\":[1537],\"payloadName\":[1,\"payload-name\"],\"accept\":[1537],\"fileId\":[2,\"file-id\"],\"url\":[1025],\"method\":[1],\"formData\":[1,\"form-data\"],\"required\":[4],\"maxFileSize\":[1,\"max-file-size\"],\"disabled\":[4],\"allowDrop\":[4,\"allow-drop\"],\"allowBrowse\":[4,\"allow-browse\"],\"allowPaste\":[4,\"allow-paste\"],\"allowMultiple\":[4,\"allow-multiple\"],\"allowReplace\":[4,\"allow-replace\"],\"allowRevert\":[4,\"allow-revert\"],\"allowRemove\":[4,\"allow-remove\"],\"allowProcess\":[4,\"allow-process\"],\"allowReorder\":[4,\"allow-reorder\"],\"storeAsFile\":[4,\"store-as-file\"],\"forceRevert\":[4,\"force-revert\"],\"maxFilesCount\":[2,\"max-files-count\"],\"maxParallelUploads\":[2,\"max-parallel-uploads\"],\"checkValidity\":[4,\"check-validity\"],\"itemInsertLocation\":[1,\"item-insert-location\"],\"itemInsertInterval\":[2,\"item-insert-interval\"],\"credits\":[4],\"dropOnPage\":[4,\"drop-on-page\"],\"dropOnElement\":[4,\"drop-on-element\"],\"dropValidation\":[4,\"drop-validation\"],\"ignoredFiles\":[16],\"instantUpload\":[1028,\"instant-upload\"],\"chunkUploads\":[4,\"chunk-uploads\"],\"chunkForce\":[4,\"chunk-force\"],\"chunkSize\":[2,\"chunk-size\"],\"chunkRetryDelays\":[16],\"labelDecimalSeparator\":[1,\"label-decimal-separator\"],\"labelThousandsSeparator\":[1,\"label-thousands-separator\"],\"labelIdle\":[1025,\"label-idle\"],\"iconRemove\":[1,\"icon-remove\"],\"iconProcess\":[1,\"icon-process\"],\"iconRetry\":[1,\"icon-retry\"],\"iconUndo\":[1,\"icon-undo\"],\"setOption\":[64]}],[4,\"salla-slider\",{\"blockTitle\":[513,\"block-title\"],\"blockSubtitle\":[513,\"block-subtitle\"],\"displayAllUrl\":[513,\"display-all-url\"],\"arrowsCentered\":[516,\"arrows-centered\"],\"verticalThumbs\":[516,\"vertical-thumbs\"],\"vertical\":[516],\"autoHeight\":[516,\"auto-height\"],\"showControls\":[516,\"show-controls\"],\"controlsOuter\":[516,\"controls-outer\"],\"showThumbsControls\":[4,\"show-thumbs-controls\"],\"autoPlay\":[4,\"auto-play\"],\"slidesPerView\":[1,\"slides-per-view\"],\"pagination\":[4],\"centered\":[4],\"loop\":[4],\"type\":[1],\"sliderConfig\":[520,\"slider-config\"],\"thumbsConfig\":[520,\"thumbs-config\"],\"currentIndex\":[32],\"isEnd\":[32],\"isBeginning\":[32],\"isRTL\":[32],\"swiperScript\":[32],\"displayAllTitle\":[32],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"slideToLoop\":[64],\"slideNextLoop\":[64],\"slidePrevLoop\":[64],\"slideReset\":[64],\"slideToClosest\":[64],\"update\":[64],\"updateAutoHeight\":[64],\"updateSlides\":[64],\"updateProgress\":[64],\"updateSlidesClasses\":[64],\"getSlides\":[64]}],[4,\"salla-list-tile\",{\"href\":[1],\"target\":[1]}],[0,\"salla-tel-input\",{\"phone\":[1025],\"name\":[1],\"countryCode\":[1025,\"country-code\"],\"mobileRequired\":[32],\"countryCodeLabel\":[32],\"mobileLabel\":[32],\"tooShort\":[32],\"tooLong\":[32],\"invalidCountryCode\":[32],\"invalidNumber\":[32],\"errorMap\":[32],\"getValues\":[64],\"isValid\":[64]}],[4,\"salla-placeholder\",{\"icon\":[1],\"alignment\":[1],\"iconSize\":[1,\"icon-size\"],\"translationLoaded\":[32]}],[0,\"salla-skeleton\",{\"type\":[1],\"width\":[1],\"height\":[1]}],[4,\"salla-modal\",{\"isClosable\":[1028,\"is-closable\"],\"width\":[513],\"position\":[513],\"visible\":[516],\"hasSkeleton\":[516,\"has-skeleton\"],\"isLoading\":[1540,\"is-loading\"],\"subTitleFirst\":[4,\"sub-title-first\"],\"noPadding\":[4,\"no-padding\"],\"subTitle\":[1,\"sub-title\"],\"centered\":[4],\"iconStyle\":[1,\"icon-style\"],\"modalTitle\":[32],\"open\":[64],\"close\":[64],\"setTitle\":[64],\"loading\":[64],\"stopLoading\":[64]},[[0,\"keyup\",\"handleKeyUp\"]]],[4,\"salla-button\",{\"shape\":[513],\"color\":[513],\"fill\":[513],\"size\":[513],\"width\":[513],\"loading\":[516],\"disabled\":[516],\"loaderPosition\":[1,\"loader-position\"],\"href\":[1],\"load\":[64],\"stop\":[64],\"setText\":[64],\"disable\":[64],\"enable\":[64]}],[0,\"salla-loading\",{\"size\":[8],\"width\":[8],\"color\":[1],\"bgColor\":[1,\"bg-color\"]}]]],[\"salla-product-options.cjs\",[[0,\"salla-product-options\",{\"productId\":[2,\"product-id\"],\"options\":[1],\"optionsData\":[32],\"outOfStockText\":[32],\"donationAmount\":[32]}]]],[\"salla-add-product-button.cjs\",[[4,\"salla-add-product-button\",{\"channels\":[513],\"quantity\":[514],\"donatingAmount\":[514,\"donating-amount\"],\"productId\":[520,\"product-id\"],\"productStatus\":[513,\"product-status\"],\"productType\":[513,\"product-type\"]}]]],[\"salla-installment.cjs\",[[0,\"salla-installment\",{\"price\":[1],\"language\":[1],\"currency\":[1],\"tamaraIsActive\":[32],\"tabbyIsActive\":[32],\"spotiiIsActive\":[32]}]]],[\"salla-loyalty-prize-item.cjs\",[[0,\"salla-loyalty-prize-item\",{\"item\":[16]}]]],[\"salla-select.cjs\",[[0,\"salla-select\",{\"label\":[1],\"items\":[16],\"itemText\":[1,\"item-text\"],\"itemValue\":[1,\"item-value\"],\"itemDisabled\":[1,\"item-disabled\"],\"size\":[1],\"value\":[1032],\"autofocus\":[4],\"clearable\":[4],\"clearIcon\":[1,\"clear-icon\"],\"color\":[1],\"flat\":[4],\"disabled\":[4],\"loading\":[4],\"loadingColor\":[1,\"loading-color\"],\"hint\":[1],\"persistHint\":[4,\"persist-hint\"],\"placeholder\":[1],\"multiple\":[4],\"autocomplete\":[4],\"required\":[4],\"chips\":[4],\"shape\":[1],\"returnObject\":[4,\"return-object\"],\"hideDetail\":[4,\"hide-detail\"]}]]],[\"salla-conditional-fields.cjs\",[[4,\"salla-conditional-fields\",null,[[0,\"change\",\"changeHandler\"]]]]]]"), options);
82
82
  });
@@ -24,6 +24,7 @@
24
24
  "./components/salla-product-availability/salla-product-availability.js",
25
25
  "./components/salla-product-options/salla-product-options.js",
26
26
  "./components/salla-product-size-guide/salla-product-size-guide.js",
27
+ "./components/salla-progress-bar/salla-progress-bar.js",
27
28
  "./components/salla-quantity-input/salla-quantity-input.js",
28
29
  "./components/salla-quick-order/salla-quick-order.js",
29
30
  "./components/salla-rating-modal/salla-rating-modal.js",
@@ -40,7 +40,9 @@ export class SallaProductOptions {
40
40
  this.optionsData = [];
41
41
  }
42
42
  if (this.productId && !salla.url.is_page('cart')) {
43
- salla.api.product.getDetails(this.productId, ['options']).then(resp => this.optionsData = resp.data.options);
43
+ salla.api.product.getDetails(this.productId, ['options']).then((resp) => {
44
+ this.optionsData = resp.data.options;
45
+ });
44
46
  }
45
47
  }
46
48
  //todo:: typo here, but I think we will drop it anyway😌
@@ -83,7 +85,8 @@ export class SallaProductOptions {
83
85
  return salla.api.cart.getCurrentCartId();
84
86
  }
85
87
  render() {
86
- if (this.optionsData.length == 0) {
88
+ var _a;
89
+ if (((_a = this.optionsData) === null || _a === void 0 ? void 0 : _a.length) == 0) {
87
90
  return;
88
91
  }
89
92
  return (h(Host, { class: "s-product-options-wrapper" },
@@ -99,8 +102,12 @@ export class SallaProductOptions {
99
102
  h("div", { class: "s-product-options-option-content" }, this.getDisplayForType(option))))))));
100
103
  }
101
104
  //@ts-ignore
102
- donationOption(option) {
105
+ donationOption(option, product) {
103
106
  return h("div", { class: "s-product-options-donation-wrapper" },
107
+ option.donation ?
108
+ h("div", { class: "s-product-options-donation-progress" },
109
+ h("salla-progress-bar", { donation: option.donation }))
110
+ : '',
104
111
  h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.donationMoneyEntered.emit(e) }),
105
112
  h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
106
113
  }
@@ -125,7 +132,7 @@ export class SallaProductOptions {
125
132
  //@ts-ignore
126
133
  fileOption(option) {
127
134
  let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
128
- return types.length
135
+ return (types === null || types === void 0 ? void 0 : types.length)
129
136
  ? this.fileUploader(option, { accept: types.join(',') })
130
137
  : 'File types not selected.';
131
138
  }
@@ -0,0 +1,18 @@
1
+ .s-progress-bar-wrapper {
2
+ background-color: #E5E7EB;
3
+ width: 100%;
4
+ height: 0.625rem;
5
+ border-radius: 9999px;
6
+ margin-bottom: 0.375rem;
7
+ }
8
+ .s-progress-bar-progress {
9
+ height: 0.625rem;
10
+ border-radius: 9999px;
11
+ }
12
+ .s-progress-bar-message {
13
+ color: #a2a8b4;
14
+ font-size: 0.75rem;
15
+ line-height: 1rem;
16
+ display: block;
17
+ margin-bottom: 0.625rem;
18
+ }