@salla.sa/twilight-components 1.6.1 → 1.6.3

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 (62) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/salla-add-product-button.cjs.entry.js +104 -0
  3. package/dist/cjs/salla-button_24.cjs.entry.js +10087 -0
  4. package/dist/cjs/twilight-components.cjs.js +1 -1
  5. package/dist/collection/components/salla-login-modal/salla-login-modal.js +3 -4
  6. package/dist/components/salla-login-modal.js +3 -4
  7. package/dist/esm/loader.js +1 -1
  8. package/dist/esm/salla-add-product-button.entry.js +100 -0
  9. package/dist/esm/salla-button_24.entry.js +10060 -0
  10. package/dist/esm/twilight-components.js +1 -1
  11. package/dist/twilight-components/p-30b2c5b0.entry.js +4 -0
  12. package/dist/twilight-components/p-76cb2574.entry.js +4 -0
  13. package/dist/twilight-components/twilight-components.esm.js +1 -1
  14. package/package.json +9 -3
  15. package/dist/cjs/Helper-8ae6a805.js +0 -28
  16. package/dist/cjs/arrow-right-3d137e4c.js +0 -13
  17. package/dist/cjs/cancel-ae668d91.js +0 -13
  18. package/dist/cjs/check-circle2-1aac98d1.js +0 -13
  19. package/dist/cjs/mail-2db058ee.js +0 -13
  20. package/dist/cjs/salla-add-product-button_13.cjs.entry.js +0 -2870
  21. package/dist/cjs/salla-infinite-scroll.cjs.entry.js +0 -93
  22. package/dist/cjs/salla-list-tile_2.cjs.entry.js +0 -80
  23. package/dist/cjs/salla-loyalty.cjs.entry.js +0 -229
  24. package/dist/cjs/salla-product-size-guide.cjs.entry.js +0 -52
  25. package/dist/cjs/salla-quantity-input.cjs.entry.js +0 -101
  26. package/dist/cjs/salla-rating-modal.cjs.entry.js +0 -169
  27. package/dist/cjs/salla-social-share.cjs.entry.js +0 -1447
  28. package/dist/cjs/salla-swiper.cjs.entry.js +0 -5023
  29. package/dist/cjs/salla-tab-content_3.cjs.entry.js +0 -159
  30. package/dist/cjs/star2-8288e6e1.js +0 -13
  31. package/dist/esm/Helper-e1d414a5.js +0 -26
  32. package/dist/esm/arrow-right-1c3e04f2.js +0 -11
  33. package/dist/esm/cancel-41a92070.js +0 -11
  34. package/dist/esm/check-circle2-f6e5f685.js +0 -11
  35. package/dist/esm/mail-9d5204c6.js +0 -11
  36. package/dist/esm/salla-add-product-button_13.entry.js +0 -2854
  37. package/dist/esm/salla-infinite-scroll.entry.js +0 -89
  38. package/dist/esm/salla-list-tile_2.entry.js +0 -75
  39. package/dist/esm/salla-loyalty.entry.js +0 -225
  40. package/dist/esm/salla-product-size-guide.entry.js +0 -48
  41. package/dist/esm/salla-quantity-input.entry.js +0 -97
  42. package/dist/esm/salla-rating-modal.entry.js +0 -165
  43. package/dist/esm/salla-social-share.entry.js +0 -1443
  44. package/dist/esm/salla-swiper.entry.js +0 -5019
  45. package/dist/esm/salla-tab-content_3.entry.js +0 -153
  46. package/dist/esm/star2-b134fc74.js +0 -11
  47. package/dist/twilight-components/p-14f0ff17.entry.js +0 -4
  48. package/dist/twilight-components/p-2749c9d3.entry.js +0 -4
  49. package/dist/twilight-components/p-335abbbb.entry.js +0 -4
  50. package/dist/twilight-components/p-4cafb11b.entry.js +0 -4
  51. package/dist/twilight-components/p-5e63e308.entry.js +0 -4
  52. package/dist/twilight-components/p-648e74e5.entry.js +0 -4
  53. package/dist/twilight-components/p-897b2018.js +0 -4
  54. package/dist/twilight-components/p-93708e1e.js +0 -4
  55. package/dist/twilight-components/p-9d236cf4.entry.js +0 -4
  56. package/dist/twilight-components/p-9d2ca9c8.js +0 -4
  57. package/dist/twilight-components/p-af7d5660.js +0 -4
  58. package/dist/twilight-components/p-bdbd2386.entry.js +0 -4
  59. package/dist/twilight-components/p-cac3db69.entry.js +0 -4
  60. package/dist/twilight-components/p-d914a212.js +0 -4
  61. package/dist/twilight-components/p-dace8e6d.js +0 -4
  62. package/dist/twilight-components/p-f9253fda.entry.js +0 -4
@@ -1,89 +0,0 @@
1
- /*!
2
- * Crafted with ❤ by Salla
3
- */
4
- import { r as registerInstance, h, H as Host, g as getElement } from './index-4e30ffd0.js';
5
- import { H as Helper } from './Helper-e1d414a5.js';
6
-
7
- const sallaInfiniteScrollCss = "";
8
-
9
- const SallaInfiniteScroll = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- /**
13
- * Next Page element
14
- */
15
- this.nextPage = '';
16
- /**
17
- * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
18
- */
19
- this.autoload = false;
20
- /**
21
- * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
22
- */
23
- this.container = 'salla-infinite-scroll';
24
- /**
25
- * Class selector to know list items
26
- */
27
- this.item = 'salla-infinite-scroll > *';
28
- Helper.setHost(this.host);
29
- this.status = document.createElement('div');
30
- this.status.className = 's-infinite-scroll-wrapper';
31
- this.status.innerHTML = `<div class="s-infinite-scroll-status" style="display:none">
32
- <p class="s-infinite-scroll-last infinite-scroll-last"></p>
33
- <p class="s-infinite-scroll-error infinite-scroll-error"></p>
34
- </div>
35
- <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn s-button-primary">
36
- <span class="s-button-text s-infinite-scroll-btn-text">${salla.lang.get('common.elements.load_more')}</span>
37
- <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
38
- </a>`;
39
- this.btnLoader = this.status.querySelector('.s-button-loader');
40
- salla.lang.onLoaded(() => {
41
- this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
42
- this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
43
- this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
44
- });
45
- }
46
- loading(isLoading = true) {
47
- let btnText = this.status.querySelector('.s-button-text');
48
- Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
49
- this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
50
- }
51
- render() {
52
- return this.nextPage.length > 1 ?
53
- h(Host, { class: "s-infinite-scroll-container" }, h("slot", null)) : '';
54
- }
55
- componentDidLoad() {
56
- if (this.nextPage.length === 0) {
57
- return;
58
- }
59
- this.host.insertAdjacentElement('afterend', this.status);
60
- let that = this;
61
- let infScroll = salla.infiniteScroll.initiate(this.container, {
62
- history: this.autoload ? 'push' : false,
63
- scrollThreshold: this.autoload ? 400 : false,
64
- nextPage: this.nextPage,
65
- checkLastPage: 'salla-infinite-scroll[next-page*=":"],salla-infinite-scroll[next-page*="."]',
66
- status: '.s-infinite-scroll-status',
67
- button: this.status.querySelector('.s-button-btn'),
68
- append: this.item,
69
- path: function () {
70
- return that.nextPage.replace(/page\=(\d)/g, 'page=' + (this.loadCount + 2));
71
- },
72
- })
73
- .on('request', () => this.loading())
74
- .on('load', () => {
75
- this.loading(false);
76
- if (infScroll.pageIndex == 2) {
77
- infScroll.option({ loadOnScroll: false });
78
- }
79
- if (infScroll.pageIndex == 3) {
80
- infScroll.option({ loadOnScroll: true });
81
- }
82
- })
83
- .on('error', () => this.loading(false));
84
- }
85
- get host() { return getElement(this); }
86
- };
87
- SallaInfiniteScroll.style = sallaInfiniteScrollCss;
88
-
89
- export { SallaInfiniteScroll as salla_infinite_scroll };
@@ -1,75 +0,0 @@
1
- /*!
2
- * Crafted with ❤ by Salla
3
- */
4
- import { r as registerInstance, h, H as Host } from './index-4e30ffd0.js';
5
-
6
- const sallaListTileCss = "";
7
-
8
- const SallaListTile = class {
9
- constructor(hostRef) {
10
- registerInstance(this, hostRef);
11
- /**
12
- * Designates the component as anchor and applies the `href` attribute.
13
- */
14
- this.href = undefined;
15
- /**
16
- * Designates the target attribute. This should only be applied when using the `href` prop.
17
- */
18
- this.target = "_self";
19
- }
20
- generateClass() {
21
- return {
22
- "s-list-tile-item": true,
23
- "s-list-tile-item-href": !!this.href
24
- };
25
- }
26
- render() {
27
- return (h(Host, null, h("a", { class: this.generateClass(), href: this.href, target: this.target }, h("div", { class: "s-list-tile-item-icon" }, h("slot", { name: 'icon' })), h("div", { class: "s-list-tile-item-content" }, h("div", { class: "s-list-tile-item-title" }, h("slot", { name: 'title' })), h("div", { class: "s-list-tile-item-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "s-list-tile-item-action" }, h("slot", { name: 'action' })))));
28
- }
29
- };
30
- SallaListTile.style = sallaListTileCss;
31
-
32
- const Inbox = `<!-- Generated by IcoMoon.io -->
33
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
34
- <title>inbox</title>
35
- <path d="M31.984 19.797l-2.667-17.333c-0.1-0.651-0.659-1.131-1.317-1.131h-24c-0.659 0-1.217 0.48-1.317 1.131l-2.667 17.333c-0.011 0.067-0.016 0.135-0.016 0.203v6.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-6.667c0-0.068-0.005-0.136-0.016-0.203zM5.144 4h21.712l2.256 14.667h-9.112c-0.736 0-1.333 0.596-1.333 1.333 0 1.471-1.196 2.667-2.667 2.667s-2.667-1.196-2.667-2.667c0-0.737-0.597-1.333-1.333-1.333h-9.112zM29.333 26.667c0 0.736-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.597-1.333-1.333v-5.333h8.168c0.593 2.299 2.684 4 5.165 4s4.571-1.701 5.165-4h8.168z"></path>
36
- </svg>
37
- `;
38
-
39
- const sallaPlaceholderCss = "";
40
-
41
- const SallaPlaceholder = class {
42
- constructor(hostRef) {
43
- registerInstance(this, hostRef);
44
- this.translationLoaded = false;
45
- /**
46
- * Custom icon to display, defaults to [`sicon-inbox`]
47
- */
48
- this.icon = Inbox;
49
- /**
50
- * Defines the alignment of contents. Defaults to [`left`]
51
- */
52
- this.alignment = 'left';
53
- /**
54
- * The size of the icon. Defaults to [`md`]
55
- */
56
- this.iconSize = 'md';
57
- salla.lang.onLoaded(() => {
58
- this.translationLoaded = true;
59
- });
60
- }
61
- alignmentClass() {
62
- return {
63
- 's-placeholder-wrapper': true,
64
- 's-placeholder-align-left': this.alignment == 'left',
65
- 's-placeholder-align-center': this.alignment == 'center',
66
- 's-placeholder-align-right': this.alignment == 'right',
67
- };
68
- }
69
- render() {
70
- return (h(Host, { class: this.alignmentClass() }, h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { class: "s-placeholder-title" }, h("slot", { name: 'title' }, h("span", null, salla.lang.get('common.elements.no_options')))), h("div", { class: "s-placeholder-description" }, h("slot", { name: 'description' }, h("span", null, salla.lang.get('common.errors.empty_results'))))));
71
- }
72
- };
73
- SallaPlaceholder.style = sallaPlaceholderCss;
74
-
75
- export { SallaListTile as salla_list_tile, SallaPlaceholder as salla_placeholder };
@@ -1,225 +0,0 @@
1
- /*!
2
- * Crafted with ❤ by Salla
3
- */
4
- import { r as registerInstance, h } from './index-4e30ffd0.js';
5
- import { S as Star2 } from './star2-b134fc74.js';
6
- import { C as Cancel } from './cancel-41a92070.js';
7
-
8
- const Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
9
- <title>star3</title>
10
- <defs>
11
- <style>
12
- .a {
13
- fill: none !important;
14
- }
15
-
16
- .b {
17
- fill: #ff9e01;
18
- }
19
-
20
- .c {
21
- fill: #fff;
22
- opacity: 0.1;
23
- }
24
-
25
- </style>
26
- </defs>
27
- <g transform="translate(-683 -269)">
28
- <rect class="a" width="80" height="80" transform="translate(683 269)" />
29
- <g transform="translate(684.539 261.216)">
30
- <path class="b"
31
- d="M110.117,37.062,90.024,35.2,82.043,16.665a1.61,1.61,0,0,0-2.958,0L71.1,35.2,51.011,37.062a1.61,1.61,0,0,0-.914,2.813l15.16,13.318L60.821,72.878a1.61,1.61,0,0,0,2.393,1.739l17.351-10.3,17.351,10.3a1.61,1.61,0,0,0,2.393-1.739L95.871,53.192l15.16-13.318A1.61,1.61,0,0,0,110.117,37.062Z"
32
- transform="translate(-42.104 -4.011)" />
33
- <g transform="translate(0 10.971)">
34
- <path class="b"
35
- d="M93.54,12.016c1.024,1.423,3.915,7.533,5.568,11.094a.559.559,0,0,1-.891.641c-2.853-2.7-7.73-7.377-8.754-8.8a2.512,2.512,0,0,1,4.077-2.935Z"
36
- transform="translate(-75.621 -10.971)" />
37
- <path class="b"
38
- d="M360.909,12.016c-1.024,1.423-3.915,7.533-5.568,11.094a.559.559,0,0,0,.891.641c2.853-2.7,7.73-7.377,8.754-8.8a2.512,2.512,0,0,0-4.077-2.935Z"
39
- transform="translate(-301.908 -10.971)" />
40
- <path class="b"
41
- d="M427.538,284.659c-1.667-.543-8.366-1.441-12.261-1.934a.559.559,0,0,0-.34,1.044c3.436,1.9,9.377,5.123,11.044,5.666a2.512,2.512,0,0,0,1.558-4.776Z"
42
- transform="translate(-352.351 -241.894)" />
43
- <path class="b"
44
- d="M1.734,284.659c1.667-.543,8.366-1.441,12.261-1.934a.559.559,0,0,1,.34,1.044c-3.436,1.9-9.377,5.123-11.044,5.666a2.512,2.512,0,0,1-1.558-4.776Z"
45
- transform="translate(0 -241.894)" />
46
- <path class="b"
47
- d="M239.794,412.414c0-1.753,1.224-8.4,1.963-12.257a.559.559,0,0,1,1.1,0c.739,3.855,1.963,10.5,1.963,12.257a2.512,2.512,0,0,1-5.023,0Z"
48
- transform="translate(-203.768 -341.301)" />
49
- </g>
50
- <path class="c"
51
- d="M84.945,23.4l-2.9-6.74a1.61,1.61,0,0,0-2.958,0L71.1,35.2,51.011,37.062a1.61,1.61,0,0,0-.914,2.813l15.16,13.318L60.821,72.878a1.61,1.61,0,0,0,2.393,1.739l2.309-1.371A125,125,0,0,1,84.945,23.4Z"
52
- transform="translate(-42.104 -4.011)" />
53
- </g>
54
- </g>
55
- </svg>
56
- `;
57
-
58
- const GiftImg = `<svg xmlns="http://www.w3.org/2000/svg" width="54.079" height="53.191" viewBox="0 0 54.079 53.191"><defs><style>.a{fill:#ee9d0d;}.b{fill:#c7830b;}.c{fill:#ea2b2d;}.d{fill:#cb2527;}.e{fill:#6699ce;}.f{fill:#faa6b2;}.g{fill:#a6deff;}.h{fill:#eeb436;}.i{fill:#f72d2f;}</style></defs><path class="a" d="M40,248H77.3v25.88a2.1,2.1,0,0,1-2.1,2.1H42.1a2.1,2.1,0,0,1-2.1-2.1Z" transform="translate(-38.135 -222.787)"/><path class="b" d="M250.632,248.711v12.755L236.2,248h13.67Z" transform="translate(-211.463 -222.787)"/><path class="b" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="c" d="M226.194,32.048l-.5.185a5.035,5.035,0,0,0-3.072,3.292l-.468,1.585-.759.414a5.035,5.035,0,0,0-2.422,3l8.865,8.271,5.09-5.456.262-6.205a5.191,5.191,0,0,0-7-5.083Z" transform="translate(-196.246 -31.722)"/><path class="c" d="M358.628,175.48l-.15.509a5.034,5.034,0,0,1-3.072,3.292l-1.55.577-.359.785a5.034,5.034,0,0,1-2.822,2.624L341.81,175l5.09-5.455,6.172-.69a5.191,5.191,0,0,1,5.555,6.629Z" transform="translate(-304.761 -152.837)"/><path class="d" d="M168,248h7.461v27.978H168Z" transform="translate(-151.213 -222.787)"/><path class="c" d="M40,336H77.3v7.461H40Z" transform="translate(-38.135 -300.528)"/><path class="d" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="a" d="M2.1,0H40.8a2.1,2.1,0,0,1,2.1,2.1V9.326H0V2.1A2.1,2.1,0,0,1,2.1,0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 18.641, 4.976)"/><path class="d" d="M0,0H9.326V9.326H0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 30.912, 16.424)"/><path class="d" d="M286.857,79.389a.931.931,0,0,1-.74-.365l-.615-.8a12.516,12.516,0,0,1-2.528-9,.933.933,0,0,1,1.855.2,10.66,10.66,0,0,0,2.153,7.667l.615.8a.933.933,0,0,1-.739,1.5Z" transform="translate(-252.718 -64.113)"/><path class="c" d="M185.485,178.151l-.039.014a30.78,30.78,0,0,1-12.034,1.906l-2.381-.1,4.092,3.817-1.181,4,3.728-1.206a30.775,30.775,0,0,0,9.833-5.315l.71-.572Z" transform="translate(-153.891 -161.081)"/><path class="d" d="M363.834,194.779a12.51,12.51,0,0,1-6.93-2.1l-.843-.559a.933.933,0,1,1,1.031-1.554l.842.558a10.659,10.659,0,0,0,7.8,1.618.933.933,0,1,1,.328,1.836A12.663,12.663,0,0,1,363.834,194.779Z" transform="translate(-316.982 -171.914)"/><path class="c" d="M275,202.524l-.012.04a30.776,30.776,0,0,0-1.069,12.137l.265,2.369-4.092-3.817-3.909,1.455.945-3.8a30.776,30.776,0,0,1,4.622-10.177l.521-.748Z" transform="translate(-237.949 -180.364)"/><circle class="e" cx="1.865" cy="1.865" r="1.865" transform="translate(10.259 0.032)"/><circle class="f" cx="1.865" cy="1.865" r="1.865" transform="translate(0 21.482)"/><path class="g" d="M36.663,36.663a.933.933,0,0,1-.885-.638l-.048-.143a2.946,2.946,0,0,0-2.8-2.017.933.933,0,1,1,0-1.865A4.808,4.808,0,0,1,37.5,35.292l.048.143a.933.933,0,0,1-.885,1.228Z" transform="translate(-31.067 -31.968)"/><path class="g" d="M79.493,194.438a.929.929,0,0,1-.506-.15l-.185-.12a2.074,2.074,0,0,0-2.192-.047.933.933,0,0,1-.947-1.607,3.929,3.929,0,0,1,4.153.088l.185.12a.933.933,0,0,1-.508,1.716Z" transform="translate(-69.235 -173.283)"/><path class="h" d="M27.751,85.141l2.88,2.644,3.811-.874-1.624,3.556,2.008,3.354-3.884-.446-2.569,2.946L27.6,92.49,24,90.957l3.4-1.922Z" transform="translate(-24 -78.914)"/><path class="h" d="M82.174,227.375l-.959,3.772,2.564,2.928-3.884.254L77.9,237.673l-1.442-3.615-3.8-.862,2.993-2.488-.353-3.876,3.291,2.078Z" transform="translate(-66.992 -204.086)"/><path class="i" d="M300.471,141.9l-5.455-5.09,5.09-5.456a8.342,8.342,0,0,1,5.455,5.09Z" transform="translate(-263.422 -119.737)"/></svg>`;
59
-
60
- const sallaLoyaltyCss = "#salla-loyalty-modal .s-swiper-button-prev button,#salla-loyalty-modal .s-swiper-button-next button{box-shadow:#32325d40 0px 6px 12px -2px, #0000004d 0px 3px 7px -3px}";
61
-
62
- const SallaLoyalty = class {
63
- constructor(hostRef) {
64
- registerInstance(this, hostRef);
65
- this.loyaltyProgram = undefined;
66
- this.buttonLoading = false;
67
- this.selectedItem = undefined;
68
- this.askConfirmation = false;
69
- this.is_loggedin = false;
70
- /**
71
- * The exchanged prize point
72
- */
73
- this.prizePoints = undefined;
74
- /**
75
- * Available customer points with which they can exchange.
76
- */
77
- this.customerPoints = undefined;
78
- /**
79
- * The exchangable prize title
80
- */
81
- this.prizeTitle = undefined;
82
- /**
83
- * Does the merchant allow to login using email
84
- */
85
- this.allowEmail = true;
86
- /**
87
- * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
88
- */
89
- this.allowMobile = true;
90
- /**
91
- * Does the merchant require registration with email & mobile
92
- */
93
- this.requireEmail = false;
94
- salla.event.on('loyalty::open', () => this.open());
95
- salla.auth.event.onLoggedIn(() => {
96
- this.is_loggedin = true;
97
- });
98
- salla.lang.onLoaded(() => {
99
- this.translationLoaded = true;
100
- });
101
- }
102
- setSelectedPrizeItem(item) {
103
- if (!this.selectedItem || this.selectedItem.id != item.id) {
104
- this.selectedItem = item;
105
- }
106
- else {
107
- this.selectedItem = undefined;
108
- }
109
- }
110
- handleLongText(text) {
111
- if (text.length > 150) {
112
- return text.substring(0, 150) + '...';
113
- }
114
- return text;
115
- }
116
- prizeItem(item) {
117
- let klass = {
118
- 's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem.id == item.id,
119
- "s-loyalty-prize-item": true
120
- };
121
- return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass }, h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }), h("div", { class: "s-loyalty-prize-item-title" }, item.name), h("div", { class: "s-loyalty-prize-item-subtitle" }, this.handleLongText(item.description)), h("div", { class: "s-loyalty-prize-item-points" }, item.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), h("div", { class: "s-loyalty-prize-item-check" }, h("div", null))));
122
- }
123
- getConfirmationModal() {
124
- var _a, _b;
125
- return [
126
- h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, salla.lang.get('pages.loyalty_program.exchange_points')), h("div", { slot: "description" }, salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange'), " ( ", h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points), " ) ", salla.lang.get('pages.loyalty_program.for'), " ( ", h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name), " )")),
127
- h("div", { class: "s-loyalty-confirmation-actions" }, h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, salla.lang.get('pages.loyalty_program.cancellation')), h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, salla.lang.get('pages.loyalty_program.confirm')))
128
- ];
129
- }
130
- getAfterExchangeUI() {
131
- return h("slot", { name: 'points-applied-widget' }, h("salla-list-tile", { class: "s-loyalty-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints), h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, h("span", { innerHTML: Cancel })))));
132
- }
133
- /**
134
- * Show loyalty modal
135
- */
136
- async open() {
137
- if (!this.is_loggedin)
138
- return salla.event.dispatch('login::open');
139
- this.modal.open();
140
- return await salla.loyalty.getProgram()
141
- .then((response) => {
142
- this.loyaltyProgram = response.data;
143
- })
144
- .catch(e => console.log(e))
145
- .finally(() => {
146
- this.modal.stopLoading();
147
- });
148
- }
149
- /**
150
- *
151
- * Hide loyalty modal
152
- */
153
- async close() {
154
- return this.modal.close();
155
- }
156
- /**
157
- *
158
- * Cancel Exchanged prizes
159
- */
160
- async resetExchange() {
161
- return await salla.loyalty.reset()
162
- .then(() => {
163
- this.prizePoints = undefined;
164
- this.prizeTitle = undefined;
165
- }).catch(e => console.log(e));
166
- }
167
- /**
168
- * Open Confirmation modal
169
- */
170
- async openConfirmation() {
171
- return await this.modal.close()
172
- .then(() => this.confirmationModal.open())
173
- .catch(e => console.log(e));
174
- }
175
- /**
176
- * Cancel process
177
- */
178
- async cancelProcess() {
179
- return await this.confirmationModal.close()
180
- .then(() => this.selectedItem = null)
181
- .catch(e => console.log(e));
182
- }
183
- /**
184
- * Exchange loyalty points with the selected prize item
185
- * @param {number} loyalty_prize_id
186
- *
187
- */
188
- async exchangeLoyaltyPoint() {
189
- this.buttonLoading = true;
190
- return await salla.loyalty.exchange(this.selectedItem.id)
191
- .then((response) => {
192
- this.loyaltyProgram = response.data;
193
- })
194
- .catch(e => console.log(e))
195
- .finally(() => {
196
- this.buttonLoading = false;
197
- this.cancelProcess();
198
- });
199
- }
200
- render() {
201
- // A. when the exchange is done, and we have the final prize points to show it in cart page
202
- if (this.prizePoints) {
203
- return this.getAfterExchangeUI();
204
- }
205
- return [
206
- h("slot", { name: 'widget' }, this.customerPoints ?
207
- h("salla-list-tile", { class: 's-loyalty-widget' }, h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Star2 }), h("div", { slot: "subtitle" }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints }) : (this.guestMessage || salla.lang.get('pages.loyalty_program.guest_message')), h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')))) :
208
- ''),
209
- h("salla-modal", { noPadding: true, width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
210
- h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-loyalty-skeleton" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !!this.loyaltyProgram ?
211
- [
212
- h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
213
- h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
214
- h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
215
- ]
216
- : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
217
- ];
218
- }
219
- componentDidLoad() {
220
- this.is_loggedin = salla.config.isUser();
221
- }
222
- };
223
- SallaLoyalty.style = sallaLoyaltyCss;
224
-
225
- export { SallaLoyalty as salla_loyalty };
@@ -1,48 +0,0 @@
1
- /*!
2
- * Crafted with ❤ by Salla
3
- */
4
- import { r as registerInstance, h, H as Host, g as getElement } from './index-4e30ffd0.js';
5
- import { H as Helper } from './Helper-e1d414a5.js';
6
-
7
- const sallaProductSizeGuideCss = "";
8
-
9
- const SallaProductSizeGuide = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- Helper.setHost(document);
13
- salla.event.on('size-guide::open', (product_id) => this.open(product_id));
14
- }
15
- /**
16
- * Show the size-guide modal window
17
- */
18
- async open(product_id) {
19
- this.modal.setTitle(salla.lang.get('pages.products.size_guides'));
20
- this.modal.open();
21
- return await salla.product.getSizeGuides(product_id)
22
- .then((response) => {
23
- this.guides = response.data;
24
- })
25
- .catch(e => console.log(e))
26
- .finally(() => this.modal.stopLoading());
27
- }
28
- /**
29
- *
30
- * Hide the size-guide modal window
31
- */
32
- async close() {
33
- return this.modal.close();
34
- }
35
- // !Todo - Enhance placeholder text
36
- showPlaceholder() {
37
- return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, salla.lang.get('pages.products.size_guide_placeholder')), h("div", { slot: "description" }, salla.lang.get('pages.products.size_guide_placeholder_info')));
38
- }
39
- render() {
40
- return (h(Host, { class: "s-product-size-guide-block" }, h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("div", { class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' })), h("div", { class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '100%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '45%' }), h("salla-skeleton", { height: '10px', width: '30%' })))), h("slot", { name: "header" }), !!this.guides ?
41
- [h("div", { class: "container px-8" }, h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description })))))]
42
- : this.showPlaceholder(), h("slot", { name: "footer" }))));
43
- }
44
- get host() { return getElement(this); }
45
- };
46
- SallaProductSizeGuide.style = sallaProductSizeGuideCss;
47
-
48
- export { SallaProductSizeGuide as salla_product_size_guide };
@@ -1,97 +0,0 @@
1
- /*!
2
- * Crafted with ❤ by Salla
3
- */
4
- import { r as registerInstance, h, H as Host, g as getElement } from './index-4e30ffd0.js';
5
- import { H as Helper } from './Helper-e1d414a5.js';
6
-
7
- const Add = `<!-- Generated by IcoMoon.io -->
8
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
9
- <title>add</title>
10
- <path d="M26.667 14.667h-9.333v-9.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v9.333h-9.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h9.333v9.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-9.333h9.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
11
- </svg>
12
- `;
13
-
14
- const Minus = `<!-- Generated by IcoMoon.io -->
15
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
16
- <title>minus</title>
17
- <path d="M26.667 14.667h-21.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h21.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
18
- </svg>
19
- `;
20
-
21
- const sallaQuantityInputCss = "";
22
-
23
- const SallaQuantityInput = class {
24
- constructor(hostRef) {
25
- registerInstance(this, hostRef);
26
- this.hostAttributes = {};
27
- this.hasIncrementSlot = false;
28
- this.hasDecrementSlot = false;
29
- this.didLoaded = false;
30
- this.quantity = 1;
31
- }
32
- /**
33
- * Workaround to fire change event for the input.
34
- */
35
- watchPropHandler() {
36
- if (!this.didLoaded) {
37
- return;
38
- }
39
- Helper.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));
40
- }
41
- componentWillLoad() {
42
- this.quantity = parseInt(this.host.getAttribute('value')) || 1;
43
- this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
44
- this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
45
- }
46
- componentDidLoad() {
47
- this.didLoaded = true;
48
- this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));
49
- }
50
- getInputAttributes() {
51
- for (let i = 0; i < this.host.attributes.length; i++) {
52
- if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
53
- this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
54
- }
55
- }
56
- return this.hostAttributes;
57
- }
58
- /**
59
- * decrease quantity by one.
60
- * @return HTMLSallaQuantityInputElement
61
- */
62
- async decrease() {
63
- return this.setValue(this.quantity - 1);
64
- }
65
- /**
66
- * increase quantity by one.
67
- * @return HTMLSallaQuantityInputElement
68
- */
69
- async increase() {
70
- return this.setValue(Number(this.quantity) + 1);
71
- }
72
- /**
73
- * set quantity by one.
74
- * @return HTMLSallaQuantityInputElement
75
- */
76
- async setValue(value) {
77
- let maxQuantity = parseInt(this.host.getAttribute('max'));
78
- if (maxQuantity && value > maxQuantity) {
79
- value = maxQuantity;
80
- }
81
- if (value <= 1) {
82
- value = 1;
83
- }
84
- this.quantity = value;
85
- return this.host;
86
- }
87
- render() {
88
- return (h(Host, { class: "s-quantity-input" }, h("div", { class: "s-quantity-input-container" }, h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { name: "increment-button" })), h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })), h("button", { class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { name: "decrement-button" })))));
89
- }
90
- get host() { return getElement(this); }
91
- static get watchers() { return {
92
- "quantity": ["watchPropHandler"]
93
- }; }
94
- };
95
- SallaQuantityInput.style = sallaQuantityInputCss;
96
-
97
- export { SallaQuantityInput as salla_quantity_input };