@everymatrix/general-about-us 1.74.8 → 1.75.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.
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-6dfdd1cd.js');
5
+ const index = require('./index-2df20f4a.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["general-about-us.cjs",[[1,"general-about-us",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasErrors":[32],"isLoading":[32],"device":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"userRoles":["watchEndpoint"],"device":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
22
+ return index.bootstrapLazy([["general-about-us_2.cjs",[[1,"general-about-us",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasErrors":[32],"isLoading":[32],"device":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"userRoles":["watchEndpoint"],"device":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -0,0 +1,479 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-2df20f4a.js');
6
+
7
+ const DEFAULT_LANGUAGE = 'en';
8
+ const TRANSLATIONS = {
9
+ en: {
10
+ error: 'Error',
11
+ noResults: 'Loading, please wait ...',
12
+ },
13
+ hu: {
14
+ error: 'Error',
15
+ noResults: 'Loading, please wait ...',
16
+ },
17
+ ro: {
18
+ error: 'Eroare',
19
+ noResults: 'Loading, please wait ...',
20
+ },
21
+ fr: {
22
+ error: 'Error',
23
+ noResults: 'Loading, please wait ...',
24
+ },
25
+ ar: {
26
+ error: 'خطأ',
27
+ noResults: 'Loading, please wait ...',
28
+ },
29
+ hr: {
30
+ error: 'Greška',
31
+ noResults: 'Učitavanje, molimo pričekajte ...',
32
+ }
33
+ };
34
+ const translate = (key, customLang) => {
35
+ const lang = customLang;
36
+ return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
37
+ };
38
+
39
+ /**
40
+ * @name setClientStyling
41
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
42
+ * @param {HTMLElement} stylingContainer The reference element of the widget
43
+ * @param {string} clientStyling The style content
44
+ */
45
+ function setClientStyling(stylingContainer, clientStyling) {
46
+ if (stylingContainer) {
47
+ const sheet = document.createElement('style');
48
+ sheet.innerHTML = clientStyling;
49
+ stylingContainer.appendChild(sheet);
50
+ }
51
+ }
52
+
53
+ /**
54
+ * @name setClientStylingURL
55
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
56
+ * @param {HTMLElement} stylingContainer The reference element of the widget
57
+ * @param {string} clientStylingUrl The URL of the style content
58
+ */
59
+ function setClientStylingURL(stylingContainer, clientStylingUrl) {
60
+ const url = new URL(clientStylingUrl);
61
+
62
+ fetch(url.href)
63
+ .then((res) => res.text())
64
+ .then((data) => {
65
+ const cssFile = document.createElement('style');
66
+ cssFile.innerHTML = data;
67
+ if (stylingContainer) {
68
+ stylingContainer.appendChild(cssFile);
69
+ }
70
+ })
71
+ .catch((err) => {
72
+ console.error('There was an error while trying to load client styling from URL', err);
73
+ });
74
+ }
75
+
76
+ /**
77
+ * @name setStreamLibrary
78
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
79
+ * @param {HTMLElement} stylingContainer The highest element of the widget
80
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
81
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
82
+ */
83
+ function setStreamStyling(stylingContainer, domain, subscription) {
84
+ if (window.emMessageBus) {
85
+ const sheet = document.createElement('style');
86
+
87
+ window.emMessageBus.subscribe(domain, (data) => {
88
+ sheet.innerHTML = data;
89
+ if (stylingContainer) {
90
+ stylingContainer.appendChild(sheet);
91
+ }
92
+ });
93
+ }
94
+ }
95
+
96
+ function checkDeviceType() {
97
+ const userAgent = navigator.userAgent.toLowerCase();
98
+ const width = screen.availWidth;
99
+ const height = screen.availHeight;
100
+ if (userAgent.includes('iphone')) {
101
+ return 'mobile';
102
+ }
103
+ if (userAgent.includes('android')) {
104
+ if (height > width && width < 800) {
105
+ return 'mobile';
106
+ }
107
+ if (width > height && height < 800) {
108
+ return 'tablet';
109
+ }
110
+ }
111
+ return 'desktop';
112
+ }
113
+ function checkCustomDeviceWidth() {
114
+ const width = screen.availWidth;
115
+ if (width < 600) {
116
+ return 'mobile';
117
+ }
118
+ else if (width >= 600 && width < 1100) {
119
+ return 'tablet';
120
+ }
121
+ }
122
+ function getDeviceCustom() {
123
+ const userAgent = navigator.userAgent.toLowerCase();
124
+ let source = '';
125
+ source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
126
+ return source;
127
+ }
128
+ const getDevice = () => {
129
+ let userAgent = window.navigator.userAgent.toLocaleLowerCase();
130
+ if (userAgent.includes('android/i'))
131
+ return 'android';
132
+ if (userAgent.includes('iphone/i'))
133
+ return 'iPhone';
134
+ if (userAgent.includes('ipad/i') || userAgent.includes('ipod/i'))
135
+ return 'iPad';
136
+ return 'PC';
137
+ };
138
+ const getDevicePlatform = () => {
139
+ const device = getDevice();
140
+ if (device) {
141
+ if (device === 'PC') {
142
+ return 'dk';
143
+ }
144
+ else if (device === 'iPad' || device === 'iPhone') {
145
+ return 'mtWeb';
146
+ }
147
+ else {
148
+ return 'mtWeb';
149
+ }
150
+ }
151
+ };
152
+
153
+ const chevronSvg = 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxODUuMzQzIDE4NS4zNDMiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IiNENUYzREYiIHN0cm9rZT0iI0Q1RjNERiI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8Zz4gPHBhdGggc3R5bGU9ImZpbGw6I2VjZjlmMDsiIGQ9Ik01MS43MDcsMTg1LjM0M2MtMi43NDEsMC01LjQ5My0xLjA0NC03LjU5My0zLjE0OWMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTgxLDAtMTUuMTc1IGw3NC4zNTItNzQuMzQ3TDQ0LjExNCwxOC4zMmMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTg3LDAtMTUuMTc1YzQuMTk0LTQuMTk0LDEwLjk4Ny00LjE5NCwxNS4xOCwwbDgxLjkzNCw4MS45MzQgYzQuMTk0LDQuMTk0LDQuMTk0LDEwLjk4NywwLDE1LjE3NWwtODEuOTM0LDgxLjkzOUM1Ny4yMDEsMTg0LjI5Myw1NC40NTQsMTg1LjM0Myw1MS43MDcsMTg1LjM0M3oiLz4gPC9nPiA8L2c+IDwvZz4KDTwvc3ZnPg==';
154
+
155
+ const generalAboutUsCss = ":host {\n display: block;\n font-family: inherit;\n}\n\np {\n margin: 0;\n padding: 0;\n font-family: inherit;\n}\n\nbutton {\n font-family: inherit;\n}\n\n.AboutUsError .ErrorInfo {\n color: var(--emw--color-error, #ed0909);\n}\n\n.AboutUsWrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n background-color: var(--emw--color-background, #000000);\n width: 100%;\n border-radius: var(--emw--border-radius-large, 15px);\n animation: fadeInAnimation ease 1.5s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n}\n\n@keyframes fadeInAnimation {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n.ItemImage {\n position: relative;\n width: 100%;\n max-width: 100%;\n height: auto;\n border-radius: var(--emw--border-radius-large, 10px);\n background: var(--emw--color-background, black);\n}\n.ItemImage .ForegroundImage {\n z-index: 3;\n pointer-events: none;\n opacity: 1;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: opacity 0.5s ease, filter 0.5s ease;\n border-radius: var(--emw--border-radius-large, 10px);\n}\n.ItemImage .BackgroundImage {\n position: absolute;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: opacity 0.5s ease, filter 0.5s ease;\n border-radius: var(--emw--border-radius-large, 10px);\n z-index: 2;\n top: 20px;\n filter: blur(16px);\n opacity: 0.7;\n transform: scale(1.01);\n}\n.ItemImage .ItemDetails {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n width: 60%;\n padding: 40px;\n}\n.ItemImage .ItemDetails > div {\n position: relative;\n height: auto;\n z-index: 10;\n overflow: hidden;\n}\n.ItemImage .Title {\n padding: 20px 0px 10px 0px;\n font-size: var(--emw--font-size-x-large, 38px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-typography, white);\n background-color: transparent;\n width: unset;\n margin-bottom: 0;\n}\n.ItemImage .Title .FirstWord {\n text-transform: uppercase;\n letter-spacing: 1px;\n background: var(--emw--color-primary, #1EC450);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.ItemImage .Description {\n font-size: var(--emw--font-size-small-plus, 16px);\n font-weight: var(--emw--font-weight-normal, 400);\n color: var(--emw--color-gray-100, #D1D1D2);\n}\n.ItemImage button {\n position: relative;\n width: auto;\n padding: 10px 24px;\n color: var(--emw--button-text-color, white);\n font-size: var(--emw--font-size-small, 16px);\n border: var(--emw--button-border, 3px solid) var(--emw--button-border-color, #063B17);\n border-radius: var(--emw--button-border-radius, 10px);\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n z-index: 20;\n animation: ButtonEffect 4s linear infinite;\n background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));\n background-size: 300% 100%;\n}\n.ItemImage button:hover {\n opacity: 0.8;\n}\n.ItemImage button img.Chevron {\n position: relative;\n height: var(--emw--size-standard, 12px);\n margin-left: var(--emw--spacing-small-minus, 6px);\n}\n@keyframes ButtonEffect {\n 0% {\n background-position: 0% 50%;\n }\n 33% {\n background-position: 100% 50%;\n }\n 66% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: 300% 50%;\n }\n}\n\n@container (max-width: 475px) {\n .AboutUsWrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: var(--emw--spacing-small-minus, 10px);\n max-width: 100%;\n background-color: var(--emw--color-background, #000000);\n animation: fadeInAnimation ease 1.5s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n .AboutUsWrapper .ItemDetails {\n padding: 30px;\n }\n .AboutUsWrapper .ItemDetails .Title {\n font-size: var(--emw--font-size-large, 28px);\n padding: 0;\n }\n .AboutUsWrapper .ItemDetails .Button {\n font-size: var(--emw--font-size-small, 14px);\n padding: 8px 20px;\n }\n .AboutUsWrapper .ItemDetails > div {\n border-radius: var(--emw--border-radius-medium, 5px);\n gap: var(--emw--spacing-2x-small, 4px);\n }\n .AboutUsWrapper .Description {\n text-align: left;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-normal, 400);\n }\n .AboutUsWrapper button {\n padding-bottom: 10px;\n line-height: 15px;\n padding: 10px;\n }\n}\n@container (max-width: 800px) {\n .Title {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n}\n.LoadingSkeleton {\n display: flex;\n flex-direction: column;\n padding: 40px;\n gap: 15px;\n height: 250px;\n width: 100%;\n border-radius: var(--emw--border-radius-large, 15px);\n overflow: hidden;\n}";
156
+ const GeneralAboutUsStyle0 = generalAboutUsCss;
157
+
158
+ const GeneralAboutUs = class {
159
+ constructor(hostRef) {
160
+ index.registerInstance(this, hostRef);
161
+ this.handleClick = (url, target, location, isExternal) => {
162
+ window.postMessage({ type: 'NavigateTo', path: url, target: target, locations: location, externalLink: isExternal || false }, window.location.href);
163
+ // @ts-ignore Analytics event
164
+ if (typeof gtag == 'function') {
165
+ // @ts-ignore
166
+ gtag('event', 'GeneralAboutUs', {
167
+ 'context': 'AboutUsContent'
168
+ });
169
+ }
170
+ };
171
+ this.setImage = (image) => {
172
+ let source = '';
173
+ this.device = checkDeviceType();
174
+ switch (this.device) {
175
+ case 'mobile':
176
+ source = image.imageMobile;
177
+ break;
178
+ case 'tablet':
179
+ source = image.imageTablet;
180
+ break;
181
+ case 'desktop':
182
+ source = image.imageDesktop;
183
+ break;
184
+ }
185
+ return source;
186
+ };
187
+ this.formatTitle = (title, language) => {
188
+ let firstWord, restOfTitle;
189
+ // Check for common languages that do not use space - here: Chinese, Japanese, Thai
190
+ if (['zh', 'ja', 'th'].includes(language)) {
191
+ firstWord = title.substring(0, 1);
192
+ restOfTitle = title.substring(1);
193
+ }
194
+ else {
195
+ const words = title.split(' ');
196
+ firstWord = words.shift();
197
+ restOfTitle = words.join(' ');
198
+ }
199
+ return index.h("div", { class: "Title" }, index.h("span", { class: "FirstWord" }, firstWord, " "), index.h("span", null, restOfTitle));
200
+ };
201
+ this.cmsEndpoint = undefined;
202
+ this.language = 'en';
203
+ this.userRoles = 'everyone';
204
+ this.cmsEnv = 'stage';
205
+ this.mbSource = undefined;
206
+ this.clientStyling = '';
207
+ this.clientStylingUrl = '';
208
+ this.hasErrors = false;
209
+ this.isLoading = true;
210
+ this.device = '';
211
+ }
212
+ watchEndpoint(newValue, oldValue) {
213
+ if (newValue && newValue != oldValue && this.cmsEndpoint) {
214
+ this.getAboutUs();
215
+ }
216
+ }
217
+ handleClientStylingChange(newValue, oldValue) {
218
+ if (newValue != oldValue) {
219
+ setClientStyling(this.stylingContainer, this.clientStyling);
220
+ }
221
+ }
222
+ handleClientStylingChangeURL(newValue, oldValue) {
223
+ if (newValue != oldValue) {
224
+ if (this.clientStylingUrl)
225
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
226
+ }
227
+ }
228
+ componentWillLoad() {
229
+ if (this.cmsEndpoint && this.language) {
230
+ return this.getAboutUs();
231
+ }
232
+ }
233
+ componentDidLoad() {
234
+ this.device = getDeviceCustom();
235
+ if (this.stylingContainer) {
236
+ if (window.emMessageBus != undefined) {
237
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
238
+ }
239
+ else {
240
+ if (this.clientStyling)
241
+ setClientStyling(this.stylingContainer, this.clientStyling);
242
+ if (this.clientStylingUrl)
243
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
244
+ }
245
+ }
246
+ }
247
+ disconnectedCallback() {
248
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
249
+ }
250
+ getAboutUs() {
251
+ let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
252
+ url.searchParams.append('env', this.cmsEnv);
253
+ url.searchParams.append('userRoles', this.userRoles);
254
+ url.searchParams.append('device', getDevicePlatform());
255
+ return new Promise((resolve, reject) => {
256
+ this.isLoading = true;
257
+ fetch(url.href)
258
+ .then((res) => res.json())
259
+ .then((aboutUsContent) => {
260
+ const keysToKeep = ['title', 'description', 'images', 'button', 'externalLink', 'targetType', 'locations'];
261
+ const aboutUsArrContent = Object.entries(aboutUsContent)
262
+ .filter(([key]) => keysToKeep.includes(key))
263
+ .reduce((acc, [key, value]) => {
264
+ acc[key] = value;
265
+ return acc;
266
+ }, {});
267
+ this.aboutUsData = aboutUsArrContent;
268
+ resolve(aboutUsArrContent);
269
+ }).catch((err) => {
270
+ console.error(err);
271
+ this.hasErrors = true;
272
+ reject(err);
273
+ }).finally(() => {
274
+ this.isLoading = false;
275
+ });
276
+ });
277
+ }
278
+ render() {
279
+ var _a, _b, _c, _d, _e;
280
+ return (index.h("div", { key: 'e7953832b9bc914b0fb770695c3550912e9e6406', ref: el => this.stylingContainer = el }, this.hasErrors
281
+ ? index.h("div", { class: "AboutUsError" }, index.h("div", { class: "ErrorInfo" }, translate('error', this.language)))
282
+ : this.isLoading
283
+ ? index.h("div", { class: "LoadingSkeleton" }, index.h("ui-skeleton", { structure: "title", height: "60px", widget: "150px" }), index.h("ui-skeleton", { structure: "text", rows: "3", height: "16px", width: "60%" }), index.h("ui-skeleton", { structure: "rectangle", width: "100px", height: "40px" }))
284
+ : index.h("div", { class: "AboutUsWrapper" }, index.h("div", { class: "ItemImage" }, index.h("div", { class: "ForegroundImage", style: { background: `linear-gradient(to left, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%),
285
+ linear-gradient(to bottom left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
286
+ linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%),
287
+ url(${this.setImage((_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.images)}) no-repeat center center / cover` } }), index.h("img", { class: "BackgroundImage", src: this.setImage(this.aboutUsData.images), alt: "image" }), index.h("div", { class: "ItemDetails" }, this.formatTitle((_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.title, this.language), index.h("div", { class: "Description", innerHTML: (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.description }), index.h("button", { class: "Button", onClick: () => {
288
+ var _a, _b, _c, _d, _e;
289
+ return this.handleClick((_b = (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.buttonUrl, (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.targetType, (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.locations, (_e = this.aboutUsData) === null || _e === void 0 ? void 0 : _e.externalLink);
290
+ } }, (_e = (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.button) === null || _e === void 0 ? void 0 :
291
+ _e.buttonText, index.h("img", { src: chevronSvg, alt: "right chevron", class: "Chevron" })))))));
292
+ }
293
+ static get watchers() { return {
294
+ "cmsEndpoint": ["watchEndpoint"],
295
+ "language": ["watchEndpoint"],
296
+ "userRoles": ["watchEndpoint"],
297
+ "device": ["watchEndpoint"],
298
+ "clientStyling": ["handleClientStylingChange"],
299
+ "clientStylingUrl": ["handleClientStylingChangeURL"]
300
+ }; }
301
+ };
302
+ GeneralAboutUs.style = GeneralAboutUsStyle0;
303
+
304
+ const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
305
+ const UiSkeletonStyle0 = uiSkeletonCss;
306
+
307
+ const UiSkeleton = class {
308
+ constructor(hostRef) {
309
+ index.registerInstance(this, hostRef);
310
+ this.stylingValue = {
311
+ width: this.handleStylingProps(this.width),
312
+ height: this.handleStylingProps(this.height),
313
+ borderRadius: this.handleStylingProps(this.borderRadius),
314
+ marginBottom: this.handleStylingProps(this.marginBottom),
315
+ marginTop: this.handleStylingProps(this.marginTop),
316
+ marginLeft: this.handleStylingProps(this.marginLeft),
317
+ marginRight: this.handleStylingProps(this.marginRight),
318
+ size: this.handleStylingProps(this.size)
319
+ };
320
+ this.structure = undefined;
321
+ this.width = 'unset';
322
+ this.height = 'unset';
323
+ this.borderRadius = 'unset';
324
+ this.marginBottom = 'unset';
325
+ this.marginTop = 'unset';
326
+ this.marginLeft = 'unset';
327
+ this.marginRight = 'unset';
328
+ this.animation = true;
329
+ this.rows = 0;
330
+ this.size = '100%';
331
+ }
332
+ handleStructureChange(newValue, oldValue) {
333
+ if (oldValue !== newValue) {
334
+ this.handleStructure(newValue);
335
+ }
336
+ }
337
+ handleStylingProps(value) {
338
+ switch (typeof value) {
339
+ case 'number':
340
+ return value === 0 ? 0 : `${value}px`;
341
+ case 'undefined':
342
+ return 'unset';
343
+ case 'string':
344
+ if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
345
+ value.endsWith('px') ||
346
+ value.endsWith('%')) {
347
+ return value;
348
+ }
349
+ else {
350
+ return 'unset';
351
+ }
352
+ default:
353
+ return 'unset';
354
+ }
355
+ }
356
+ handleStructure(structure) {
357
+ switch (structure) {
358
+ case 'logo':
359
+ return this.renderLogo();
360
+ case 'image':
361
+ return this.renderImage();
362
+ case 'title':
363
+ return this.renderTitle();
364
+ case 'text':
365
+ return this.renderText();
366
+ case 'rectangle':
367
+ return this.renderRectangle();
368
+ case 'circle':
369
+ return this.renderCircle();
370
+ default:
371
+ return null;
372
+ }
373
+ }
374
+ renderLogo() {
375
+ return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
376
+ }
377
+ renderImage() {
378
+ return index.h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
379
+ }
380
+ renderTitle() {
381
+ return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Title ' + (this.animation ? 'Skeleton' : '') })));
382
+ }
383
+ renderText() {
384
+ return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: 'Text ' + (this.animation ? 'Skeleton' : '') })))));
385
+ }
386
+ renderRectangle() {
387
+ return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
388
+ }
389
+ renderCircle() {
390
+ return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Circle ' + (this.animation ? 'Skeleton' : '') })));
391
+ }
392
+ render() {
393
+ let styleBlock = '';
394
+ switch (this.structure) {
395
+ case 'logo':
396
+ styleBlock = `
397
+ :host {
398
+ --emw-skeleton-logo-width: ${this.stylingValue.width};
399
+ --emw-skeleton-logo-height: ${this.stylingValue.height};
400
+ --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
401
+ --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
402
+ --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
403
+ --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
404
+ --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
405
+ }
406
+ `;
407
+ break;
408
+ case 'image':
409
+ styleBlock = `
410
+ :host {
411
+ --emw-skeleton-image-width: ${this.stylingValue.width};
412
+ --emw-skeleton-image-height: ${this.stylingValue.height};
413
+ --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
414
+ --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
415
+ --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
416
+ --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
417
+ --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
418
+ }
419
+ `;
420
+ break;
421
+ case 'title':
422
+ styleBlock = `
423
+ :host {
424
+ --emw-skeleton-title-width: ${this.stylingValue.width};
425
+ --emw-skeleton-title-height: ${this.stylingValue.height};
426
+ --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
427
+ --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
428
+ --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
429
+ --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
430
+ --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
431
+ }
432
+ `;
433
+ break;
434
+ case 'text':
435
+ styleBlock = `
436
+ :host {
437
+ --emw-skeleton-text-width: ${this.stylingValue.width};
438
+ --emw-skeleton-text-height: ${this.stylingValue.height};
439
+ --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
440
+ --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
441
+ --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
442
+ --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
443
+ --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
444
+ }
445
+ `;
446
+ break;
447
+ case 'rectangle':
448
+ styleBlock = `
449
+ :host {
450
+ --emw-skeleton-rectangle-width: ${this.stylingValue.width};
451
+ --emw-skeleton-rectangle-height: ${this.stylingValue.height};
452
+ --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
453
+ --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
454
+ --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
455
+ --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
456
+ --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
457
+ }
458
+ `;
459
+ break;
460
+ case 'circle':
461
+ styleBlock = `
462
+ :host {
463
+ --emw-skeleton-circle-size: ${this.stylingValue.size};
464
+ }
465
+ `;
466
+ break;
467
+ default:
468
+ styleBlock = '';
469
+ }
470
+ return (index.h(index.Host, { key: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, index.h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, styleBlock), this.handleStructure(this.structure)));
471
+ }
472
+ static get watchers() { return {
473
+ "structure": ["handleStructureChange"]
474
+ }; }
475
+ };
476
+ UiSkeleton.style = UiSkeletonStyle0;
477
+
478
+ exports.general_about_us = GeneralAboutUs;
479
+ exports.ui_skeleton = UiSkeleton;
@@ -21,7 +21,7 @@ function _interopNamespace(e) {
21
21
  }
22
22
 
23
23
  const NAMESPACE = 'general-about-us';
24
- const BUILD = /* general-about-us */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
24
+ const BUILD = /* general-about-us */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
25
25
 
26
26
  /*
27
27
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
71
71
  }
72
72
  switch(bundleId) {
73
73
 
74
- case 'general-about-us.cjs':
74
+ case 'general-about-us_2.cjs':
75
75
  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
76
76
  /* webpackMode: "lazy" */
77
- './general-about-us.cjs.entry.js')); }).then(processMod, consoleError);
77
+ './general-about-us_2.cjs.entry.js')); }).then(processMod, consoleError);
78
78
  }
79
79
  }
80
80
  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -295,6 +295,12 @@ var Host = {};
295
295
  var isHost = (node) => node && node.$tag$ === Host;
296
296
  var parsePropertyValue = (propValue, propType) => {
297
297
  if (propValue != null && !isComplexType(propValue)) {
298
+ if (propType & 4 /* Boolean */) {
299
+ return propValue === "false" ? false : propValue === "" || !!propValue;
300
+ }
301
+ if (propType & 2 /* Number */) {
302
+ return parseFloat(propValue);
303
+ }
298
304
  if (propType & 1 /* String */) {
299
305
  return String(propValue);
300
306
  }
@@ -1211,6 +1217,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1211
1217
  // src/runtime/nonce.ts
1212
1218
  var setNonce = (nonce) => plt.$nonce$ = nonce;
1213
1219
 
1220
+ exports.Host = Host;
1214
1221
  exports.bootstrapLazy = bootstrapLazy;
1215
1222
  exports.h = h;
1216
1223
  exports.promiseResolve = promiseResolve;
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-6dfdd1cd.js');
5
+ const index = require('./index-2df20f4a.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["general-about-us.cjs",[[1,"general-about-us",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasErrors":[32],"isLoading":[32],"device":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"userRoles":["watchEndpoint"],"device":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
11
+ return index.bootstrapLazy([["general-about-us_2.cjs",[[1,"general-about-us",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasErrors":[32],"isLoading":[32],"device":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"userRoles":["watchEndpoint"],"device":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
@@ -7,6 +7,13 @@
7
7
  "version": "4.19.2",
8
8
  "typescriptVersion": "5.4.5"
9
9
  },
10
- "collections": [],
10
+ "collections": [
11
+ {
12
+ "name": "@everymatrix/ui-skeleton",
13
+ "tags": [
14
+ "ui-skeleton"
15
+ ]
16
+ }
17
+ ],
11
18
  "bundles": []
12
19
  }
@@ -91,6 +91,9 @@ button {
91
91
  font-size: var(--emw--font-size-x-large, 38px);
92
92
  font-weight: var(--emw--font-weight-bold, 700);
93
93
  color: var(--emw--color-typography, white);
94
+ background-color: transparent;
95
+ width: unset;
96
+ margin-bottom: 0;
94
97
  }
95
98
  .ItemImage .Title .FirstWord {
96
99
  text-transform: uppercase;
@@ -189,4 +192,14 @@ button {
189
192
  flex-direction: column;
190
193
  align-items: flex-start;
191
194
  }
195
+ }
196
+ .LoadingSkeleton {
197
+ display: flex;
198
+ flex-direction: column;
199
+ padding: 40px;
200
+ gap: 15px;
201
+ height: 250px;
202
+ width: 100%;
203
+ border-radius: var(--emw--border-radius-large, 15px);
204
+ overflow: hidden;
192
205
  }