@everymatrix/bonus-elevate-shop-item 1.43.4 → 1.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bonus-elevate-shop-item/bonus-elevate-shop-item.esm.js +1 -1
- package/dist/bonus-elevate-shop-item/p-961d6b9a.entry.js +1 -0
- package/dist/bonus-elevate-shop-item/p-e1255160.js +1 -0
- package/dist/bonus-elevate-shop-item/p-ec5f179f.js +2 -0
- package/dist/cjs/app-globals-3a1e7e63.js +5 -0
- package/dist/cjs/bonus-elevate-shop-assets-slider_3.cjs.entry.js +377 -406
- package/dist/cjs/bonus-elevate-shop-item.cjs.js +16 -10
- package/dist/cjs/index-1035f878.js +1591 -0
- package/dist/cjs/loader.cjs.js +6 -12
- package/dist/collection/collection-manifest.json +4 -4
- package/dist/collection/components/bonus-elevate-shop-item/bonus-elevate-shop-assets-slider.js +207 -222
- package/dist/collection/components/bonus-elevate-shop-item/bonus-elevate-shop-item.css +5 -5
- package/dist/collection/components/bonus-elevate-shop-item/bonus-elevate-shop-item.js +332 -362
- package/dist/collection/components/bonus-elevate-shop-item/index.js +1 -0
- package/dist/collection/utils/locale.utils.js +54 -54
- package/dist/collection/utils/utils.js +26 -26
- package/dist/esm/app-globals-0f993ce5.js +3 -0
- package/dist/esm/bonus-elevate-shop-assets-slider_3.entry.js +377 -406
- package/dist/esm/bonus-elevate-shop-item.js +13 -10
- package/dist/esm/index-fa394550.js +1561 -0
- package/dist/esm/loader.js +6 -12
- package/dist/stencil.config.dev.js +17 -0
- package/dist/stencil.config.js +14 -21
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/bonus-elevate-shop-item/.stencil/packages/stencil/bonus-elevate-shop-item/stencil.config.d.ts +2 -0
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/bonus-elevate-shop-item/.stencil/packages/stencil/bonus-elevate-shop-item/stencil.config.dev.d.ts +2 -0
- package/dist/types/components/bonus-elevate-shop-item/bonus-elevate-shop-assets-slider.d.ts +35 -35
- package/dist/types/components/bonus-elevate-shop-item/bonus-elevate-shop-item.d.ts +56 -56
- package/dist/types/components/bonus-elevate-shop-item/index.d.ts +1 -0
- package/dist/types/components.d.ts +17 -1
- package/dist/types/models/bonus-elevate-shop-item.d.ts +12 -12
- package/dist/types/stencil-public-runtime.d.ts +142 -33
- package/loader/cdn.js +1 -3
- package/loader/index.cjs.js +1 -3
- package/loader/index.d.ts +13 -1
- package/loader/index.es2017.js +1 -3
- package/loader/index.js +1 -3
- package/loader/package.json +1 -0
- package/package.json +12 -5
- package/dist/bonus-elevate-shop-item/p-3d8363a3.js +0 -1
- package/dist/bonus-elevate-shop-item/p-9546c5ba.entry.js +0 -1
- package/dist/cjs/index-355d8ffb.js +0 -1653
- package/dist/components/bonus-elevate-shop-assets-slider.d.ts +0 -11
- package/dist/components/bonus-elevate-shop-assets-slider.js +0 -6
- package/dist/components/bonus-elevate-shop-assets-slider2.js +0 -158
- package/dist/components/bonus-elevate-shop-item.d.ts +0 -11
- package/dist/components/bonus-elevate-shop-item.js +0 -278
- package/dist/components/general-styling-wrapper.js +0 -6
- package/dist/components/general-styling-wrapper2.js +0 -103
- package/dist/components/index.d.ts +0 -26
- package/dist/components/index.js +0 -1
- package/dist/esm/index-4927ce96.js +0 -1624
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/bonus-elevate-shop-item/.stencil/packages/bonus-elevate-shop-item/stencil.config.d.ts +0 -2
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface BonusElevateShopAssetsSlider extends Components.BonusElevateShopAssetsSlider, HTMLElement {}
|
|
4
|
-
export const BonusElevateShopAssetsSlider: {
|
|
5
|
-
prototype: BonusElevateShopAssetsSlider;
|
|
6
|
-
new (): BonusElevateShopAssetsSlider;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { B as BonusElevateShopAssetsSlider$1, d as defineCustomElement$1 } from './bonus-elevate-shop-assets-slider2.js';
|
|
2
|
-
|
|
3
|
-
const BonusElevateShopAssetsSlider = BonusElevateShopAssetsSlider$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { BonusElevateShopAssetsSlider, defineCustomElement };
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const BonusElevateShopAssetsSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
4
|
-
constructor() {
|
|
5
|
-
super();
|
|
6
|
-
this.__registerHost();
|
|
7
|
-
/**
|
|
8
|
-
* Show slider dots
|
|
9
|
-
*/
|
|
10
|
-
this.showSliderDots = false;
|
|
11
|
-
/**
|
|
12
|
-
* Show slider navigate arrows
|
|
13
|
-
*/
|
|
14
|
-
this.showSliderArrows = true;
|
|
15
|
-
this.itemsPerPage = 1;
|
|
16
|
-
this.sliderItems = [];
|
|
17
|
-
/**
|
|
18
|
-
* Slider variables
|
|
19
|
-
*/
|
|
20
|
-
this.activeIndex = 0;
|
|
21
|
-
this.xDown = null;
|
|
22
|
-
this.yDown = null;
|
|
23
|
-
this.orientationChangeHandler = () => {
|
|
24
|
-
setTimeout(() => {
|
|
25
|
-
this.recalculateItemsPerPage();
|
|
26
|
-
}, 10);
|
|
27
|
-
};
|
|
28
|
-
this.resizeHandler = () => {
|
|
29
|
-
this.recalculateItemsPerPage();
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
setActive(index) {
|
|
33
|
-
var _a;
|
|
34
|
-
const maxLength = (_a = this.sliderItems) === null || _a === void 0 ? void 0 : _a.length;
|
|
35
|
-
if (index >= 0) {
|
|
36
|
-
if (index >= maxLength - 1) {
|
|
37
|
-
this.activeIndex = maxLength - 1;
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
this.activeIndex = index;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
this.activeIndex = 0;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
move(direction) {
|
|
48
|
-
this.setActive(this.activeIndex + direction);
|
|
49
|
-
}
|
|
50
|
-
goTo(index) {
|
|
51
|
-
let diff = this.activeIndex - index;
|
|
52
|
-
if (diff > 0) {
|
|
53
|
-
for (let i = 0; i < diff; i++) {
|
|
54
|
-
this.move(-1);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
for (let i = 0; i > diff; i--) {
|
|
59
|
-
this.move(1);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
handleTouchStart(evt) {
|
|
64
|
-
const firstTouch = this.getTouches(evt)[0];
|
|
65
|
-
this.xDown = firstTouch.clientX;
|
|
66
|
-
this.yDown = firstTouch.clientY;
|
|
67
|
-
}
|
|
68
|
-
getTouches(evt) {
|
|
69
|
-
return evt.touches || evt.originalEvent.touches;
|
|
70
|
-
}
|
|
71
|
-
handleTouchMove(evt) {
|
|
72
|
-
if (!this.xDown || !this.yDown)
|
|
73
|
-
return;
|
|
74
|
-
let xUp = evt.touches[0].clientX;
|
|
75
|
-
let yUp = evt.touches[0].clientY;
|
|
76
|
-
let xDiff = this.xDown - xUp;
|
|
77
|
-
let yDiff = this.yDown - yUp;
|
|
78
|
-
if (Math.abs(xDiff) > Math.abs(yDiff)) {
|
|
79
|
-
if (xDiff > 0) {
|
|
80
|
-
this.move(1);
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
this.move(-1);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
this.xDown = null;
|
|
87
|
-
this.yDown = null;
|
|
88
|
-
}
|
|
89
|
-
;
|
|
90
|
-
recalculateItemsPerPage() {
|
|
91
|
-
if (!this.sliderItemsElement)
|
|
92
|
-
return;
|
|
93
|
-
this.itemElementWidth = this.sliderItemsElement.clientWidth;
|
|
94
|
-
this.sliderItemsElementWidth = (this.sliderItems.length - 1) * this.itemElementWidth;
|
|
95
|
-
}
|
|
96
|
-
;
|
|
97
|
-
renderDots() {
|
|
98
|
-
var _a;
|
|
99
|
-
const dots = [];
|
|
100
|
-
for (let index = 0; index < ((_a = this.sliderItems) === null || _a === void 0 ? void 0 : _a.length) / this.itemsPerPage; index++) {
|
|
101
|
-
dots.push(h("li", { class: index == this.activeIndex ? 'active' : 'default', onClick: () => { this.goTo(index); this.setActive(index); } }));
|
|
102
|
-
}
|
|
103
|
-
return dots;
|
|
104
|
-
}
|
|
105
|
-
componentDidRender() {
|
|
106
|
-
this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
|
|
107
|
-
this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
|
|
108
|
-
this.recalculateItemsPerPage();
|
|
109
|
-
}
|
|
110
|
-
componentDidUpdate() {
|
|
111
|
-
this.recalculateItemsPerPage();
|
|
112
|
-
}
|
|
113
|
-
connectedCallback() {
|
|
114
|
-
window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
|
|
115
|
-
}
|
|
116
|
-
disconnectedCallback() {
|
|
117
|
-
this.el.removeEventListener('touchstart', this.handleTouchStart);
|
|
118
|
-
this.el.removeEventListener('touchmove', this.handleTouchMove);
|
|
119
|
-
window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
|
|
120
|
-
window.removeEventListener('resize', this.resizeHandler);
|
|
121
|
-
}
|
|
122
|
-
render() {
|
|
123
|
-
var _a;
|
|
124
|
-
const styles = {
|
|
125
|
-
transform: `translate(${(this.sliderItemsElementWidth / (((_a = this.sliderItems) === null || _a === void 0 ? void 0 : _a.length) - 1) * this.activeIndex) * -1}px, 0px)`
|
|
126
|
-
};
|
|
127
|
-
const itemStyle = {
|
|
128
|
-
width: `${this.itemElementWidth / this.itemsPerPage}px`
|
|
129
|
-
};
|
|
130
|
-
return h("div", { class: "SliderWrapper" }, h("div", { class: 'MainContent ' }, this.showSliderArrows &&
|
|
131
|
-
h("div", { class: `SliderNavButton LeftArrow ${this.activeIndex === 0 ? 'DisabledArrow ' : ''} ${this.sliderItems.length === 1 ? 'HiddenArrow ' : ''}`, onClick: () => this.move(-1) }, h("svg", { fill: "none", stroke: "var(--emfe-w-color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), h("div", { class: 'ItemsWrapper', ref: (el) => this.sliderItemsElement = el }, h("div", { class: 'Items AssetsItems', style: styles }, this.sliderItems.map((assetUrl) => h("img", { class: `img${this.itemsPerPage}`, alt: 'Gift Thumbnails', style: itemStyle, src: assetUrl })))), this.showSliderArrows &&
|
|
132
|
-
h("div", { class: `SliderNavButton RightArrow ${this.sliderItems.length === 1 ? 'HiddenArrow ' : ''}
|
|
133
|
-
${(this.activeIndex === (this.sliderItems.length - 1) || this.itemsPerPage == this.sliderItems.length) ? 'DisabledArrow' : ''}`, onClick: () => this.move(1) }, h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" })))), this.showSliderDots && this.sliderItems.length > 1 &&
|
|
134
|
-
h("div", { class: "DotsWrapper" }, h("ul", { class: "Dots" }, this.renderDots())));
|
|
135
|
-
}
|
|
136
|
-
get el() { return this; }
|
|
137
|
-
}, [0, "bonus-elevate-shop-assets-slider", {
|
|
138
|
-
"showSliderDots": [516, "show-slider-dots"],
|
|
139
|
-
"showSliderArrows": [516, "show-slider-arrows"],
|
|
140
|
-
"itemsPerPage": [514, "items-per-page"],
|
|
141
|
-
"sliderItems": [16],
|
|
142
|
-
"activeIndex": [32]
|
|
143
|
-
}]);
|
|
144
|
-
function defineCustomElement() {
|
|
145
|
-
if (typeof customElements === "undefined") {
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
const components = ["bonus-elevate-shop-assets-slider"];
|
|
149
|
-
components.forEach(tagName => { switch (tagName) {
|
|
150
|
-
case "bonus-elevate-shop-assets-slider":
|
|
151
|
-
if (!customElements.get(tagName)) {
|
|
152
|
-
customElements.define(tagName, BonusElevateShopAssetsSlider);
|
|
153
|
-
}
|
|
154
|
-
break;
|
|
155
|
-
} });
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
export { BonusElevateShopAssetsSlider as B, defineCustomElement as d };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface BonusElevateShopItem extends Components.BonusElevateShopItem, HTMLElement {}
|
|
4
|
-
export const BonusElevateShopItem: {
|
|
5
|
-
prototype: BonusElevateShopItem;
|
|
6
|
-
new (): BonusElevateShopItem;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,278 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
|
|
2
|
-
import { d as defineCustomElement$3 } from './bonus-elevate-shop-assets-slider2.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './general-styling-wrapper2.js';
|
|
4
|
-
|
|
5
|
-
const DEFAULT_LANGUAGE = 'en';
|
|
6
|
-
const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu'];
|
|
7
|
-
const TRANSLATIONS = {
|
|
8
|
-
en: {
|
|
9
|
-
coins: 'Coins',
|
|
10
|
-
noGiftPresentation: 'No description',
|
|
11
|
-
redeem: 'Redeem',
|
|
12
|
-
noDataFound: 'No data found',
|
|
13
|
-
error4003: 'Invalid Session',
|
|
14
|
-
redeemFailed: 'Failed to redeem'
|
|
15
|
-
},
|
|
16
|
-
ro: {
|
|
17
|
-
coins: 'Coins',
|
|
18
|
-
noGiftPresentation: 'No description',
|
|
19
|
-
redeem: 'Redeem',
|
|
20
|
-
noDataFound: 'No data found',
|
|
21
|
-
error4003: 'Invalid Session',
|
|
22
|
-
redeemFailed: 'Failed to redeem'
|
|
23
|
-
},
|
|
24
|
-
fr: {
|
|
25
|
-
coins: 'Coins',
|
|
26
|
-
noGiftPresentation: 'No description',
|
|
27
|
-
redeem: 'Redeem',
|
|
28
|
-
noDataFound: 'No data found',
|
|
29
|
-
error4003: 'Invalid Session',
|
|
30
|
-
redeemFailed: 'Failed to redeem',
|
|
31
|
-
},
|
|
32
|
-
ar: {
|
|
33
|
-
coins: 'Coins',
|
|
34
|
-
noGiftPresentation: 'No description',
|
|
35
|
-
redeem: 'Redeem',
|
|
36
|
-
noDataFound: 'No data found',
|
|
37
|
-
error4003: 'Invalid Session',
|
|
38
|
-
redeemFailed: 'Failed to redeem',
|
|
39
|
-
},
|
|
40
|
-
hu: {
|
|
41
|
-
coins: 'Coins',
|
|
42
|
-
noGiftPresentation: 'No description',
|
|
43
|
-
redeem: 'Redeem',
|
|
44
|
-
noDataFound: 'No data found',
|
|
45
|
-
error4003: 'Invalid Session',
|
|
46
|
-
redeemFailed: 'Failed to redeem',
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const translate = (key, customLang) => {
|
|
50
|
-
const lang = customLang;
|
|
51
|
-
return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
|
|
52
|
-
};
|
|
53
|
-
const getTranslations = (url) => {
|
|
54
|
-
// fetch url, get the data, replace the TRANSLATIONS content
|
|
55
|
-
return new Promise((resolve) => {
|
|
56
|
-
fetch(url)
|
|
57
|
-
.then((res) => res.json())
|
|
58
|
-
.then((data) => {
|
|
59
|
-
Object.keys(data).forEach((item) => {
|
|
60
|
-
for (let key in data[item]) {
|
|
61
|
-
TRANSLATIONS[item][key] = data[item][key];
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
resolve(true);
|
|
65
|
-
});
|
|
66
|
-
});
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* @name isMobile
|
|
71
|
-
* @description A method that returns if the browser used to access the app is from a mobile device or not
|
|
72
|
-
* @param {String} userAgent window.navigator.userAgent
|
|
73
|
-
* @returns {Boolean} true or false
|
|
74
|
-
*/
|
|
75
|
-
const getDevice = () => {
|
|
76
|
-
let userAgent = window.navigator.userAgent;
|
|
77
|
-
if (userAgent.toLowerCase().match(/android/i)) {
|
|
78
|
-
return 'Android';
|
|
79
|
-
}
|
|
80
|
-
if (userAgent.toLowerCase().match(/iphone/i)) {
|
|
81
|
-
return 'iPhone';
|
|
82
|
-
}
|
|
83
|
-
if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
|
|
84
|
-
return 'iPad';
|
|
85
|
-
}
|
|
86
|
-
return 'PC';
|
|
87
|
-
};
|
|
88
|
-
const getDevicePlatform = () => {
|
|
89
|
-
const device = getDevice();
|
|
90
|
-
if (device) {
|
|
91
|
-
if (device === 'PC') {
|
|
92
|
-
return 'dk';
|
|
93
|
-
}
|
|
94
|
-
else if (device === 'iPad' || device === 'iPhone') {
|
|
95
|
-
return 'ios';
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
return 'mtWeb';
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
const bonusElevateShopItemCss = ":host{display:block}.ElevateDetails{display:flex;flex-direction:row;flex-wrap:wrap;padding:10px;width:calc(100% - 20px);}.ElevateDetails .RedeemError{display:none}.ElevateDetails .Error{color:var(--emfe-w-color-error, #FD2839)}.ElevateDetails .Row{flex-direction:row;display:flex}.ElevateDetails .Col{flex-direction:column;display:flex}.ElevateDetails .Details{padding:20px}.ElevateDetails .ThumbnailRow{display:flex;flex-direction:column;justify-content:space-between;min-width:268px;max-width:398px}.ElevateDetails .ThumbnailRow .BackButton{width:20px;height:20px;padding:5px;background:white;box-shadow:0px 4px 40px 0px rgba(138, 149, 158, 0.2);margin:10px 0 10px;cursor:pointer;animation-timing-function:ease-out;animation-duration:300ms;transition-property:all;border:1px solid #e4e6e8;border-radius:5px;text-align:center}.ElevateDetails .ThumbnailRow .BackButton:hover{background:#e3dede}.ElevateDetails .ThumbnailRow .Thumbnails{display:flex;flex-direction:column;position:relative;width:calc(100% - 40px)}.ElevateDetails .ShopItemDetail{flex-grow:1;min-width:300px}.ElevateDetails .GiftPoints .Points{font-size:21px}.ElevateDetails .GiftPoints .PointsLabel{font-size:12px;color:var(--emfe-w-color-gray-300, #4e5a37);font-weight:400;line-height:29px;letter-spacing:0.04em;text-align:left}.ElevateDetails .RedeemButton:hover{font-weight:800;border:2px solid var(--emfe-w-color-gray-300, #e5e7d5)}.ElevateDetails .RedeemButton.Disabled:hover{font-weight:normal;border:2px solid transparent}.ElevateDetails .RedeemButton{margin-top:50px;color:#f1f1f1;font-size:20px;padding:16px 25px 16px 25px;border-radius:18px;text-align:center;cursor:pointer;background:linear-gradient(0deg, #26CC37, #26CC37), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);border:2px solid;border-image-source:linear-gradient(283.85deg, rgba(190, 40, 40, 0.5) 0%, rgba(56, 64, 179, 0) 33.47%);box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25)}.ElevateDetails .RedeemButton.DkButton{width:80px;padding:8px;font-size:16px;border-radius:5px}.ElevateDetails .RedeemButton.Disabled{background:linear-gradient(0deg, #b8c4b9, #9eb0a0), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%)}.ElevateDetails .SliderWrapper{display:flex;flex-direction:column;position:relative;width:calc(100% - 40px)}.ElevateDetails .SliderWrapper .MainContent{display:flex;flex-direction:row;justify-content:space-around}.ElevateDetails .SliderWrapper .MainContent .LeftArrow,.ElevateDetails .SliderWrapper .MainContent .RightArrow{width:20px}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper{overflow:hidden;display:inline-flex;width:calc(100% - 40px);flex-direction:column}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper .Items{display:inline-flex;transition:transform 0.4s ease-in-out;transform:translateX(0px);margin:auto}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img2{width:50%}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img3{width:30%}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img,.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img1{max-width:100%;background:#efefef;border:1px solid #efefef;border-radius:18px;border:1px;margin:10px 0 10px}.ElevateDetails .SliderWrapper .DotsWrapper{width:100%;margin:0 auto;height:30px}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots{display:flex;justify-content:center;padding:0}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li{height:10px;width:10px;background:#ccc;border-radius:50%;margin-left:3px;margin-right:3px;list-style:none;cursor:pointer}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li:hover{background:#bbb}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li.active{border:solid 1px var(--emfe-w-color-secondary, #FD2839);background:var(--emfe-w-color-secondary, #FD2839)}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li.default{border:solid 1px var(--emfe-w-color-secondary, #FD2839);background-color:#FFF}.ElevateDetails .SliderNavButton{border:0px;width:25px;display:flex;align-items:center;justify-content:center;cursor:pointer}.ElevateDetails .SliderNavButton.HiddenArrow{visibility:hidden}.ElevateDetails .SliderNavButton svg{width:20px;stroke:var(--emfe-w-color-secondary, #FD2839)}.ElevateDetails .DisabledArrow svg{opacity:0.2;stroke:var(--emfe-w-color-secondary, #FD2839);pointer-events:none}";
|
|
104
|
-
|
|
105
|
-
const BonusElevateShopItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
106
|
-
constructor() {
|
|
107
|
-
super();
|
|
108
|
-
this.__registerHost();
|
|
109
|
-
this.__attachShadow();
|
|
110
|
-
this.redeemGiftButton = createEvent(this, "redeemGiftButton", 7);
|
|
111
|
-
/**
|
|
112
|
-
* Currently selected language.
|
|
113
|
-
*/
|
|
114
|
-
this.language = 'en';
|
|
115
|
-
/**
|
|
116
|
-
* Client custom styling via inline styles
|
|
117
|
-
*/
|
|
118
|
-
this.clientStyling = '';
|
|
119
|
-
/**
|
|
120
|
-
* Client custom styling via url
|
|
121
|
-
*/
|
|
122
|
-
this.clientStylingUrl = '';
|
|
123
|
-
/**
|
|
124
|
-
* Translation via url
|
|
125
|
-
*/
|
|
126
|
-
this.translationUrl = '';
|
|
127
|
-
/**
|
|
128
|
-
* Show slider dots
|
|
129
|
-
*/
|
|
130
|
-
this.showSliderDots = false;
|
|
131
|
-
/**
|
|
132
|
-
* Show slider navigate arrows
|
|
133
|
-
*/
|
|
134
|
-
this.showSliderArrows = true;
|
|
135
|
-
this.isGiftNotFound = false;
|
|
136
|
-
this.redeemErrorMsg = '';
|
|
137
|
-
this.isRedeeming = false;
|
|
138
|
-
this.bindedHandler = this.handleMessage.bind(this);
|
|
139
|
-
this.deviceType = getDevicePlatform();
|
|
140
|
-
}
|
|
141
|
-
redeemGiftConfirm() {
|
|
142
|
-
window.postMessage({ type: 'BEERedeemConfirm', shopItem: this.elevateGift }, window.location.href);
|
|
143
|
-
}
|
|
144
|
-
handleMessage(message) {
|
|
145
|
-
if (message.data && message.data.type === "bee-redeem-confirmed" &&
|
|
146
|
-
message.data.id == this.elevateGift.id) {
|
|
147
|
-
this.redeemGift();
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
onBackClicked() {
|
|
151
|
-
window.postMessage({ type: 'OnGiftDetailsBackButtonClicked' }, window.location.href);
|
|
152
|
-
}
|
|
153
|
-
redeemGift() {
|
|
154
|
-
if (this.elevateGift.available.toLowerCase() === 'false') {
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
let url = new URL(`${this.endpoint}/v1/elevate/redeem`);
|
|
158
|
-
let claimGiftOptions = {
|
|
159
|
-
method: 'PUT',
|
|
160
|
-
headers: {
|
|
161
|
-
'x-SessionId': this.session,
|
|
162
|
-
'Content-Type': 'application/json-patch+json',
|
|
163
|
-
},
|
|
164
|
-
body: JSON.stringify({ giftId: this.elevateGift.id }),
|
|
165
|
-
};
|
|
166
|
-
this.redeemErrorMsg = '';
|
|
167
|
-
this.isRedeeming = true;
|
|
168
|
-
fetch(url.toString(), claimGiftOptions)
|
|
169
|
-
.then((res) => res.json())
|
|
170
|
-
.then((res) => {
|
|
171
|
-
if (res.success) {
|
|
172
|
-
this.redeemGiftButton.emit();
|
|
173
|
-
window.postMessage({ type: 'BEEGiftRedeem', itemId: this.elevateGift.id }, window.location.href);
|
|
174
|
-
}
|
|
175
|
-
else {
|
|
176
|
-
let translatedError = translate(`error${res.errorCode}`, this.language);
|
|
177
|
-
this.redeemErrorMsg = translatedError ? translatedError : translate('redeemFailed', this.language);
|
|
178
|
-
window.postMessage({ type: 'BEEGiftRedeemFailed', itemId: this.elevateGift.id, res }, window.location.href);
|
|
179
|
-
}
|
|
180
|
-
})
|
|
181
|
-
.catch((err) => {
|
|
182
|
-
window.postMessage({ type: 'BEEGiftClaimFailed', itemId: this.elevateGift.id, err }, window.location.href);
|
|
183
|
-
}).finally(() => {
|
|
184
|
-
this.isRedeeming = false;
|
|
185
|
-
});
|
|
186
|
-
}
|
|
187
|
-
async loadElevateGift() {
|
|
188
|
-
let url = new URL(`${this.endpoint}/v1/elevate/shop?language=${this.language}&filter=id=${this.itemId}`);
|
|
189
|
-
let options = {
|
|
190
|
-
headers: {
|
|
191
|
-
'Content-Type': 'application/json',
|
|
192
|
-
'x-SessionId': this.session,
|
|
193
|
-
},
|
|
194
|
-
method: 'GET',
|
|
195
|
-
};
|
|
196
|
-
await new Promise((resolve) => {
|
|
197
|
-
fetch(url.href, options)
|
|
198
|
-
.then((res) => res.json())
|
|
199
|
-
.then((data) => {
|
|
200
|
-
let filteredGifts = data.data;
|
|
201
|
-
if (filteredGifts && filteredGifts.length == 1) {
|
|
202
|
-
this.elevateGift = filteredGifts[0];
|
|
203
|
-
this.isGiftNotFound = false;
|
|
204
|
-
}
|
|
205
|
-
else {
|
|
206
|
-
this.isGiftNotFound = true;
|
|
207
|
-
}
|
|
208
|
-
resolve(true);
|
|
209
|
-
});
|
|
210
|
-
});
|
|
211
|
-
}
|
|
212
|
-
disconnectedCallback() {
|
|
213
|
-
window.removeEventListener('message', this.bindedHandler, false);
|
|
214
|
-
}
|
|
215
|
-
componentDidLoad() {
|
|
216
|
-
window.addEventListener('message', this.bindedHandler, false);
|
|
217
|
-
}
|
|
218
|
-
async componentWillLoad() {
|
|
219
|
-
if (this.translationUrl.length > 2) {
|
|
220
|
-
await getTranslations(this.translationUrl);
|
|
221
|
-
}
|
|
222
|
-
if (this.elevateGift) {
|
|
223
|
-
this.isGiftNotFound = false;
|
|
224
|
-
}
|
|
225
|
-
else {
|
|
226
|
-
await this.loadElevateGift();
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
render() {
|
|
230
|
-
return (h(Host, null, h("general-styling-wrapper", { clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling }), h("div", { class: 'ElevateDetails' }, this.isGiftNotFound && (h(Fragment, null, h("div", { class: "Row ThumbnailRow" }, h("div", { class: "BackButton", onClick: () => {
|
|
231
|
-
this.onBackClicked();
|
|
232
|
-
} }, '<')), h("div", { class: "Thumnails GiftNotFound" }, translate('noDataFound', this.language), "."))), this.elevateGift && h(Fragment, null, h("div", { class: "ThumbnailRow" }, h("div", { class: 'Row' }, h("div", { class: "BackButton", onClick: () => { this.onBackClicked(); } }, '<'), h("bonus-elevate-shop-assets-slider", { class: 'Thumbnails', itemsPerPage: 1, sliderItems: this.elevateGift.presentation.assets, showSliderDots: this.showSliderDots })), h("div", { class: 'Col Details' }, h("h3", { class: "GiftName" }, this.elevateGift.presentation.displayName || this.elevateGift.displayName), h("div", { class: "GiftPoints" }, h("span", { class: "Points" }, this.elevateGift.points, " "), h("span", { class: " PointsLabel" }, translate('coins', this.language))))), h("div", { class: 'ShopItemDetail Details' }, h("div", { class: "GiftPresentation" }, h("p", null, this.elevateGift.presentation.description ? this.elevateGift.presentation.description : translate('noGiftPresentation', this.language))), h("div", { class: `RedeemButton ${this.elevateGift.available === 'false' || this.isRedeeming ? 'Disabled' : ''}
|
|
233
|
-
${this.deviceType == 'dk' ? 'DkButton' : ''}`, onClick: this.redeemGiftConfirm.bind(this) }, translate('redeem', this.language)), h("span", { class: 'RedeemError Error' }, " ", this.redeemErrorMsg, " "))))));
|
|
234
|
-
}
|
|
235
|
-
static get style() { return bonusElevateShopItemCss; }
|
|
236
|
-
}, [1, "bonus-elevate-shop-item", {
|
|
237
|
-
"endpoint": [513],
|
|
238
|
-
"language": [513],
|
|
239
|
-
"itemId": [1537, "item-id"],
|
|
240
|
-
"elevateGift": [1040],
|
|
241
|
-
"session": [513],
|
|
242
|
-
"clientStyling": [513, "client-styling"],
|
|
243
|
-
"clientStylingUrl": [513, "client-styling-url"],
|
|
244
|
-
"translationUrl": [513, "translation-url"],
|
|
245
|
-
"showSliderDots": [516, "show-slider-dots"],
|
|
246
|
-
"showSliderArrows": [516, "show-slider-arrows"],
|
|
247
|
-
"isGiftNotFound": [32],
|
|
248
|
-
"redeemErrorMsg": [32],
|
|
249
|
-
"isRedeeming": [32]
|
|
250
|
-
}]);
|
|
251
|
-
function defineCustomElement$1() {
|
|
252
|
-
if (typeof customElements === "undefined") {
|
|
253
|
-
return;
|
|
254
|
-
}
|
|
255
|
-
const components = ["bonus-elevate-shop-item", "bonus-elevate-shop-assets-slider", "general-styling-wrapper"];
|
|
256
|
-
components.forEach(tagName => { switch (tagName) {
|
|
257
|
-
case "bonus-elevate-shop-item":
|
|
258
|
-
if (!customElements.get(tagName)) {
|
|
259
|
-
customElements.define(tagName, BonusElevateShopItem$1);
|
|
260
|
-
}
|
|
261
|
-
break;
|
|
262
|
-
case "bonus-elevate-shop-assets-slider":
|
|
263
|
-
if (!customElements.get(tagName)) {
|
|
264
|
-
defineCustomElement$3();
|
|
265
|
-
}
|
|
266
|
-
break;
|
|
267
|
-
case "general-styling-wrapper":
|
|
268
|
-
if (!customElements.get(tagName)) {
|
|
269
|
-
defineCustomElement$2();
|
|
270
|
-
}
|
|
271
|
-
break;
|
|
272
|
-
} });
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
const BonusElevateShopItem = BonusElevateShopItem$1;
|
|
276
|
-
const defineCustomElement = defineCustomElement$1;
|
|
277
|
-
|
|
278
|
-
export { BonusElevateShopItem, defineCustomElement };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { G as GeneralStylingWrapper$1, d as defineCustomElement$1 } from './general-styling-wrapper2.js';
|
|
2
|
-
|
|
3
|
-
const GeneralStylingWrapper = GeneralStylingWrapper$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { GeneralStylingWrapper, defineCustomElement };
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const mergeTranslations = (url, target) => {
|
|
4
|
-
return new Promise((resolve) => {
|
|
5
|
-
fetch(url)
|
|
6
|
-
.then((res) => res.json())
|
|
7
|
-
.then((data) => {
|
|
8
|
-
Object.keys(data).forEach((item) => {
|
|
9
|
-
target[item] = target[item] ? target[item] : {};
|
|
10
|
-
for (let key in data[item]) {
|
|
11
|
-
target[item][key] = data[item][key];
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
resolve(true);
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
const generalStylingWrapperCss = ":host{display:block}";
|
|
20
|
-
|
|
21
|
-
const GeneralStylingWrapper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
22
|
-
constructor() {
|
|
23
|
-
super();
|
|
24
|
-
this.__registerHost();
|
|
25
|
-
/**
|
|
26
|
-
* Client custom styling via inline styles
|
|
27
|
-
*/
|
|
28
|
-
this.clientStyling = '';
|
|
29
|
-
/**
|
|
30
|
-
* Client custom styling via url
|
|
31
|
-
*/
|
|
32
|
-
this.clientStylingUrl = '';
|
|
33
|
-
/**
|
|
34
|
-
* Translation via url
|
|
35
|
-
*/
|
|
36
|
-
this.translationUrl = '';
|
|
37
|
-
this.stylingAppends = false;
|
|
38
|
-
this.setClientStyling = () => {
|
|
39
|
-
let sheet = document.createElement('style');
|
|
40
|
-
sheet.innerHTML = this.clientStyling;
|
|
41
|
-
this.el.prepend(sheet);
|
|
42
|
-
};
|
|
43
|
-
this.setClientStylingURL = () => {
|
|
44
|
-
let url = new URL(this.clientStylingUrl);
|
|
45
|
-
let cssFile = document.createElement('style');
|
|
46
|
-
fetch(url.href)
|
|
47
|
-
.then((res) => res.text())
|
|
48
|
-
.then((data) => {
|
|
49
|
-
cssFile.innerHTML = data;
|
|
50
|
-
setTimeout(() => {
|
|
51
|
-
this.el.prepend(cssFile);
|
|
52
|
-
}, 1);
|
|
53
|
-
})
|
|
54
|
-
.catch((err) => {
|
|
55
|
-
console.log('error ', err);
|
|
56
|
-
});
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
componentDidRender() {
|
|
60
|
-
// start custom styling area
|
|
61
|
-
if (!this.stylingAppends) {
|
|
62
|
-
if (this.clientStyling)
|
|
63
|
-
this.setClientStyling();
|
|
64
|
-
if (this.clientStylingUrl)
|
|
65
|
-
this.setClientStylingURL();
|
|
66
|
-
this.stylingAppends = true;
|
|
67
|
-
}
|
|
68
|
-
// end custom styling area
|
|
69
|
-
}
|
|
70
|
-
async componentWillLoad() {
|
|
71
|
-
const promises = [];
|
|
72
|
-
if (this.translationUrl) {
|
|
73
|
-
const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
|
|
74
|
-
promises.push(translationPromise);
|
|
75
|
-
}
|
|
76
|
-
return await Promise.all(promises);
|
|
77
|
-
}
|
|
78
|
-
render() {
|
|
79
|
-
return (h("div", { class: "StyleShell" }, h("slot", { name: "mainContent" })));
|
|
80
|
-
}
|
|
81
|
-
get el() { return this; }
|
|
82
|
-
static get style() { return generalStylingWrapperCss; }
|
|
83
|
-
}, [4, "general-styling-wrapper", {
|
|
84
|
-
"clientStyling": [1, "client-styling"],
|
|
85
|
-
"clientStylingUrl": [1, "client-styling-url"],
|
|
86
|
-
"translationUrl": [1, "translation-url"],
|
|
87
|
-
"targetTranslations": [16]
|
|
88
|
-
}]);
|
|
89
|
-
function defineCustomElement() {
|
|
90
|
-
if (typeof customElements === "undefined") {
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
const components = ["general-styling-wrapper"];
|
|
94
|
-
components.forEach(tagName => { switch (tagName) {
|
|
95
|
-
case "general-styling-wrapper":
|
|
96
|
-
if (!customElements.get(tagName)) {
|
|
97
|
-
customElements.define(tagName, GeneralStylingWrapper);
|
|
98
|
-
}
|
|
99
|
-
break;
|
|
100
|
-
} });
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
export { GeneralStylingWrapper as G, defineCustomElement as d };
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/* BonusElevateShopItem custom elements */
|
|
2
|
-
|
|
3
|
-
import type { Components, JSX } from "../types/components";
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Used to manually set the base path where assets can be found.
|
|
7
|
-
* If the script is used as "module", it's recommended to use "import.meta.url",
|
|
8
|
-
* such as "setAssetPath(import.meta.url)". Other options include
|
|
9
|
-
* "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
|
|
10
|
-
* dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
|
|
11
|
-
* But do note that this configuration depends on how your script is bundled, or lack of
|
|
12
|
-
* bundling, and where your assets can be loaded from. Additionally custom bundling
|
|
13
|
-
* will have to ensure the static assets are copied to its build directory.
|
|
14
|
-
*/
|
|
15
|
-
export declare const setAssetPath: (path: string) => void;
|
|
16
|
-
|
|
17
|
-
export interface SetPlatformOptions {
|
|
18
|
-
raf?: (c: FrameRequestCallback) => number;
|
|
19
|
-
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
20
|
-
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
21
|
-
}
|
|
22
|
-
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
23
|
-
|
|
24
|
-
export type { Components, JSX };
|
|
25
|
-
|
|
26
|
-
export * from '../types';
|
package/dist/components/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|