@salla.sa/twilight-components 1.0.74 → 1.0.75

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 (57) hide show
  1. package/dist/cjs/salla-add-product-button_6.cjs.entry.js +15 -18
  2. package/dist/cjs/salla-branches.cjs.entry.js +1 -1
  3. package/dist/cjs/salla-infinite-scroll.cjs.entry.js +1 -1
  4. package/dist/cjs/salla-localization-modal.cjs.entry.js +1 -1
  5. package/dist/cjs/salla-login-modal.cjs.entry.js +1 -1
  6. package/dist/cjs/salla-offer-modal.cjs.entry.js +1 -1
  7. package/dist/cjs/salla-rating-modal.cjs.entry.js +1 -1
  8. package/dist/cjs/salla-verify-modal.cjs.entry.js +1 -1
  9. package/dist/collection/components/salla-add-product-button/salla-add-product-button.js +13 -17
  10. package/dist/collection/components/salla-branches/salla-branches.js +1 -1
  11. package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.js +1 -1
  12. package/dist/collection/components/salla-localization-modal/salla-localization-modal.js +1 -1
  13. package/dist/collection/components/salla-login-modal/salla-login-modal.js +1 -1
  14. package/dist/collection/components/salla-offer-modal/salla-offer-modal.js +1 -1
  15. package/dist/collection/components/salla-product-availability/salla-product-availability.js +1 -1
  16. package/dist/collection/components/salla-rating-modal/salla-rating-modal.js +1 -1
  17. package/dist/collection/components/salla-search/salla-search.js +1 -1
  18. package/dist/collection/components/salla-tel-input/salla-tel-input.js +1 -1
  19. package/dist/collection/components/salla-verify-modal/salla-verify-modal.js +1 -1
  20. package/dist/components/salla-add-product-button.js +12 -15
  21. package/dist/components/salla-branches.js +1 -1
  22. package/dist/components/salla-infinite-scroll.js +1 -1
  23. package/dist/components/salla-localization-modal.js +1 -1
  24. package/dist/components/salla-login-modal.js +1 -1
  25. package/dist/components/salla-offer-modal.js +1 -1
  26. package/dist/components/salla-product-availability2.js +1 -1
  27. package/dist/components/salla-rating-modal.js +1 -1
  28. package/dist/components/salla-search.js +1 -1
  29. package/dist/components/salla-tel-input2.js +1 -1
  30. package/dist/components/salla-verify-modal2.js +1 -1
  31. package/dist/esm/salla-add-product-button_6.entry.js +15 -18
  32. package/dist/esm/salla-branches.entry.js +1 -1
  33. package/dist/esm/salla-infinite-scroll.entry.js +1 -1
  34. package/dist/esm/salla-localization-modal.entry.js +1 -1
  35. package/dist/esm/salla-login-modal.entry.js +1 -1
  36. package/dist/esm/salla-offer-modal.entry.js +1 -1
  37. package/dist/esm/salla-rating-modal.entry.js +1 -1
  38. package/dist/esm/salla-verify-modal.entry.js +1 -1
  39. package/dist/twilight-components/p-11826c77.entry.js +4 -0
  40. package/dist/twilight-components/p-6c9b9c33.entry.js +4 -0
  41. package/dist/twilight-components/p-6ded3b36.entry.js +4 -0
  42. package/dist/twilight-components/p-7112157c.entry.js +4 -0
  43. package/dist/twilight-components/p-82026b3c.entry.js +4 -0
  44. package/dist/twilight-components/p-95e868cb.entry.js +4 -0
  45. package/dist/twilight-components/p-f847ccb4.entry.js +4 -0
  46. package/dist/twilight-components/p-ff7e5709.entry.js +4 -0
  47. package/dist/twilight-components/twilight-components.esm.js +1 -1
  48. package/dist/types/components/salla-add-product-button/salla-add-product-button.d.ts +5 -5
  49. package/package.json +1 -1
  50. package/dist/twilight-components/p-0cd25a03.entry.js +0 -4
  51. package/dist/twilight-components/p-20a8492d.entry.js +0 -4
  52. package/dist/twilight-components/p-35b0d8f6.entry.js +0 -4
  53. package/dist/twilight-components/p-50502ca8.entry.js +0 -4
  54. package/dist/twilight-components/p-69b8ebc1.entry.js +0 -4
  55. package/dist/twilight-components/p-a6a4a2bd.entry.js +0 -4
  56. package/dist/twilight-components/p-f8e1ea72.entry.js +0 -4
  57. package/dist/twilight-components/p-fa55e3ea.entry.js +0 -4
@@ -16,7 +16,7 @@ const SallaAddProductButton = class {
16
16
  this.success = index.createEvent(this, "success", 7);
17
17
  this.failed = index.createEvent(this, "failed", 7);
18
18
  this.hostAttributes = {};
19
- this.hasNotText = false;
19
+ this.hasLabel = false;
20
20
  this.channels = null;
21
21
  this.quantity = 0;
22
22
  this.donatingAmount = 0;
@@ -31,22 +31,12 @@ const SallaAddProductButton = class {
31
31
  if (this.productStatus === 'sale') {
32
32
  return salla.lang.get('pages.cart.add_to_cart');
33
33
  }
34
- if (this.productType === 'product') {
34
+ if (this.productType !== 'donating') {
35
35
  return salla.lang.get('pages.products.out_of_stock');
36
36
  }
37
37
  // donating
38
38
  return salla.lang.get('pages.products.donation_exceed');
39
39
  }
40
- componentWillLoad() {
41
- this.hasNotText = !this.host.innerHTML || this.host.innerHTML === '' || this.host.innerHTML.trim().replace(/\s/g, '').localeCompare('<!---->') === 0;
42
- }
43
- componentDidRender() {
44
- if (this.buttonLabel && this.hasNotText) {
45
- salla.event.once('languages::translations.loaded', () => {
46
- this.buttonLabel.innerHTML = this.getLabel() || 'اضافة للسلة';
47
- });
48
- }
49
- }
50
40
  addProductToCart(event) {
51
41
  // we want to ignore the click action when the type of button is submit a form
52
42
  if (this.hostAttributes['type'] === 'submit') {
@@ -54,8 +44,8 @@ const SallaAddProductButton = class {
54
44
  }
55
45
  event.preventDefault();
56
46
  /**
57
- * by defailt the quick add is just an alias for add item function
58
- * but its work onlu when the id is the only value is passed via the object
47
+ * by default the quick add is just an alias for add item function
48
+ * but its work only when the id is the only value is passed via the object
59
49
  * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
60
50
  */
61
51
  return salla.cart.quickAdd(Object.entries({
@@ -74,10 +64,17 @@ const SallaAddProductButton = class {
74
64
  }
75
65
  return this.hostAttributes;
76
66
  }
67
+ componentWillLoad() {
68
+ this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
69
+ }
77
70
  render() {
78
71
  return (index.h(index.Host, null, this.productStatus === 'out-and-notify' && this.channels ?
79
72
  index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), index.h("slot", null)) :
80
- index.h("salla-button", Object.assign({ onClick: (event) => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), index.h("slot", null), index.h("span", { ref: (el) => this.buttonLabel = el }))));
73
+ index.h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), index.h("slot", null))));
74
+ }
75
+ componentDidRender() {
76
+ //if label not passed, get label
77
+ this.hasLabel || salla.lang.onLoaded(() => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
81
78
  }
82
79
  get host() { return index.getElement(this); }
83
80
  };
@@ -388,7 +385,7 @@ const SallaProductAvailability = class {
388
385
  (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
389
386
  e.key == 'Enter' && submitMethod();
390
387
  };
391
- salla.event.on('languages::translations.loaded', () => {
388
+ salla.lang.onLoaded(() => {
392
389
  var _a, _b, _c, _d;
393
390
  // console.log('translations:', salla.lang);
394
391
  this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
@@ -467,7 +464,7 @@ const SallaSearch = class {
467
464
  Helper.Helper.setHost(this.host);
468
465
  this.productSlot = ((_a = Helper.Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
469
466
  salla.event.on('search::show', () => this.modal.show());
470
- salla.event.on('languages::translations.loaded', () => {
467
+ salla.lang.onLoaded(() => {
471
468
  this.placeholder = salla.lang.get('blocks.header.search_placeholder');
472
469
  this.noResultsText = salla.lang.get('common.elements.no_options');
473
470
  });
@@ -1929,7 +1926,7 @@ const SallaTelInput = class {
1929
1926
  this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
1930
1927
  this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
1931
1928
  Helper.Helper.setHost(this.host);
1932
- salla.event.on('languages::translations.loaded', () => {
1929
+ salla.lang.onLoaded(() => {
1933
1930
  this.mobileLabel = salla.lang.get('common.elements.mobile');
1934
1931
  this.countryCodeLabel = salla.lang.get('common.country_code');
1935
1932
  this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
@@ -42,7 +42,7 @@ const SallaBranches = class {
42
42
  : 'التسوق من فرع آخر';
43
43
  };
44
44
  salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
45
- salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
45
+ salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
46
46
  }
47
47
  //todo:: add description for all @methods
48
48
  async show() {
@@ -41,7 +41,7 @@ const SallaInfiniteScroll = class {
41
41
  <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
42
42
  </a>`;
43
43
  this.btnLoader = this.status.querySelector('.s-button-loader');
44
- salla.event.on('languages::translations.loaded', () => {
44
+ salla.lang.onLoaded(() => {
45
45
  this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
46
46
  this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
47
47
  this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
@@ -21,7 +21,7 @@ const SallaLocalizationModal = class {
21
21
  this.currency = salla.config.get('user.currency_code');
22
22
  Helper.Helper.setHost(this.host);
23
23
  salla.event.on('localization::show', () => this.show());
24
- salla.event.on('languages::translations.loaded', () => {
24
+ salla.lang.onLoaded(() => {
25
25
  var _a;
26
26
  this.languagesTitle = salla.lang.get('common.titles.language');
27
27
  this.currenciesTitle = salla.lang.get('common.titles.currency');
@@ -81,7 +81,7 @@ const SallaLoginModal = class {
81
81
  };
82
82
  this.title = this.host.title || salla.lang.get('blocks.header.login');
83
83
  this.host.removeAttribute('title');
84
- salla.event.on('languages::translations.loaded', () => {
84
+ salla.lang.onLoaded(() => {
85
85
  var _a, _b, _c, _d;
86
86
  this.title = salla.lang.get('blocks.header.login');
87
87
  this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
@@ -20,7 +20,7 @@ const SallaOfferModal = class {
20
20
  this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
21
21
  this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
22
22
  Helper.Helper.setHost(this.host);
23
- salla.event.on('languages::translations.loaded', () => {
23
+ salla.lang.onLoaded(() => {
24
24
  this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
25
25
  this.remember_my_choice = salla.lang.get('common.remember_my_choice');
26
26
  this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
@@ -31,7 +31,7 @@ const SallaRatingModal = class {
31
31
  this.next = salla.lang.get('common.elements.next');
32
32
  Helper.Helper.setHost(this.host);
33
33
  salla.event.on('rating::show', () => this.show());
34
- salla.event.on('languages::translations.loaded', () => {
34
+ salla.lang.onLoaded(() => {
35
35
  this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
36
36
  this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
37
37
  this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');
@@ -33,7 +33,7 @@ const SallaVerifyModal = class {
33
33
  this.show(data);
34
34
  });
35
35
  }
36
- salla.event.on('languages::translations.loaded', () => {
36
+ salla.lang.onLoaded(() => {
37
37
  var _a;
38
38
  this.title = salla.lang.get('pages.profile.verify_title');
39
39
  (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));
@@ -5,7 +5,7 @@ import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
5
5
  export class SallaAddProductButton {
6
6
  constructor() {
7
7
  this.hostAttributes = {};
8
- this.hasNotText = false;
8
+ this.hasLabel = false;
9
9
  this.channels = null;
10
10
  this.quantity = 0;
11
11
  this.donatingAmount = 0;
@@ -20,22 +20,12 @@ export class SallaAddProductButton {
20
20
  if (this.productStatus === 'sale') {
21
21
  return salla.lang.get('pages.cart.add_to_cart');
22
22
  }
23
- if (this.productType === 'product') {
23
+ if (this.productType !== 'donating') {
24
24
  return salla.lang.get('pages.products.out_of_stock');
25
25
  }
26
26
  // donating
27
27
  return salla.lang.get('pages.products.donation_exceed');
28
28
  }
29
- componentWillLoad() {
30
- this.hasNotText = !this.host.innerHTML || this.host.innerHTML === '' || this.host.innerHTML.trim().replace(/\s/g, '').localeCompare('<!---->') === 0;
31
- }
32
- componentDidRender() {
33
- if (this.buttonLabel && this.hasNotText) {
34
- salla.event.once('languages::translations.loaded', () => {
35
- this.buttonLabel.innerHTML = this.getLabel() || 'اضافة للسلة';
36
- });
37
- }
38
- }
39
29
  addProductToCart(event) {
40
30
  // we want to ignore the click action when the type of button is submit a form
41
31
  if (this.hostAttributes['type'] === 'submit') {
@@ -43,8 +33,8 @@ export class SallaAddProductButton {
43
33
  }
44
34
  event.preventDefault();
45
35
  /**
46
- * by defailt the quick add is just an alias for add item function
47
- * but its work onlu when the id is the only value is passed via the object
36
+ * by default the quick add is just an alias for add item function
37
+ * but its work only when the id is the only value is passed via the object
48
38
  * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
49
39
  */
50
40
  return salla.cart.quickAdd(Object.entries({
@@ -63,13 +53,19 @@ export class SallaAddProductButton {
63
53
  }
64
54
  return this.hostAttributes;
65
55
  }
56
+ componentWillLoad() {
57
+ this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
58
+ }
66
59
  render() {
67
60
  return (h(Host, null, this.productStatus === 'out-and-notify' && this.channels ?
68
61
  h("salla-product-availability", Object.assign({}, this.getBtnAttributes()),
69
62
  h("slot", null)) :
70
- h("salla-button", Object.assign({ onClick: (event) => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }),
71
- h("slot", null),
72
- h("span", { ref: (el) => this.buttonLabel = el }))));
63
+ h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }),
64
+ h("slot", null))));
65
+ }
66
+ componentDidRender() {
67
+ //if label not passed, get label
68
+ this.hasLabel || salla.lang.onLoaded(() => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
73
69
  }
74
70
  static get is() { return "salla-add-product-button"; }
75
71
  static get originalStyleUrls() { return {
@@ -34,7 +34,7 @@ export class SallaBranches {
34
34
  : 'التسوق من فرع آخر';
35
35
  };
36
36
  salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
37
- salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
37
+ salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
38
38
  }
39
39
  //todo:: add description for all @methods
40
40
  async show() {
@@ -35,7 +35,7 @@ export class SallaInfiniteScroll {
35
35
  <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
36
36
  </a>`;
37
37
  this.btnLoader = this.status.querySelector('.s-button-loader');
38
- salla.event.on('languages::translations.loaded', () => {
38
+ salla.lang.onLoaded(() => {
39
39
  this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
40
40
  this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
41
41
  this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
@@ -19,7 +19,7 @@ export class SallaLocalizationModal {
19
19
  this.currency = salla.config.get('user.currency_code');
20
20
  Helper.setHost(this.host);
21
21
  salla.event.on('localization::show', () => this.show());
22
- salla.event.on('languages::translations.loaded', () => {
22
+ salla.lang.onLoaded(() => {
23
23
  var _a;
24
24
  this.languagesTitle = salla.lang.get('common.titles.language');
25
25
  this.currenciesTitle = salla.lang.get('common.titles.currency');
@@ -84,7 +84,7 @@ export class SallaLoginModal {
84
84
  };
85
85
  this.title = this.host.title || salla.lang.get('blocks.header.login');
86
86
  this.host.removeAttribute('title');
87
- salla.event.on('languages::translations.loaded', () => {
87
+ salla.lang.onLoaded(() => {
88
88
  var _a, _b, _c, _d;
89
89
  this.title = salla.lang.get('blocks.header.login');
90
90
  this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
@@ -17,7 +17,7 @@ export class SallaOfferModal {
17
17
  this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
18
18
  this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
19
19
  Helper.setHost(this.host);
20
- salla.event.on('languages::translations.loaded', () => {
20
+ salla.lang.onLoaded(() => {
21
21
  this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
22
22
  this.remember_my_choice = salla.lang.get('common.remember_my_choice');
23
23
  this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
@@ -50,7 +50,7 @@ export class SallaProductAvailability {
50
50
  (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
51
51
  e.key == 'Enter' && submitMethod();
52
52
  };
53
- salla.event.on('languages::translations.loaded', () => {
53
+ salla.lang.onLoaded(() => {
54
54
  var _a, _b, _c, _d;
55
55
  // console.log('translations:', salla.lang);
56
56
  this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
@@ -23,7 +23,7 @@ export class SallaRatingModal {
23
23
  this.next = salla.lang.get('common.elements.next');
24
24
  Helper.setHost(this.host);
25
25
  salla.event.on('rating::show', () => this.show());
26
- salla.event.on('languages::translations.loaded', () => {
26
+ salla.lang.onLoaded(() => {
27
27
  this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
28
28
  this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
29
29
  this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');
@@ -16,7 +16,7 @@ export class SallaSearch {
16
16
  Helper.setHost(this.host);
17
17
  this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
18
18
  salla.event.on('search::show', () => this.modal.show());
19
- salla.event.on('languages::translations.loaded', () => {
19
+ salla.lang.onLoaded(() => {
20
20
  this.placeholder = salla.lang.get('blocks.header.search_placeholder');
21
21
  this.noResultsText = salla.lang.get('common.elements.no_options');
22
22
  });
@@ -18,7 +18,7 @@ export class SallaTelInput {
18
18
  this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
19
19
  this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
20
20
  Helper.setHost(this.host);
21
- salla.event.on('languages::translations.loaded', () => {
21
+ salla.lang.onLoaded(() => {
22
22
  this.mobileLabel = salla.lang.get('common.elements.mobile');
23
23
  this.countryCodeLabel = salla.lang.get('common.country_code');
24
24
  this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
@@ -28,7 +28,7 @@ export class SallaVerifyModal {
28
28
  this.show(data);
29
29
  });
30
30
  }
31
- salla.event.on('languages::translations.loaded', () => {
31
+ salla.lang.onLoaded(() => {
32
32
  var _a;
33
33
  this.title = salla.lang.get('pages.profile.verify_title');
34
34
  (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));
@@ -16,7 +16,7 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
16
16
  this.success = createEvent(this, "success", 7);
17
17
  this.failed = createEvent(this, "failed", 7);
18
18
  this.hostAttributes = {};
19
- this.hasNotText = false;
19
+ this.hasLabel = false;
20
20
  this.channels = null;
21
21
  this.quantity = 0;
22
22
  this.donatingAmount = 0;
@@ -31,22 +31,12 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
31
31
  if (this.productStatus === 'sale') {
32
32
  return salla.lang.get('pages.cart.add_to_cart');
33
33
  }
34
- if (this.productType === 'product') {
34
+ if (this.productType !== 'donating') {
35
35
  return salla.lang.get('pages.products.out_of_stock');
36
36
  }
37
37
  // donating
38
38
  return salla.lang.get('pages.products.donation_exceed');
39
39
  }
40
- componentWillLoad() {
41
- this.hasNotText = !this.host.innerHTML || this.host.innerHTML === '' || this.host.innerHTML.trim().replace(/\s/g, '').localeCompare('<!---->') === 0;
42
- }
43
- componentDidRender() {
44
- if (this.buttonLabel && this.hasNotText) {
45
- salla.event.once('languages::translations.loaded', () => {
46
- this.buttonLabel.innerHTML = this.getLabel() || 'اضافة للسلة';
47
- });
48
- }
49
- }
50
40
  addProductToCart(event) {
51
41
  // we want to ignore the click action when the type of button is submit a form
52
42
  if (this.hostAttributes['type'] === 'submit') {
@@ -54,8 +44,8 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
54
44
  }
55
45
  event.preventDefault();
56
46
  /**
57
- * by defailt the quick add is just an alias for add item function
58
- * but its work onlu when the id is the only value is passed via the object
47
+ * by default the quick add is just an alias for add item function
48
+ * but its work only when the id is the only value is passed via the object
59
49
  * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
60
50
  */
61
51
  return salla.cart.quickAdd(Object.entries({
@@ -74,10 +64,17 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
74
64
  }
75
65
  return this.hostAttributes;
76
66
  }
67
+ componentWillLoad() {
68
+ this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
69
+ }
77
70
  render() {
78
71
  return (h(Host, null, this.productStatus === 'out-and-notify' && this.channels ?
79
72
  h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("slot", null)) :
80
- h("salla-button", Object.assign({ onClick: (event) => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), h("slot", null), h("span", { ref: (el) => this.buttonLabel = el }))));
73
+ h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), h("slot", null))));
74
+ }
75
+ componentDidRender() {
76
+ //if label not passed, get label
77
+ this.hasLabel || salla.lang.onLoaded(() => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
81
78
  }
82
79
  get host() { return this; }
83
80
  static get style() { return sallaAddProductButtonCss; }
@@ -41,7 +41,7 @@ const SallaBranches$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
41
41
  : 'التسوق من فرع آخر';
42
42
  };
43
43
  salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
44
- salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
44
+ salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
45
45
  }
46
46
  //todo:: add description for all @methods
47
47
  async show() {
@@ -38,7 +38,7 @@ const SallaInfiniteScroll$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
38
38
  <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
39
39
  </a>`;
40
40
  this.btnLoader = this.status.querySelector('.s-button-loader');
41
- salla.event.on('languages::translations.loaded', () => {
41
+ salla.lang.onLoaded(() => {
42
42
  this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
43
43
  this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
44
44
  this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
@@ -20,7 +20,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
20
20
  this.currency = salla.config.get('user.currency_code');
21
21
  Helper.setHost(this.host);
22
22
  salla.event.on('localization::show', () => this.show());
23
- salla.event.on('languages::translations.loaded', () => {
23
+ salla.lang.onLoaded(() => {
24
24
  var _a;
25
25
  this.languagesTitle = salla.lang.get('common.titles.language');
26
26
  this.currenciesTitle = salla.lang.get('common.titles.currency');
@@ -82,7 +82,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
82
82
  };
83
83
  this.title = this.host.title || salla.lang.get('blocks.header.login');
84
84
  this.host.removeAttribute('title');
85
- salla.event.on('languages::translations.loaded', () => {
85
+ salla.lang.onLoaded(() => {
86
86
  var _a, _b, _c, _d;
87
87
  this.title = salla.lang.get('blocks.header.login');
88
88
  this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
@@ -19,7 +19,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
19
19
  this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
20
20
  this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
21
21
  Helper.setHost(this.host);
22
- salla.event.on('languages::translations.loaded', () => {
22
+ salla.lang.onLoaded(() => {
23
23
  this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
24
24
  this.remember_my_choice = salla.lang.get('common.remember_my_choice');
25
25
  this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
@@ -58,7 +58,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
58
58
  (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
59
59
  e.key == 'Enter' && submitMethod();
60
60
  };
61
- salla.event.on('languages::translations.loaded', () => {
61
+ salla.lang.onLoaded(() => {
62
62
  var _a, _b, _c, _d;
63
63
  // console.log('translations:', salla.lang);
64
64
  this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
@@ -31,7 +31,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
31
31
  this.next = salla.lang.get('common.elements.next');
32
32
  Helper.setHost(this.host);
33
33
  salla.event.on('rating::show', () => this.show());
34
- salla.event.on('languages::translations.loaded', () => {
34
+ salla.lang.onLoaded(() => {
35
35
  this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
36
36
  this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
37
37
  this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');
@@ -19,7 +19,7 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
19
19
  Helper.setHost(this.host);
20
20
  this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
21
21
  salla.event.on('search::show', () => this.modal.show());
22
- salla.event.on('languages::translations.loaded', () => {
22
+ salla.lang.onLoaded(() => {
23
23
  this.placeholder = salla.lang.get('blocks.header.search_placeholder');
24
24
  this.noResultsText = salla.lang.get('common.elements.no_options');
25
25
  });
@@ -1396,7 +1396,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
1396
1396
  this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
1397
1397
  this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
1398
1398
  Helper.setHost(this.host);
1399
- salla.event.on('languages::translations.loaded', () => {
1399
+ salla.lang.onLoaded(() => {
1400
1400
  this.mobileLabel = salla.lang.get('common.elements.mobile');
1401
1401
  this.countryCodeLabel = salla.lang.get('common.country_code');
1402
1402
  this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
@@ -32,7 +32,7 @@ const SallaVerifyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
32
32
  this.show(data);
33
33
  });
34
34
  }
35
- salla.event.on('languages::translations.loaded', () => {
35
+ salla.lang.onLoaded(() => {
36
36
  var _a;
37
37
  this.title = salla.lang.get('pages.profile.verify_title');
38
38
  (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));
@@ -12,7 +12,7 @@ const SallaAddProductButton = class {
12
12
  this.success = createEvent(this, "success", 7);
13
13
  this.failed = createEvent(this, "failed", 7);
14
14
  this.hostAttributes = {};
15
- this.hasNotText = false;
15
+ this.hasLabel = false;
16
16
  this.channels = null;
17
17
  this.quantity = 0;
18
18
  this.donatingAmount = 0;
@@ -27,22 +27,12 @@ const SallaAddProductButton = class {
27
27
  if (this.productStatus === 'sale') {
28
28
  return salla.lang.get('pages.cart.add_to_cart');
29
29
  }
30
- if (this.productType === 'product') {
30
+ if (this.productType !== 'donating') {
31
31
  return salla.lang.get('pages.products.out_of_stock');
32
32
  }
33
33
  // donating
34
34
  return salla.lang.get('pages.products.donation_exceed');
35
35
  }
36
- componentWillLoad() {
37
- this.hasNotText = !this.host.innerHTML || this.host.innerHTML === '' || this.host.innerHTML.trim().replace(/\s/g, '').localeCompare('<!---->') === 0;
38
- }
39
- componentDidRender() {
40
- if (this.buttonLabel && this.hasNotText) {
41
- salla.event.once('languages::translations.loaded', () => {
42
- this.buttonLabel.innerHTML = this.getLabel() || 'اضافة للسلة';
43
- });
44
- }
45
- }
46
36
  addProductToCart(event) {
47
37
  // we want to ignore the click action when the type of button is submit a form
48
38
  if (this.hostAttributes['type'] === 'submit') {
@@ -50,8 +40,8 @@ const SallaAddProductButton = class {
50
40
  }
51
41
  event.preventDefault();
52
42
  /**
53
- * by defailt the quick add is just an alias for add item function
54
- * but its work onlu when the id is the only value is passed via the object
43
+ * by default the quick add is just an alias for add item function
44
+ * but its work only when the id is the only value is passed via the object
55
45
  * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
56
46
  */
57
47
  return salla.cart.quickAdd(Object.entries({
@@ -70,10 +60,17 @@ const SallaAddProductButton = class {
70
60
  }
71
61
  return this.hostAttributes;
72
62
  }
63
+ componentWillLoad() {
64
+ this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
65
+ }
73
66
  render() {
74
67
  return (h(Host, null, this.productStatus === 'out-and-notify' && this.channels ?
75
68
  h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("slot", null)) :
76
- h("salla-button", Object.assign({ onClick: (event) => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), h("slot", null), h("span", { ref: (el) => this.buttonLabel = el }))));
69
+ h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), h("slot", null))));
70
+ }
71
+ componentDidRender() {
72
+ //if label not passed, get label
73
+ this.hasLabel || salla.lang.onLoaded(() => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
77
74
  }
78
75
  get host() { return getElement(this); }
79
76
  };
@@ -384,7 +381,7 @@ const SallaProductAvailability = class {
384
381
  (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
385
382
  e.key == 'Enter' && submitMethod();
386
383
  };
387
- salla.event.on('languages::translations.loaded', () => {
384
+ salla.lang.onLoaded(() => {
388
385
  var _a, _b, _c, _d;
389
386
  // console.log('translations:', salla.lang);
390
387
  this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
@@ -463,7 +460,7 @@ const SallaSearch = class {
463
460
  Helper.setHost(this.host);
464
461
  this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
465
462
  salla.event.on('search::show', () => this.modal.show());
466
- salla.event.on('languages::translations.loaded', () => {
463
+ salla.lang.onLoaded(() => {
467
464
  this.placeholder = salla.lang.get('blocks.header.search_placeholder');
468
465
  this.noResultsText = salla.lang.get('common.elements.no_options');
469
466
  });
@@ -1925,7 +1922,7 @@ const SallaTelInput = class {
1925
1922
  this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
1926
1923
  this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
1927
1924
  Helper.setHost(this.host);
1928
- salla.event.on('languages::translations.loaded', () => {
1925
+ salla.lang.onLoaded(() => {
1929
1926
  this.mobileLabel = salla.lang.get('common.elements.mobile');
1930
1927
  this.countryCodeLabel = salla.lang.get('common.country_code');
1931
1928
  this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
@@ -38,7 +38,7 @@ const SallaBranches = class {
38
38
  : 'التسوق من فرع آخر';
39
39
  };
40
40
  salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
41
- salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
41
+ salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
42
42
  }
43
43
  //todo:: add description for all @methods
44
44
  async show() {
@@ -37,7 +37,7 @@ const SallaInfiniteScroll = class {
37
37
  <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
38
38
  </a>`;
39
39
  this.btnLoader = this.status.querySelector('.s-button-loader');
40
- salla.event.on('languages::translations.loaded', () => {
40
+ salla.lang.onLoaded(() => {
41
41
  this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
42
42
  this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
43
43
  this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
@@ -17,7 +17,7 @@ const SallaLocalizationModal = class {
17
17
  this.currency = salla.config.get('user.currency_code');
18
18
  Helper.setHost(this.host);
19
19
  salla.event.on('localization::show', () => this.show());
20
- salla.event.on('languages::translations.loaded', () => {
20
+ salla.lang.onLoaded(() => {
21
21
  var _a;
22
22
  this.languagesTitle = salla.lang.get('common.titles.language');
23
23
  this.currenciesTitle = salla.lang.get('common.titles.currency');