@everymatrix/general-about-us 1.36.1 → 1.37.2

package/dist/cjs/general-about-us.cjs.entry.js

@@ -94,7 +94,9 @@ const getDevicePlatform = () => {
   }
 };
 
-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(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));\n}\n\n.AboutUsWrapper {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\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  flex: auto;\n  max-width: 50%;\n  height: 300px;\n  border-radius: 5px;\n}\n\n.ItemDetails {\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-radius: 5px;\n  margin: 0 20px;\n}\n\n.Title {\n  font-size: 24px;\n  font-weight: 700;\n  -webkit-text-fill-color: transparent;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.Description {\n  font-size: 16px;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n}\n\nbutton {\n  width: 160px;\n  padding: 10px 15px;\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  font-size: 16px;\n  border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n  border-radius: 5px;\n  line-height: 24px;\n  transition: all 1s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\nbutton:hover {\n  background: linear-gradient(to bottom, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  transition: all 0.5s;\n  transform: translateY(-10px);\n}\nbutton button::after {\n  content: \"\";\n  display: block;\n  background-color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  mask-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+\");\n  width: 24px;\n  height: 24px;\n  margin: 0 10px;\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    width: 100%;\n    gap: 20px;\n    padding-bottom: 20px;\n    background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\n    animation: fadeInAnimation ease 1.5s;\n    animation-iteration-count: 1;\n    animation-fill-mode: forwards;\n  }\n\n  .ItemImage {\n    flex: auto;\n    width: 100%;\n    max-width: unset;\n    flex-grow: 1;\n  }\n\n  .ItemDetails {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    align-items: center;\n    border-radius: 5px;\n    gap: 20px;\n    margin: 0 20px;\n  }\n\n  .Description {\n    text-align: center;\n  }\n}";
+const chevronSvg = 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxODUuMzQzIDE4NS4zNDMiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IiNENUYzREYiIHN0cm9rZT0iI0Q1RjNERiI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8Zz4gPHBhdGggc3R5bGU9ImZpbGw6I2VjZjlmMDsiIGQ9Ik01MS43MDcsMTg1LjM0M2MtMi43NDEsMC01LjQ5My0xLjA0NC03LjU5My0zLjE0OWMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTgxLDAtMTUuMTc1IGw3NC4zNTItNzQuMzQ3TDQ0LjExNCwxOC4zMmMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTg3LDAtMTUuMTc1YzQuMTk0LTQuMTk0LDEwLjk4Ny00LjE5NCwxNS4xOCwwbDgxLjkzNCw4MS45MzQgYzQuMTk0LDQuMTk0LDQuMTk0LDEwLjk4NywwLDE1LjE3NWwtODEuOTM0LDgxLjkzOUM1Ny4yMDEsMTg0LjI5Myw1NC40NTQsMTg1LjM0Myw1MS43MDcsMTg1LjM0M3oiLz4gPC9nPiA8L2c+IDwvZz4KDTwvc3ZnPg==';
+
+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: 300px;\n  border-radius: var(--emw--border-radius-large, 20px);\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, 20px);\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, 20px);\n  z-index: 2;\n  top: 20px;\n  filter: blur(16px);\n  opacity: 0.5;\n  transform: scale(1.01);\n}\n.ItemImage .ItemDetails > div {\n  position: relative;\n  height: auto;\n  max-width: 70%;\n  display: flex;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  margin: 0 20px;\n  padding: 24px 20px;\n  z-index: 10;\n  overflow: hidden;\n  align-items: center;\n}\n.ItemImage .Title {\n  font-size: var(--emw--font-size-2x-large, 32px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-typography, #D5F3DF);\n}\n.ItemImage .Title .FirstWord {\n  font-size: var(--emw--font-size-2x-large, 36px);\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-typography, #D5F3DF);\n}\n.ItemImage button {\n  position: relative;\n  width: 160px;\n  padding: 10px 15px;\n  color: var(--emw--button-text-color, #D5F3DF);\n  font-size: var(--emw--font-size-large, 20px);\n  border: var(--emw--button-border, 3px solid) var(--emw--button-border-color, #063B17);\n  border-radius: var(--emw--button-border-radius, 50px);\n  line-height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 20;\n  margin-left: 32px;\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, 16px);\n  margin-left: var(--emw--spacing-small-minus, 10px);\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 .ItemImage {\n    flex: auto;\n    width: 100%;\n    flex-grow: 1;\n    margin: 0;\n  }\n  .AboutUsWrapper .ItemDetails > div {\n    flex: 1 1 0;\n    display: flex;\n    border-radius: var(--emw--border-radius-medium, 5px);\n    gap: var(--emw--spacing-2x-small, 4px);\n    padding: 20px 10px;\n    align-items: center;\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}";
 
 const GeneralAboutUs = class {
   constructor(hostRef) {
@@ -167,6 +169,21 @@ const GeneralAboutUs = class {
         console.log('error ', err);
       });
     };
+    // end custom styling area
+    this.formatTitle = (title, language) => {
+      let firstWord, restOfTitle;
+      // Check for common languages that do not use space - here: Chinese, Japanese, Thai
+      if (['zh', 'ja', 'th'].includes(language)) {
+        firstWord = title.substring(0, 1);
+        restOfTitle = title.substring(1);
+      }
+      else {
+        const words = title.split(' ');
+        firstWord = words.shift();
+        restOfTitle = words.join(' ');
+      }
+      return index.h("div", { class: "Title" }, index.h("span", { class: "FirstWord" }, firstWord), "\u00A0", restOfTitle);
+    };
   }
   watchEndpoint(newValue, oldValue) {
     if (newValue && newValue != oldValue && this.cmsEndpoint) {
@@ -219,17 +236,20 @@ const GeneralAboutUs = class {
       this.limitStylingAppends = true;
     }
   }
-  // end custom styling area
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.hasErrors) {
       return (index.h("div", { class: "AboutUsError" }, index.h("div", { class: "ErrorInfo" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "AboutUsWrapper" }, index.h("div", { class: "ItemImage", style: { background: `url(${this.setImage(this.aboutUsData.images)}) no-repeat center center / cover` } }), index.h("div", { class: "ItemDetails" }, index.h("div", { class: "Title", innerHTML: (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.title }), index.h("div", { class: "Description", innerHTML: (_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.description }), index.h("button", { class: "Button", onClick: () => {
+      return (index.h("div", { ref: el => this.stylingContainer = el }, 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%),
+                              linear-gradient(to bottom left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
+                              linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%),
+                              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: () => {
           var _a, _b, _c, _d, _e;
           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);
-        } }, (_d = (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.button) === null || _d === void 0 ? void 0 : _d.buttonText)))));
+        } }, (_e = (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.button) === null || _e === void 0 ? void 0 :
+        _e.buttonText, index.h("img", { src: chevronSvg, alt: "right chevron", class: "Chevron" })))))));
     }
   }
   static get watchers() { return {

package/dist/collection/components/general-about-us/general-about-us.css

@@ -14,15 +14,16 @@ button {
 }
 
 .AboutUsError .ErrorInfo {
-  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
+  color: var(--emw--color-error, #ed0909);
 }
 
 .AboutUsWrapper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  background-color: var(--emw--color-background, #000000);
   width: 100%;
-  background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));
+  border-radius: var(--emw--border-radius-large, 15px);
   animation: fadeInAnimation ease 1.5s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
@@ -37,65 +38,110 @@ button {
   }
 }
 .ItemImage {
-  flex: auto;
-  max-width: 50%;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
   height: 300px;
-  border-radius: 5px;
+  border-radius: var(--emw--border-radius-large, 20px);
+  background: var(--emw--color-background, black);
 }
-
-.ItemDetails {
-  flex: 1 1 0;
+.ItemImage .ForegroundImage {
+  z-index: 3;
+  pointer-events: none;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.5s ease, filter 0.5s ease;
+  border-radius: var(--emw--border-radius-large, 20px);
+}
+.ItemImage .BackgroundImage {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.5s ease, filter 0.5s ease;
+  border-radius: var(--emw--border-radius-large, 20px);
+  z-index: 2;
+  top: 20px;
+  filter: blur(16px);
+  opacity: 0.5;
+  transform: scale(1.01);
+}
+.ItemImage .ItemDetails > div {
+  position: relative;
+  height: auto;
+  max-width: 70%;
   display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  border-radius: 5px;
+  border-radius: var(--emw--border-radius-medium, 5px);
   margin: 0 20px;
+  padding: 24px 20px;
+  z-index: 10;
+  overflow: hidden;
+  align-items: center;
 }
-
-.Title {
-  font-size: 24px;
-  font-weight: 700;
-  -webkit-text-fill-color: transparent;
-  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));
-  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));
+.ItemImage .Title {
+  font-size: var(--emw--font-size-2x-large, 32px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  color: var(--emw--color-typography, #D5F3DF);
+}
+.ItemImage .Title .FirstWord {
+  font-size: var(--emw--font-size-2x-large, 36px);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  background: var(--emw--color-primary, #1EC450);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-
-.Description {
-  font-size: 16px;
-  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));
+.ItemImage .Description {
+  font-size: var(--emw--font-size-small-plus, 16px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  color: var(--emw--color-typography, #D5F3DF);
 }
-
-button {
+.ItemImage button {
+  position: relative;
   width: 160px;
   padding: 10px 15px;
-  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));
-  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-  font-size: 16px;
-  border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-  border-radius: 5px;
+  color: var(--emw--button-text-color, #D5F3DF);
+  font-size: var(--emw--font-size-large, 20px);
+  border: var(--emw--button-border, 3px solid) var(--emw--button-border-color, #063B17);
+  border-radius: var(--emw--button-border-radius, 50px);
   line-height: 24px;
-  transition: all 1s;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  z-index: 20;
+  margin-left: 32px;
+  animation: ButtonEffect 4s linear infinite;
+  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));
+  background-size: 300% 100%;
 }
-button:hover {
-  background: linear-gradient(to bottom, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));
-  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-  transition: all 0.5s;
-  transform: translateY(-10px);
+.ItemImage button:hover {
+  opacity: 0.8;
 }
-button button::after {
-  content: "";
-  display: block;
-  background-color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+");
-  width: 24px;
-  height: 24px;
-  margin: 0 10px;
+.ItemImage button img.Chevron {
+  position: relative;
+  height: var(--emw--size-standard, 16px);
+  margin-left: var(--emw--spacing-small-minus, 10px);
+}
+@keyframes ButtonEffect {
+  0% {
+    background-position: 0% 50%;
+  }
+  33% {
+    background-position: 100% 50%;
+  }
+  66% {
+    background-position: 200% 50%;
+  }
+  100% {
+    background-position: 300% 50%;
+  }
 }
 
 @container (max-width: 475px) {
@@ -104,34 +150,35 @@ button button::after {
     flex-direction: column;
     justify-content: space-between;
     flex-wrap: wrap;
-    width: 100%;
-    gap: 20px;
-    padding-bottom: 20px;
-    background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));
+    gap: var(--emw--spacing-small-minus, 10px);
+    max-width: 100%;
+    background-color: var(--emw--color-background, #000000);
     animation: fadeInAnimation ease 1.5s;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
   }
-
-  .ItemImage {
+  .AboutUsWrapper .ItemImage {
     flex: auto;
     width: 100%;
-    max-width: unset;
     flex-grow: 1;
+    margin: 0;
   }
-
-  .ItemDetails {
+  .AboutUsWrapper .ItemDetails > div {
     flex: 1 1 0;
     display: flex;
-    flex-direction: column;
-    justify-content: space-around;
+    border-radius: var(--emw--border-radius-medium, 5px);
+    gap: var(--emw--spacing-2x-small, 4px);
+    padding: 20px 10px;
     align-items: center;
-    border-radius: 5px;
-    gap: 20px;
-    margin: 0 20px;
   }
-
-  .Description {
-    text-align: center;
+  .AboutUsWrapper .Description {
+    text-align: left;
+    font-size: var(--emw--font-size-small, 14px);
+    font-weight: var(--emw--font-weight-normal, 400);
+  }
+  .AboutUsWrapper button {
+    padding-bottom: 10px;
+    line-height: 15px;
+    padding: 10px;
   }
 }

package/dist/collection/components/general-about-us/general-about-us.js

@@ -1,6 +1,7 @@
 import { Component, Prop, State, Watch, h } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
 import { getDeviceCustom, checkDeviceType, getDevicePlatform } from '../../utils/utils';
+import chevronRight from '../../utils/chevron.svg';
 export class GeneralAboutUs {
   constructor() {
     /**
@@ -71,6 +72,24 @@ export class GeneralAboutUs {
         console.log('error ', err);
       });
     };
+    // end custom styling area
+    this.formatTitle = (title, language) => {
+      let firstWord, restOfTitle;
+      // Check for common languages that do not use space - here: Chinese, Japanese, Thai
+      if (['zh', 'ja', 'th'].includes(language)) {
+        firstWord = title.substring(0, 1);
+        restOfTitle = title.substring(1);
+      }
+      else {
+        const words = title.split(' ');
+        firstWord = words.shift();
+        restOfTitle = words.join(' ');
+      }
+      return h("div", { class: "Title" },
+        h("span", { class: "FirstWord" }, firstWord),
+        "\u00A0",
+        restOfTitle);
+    };
   }
   watchEndpoint(newValue, oldValue) {
     if (newValue && newValue != oldValue && this.cmsEndpoint) {
@@ -123,9 +142,8 @@ export class GeneralAboutUs {
       this.limitStylingAppends = true;
     }
   }
-  // end custom styling area
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.hasErrors) {
       return (h("div", { class: "AboutUsError" },
         h("div", { class: "ErrorInfo" }, translate('error', this.language))));
@@ -133,14 +151,21 @@ export class GeneralAboutUs {
     if (!this.isLoading) {
       return (h("div", { ref: el => this.stylingContainer = el },
         h("div", { class: "AboutUsWrapper" },
-          h("div", { class: "ItemImage", style: { background: `url(${this.setImage(this.aboutUsData.images)}) no-repeat center center / cover` } }),
-          h("div", { class: "ItemDetails" },
-            h("div", { class: "Title", innerHTML: (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.title }),
-            h("div", { class: "Description", innerHTML: (_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.description }),
-            h("button", { class: "Button", onClick: () => {
-                var _a, _b, _c, _d, _e;
-                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);
-              } }, (_d = (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.button) === null || _d === void 0 ? void 0 : _d.buttonText)))));
+          h("div", { class: "ItemImage" },
+            h("div", { class: "ForegroundImage", style: { background: `linear-gradient(to left, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%),
+                              linear-gradient(to bottom left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
+                              linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%),
+                              url(${this.setImage((_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.images)}) no-repeat center center / cover` } }),
+            h("img", { class: "BackgroundImage", src: this.setImage(this.aboutUsData.images), alt: "image" }),
+            h("div", { class: "ItemDetails" },
+              this.formatTitle((_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.title, this.language),
+              h("div", { class: "Description", innerHTML: (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.description }),
+              h("button", { class: "Button", onClick: () => {
+                  var _a, _b, _c, _d, _e;
+                  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);
+                } }, (_e = (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.button) === null || _e === void 0 ? void 0 :
+                _e.buttonText,
+                h("img", { src: chevronRight, alt: "right chevron", class: "Chevron" })))))));
     }
   }
   static get is() { return "general-about-us"; }

package/dist/collection/utils/chevron.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 185.343 185.343" xml:space="preserve" fill="#D5F3DF" stroke="#D5F3DF">
+
+
+
+

package/dist/components/general-about-us.js

@@ -90,7 +90,9 @@ const getDevicePlatform = () => {
   }
 };
 
-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(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));\n}\n\n.AboutUsWrapper {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\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  flex: auto;\n  max-width: 50%;\n  height: 300px;\n  border-radius: 5px;\n}\n\n.ItemDetails {\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-radius: 5px;\n  margin: 0 20px;\n}\n\n.Title {\n  font-size: 24px;\n  font-weight: 700;\n  -webkit-text-fill-color: transparent;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.Description {\n  font-size: 16px;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n}\n\nbutton {\n  width: 160px;\n  padding: 10px 15px;\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  font-size: 16px;\n  border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n  border-radius: 5px;\n  line-height: 24px;\n  transition: all 1s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\nbutton:hover {\n  background: linear-gradient(to bottom, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  transition: all 0.5s;\n  transform: translateY(-10px);\n}\nbutton button::after {\n  content: \"\";\n  display: block;\n  background-color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  mask-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+\");\n  width: 24px;\n  height: 24px;\n  margin: 0 10px;\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    width: 100%;\n    gap: 20px;\n    padding-bottom: 20px;\n    background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\n    animation: fadeInAnimation ease 1.5s;\n    animation-iteration-count: 1;\n    animation-fill-mode: forwards;\n  }\n\n  .ItemImage {\n    flex: auto;\n    width: 100%;\n    max-width: unset;\n    flex-grow: 1;\n  }\n\n  .ItemDetails {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    align-items: center;\n    border-radius: 5px;\n    gap: 20px;\n    margin: 0 20px;\n  }\n\n  .Description {\n    text-align: center;\n  }\n}";
+const chevronSvg = 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxODUuMzQzIDE4NS4zNDMiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IiNENUYzREYiIHN0cm9rZT0iI0Q1RjNERiI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8Zz4gPHBhdGggc3R5bGU9ImZpbGw6I2VjZjlmMDsiIGQ9Ik01MS43MDcsMTg1LjM0M2MtMi43NDEsMC01LjQ5My0xLjA0NC03LjU5My0zLjE0OWMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTgxLDAtMTUuMTc1IGw3NC4zNTItNzQuMzQ3TDQ0LjExNCwxOC4zMmMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTg3LDAtMTUuMTc1YzQuMTk0LTQuMTk0LDEwLjk4Ny00LjE5NCwxNS4xOCwwbDgxLjkzNCw4MS45MzQgYzQuMTk0LDQuMTk0LDQuMTk0LDEwLjk4NywwLDE1LjE3NWwtODEuOTM0LDgxLjkzOUM1Ny4yMDEsMTg0LjI5Myw1NC40NTQsMTg1LjM0Myw1MS43MDcsMTg1LjM0M3oiLz4gPC9nPiA8L2c+IDwvZz4KDTwvc3ZnPg==';
+
+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: 300px;\n  border-radius: var(--emw--border-radius-large, 20px);\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, 20px);\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, 20px);\n  z-index: 2;\n  top: 20px;\n  filter: blur(16px);\n  opacity: 0.5;\n  transform: scale(1.01);\n}\n.ItemImage .ItemDetails > div {\n  position: relative;\n  height: auto;\n  max-width: 70%;\n  display: flex;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  margin: 0 20px;\n  padding: 24px 20px;\n  z-index: 10;\n  overflow: hidden;\n  align-items: center;\n}\n.ItemImage .Title {\n  font-size: var(--emw--font-size-2x-large, 32px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-typography, #D5F3DF);\n}\n.ItemImage .Title .FirstWord {\n  font-size: var(--emw--font-size-2x-large, 36px);\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-typography, #D5F3DF);\n}\n.ItemImage button {\n  position: relative;\n  width: 160px;\n  padding: 10px 15px;\n  color: var(--emw--button-text-color, #D5F3DF);\n  font-size: var(--emw--font-size-large, 20px);\n  border: var(--emw--button-border, 3px solid) var(--emw--button-border-color, #063B17);\n  border-radius: var(--emw--button-border-radius, 50px);\n  line-height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 20;\n  margin-left: 32px;\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, 16px);\n  margin-left: var(--emw--spacing-small-minus, 10px);\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 .ItemImage {\n    flex: auto;\n    width: 100%;\n    flex-grow: 1;\n    margin: 0;\n  }\n  .AboutUsWrapper .ItemDetails > div {\n    flex: 1 1 0;\n    display: flex;\n    border-radius: var(--emw--border-radius-medium, 5px);\n    gap: var(--emw--spacing-2x-small, 4px);\n    padding: 20px 10px;\n    align-items: center;\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}";
 
 const GeneralAboutUs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -165,6 +167,21 @@ const GeneralAboutUs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
         console.log('error ', err);
       });
     };
+    // end custom styling area
+    this.formatTitle = (title, language) => {
+      let firstWord, restOfTitle;
+      // Check for common languages that do not use space - here: Chinese, Japanese, Thai
+      if (['zh', 'ja', 'th'].includes(language)) {
+        firstWord = title.substring(0, 1);
+        restOfTitle = title.substring(1);
+      }
+      else {
+        const words = title.split(' ');
+        firstWord = words.shift();
+        restOfTitle = words.join(' ');
+      }
+      return h("div", { class: "Title" }, h("span", { class: "FirstWord" }, firstWord), "\u00A0", restOfTitle);
+    };
   }
   watchEndpoint(newValue, oldValue) {
     if (newValue && newValue != oldValue && this.cmsEndpoint) {
@@ -217,17 +234,20 @@ const GeneralAboutUs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       this.limitStylingAppends = true;
     }
   }
-  // end custom styling area
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.hasErrors) {
       return (h("div", { class: "AboutUsError" }, h("div", { class: "ErrorInfo" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "AboutUsWrapper" }, h("div", { class: "ItemImage", style: { background: `url(${this.setImage(this.aboutUsData.images)}) no-repeat center center / cover` } }), h("div", { class: "ItemDetails" }, h("div", { class: "Title", innerHTML: (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.title }), h("div", { class: "Description", innerHTML: (_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.description }), h("button", { class: "Button", onClick: () => {
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "AboutUsWrapper" }, h("div", { class: "ItemImage" }, h("div", { class: "ForegroundImage", style: { background: `linear-gradient(to left, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%),
+                              linear-gradient(to bottom left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
+                              linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%),
+                              url(${this.setImage((_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.images)}) no-repeat center center / cover` } }), h("img", { class: "BackgroundImage", src: this.setImage(this.aboutUsData.images), alt: "image" }), h("div", { class: "ItemDetails" }, this.formatTitle((_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.title, this.language), h("div", { class: "Description", innerHTML: (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.description }), h("button", { class: "Button", onClick: () => {
           var _a, _b, _c, _d, _e;
           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);
-        } }, (_d = (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.button) === null || _d === void 0 ? void 0 : _d.buttonText)))));
+        } }, (_e = (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.button) === null || _e === void 0 ? void 0 :
+        _e.buttonText, h("img", { src: chevronSvg, alt: "right chevron", class: "Chevron" })))))));
     }
   }
   static get watchers() { return {

package/dist/esm/general-about-us.entry.js

@@ -90,7 +90,9 @@ const getDevicePlatform = () => {
   }
 };
 
-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(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));\n}\n\n.AboutUsWrapper {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\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  flex: auto;\n  max-width: 50%;\n  height: 300px;\n  border-radius: 5px;\n}\n\n.ItemDetails {\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-radius: 5px;\n  margin: 0 20px;\n}\n\n.Title {\n  font-size: 24px;\n  font-weight: 700;\n  -webkit-text-fill-color: transparent;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.Description {\n  font-size: 16px;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n}\n\nbutton {\n  width: 160px;\n  padding: 10px 15px;\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  font-size: 16px;\n  border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n  border-radius: 5px;\n  line-height: 24px;\n  transition: all 1s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\nbutton:hover {\n  background: linear-gradient(to bottom, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  transition: all 0.5s;\n  transform: translateY(-10px);\n}\nbutton button::after {\n  content: \"\";\n  display: block;\n  background-color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  mask-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+\");\n  width: 24px;\n  height: 24px;\n  margin: 0 10px;\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    width: 100%;\n    gap: 20px;\n    padding-bottom: 20px;\n    background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\n    animation: fadeInAnimation ease 1.5s;\n    animation-iteration-count: 1;\n    animation-fill-mode: forwards;\n  }\n\n  .ItemImage {\n    flex: auto;\n    width: 100%;\n    max-width: unset;\n    flex-grow: 1;\n  }\n\n  .ItemDetails {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    align-items: center;\n    border-radius: 5px;\n    gap: 20px;\n    margin: 0 20px;\n  }\n\n  .Description {\n    text-align: center;\n  }\n}";
+const chevronSvg = 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxODUuMzQzIDE4NS4zNDMiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IiNENUYzREYiIHN0cm9rZT0iI0Q1RjNERiI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8Zz4gPHBhdGggc3R5bGU9ImZpbGw6I2VjZjlmMDsiIGQ9Ik01MS43MDcsMTg1LjM0M2MtMi43NDEsMC01LjQ5My0xLjA0NC03LjU5My0zLjE0OWMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTgxLDAtMTUuMTc1IGw3NC4zNTItNzQuMzQ3TDQ0LjExNCwxOC4zMmMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTg3LDAtMTUuMTc1YzQuMTk0LTQuMTk0LDEwLjk4Ny00LjE5NCwxNS4xOCwwbDgxLjkzNCw4MS45MzQgYzQuMTk0LDQuMTk0LDQuMTk0LDEwLjk4NywwLDE1LjE3NWwtODEuOTM0LDgxLjkzOUM1Ny4yMDEsMTg0LjI5Myw1NC40NTQsMTg1LjM0Myw1MS43MDcsMTg1LjM0M3oiLz4gPC9nPiA8L2c+IDwvZz4KDTwvc3ZnPg==';
+
+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: 300px;\n  border-radius: var(--emw--border-radius-large, 20px);\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, 20px);\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, 20px);\n  z-index: 2;\n  top: 20px;\n  filter: blur(16px);\n  opacity: 0.5;\n  transform: scale(1.01);\n}\n.ItemImage .ItemDetails > div {\n  position: relative;\n  height: auto;\n  max-width: 70%;\n  display: flex;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  margin: 0 20px;\n  padding: 24px 20px;\n  z-index: 10;\n  overflow: hidden;\n  align-items: center;\n}\n.ItemImage .Title {\n  font-size: var(--emw--font-size-2x-large, 32px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-typography, #D5F3DF);\n}\n.ItemImage .Title .FirstWord {\n  font-size: var(--emw--font-size-2x-large, 36px);\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-typography, #D5F3DF);\n}\n.ItemImage button {\n  position: relative;\n  width: 160px;\n  padding: 10px 15px;\n  color: var(--emw--button-text-color, #D5F3DF);\n  font-size: var(--emw--font-size-large, 20px);\n  border: var(--emw--button-border, 3px solid) var(--emw--button-border-color, #063B17);\n  border-radius: var(--emw--button-border-radius, 50px);\n  line-height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 20;\n  margin-left: 32px;\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, 16px);\n  margin-left: var(--emw--spacing-small-minus, 10px);\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 .ItemImage {\n    flex: auto;\n    width: 100%;\n    flex-grow: 1;\n    margin: 0;\n  }\n  .AboutUsWrapper .ItemDetails > div {\n    flex: 1 1 0;\n    display: flex;\n    border-radius: var(--emw--border-radius-medium, 5px);\n    gap: var(--emw--spacing-2x-small, 4px);\n    padding: 20px 10px;\n    align-items: center;\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}";
 
 const GeneralAboutUs = class {
   constructor(hostRef) {
@@ -163,6 +165,21 @@ const GeneralAboutUs = class {
         console.log('error ', err);
       });
     };
+    // end custom styling area
+    this.formatTitle = (title, language) => {
+      let firstWord, restOfTitle;
+      // Check for common languages that do not use space - here: Chinese, Japanese, Thai
+      if (['zh', 'ja', 'th'].includes(language)) {
+        firstWord = title.substring(0, 1);
+        restOfTitle = title.substring(1);
+      }
+      else {
+        const words = title.split(' ');
+        firstWord = words.shift();
+        restOfTitle = words.join(' ');
+      }
+      return h("div", { class: "Title" }, h("span", { class: "FirstWord" }, firstWord), "\u00A0", restOfTitle);
+    };
   }
   watchEndpoint(newValue, oldValue) {
     if (newValue && newValue != oldValue && this.cmsEndpoint) {
@@ -215,17 +232,20 @@ const GeneralAboutUs = class {
       this.limitStylingAppends = true;
     }
   }
-  // end custom styling area
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.hasErrors) {
       return (h("div", { class: "AboutUsError" }, h("div", { class: "ErrorInfo" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "AboutUsWrapper" }, h("div", { class: "ItemImage", style: { background: `url(${this.setImage(this.aboutUsData.images)}) no-repeat center center / cover` } }), h("div", { class: "ItemDetails" }, h("div", { class: "Title", innerHTML: (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.title }), h("div", { class: "Description", innerHTML: (_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.description }), h("button", { class: "Button", onClick: () => {
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "AboutUsWrapper" }, h("div", { class: "ItemImage" }, h("div", { class: "ForegroundImage", style: { background: `linear-gradient(to left, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%),
+                              linear-gradient(to bottom left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
+                              linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%),
+                              url(${this.setImage((_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.images)}) no-repeat center center / cover` } }), h("img", { class: "BackgroundImage", src: this.setImage(this.aboutUsData.images), alt: "image" }), h("div", { class: "ItemDetails" }, this.formatTitle((_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.title, this.language), h("div", { class: "Description", innerHTML: (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.description }), h("button", { class: "Button", onClick: () => {
           var _a, _b, _c, _d, _e;
           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);
-        } }, (_d = (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.button) === null || _d === void 0 ? void 0 : _d.buttonText)))));
+        } }, (_e = (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.button) === null || _e === void 0 ? void 0 :
+        _e.buttonText, h("img", { src: chevronSvg, alt: "right chevron", class: "Chevron" })))))));
     }
   }
   static get watchers() { return {

package/dist/general-about-us/general-about-us.esm.js

@@ -1 +1 @@
-import{p as n,b as e}from"./p-0c90e5ab.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),n(s)})().then((n=>e([["p-4f27291f",[[1,"general-about-us",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],hasErrors:[32],isLoading:[32],limitStylingAppends:[32],device:[32]}]]]],n)));
+import{p as n,b as e}from"./p-0c90e5ab.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),n(s)})().then((n=>e([["p-743da1df",[[1,"general-about-us",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],hasErrors:[32],isLoading:[32],limitStylingAppends:[32],device:[32]}]]]],n)));

package/dist/general-about-us/p-743da1df.entry.js

@@ -0,0 +1 @@
+import{r as n,h as t}from"./p-0c90e5ab.js";const e=["ro","en","fr","ar","hu","hr"],i={en:{error:"Error",noResults:"Loading, please wait ..."},hu:{error:"Error",noResults:"Loading, please wait ..."},ro:{error:"Eroare",noResults:"Loading, please wait ..."},fr:{error:"Error",noResults:"Loading, please wait ..."},ar:{error:"خطأ",noResults:"Loading, please wait ..."},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ..."}};const r=class{constructor(e){n(this,e),this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.clientStyling="",this.clientStylingUrl="",this.hasErrors=!1,this.isLoading=!0,this.limitStylingAppends=!1,this.device="",this.handleClick=(n,t,e,i)=>{window.postMessage({type:"AboutUsClicked",buttonUrl:n,targetType:t,locations:e,externalLink:i||!1},window.location.href),"function"==typeof gtag&&gtag("event","GeneralAboutUs",{context:"AboutUsContent"})},this.setImage=n=>{let t="";switch(this.device=function(){const n=navigator.userAgent.toLowerCase(),t=screen.availWidth,e=screen.availHeight;if(n.includes("iphone"))return"mobile";if(n.includes("android")){if(e>t&&t<800)return"mobile";if(t>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":t=n.imageMobile;break;case"tablet":t=n.imageTablet;break;case"desktop":t=n.imageDesktop}return t},this.setClientStyling=()=>{let n=document.createElement("style");n.innerHTML=this.clientStyling,this.stylingContainer.prepend(n)},this.setClientStylingURL=()=>{let n=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(n.href).then((n=>n.text())).then((n=>{t.innerHTML=n,setTimeout((()=>{this.stylingContainer.prepend(t)}),1)})).catch((n=>{console.log("error ",n)}))},this.formatTitle=(n,e)=>{let i,r;if(["zh","ja","th"].includes(e))i=n.substring(0,1),r=n.substring(1);else{const t=n.split(" ");i=t.shift(),r=t.join(" ")}return t("div",{class:"Title"},t("span",{class:"FirstWord"},i)," ",r)}}watchEndpoint(n,t){n&&n!=t&&this.cmsEndpoint&&this.getAboutUs()}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getAboutUs()}componentDidLoad(){this.device=function(){const n=navigator.userAgent.toLowerCase();let t="";return t=n.includes("android")||n.includes("iphone")||n.includes("ipad")?function(){const n=screen.availWidth;return n<600?"mobile":n>=600&&n<1100?"tablet":void 0}():"desktop",t}()}getAboutUs(){let n=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);return n.searchParams.append("env",this.cmsEnv),n.searchParams.append("userRoles",this.userRoles),n.searchParams.append("device",(()=>{const n=(()=>{let n=window.navigator.userAgent.toLocaleLowerCase();return n.includes("android/i")?"android":n.includes("iphone/i")?"iPhone":n.includes("ipad/i")||n.includes("ipod/i")?"iPad":"PC"})();if(n)return"PC"===n?"dk":"mtWeb"})()),new Promise(((t,e)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{const e=["title","description","images","button","externalLink","targetType","locations"],i=Object.entries(n).filter((([n])=>e.includes(n))).reduce(((n,[t,e])=>(n[t]=e,n)),{});this.aboutUsData=i,t(i)})).catch((n=>{console.error(n),this.hasErrors=!0,e(n)})).finally((()=>{this.isLoading=!1}))}))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){var n,r,o,a,s;return this.hasErrors?t("div",{class:"AboutUsError"},t("div",{class:"ErrorInfo"},(()=>{const n=this.language;return i[void 0!==n&&e.includes(n)?n:"en"].error})())):this.isLoading?void 0:t("div",{ref:n=>this.stylingContainer=n},t("div",{class:"AboutUsWrapper"},t("div",{class:"ItemImage"},t("div",{class:"ForegroundImage",style:{background:`linear-gradient(to left, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%),\n                              linear-gradient(to bottom left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),\n                              linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%),\n                              url(${this.setImage(null===(n=this.aboutUsData)||void 0===n?void 0:n.images)}) no-repeat center center / cover`}}),t("img",{class:"BackgroundImage",src:this.setImage(this.aboutUsData.images),alt:"image"}),t("div",{class:"ItemDetails"},this.formatTitle(null===(r=this.aboutUsData)||void 0===r?void 0:r.title,this.language),t("div",{class:"Description",innerHTML:null===(o=this.aboutUsData)||void 0===o?void 0:o.description}),t("button",{class:"Button",onClick:()=>{var n,t,e,i,r;return this.handleClick(null===(t=null===(n=this.aboutUsData)||void 0===n?void 0:n.button)||void 0===t?void 0:t.buttonUrl,null===(e=this.aboutUsData)||void 0===e?void 0:e.targetType,null===(i=this.aboutUsData)||void 0===i?void 0:i.locations,null===(r=this.aboutUsData)||void 0===r?void 0:r.externalLink)}},null===(s=null===(a=this.aboutUsData)||void 0===a?void 0:a.button)||void 0===s?void 0:s.buttonText,t("img",{src:"data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxODUuMzQzIDE4NS4zNDMiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IiNENUYzREYiIHN0cm9rZT0iI0Q1RjNERiI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8Zz4gPHBhdGggc3R5bGU9ImZpbGw6I2VjZjlmMDsiIGQ9Ik01MS43MDcsMTg1LjM0M2MtMi43NDEsMC01LjQ5My0xLjA0NC03LjU5My0zLjE0OWMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTgxLDAtMTUuMTc1IGw3NC4zNTItNzQuMzQ3TDQ0LjExNCwxOC4zMmMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTg3LDAtMTUuMTc1YzQuMTk0LTQuMTk0LDEwLjk4Ny00LjE5NCwxNS4xOCwwbDgxLjkzNCw4MS45MzQgYzQuMTk0LDQuMTk0LDQuMTk0LDEwLjk4NywwLDE1LjE3NWwtODEuOTM0LDgxLjkzOUM1Ny4yMDEsMTg0LjI5Myw1NC40NTQsMTg1LjM0Myw1MS43MDcsMTg1LjM0M3oiLz4gPC9nPiA8L2c+IDwvZz4KDTwvc3ZnPg==",alt:"right chevron",class:"Chevron"}))))))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],userRoles:["watchEndpoint"],device:["watchEndpoint"]}}};r.style=":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: 300px;\n  border-radius: var(--emw--border-radius-large, 20px);\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, 20px);\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, 20px);\n  z-index: 2;\n  top: 20px;\n  filter: blur(16px);\n  opacity: 0.5;\n  transform: scale(1.01);\n}\n.ItemImage .ItemDetails > div {\n  position: relative;\n  height: auto;\n  max-width: 70%;\n  display: flex;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  margin: 0 20px;\n  padding: 24px 20px;\n  z-index: 10;\n  overflow: hidden;\n  align-items: center;\n}\n.ItemImage .Title {\n  font-size: var(--emw--font-size-2x-large, 32px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-typography, #D5F3DF);\n}\n.ItemImage .Title .FirstWord {\n  font-size: var(--emw--font-size-2x-large, 36px);\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-typography, #D5F3DF);\n}\n.ItemImage button {\n  position: relative;\n  width: 160px;\n  padding: 10px 15px;\n  color: var(--emw--button-text-color, #D5F3DF);\n  font-size: var(--emw--font-size-large, 20px);\n  border: var(--emw--button-border, 3px solid) var(--emw--button-border-color, #063B17);\n  border-radius: var(--emw--button-border-radius, 50px);\n  line-height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 20;\n  margin-left: 32px;\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, 16px);\n  margin-left: var(--emw--spacing-small-minus, 10px);\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 .ItemImage {\n    flex: auto;\n    width: 100%;\n    flex-grow: 1;\n    margin: 0;\n  }\n  .AboutUsWrapper .ItemDetails > div {\n    flex: 1 1 0;\n    display: flex;\n    border-radius: var(--emw--border-radius-medium, 5px);\n    gap: var(--emw--spacing-2x-small, 4px);\n    padding: 20px 10px;\n    align-items: center;\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}";export{r as general_about_us}

package/dist/types/components/general-about-us/general-about-us.d.ts

@@ -39,5 +39,6 @@ export declare class GeneralAboutUs {
   setClientStyling: () => void;
   setClientStylingURL: () => void;
   componentDidRender(): void;
+  formatTitle: (title: string, language: string) => any;
   render(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-about-us",
-  "version": "1.36.1",
+  "version": "1.37.2",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/general-about-us/p-4f27291f.entry.js

@@ -1 +0,0 @@
-import{r as n,h as e}from"./p-0c90e5ab.js";const t=["ro","en","fr","ar","hu","hr"],o={en:{error:"Error",noResults:"Loading, please wait ..."},hu:{error:"Error",noResults:"Loading, please wait ..."},ro:{error:"Eroare",noResults:"Loading, please wait ..."},fr:{error:"Error",noResults:"Loading, please wait ..."},ar:{error:"خطأ",noResults:"Loading, please wait ..."},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ..."}};const r=class{constructor(e){n(this,e),this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.clientStyling="",this.clientStylingUrl="",this.hasErrors=!1,this.isLoading=!0,this.limitStylingAppends=!1,this.device="",this.handleClick=(n,e,t,o)=>{window.postMessage({type:"AboutUsClicked",buttonUrl:n,targetType:e,locations:t,externalLink:o||!1},window.location.href),"function"==typeof gtag&&gtag("event","GeneralAboutUs",{context:"AboutUsContent"})},this.setImage=n=>{let e="";switch(this.device=function(){const n=navigator.userAgent.toLowerCase(),e=screen.availWidth,t=screen.availHeight;if(n.includes("iphone"))return"mobile";if(n.includes("android")){if(t>e&&e<800)return"mobile";if(e>t&&t<800)return"tablet"}return"desktop"}(),this.device){case"mobile":e=n.imageMobile;break;case"tablet":e=n.imageTablet;break;case"desktop":e=n.imageDesktop}return e},this.setClientStyling=()=>{let n=document.createElement("style");n.innerHTML=this.clientStyling,this.stylingContainer.prepend(n)},this.setClientStylingURL=()=>{let n=new URL(this.clientStylingUrl),e=document.createElement("style");fetch(n.href).then((n=>n.text())).then((n=>{e.innerHTML=n,setTimeout((()=>{this.stylingContainer.prepend(e)}),1)})).catch((n=>{console.log("error ",n)}))}}watchEndpoint(n,e){n&&n!=e&&this.cmsEndpoint&&this.getAboutUs()}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getAboutUs()}componentDidLoad(){this.device=function(){const n=navigator.userAgent.toLowerCase();let e="";return e=n.includes("android")||n.includes("iphone")||n.includes("ipad")?function(){const n=screen.availWidth;return n<600?"mobile":n>=600&&n<1100?"tablet":void 0}():"desktop",e}()}getAboutUs(){let n=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);return n.searchParams.append("env",this.cmsEnv),n.searchParams.append("userRoles",this.userRoles),n.searchParams.append("device",(()=>{const n=(()=>{let n=window.navigator.userAgent.toLocaleLowerCase();return n.includes("android/i")?"android":n.includes("iphone/i")?"iPhone":n.includes("ipad/i")||n.includes("ipod/i")?"iPad":"PC"})();if(n)return"PC"===n?"dk":"mtWeb"})()),new Promise(((e,t)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{const t=["title","description","images","button","externalLink","targetType","locations"],o=Object.entries(n).filter((([n])=>t.includes(n))).reduce(((n,[e,t])=>(n[e]=t,n)),{});this.aboutUsData=o,e(o)})).catch((n=>{console.error(n),this.hasErrors=!0,t(n)})).finally((()=>{this.isLoading=!1}))}))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){var n,r,i,a;return this.hasErrors?e("div",{class:"AboutUsError"},e("div",{class:"ErrorInfo"},(()=>{const n=this.language;return o[void 0!==n&&t.includes(n)?n:"en"].error})())):this.isLoading?void 0:e("div",{ref:n=>this.stylingContainer=n},e("div",{class:"AboutUsWrapper"},e("div",{class:"ItemImage",style:{background:`url(${this.setImage(this.aboutUsData.images)}) no-repeat center center / cover`}}),e("div",{class:"ItemDetails"},e("div",{class:"Title",innerHTML:null===(n=this.aboutUsData)||void 0===n?void 0:n.title}),e("div",{class:"Description",innerHTML:null===(r=this.aboutUsData)||void 0===r?void 0:r.description}),e("button",{class:"Button",onClick:()=>{var n,e,t,o,r;return this.handleClick(null===(e=null===(n=this.aboutUsData)||void 0===n?void 0:n.button)||void 0===e?void 0:e.buttonUrl,null===(t=this.aboutUsData)||void 0===t?void 0:t.targetType,null===(o=this.aboutUsData)||void 0===o?void 0:o.locations,null===(r=this.aboutUsData)||void 0===r?void 0:r.externalLink)}},null===(a=null===(i=this.aboutUsData)||void 0===i?void 0:i.button)||void 0===a?void 0:a.buttonText))))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],userRoles:["watchEndpoint"],device:["watchEndpoint"]}}};r.style=':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(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));\n}\n\n.AboutUsWrapper {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\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  flex: auto;\n  max-width: 50%;\n  height: 300px;\n  border-radius: 5px;\n}\n\n.ItemDetails {\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-radius: 5px;\n  margin: 0 20px;\n}\n\n.Title {\n  font-size: 24px;\n  font-weight: 700;\n  -webkit-text-fill-color: transparent;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.Description {\n  font-size: 16px;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n}\n\nbutton {\n  width: 160px;\n  padding: 10px 15px;\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  font-size: 16px;\n  border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n  border-radius: 5px;\n  line-height: 24px;\n  transition: all 1s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\nbutton:hover {\n  background: linear-gradient(to bottom, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  transition: all 0.5s;\n  transform: translateY(-10px);\n}\nbutton button::after {\n  content: "";\n  display: block;\n  background-color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+");\n  width: 24px;\n  height: 24px;\n  margin: 0 10px;\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    width: 100%;\n    gap: 20px;\n    padding-bottom: 20px;\n    background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\n    animation: fadeInAnimation ease 1.5s;\n    animation-iteration-count: 1;\n    animation-fill-mode: forwards;\n  }\n\n  .ItemImage {\n    flex: auto;\n    width: 100%;\n    max-width: unset;\n    flex-grow: 1;\n  }\n\n  .ItemDetails {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    align-items: center;\n    border-radius: 5px;\n    gap: 20px;\n    margin: 0 20px;\n  }\n\n  .Description {\n    text-align: center;\n  }\n}';export{r as general_about_us}