@tolgee/core 4.6.0-rc.b9eec4f.0 → 4.6.0

package/dist/tolgee.cjs.js

@@ -530,9 +530,9 @@ var TranslationService = /** @class */ (function () {
                         return [4 /*yield*/, this.fetchPromises[lang]];
                     case 1:
                         _a.sent();
-                        this.eventService.LANGUAGE_LOADED.emit(lang);
                         _a.label = 2;
                     case 2:
+                        this.eventService.LANGUAGE_LOADED.emit(lang);
                         this.fetchPromises[lang] = undefined;
                         return [2 /*return*/, this.translationsCache.get(lang)];
                 }
@@ -1686,6 +1686,7 @@ var TolgeeConfig = /** @class */ (function () {
         this.passToParent = ['option', 'optgroup'];
         this.restrictedElements = ['script', 'style'];
         this.highlightColor = 'rgb(255, 0, 0)';
+        this.highlightWidth = 5;
         this.wrapperMode = 'text';
         /**
          * When true, fallback language will be preloaded on Tolgee.run
@@ -1786,7 +1787,7 @@ var PluginManager = /** @class */ (function () {
         this.handshake = function () {
             var sharedConfiguration = __assign(__assign({}, _this.properties), { config: __assign(__assign({}, _this.properties.config), { 
                     //remove properties, which cannot be sent by window.postMessage
-                    staticData: undefined, targetElement: undefined, _targetElement: undefined, ui: undefined }), uiPresent: Boolean(_this.properties.config.ui), uiVersion: "4.6.0-rc.b9eec4f.0" });
+                    staticData: undefined, targetElement: undefined, _targetElement: undefined, ui: undefined }), uiPresent: Boolean(_this.properties.config.ui), uiVersion: "4.6.0" });
             var timer = null;
             var ping = function () {
                 _this.messages.send('TOLGEE_READY', sharedConfiguration);
@@ -1886,14 +1887,15 @@ var Messages = /** @class */ (function () {
     return Messages;
 }());
 
-var BORDER_WIDTH = 5;
 var HIGHLIGHTER_BASE_STYLE = {
     pointerEvents: 'none',
     position: 'fixed',
-    boxSizing: 'border-box',
+    boxSizing: 'content-box',
     zIndex: String(Number.MAX_SAFE_INTEGER),
     contain: 'layout',
     display: 'block',
+    borderStyle: 'solid',
+    borderRadius: '4px',
 };
 var HighlightFunctionsInitializer = /** @class */ (function () {
     function HighlightFunctionsInitializer(properties) {
@@ -1906,6 +1908,8 @@ var HighlightFunctionsInitializer = /** @class */ (function () {
     HighlightFunctionsInitializer.prototype.initHighlightFunction = function (element) {
         var _this = this;
         element._tolgee.highlight = function () {
+            var highlightColor = _this.properties.config.highlightColor;
+            var highlightWidth = _this.properties.config.highlightWidth;
             if (!element.isConnected) {
                 return;
             }
@@ -1917,16 +1921,16 @@ var HighlightFunctionsInitializer = /** @class */ (function () {
                     var _b = __read(_a, 2), key = _b[0], value = _b[1];
                     highlightEl.style[key] = value;
                 });
-                highlightEl.style.border = "".concat(BORDER_WIDTH, "px solid ").concat(_this.properties.config.highlightColor);
+                highlightEl.style.borderColor = highlightColor;
                 element._tolgee.highlightEl = highlightEl;
                 document.body.appendChild(highlightEl);
             }
             var shape = element.getBoundingClientRect();
-            highlightEl.style.top = shape.top - BORDER_WIDTH + 'px';
-            highlightEl.style.left = shape.left - BORDER_WIDTH + 'px';
-            highlightEl.style.width = shape.width + 2 * BORDER_WIDTH + 'px';
-            highlightEl.style.height = shape.height + 2 * BORDER_WIDTH + 'px';
-            highlightEl.style.display = 'block';
+            highlightEl.style.borderWidth = highlightWidth + 'px';
+            highlightEl.style.top = shape.top - highlightWidth + 'px';
+            highlightEl.style.left = shape.left - highlightWidth + 'px';
+            highlightEl.style.width = shape.width + 'px';
+            highlightEl.style.height = shape.height + 'px';
         };
     };
     HighlightFunctionsInitializer.prototype.initUnhighlightFunction = function (element) {
@@ -3058,8 +3062,7 @@ var Tolgee = /** @class */ (function () {
     });
     Object.defineProperty(Tolgee.prototype, "onLangLoaded", {
         /**
-         * Is emitted when language translations are loaded for the first time.
-         * It is not emitted when language is changed and translations were loaded before.
+         * Is emitted when language is changed and loaded (including initial load)
          */
         get: function () {
             return this.dependencyService.eventService.LANGUAGE_LOADED;