@tolgee/core 2.5.1 → 2.8.2

package/README.md

@@ -1,10 +1,11 @@
+# Tolgee core library
 ![test workflow](https://github.com/tolgee/tolgee-js/actions/workflows/test.yml/badge.svg)
 ![@tolgee/core version](https://img.shields.io/npm/v/@tolgee/core?label=%40tolgee%2Fcore)
 ![types typescript](https://img.shields.io/badge/Types-Typescript-blue)
 [![twitter](https://img.shields.io/twitter/follow/Tolgee_i18n?style=social)](https://twitter.com/Tolgee_i18n)
 [![github stars](https://img.shields.io/github/stars/tolgee/tolgee-js?style=social)](https://github.com/tolgee/tolgee-js)
 
-# Tolgee core library
+
 
 [<img src="https://raw.githubusercontent.com/tolgee/documentation/main/tolgee_logo_text.svg" alt="Tolgee" width="200" />](https://tolgee.io)
 

package/dist/tolgee.cjs.js

@@ -129,23 +129,6 @@ var TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = 'data-tolgee-key-only';
 var NodeHelper = /** @class */ (function () {
     function NodeHelper() {
     }
-    NodeHelper.evaluateGenerator = function (expression, targetNode) {
-        var node, evaluated;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    evaluated = document.evaluate(expression, targetNode, undefined, XPathResult.ANY_TYPE);
-                    _a.label = 1;
-                case 1:
-                    if (!((node = evaluated.iterateNext()) !== null)) return [3 /*break*/, 3];
-                    return [4 /*yield*/, node];
-                case 2:
-                    _a.sent();
-                    return [3 /*break*/, 1];
-                case 3: return [2 /*return*/];
-            }
-        });
-    };
     NodeHelper.evaluate = function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -195,13 +178,31 @@ var NodeHelper = /** @class */ (function () {
             return true;
         }
         if (node instanceof Attr) {
-            var ownerContainsAttr = Object.values(node.ownerElement.attributes).indexOf(node) > -1;
+            var ownerContainsAttr = node.ownerElement &&
+                Object.values(node.ownerElement.attributes).indexOf(node) > -1;
             if (descendant.contains(node.ownerElement) && ownerContainsAttr) {
                 return true;
             }
         }
         return false;
     };
+    NodeHelper.evaluateGenerator = function (expression, targetNode) {
+        var node, evaluated;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    evaluated = document.evaluate(expression, targetNode, undefined, XPathResult.ANY_TYPE);
+                    _a.label = 1;
+                case 1:
+                    if (!((node = evaluated.iterateNext()) !== null)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, node];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 1];
+                case 3: return [2 /*return*/];
+            }
+        });
+    };
     return NodeHelper;
 }());
 
@@ -521,7 +522,7 @@ var ApiHttpService = /** @class */ (function () {
     };
     ApiHttpService.prototype.getUrl = function (path) {
         var querySeparator = path.indexOf('?') < 0 ? '?' : '&';
-        return this.properties.config.apiUrl + "/" + path + querySeparator + "ak=" + this.properties.config.apiKey;
+        return "".concat(this.properties.config.apiUrl, "/").concat(path).concat(querySeparator, "ak=").concat(this.properties.config.apiKey);
     };
     return ApiHttpService;
 }());
@@ -580,9 +581,9 @@ var TranslationService = /** @class */ (function () {
                             _e.trys.push([1, 3, , 7]);
                             languagesArray = __spreadArray([], __read(languages), false);
                             languagesQuery = languagesArray
-                                .map(function (l) { return "languages=" + l; })
+                                .map(function (l) { return "languages=".concat(l); })
                                 .join('&');
-                            return [4 /*yield*/, this.apiHttpService.fetchJson("v2/projects/translations?" + languagesQuery + "&filterKeyName=" + encodeURIComponent(key))];
+                            return [4 /*yield*/, this.apiHttpService.fetchJson("v2/projects/translations?".concat(languagesQuery, "&filterKeyName=").concat(encodeURIComponent(key)))];
                         case 2:
                             data = _e.sent();
                             translationData_1 = languagesArray.reduce(function (acc, curr) {
@@ -707,7 +708,7 @@ var TranslationService = /** @class */ (function () {
                 switch (_c.label) {
                     case 0:
                         this.coreService.checkScope('translations.edit');
-                        return [4 /*yield*/, this.apiHttpService.postJson("v2/projects/keys/" + id + "/complex-update", __assign(__assign({}, data), { screenshotUploadedImageIds: ((_a = data.screenshotUploadedImageIds) === null || _a === void 0 ? void 0 : _a.length)
+                        return [4 /*yield*/, this.apiHttpService.postJson("v2/projects/keys/".concat(id, "/complex-update"), __assign(__assign({}, data), { screenshotUploadedImageIds: ((_a = data.screenshotUploadedImageIds) === null || _a === void 0 ? void 0 : _a.length)
                                     ? data.screenshotUploadedImageIds
                                     : undefined, screenshotIdsToDelete: ((_b = data.screenshotIdsToDelete) === null || _b === void 0 ? void 0 : _b.length)
                                     ? data.screenshotIdsToDelete
@@ -865,7 +866,7 @@ var TranslationService = /** @class */ (function () {
                         }
                         _c.label = 3;
                     case 3:
-                        url = "" + (this.properties.config.filesUrlPrefix || '/') + language + ".json";
+                        url = "".concat(this.properties.config.filesUrlPrefix || '/').concat(language, ".json");
                         _c.label = 4;
                     case 4:
                         _c.trys.push([4, 10, , 11]);
@@ -890,14 +891,14 @@ var TranslationService = /** @class */ (function () {
                     case 8:
                         _c.sent();
                         // eslint-disable-next-line no-console
-                        console.error("Error parsing json retrieved from " + url + ".");
+                        console.error("Error parsing json retrieved from ".concat(url, "."));
                         this.setEmptyLanguageData(language);
                         return [3 /*break*/, 9];
                     case 9: return [3 /*break*/, 11];
                     case 10:
                         _c.sent();
                         // eslint-disable-next-line no-console
-                        console.error("Error fetching localization data from " + url + ".");
+                        console.error("Error fetching localization data from ".concat(url, "."));
                         this.setEmptyLanguageData(language);
                         return [3 /*break*/, 11];
                     case 11: return [2 /*return*/];
@@ -915,7 +916,7 @@ var TranslationService = /** @class */ (function () {
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, this.apiHttpService.fetchJson("v2/projects/translations/" + language)];
+                        return [4 /*yield*/, this.apiHttpService.fetchJson("v2/projects/translations/".concat(language))];
                     case 2:
                         data = _a.sent();
                         this.setLanguageData(language, data[language] || {});
@@ -1595,8 +1596,8 @@ function parseNumberSkeleton(tokens) {
 }
 
 var _a;
-var SPACE_SEPARATOR_START_REGEX = new RegExp("^" + SPACE_SEPARATOR_REGEX.source + "*");
-var SPACE_SEPARATOR_END_REGEX = new RegExp(SPACE_SEPARATOR_REGEX.source + "*$");
+var SPACE_SEPARATOR_START_REGEX = new RegExp("^".concat(SPACE_SEPARATOR_REGEX.source, "*"));
+var SPACE_SEPARATOR_END_REGEX = new RegExp("".concat(SPACE_SEPARATOR_REGEX.source, "*$"));
 function createLocation(start, end) {
     return { start: start, end: end };
 }
@@ -1843,7 +1844,7 @@ var Parser = /** @class */ (function () {
             return {
                 val: {
                     type: TYPE.literal,
-                    value: "<" + tagName + "/>",
+                    value: "<".concat(tagName, "/>"),
                     location: createLocation(startPosition, this.clonePosition()),
                 },
                 err: null,
@@ -2448,7 +2449,7 @@ var Parser = /** @class */ (function () {
         }
         var code = codePointAt(this.message, offset);
         if (code === undefined) {
-            throw Error("Offset " + offset + " is at invalid UTF-16 code unit boundary");
+            throw Error("Offset ".concat(offset, " is at invalid UTF-16 code unit boundary"));
         }
         return code;
     };
@@ -2516,7 +2517,7 @@ var Parser = /** @class */ (function () {
      */
     Parser.prototype.bumpTo = function (targetOffset) {
         if (this.offset() > targetOffset) {
-            throw Error("targetOffset " + targetOffset + " must be greater than or equal to the current offset " + this.offset());
+            throw Error("targetOffset ".concat(targetOffset, " must be greater than or equal to the current offset ").concat(this.offset()));
         }
         targetOffset = Math.min(targetOffset, this.message.length);
         while (true) {
@@ -2525,7 +2526,7 @@ var Parser = /** @class */ (function () {
                 break;
             }
             if (offset > targetOffset) {
-                throw Error("targetOffset " + targetOffset + " is at invalid UTF-16 code unit boundary");
+                throw Error("targetOffset ".concat(targetOffset, " is at invalid UTF-16 code unit boundary"));
             }
             this.bump();
             if (this.isEOF()) {
@@ -2991,28 +2992,28 @@ var FormatError = /** @class */ (function (_super) {
         return _this;
     }
     FormatError.prototype.toString = function () {
-        return "[formatjs Error: " + this.code + "] " + this.message;
+        return "[formatjs Error: ".concat(this.code, "] ").concat(this.message);
     };
     return FormatError;
 }(Error));
 var InvalidValueError = /** @class */ (function (_super) {
     __extends(InvalidValueError, _super);
     function InvalidValueError(variableId, value, options, originalMessage) {
-        return _super.call(this, "Invalid values for \"" + variableId + "\": \"" + value + "\". Options are \"" + Object.keys(options).join('", "') + "\"", ErrorCode.INVALID_VALUE, originalMessage) || this;
+        return _super.call(this, "Invalid values for \"".concat(variableId, "\": \"").concat(value, "\". Options are \"").concat(Object.keys(options).join('", "'), "\""), ErrorCode.INVALID_VALUE, originalMessage) || this;
     }
     return InvalidValueError;
 }(FormatError));
 var InvalidValueTypeError = /** @class */ (function (_super) {
     __extends(InvalidValueTypeError, _super);
     function InvalidValueTypeError(value, type, originalMessage) {
-        return _super.call(this, "Value for \"" + value + "\" must be of type " + type, ErrorCode.INVALID_VALUE, originalMessage) || this;
+        return _super.call(this, "Value for \"".concat(value, "\" must be of type ").concat(type), ErrorCode.INVALID_VALUE, originalMessage) || this;
     }
     return InvalidValueTypeError;
 }(FormatError));
 var MissingValueError = /** @class */ (function (_super) {
     __extends(MissingValueError, _super);
     function MissingValueError(variableId, originalMessage) {
-        return _super.call(this, "The intl string context variable \"" + variableId + "\" was not provided to the string \"" + originalMessage + "\"", ErrorCode.MISSING_VALUE, originalMessage) || this;
+        return _super.call(this, "The intl string context variable \"".concat(variableId, "\" was not provided to the string \"").concat(originalMessage, "\""), ErrorCode.MISSING_VALUE, originalMessage) || this;
     }
     return MissingValueError;
 }(FormatError));
@@ -3173,7 +3174,7 @@ originalMessage) {
             continue;
         }
         if (isPluralElement(el)) {
-            var opt = el.options["=" + value];
+            var opt = el.options["=".concat(value)];
             if (!opt) {
                 if (!Intl.PluralRules) {
                     throw new FormatError("Intl.PluralRules is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-pluralrules\"\n", ErrorCode.MISSING_INTL_API, originalMessage);
@@ -3457,7 +3458,7 @@ var TextService = /** @class */ (function () {
         get: function () {
             var escapedPrefix = this.escapeForRegExp(this.properties.config.inputPrefix);
             var escapedSuffix = this.escapeForRegExp(this.properties.config.inputSuffix);
-            return "(\\\\?)(" + escapedPrefix + "(.*?)" + escapedSuffix + ")";
+            return "(\\\\?)(".concat(escapedPrefix, "(.*?)").concat(escapedSuffix, ")");
         },
         enumerable: false,
         configurable: true
@@ -3617,12 +3618,12 @@ var TextService = /** @class */ (function () {
         var paramString = Object.entries(params)
             .map(function (_a) {
             var _b = __read(_a, 2), name = _b[0], value = _b[1];
-            return _this.escapeParam(name) + ":" + _this.escapeParam(value);
+            return "".concat(_this.escapeParam(name), ":").concat(_this.escapeParam(value));
         })
             .join(',');
-        paramString = paramString.length ? ":" + paramString : '';
-        var defaultString = defaultValue !== undefined ? "," + this.escapeParam(defaultValue) : '';
-        return "" + this.properties.config.inputPrefix + this.escapeParam(key) + defaultString + paramString + this.properties.config.inputSuffix;
+        paramString = paramString.length ? ":".concat(paramString) : '';
+        var defaultString = defaultValue !== undefined ? ",".concat(this.escapeParam(defaultValue)) : '';
+        return "".concat(this.properties.config.inputPrefix).concat(this.escapeParam(key)).concat(defaultString).concat(paramString).concat(this.properties.config.inputSuffix);
     };
     TextService.prototype.getTranslatedWithMetadata = function (text) {
         return __awaiter(this, void 0, void 0, function () {
@@ -3684,7 +3685,7 @@ var MouseEventHandler = /** @class */ (function () {
             }
         };
         element.addEventListener('mouseover', onMouseOver);
-        element.addEventListener('click', onClick);
+        element.addEventListener('click', onClick, { capture: true });
         var onMouseDownOrUp = function (e) {
             if (_this.areKeysDown()) {
                 e.stopPropagation();
@@ -3698,7 +3699,7 @@ var MouseEventHandler = /** @class */ (function () {
             element.removeEventListener('mousedown', onMouseDownOrUp);
             element.removeEventListener('mouseup', onMouseDownOrUp);
             element.removeEventListener('mouseover', onMouseOver);
-            element.removeEventListener('click', onClick);
+            element.removeEventListener('click', onClick, { capture: true });
             element.removeEventListener('mouseout', onMouseOut);
         };
     };
@@ -3719,11 +3720,13 @@ var MouseEventHandler = /** @class */ (function () {
         }
     };
     MouseEventHandler.prototype.onMouseOut = function (element) {
+        element._tolgee.preventClean = false;
         this.mouseOn.delete(element);
         this.mouseOnChanged.emit(this.getMouseOn());
     };
     MouseEventHandler.prototype.onMouseOver = function (element) {
         this.filterMouseOn();
+        element._tolgee.preventClean = true;
         this.mouseOn.delete(element); //to get in to last place
         this.mouseOn.add(element);
         this.mouseOnChanged.emit(this.getMouseOn());
@@ -3785,40 +3788,26 @@ var TranslationHighlighter = /** @class */ (function () {
         var _this = this;
         this.dependencies = dependencies;
         this.translationEdit = function (e, element) { return __awaiter(_this, void 0, void 0, function () {
-            var key;
+            var renderer, key;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        if (!(typeof this.renderer === 'object')) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.getKeyAndDefault(e, element)];
+                    case 0: return [4 /*yield*/, this.getRenderer()];
                     case 1:
+                        renderer = _a.sent();
+                        if (!(typeof renderer === 'object')) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.getKeyAndDefault(e, element)];
+                    case 2:
                         key = _a.sent();
                         if (key) {
-                            this.renderer.renderViewer(key.key, key.defaultValue);
+                            renderer.renderViewer(key.key, key.defaultValue);
                             return [2 /*return*/];
                         }
                         return [2 /*return*/];
-                    case 2:
-                        // eslint-disable-next-line no-console
-                        console.warn('Tolgee UI is not provided. To translate interactively provide tolgee ui constructor to "ui" configuration property. ' +
-                            'To disable highlighting use production mode.');
-                        return [2 /*return*/];
+                    case 3: return [2 /*return*/];
                 }
             });
         }); };
     }
-    Object.defineProperty(TranslationHighlighter.prototype, "renderer", {
-        get: function () {
-            if (this._renderer === undefined) {
-                if (typeof this.dependencies.properties.config.ui === 'function') {
-                    this._renderer = new this.dependencies.properties.config.ui(this.dependencies);
-                }
-            }
-            return this._renderer;
-        },
-        enumerable: false,
-        configurable: true
-    });
     TranslationHighlighter.getKeyOptions = function (node) {
         var nodes = Array.from(node._tolgee.nodes);
         return nodes.reduce(function (acc, curr) { return __spreadArray(__spreadArray([], __read(acc), false), __read(curr._tolgee.keys.map(function (k) { return ({
@@ -3836,9 +3825,70 @@ var TranslationHighlighter = /** @class */ (function () {
             }
         }); }); });
     };
+    TranslationHighlighter.prototype.getRenderer = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var possibleProviders, possibleProviders_1, possibleProviders_1_1, possibleProvider, constructorProvider, constructor, constructor, e_2_1;
+            var e_2, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!(this._renderer === undefined)) return [3 /*break*/, 11];
+                        possibleProviders = [
+                            this.dependencies.properties.config.ui,
+                            window['@tolgee/ui'],
+                        ];
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 8, 9, 10]);
+                        possibleProviders_1 = __values(possibleProviders), possibleProviders_1_1 = possibleProviders_1.next();
+                        _b.label = 2;
+                    case 2:
+                        if (!!possibleProviders_1_1.done) return [3 /*break*/, 7];
+                        possibleProvider = possibleProviders_1_1.value;
+                        if (!(typeof possibleProvider === 'function')) return [3 /*break*/, 6];
+                        _b.label = 3;
+                    case 3:
+                        _b.trys.push([3, 5, , 6]);
+                        constructorProvider = possibleProvider;
+                        return [4 /*yield*/, constructorProvider()];
+                    case 4:
+                        constructor = _b.sent();
+                        this._renderer = new constructor(this.dependencies);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        _b.sent();
+                        constructor = possibleProvider;
+                        this._renderer = new constructor(this.dependencies);
+                        return [3 /*break*/, 6];
+                    case 6:
+                        possibleProviders_1_1 = possibleProviders_1.next();
+                        return [3 /*break*/, 2];
+                    case 7: return [3 /*break*/, 10];
+                    case 8:
+                        e_2_1 = _b.sent();
+                        e_2 = { error: e_2_1 };
+                        return [3 /*break*/, 10];
+                    case 9:
+                        try {
+                            if (possibleProviders_1_1 && !possibleProviders_1_1.done && (_a = possibleProviders_1.return)) _a.call(possibleProviders_1);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                        return [7 /*endfinally*/];
+                    case 10:
+                        if (this._renderer === undefined) {
+                            // eslint-disable-next-line no-console
+                            console.warn('Tolgee UI is not provided. To translate interactively provide tolgee ui constructor to "ui" configuration property. ' +
+                                'To disable highlighting use production mode.');
+                        }
+                        _b.label = 11;
+                    case 11: return [2 /*return*/, this._renderer];
+                }
+            });
+        });
+    };
     TranslationHighlighter.prototype.getKeyAndDefault = function (mouseEvent, element) {
         return __awaiter(this, void 0, void 0, function () {
-            var keysWithDefaults, keySet, selectedKey_1, found;
+            var keysWithDefaults, keySet, renderer, selectedKey_1, found;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -3850,19 +3900,22 @@ var TranslationHighlighter = /** @class */ (function () {
                         }
                         keysWithDefaults = TranslationHighlighter.getKeyOptions(element);
                         keySet = new Set(keysWithDefaults.map(function (keyWithDefault) { return keyWithDefault.key; }));
-                        if (!(keySet.size > 1)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.renderer.getKey({
+                        if (!(keySet.size > 1)) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.getRenderer()];
+                    case 1:
+                        renderer = _a.sent();
+                        return [4 /*yield*/, renderer.getKey({
                                 keys: keySet,
                                 openEvent: mouseEvent,
                             })];
-                    case 1:
+                    case 2:
                         selectedKey_1 = _a.sent();
                         found = keysWithDefaults.find(function (kwd) { return kwd.key === selectedKey_1; });
                         if (found) {
                             return [2 /*return*/, found];
                         }
-                        _a.label = 2;
-                    case 2:
+                        _a.label = 3;
+                    case 3:
                         if (keySet.size === 1) {
                             return [2 /*return*/, keysWithDefaults[0]];
                         }
@@ -3901,10 +3954,12 @@ var ElementRegistrar = /** @class */ (function () {
         try {
             for (var _b = __values(this.registeredElements), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var element = _c.value;
-                this.cleanElementInactiveNodes(element);
-                if (element._tolgee.nodes.size === 0 &&
-                    !element._tolgee.wrappedWithElementOnlyKey) {
-                    this.cleanElement(element);
+                if (!element._tolgee.preventClean) {
+                    this.cleanElementInactiveNodes(element);
+                    if (element._tolgee.nodes.size === 0 &&
+                        !element._tolgee.wrappedWithElementOnlyKey) {
+                        this.cleanElement(element);
+                    }
                 }
             }
         }
@@ -3976,12 +4031,14 @@ var ElementRegistrar = /** @class */ (function () {
         }
     };
     ElementRegistrar.prototype.cleanElement = function (element) {
-        if (typeof element._tolgee.removeAllEventListeners === 'function') {
-            element._tolgee.removeAllEventListeners();
+        if (!element._tolgee.preventClean) {
+            if (typeof element._tolgee.removeAllEventListeners === 'function') {
+                element._tolgee.removeAllEventListeners();
+            }
+            element.removeAttribute(TOLGEE_ATTRIBUTE_NAME);
+            delete element._tolgee;
+            this.registeredElements.delete(element);
         }
-        element.removeAttribute(TOLGEE_ATTRIBUTE_NAME);
-        delete element._tolgee;
-        this.registeredElements.delete(element);
     };
     ElementRegistrar.prototype.getActiveNodes = function (element) {
         var _a, _b, node, e_5_1;
@@ -4045,7 +4102,7 @@ var AbstractHandler = /** @class */ (function () {
         return nodes.filter(function (n) {
             var e = NodeHelper.closestElement(n);
             return (restrictedElements.indexOf(e.tagName.toLowerCase()) === -1 &&
-                e.closest("[" + RESTRICTED_ASCENDANT_ATTRIBUTE + "=\"true\"]") === null);
+                e.closest("[".concat(RESTRICTED_ASCENDANT_ATTRIBUTE, "=\"true\"]")) === null);
         });
     };
     AbstractHandler.prototype.handleNodes = function (nodes) {
@@ -4171,7 +4228,7 @@ var TextHandler = /** @class */ (function (_super) {
                     case 0:
                         inputPrefix = this.properties.config.inputPrefix;
                         inputSuffix = this.properties.config.inputSuffix;
-                        xPath = "./descendant-or-self::text()[contains(., '" + inputPrefix + "') and contains(., '" + inputSuffix + "')]";
+                        xPath = "./descendant-or-self::text()[contains(., '".concat(inputPrefix, "') and contains(., '").concat(inputSuffix, "')]");
                         nodes = NodeHelper.evaluate(xPath, node);
                         filtered = this.filterRestricted(nodes);
                         return [4 /*yield*/, this.handleNodes(filtered)];
@@ -4220,7 +4277,7 @@ var AttributeHandler = /** @class */ (function (_super) {
                     case 4:
                         if (!!attributes_1_1.done) return [3 /*break*/, 7];
                         attribute = attributes_1_1.value;
-                        expression = "descendant-or-self::" + tag + "/@" + attribute + "[contains(., '" + inputPrefix + "') and contains(., '" + inputSuffix + "')]";
+                        expression = "descendant-or-self::".concat(tag, "/@").concat(attribute, "[contains(., '").concat(inputPrefix, "') and contains(., '").concat(inputSuffix, "')]");
                         nodes = NodeHelper.evaluate(expression, node);
                         return [4 /*yield*/, this.handleNodes(nodes)];
                     case 5:
@@ -4490,7 +4547,7 @@ var CoreService = /** @class */ (function () {
             });
         });
     };
-    CoreService.prototype.getScopes = function () {
+    CoreService.prototype.getApiKeyDetails = function () {
         return __awaiter(this, void 0, void 0, function () {
             var e_1;
             return __generator(this, function (_a) {
@@ -4498,8 +4555,7 @@ var CoreService = /** @class */ (function () {
                     case 0:
                         _a.trys.push([0, 2, , 3]);
                         return [4 /*yield*/, this.apiHttpService.fetchJson("v2/api-keys/current")];
-                    case 1: return [2 /*return*/, (_a.sent())
-                            .scopes];
+                    case 1: return [2 /*return*/, _a.sent()];
                     case 2:
                         e_1 = _a.sent();
                         // eslint-disable-next-line no-console
@@ -4539,7 +4595,7 @@ var WrappedHandler = /** @class */ (function (_super) {
             var xPath, nodes, filtered;
             var _this = this;
             return __generator(this, function (_a) {
-                xPath = "./descendant-or-self::*[@" + TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE + "]";
+                xPath = "./descendant-or-self::*[@".concat(TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE, "]");
                 nodes = NodeHelper.evaluate(xPath, node);
                 filtered = this.filterRestricted(nodes);
                 filtered.forEach(function (element) {
@@ -4753,7 +4809,7 @@ var ScreenshotService = /** @class */ (function () {
     ScreenshotService.prototype.deleteImages = function (ids) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
-                return [2 /*return*/, this.apiHttpService.post("v2/image-upload/" + ids.join(','), undefined, {
+                return [2 /*return*/, this.apiHttpService.post("v2/image-upload/".concat(ids.join(',')), undefined, {
                         method: 'delete',
                     })];
             });
@@ -4892,7 +4948,7 @@ var Tolgee = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         if (!(this.properties.config.mode === 'development')) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.loadScopes()];
+                        return [4 /*yield*/, this.loadApiKeyDetails()];
                     case 1:
                         _a.sent();
                         _a.label = 2;
@@ -4947,7 +5003,7 @@ var Tolgee = /** @class */ (function () {
                             orEmpty = props.orEmpty;
                         }
                         if (!(this.properties.config.mode === 'development' && !noWrap)) return [3 /*break*/, 3];
-                        return [4 /*yield*/, this.loadScopes()];
+                        return [4 /*yield*/, this.loadApiKeyDetails()];
                     case 1:
                         _a.sent();
                         return [4 /*yield*/, this.translationService.loadTranslations()];
@@ -4978,19 +5034,19 @@ var Tolgee = /** @class */ (function () {
         }
         return this.dependencyStore.textService.instant(key, params, undefined, orEmpty, defaultValue);
     };
-    Tolgee.prototype.loadScopes = function () {
+    Tolgee.prototype.loadApiKeyDetails = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var details;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
                         if (!(this.properties.scopes === undefined)) return [3 /*break*/, 2];
-                        _a = this.properties;
-                        return [4 /*yield*/, this.dependencyStore.coreService.getScopes()];
+                        return [4 /*yield*/, this.dependencyStore.coreService.getApiKeyDetails()];
                     case 1:
-                        _a.scopes =
-                            _b.sent();
-                        _b.label = 2;
+                        details = _a.sent();
+                        this.properties.scopes = details.scopes;
+                        this.properties.projectId = details.projectId;
+                        _a.label = 2;
                     case 2: return [2 /*return*/];
                 }
             });